gerillass 2.1.1 → 2.2.1

package/SKILL.md

@@ -5,7 +5,7 @@ description: Use the Gerillass Sass mixin library — loading it, the mixin cata
 
 # Gerillass
 
-A Sass mixin library: 53 mixins and 23 functions that emit CSS from
+A Sass mixin library: 56 mixins and 23 functions that emit CSS from
 semantic declarations. It is Sass source only — there is no runtime and no
 utility classes, so styles live in your stylesheet and your markup stays clean.
 
@@ -84,11 +84,13 @@ a dropped declaration rather than an error.
 | `container` | `.card { @include container("card", sideways); }` |
 | `escape-to-parent` | `.a { @include escape-to-parent(42) { color: red; } }` |
 | `except` | `.a { @include except(#ff0000) { margin: 0; } }` |
+| `focus-ring` | `@include focus-ring;` |
 | `font-face` | `.a { @include font-face("Inter", "/fonts/inter"); }` |
 | `hide` | `.a { @include hide(nonsense); }` |
 | `line-clamp` | `.a { @include line-clamp(0); }` |
 | `linear-gradient` | `.a { @include linear-gradient(sideways, (red, blue)); }` |
 | `loadify` | `@include loadify(nonsense);` |
+| `motion-safe` | `.card { @include motion-safe; }` |
 | `only` | `.a { @include only(#ff0000) { margin: 0; } }` |
 | `radial-gradient` | `.a { @include radial-gradient(42, "center", (red, blue)); }` |
 | `remove` | `.a { @include remove(a, b, c); }` |
@@ -102,6 +104,7 @@ a dropped declaration rather than an error.
 | `text-gradient` | `.a { @include text-gradient(sideways, (red, blue)); }` |
 | `text-selection` | `.a { @include text-selection(bogus) { background: yellow; } }` |
 | `text-shadow` | `.a { @include text-shadow(42); }` |
+| `tokens` | `:root { @include tokens(#fff); }` |
 | `triangle` | `.caret { @include triangle(sideways); }` |
 
 ## Traps a signature does not show
@@ -120,9 +123,13 @@ a dropped declaration rather than an error.
 
 **`breakpoint`**
 
-- With one argument the query matches exactly that width, `(width: 768px)`, which is a single pixel. Use `min`, `max` or a range for anything wider.
+- With one argument the query matches exactly that width, `(width: 768px)`, which is a single pixel, and the mixin prints a warning. Write `only` for that width, or `min`, `max` or a range for anything wider. 3.0.0 will refuse the one-argument form.
 - Declarations written after the include, in the same rule, are emitted after the `@media` block and win over it. Write them before the include.
 
+**`container-query`**
+
+- A size on its own matches exactly that width, `(width: 400px)`, which is a single pixel, and the mixin prints a warning. Write `only` for that width, or `min`, `max` or a range for anything wider. 3.0.0 will refuse the one-argument form.
+
 **`container`**
 
 - An element does not match a `@container` query that reads its own container, and nothing warns. Put the `container-query` on a descendant.
@@ -135,9 +142,13 @@ a dropped declaration rather than an error.
 
 - `init` and every call must be in the same module, or the module with the call must `@use` the one that calls `init`. Otherwise Sass fails with "The target selector was not found".
 
+**`motion-safe`**
+
+- Keep the resting state outside the block. An element hidden in its base rule and revealed by an animation inside the block stays hidden for a user who asked for less motion; put the start state in the keyframes instead.
+
 **`remove`**
 
-- With one argument the element is hidden at exactly that width, `(width: 768px)`, which is a single pixel. Use `min`, `max` or a range for anything wider.
+- With one argument the element is hidden at exactly that width, `(width: 768px)`, which is a single pixel, and the mixin prints a warning. Write `only` for that width, or `min`, `max` or a range for anything wider. 3.0.0 will refuse the one-argument form.
 - A `display` written after the include, in the same rule, is emitted after the `@media` block and wins over it. Write it before the include.
 
 ## Mixins
@@ -169,17 +180,19 @@ a dropped declaration rather than an error.
 | `ellipsis($width: 100%, $display: inline-block)` | Truncates a single line of text with an ellipsis. |
 | `escape-to-parent($selector: null)` | Re-roots the current selector under another one using @at-root. |
 | `except($params...)` | Selects every sibling except the ones named. |
-| `font-face($font-family, $file-path, $font-style: normal, $font-weight: 400, $file-formats: eot woff2 woff ttf svg)` | Emits an @font-face rule for one family across several file formats. Must be called at the root. |
+| `focus-ring($width: 2px, $offset: 2px, $color: currentColor)` | Draws a keyboard focus ring with outline on :focus-visible, which survives forced-colors mode where a box-shadow ring disappears. |
+| `font-face($font-family, $file-path, $font-style: normal, $font-weight: 400, $file-formats: eot woff2 woff ttf svg, $font-display: null)` | Emits an @font-face rule for one family across several file formats. Must be called at the root. |
 | `hide($toggle: "hide")` | Visually hides an element while keeping it available to screen readers, or reverses that. |
 | `line-clamp($lines: 3)` | Truncates text after a number of lines, where ellipsis truncates one. It emits five declarations rather than one because -webkit-line-clamp does nothing on its own: without display: -webkit-box or without -webkit-box-orient: vertical the text is not clamped at all and nothing warns you, and without overflow: hidden the clamped text spills out below the box. The unprefixed line-clamp is emitted too, for when it becomes Baseline. |
 | `linear-gradient($direction, $colors)` | Linear gradient background from a direction name or an angle. |
 | `loadify($params...)` | Fades elements in on page load. Call once at the root to set up, then on each element. Under prefers-reduced-motion: reduce the end state is applied directly and no animation runs. Switching the animation off alone would not do, because the element starts invisible and the animation is what reveals it, so the content would stay hidden for good. |
+| `motion-safe` | Wraps its content in @media (prefers-reduced-motion: no-preference), so motion is opt-in: a user who asked their system for less motion gets none of it. |
 | `only($params...)` | Selects only the siblings named. |
 | `placeholder-shown` | Styles an input while its placeholder is visible. |
 | `placeholder` | Styles the placeholder text of an input across vendor prefixes. |
 | `position($position: absolute, $offsets: 0)` | Sets position and offsets in one call, using shorthand order. |
 | `radial-gradient($shape, $position, $colors)` | Radial gradient background from a shape and a position. |
