Merge branch 'dev' into gridless

README.md

@@ -28,7 +28,7 @@ Pico uses simple native HTML tags as much as possible. Less than 10 .classes are
 No dependencies, package manager, external files, or JavaScript.
 
 **Responsive everything**  
-Elegant and consistent adaptative spacings and typography on all devices.
+Elegant and consistent adaptive spacings and typography on all devices.
 
 **Light or Dark mode**  
 Shipped with two beautiful color themes, automatically enabled according to the user preference.
@@ -70,9 +70,9 @@ npm install @picocss/pico
 
 ## Class-less version
 
-Pico provide a `.classless` version ([example](https://picocss.com/examples/classless)).
+Pico provides a `.classless` version ([example](https://picocss.com/examples/classless)).
 
-In this version, `header`, `main` and `footer` act as container.
+In this version, `header`, `main` and `footer` act as containers.
 
 Use the default `.classless` version if you need centered viewports:
 
@@ -184,4 +184,4 @@ Website and docs:
 Pico Library:
 - [Feather](https://feathericons.com/) Icons (Licensed [MIT](https://github.com/feathericons/feather/blob/master/LICENSE))
 - [Normalize.css](https://necolas.github.io/normalize.css/): CSS reset (Licensed [MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md))
-- [Sanitize.css](https://csstools.github.io/sanitize.css/): Cross-browser default styling (Licensed [CC0 1.0 Universal](https://github.com/csstools/sanitize.css/blob/main/LICENSE.md))
+- [Sanitize.css](https://csstools.github.io/sanitize.css/): Cross-browser default styling (Licensed [CC0 1.0 Universal](https://github.com/csstools/sanitize.css/blob/main/LICENSE.md))

css/pico.classless.css

@@ -21,6 +21,7 @@
   --block-spacing-horizontal: var(--spacing);
   --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
+  --form-label-font-weight: var(--font-weight);
   --transition: 0.2s ease-in-out;
 }
 @media (min-width: 576px) {
@@ -118,9 +119,6 @@ dialog > article {
 a {
   --text-decoration: none;
 }
-a.secondary, a.contrast {
-  --text-decoration: underline;
-}
 
 small {
   --font-size: 0.875em;
@@ -796,7 +794,7 @@ mark {
   padding: 0.125rem 0.25rem;
   background-color: var(--mark-background-color);
   color: var(--mark-color);
-  vertical-align: middle;
+  vertical-align: baseline;
 }
 
 blockquote {
@@ -982,6 +980,7 @@ button[disabled],
 input[type=submit][disabled],
 input[type=button][disabled],
 input[type=reset][disabled],
+a[role=button]:not([href]),
 a[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
@@ -1082,6 +1081,7 @@ label,
 fieldset legend {
   display: block;
   margin-bottom: calc(var(--spacing) * 0.25);
+  font-weight: var(--form-label-font-weight, var(--font-weight));
 }
 
 input:not([type=checkbox]):not([type=radio]),
@@ -1735,7 +1735,7 @@ code em {
 kbd {
   background-color: var(--code-kbd-background-color);
   color: var(--code-kbd-color);
-  vertical-align: middle;
+  vertical-align: baseline;
 }
 
 /**

css/pico.css

@@ -23,6 +23,7 @@
   --grid-spacing-horizontal: var(--spacing);
   --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
+  --form-label-font-weight: var(--font-weight);
   --transition: 0.2s ease-in-out;
 }
 @media (min-width: 576px) {
@@ -798,13 +799,16 @@ ul ~ h6 {
   margin-top: var(--typography-spacing-vertical);
 }
 
-hgroup {
+hgroup,
+.headings {
   margin-bottom: var(--typography-spacing-vertical);
 }
-hgroup > * {
+hgroup > *,
+.headings > * {
   margin-bottom: 0;
 }
-hgroup > *:last-child {
+hgroup > *:last-child,
+.headings > *:last-child {
   --color: var(--muted-color);
   --font-weight: unset;
   font-size: 1rem;
@@ -841,7 +845,7 @@ mark {
   padding: 0.125rem 0.25rem;
   background-color: var(--mark-background-color);
   color: var(--mark-color);
-  vertical-align: middle;
+  vertical-align: baseline;
 }
 
 blockquote {
@@ -1163,6 +1167,7 @@ button[disabled],
 input[type=submit][disabled],
 input[type=button][disabled],
 input[type=reset][disabled],
+a[role=button]:not([href]),
 a[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
@@ -1263,6 +1268,7 @@ label,
 fieldset legend {
   display: block;
   margin-bottom: calc(var(--spacing) * 0.25);
+  font-weight: var(--form-label-font-weight, var(--font-weight));
 }
 
 input:not([type=checkbox]):not([type=radio]),
@@ -1916,7 +1922,7 @@ code em {
 kbd {
   background-color: var(--code-kbd-background-color);
   color: var(--code-kbd-color);
-  vertical-align: middle;
+  vertical-align: baseline;
 }
 
 /**

css/pico.fluid.classless.css

@@ -21,6 +21,7 @@
   --block-spacing-horizontal: var(--spacing);
   --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
+  --form-label-font-weight: var(--font-weight);
   --transition: 0.2s ease-in-out;
 }
 @media (min-width: 576px) {
@@ -118,9 +119,6 @@ dialog > article {
 a {
   --text-decoration: none;
 }
-a.secondary, a.contrast {
-  --text-decoration: underline;
-}
 
 small {
   --font-size: 0.875em;
@@ -766,7 +764,7 @@ mark {
   padding: 0.125rem 0.25rem;
   background-color: var(--mark-background-color);
   color: var(--mark-color);
-  vertical-align: middle;
+  vertical-align: baseline;
 }
 
 blockquote {
@@ -952,6 +950,7 @@ button[disabled],
 input[type=submit][disabled],
 input[type=button][disabled],
 input[type=reset][disabled],
+a[role=button]:not([href]),
 a[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
@@ -1052,6 +1051,7 @@ label,
 fieldset legend {
   display: block;
   margin-bottom: calc(var(--spacing) * 0.25);
+  font-weight: var(--form-label-font-weight, var(--font-weight));
 }
 
 input:not([type=checkbox]):not([type=radio]),
@@ -1705,7 +1705,7 @@ code em {
 kbd {
   background-color: var(--code-kbd-background-color);
   color: var(--code-kbd-color);
-  vertical-align: middle;
+  vertical-align: baseline;
 }
 
 /**

css/pico.slim.css

@@ -26,6 +26,7 @@
   --grid-spacing-horizontal: var(--spacing);
   --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
+  --form-label-font-weight: var(--font-weight);
   --transition: 0.2s ease-in-out;
 }
 @media (min-width: 576px) {
@@ -727,13 +728,16 @@ ul ~ h6 {
   margin-top: var(--typography-spacing-vertical);
 }
 
-hgroup {
+hgroup,
+.headings {
   margin-bottom: var(--typography-spacing-vertical);
 }
-hgroup > * {
+hgroup > *,
+.headings > * {
   margin-bottom: 0;
 }
-hgroup > *:last-child {
+hgroup > *:last-child,
+.headings > *:last-child {
   --color: var(--muted-color);
   --font-weight: unset;
   font-size: 1rem;
@@ -770,7 +774,7 @@ mark {
   padding: 0.125rem 0.25rem;
   background-color: var(--mark-background-color);
   color: var(--mark-color);
-  vertical-align: middle;
+  vertical-align: baseline;
 }
 
 blockquote {
@@ -1091,6 +1095,7 @@ button[disabled],
 input[type=submit][disabled],
 input[type=button][disabled],
 input[type=reset][disabled],
+a[role=button]:not([href]),
 a[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
@@ -1191,6 +1196,7 @@ label,
 fieldset legend {
   display: block;
   margin-bottom: calc(var(--spacing) * 0.25);
+  font-weight: var(--form-label-font-weight, var(--font-weight));
 }
 
 input:not([type=checkbox]):not([type=radio]),

css/themes/default.css

@@ -19,6 +19,7 @@
   --grid-spacing-horizontal: var(--spacing);
   --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
+  --form-label-font-weight: var(--font-weight);
   --transition: 0.2s ease-in-out;
 }
 @media (min-width: 576px) {

docs/css/pico.docs.css

@@ -90,14 +90,13 @@ svg {
  */
 main > aside nav {
   width: 100%;
-  margin-bottom: calc(var(--block-spacing-vertical) * 2);
+  padding-bottom: var(--block-spacing-vertical);
 }
 @media (min-width: 992px) {
   main > aside nav {
     position: fixed;
     width: 200px;
     max-height: calc(100vh - 5.5rem);
-    margin-bottom: 0;
     overflow-x: hidden;
     overflow-y: auto;
   }
@@ -118,9 +117,6 @@ main > aside nav a#toggle-docs-navigation svg {
     display: none;
   }
 }
-main > aside nav.closed-on-mobile {
-  margin-bottom: var(--block-spacing-vertical);
-}
 main > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse {
   display: none;
 }

docs/forms.html

@@ -27,7 +27,7 @@
 &lt;/<b>form</b>&gt;</code></pre></footer></article><p>Disabled and validation states:</p><article aria-label="Validation states examples"><form class="grid"><input type="text" placeholder="Valid" aria-label="Valid" aria-invalid="false"> <input type="text" placeholder="Invalid" aria-label="Invalid" aria-invalid="true"> <input type="text" placeholder="Disabled" aria-label="Disabled" disabled="disabled"> <input type="text" value="Readonly" aria-label="Readonly" readonly="readonly"></form><footer class="code"><pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>&gt;
 &lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>aria-invalid</i>=<u>"true"</u>&gt;
 &lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>&gt;
-&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>&gt;</code></pre></footer></article><p><code>&lt;<b>fieldset</b>&gt;</code> is unstyled and acts as a container for radios and checkboxes, providing a consistent <code><i>margin-bottom</i></code> for the set.</p><p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p><article aria-label="Select, radios, checkboxes, switch examples"><label for="fruit">Fruit</label> <select id="fruit" required><option value="" selected="selected">Select a fruit…</option><option>Banana</option><option>Watermelon</option><option>Apple</option><option>Orange</option><option>Mango</option></select><fieldset><legend>Size</legend><label for="small"><input type="radio" id="small" name="size" value="small" checked="checked"> Small</label> <label for="medium"><input type="radio" id="medium" name="size" value="medium"> Medium</label> <label for="large"><input type="radio" id="large" name="size" value="large"> Large</label></fieldset><fieldset><label for="terms"><input type="checkbox" id="terms" name="terms"> I agree to the Terms and Conditions</label></fieldset><fieldset><label for="switch"><input type="checkbox" id="switch" name="switch" role="switch"> Publish on my profile</label></fieldset><footer class="code"><pre><code><em>&lt;!-- Select --&gt;</em>
+&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>&gt;</code></pre></footer></article><p><code>&lt;<b>fieldset</b>&gt;</code> is unstyled and acts as a container for radios and checkboxes, providing a consistent <code><i>margin-bottom</i></code> for the set.</p><p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p><article aria-label="Select, radios, checkboxes, switch examples"><label for="fruit">Fruit</label> <select id="fruit" required><option value="" selected="selected">Select a fruit…</option><option>Banana</option><option>Watermelon</option><option>Apple</option><option>Orange</option><option>Mango</option></select><fieldset><legend>Size</legend><label for="small"><input type="radio" id="small" name="size" value="small" checked="checked"> Small</label> <label for="medium"><input type="radio" id="medium" name="size" value="medium"> Medium</label> <label for="large"><input type="radio" id="large" name="size" value="large"> Large</label> <label for="extralarge"><input type="radio" id="extralarge" name="size" value="extralarge" disabled="disabled"> Extra Large</label></fieldset><fieldset><label for="terms"><input type="checkbox" id="terms" name="terms"> I agree to the Terms and Conditions</label> <label for="terms_sharing"><input type="checkbox" id="terms_sharing" name="terms_sharing" disabled="disabled" checked="checked"> I agree to share my information with partners</label></fieldset><fieldset><label for="switch"><input type="checkbox" id="switch" name="switch" role="switch"> Publish on my profile</label> <label for="switch_disabled"><input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled="disabled" checked="checked"> Publish on my profile my accomplishments</label></fieldset><footer class="code"><pre><code><em>&lt;!-- Select --&gt;</em>
 &lt;<b>label</b> <i>for</i>=<u>"fruit"</u>&gt;Fruit&lt;/<b>label</b>&gt;
 &lt;<b>select</b> <i>id</i>=<u>"fruit"</u> <i>required</i>&gt;
   &lt;<b>option</b> <i>value</i>=<u>""</u> <i>selected</i>&gt;Select a fruit…&lt;/<b>option</b>&gt;
@@ -49,22 +49,35 @@
     &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt;
     Large
   &lt;/<b>label</b>&gt;
+  &lt;/<b>label</b>&gt;
+  &lt;<b>label</b> <i>for</i>=<u>"extralarge"</u>&gt;
+    &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"extralarge"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"extralarge"</u> <i>disabled</i>&gt;
+    Extra Large
+  &lt;/<b>label</b>&gt;
 &lt;/<b>fieldset</b>&gt;
 
-<em>&lt;!-- Checkbox --&gt;</em>
+<em>&lt;!-- Checkboxes --&gt;</em>
 &lt;<b>fieldset</b>&gt;
   &lt;<b>label</b> <i>for</i>=<u>"terms"</u>&gt;
     &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>&gt;
     I agree to the Terms and Conditions
   &lt;/<b>label</b>&gt;
+  &lt;<b>label</b> <i>for</i>=<u>"terms_sharing"</u>&gt;
+    &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms_sharing"</u> <i>name</i>=<u>"terms_sharing"</u> <i>disabled checked</i>&gt;
+    I agree to share my information with partners
+  &lt;/<b>label</b>&gt;
 &lt;/<b>fieldset</b>&gt;
 
-<em>&lt;!-- Switch --&gt;</em>
+<em>&lt;!-- Switches --&gt;</em>
 &lt;<b>fieldset</b>&gt;
   &lt;<b>label</b> <i>for</i>=<u>"switch"</u>&gt;
     &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>&gt;
     Publish on my profile
   &lt;/<b>label</b>&gt;
+  &lt;<b>label</b> <i>for</i>=<u>"switch_disabled"</u>&gt;
+    &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch_disabled"</u> <i>name</i>=<u>"switch_disabled"</u> <i>role</i>=<u>"switch_disabled"</u> <i>disabled checked</i>&gt;
+    Publish on my profile my accomplishments
+  &lt;/<b>label</b>&gt;
 &lt;/<b>fieldset</b>&gt;</code></pre></footer></article><p>You can change a checkbox to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p><article aria-label="Indeterminate checkbox example"><label for="indeterminate-checkbox"><input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox"> Select all</label><script>document.getElementById("indeterminate-checkbox").indeterminate=!0</script><footer class="code"><pre><code>&lt;<b>script</b>&gt;
   <i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
 &lt;/<b>script</b>&gt;</code></pre></footer></article><p>Others input types:</p><article aria-label="File browser, range slider, date, time, color examples"><label for="file">File browser <input type="file" id="file" name="file"></label> <label for="range">Range slider <input type="range" min="0" max="100" value="50" id="range" name="range"></label> <label for="date">Date <input type="date" id="date" name="date"></label> <label for="time">Time <input type="time" id="time" name="time"></label> <label for="color">Color <input type="color" id="color" name="color" value="#0eaaaa"></label><footer class="code"><pre><code><em>&lt;!-- File browser --&gt;</em>

docs/modal.html

@@ -27,7 +27,7 @@
 &lt;/<b>dialog</b>&gt;</code></pre><hgroup><h2>Live demo</h2><h3>Toggle a modal by clicking the button below.</h3></hgroup><article><button class="contrast" data-target="modal-example" onclick="toggleModal(event)">Launch demo modal</button><footer class="code"><pre><code><em>&lt;!-- Button to trigger the modal --&gt;</em>
 &lt;<b>button</b> <i>class</i>=<u>"contrast"</u>
   <i>data-target</i>=<u>"modal-example"</u>
-  <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+  <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
   Launch demo modal
 &lt;/<b>button</b>&gt;
 
@@ -38,7 +38,7 @@
       <i>aria-label</i>=<u>"Close"</u>&gt;
       <i>class</i>=<u>"close"</u>
       <i>data-target</i>=<u>"modal-example"</u>
-      <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+      <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
     &lt;/<b>a</b>&gt;
     &lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt;
     &lt;<b>p</b>&gt;
@@ -51,13 +51,13 @@
         <i>role</i>=<u>"button"</u>&gt;
         <i>class</i>=<u>"secondary"</u>
         <i>data-target</i>=<u>"modal-example"</u>
-        <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+        <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
         Cancel
       &lt;/<b>a</b>&gt;
       &lt;<b>a</b> <i>href</i>=<u>"#confirm"</u>
         <i>role</i>=<u>"button"</u>
         <i>data-target</i>=<u>"modal-example"</u>
-        <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+        <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
         Confirm
       &lt;/<b>a</b>&gt;
     &lt;/<b>footer</b>&gt;

docs/scss/layout/_aside.scss

@@ -6,13 +6,12 @@ main > aside {
 
   nav {
     width: 100%;
-    margin-bottom: calc(var(--block-spacing-vertical) * 2);
+    padding-bottom: var(--block-spacing-vertical);
   
     @media (min-width: map-get($breakpoints, "lg")) {
       position: fixed;
       width: 200px;
       max-height: calc(100vh - 5.5rem);
-      margin-bottom: 0;
       overflow-x: hidden;
       overflow-y: auto;
     }
@@ -35,7 +34,6 @@ main > aside {
     }
 
     &.closed-on-mobile {
-      margin-bottom: var(--block-spacing-vertical);
 
       a#toggle-docs-navigation {
         svg.collapse {

docs/src/containers.html

@@ -62,7 +62,7 @@
             </table>
           </figure>
           <p><code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct childs of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code></p>
-          <p><code>&lt;<b>section</b>&gt;</code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
+          <p><code>&lt;<b>section</b>&gt;</code> provides a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
         </section>
 
         ${require('./_footer.html')}

docs/src/forms.html

@@ -114,18 +114,30 @@
                 <input type="radio" id="large" name="size" value="large">
                 Large
               </label>
+              <label for="extralarge">
+                <input type="radio" id="extralarge" name="size" value="extralarge" disabled>
+                Extra Large
+              </label>
             </fieldset>
             <fieldset>
               <label for="terms">
                 <input type="checkbox" id="terms" name="terms">
                 I agree to the Terms and Conditions
               </label>
+              <label for="terms_sharing">
+                <input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
+                I agree to share my information with partners
+              </label>
             </fieldset>
             <fieldset>
               <label for="switch">
                 <input type="checkbox" id="switch" name="switch" role="switch">
                 Publish on my profile
               </label>
+              <label for="switch_disabled">
+                <input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled checked>
+                Publish on my profile my accomplishments
+              </label>
             </fieldset>
             <footer class="code">
 
@@ -151,22 +163,35 @@
     &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt;
     Large
   &lt;/<b>label</b>&gt;
+  &lt;/<b>label</b>&gt;
+  &lt;<b>label</b> <i>for</i>=<u>"extralarge"</u>&gt;
+    &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"extralarge"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"extralarge"</u> <i>disabled</i>&gt;
+    Extra Large
+  &lt;/<b>label</b>&gt;
 &lt;/<b>fieldset</b>&gt;
 
-<em>&lt;!-- Checkbox --&gt;</em>
+<em>&lt;!-- Checkboxes --&gt;</em>
 &lt;<b>fieldset</b>&gt;
   &lt;<b>label</b> <i>for</i>=<u>"terms"</u>&gt;
     &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>&gt;
     I agree to the Terms and Conditions
   &lt;/<b>label</b>&gt;
+  &lt;<b>label</b> <i>for</i>=<u>"terms_sharing"</u>&gt;
+    &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms_sharing"</u> <i>name</i>=<u>"terms_sharing"</u> <i>disabled checked</i>&gt;
+    I agree to share my information with partners
+  &lt;/<b>label</b>&gt;
 &lt;/<b>fieldset</b>&gt;
 
-<em>&lt;!-- Switch --&gt;</em>
+<em>&lt;!-- Switches --&gt;</em>
 &lt;<b>fieldset</b>&gt;
   &lt;<b>label</b> <i>for</i>=<u>"switch"</u>&gt;
     &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>&gt;
     Publish on my profile
   &lt;/<b>label</b>&gt;
+  &lt;<b>label</b> <i>for</i>=<u>"switch_disabled"</u>&gt;
+    &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch_disabled"</u> <i>name</i>=<u>"switch_disabled"</u> <i>role</i>=<u>"switch_disabled"</u> <i>disabled checked</i>&gt;
+    Publish on my profile my accomplishments
+  &lt;/<b>label</b>&gt;
 &lt;/<b>fieldset</b>&gt;</code></pre>
 
             </footer>

docs/src/modal.html

@@ -98,7 +98,7 @@
 <pre><code><em>&lt;!-- Button to trigger the modal --&gt;</em>
 &lt;<b>button</b> <i>class</i>=<u>"contrast"</u>
   <i>data-target</i>=<u>"modal-example"</u>
-  <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+  <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
   Launch demo modal
 &lt;/<b>button</b>&gt;
 
@@ -109,7 +109,7 @@
       <i>aria-label</i>=<u>"Close"</u>&gt;
       <i>class</i>=<u>"close"</u>
       <i>data-target</i>=<u>"modal-example"</u>
-      <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+      <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
     &lt;/<b>a</b>&gt;
     &lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt;
     &lt;<b>p</b>&gt;
@@ -122,13 +122,13 @@
         <i>role</i>=<u>"button"</u>&gt;
         <i>class</i>=<u>"secondary"</u>
         <i>data-target</i>=<u>"modal-example"</u>
-        <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+        <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
         Cancel
       &lt;/<b>a</b>&gt;
       &lt;<b>a</b> <i>href</i>=<u>"#confirm"</u>
         <i>role</i>=<u>"button"</u>
         <i>data-target</i>=<u>"modal-example"</u>
-        <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+        <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
         Confirm
       &lt;/<b>a</b>&gt;
     &lt;/<b>footer</b>&gt;

docs/src/typography.html

@@ -1,24 +1,25 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') 
+    ${require('./_head.html') title="Typography" description="All typographic
-      title="Typography" 
+    elements are responsive, allowing text to scale gracefully across devices
-      description="All typographic elements are responsive, allowing text to scale gracefully across devices and viewports."
+    and viewports." canonical="typography.html" }
-      canonical="typography.html"
-    }
   </head>
 
   <body>
     ${require('./_nav.html')}
-    
+
     <main class="container" id="docs">
       ${require('./_sidebar.html') active="typography-link"}
-      
+
       <div role="document">
         <section id="typography">
           <hgroup>
             <h1>Typography</h1>
-            <h2>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h2>
+            <h2>
+              All typographic elements are responsive, allowing text to scale
+              gracefully across devices and viewports.
+            </h2>
           </hgroup>
           <figure>
             <table role="grid">
@@ -109,38 +110,48 @@
             <h5>Heading 5</h5>
             <h6>Heading 6</h6>
             <footer class="code">
-
+              <pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
-<pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
 &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
 &lt;<b>h3</b>&gt;Heading 3&lt;/<b>h3</b>&gt;
 &lt;<b>h4</b>&gt;Heading 4&lt;/<b>h4</b>&gt;
 &lt;<b>h5</b>&gt;Heading 5&lt;/<b>h5</b>&gt;
 &lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre>
-
             </footer>
           </article>
-          <p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p>
+          <p>
+            Inside a <code>&lt;<b>hgroup</b>&gt;</code> or a
+            <code>&lt;<b>div</b> <i>class</i>=<u>"headings"</u>&gt;</code> all
+            <code><i>margin-bottom</i></code> are collapsed and the
+            <code>:last-child</code> is muted.
+          </p>
           <article aria-label="Hgroup example">
-            <hgroup>
+            <div class="headings">
               <h2>Heading 2</h2>
               <h3>Subtitle for heading 2</h3>
-            </hgroup>
+            </div>
             <footer class="code">
-
+              <pre><code>&lt;<b>hgroup</b>&gt;
-<pre><code>&lt;<b>hgroup</b>&gt;
   &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
   &lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
 &lt;/<b>hgroup</b>&gt;</code></pre>
 
+              <pre><code>&lt;<b>div</b> <i>class</i>=<u>"headings</u>"&gt;
+  &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
+  &lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
+&lt;/<b>div</b>&gt;</code></pre>
             </footer>
           </article>
+
           <p>Inline text elements:</p>
           <article aria-label="Inline text examples">
             <div class="grid">
               <div>
                 <p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p>
                 <p><strong>Bold</strong> <code>strong</code> <code>b</code></p>
-                <p><em>Italic</em> <code>i</code> <code>em</code> <code>cite</code></p>
+                <p>
+                  <em>Italic</em> <code>i</code> <code>em</code>
+                  <code>cite</code>
+                </p>
                 <p><del>Deleted</del> <code>del</code></p>
                 <p><ins>Inserted</ins> <code>ins</code></p>
                 <p><kbd>Ctrl + S</kbd> <code>kbd</code></p>
@@ -155,44 +166,46 @@
               </div>
             </div>
           </article>
-          <p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
+          <p>
+            Links come with <code>.secondary</code> and
+            <code>.contrast</code> styles.
+          </p>
           <article aria-label="Links examples">
-            <a href="#" onclick="event.preventDefault()">Primary</a><br>
+            <a href="#" onclick="event.preventDefault()">Primary</a><br />
-            <a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br>
+            <a href="#" onclick="event.preventDefault()" class="secondary"
-            <a href="#" onclick="event.preventDefault()" class="contrast">Contrast</a><br>
+              >Secondary</a
+            ><br />
+            <a href="#" onclick="event.preventDefault()" class="contrast"
+              >Contrast</a
+            ><br />
             <footer class="code">
-
+              <pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
-<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
 &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
 &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
-
             </footer>
           </article>
           <p>Blockquote:</p>
           <article aria-label="Blockquote example">
             <blockquote>
-              "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. 
+              "Maecenas vehicula metus tellus, vitae congue turpis hendrerit
-              Nam at dui sit amet ipsum cursus ornare."
+              non. Nam at dui sit amet ipsum cursus ornare."
               <footer>
                 <cite>- Phasellus eget lacinia</cite>
               </footer>
             </blockquote>
             <footer class="code">
-
+              <pre><code>&lt;<b>blockquote</b>&gt;
-<pre><code>&lt;<b>blockquote</b>&gt;
   "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. 
   Nam at dui sit amet ipsum cursus ornare."
   &lt;<b>footer</b>&gt;
     &lt;<b>cite</b>&gt;- Phasellus eget lacinia&lt;/<b>cite</b>&gt;
   &lt;/<b>footer</b>&gt;
 &lt;/<b>blockquote</b>&gt;</code></pre>
-
             </footer>
           </article>
         </section>
 
         ${require('./_footer.html')}
-        
       </div>
     </main>
     <script src="js/commons.min.js"></script>

package.json

@@ -100,4 +100,4 @@
     "last 2 major versions",
     "not dead"
   ]
-}
+}

scss/content/_button.scss

@@ -195,13 +195,12 @@ input[type="reset"] {
 }
 
 // Button [disabled]
-button,
+button[disabled],
-input[type="submit"],
+input[type="submit"][disabled],
-input[type="button"],
+input[type="button"][disabled],
-input[type="reset"],
+input[type="reset"][disabled],
-a[role="button"] {
+a[role="button"]:not([href]),
-  &[disabled] {
+a[role="button"][disabled] {
-    opacity: 0.5;
+  opacity: 0.5;
-    pointer-events: none;
+  pointer-events: none;
-  }
+}
-}

scss/content/_code.scss

@@ -87,5 +87,5 @@ code {
 kbd {
   background-color: var(--code-kbd-background-color);
   color: var(--code-kbd-color);
-  vertical-align: middle;
+  vertical-align: baseline;
 }

scss/content/_form.scss

@@ -129,6 +129,7 @@ label,
 fieldset legend {
   display: block;
   margin-bottom: calc(var(--spacing) * 0.25);
+  font-weight: var(--form-label-font-weight, var(--font-weight));
 }
 
 // Blocks, 100%

scss/content/_typography.scss

@@ -181,18 +181,38 @@ ul {
 }
 
 // Heading group
-hgroup {
+@if $enable-classes == false {
-  margin-bottom: var(--typography-spacing-vertical);
+  hgroup {
+    margin-bottom: var(--typography-spacing-vertical);
 
-  > * {
+    > * {
-    margin-bottom: 0;
+      margin-bottom: 0;
+    }
+
+    > *:last-child {
+      --color: var(--muted-color);
+      --font-weight: unset;
+      font-size: 1rem;
+      font-family: unset;
+    }
   }
+}
 
-  > *:last-child {
+@if $enable-classes {
-    --color: var(--muted-color);
+  hgroup,
-    --font-weight: unset;
+  .headings {
-    font-size: 1rem;
+    margin-bottom: var(--typography-spacing-vertical);
-    font-family: unset;
+
+    > * {
+      margin-bottom: 0;
+    }
+
+    > *:last-child {
+      --color: var(--muted-color);
+      --font-weight: unset;
+      font-size: 1rem;
+      font-family: unset;
+    }
   }
 }
 
@@ -228,7 +248,7 @@ mark {
   padding: 0.125rem 0.25rem;
   background-color: var(--mark-background-color);
   color: var(--mark-color);
-  vertical-align: middle;
+  vertical-align: baseline;
 }
 
 // Blockquote

scss/themes/default/_styles.scss

@@ -59,6 +59,9 @@
   --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
 
+  // Font weight for form labels & fieldsets legend
+  --form-label-font-weight: var(--font-weight);
+
   // Transitions
   --transition: 0.2s ease-in-out;
 }
@@ -149,9 +152,11 @@ a {
   --text-decoration: none;
 
   // Secondary & Contrast
-  &.secondary,
+  @if $enable-classes {
-  &.contrast {
+    &.secondary,
-    --text-decoration: underline;
+    &.contrast {
+      --text-decoration: underline;
+    }
   }
 }