Merge pull request #23 from picocss/dev

Minor Release (v1.3.3)
2025-04-21 17:16:14 -04:00 · 2021-07-25 16:56:24 +07:00 · 2021-07-25 16:56:24 +07:00 · a1147fe394
commit a1147fe394
parent 87bf626400 9ef002d8ab
22 changed files with 117 additions and 113 deletions
--- a/README.md
+++ b/README.md
@ -7,7 +7,7 @@
 <h3 align="center">Pico.css</h3>

 <p align="center">
-  <strong>Graceful & Minimal CSS design system in pure semantic HTML.</strong><br>
+  <strong>Minimal CSS Framework for semantic HTML</strong><br>
  Elegant styles for all natives HTML elements without <code>.classes</code> and dark mode automatically enabled.<br><br>
  <a href="https://picocss.com/#examples">Examples</a> ·
  <a href="https://picocss.com/docs/">Documentation</a>
@ -19,6 +19,8 @@
 [![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)

+https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4
+
 **Class-light and semantic**  
 We use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.

@ -107,7 +109,7 @@ Then just write pure HTML, and it should look great:

 Minimalist templates to discover Pico in action:

-[![Examples](https://picocss.com/img/examples.jpg)](https://picocss.com/#examples)
+[![Examples](https://picocss.com/img/examples.jpg?v1.3.3)](https://picocss.com/#examples)

 - **[Preview](https://picocss.com/examples/preview/)**  
  A starter example with all elements and components used in Pico
@ -170,4 +172,14 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e

 Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).

-Openly inspired by: [Bootstrap](https://github.com/twbs/bootstrap), [CSS Bed](https://github.com/ubershmekel/cssbed), [Normalize](https://github.com/necolas/normalize.css/), [Sanitize](https://csstools.github.io/sanitize.css/), [Spectre](https://github.com/picturepan2/spectre), [Wing](https://github.com/kbrsh/wing/).
+**Relevant third party tools and resources we depend on:**
+
+Website and docs:
+- [TypeIt](https://typeitjs.com/): JavaScript animated typing utility (Licensed [GPL 2.0](https://github.com/alexmacarthur/typeit/blob/master/LICENSE))
+- [Most Visible](https://github.com/andyexeter/most-visible): JavaScript module which returns the most visible element (Licensed [MIT](https://github.com/andyexeter/most-visible/blob/master/LICENSE))
+- [Font Awesome](https://fontawesome.com/): Icons (Licensed [CC BY 4.0](https://fontawesome.com/license/free))
+
+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))
--- a/css/pico.classless.css
+++ b/css/pico.classless.css
@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.3.2 (https://picocss.com)
+ * Pico.css v1.3.3 (https://picocss.com)
 * Copyright 2019-2021 - Licensed under MIT
 */
 /**
@ -163,12 +163,12 @@ h5 {
  --border-width: 3px;
 }

-table thead th,
-table thead td {
+thead th,
+thead td {
  --border-width: 3px;
 }

-table :not(thead) td {
+:not(thead) > * > td {
  --font-size: 0.875em;
 }

@ -991,10 +991,7 @@ legend {
 }

 textarea {
-  margin: 0;
  overflow: auto;
-  resize: vertical;
-  resize: block;
 }

 [type="checkbox"],
--- a/css/pico.classless.min.css
+++ b/css/pico.classless.min.css
--- a/css/pico.css
+++ b/css/pico.css
@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.3.2 (https://picocss.com)
+ * Pico.css v1.3.3 (https://picocss.com)
 * Copyright 2019-2021 - Licensed under MIT
 */
 /**
@ -163,12 +163,12 @@ h5 {
  --border-width: 3px;
 }

-table thead th,
-table thead td {
+thead th,
+thead td {
  --border-width: 3px;
 }

-table :not(thead) td {
+:not(thead) > * > td {
  --font-size: 0.875em;
 }

@ -1186,10 +1186,7 @@ legend {
 }

 textarea {
-  margin: 0;
  overflow: auto;
-  resize: vertical;
-  resize: block;
 }

 [type="checkbox"],
--- a/css/pico.fluid.classless.css
+++ b/css/pico.fluid.classless.css
@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.3.2 (https://picocss.com)
+ * Pico.css v1.3.3 (https://picocss.com)
 * Copyright 2019-2021 - Licensed under MIT
 */
 /**
@ -163,12 +163,12 @@ h5 {
  --border-width: 3px;
 }

-table thead th,
-table thead td {
+thead th,
+thead td {
  --border-width: 3px;
 }

-table :not(thead) td {
+:not(thead) > * > td {
  --font-size: 0.875em;
 }

@ -957,10 +957,7 @@ legend {
 }

 textarea {
-  margin: 0;
  overflow: auto;
-  resize: vertical;
-  resize: block;
 }

 [type="checkbox"],
--- a/css/pico.fluid.classless.min.css
+++ b/css/pico.fluid.classless.min.css
--- a/css/pico.min-dist.css
+++ b/css/pico.min-dist.css
--- a/css/pico.min.css
+++ b/css/pico.min.css
--- a/css/pico.slim.css
+++ b/css/pico.slim.css
@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.3.2 (https://picocss.com)
+ * Pico.css v1.3.3 (https://picocss.com)
 * Copyright 2019-2021 - Licensed under MIT
 *
 * Slim version example
@ -106,12 +106,12 @@ h5 {
  --border-width: 3px;
 }

-table thead th,
-table thead td {
+thead th,
+thead td {
  --border-width: 3px;
 }

-table :not(thead) td {
+:not(thead) > * > td {
  --font-size: 0.875em;
 }

@ -1127,10 +1127,7 @@ legend {
 }

 textarea {
-  margin: 0;
  overflow: auto;
-  resize: vertical;
-  resize: block;
 }

 [type="checkbox"],
--- a/css/pico.slim.min.css
+++ b/css/pico.slim.min.css
--- a/css/themes/default.css
+++ b/css/themes/default.css
@ -159,12 +159,12 @@ h5 {
  --border-width: 3px;
 }

-table thead th,
-table thead td {
+thead th,
+thead td {
  --border-width: 3px;
 }

-table :not(thead) td {
+:not(thead) > * > td {
  --font-size: 0.875em;
 }

--- a/css/themes/default.min.css
+++ b/css/themes/default.min.css
--- a/docs/index.html
+++ b/docs/index.html
@ -5,7 +5,7 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
-    <title>Pico.css • Graceful & Minimal CSS design system</title>
+    <title>Pico.css • Minimal CSS Framework for semantic HTML</title>
    <link rel="shortcut icon" href="https://picocss.com/favicon.ico">
    <link rel="stylesheet" href="../css/pico.min.css">
    <link rel="stylesheet" href="css/pico.docs.min.css">
@ -143,7 +143,7 @@
            </hgroup>
            <p>The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code></p>
            <article aria-label="Theme switcher">
-              <button class="contrast theme-switcher">...</button>
+              <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" aria-label="Forced light theme example">
@ -155,7 +155,7 @@
              </form>

 <pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"light"</u>&gt;
-  ...
+  …
 &lt;/<b>article</b>&gt;</code></pre>

            </article>
@ -168,7 +168,7 @@
              </form>

 <pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;
-  ...
+  …
 &lt;/<b>article</b>&gt;</code></pre>

            </article>
@ -200,7 +200,7 @@

 <pre><code><em>// Simplified example</em>
 <b>:root</b> {
-  <i>--primary</i>: <u class="c600">...</u>;
+  <i>--primary</i>: <u class="c600">…</u>;
 }
 </code></pre>

@ -213,30 +213,30 @@
 /* Can be forced with data-theme="light" */</em>
 <b>[data-theme=<u>"light"</u>]</b>,
 <b>:root:not([data-theme=<u>"dark"</u>])</b> {
-  <i>--primary</i>: <u class="c600">...</u>;
-  <i>--primary-hover</i>: <u class="c700">...</u>;
-  <i>--primary-focus</i>: <u class="c600-outline-light">...</u>;
-  <i>--primary-inverse</i>: <u class="inverse">...</u>;
+  <i>--primary</i>: <u class="c600">…</u>;
+  <i>--primary-hover</i>: <u class="c700">…</u>;
+  <i>--primary-focus</i>: <u class="c600-outline-light">…</u>;
+  <i>--primary-inverse</i>: <u class="inverse">…</u>;
 }

 <em>/* <span class="name"></span>Dark scheme (Auto) */
 /* Automatically enabled if user has Dark mode enabled */</em>
 <i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
  <b>:root:not([data-theme=<u>"light"</u>])</b> {
-    <i>--primary</i>: <u class="c600">...</u>;
-    <i>--primary-hover</i>: <u class="c500">...</u>;
-    <i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
-    <i>--primary-inverse</i>: <u class="inverse">...</u>;
+    <i>--primary</i>: <u class="c600">…</u>;
+    <i>--primary-hover</i>: <u class="c500">…</u>;
+    <i>--primary-focus</i>: <u class="c600-outline-dark">…</u>;
+    <i>--primary-inverse</i>: <u class="inverse">…</u>;
  }
 }

 <em>/* <span class="name"></span>Dark scheme (Forced) */
 /* Enabled if forced with data-theme="dark" */</em>
 <b>[data-theme=<u>"dark"</u>]</b> {
-  <i>--primary</i>: <u class="c600">...</u>;
-  <i>--primary-hover</i>: <u class="c500">...</u>;
-  <i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
-  <i>--primary-inverse</i>: <u class="inverse">...</u>;
+  <i>--primary</i>: <u class="c600">…</u>;
+  <i>--primary-hover</i>: <u class="c500">…</u>;
+  <i>--primary-focus</i>: <u class="c600-outline-dark">…</u>;
+  <i>--primary-inverse</i>: <u class="inverse">…</u>;
 }

 <em>/* <span class="name"></span>(Common styles) */</em>
@ -256,9 +256,9 @@
 <pre><code><em>/* Custom <span class="name"> </span>version */</em>

 <em>// Override default variables</em>
-<i>$primary-500</i>: <u class="c500">...</u>;
-<i>$primary-600</i>: <u class="c600">...</u>;
-<i>$primary-700</i>: <u class="c700">...</u>;
+<i>$primary-500</i>: <u class="c500">…</u>;
+<i>$primary-600</i>: <u class="c600">…</u>;
+<i>$primary-700</i>: <u class="c700">…</u>;

 <em>// Import full Pico source code</em>
 <b>@import</b> <u>"path/pico"</u>;</code></pre>
@ -273,7 +273,7 @@
 <em>// Import needed components</em>
 <b>@import</b> <u>"path/layout/document"</u>;
 <b>@import</b> <u>"path/layout/sectioning"</u>;
-<em>...</em>
+<em>…</em>
 </code></pre>

            <p>This allows you to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
@ -462,7 +462,7 @@

 <pre><code>&lt;<b>figure</b>&gt;
  &lt;<b>table</b>&gt;
-    ...
+    …
  &lt;/<b>table</b>&gt;
 &lt;/<b>figure</b>&gt;</code></pre>

@ -755,7 +755,7 @@
            <article aria-label="Select, radios, checkboxes, switch examples">
              <label for="fruit">Fruit</label>
              <select id="fruit" required>
-                <option value="" selected>Select a fruit...</option>
+                <option value="" selected>Select a fruit…</option>
                <option>Banana</option>
                <option>Watermelon</option>
                <option>Apple</option>
@ -793,8 +793,8 @@
 <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;
-  &lt;<b>option</b>&gt;...&lt;/<b>option</b>&gt;
+  &lt;<b>option</b> <i>value</i>=<u>""</u> <i>selected</i>&gt;Select a fruit…&lt;/<b>option</b>&gt;
+  &lt;<b>option</b>&gt;…&lt;/<b>option</b>&gt;
 &lt;/<b>select</b>&gt;

 <em>&lt;!-- Radios --&gt;</em>
@ -999,7 +999,7 @@
            </figure>

 <pre><code>&lt;<b>table</b> <i>role</i>=<u>"grid"</u>&gt;
-  <em>...</em>
+  <em>…</em>
 &lt;/<b>table</b>&gt;</code></pre>

          </section><!-- ./ Docs: Tables -->
@ -1027,14 +1027,14 @@

 <pre><code>&lt;<b>details</b>&gt;
  &lt;<b>summary</b>&gt;Collapsible elements 1&lt;/<b>summary</b>&gt;
-  &lt;<b>p</b>&gt;...&lt;/<b>p</b>&gt;
+  &lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
 &lt;/<b>details</b>&gt;

 &lt;<b>details</b> <i>open</i>&gt;
  &lt;<b>summary</b>&gt;Collapsible elements 2&lt;/<b>summary</b>&gt;
  &lt;<b>ul</b>&gt;
-    &lt;<b>li</b>&gt;...&lt;/<b>li</b>&gt;
-    &lt;<b>li</b>&gt;...&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;…&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;…&lt;/<b>li</b>&gt;
  &lt;/<b>ul</b>&gt;
 &lt;/<b>details</b>&gt;</code></pre>

@ -1128,13 +1128,13 @@

 <pre><code>&lt;<b>nav</b>&gt;
  &lt;<b>ul</b>&gt;
-    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;...&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;…&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
  &lt;/<b>ul</b>&gt;
  &lt;<b>ul</b>&gt;
    &lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
  &lt;/<b>ul</b>&gt;
  &lt;<b>ul</b>&gt;
-    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;...&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;…&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
  &lt;/<b>ul</b>&gt;
 &lt;/<b>nav</b>&gt;</code></pre>

@ -1195,10 +1195,10 @@
              <h3><code><i>aria-busy</i>=<u>"true"</u></code> enable a loading indicator.</h3>
            </hgroup>
            <article aria-label="Loading buttons example">
-              <button aria-busy="true">Please wait...</button>
+              <button aria-busy="true">Please wait…</button>
              <button aria-busy="true" class="secondary"></button>

-<pre><code>&lt;<b>button</b> <i>aria-busy</i>=<u>"true"</u>&gt;Please wait...&lt;/<b>button</b>&gt;
+<pre><code>&lt;<b>button</b> <i>aria-busy</i>=<u>"true"</u>&gt;Please wait…&lt;/<b>button</b>&gt;
 &lt;<b>button</b> <i>aria-busy</i>=<u>"true"</u> <i>class</i>=<u>"secondary"</u>&gt;&lt;/<b>button</b>&gt;</code></pre>

            </article>
@ -1207,8 +1207,8 @@
            <pre><code>&lt;<b>article</b> <i>aria-busy</i>=<u>"true"</u>&gt;&lt;/<b>article</b>&gt;</code></pre>
            <p>Or any text element:</p>
            <article aria-label="Loading paragraph example">
-              <a href="#" aria-busy="true" onclick="event.preventDefault()">Generating link, please wait...</a>
-              <pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-busy</i>=<u>"true"</u>&gt;Generating link, please wait...&lt;/<b>a</b>&gt;</code></pre>
+              <a href="#" aria-busy="true" onclick="event.preventDefault()">Generating link, please wait…</a>
+              <pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-busy</i>=<u>"true"</u>&gt;Generating link, please wait…&lt;/<b>a</b>&gt;</code></pre>

            </article>
          </section><!-- ./ Docs: Loading -->
@ -1249,12 +1249,7 @@
          <!-- Footer -->
          <footer>
            <hr>
-            <p>
-              <small>
-                Openly inspired by <a href="https://getbootstrap.com/" class="secondary">Bootstrap</a>, <a href="https://www.cssbed.com/" class="secondary">CSS Bed</a>, <a href="https://necolas.github.io/normalize.css/" class="secondary">Normalize</a>,  <a href="https://csstools.github.io/sanitize.css/" class="secondary">Sanitize</a>, <a href="https://picturepan2.github.io/spectre/" class="secondary">Spectre</a> & <a href=" https://kbrsh.github.io/wing/" class="secondary">Wing</a><br>
-                Licensed under the <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT License</a><br>
-              </small>
-            </p>
+            <p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p>
          </footer><!-- ./ Footer -->

        </div><!-- ./ Document -->
@ -1262,7 +1257,6 @@
    </main><!-- ./ Main -->

    <!-- JavaScript -->
-    <script src="https://unpkg.com/most-visible@1.5.0/dist/most-visible.min.js"></script>
    <script src="js/pico.docs.min.js"></script>

  </body>
--- a/docs/js/pico.docs.js
+++ b/docs/js/pico.docs.js
@ -6,6 +6,7 @@
 */

 // Imports
+import * as mostVisible from './src/most-visible.min.js';
 import { aside } from './src/aside.js';
 import { themeSwitcher } from './src/theme-switcher.js';
 import { materialDesignColors } from './src/material-design-colors.js';
@ -32,4 +33,4 @@ colorPicker.init();
 grid.init();

 // Scrollspy
-scrollspy.init();
+scrollspy.init(mostVisible);
--- a/docs/js/pico.docs.min.js
+++ b/docs/js/pico.docs.min.js
--- a/docs/js/src/most-visible.min.js
+++ b/docs/js/src/most-visible.min.js
@ -0,0 +1,7 @@
+/**
+ * Most Visible v1.5.0
+ *
+ * @author Andy Palmer <andy@andypalmer.me>
+ * @license MIT
+ */
+!function(e,t){"function"==typeof define&&define.amd?define([],function(){return t(e)}):"object"==typeof module&&module.exports?module.exports=t(e):e.mostVisible=t(e)}("undefined"!=typeof self?self:this,function(e){"use strict";function i(e,t){if(!(this instanceof i))return new i(e,t).getMostVisible();"string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=e,this.options=function(e){for(var t=1;t<arguments.length;t++)for(var i in arguments[t])e[i]=arguments[t][i];return e}({},i.defaults,t)}return i.defaults={percentage:!1,offset:0},i.prototype={getMostVisible:function(){var n=this,o=document.documentElement.clientHeight;return Array.prototype.reduce.call(this.elements,function(e,t){var i=n.getVisibleHeight(t,o);return i>e[0]?[i,t]:e},[0,null])[1]},getVisibleHeight:function(e,t){var i=e.getBoundingClientRect(),n=i.top-this.options.offset,o=i.bottom-this.options.offset,s=i.bottom-i.top,r=0<=n&&n<t,f=0<o&&o<t,u=0;if(r&&f)u=s;else if(r)u=t-i.top;else if(f)u=o;else if(t<s&&n<0){var l=Math.abs(n);l<s&&(u=s-l)}return this.options.percentage?u/s*100:u}},i.makeJQueryPlugin=function(e){e&&(e.fn.mostVisible=function(e){var t=new i(this.get(),e);return this.filter(t.getMostVisible())})},i.makeJQueryPlugin(e.jQuery),i});
--- a/docs/js/src/scrollspy.js
+++ b/docs/js/src/scrollspy.js
@ -11,6 +11,7 @@
 export const scrollspy = {

  // Config
+  mostVisible: null,
  minWidth: '992px',
  interval: 75,
  targets: {
@ -21,7 +22,10 @@ export const scrollspy = {


  // Init
-  init() {
+  init(mostVisible) {
+    if (this.mostVisible == null) {
+      this.mostVisible = mostVisible;
+    }
    if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
      this.setActiveNav();
      this.scrollStop();
@ -33,7 +37,7 @@ export const scrollspy = {
  setActiveNav() {

    // Get active section
-    let currentSection = mostVisible(this.targets.sections).getAttribute('id');
+    let currentSection = this.mostVisible(this.targets.sections).getAttribute('id');

    // Remove all active states
    let links = document.querySelectorAll(this.targets.nav + ' a.' + this.targets.active);
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@picocss/pico",
-  "version": "1.3.2",
+  "version": "1.3.3",
  "description": "Graceful & Minimal CSS design system in pure semantic HTML",
  "author": "Lucas Larroche",
  "main": "css/pico.min.css",
@ -13,13 +13,15 @@
  "keywords": [
    "css",
    "css-framework",
-    "dark-theme",
    "dark-mode",
-    "semantic",
-    "minimal",
+    "dark-theme",
    "lightweight",
+    "minimal",
+    "minimalist",
+    "minimalistic",
+    "native-html",
    "scss-framework",
-    "native-html"
+    "semantic"
  ],
  "bugs": {
    "url": "https://github.com/picocss/pico/issues"
--- a/scss/content/_form.scss
+++ b/scss/content/_form.scss
@ -42,14 +42,9 @@ legend {
  white-space: normal; // 1
 }

-// 1. Remove the margin in Firefox and Safari
-// 2. Remove the default vertical scrollbar in IE
-// 3. Change the resize direction in all browsers (opinionated)
+// 1. Remove the default vertical scrollbar in IE
 textarea {
-  margin: 0; // 1
-  overflow: auto; // 2
-  resize: vertical; // 3
-  resize: block; // 3
+  overflow: auto; // 1
 }

 // Remove the padding in IE 10
--- a/scss/pico.scss
+++ b/scss/pico.scss
@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.3.2 (https://picocss.com)
+ * Pico.css v1.3.3 (https://picocss.com)
 * Copyright 2019-2021 - Licensed under MIT
 */

--- a/scss/pico.slim.scss
+++ b/scss/pico.slim.scss
@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.3.2 (https://picocss.com)
+ * Pico.css v1.3.3 (https://picocss.com)
 * Copyright 2019-2021 - Licensed under MIT
 *
 * Slim version example
--- a/scss/themes/default/_styles.scss
+++ b/scss/themes/default/_styles.scss
@ -187,18 +187,15 @@ h5 {
 }

 // Table
-table {
-
-  thead {
-    th,
-    td {
-      --border-width: 3px;
-    }
+thead {
+  th,
+  td {
+    --border-width: 3px;
  }
+}

-  :not(thead) td {
-    --font-size: 0.875em;
-  }
+:not(thead) > * > td {
+  --font-size: 0.875em;
 }

 // Code