-| `remove($params...)` | Hides an element outright, or within a media query: from a breakpoint up with min, up to it with max, or between two breakpoints. One breakpoint on its own hides the element at exactly that width, a single pixel. |
+| `remove($params...)` | Hides an element outright, or within a media query: from a breakpoint up with min, up to it with max, or between two breakpoints. One breakpoint on its own hides the element at exactly that width, a single pixel, and prints a warning: pass only for that. |
 | `reset-css` | Meyer reset. Must be called at the root of the stylesheet. |
 | `reset-figure` | Removes default figure margins and makes the image inside responsive. |
 | `resizable($direction: both, $overflow: auto)` | Makes an element user-resizable. |
@@ -196,6 +209,7 @@ a dropped declaration rather than an error.
 | `text-selection($value: null)` | Styles the ::selection pseudo-element. |
 | `text-shadow($params...)` | Layered text shadows built from a direction, a colour and an offset. |
 | `text-stroke($fallback-color: black, $color: transparent, $stroke-color: black, $stroke-width: 1px)` | Outlines text using the webkit text-stroke properties. |
+| `tokens($map, $prefix: null)` | Writes a Sass map out as CSS custom properties, for any kind of token: colours, spacing, sizes, radii, type, shadows, durations. With the prefix space, (4: 1rem) becomes --space-4: 1rem. A null value is skipped, and a quoted string keeps its quotes. |
 | `triangle($direction: "bottom", $color: black, $size: 10px 8px)` | Draws a CSS triangle out of borders, pointing in a given direction. |
 
 ## Functions

package/gerillass.json

@@ -1,6 +1,6 @@
 {
   "name": "gerillass",
-  "version": "2.1.1",
+  "version": "2.2.1",
   "description": "Gerillass is an open-source toolkit that contains a set of Sass mixins to help designers and developers to create better, faster and consistent user interfaces.",
   "homepage": "https://gerillass.com",
   "documentation": "https://docs.gerillass.com",
@@ -106,6 +106,8 @@
             "invalid",
             "required",
             "disabled",
+            "focus-visible",
+            "user-invalid",
             "null for the plain state"
           ]
         }
@@ -115,7 +117,9 @@
       "summary": "Targets every text-like input at once, optionally in one pseudo-class state.",
       "examples": [
         "@include all-text-inputs { border: 1px solid; }",
-        "@include all-text-inputs(\"focus\") { outline: 2px solid; }"
+        "@include all-text-inputs(\"focus\") { outline: 2px solid; }",
+        "@include all-text-inputs(\"focus-visible\") { outline: 2px solid; }",
+        "@include all-text-inputs(\"user-invalid\") { border-color: crimson; }"
       ],
       "rejects": [
         "@include all-text-inputs(nonsense) { color: red; }"
@@ -417,6 +421,7 @@
           "accepts": [
             "one length for every corner",
             "a corner name plus a length",
+            "a logical corner or edge plus a length: start-start, start-end, end-start, end-end, inline-start, inline-end, block-start or block-end",
             "four lengths: top-left, top-right, bottom-right, bottom-left"
           ]
         }
@@ -427,7 +432,9 @@
       "examples": [
         ".a { @include border-radius(8px); }",
         ".a { @include border-radius(\"top\", 8px); }",
-        ".a { @include border-radius(1px, 2px, 3px, 4px); }"
+        ".a { @include border-radius(1px, 2px, 3px, 4px); }",
+        ".tab { @include border-radius(\"inline-start\", 8px); }",
+        ".bubble { @include border-radius(\"end-end\", 12px); }"
       ],
       "rejects": [
         ".a { @include border-radius(1px, 2px, 3px); }",
@@ -478,7 +485,8 @@
           "name": "$params",
           "variadic": true,
           "accepts": [
-            "one breakpoint name, for exactly that width",
+            "one breakpoint name, for exactly that width, which prints a warning: write only instead",
+            "only plus a breakpoint, for exactly that width",
             "min or max plus a breakpoint",
             "between plus two breakpoints",
             "a start and an end value"
@@ -489,11 +497,11 @@
       "signature": "breakpoint($params...)",
       "summary": "Media query built from the breakpoint map, or from raw lengths.",
       "caveats": [
-        "With one argument the query matches exactly that width, `(width: 768px)`, which is a single pixel. Use `min`, `max` or a range for anything wider.",
+        "With one argument the query matches exactly that width, `(width: 768px)`, which is a single pixel, and the mixin prints a warning. Write `only` for that width, or `min`, `max` or a range for anything wider. 3.0.0 will refuse the one-argument form.",
         "Declarations written after the include, in the same rule, are emitted after the `@media` block and win over it. Write them before the include."
       ],
       "examples": [
-        ".a { @include breakpoint(\"medium\") { color: red; } }",
+        ".a { @include breakpoint(\"only\", \"medium\") { color: red; } }",
         ".a { @include breakpoint(\"min\", \"medium\") { color: red; } }",
         ".a { @include breakpoint(\"between\", \"medium\" \"large\") { color: red; } }"
       ],
@@ -502,6 +510,9 @@
         ".a { @include breakpoint() { color: red; } }",
         ".a { @include breakpoint(\"min\", var(--wide)) { color: red; } }",
         ".a { @include breakpoint(\"between\", var(--start) \"large\") { color: red; } }"
+      ],
+      "warns": [
+        ".a { @include breakpoint(\"medium\") { color: red; } }"
       ]
     },
     {
@@ -623,7 +634,7 @@
           "name": "$params",
           "variadic": true,
           "accepts": [
-            "a size",
+            "a size, for exactly that width, which prints a warning: write only instead",
             "two sizes for a range",
             "one of min, max, only or between followed by a size",
             "$name as a keyword, to query one named container"
@@ -633,9 +644,13 @@
       "file": "scss/library/_container-query.scss",
       "signature": "container-query($params...)",
       "summary": "A @container rule, taking the same argument shapes as breakpoint so the two read alike. Sizes may be a key from $map-for-breakpoints or a raw length, and a length is the common case because a container is usually narrower than the viewport. Nothing matches at all unless an ancestor was declared with the container mixin.",
+      "caveats": [
+        "A size on its own matches exactly that width, `(width: 400px)`, which is a single pixel, and the mixin prints a warning. Write `only` for that width, or `min`, `max` or a range for anything wider. 3.0.0 will refuse the one-argument form."
+      ],
       "examples": [
         ".title { @include container-query(\"min\", 400px) { font-size: 2rem; } }",
         ".title { @include container-query(\"max\", 399px) { font-size: 1rem; } }",
+        ".title { @include container-query(\"only\", 400px) { color: red; } }",
         ".title { @include container-query(\"between\", 300px 500px) { color: red; } }",
         ".title { @include container-query(300px, 500px) { color: red; } }",
         ".title { @include container-query(\"min\", \"medium\") { color: red; } }",
@@ -644,7 +659,15 @@
       "rejects": [
         ".title { @include container-query(\"min\", 400px, 800px) { color: red; } }",
         ".title { @include container-query(\"min\", 400px, $name: 42) { color: red; } }",
-        ".title { @include container-query(\"min\", var(--wide)) { color: red; } }"
+        ".title { @include container-query(\"min\", var(--wide)) { color: red; } }",
+        ".title { @include container-query(\"min\", 400px, $name: var(--container)) { color: red; } }",
+        ".title { @include container-query(\"min\", 400px, $name: \"none\") { color: red; } }",
+        ".title { @include container-query(\"min\", 400px, $name: \"not\") { color: red; } }",
+        ".title { @include container-query(\"min\", 400px, $name: \"my card\") { color: red; } }",
+        ".title { @include container-query(\"min\", 400px, $name: \"1card\") { color: red; } }"
+      ],
+      "warns": [
+        ".title { @include container-query(400px) { color: red; } }"
       ]
     },
     {
@@ -682,7 +705,9 @@
       ],
       "rejects": [
         ".card { @include container(\"card\", sideways); }",
-        ".card { @include container(42); }"
+        ".card { @include container(42); }",
+        ".card { @include container(\"and\"); }",
+        ".card { @include container(\"1card\"); }"
       ]
     },
     {
@@ -791,6 +816,43 @@
         ".a { @include except(#ff0000) { margin: 0; } }"
       ]
     },
