Merge branch '5.4-before-craziness'

doc/includes/alert/examples_alert_aria.html

@@ -0,0 +1,8 @@
+{{#markdown}}
+```html
+<div id="mainAlert1" data-alert class="alert-box" tabindex="0" aria-live="assertive" role="dialogalert">
+  Your content goes here
+  <button href="#" tabindex="0" class="close" aria-label="Close Alert">&times;</button>
+</div>
+```
+{{/markdown}}

doc/includes/alert/examples_alert_aria_rendered.html

@@ -0,0 +1,4 @@
+<div id="mainAlert1" data-alert class="alert-box" tabindex="0" aria-live="assertive" role="dialogalert">
+  Your content goes here
+  <button href="#" tabindex="0" class="close" aria-label="Close Alert">&times;</button>
+</div>

doc/includes/form/examples_form_labels.html

@@ -8,7 +8,7 @@
     </div>
   </div>
   <div class="row">
-    <div class="large-6 columns">
+    <div class="large-12 columns">
       <div class="row collapse">
         <div class="small-10 columns">
           <input type="text" placeholder="Hex Value">
@@ -18,15 +18,49 @@
         </div>
       </div>
     </div>
+  </div>
+  <div class="row">
     <div class="large-6 columns">
-      <div class="row collapse">
+      <div class="row collapse prefix-radius">
+        <div class="small-3 columns">
+          <span class="prefix">Label</span>
+        </div>
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+      </div>
+    </div>
+    <div class="large-6 columns">
+      <div class="row collapse postfix-radius">
         <div class="small-9 columns">
           <input type="text" placeholder="Value">
         </div>
         <div class="small-3 columns">
-          <span class="postfix radius">Label</span>
+          <span class="postfix">Label</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="large-6 columns">
+      <div class="row collapse prefix-round">
+        <div class="small-3 columns">
+          <a href="#" class="button prefix">Go</a>
+        </div>
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+      </div>
+    </div>
+    <div class="large-6 columns">
+      <div class="row collapse postfix-round">
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+        <div class="small-3 columns">
+          <a href="#" class="button postfix">Go</a>
         </div>
       </div>
     </div>
   </div>
-</form>
+</form>

doc/includes/form/examples_form_labels_rendered.html

@@ -10,7 +10,7 @@
     </div>
   </div>
   <div class="row">
-    <div class="large-6 columns">
+    <div class="large-12 columns">
       <div class="row collapse">
         <div class="small-10 columns">
           <input type="text" placeholder="Hex Value">
@@ -20,17 +20,51 @@
         </div>
       </div>
     </div>
+  </div>
+  <div class="row">
     <div class="large-6 columns">
-      <div class="row collapse">
+      <div class="row collapse prefix-radius">
+        <div class="small-3 columns">
+          <span class="prefix">Label</span>
+        </div>
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+      </div>
+    </div>
+    <div class="large-6 columns">
+      <div class="row collapse postfix-radius">
         <div class="small-9 columns">
           <input type="text" placeholder="Value">
         </div>
         <div class="small-3 columns">
-          <span class="postfix radius">Label</span>
+          <span class="postfix">Label</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="large-6 columns">
+      <div class="row collapse prefix-round">
+        <div class="small-3 columns">
+          <a href="#" class="button prefix">Go</a>
+        </div>
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+      </div>
+    </div>
+    <div class="large-6 columns">
+      <div class="row collapse postfix-round">
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+        <div class="small-3 columns">
+          <a href="#" class="button postfix">Go</a>
         </div>
       </div>
     </div>
   </div>
 </form>
 ```
-{{/markdown}}
+{{/markdown}}

doc/includes/icon-bar/examples_icon_bar_iconfont.html

@@ -18,4 +18,4 @@
   </a>
 </div>
 ```
-{{/markdown}}
+{{/markdown}}

doc/includes/icon-bar/examples_icon_bar_iconfont_aria.html

@@ -1,21 +1,21 @@
 {{#markdown}}
 ```html
-<div class="icon-bar five-up">
-  <a class="item" aria-label="Home">
+<div class="icon-bar five-up" role="navigation">
+  <a class="item" role="button" tabindex="0" aria-label="home">
     <i class="fi-home"></i>
   </a>
-  <a class="item" aria-label="Bookmark">
+  <a class="item" role="button" tabindex="0" aria-label="Bookmark">
     <i class="fi-bookmark"></i>
   </a>
-  <a class="item" aria-label="Information">
+  <a class="item" role="button" tabindex="0" aria-label="Information">
     <i class="fi-info"></i>
   </a>
-  <a class="item" aria-label="Mail">
+  <a class="item" role="button" tabindex="0" aria-label="Mail">
     <i class="fi-mail"></i>
   </a>
-  <a class="item" aria-label="Like">
-    <i class="fi-like" ></i>
+  <a class="item" role="button" tabindex="0" aria-label="Like">
+    <i class="fi-like"></i>
   </a>
 </div>
 ```
-{{/markdown}}
+{{/markdown}}

doc/includes/icon-bar/examples_icon_bar_iconfont_aria_rendered.html

@@ -1,17 +1,17 @@
-<div class="icon-bar five-up">
-  <a class="item" aria-label="Home">
+<div class="icon-bar five-up" role="navigation">
+  <a class="item" role="button" tabindex="0" aria-label="home">
     <i class="fi-home"></i>
   </a>
-  <a class="item" aria-label="Bookmark">
+  <a class="item" role="button" tabindex="0" aria-label="Bookmark">
     <i class="fi-bookmark"></i>
   </a>
-  <a class="item" aria-label="Information">
+  <a class="item" role="button" tabindex="0" aria-label="Information">
     <i class="fi-info"></i>
   </a>
-  <a class="item" aria-label="Mail">
+  <a class="item" role="button" tabindex="0" aria-label="Mail">
     <i class="fi-mail"></i>
   </a>
-  <a class="item" aria-label="Like">
-    <i class="fi-like" ></i>
+  <a class="item" role="button" tabindex="0" aria-label="Like">
+    <i class="fi-like"></i>
   </a>
 </div>

doc/includes/icon-bar/examples_icon_bar_text_aria.html

@@ -0,0 +1,26 @@
+{{#markdown}}
+```html
+<div class="icon-bar five-up" role="navigation">
+  <a class="item" aria-labeledby="#itemlabel1">
+    <img src="../assets/img/images/fi-home.svg" >
+    <label id='itemlabel1'>Home</label>
+  </a>
+  <a class="item" aria-labeledby="#itemlabel2">
+    <img src="../assets/img/images/fi-bookmark.svg" >
+    <label id='itemlabel2'>Bookmark</label>
+  </a>
+  <a class="item" aria-labeledby="#itemlabel3">
+    <img src="../assets/img/images/fi-info.svg" >
+    <label id='itemlabel3'>Info</label>
+  </a>
+  <a class="item" aria-labeledby="#itemlabel4">
+    <img src="../assets/img/images/fi-mail.svg" >
+    <label id='itemlabel4'>Mail</label>
+  </a>
+  <a class="item" aria-labeledby="#itemlabel5">
+    <img src="../assets/img/images/fi-like.svg" >
+    <label id='itemlabel5'>Like</label>
+  </a>
+</div>
+```
+{{/markdown}}

doc/includes/icon-bar/examples_icon_bar_text_aria_rendered.html

@@ -0,0 +1,22 @@
+<div class="icon-bar five-up" role="navigation">
+  <a class="item" role="button" tabindex="0" aria-labeledby="#itemlabel1">
+    <img src="../assets/img/images/fi-home.svg" >
+    <label id='itemlabel1'>Home</label>
+  </a>
+  <a class="item" role="button" tabindex="0" aria-labeledby="#itemlabel2">
+    <img src="../assets/img/images/fi-bookmark.svg" >
+    <label id='itemlabel2'>Bookmark</label>
+  </a>
+  <a class="item" role="button" tabindex="0" aria-labeledby="#itemlabel3">
+    <img src="../assets/img/images/fi-info.svg" >
+    <label id='itemlabel3'>Info</label>
+  </a>
+  <a class="item" role="button" tabindex="0" aria-labeledby="#itemlabel4">
+    <img src="../assets/img/images/fi-mail.svg" >
+    <label id='itemlabel4'>Mail</label>
+  </a>
+  <a class="item" role="button" tabindex="0" aria-labeledby="#itemlabel5">
+    <img src="../assets/img/images/fi-like.svg" >
+    <label id='itemlabel5'>Like</label>
+  </a>
+</div>

doc/includes/kitchen/examples_kitchen_type.html

@@ -1,3 +1,5 @@
+<div class="type-demo">
+
 <h1>h1. This is a very large header.</h1>
 <h2>h2. This is a large header.</h2>
 <h3>h3. This is a medium header.</h3>
@@ -65,4 +67,6 @@ <h5>Vcard</h5>
   <li class="locality">Caprica City</li>
   <li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
   <li class="email"><a href="#">g.baltar@example.com</a></li>
-</ul>
+</ul>
+
+</div>

doc/includes/range_sliders/examples_slider_variables.html

@@ -12,6 +12,7 @@
 $range-slider-radius: $global-radius;
 $range-slider-round: $global-rounded;
 $range-slider-bar-bg-color: #fafafa;
+$range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%);
 
 // Vertical bar styles
 $range-slider-vertical-bar-width: rem-calc(16);

doc/includes/switch/examples_switch_basic_aria.html

@@ -0,0 +1,4 @@
+<fieldset class="switch" tabindex="0">
+  <input id="exampleCheckboxSwitch4" type="checkbox">
+  <label for="exampleCheckboxSwitch4"></label>
+</fieldset>

doc/includes/switch/examples_switch_basic_aria_rendered.html

@@ -0,0 +1,8 @@
+{{#markdown}}
+```html
+<fieldset class="switch" tabindex="0">
+  <input id="exampleCheckboxSwitch4" type="checkbox">
+  <label for="exampleCheckboxSwitch4"></label>
+</fieldset>
+```
+{{/markdown}}

doc/includes/tabs/examples_tabs_basic.html

@@ -1,20 +1,20 @@
-<ul class="tabs" data-tab>
-  <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
-  <li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
-  <li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
-  <li class="tab-title"><a href="#panel2-4">Tab 4</a></li>
+<ul class="tabs" data-tab role="tablist">
+  <li class="tab-title active" role="presentational" ><a href="#panel2-1" role="tab" tabindex="0" aria-selected="true" controls="panel2-1">Tab 1</a></li>
+  <li class="tab-title" role="presentational" ><a href="#panel2-2" role="tab" tabindex="0"aria-selected="false" controls="panel2-2">Tab 2</a></li>
+  <li class="tab-title" role="presentational"><a href="#panel2-3" role="tab" tabindex="0" aria-selected="false" controls="panel2-3">Tab 3</a></li>
+  <li class="tab-title" role="presentational" ><a href="#panel2-4" role="tab" tabindex="0" aria-selected="false" controls="panel2-4">Tab 4</a></li>
 </ul>
 <div class="tabs-content">
-  <div class="content active" id="panel2-1">
-    <p>First panel content goes here...</p>
-  </div>
-  <div class="content" id="panel2-2">
-    <p>Second panel content goes here...</p>
-  </div>
-  <div class="content" id="panel2-3">
-    <p>Third panel content goes here...</p>
-  </div>
-  <div class="content" id="panel2-4">
-    <p>Fourth panel content goes here...</p>
-  </div>
-</div>
+  <section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">
+    <h2>First panel content goes here...</h2>
+  </section>
+  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">
+    <h2>Second panel content goes here...</h2>
+  </section>
+  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">
+    <h2>Third panel content goes here...</h2>
+  </section>
+  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-4">
+    <h2>Fourth panel content goes here...</h2>
+  </section>
+</div>

doc/includes/tabs/examples_tabs_basic_rendered.html

@@ -1,20 +1,24 @@
-<ul class="tabs" data-tab>
-  <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
-  <li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
-  <li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
-  <li class="tab-title"><a href="#panel2-4">Tab 4</a></li>
+<ul class="tabs" data-tab role="tablist">
+  <li class="tab-title active" role="presentational"><a href="#panel2-1" role="tab" tabindex="0" aria-selected="true" controls="panel2-1">Tab 1</a></li>
+  <li class="tab-title" role="presentational"><a href="#panel2-2" role="tab" tabindex="0" aria-selected="false" controls="panel2-2">Tab 2</a></li>
+  <li class="tab-title" role="presentational"><a href="#panel2-3" role="tab" tabindex="0" aria-selected="false" controls="panel2-3">Tab 3</a></li>
+  <li class="tab-title" role="presentational"><a href="#panel2-4" role="tab" tabindex="0" aria-selected="false" controls="panel2-4">Tab 4</a></li>
 </ul>
 <div class="tabs-content">
-  <div class="content active" id="panel2-1">
-    <p>This is the first panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, pariatur accusantium magni cumque vel voluptates illum repellendus sed dignissimos magnam! Deleniti, fugit tempore quibusdam molestias iusto asperiores incidunt sint nemo?</p>
-  </div>
-  <div class="content" id="panel2-2">
-    <p>This is the second panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, deleniti nam eaque sunt excepturi rerum hic labore tempora! Nihil, dolorem blanditiis ipsa veritatis minima dolores consequuntur deserunt sed culpa modi!</p>
-  </div>
-  <div class="content" id="panel2-3">
-    <p>This is the third panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, in, sunt, dolorem corrupti officia earum veritatis numquam provident exercitationem non impedit laborum dolor at repellat deleniti. Vero nobis quas tempore.</p>
-  </div>
-  <div class="content" id="panel2-4">
-    <p>This is the fourth panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, veritatis, a, nisi, repellat fugit animi consectetur voluptas eligendi et iure voluptatibus neque ullam asperiores quae laboriosam praesentium suscipit amet deserunt.</p>
-  </div>
-</div>
+  <section id="panel2-1" role="tabpanel" aria-hidden="false" class="content active" >
+    <h2>This is the first panel of the basic tab example.</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, pariatur accusantium magni cumque vel voluptates illum repellendus sed dignissimos magnam! Deleniti, fugit tempore quibusdam molestias iusto asperiores incidunt sint nemo?</p>
+  </section>
+  <section id="panel2-2" role="tabpanel" aria-hidden="true" class="content">
+    <h2>This is the second panel of the basic tab example.</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, deleniti nam eaque sunt excepturi rerum hic labore tempora! Nihil, dolorem blanditiis ipsa veritatis minima dolores consequuntur deserunt sed culpa modi!</p>
+  </section>
+  <section id="panel2-3" role="tabpanel" aria-hidden="true" class="content">
+    <h2>This is the third panel of the basic tab example.</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, in, sunt, dolorem corrupti officia earum veritatis numquam provident exercitationem non impedit laborum dolor at repellat deleniti. Vero nobis quas tempore.</p>
+  </section>
+  <section id="panel2-4" role="tabpanel" aria-hidden="true" class="content" >
+   <h2> This is the fourth panel of the basic tab example.</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, veritatis, a, nisi, repellat fugit animi consectetur voluptas eligendi et iure voluptatibus neque ullam asperiores quae laboriosam praesentium suscipit amet deserunt.</p>
+  </section>
+</div>