Merge pull request #10 from picocss/dev

Minor Release (v1.2.1)

README.md

@@ -19,6 +19,7 @@
 [![npm version](https://img.shields.io/npm/v/@picocss/pico?color=1095c1)](https://www.npmjs.com/package/@picocss/pico)
 [![License](https://img.shields.io/badge/license-MIT-%231095c1)](https://github.com/picocss/pico/blob/master/LICENSE.md)
 
+
 - **Class-light and semantic**: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
 
 - **Great styles with just one CSS file**: No dependencies, package manager, external files or JavaScript.
@@ -54,7 +55,7 @@ npm install @picocss/pico
 
 Minimalist templates to discover Pico in action:
 
-[![Examples](https://picocss.com/img/examples.jpg?version=1.2.0)](https://picocss.com/#examples)
+[![Examples](https://picocss.com/img/examples.jpg)](https://picocss.com/#examples)
 
 - **[Preview](https://picocss.com/examples/preview/)**  
   A starter example with all elements and components used in Pico
@@ -96,15 +97,29 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e
 - [Typography](https://picocss.com/docs/#typography)
 - [Buttons](https://picocss.com/docs/#buttons)
 - [Forms](https://picocss.com/docs/#forms)
-- [Tables](https://picocss.com/docs/#tables)
 
 **Components**
 - [Accordions](https://picocss.com/docs/#accordions)
 - [Cards](https://picocss.com/docs/#cards)
 - [Navs](https://picocss.com/docs/#navs)
-- [Progress](https://picocss.com/docs/#progress)
 - [Tooltips](https://picocss.com/docs/#tooltips)
 
+## Variations
+
+| Variation | Minified CSS | Source | Example |
+|:-----|:-----|:-----|:-----|
+| Default | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css) | [pico.scss](https://github.com/picocss/pico/blob/master/scss/pico.scss) | [Preview](https://picocss.com/examples/preview/) |
+| Classless<br>(Centered viewports) | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.classless.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css) | [pico.classless.scss](https://github.com/picocss/pico/blob/master/scss/pico.classless.scss)  | [Classless](https://picocss.com/examples/classless/) |
+| Classless<br>(Fluid container) | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.fluid.classless.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css) | [pico.fluid.classless.scss](https://github.com/picocss/pico/blob/master/scss/pico.fluid.classless.scss) | - |
+| Slim | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.slim.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.slim.min.css) | [pico.slim.scss](https://github.com/picocss/pico/blob/master/scss/pico.slim.scss) | - |
+| Google Amp | [![CSS Gzipped](https://img.badgesize.io/picocss/examples/master/google-amp/css/pico.google-amp.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://github.com/picocss/examples/blob/master/google-amp/css/pico.google-amp.min.css) | [pico.google-amp.scss](https://github.com/picocss/examples/blob/master/google-amp/scss/pico.google-amp.scss) | [Google Amp](https://picocss.com/examples/google-amp/) |
+| Pico + Bootstrap grid system | [![CSS Gzipped](https://img.badgesize.io/picocss/examples/master/bootstrap-grid/css/pico-bootstrap-grid.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://github.com/picocss/examples/blob/master/bootstrap-grid/css/pico-bootstrap-grid.min.css) | [pico-bootstrap-grid.scss](https://github.com/picocss/examples/blob/master/bootstrap-grid/scss/pico-bootstrap-grid.scss) | [Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/) |
+
+## Contributing
+
+- [dev/](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
+- Do not edit [/css](https://github.com/picocss/pico/tree/master/css) files directly. Those files are automatically generated. You should edit the source files in [scss/](https://github.com/picocss/pico/tree/master/scss).
+
 ## Copyright and license
 
 Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).

css/pico.classless.css

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.2.0 (https://picocss.com)
+ * Pico.css v1.2.1 (https://picocss.com)
  * Copyright 2020 - Licensed under MIT
  */
 /**
@@ -1035,6 +1035,27 @@ textarea[disabled] {
   opacity: .66;
 }
 
+input[aria-invalid],
+select[aria-invalid],
+textarea[aria-invalid] {
+  padding-right: 2rem;
+  background-position: center right .75rem;
+  background-repeat: no-repeat;
+  background-size: 1rem auto;
+}
+
+input[aria-invalid="false"],
+select[aria-invalid="false"],
+textarea[aria-invalid="false"] {
+  background-image: var(--icon-valid);
+}
+
+input[aria-invalid="true"],
+select[aria-invalid="true"],
+textarea[aria-invalid="true"] {
+  background-image: var(--icon-invalid);
+}
+
 input:not([type="checkbox"]):not([type="radio"]),
 select,
 textarea {
@@ -1067,7 +1088,7 @@ form small {
 input + small,
 select + small,
 textarea + small {
-  margin-top: calc(var(--spacing-typography) * -0.5);
+  margin-top: calc(var(--spacing-typography) * -0.75);
   margin-bottom: var(--spacing-typography);
 }
 

css/pico.css

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.2.0 (https://picocss.com)
+ * Pico.css v1.2.1 (https://picocss.com)
  * Copyright 2020 - Licensed under MIT
  */
 /**
@@ -977,7 +977,7 @@ a[role="button"].contrast:focus {
 
 button.outline,
 input[type="submit"].outline,
-a.outline[role="button"] {
+a[role="button"].outline {
   border: var(--button-border-width) solid var(--primary-border);
   background-color: transparent;
   color: var(--primary);
@@ -987,9 +987,9 @@ button.outline:hover, button.outline:active, button.outline:focus,
 input[type="submit"].outline:hover,
 input[type="submit"].outline:active,
 input[type="submit"].outline:focus,
-a.outline[role="button"]:hover,
+a[role="button"].outline:hover,
-a.outline[role="button"]:active,
+a[role="button"].outline:active,
-a.outline[role="button"]:focus {
+a[role="button"].outline:focus {
   border: var(--button-border-width) solid var(--primary-hover-border);
   color: var(--primary-hover);
 }
@@ -1230,26 +1230,33 @@ textarea[disabled] {
   opacity: .66;
 }
 
-input.valid, input.invalid,
+input .valid,
-select.valid,
+input .invalid, input[aria-invalid],
-select.invalid,
+select .valid,
-textarea.valid,
+select .invalid,
-textarea.invalid {
+select[aria-invalid],
+textarea .valid,
+textarea .invalid,
+textarea[aria-invalid] {
   padding-right: 2rem;
   background-position: center right .75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
 }
 
-input.valid,
+input .valid, input[aria-invalid="false"],
-select.valid,
+select .valid,
-textarea.valid {
+select[aria-invalid="false"],
+textarea .valid,
+textarea[aria-invalid="false"] {
   background-image: var(--icon-valid);
 }
 
-input.invalid,
+input .invalid, input[aria-invalid="true"],
-select.invalid,
+select .invalid,
-textarea.invalid {
+select[aria-invalid="true"],
+textarea .invalid,
+textarea[aria-invalid="true"] {
   background-image: var(--icon-invalid);
 }
 
@@ -1285,7 +1292,7 @@ form small {
 input + small,
 select + small,
 textarea + small {
-  margin-top: calc(var(--spacing-typography) * -0.5);
+  margin-top: calc(var(--spacing-typography) * -0.75);
   margin-bottom: var(--spacing-typography);
 }
 

css/pico.fluid.classless.css

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.2.0 (https://picocss.com)
+ * Pico.css v1.2.1 (https://picocss.com)
  * Copyright 2020 - Licensed under MIT
  */
 /**
@@ -1031,6 +1031,27 @@ textarea[disabled] {
   opacity: .66;
 }
 
+input[aria-invalid],
+select[aria-invalid],
+textarea[aria-invalid] {
+  padding-right: 2rem;
+  background-position: center right .75rem;
+  background-repeat: no-repeat;
+  background-size: 1rem auto;
+}
+
+input[aria-invalid="false"],
+select[aria-invalid="false"],
+textarea[aria-invalid="false"] {
+  background-image: var(--icon-valid);
+}
+
+input[aria-invalid="true"],
+select[aria-invalid="true"],
+textarea[aria-invalid="true"] {
+  background-image: var(--icon-invalid);
+}
+
 input:not([type="checkbox"]):not([type="radio"]),
 select,
 textarea {
@@ -1063,7 +1084,7 @@ form small {
 input + small,
 select + small,
 textarea + small {
-  margin-top: calc(var(--spacing-typography) * -0.5);
+  margin-top: calc(var(--spacing-typography) * -0.75);
   margin-bottom: var(--spacing-typography);
 }
 

css/pico.slim.css

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.2.0 (https://picocss.com)
+ * Pico.css v1.2.1 (https://picocss.com)
  * Copyright 2020 - Licensed under MIT
  *
  * Slim version example
@@ -1038,6 +1038,36 @@ textarea[disabled] {
   opacity: .66;
 }
 
+input .valid,
+input .invalid, input[aria-invalid],
+select .valid,
+select .invalid,
+select[aria-invalid],
+textarea .valid,
+textarea .invalid,
+textarea[aria-invalid] {
+  padding-right: 2rem;
+  background-position: center right .75rem;
+  background-repeat: no-repeat;
+  background-size: 1rem auto;
+}
+
+input .valid, input[aria-invalid="false"],
+select .valid,
+select[aria-invalid="false"],
+textarea .valid,
+textarea[aria-invalid="false"] {
+  background-image: var(--icon-valid);
+}
+
+input .invalid, input[aria-invalid="true"],
+select .invalid,
+select[aria-invalid="true"],
+textarea .invalid,
+textarea[aria-invalid="true"] {
+  background-image: var(--icon-invalid);
+}
+
 input:not([type="checkbox"]):not([type="radio"]),
 select,
 textarea {
@@ -1070,7 +1100,7 @@ form small {
 input + small,
 select + small,
 textarea + small {
-  margin-top: calc(var(--spacing-typography) * -0.5);
+  margin-top: calc(var(--spacing-typography) * -0.75);
   margin-bottom: var(--spacing-typography);
 }
 

docs/css/pico.docs.css

@@ -124,6 +124,10 @@ form.grid > button {
   margin-bottom: 0;
 }
 
+svg {
+  height: 1rem;
+}
+
 /**
  * Docs: Aside
  */
@@ -402,7 +406,7 @@ body > nav a {
   border-radius: 0;
 }
 
-body > nav a svg {
+body > nav svg {
   vertical-align: text-bottom;
 }
 
@@ -415,6 +419,10 @@ body > nav ul:first-of-type li:first-of-type a {
   color: var(--background);
 }
 
+body > nav ul:first-of-type li:first-of-type a svg {
+  height: 3.5rem;
+}
+
 body > nav ul:first-of-type li:nth-of-type(2) {
   display: none;
   margin-left: var(--spacing-gutter);

docs/index.html

@@ -18,7 +18,7 @@
       <ul>
         <li>
           <a href="https://picocss.com" aria-label="Back home">
-            <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="3.5rem">
+            <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="56px">
               <path fill="currentColor" d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z"/>
             </svg>
           </a>
@@ -30,7 +30,7 @@
         <li><a href="#docs" class="secondary">Docs</a></li>
         <li>
           <a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository">
-            <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="1rem">
+            <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="16px">
               <path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
             </svg>
           </a>
@@ -140,7 +140,7 @@
               <button class="contrast theme-switcher">...</button>
             </article>
             <p>Themes can be forced on document level <code>&lt;<b>html</b> <i>data-theme</i>=<u>"light"</u>&gt;</code> or on any HTML element <code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;</code></p>
-            <article data-theme="light">
+            <article data-theme="light" aria-label="Forced light theme example">
               <h4>Light theme</h4>
               <form class="grid">
                 <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
@@ -153,7 +153,7 @@
 &lt;/<b>article</b>&gt;</code></pre>
 
             </article>
-            <article data-theme="dark">
+            <article data-theme="dark" aria-label="Forced dark theme example">
               <h4>Dark theme</h4>
               <form class="grid">
                 <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
@@ -176,7 +176,7 @@
             </hgroup>
             <p>Example: <strong>pick a color!</strong></p>
 
-            <article data-theme="generated">
+            <article data-theme="generated" aria-label="Generated theme example">
               <h4><span class="name">Custom theme</span></h4>
               <form>
                 <div class="grid">
@@ -289,7 +289,7 @@
               <h2>Containers</h2>
               <h3>
                 <code>.container</code> enable a centered viewport.<br>
-                <code>.container-fluid</code> enable a <code>100%</code> layout.
+                <code>.container-fluid</code> enable a <code><u>100%</u></code> layout.
               </h3>
             </hgroup>
 
@@ -360,7 +360,7 @@
             <p>To go further, discover how to <a href="https://picocss.com/examples/bootstrap-grid/">merge Pico with the Bootstrap grid system</a>.</p>
             <details>
               <summary>
-                <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <circle cx="12" cy="12" r="10"></circle>
                   <line x1="12" y1="16" x2="12" y2="12"></line>
                   <line x1="12" y1="8" x2="12.01" y2="8"></line>
@@ -589,7 +589,7 @@
 
             </article>
             <p>Blockquote:</p>
-            <article aria-label="Links examples">
+            <article aria-label="Blockquote example">
               <blockquote>
                 "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
                 <footer>
@@ -613,8 +613,8 @@
               <h2>Buttons</h2>
               <h3>The essential button in pure HTML, without <code>.classes</code> for the default style.</h3>
             </hgroup>
-            <article aria-label="Grid example">
+            <article aria-label="Button example">
-              <button aria-label="Example button">Button</button>
+              <button aria-label="Button">Button</button>
               <input type="submit">
 
 <pre><code>&lt;<b>button</b>&gt;Button&lt;/<b>button</b>&gt;
@@ -710,14 +710,14 @@
             <p>Disabled and validation states:</p>
             <article aria-label="Validation states examples">
               <form class="grid">
-                <input type="text" placeholder="Valid" aria-label="Valid" class="valid">
+                <input type="text" placeholder="Valid" aria-label="Valid" aria-invalid="false">
-                <input type="text" placeholder="Invalid" aria-label="Invalid"  class="invalid">
+                <input type="text" placeholder="Invalid" aria-label="Invalid"  aria-invalid="true">
                 <input type="text" placeholder="Disabled" aria-label="Disabled" disabled>
                 <input type="text" value="Readonly" aria-label="Readonly" readonly>
               </form>
 
-<pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>class</i>=<u>"valid"</u>&gt;
+<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>class</i>=<u>"invalid"</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>
 
@@ -799,16 +799,18 @@
 &lt;/<b>fieldset</b>&gt;</code></pre>
 
             </article>
-            <p>You can change a checkbox to indeterminate state by setting the <code>indeterminate</code> property of input checkboxes to <code>true</code></p>
+            <p>You can change a checkbox to indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
-            <article>
+            <article aria-label="Indeterminate checkbox example">
-              <label for="indeterminate">
+              <label for="indeterminate-checkbox">
-                <input type="checkbox" id="indeterminate" name="indeterminate" indeterminate="true">
+                <input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox">
                 Select all
               </label>
-              <script>
+              <script>document.getElementById('indeterminate-checkbox').indeterminate = true;</script>
-              // Set indeterminate checkbox
+
-              document.getElementById('indeterminate').indeterminate = true;
+<pre><code>&lt;<b>script</b>&gt;
-              </script>
+  <i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
+&lt;/<b>script</b>&gt;</code></pre>
+
             </article>
 
             <p>Others input types:</p>
@@ -841,7 +843,7 @@
 
 <em>&lt;!-- Date --&gt;</em>
 &lt;<b>label</b> <i>for</i>=<u>"date"</u>&gt;Date
-  &lt;<b>input</b> <i>type</i>=<u>"date"</u> <i>id</i>=<u>"date"</u> <i>name</i>=<u>"date"</u></u>&gt;
+  &lt;<b>input</b> <i>type</i>=<u>"date"</u> <i>id</i>=<u>"date"</u> <i>name</i>=<u>"date"</u>&gt;
 &lt;/<b>label</b>&gt;
 
 <em>&lt;!-- Time --&gt;</em>
@@ -908,7 +910,7 @@
   &lt;<b>thead</b>&gt;
     &lt;<b>tr</b>&gt;
       &lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;#&lt;/<b>th</b>&gt;
-      &lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;Heading<&lt;/<b>th</b>&gt;
+      &lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;Heading&lt;/<b>th</b>&gt;
       &lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;Heading&lt;/<b>th</b>&gt;
       &lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;Heading&lt;/<b>th</b>&gt;
     &lt;/<b>tr</b>&gt;
@@ -1069,7 +1071,7 @@
                 <ul>
                   <li>
                     <a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Menu">
-                      <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1rem" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16px" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <line x1="3" y1="12" x2="21" y2="12">
                         </line><line x1="3" y1="6" x2="21" y2="6">
                         </line><line x1="3" y1="18" x2="21" y2="18">
@@ -1084,7 +1086,7 @@
                 <ul>
                   <li>
                     <a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Twitter">
-                      <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1rem" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16px" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
                       </svg>
                     </a>
@@ -1136,14 +1138,25 @@
               <h2>Progress</h2>
               <h3>Progress bar element in pure HTML, without JavaScript.</h3>
             </hgroup>
-            <article aria-label="Tooltips examples">
+            <article aria-label="Progress bar example">
               <progress value="25" max="100"></progress>
-              <progress indeterminate="true"></progress>
 
-<pre><code>&lt;<b>progress</b> <i>value</i>=<u>"25</u></i>" <i>max</i>=<u>"100"</u>&gt;&lt;/<b>progress</b>&gt;
+<pre><code>&lt;<b>progress</b> <i>value</i>=<u>"25</u>" <i>max</i>=<u>"100"</u>&gt;&lt;/<b>progress</b>&gt;</code></pre>
-&lt;<b>progress</b> <i>indeterminate</i>=<u>"true"</u>&gt;&lt;/<b>progress</b>&gt;</code></pre>
 
             </article>
+
+            <p>You can change a progress bar to indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
+
+            <article aria-label="Indeterminate progress bar example">
+              <progress id="indeterminate-progress"></progress>
+              <script>document.getElementById('indeterminate-progress').indeterminate = true;</script>
+
+<pre><code>&lt;<b>script</b>&gt;
+  <i>document</i>.<b>getElementById</b>(<u>'indeterminate-progress'</u>).<i>indeterminate</i> = <u>true</u>;
+&lt;/<b>script</b>&gt;</code></pre>
+
+            </article>
+
           </section><!-- ./ Docs: Progress -->
 
           <!-- Docs: Tooltips -->

docs/js/src/grid.js

@@ -61,7 +61,7 @@
   function addButtons() {
     var buttons = document.createElement('P');
     buttons.innerHTML = '<button class="secondary add">'
-                     +   '<svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">'
+                     +   '<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">'
                      +     '<line x1="12" y1="5" x2="12" y2="19">'
                      +     '</line><line x1="5" y1="12" x2="19" y2="12">'
                      +     '</line>'
@@ -70,7 +70,7 @@
                      + '</button>'
 
                      + '<button class="secondary remove">'
-                     +   '<svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">'
+                     +   '<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">'
                      +     '<line x1="5" y1="12" x2="19" y2="12"></line>'
                      +   '</svg>'
                      +   ' Remove column'

docs/scss/components/_nav.scss

@@ -15,12 +15,13 @@ body > nav {
 
   a {
     border-radius: 0;
+  }
 
   svg {
     vertical-align: text-bottom;
   }
-  }
 
+  // Band & Title
   ul:first-of-type li {
 
     // Brand
@@ -32,6 +33,10 @@ body > nav {
         padding: 0;
         background: var(--h1);
         color: var(--background);
+
+        svg {
+          height: 3.5rem;
+        }
       }
     }
 

docs/scss/layout/_document.scss

@@ -2,6 +2,6 @@
  * Docs: Document
  */
 
- html {
+html {
   scroll-behavior:smooth;
- }
+}

docs/scss/layout/_main.scss

@@ -88,3 +88,10 @@ form.grid {
     margin-bottom: 0;
   }
 }
+
+
+// Embedded SVG
+// ––––––––––––––––––––
+svg {
+  height: 1rem;
+}

package.json

@@ -1,9 +1,9 @@
 {
   "name": "@picocss/pico",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Graceful & Minimal CSS design system in pure semantic HTML",
   "author": "Lucas Larroche",
-  "main": "./css/pico.min.css",
+  "main": "css/pico.min.css",
   "homepage": "https://picocss.com",
   "license": "MIT",
   "repository": {

scss/content/_button-styles.scss

@@ -56,7 +56,7 @@
   // Button .outline
   button.outline,
   input[type="submit"].outline,
-  a.outline[role="button"] {
+  a[role="button"].outline {
     border: var(--button-border-width) solid var(--primary-border);
     background-color: transparent;
     color: var(--primary);

scss/content/_form.scss

@@ -220,23 +220,42 @@ textarea {
     opacity: .66;
   }
 
-  // Validation states
+  // Validation states: with aria-invalid only
-  @if $enable-input-states and $enable-classes {
+  @if $enable-classes {
-
+    .valid,
-    // Validation states
+    .invalid,
-    &.valid,
+    &[aria-invalid] {
-    &.invalid {
       padding-right: 2rem;
       background-position: center right .75rem;
       background-repeat: no-repeat;
       background-size: 1rem auto;
     }
 
-    &.valid {
+    .valid,
+    &[aria-invalid="false"] {
       background-image: var(--icon-valid);
     }
 
-    &.invalid {
+    .invalid,
+    &[aria-invalid="true"]{
+      background-image: var(--icon-invalid);
+    }
+  }
+
+  // Validation states: with aria-invalid and classes (.valid & .invalid)
+  @else {
+    &[aria-invalid] {
+      padding-right: 2rem;
+      background-position: center right .75rem;
+      background-repeat: no-repeat;
+      background-size: 1rem auto;
+    }
+
+    &[aria-invalid="false"] {
+      background-image: var(--icon-valid);
+    }
+
+    &[aria-invalid="true"]{
       background-image: var(--icon-invalid);
     }
   }
@@ -285,7 +304,7 @@ input,
 select,
 textarea {
   + small {
-    margin-top: calc(var(--spacing-typography) * -0.5);
+    margin-top: calc(var(--spacing-typography) * -0.75);
     margin-bottom: var(--spacing-typography);
   }
 }

scss/pico.scss

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.2.0 (https://picocss.com)
+ * Pico.css v1.2.1 (https://picocss.com)
  * Copyright 2020 - Licensed under MIT
  */
 

scss/pico.slim.scss

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.2.0 (https://picocss.com)
+ * Pico.css v1.2.1 (https://picocss.com)
  * Copyright 2020 - Licensed under MIT
  *
  * Slim version example