+    {
+      "name": "focus-ring",
+      "kind": "mixin",
+      "arguments": [
+        {
+          "name": "$width",
+          "default": "2px",
+          "accepts": [
+            "an outline width, such as 2px"
+          ]
+        },
+        {
+          "name": "$offset",
+          "default": "2px",
+          "accepts": [
+            "a length; negative draws the ring inside the element"
+          ]
+        },
+        {
+          "name": "$color",
+          "default": "currentColor",
+          "accepts": [
+            "any CSS colour, including currentColor and var()"
+          ]
+        }
+      ],
+      "file": "scss/library/_focus-ring.scss",
+      "signature": "focus-ring($width: 2px, $offset: 2px, $color: currentColor)",
+      "summary": "Draws a keyboard focus ring with outline on :focus-visible, which survives forced-colors mode where a box-shadow ring disappears.",
+      "examples": [
+        ".button { @include focus-ring; }",
+        ".card-link { @include focus-ring(3px, 4px, var(--focus)); }"
+      ],
+      "rejects": [
+        "@include focus-ring;"
+      ]
+    },
     {
       "name": "font-face",
       "kind": "mixin",
@@ -829,14 +891,24 @@
           "accepts": [
             "any of eot, woff2, woff, ttf, svg"
           ]
+        },
+        {
+          "name": "$font-display",
+          "default": "null",
+          "accepts": [
+            "auto, block, swap, fallback or optional",
+            "null, the default, to leave font-display out"
+          ]
         }
       ],
       "file": "scss/library/_font-face.scss",
-      "signature": "font-face($font-family, $file-path, $font-style: normal, $font-weight: 400, $file-formats: eot woff2 woff ttf svg)",
+      "signature": "font-face($font-family, $file-path, $font-style: normal, $font-weight: 400, $file-formats: eot woff2 woff ttf svg, $font-display: null)",
       "summary": "Emits an @font-face rule for one family across several file formats. Must be called at the root.",
       "examples": [
         "@include font-face(\"Inter\", \"/fonts/inter\");",
-        "@include font-face(\"Inter\", \"/fonts/inter\", italic, 700, woff2 woff);"
+        "@include font-face(\"Inter\", \"/fonts/inter\", italic, 700, woff2 woff);",
+        "@include font-face(\"Readex Pro\", \"/fonts/readex\", $font-weight: 160 700, $file-formats: woff2, $font-display: swap);",
+        "@include font-face(\"Inter\", \"/fonts/inter\", \"italic\", $font-weight: \"bold\", $file-formats: woff2);"
       ],
       "rejects": [
         ".a { @include font-face(\"Inter\", \"/fonts/inter\"); }",
@@ -845,7 +917,16 @@
         "@include font-face(\"Inter\", \"/fonts/inter\", $file-formats: otf);",
         "@include font-face(\"Inter\", \"/fonts/inter\", $file-formats: woff2 wof);",
         "@include font-face(\"Inter\", \"/fonts/inter\", $file-formats: null);",
-        "@include font-face(\"Inter\", var(--font-path));"
+        "@include font-face(\"Inter\", var(--font-path));",
+        "@include font-face(\"Inter\", \"/fonts/inter\", $file-formats: woff2, $font-display: fast);",
+        "@include font-face(\"Inter\", \"/fonts/inter\", $file-formats: woff2, $font-display: var(--display));",
+        "@include font-face(var(--font-family), \"/fonts/inter\", $file-formats: woff2);",
+        "@include font-face(\"Inter\", \"/fonts/inter\", var(--font-style), $file-formats: woff2);",
+        "@include font-face(\"Inter\", \"/fonts/inter\", $font-weight: var(--font-weight), $file-formats: woff2);",
+        "@include font-face(\"Inter\", \"/fonts/inter\", $font-weight: 100 var(--max-weight), $file-formats: woff2);",
+        "@include font-face(sans-serif, \"/fonts/inter\", $file-formats: woff2);",
+        "@include font-face(inherit, \"/fonts/inter\", $file-formats: woff2);",
+        "@include font-face(env(--font-family), \"/fonts/inter\", $file-formats: woff2);"
       ]
     },
     {
@@ -963,6 +1044,24 @@
         "@include loadify(nonsense);"
       ]
     },
+    {
+      "name": "motion-safe",
+      "kind": "mixin",
+      "arguments": [],
+      "file": "scss/library/_motion-safe.scss",
+      "signature": "motion-safe",
+      "summary": "Wraps its content in @media (prefers-reduced-motion: no-preference), so motion is opt-in: a user who asked their system for less motion gets none of it.",
+      "caveats": [
+        "Keep the resting state outside the block. An element hidden in its base rule and revealed by an animation inside the block stays hidden for a user who asked for less motion; put the start state in the keyframes instead."
+      ],
+      "examples": [
+        ".card { @include motion-safe { transition: transform 0.2s ease; } }",
+        "@include motion-safe { .spinner { animation: spin 1s linear infinite; } }"
+      ],
+      "rejects": [
+        ".card { @include motion-safe; }"
+      ]
+    },
     {
       "name": "only",
       "kind": "mixin",
@@ -1092,7 +1191,8 @@
           "variadic": true,
           "accepts": [
             "nothing, to hide it always",
-            "one breakpoint, for exactly that width and no other",
+            "one breakpoint, for exactly that width and no other, which prints a warning: write only instead",
+            "only plus a breakpoint, for exactly that width",
             "min or max plus a breakpoint",
             "a start and an end breakpoint"
           ]
@@ -1100,20 +1200,24 @@
       ],
       "file": "scss/library/_remove.scss",
       "signature": "remove($params...)",
