gerillass 2.1.0 → 2.2.0

package/scss/library/_font-face.scss

@@ -1,8 +1,10 @@
 @charset "UTF-8";
 
 @use "sass:list";
+@use "sass:map";
 @use "sass:meta";
 @use "sass:string";
+@use "../maps/map-for-font-formats" as *;
 @use "../utilities/font-source" as *;
 
 @mixin font-face(
@@ -10,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.";
@@ -18,10 +21,29 @@
     @error "`#{$font-family}` is not a valid $font-family for `font-face`. Pass the family name as a string, such as `\"Inter\"`.";
   } @else if meta.type-of($file-path) != "string" {
     @error "`#{$file-path}` is not a valid $file-path for `font-face`. Pass the path to the font files without an extension, as a string.";
+  } @else if string.slice(meta.inspect($file-path), 1, 1) != "\"" and string.index($file-path, "var(") {
+    // 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 {
     
     $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;
@@ -42,6 +64,27 @@
       }
     }
 
+    // $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 {
+      @if not map.has-key($map-for-font-formats, $format) {
+        @error "`#{meta.inspect($format)}` is not a valid file format for `font-face`. Pass one or more of: #{map.keys($map-for-font-formats)}.";
+      }
+    }
+
     @font-face {
       font-family: $font-family;
       @if list.index($file-formats, eot) {
@@ -51,8 +94,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/_line-clamp.scss

@@ -1,7 +1,19 @@
 @charset "UTF-8";
 
+@use "sass:list";
 @use "sass:math";
 @use "sass:meta";
+@use "sass:string";
+
+// True for an unquoted call to one of $names, such as var(--x). A quoted string
+// stays text, so `"var(--x)"` is not a call.
+@function -is-css-function($value, $names) {
+  @if meta.type-of($value) != "string" or string.slice(meta.inspect($value), 1, 1) == "\"" {
+    @return false;
+  }
+  $open: string.index($value, "(");
+  @return $open != null and list.index($names, string.to-lower-case(string.slice($value, 1, $open - 1))) != null;
+}
 
 // Truncates text after a number of lines. `ellipsis` does one line; this does
 // several, and needs five declarations rather than one because -webkit-line-clamp
@@ -20,7 +32,8 @@
 // So the standard property is emitted for the future and the prefixed trio is
 // what actually does the work today.
 @mixin line-clamp($lines: 3) {
-  @if $lines != none {
+  // var() is resolved by the browser, so only a literal count is checked.
+  @if $lines != none and not -is-css-function($lines, "var" "env") {
     @if meta.type-of($lines) != "number" or not math.is-unitless($lines) {
       @error "`#{$lines}` is not a valid $lines for `line-clamp`. Pass a whole number of lines, or `none` to undo a clamp.";
     }

package/scss/library/_loadify.scss

@@ -4,6 +4,13 @@
 @use "sass:meta";
 @use "../utilities/is-time" as *;
 
+// `init` defines the %loadify placeholder, and every call extends it. Under the
+// module system a selector can only extend a placeholder from a module it
+// loads, so the file with the call must be the file that calls `init`, or must
+// `@use` it. Anything else fails with "The target selector was not found".
+// An entry file calling `init` does not help a partial it loads, since the
+// partial does not load the entry file. Stylesheets using @import share one
+// scope and are unaffected.
 @mixin loadify($params...) {
   @if not & {
     @if list.length($params) == 0 or (list.length($params) == 1 and list.nth($params, 1) == "init") {

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/_reset-css.scss

@@ -4,10 +4,12 @@
     @if & {
         @error "Please call the mixin at the root of your style sheet.";
     } @else {
-    /* http://meyerweb.com/eric/tools/css/reset/ 
-    v2.0 | 20110126
-    License: none (public domain)
-    */
+    // http://meyerweb.com/eric/tools/css/reset/
+    // v2.0 | 20110126
+    // License: none (public domain)
+    //
+    // Comments in this file are `//`: a /* */ comment inside a mixin is emitted
+    // into the stylesheet of everyone who includes it.
     html, body, div, span, applet, object, iframe,
     h1, h2, h3, h4, h5, h6, p, blockquote, pre,
     a, abbr, acronym, address, big, cite, code,
@@ -28,7 +30,7 @@
       font: inherit;
       vertical-align: baseline;
     }
-    /* HTML5 display-role reset for older browsers */
+    // HTML5 display-role reset for older browsers
     article, aside, details, figcaption, figure, 
     footer, header, hgroup, menu, main, nav, section {
       display: block;

package/scss/library/_screen-agent.scss

@@ -1,6 +1,33 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+
+// Returns the first value in $value that holds var(), looking inside lists and
+// calculations, or null. Custom properties are not evaluated in a @media or
+// @container condition, so a rule built from one never applies, and nothing
+// warns. Measured in Chrome 152: `(min-width: var(--wide))` did not match with
+// `--wide: 200px`, while `(min-width: 200px)` did.
+@function -custom-property-in($value) {
+  @each $item in $value {
+    @if meta.type-of($item) == "list" or meta.type-of($item) == "arglist" {
+      $found: -custom-property-in($item);
+      @if $found {
+        @return $found;
+      }
+    } @else if string.index(meta.inspect($item), "var(") {
+      @return $item;
+    }
+  }
+  @return null;
+}
+
 @mixin screen-agent($resolution) {
+  $custom-property: -custom-property-in($resolution);
+  @if $custom-property {
+    @error "`#{$custom-property}` cannot be used as a resolution: custom properties are not evaluated in a @media condition, so the rule would never apply. Pass `1x`, `2x`, `3x` or a resolution such as `2dppx`.";
+  }
   @if $resolution == "1x" {
     @media (min-resolution: 96dpi) {
       @content;

package/scss/library/_text-image.scss

@@ -1,8 +1,31 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+
+// An image path goes into url(). A var(), url(), image-set() or gradient is
+// already an image, and wrapping it produced url(var(--x)), which loads nothing.
+@function -image($value) {
+  @if -is-css-function($value, "var" "url" "image-set" "linear-gradient" "radial-gradient" "conic-gradient" "repeating-linear-gradient" "repeating-radial-gradient" "repeating-conic-gradient") {
+    @return $value;
+  }
+  @return url($value);
+}
+
+// True for an unquoted call to one of $names, such as var(--x). A quoted string
+// stays text, so `"var(--x)"` is not a call.
+@function -is-css-function($value, $names) {
+  @if meta.type-of($value) != "string" or string.slice(meta.inspect($value), 1, 1) == "\"" {
+    @return false;
+  }
+  $open: string.index($value, "(");
+  @return $open != null and list.index($names, string.to-lower-case(string.slice($value, 1, $open - 1))) != null;
+}
+
 @mixin text-image($image: null) {
   @if $image {
-    background-image: url($image);
+    background-image: -image($image);
   }
   background-size: cover;
   background-position: center;

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

@@ -1,13 +1,82 @@
 @charset "UTF-8";
 
 @use "sass:list";
-@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
 @use "../lists/list-of-directions" as *;
-@use "../utilities/is-color" as *;
+
+// A size Sass can use inside calc(): a number, a calculation such as calc(),
+// min() or clamp(), or var() and env(), which only the browser can resolve.
+// Anything else would pass silently through calc(): `calc(nonsense * 5)`
+// compiles.
+@function -is-size($value) {
+  @if meta.type-of($value) == "number" or meta.type-of($value) == "calculation" {
+    @return true;
+  }
+  @if meta.type-of($value) == "string" and string.slice(meta.inspect($value), 1, 1) != "\"" {
+    $open: string.index($value, "(");
+    @return $open != null and list.index("var" "env", string.to-lower-case(string.slice($value, 1, $open - 1))) != null;
+  }
+  @return false;
+}
+
+// A value CSS will take as a colour: a Sass colour, currentColor, or a function
+// that returns a colour when the browser resolves it. A list passes when every
+// item does, as it did through isColor.
+//
+// inherit, initial, unset and revert are left out on purpose. The mixin writes
+// the colour into a border-color shorthand beside `transparent`, and a CSS-wide
+// keyword is only valid as the whole value: `transparent transparent inherit`
+// is rejected by the browser. Checked with CSS.supports in Chrome 152.
+//
+// Deliberately looser than isColor, which stays strict because tint and shade
+// pass its result to color.mix, and that needs a real Sass colour. A border
+// colour does not. The functions are named rather than "anything with a
+// parenthesis", which would let url() through as a colour.
+@function -is-css-color($value) {
+  @if list.length($value) > 1 {
+    @each $item in $value {
+      @if not -is-css-color($item) {
+        @return false;
+      }
+    }
+    @return true;
+  }
+  @if meta.type-of($value) == "color" {
+    @return true;
+  }
+  @if meta.type-of($value) == "string" and string.slice(meta.inspect($value), 1, 1) != "\"" {
+    $text: string.to-lower-case($value);
+    @if $text == "currentcolor" {
+      @return true;
+    }
+    $open: string.index($text, "(");
+    @if $open and list.index("var" "color-mix" "light-dark" "env", string.slice($text, 1, $open - 1)) {
+      @return true;
+    }
+  }
+  @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 isColor($color){
+  @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 {
+      @if not -is-size($item) {
+        @error "`#{meta.inspect($size)}` is not a valid $size for `triangle`. Pass one or two lengths, or var(), env() or a calculation in place of either.";
+      }
+    }
+    @if not -is-css-color($color) {
+      @error "`#{meta.inspect($color)}` is not a valid $color for `triangle`. Pass a colour, `currentColor`, or a CSS function such as `var(--accent)`, `color-mix(...)` or `light-dark(...)`.";
+    } @else {
       content: "";
       height: 0;
       width: 0;
@@ -15,32 +84,63 @@
       border-style: solid;
       @if $direction == "top"{
         border-color: transparent transparent $color;
-        border-width: 0 math.div(list.nth($size, 1), 2) if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1));
+        border-width: 0 calc(list.nth($size, 1) / 2) if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1));
       } @else if $direction == "top-right" {
         border-color: transparent $color transparent transparent;
         border-width: 0 list.nth($size, 1) list.nth($size, 1) 0;
       } @else if $direction == "right" {
         border-color: transparent transparent transparent $color;
-        border-width: math.div(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)),  2) 0 math.div(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)), 2) list.nth($size, 1);
+        border-width: calc(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)) / 2) 0 calc(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)) / 2) list.nth($size, 1);
       } @else if $direction == "bottom-right" {
         border-color: transparent transparent $color;
         border-width: 0 0 list.nth($size, 1) list.nth($size, 1);
       } @else if $direction == "bottom" {
         border-color: $color transparent transparent;
-        border-width: if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)) math.div(list.nth($size, 1), 2) 0;
+        border-width: if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)) calc(list.nth($size, 1) / 2) 0;
       } @else if $direction == "bottom-left" {
         border-color: transparent transparent transparent $color;
         border-width: list.nth($size, 1) 0 0 list.nth($size, 1);
       } @else if $direction == "left" {
         border-color: transparent $color transparent transparent;
-        border-width: math.div(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)), 2) list.nth($size, 1) math.div(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)), 2) 0;
+        border-width: calc(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)) / 2) list.nth($size, 1) calc(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)) / 2) 0;
       } @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)}";
   }
 }