-      "summary": "Hides an element outright, or within a media query: from a breakpoint up with min, up to it with max, or between two breakpoints. One breakpoint on its own hides the element at exactly that width, a single pixel.",
+      "summary": "Hides an element outright, or within a media query: from a breakpoint up with min, up to it with max, or between two breakpoints. One breakpoint on its own hides the element at exactly that width, a single pixel, and prints a warning: pass only for that.",
       "caveats": [
-        "With one argument the element is hidden at exactly that width, `(width: 768px)`, which is a single pixel. Use `min`, `max` or a range for anything wider.",
+        "With one argument the element is hidden at exactly that width, `(width: 768px)`, which is a single pixel, and the mixin prints a warning. Write `only` for that width, or `min`, `max` or a range for anything wider. 3.0.0 will refuse the one-argument form.",
         "A `display` written after the include, in the same rule, is emitted after the `@media` block and wins over it. Write it before the include."
       ],
       "examples": [
         ".a { @include remove; }",
         ".a { @include remove(\"min\", \"medium\"); }",
         ".a { @include remove(\"max\", \"medium\"); }",
+        ".a { @include remove(\"only\", \"medium\"); }",
         ".a { @include remove(\"small\", \"large\"); }"
       ],
       "rejects": [
         ".a { @include remove(a, b, c); }",
         ".a { @include remove(\"max\", var(--narrow)); }"
+      ],
+      "warns": [
+        ".a { @include remove(\"medium\"); }"
       ]
     },
     {
@@ -1514,6 +1618,48 @@
       ],
       "rejects": []
     },
+    {
+      "name": "tokens",
+      "kind": "mixin",
+      "arguments": [
+        {
+          "name": "$map",
+          "required": true,
+          "accepts": [
+            "a map of names to values, where a value is any CSS value: a colour, a length, a font stack, a shadow, a duration, calc() or clamp()",
+            "a value of null, which is skipped",
+            "a value that references another token, such as var(--blue-500)"
+          ]
+        },
+        {
+          "name": "$prefix",
+          "default": "null",
+          "accepts": [
+            "null, the default, for no prefix",
+            "a name, joined to each property name with a hyphen"
+          ]
+        }
+      ],
+      "file": "scss/library/_tokens.scss",
+      "signature": "tokens($map, $prefix: null)",
+      "summary": "Writes a Sass map out as CSS custom properties, for any kind of token: colours, spacing, sizes, radii, type, shadows, durations. With the prefix space, (4: 1rem) becomes --space-4: 1rem. A null value is skipped, and a quoted string keeps its quotes.",
+      "examples": [
+        ":root { @include tokens((1: 0.25rem, 2: 0.5rem, 4: 1rem), space); @include tokens((md: 8px, full: 9999px), radius); }",
+        ":root { @include tokens((md: 0 4px 12px rgba(24, 24, 27, 0.08)), shadow); @include tokens((fast: 150ms, ease: cubic-bezier(0.2, 0, 0, 1)), motion); }",
+        ":root { @include tokens((bg: #fff, text: #111), color); }",
+        ":root { @include tokens((blue-500: #3b82f6, blue-600: #2563eb)); }",
+        ":root { @include tokens((red: #ef4444, 500: #3b82f6), blue); }",
+        "[data-theme=\"dark\"] { @include tokens((bg: #09090b, accent: var(--blue-500)), color); }",
+        ":root { @include tokens((body: (\"Readex Pro\", sans-serif), label: \"New\", focus: null), font); }"
+      ],
+      "rejects": [
+        ":root { @include tokens(#fff); }",
+        ":root { @include tokens((brand: (500: #3b82f6)), color); }",
+        ":root { @include tokens((bg: #fff), (color, text)); }",
+        ":root { @include tokens((\"brand color\": #f00)); }",
+        "@include tokens((bg: #fff));"
+      ]
+    },
     {
       "name": "triangle",
       "kind": "mixin",
@@ -1529,7 +1675,8 @@
             "bottom",
             "bottom-left",
             "left",
-            "top-left"
+            "top-left",
+            "inline-start, inline-end, block-start or block-end, which follow the writing direction"
           ]
         },
         {
@@ -1559,7 +1706,9 @@
         ".arrow { @include triangle(\"right\", var(--accent), 6px 8px); }",
         ".arrow { @include triangle(\"right\", currentColor); }",
         ".arrow { @include triangle(\"top\", color-mix(in srgb, red 50%, blue)); }",
-        ".arrow { @include triangle(\"bottom\", currentColor, var(--caret-w) var(--caret-h)); }"
+        ".arrow { @include triangle(\"bottom\", currentColor, var(--caret-w) var(--caret-h)); }",
+        ".next { @include triangle(\"inline-end\", currentColor, 8px 12px); }",
+        ".sort { @include triangle(\"block-start\", currentColor); }"
       ],
       "rejects": [
         ".caret { @include triangle(sideways); }",

package/package.json

@@ -16,7 +16,7 @@
     }
   },
   "license": "Apache-2.0",
-  "version": "2.1.1",
+  "version": "2.2.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/selfishprimate/gerillass.git"

package/scss/library/_all-text-inputs.scss

@@ -5,7 +5,7 @@
 @use "../utilities/pseudo-selector" as *;
 
 @mixin all-text-inputs($pseudo: null) {
-  $list: "hover", "focus", "active", "invalid", "required", "disabled";
+  $list: "hover", "focus", "focus-visible", "active", "invalid", "user-invalid", "required", "disabled";
   @if not $pseudo {
     #{$list-of-text-inputs} {
       @content;

package/scss/library/_border-radius.scss

@@ -5,7 +5,11 @@
 @use "../utilities/fill-nulls" as *;
 
 @mixin border-radius($args...) {
-  $list: list.join($list-of-directions, ("cross-left", "cross-right", "all"));
+  // Logical corners are named block side first, inline side second, like the
+  // properties they map to. Every name here needs a branch below: the chain has
+  // no final @else, so a name without one would be accepted and emit nothing.
+  $logical: ("start-start", "start-end", "end-start", "end-end", "inline-start", "inline-end", "block-start", "block-end");
+  $list: list.join(list.join($list-of-directions, ("cross-left", "cross-right", "all")), $logical);
   @if list.length($args) == 1 {
     $value: list.nth($args, 1);
     border-radius: fillNulls($value, space);
@@ -41,6 +45,26 @@
       } @else if $corner == "cross-right" {
         border-top-right-radius: $value;
         border-bottom-left-radius: $value;
+      } @else if $corner == "start-start" {
+        border-start-start-radius: $value;
+      } @else if $corner == "start-end" {
+        border-start-end-radius: $value;
+      } @else if $corner == "end-start" {
+        border-end-start-radius: $value;
+      } @else if $corner == "end-end" {
+        border-end-end-radius: $value;
+      } @else if $corner == "inline-start" {
+        border-start-start-radius: $value;
+        border-end-start-radius: $value;
+      } @else if $corner == "inline-end" {
+        border-start-end-radius: $value;
+        border-end-end-radius: $value;
+      } @else if $corner == "block-start" {
+        border-start-start-radius: $value;
+        border-start-end-radius: $value;
+      } @else if $corner == "block-end" {
+        border-end-start-radius: $value;
+        border-end-end-radius: $value;
       }
     } @else {
       @error "Corner value must be one of the followings: #{$list}.";

package/scss/library/_breakpoint.scss

@@ -33,6 +33,11 @@
   }
   @if list.length($params) == 1 {
     $value: list.nth($params, 1);
+    $width: if(map.has-key($map-for-breakpoints, $value), map.get($map-for-breakpoints, $value), $value);
+    // One argument matches a single pixel, which two agent trials took for
+    // "from this width up". Still emitted, so no stylesheet changes, but said
+    // out loud until 3.0.0 refuses it.
+    @warn "`breakpoint(#{$value})` matches only a viewport exactly #{$width} wide, `(width: #{$width})`. Write `breakpoint(only, #{$value})` for that width, or `breakpoint(min, #{$value})` from it upwards. The one-argument form will be refused in 3.0.0.";
     @if map.has-key($map-for-breakpoints, $value) {
       @media (width: map.get($map-for-breakpoints, $value)) {
         @content;

package/scss/library/_container-query.scss

@@ -26,6 +26,45 @@
   @return null;
 }
 
+// Characters and names a browser will not keep as the name in an @container
+// rule. Measured in Chrome 152, the rule was dropped for `var(--n)`, `none`,
+// `and`, `or`, `default`, `inherit`, `initial`, `unset`, `revert`,
+// `revert-layer`, `my card`, `1card`, `-1card`, `a.b`, `#card` and `card!`,
+// in any case. `not` was worse: the rule was kept with no name, as a negated
+// query, so it matched the opposite of what was asked. `--card`, `-card`,
+// `_card`, `c-`, `ünlü`, `auto` and `normal` were kept.
+$-reserved-names: "none" "and" "or" "not" "default" "inherit" "initial" "unset" "revert" "revert-layer";
+$-forbidden-in-name: "." "," "/" "#" ":" ";" "(" ")" "[" "]" "{" "}" "!" "@" "$" "%" "^" "&" "*" "+" "=" "<" ">" "?" "\\" "|" "~" "`" "'" "\"";
+
+@function -name-problem($name) {
+  // An empty name has always compiled to an unnamed query, which works, so it
+  // is left alone rather than refused.
+  $text: "#{$name}";
+  @if string.length($text) == 0 {
+    @return null;
+  }
+  @if string.index($text, "var(") {
+    @return "a custom property is not evaluated in a @container condition, so the rule would never apply. Pass the name itself, such as `\"card\"`; the `container` mixin can still take its name from a custom property";
+  }
+  @if string.index($text, " ") {
+    @return "a query names one container. Pass one name, such as `\"card\"`";
+  }
+  @if list.index($-reserved-names, string.to-lower-case($text)) {
+    @return "`none`, `and`, `or`, `not`, `default` and the CSS-wide keywords are reserved there. A browser drops the rule, and reads `not` as negating the query instead. Pass another name, such as `\"card\"`";
+  }
+  $first: string.slice($text, 1, 1);
+  $second: string.slice($text, 2, 2);
+  @if string.index("0123456789", $first) or ($first == "-" and string.length($text) > 1 and string.index("0123456789", $second)) {
+    @return "a container name cannot start with a digit, or with a hyphen and a digit. Pass a name such as `\"card\"`";
+  }
+  @each $character in $-forbidden-in-name {
+    @if string.index($text, $character) {
+      @return "a container name cannot contain `#{$character}`. Use letters, digits, hyphens and underscores";
+    }
+  }
+  @return null;
+}
+
 // A @container rule, taking the same argument shapes as `breakpoint` so the two
 // read alike. Sizes may be a key from $map-for-breakpoints or a raw length; a
 // container is usually narrower than the viewport, so a length is the common
@@ -42,6 +81,12 @@
   @if $name != null and meta.type-of($name) != "string" {
     @error "`#{$name}` is not a valid $name for `container-query`. Pass a container name as a string, such as `\"card\"`.";
   }
+  @if $name != null {
+    $problem: -name-problem($name);
+    @if $problem {
+      @error "`#{$name}` is not a valid $name for `container-query`: #{$problem}.";
+    }
+  }
 
   $custom-property: -custom-property-in($params);
   @if $custom-property {
@@ -50,7 +95,11 @@
   $condition: null;
 
   @if $count == 1 {
-    $condition: "(width: #{validateBreakpoint(list.nth($params, 1))})";
+    $value: list.nth($params, 1);
+    $width: validateBreakpoint($value);
+    $condition: "(width: #{$width})";
+    // A single pixel, as in `breakpoint`; still emitted until 3.0.0 refuses it.
+    @warn "`container-query(#{$value})` matches only a container exactly #{$width} wide, `(width: #{$width})`. Write `container-query(only, #{$value})` for that width, or `container-query(min, #{$value})` from it upwards. The one-argument form will be refused in 3.0.0.";
   } @else if $count == 2 {
     $mode: list.nth($params, 1);
     @if not list.index("only" "min" "max" "between", $mode) {

package/scss/library/_container.scss

@@ -4,6 +4,63 @@
 @use "sass:meta";
 @use "sass:string";
 
+// What a browser will not keep in `container-name`. Measured in Chrome 152, the
+// declaration was dropped for `and`, `or`, `not` and `default` in any case, a
+// name starting with a digit or a hyphen and a digit, and a name holding `.`,
+// `#` or `!`; and for a list with any one of those in it, such as `card and`,
+// and for `none` or a CSS-wide keyword beside another name, such as `NONE card`
+// or `card inherit`. `none`, `inherit`, `revert` and the other CSS-wide
+// keywords were kept on their own, as were several valid names,
+// `-card`, and `var()`, which a container can take its name from.
+$-reserved-names: "and" "or" "not" "default";
+$-alone-names: "none" "inherit" "initial" "unset" "revert" "revert-layer";
+$-forbidden-in-name: "." "," "/" "#" ":" ";" "(" ")" "[" "]" "{" "}" "!" "@" "$" "%" "^" "&" "*" "+" "=" "<" ">" "?" "\\" "|" "~" "`" "'" "\"";
+
+@function -words($text) {
+  $words: ();
+  $rest: $text;
+  $at: string.index($rest, " ");
+  @while $at {
+    $word: string.slice($rest, 1, $at - 1);
+    @if string.length($word) > 0 {
+      $words: list.append($words, $word);
+    }
+    $rest: string.slice($rest, $at + 1);
+    $at: string.index($rest, " ");
+  }
+  @if string.length($rest) > 0 {
+    $words: list.append($words, $rest);
+  }
+  @return $words;
+}
+
+@function -name-problem($name) {
+  $text: "#{$name}";
+  @if string.index($text, "var(") {
+    @return null;
+  }
+  $words: -words($text);
+  @each $word in $words {
+    $lower: string.to-lower-case($word);
+    @if list.index($-alone-names, $lower) and list.length($words) > 1 {
+      @return "`#{$word}` only works as the whole value, not beside another name";
+    }
+    @if list.index($-reserved-names, $lower) {
+      @return "`and`, `or`, `not` and `default` cannot name a container";
+    }
+    $first: string.slice($word, 1, 1);
+    @if string.index("0123456789", $first) or ($first == "-" and string.length($word) > 1 and string.index("0123456789", string.slice($word, 2, 2))) {
+      @return "a container name cannot start with a digit, or with a hyphen and a digit";
+    }
+    @each $character in $-forbidden-in-name {
+      @if string.index($word, $character) {
+        @return "a container name cannot contain `#{$character}`";
+      }
+    }
+  }
+  @return null;
+}
+
 // Marks an element as a query container, so `container-query` can ask about its
 // width instead of the viewport's.
 //
@@ -19,6 +76,12 @@
   @if $name != null and meta.type-of($name) != "string" {
     @error "`#{$name}` is not a valid $name for `container`. Pass a name as a string, such as `\"card\"`, or no name at all.";
   }
+  @if $name != null {
+    $problem: -name-problem($name);
+    @if $problem {
+      @error "`#{$name}` is not a valid $name for `container`: #{$problem}, and a browser drops the whole declaration. Pass a name such as `\"card\"`.";
+    }
+  }
   container-type: $type;
   @if $name {
     container-name: string.unquote($name);

package/scss/library/_focus-ring.scss

@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+// Draws a focus ring for keyboard users. Two things are usually got wrong by
+// hand, and this writes the version that avoids both.
+//
+// The ring goes on :focus-visible, not :focus. Measured in Chrome 152: a mouse
+// click on a button or a link does not match :focus-visible, so the ring stays
+// out of the way of pointer users, while Tab does match it. Text inputs are the
+// exception and match it on a click too, which is the browser's own choice.
+// Hiding the ring with `:focus { outline: none; }` is the common mistake it
+// replaces: tabbing to that button gave no outline and no shadow at all.
+//
+// The ring is an outline, not a box-shadow. A box-shadow ring looks the same
+// in an ordinary page, but forced-colors mode, as Windows High Contrast is
+// exposed to CSS, sets box-shadow to none and repaints outline-color in a
+// system colour, so a shadow ring vanishes for the users who most need it.
+// That part follows the CSS Color Adjustment specification; it was not
+// measured here, because the browser used could not emulate the mode.
+//
+// Two things measured about the outline itself. It follows border-radius: on a
+// button with a 12px radius the ring is rounded to match. And an ancestor with
+// overflow: hidden clips it: a 2px offset left only the ring's corners showing,
+// while an offset of -4px drew it inside the element, fully visible. Pass a
+// negative $offset where the element sits in a clipping container.
+@mixin focus-ring($width: 2px, $offset: 2px, $color: currentColor) {
+  @if not & {
+    @error "`focus-ring` styles the element it is called in, so call it inside a selector, such as `.button { @include focus-ring; }`.";
+  }
+
+  &:focus-visible {
+    outline: $width solid $color;
+    outline-offset: $offset;
+  }
+}

package/scss/library/_font-face.scss

@@ -12,7 +12,8 @@
   $file-path,
   $font-style: normal,
   $font-weight: 400,
-  $file-formats: eot woff2 woff ttf svg
+  $file-formats: eot woff2 woff ttf svg,
+  $font-display: null
 ) {
   @if & {
     @error "You must call the mixin at the root level of your style sheet, not in the `#{&+'{'+'}'}` selector.";
@@ -24,10 +25,32 @@
     // The path is written into url("..."), where var() is only text: the
     // browser would request a file literally named var(--x).woff2.
     @error "`#{$file-path}` is not a valid $file-path for `font-face`. A custom property cannot supply a font path, because the path is written into url() as text. Pass the path as a string.";
+  } @else if string.slice(meta.inspect($font-family), 1, 1) != "\"" and string.index($font-family, "var(") {
+    // Measured in Chrome 152, a @font-face rule dropped `font-family: var(--f)`,
+    // and a rule with no family is never used. A quoted "var(--f)" is only a
+    // name, which the browser kept, so it is left alone like a quoted path.
+    @error "`#{$font-family}` is not a valid $font-family for `font-face`. A custom property cannot supply it, because a @font-face rule drops var() in a descriptor, and without a family the font is never used. Pass the family name as a string, such as `\"Inter\"`.";
+  } @else if string.slice(meta.inspect($font-family), 1, 1) != "\"" and (list.index("serif" "sans-serif" "monospace" "cursive" "fantasy" "system-ui" "math" "inherit" "initial" "unset" "revert" "revert-layer" "default", string.to-lower-case($font-family)) or string.index($font-family, "env(") or string.index($font-family, "attr(")) {
+    // Measured in Chrome 152, a @font-face rule dropped an unquoted `serif`,
+    // `sans-serif`, `monospace`, `cursive`, `fantasy`, `system-ui`, `math`,
+    // `default` or CSS-wide keyword, in any case, and `env()` and `attr()`. The
+    // same words quoted are names and were kept, as were `emoji`, `fangsong` and
+    // the `ui-` families unquoted.
+    @error "`#{$font-family}` is not a valid $font-family for `font-face`. A @font-face rule drops a generic family, a CSS-wide keyword or a function as its family, and without a family the font is never used. Pass the family name as a quoted string, such as `\"Inter\"`.";
   } @else {
     
     $list: ();
 
+    // The same rule dropped `font-style: var(--s)`, `font-weight: var(--w)` and
+    // `font-weight: 100 var(--w)`, so var() is refused anywhere in either,
+    // before $font-style is reinterpreted below.
+    @if string.index(meta.inspect($font-style), "var(") {
+      @error "`#{meta.inspect($font-style)}` is not a valid $font-style for `font-face`. A custom property cannot supply it, because a @font-face rule drops var() in a descriptor. Pass the style itself, such as `italic`.";
+    }
+    @if string.index(meta.inspect($font-weight), "var(") {
+      @error "`#{meta.inspect($font-weight)}` is not a valid $font-weight for `font-face`. A custom property cannot supply it, because a @font-face rule drops var() in a descriptor. Pass the weight itself, such as `700`, or a range such as `160 700`.";
+    }
+
     @if list.index(100 200 300 400 500 600 700 800 900, $font-style) {
       $font-weight: $font-style;
       $font-style: normal;
@@ -48,6 +71,19 @@
       }
     }
 
+    // $font-display comes last so the reinterpretation of $font-style above is
+    // left alone, and it is written only when given: the browser's default is
+    // what a call without it has always had. Measured in Chrome 152, a
+    // @font-face rule drops `font-display: "swap"` and `font-display: var(--d)`
+    // without a word, so a quoted keyword is unquoted and var() is refused.
+    @if $font-display != null {
+      @if meta.type-of($font-display) == "string" and string.index($font-display, "var(") {
+        @error "`#{meta.inspect($font-display)}` is not a valid $font-display for `font-face`. A custom property cannot supply it, because a @font-face rule drops var() in a descriptor. Pass one of: auto, block, swap, fallback, optional.";
+      } @else if not list.index("auto" "block" "swap" "fallback" "optional", $font-display) {
+        @error "`#{meta.inspect($font-display)}` is not a valid $font-display for `font-face`. Pass one of: auto, block, swap, fallback, optional.";
+      }
+    }
+
     // fontSource returns nothing for a format it does not know, so a typo
     // dropped that source and a list of nothing but typos dropped `src`.
     @each $format in $file-formats {
@@ -65,8 +101,23 @@
         $list: list.append($list, fontSource($font-family, $file-path, list.nth($file-formats, $i)), comma);
       }
       src: $list;
-      font-style: $font-style;
-      font-weight: $font-weight;
+      // A quoted keyword is written without its quotes. Measured in Chrome 152,
+      // `font-style: "italic"` and `font-weight: "bold"` were dropped, and this
+      // is what a quoted argument used to produce. The family keeps its quotes,
+      // since there they make it a name.
+      @if meta.type-of($font-style) == "string" {
+        font-style: string.unquote($font-style);
+      } @else {
+        font-style: $font-style;
+      }
+      @if meta.type-of($font-weight) == "string" {
+        font-weight: string.unquote($font-weight);
+      } @else {
+        font-weight: $font-weight;
+      }
+      @if $font-display {
+        font-display: string.unquote($font-display);
+      }
       @content;
     }
   }

package/scss/library/_index.scss

@@ -25,11 +25,13 @@
 @forward "ellipsis";
 @forward "escape-to-parent";
 @forward "except";
+@forward "focus-ring";
 @forward "font-face";
 @forward "hide";
 @forward "line-clamp";
 @forward "linear-gradient";
 @forward "loadify";
+@forward "motion-safe";
 @forward "only";
 @forward "placeholder";
 @forward "placeholder-shown";
@@ -52,4 +54,5 @@
 @forward "text-selection";
 @forward "text-shadow";
 @forward "text-stroke";
+@forward "tokens";
 @forward "triangle";

package/scss/library/_motion-safe.scss

@@ -0,0 +1,28 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+
+// Applies its content only for users who have not asked their system for less
+// motion. Motion is opt-in here rather than switched off afterwards: the usual
+// way round writes the animation and then overrides it under
+// `prefers-reduced-motion: reduce`, and that override has to catch every
+// animation and transition, including the ones added later. Written inside this
+// block, nothing moves for a user who asked for less, without a list to keep.
+//
+// Two agent trials wrote this same wrapper by hand, as `motion-safe` and
+// `motion-ok`. Both media queries were checked to parse in Chrome 152; the
+// reduced-motion setting itself could not be emulated in the browser used.
+//
+// The trap is the resting state. An element hidden in its base rule and
+// revealed by an animation inside the block stays hidden when the block does
+// not apply, which is what `loadify` avoids by applying the end state. Keep the
+// visible state in the base rule and the start of the motion in the keyframes.
+@mixin motion-safe {
+  @if not meta.content-exists() {
+    @error "`motion-safe` wraps the motion you pass it, so call it with a block, such as `.card { @include motion-safe { transition: transform 0.2s; } }`.";
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @content;
+  }
+}

package/scss/library/_remove.scss

@@ -8,9 +8,12 @@
     display: none;
   } @else if list.length($params) == 1 {
     $value: list.nth($params, 1);
-    @include breakpoint($value) {
+    // `only` rather than the one-argument form, which compiles to the same
+    // query, so the warning below names `remove` and is printed once.
+    @include breakpoint(only, $value) {
       display: none;
     }
+    @warn "`remove(#{$value})` hides the element only at a viewport exactly that wide, a single pixel. Write `remove(only, #{$value})` for that width, or `remove(min, #{$value})` from it upwards. The one-argument form will be refused in 3.0.0.";
   } @else if list.length($params) == 2 {
     @if list.index("min" "max", list.nth($params, 1)) {
       $mode: list.nth($params, 1);

package/scss/library/_tokens.scss

@@ -0,0 +1,111 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+
+// Characters a custom property name cannot hold. Measured in Chrome 152: a
+// declaration named `--space-0.5`, `--w-1/2`, `--a b` or `--#fff` was dropped,
+// and `--font:body` became a property called `--font`. Letters, digits,
+// hyphens, underscores and non-ASCII letters all survived.
+$-forbidden: " " "." "," "/" "#" ":" ";" "(" ")" "[" "]" "{" "}" "!" "@" "$" "%" "^" "&" "*" "+" "=" "<" ">" "?" "\\" "|" "~" "`" "'" "\"";
+
+@function -forbidden-in($text) {
+  @each $character in $-forbidden {
+    @if string.index($text, $character) {
+      @return $character;
+    }
+  }
+  @return null;
+}
+
+// Writes a value the way Sass writes it in an ordinary declaration. A custom
+// property value is interpolated, and neither obvious spelling matches that:
+// plain interpolation drops the quotes of a string, and meta.inspect keeps them
+// but prints numbers at full precision, so oklch(0.637 0.237 25.331) came out
+// with a hue of 25.331000000000017deg and math.div(1, 3) as 0.3333333333333333.
+// So only strings go through meta.inspect, and a list is walked into.
+@function -serialize($value) {
+  @if meta.type-of($value) == "string" {
+    @return meta.inspect($value);
+  }
+  @if meta.type-of($value) == "list" or meta.type-of($value) == "arglist" {
+    $joiner: " ";
+    @if list.separator($value) == "comma" {
+      $joiner: ", ";
+    } @else if list.separator($value) == "slash" {
+      $joiner: " / ";
+    }
+    $out: "";
+    @each $item in $value {
+      @if $out != "" {
+        $out: $out + $joiner;
+      }
+      $out: $out + -serialize($item);
+    }
+    @if list.is-bracketed($value) {
+      $out: "[" + $out + "]";
+    }
+    @return $out;
+  }
+  @return "#{$value}";
+}
+
+// Writes a Sass map out as custom properties, which two agent trials wrote by
+// hand for a light and a dark palette. Three things it does that interpolating
+// the map in a loop does not:
+//
+// A null is left out. `--focus: null` is a value, not an absence: measured in
+// Chrome 152, `color: var(--focus, red)` did not fall back to red.
+//
+// A quoted string keeps its quotes, through -serialize above. With plain
+// interpolation `"→"` became `→`, and `content: var(--arrow)` then computed to
+// none.
+//
+// A nested map is refused rather than flattened, so a later version can decide
+// how to flatten it without changing what a call already produces.
+@mixin tokens($map, $prefix: null) {
+  @if not & {
+    @error "`tokens` writes custom properties into the rule it is called in, so call it inside a selector, such as `:root { @include tokens((bg: #fff), color); }`.";
+  }
+  @if meta.type-of($map) != "map" {
+    @error "`#{meta.inspect($map)}` is not a valid $map for `tokens`. Pass a map of names to values, such as `(bg: #fff, text: #111)`.";
+  }
+  // Checked by its characters, not its type, like the names below: Sass reads
+  // an unquoted `blue` or `red` as a colour, and `tokens($blue, blue)` has to
+  // work. A colour written `#00f` or `rgb()` is still caught by `#` and `(`.
+  @if $prefix != null {
+    @if not list.index("string" "color" "number", meta.type-of($prefix)) or string.length("#{$prefix}") == 0 {
+      @error "`#{meta.inspect($prefix)}` is not a valid $prefix for `tokens`. Pass a name, such as `color`, or leave it out.";
+    }
+    $character: -forbidden-in("#{$prefix}");
+    @if $character {
+      @error "`#{$prefix}` is not a valid $prefix for `tokens`: a custom property name cannot contain `#{$character}`. Use letters, digits, hyphens and underscores.";
+    }
+  }
+
+  @each $name, $value in $map {
+    $text: "#{$name}";
+    @if string.length($text) == 0 {
+      @error "`#{meta.inspect($name)}` is not a valid token name for `tokens`. Pass a name such as `bg` or `500`.";
+    }
+    $character: -forbidden-in($text);
+    @if $character {
+      @error "`#{$text}` is not a valid token name for `tokens`: a custom property name cannot contain `#{$character}`. Use letters, digits, hyphens and underscores, such as `space-0_5`.";
+    }
+    @if meta.type-of($value) == "map" {
+      @error "`#{$text}` holds a map, which `tokens` does not flatten. Pass each group on its own, such as `@include tokens($blue, blue)` for `$blue: (500: #3b82f6)`.";
+    }
+    @if meta.type-of($value) == "list" and list.length($value) == 0 {
+      @error "`#{$text}` has an empty value in `tokens`. Pass a value, or null to leave the property out.";
+    }
+
+    @if $value != null {
+      $property: --#{$text};
+      @if $prefix {
+        $property: --#{$prefix}-#{$text};
+      }
+      #{$property}: #{-serialize($value)};
+    }
+  }
+}

package/scss/library/_triangle.scss

@@ -58,8 +58,15 @@
   @return false;
 }
 
+// The logical directions point along the writing direction rather than a fixed
+// side: inline-end is right in a left-to-right page and left in a right-to-left
+// one. They are kept in a list of their own on purpose. $list-of-directions is
+// shared with border-radius, whose corner branches have no final @else, so a
+// keyword added there without a branch would be accepted and emit nothing.
+$-logical-directions: ("inline-start", "inline-end", "block-start", "block-end");
+
 @mixin triangle($direction: "bottom", $color: black, $size: 10px 8px) {
-  @if list.index($list-of-directions, $direction) {
+  @if list.index($list-of-directions, $direction) or list.index($-logical-directions, $direction) {
     // Halving a size in calc() rather than math.div() keeps var() and clamp()
     // working instead of emitting `var(--w)/2`, which is not valid CSS.
     @each $item in $size {
@@ -99,10 +106,41 @@
       } @else if $direction == "top-left" {
         border-color: $color transparent transparent;
         border-width: list.nth($size, 1) list.nth($size, 1) 0 0;
+      } @else {
+        // The same shapes as right, left, bottom and top, drawn with logical
+        // borders so the browser picks the side. The first size is the length
+        // the triangle points along, the second the width across it.
+        $along: list.nth($size, 1);
+        $across: $along;
+        @if list.length($size) == 2 {
+          $across: list.nth($size, 2);
+        }
+        border-color: transparent;
+        @if $direction == "inline-end" {
+          border-inline-start-color: $color;
+          border-block-width: calc($across / 2);
+          border-inline-start-width: $along;
+          border-inline-end-width: 0;
+        } @else if $direction == "inline-start" {
+          border-inline-end-color: $color;
+          border-block-width: calc($across / 2);
+          border-inline-start-width: 0;
+          border-inline-end-width: $along;
+        } @else if $direction == "block-end" {
+          border-block-start-color: $color;
+          border-inline-width: calc($along / 2);
+          border-block-start-width: $across;
+          border-block-end-width: 0;
+        } @else {
+          border-block-end-color: $color;
+          border-inline-width: calc($along / 2);
+          border-block-start-width: 0;
+          border-block-end-width: $across;
+        }
       }
       @content;
     }
   } @else {
-    @error "The argument for direction must be one of the followings: #{$list-of-directions}";
+    @error "The argument for direction must be one of the followings: #{list.join($list-of-directions, $-logical-directions)}";
   }
 }