package/scss/utilities/_clear-unit.scss

@@ -1,7 +1,11 @@
 @charset "UTF-8";
 
 @use "sass:math";
+@use "sass:meta";
 
 @function clearUnit($value) {
+  @if meta.type-of($value) != "number" {
+    @error "`#{meta.inspect($value)}` is not a valid $value for `clearUnit`. Pass a number, such as `24px`.";
+  }
   @return math.div($value, ($value * 0 + 1));
 }

package/scss/utilities/_convert-to-em.scss

@@ -2,8 +2,14 @@
 
 @use "sass:string";
 @use "sass:math";
+@use "sass:meta";
 
 @function convertToEm($value) {
+  // Only a pixel length converts cleanly. A unitless number or another unit
+  // compiled to `calc(1.5 / 1px)em`, and a word or var() to `var(--x)/16pxem`.
+  @if meta.type-of($value) != "number" or math.unit($value) != "px" {
+    @error "`#{meta.inspect($value)}` is not a valid $value for `convertToEm`. Pass a pixel length, such as `24px`.";
+  }
   $base-value: 16px;
   $rem-value: math.div($value, $base-value);
   @return $rem-value + string.unquote("em");

package/scss/utilities/_convert-to-number.scss

@@ -11,6 +11,21 @@
   }
 
   $string-numerals: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
+
+  // Every character has to be a digit before the parse runs. Otherwise an
+  // empty string or a sign failed with Sass's own "Undefined operation", and a
+  // letter or a space was folded into nonsense such as `40-1`. The empty case
+  // is checked first because `@for $i from 1 through 0` counts down, not zero
+  // times.
+  @if string.length($value) == 0 {
+    @error "`\"\"` is not a valid $value for `convertToNumber`. Pass a string made only of digits, such as `\"42\"`.";
+  }
+  @for $i from 1 through string.length($value) {
+    @if not list.index($string-numerals, string.slice($value, $i, $i)) {
+      @error "`#{meta.inspect($value)}` is not a valid $value for `convertToNumber`. Pass a string made only of digits, such as `\"42\"`.";
+    }
+  }
+
   $calc: 0;
 
   @for $i from 1 through string.length($value) {

package/scss/utilities/_font-sizer.scss

@@ -1,5 +1,19 @@
 @charset "UTF-8";
 
+@use "sass:math";
+@use "sass:meta";
+
 @function fontSizer($size, $time) {
+  @if meta.type-of($size) != "number" {
+    @error "`#{meta.inspect($size)}` is not a valid $size for `fontSizer`. Pass a length, such as `16px`.";
+  }
+  @if meta.type-of($time) != "number" {
+    @error "`#{meta.inspect($time)}` is not a valid $time for `fontSizer`. Pass a multiplier, such as `1.5`.";
+  }
+  // Two units multiply into a unit squared, which Sass writes as
+  // `calc(16px * 1px)`: not a length anywhere in CSS.
+  @if not math.is-unitless($size) and not math.is-unitless($time) {
+    @error "`fontSizer(#{$size}, #{$time})` multiplies two units, which is not a length. Pass the multiplier without a unit, such as `1.5`.";
+  }
   @return $size * $time;
 }