gerillass 2.1.0 → 2.2.0

package/package.json

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

package/scss/library/_after.scss

@@ -1,14 +1,29 @@
 @charset "UTF-8";
 
+@use "sass:list";
 @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;
+}
+
 @mixin after($content: null) {
   &::after {
     @if $content == null {
       @content;
     } @else if meta.type-of($content) != "string" {
       @error "`#{$content}` is not a valid $content for `after`. Pass a string to use as the content value, a data- attribute name such as `\"data-label\"` to render it with attr(), or no argument at all and write the content yourself.";
+    } @else if -is-css-function($content, "var" "attr" "counter" "counters") {
+      // Quoting would turn the call into text: content: "var(--label)".
+      content: $content;
+      @content;
     } @else {
       $data: string.slice($content, 1, 5);
       @if $data == "data-" {

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/_background-dots.scss

@@ -1,17 +1,63 @@
 @charset "UTF-8";
 
 @use "sass:list";
-@use "sass:math";
 @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(string.unquote($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;
+}
+
+// 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;
+}
+
 @mixin background-dots(
   $color: null,
   $size: 1em,
-  $gutter: $size * 5,
+  $gutter: null,
   $diagonal: true,
   $image: null
 ) {
+  // The gutter defaults to five times the size. Deriving it here rather than in
+  // the signature lets $size be checked first, and doing the arithmetic in
+  // calc() lets var() and clamp() through: Sass simplifies calc() on plain
+  // numbers back to a number, so a call with lengths emits the same CSS.
+  @if not -is-size($size) {
+    @error "`#{meta.inspect($size)}` is not a valid $size for `background-dots`. Pass a length, or var(), env() or a calculation such as `clamp()`.";
+  }
+  @if $gutter == null {
+    $gutter: calc($size * 5);
+  }
+  @if not -is-size($gutter) {
+    @error "`#{meta.inspect($gutter)}` is not a valid $gutter for `background-dots`. Pass a length, or var(), env() or a calculation such as `calc()`.";
+  }
   @if $image != null and meta.type-of($image) != "string" {
     @error "`#{$image}` is not a valid $image for `background-dots`. Pass an image path as a string.";
   }
@@ -23,21 +69,21 @@
     @if $diagonal == true {
       background-image: radial-gradient($color $size, transparent 0),
         radial-gradient($color $size, transparent 0);
-      background-position: math.div($gutter, 2) math.div($gutter, 2),
-        ($gutter * 2) ($gutter * 2);
+      background-position: calc($gutter / 2) calc($gutter / 2),
+        calc($gutter * 2) calc($gutter * 2);
     } @else if $diagonal == false {
       background-image: radial-gradient($color $size, transparent 0);
-      background-position: math.div($gutter, 2) math.div($gutter, 2);
+      background-position: calc($gutter / 2) calc($gutter / 2);
     }
   } @else if $color {
     @if $diagonal == true {
       background-image: radial-gradient(list.nth($color, 1) $size, transparent 0),
         radial-gradient(list.nth($color, list.length($color)) $size, transparent 0);
-      background-position: math.div($gutter, 2) math.div($gutter, 2),
-        ($gutter * 2) ($gutter * 2);
+      background-position: calc($gutter / 2) calc($gutter / 2),
+        calc($gutter * 2) calc($gutter * 2);
     } @else if $diagonal == false {
       background-image: radial-gradient(list.nth($color, 1) $size, transparent 0);
-      background-position: math.div($gutter, 2) math.div($gutter, 2);
+      background-position: calc($gutter / 2) calc($gutter / 2);
       @if list.length($color) > 1 {
         @error "Please do not pass more than one argument when you disable 'diagonal' property! Simply remove the argument(s) after '#{list.nth($color, 1)}' to resolve the problem.";
       }
@@ -55,7 +101,7 @@
       height: 100%;
       top: 0;
       left: 0;
-      background-image: url(string.unquote($image));
+      background-image: -image($image);
       background-repeat: no-repeat;
       background-position: center;
       background-size: cover;

package/scss/library/_background-image.scss

@@ -4,19 +4,45 @@
 @use "sass:map";
 @use "sass:math";
 @use "sass:meta";
+@use "sass:string";
 @use "../library/linear-gradient" as *;
 @use "../maps/map-for-directions" as *;
 
+// 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 background-image(
   $image-url: null,
   $filter-color: null,
   $filter-direction: null
 ) {
+  // The direction used to be read only when there were two or more colours,
+  // so with one colour any value was dropped without a word, a typo included.
+  // Check it first, against what the gradient branches accept.
+  @if $filter-direction and not map.has-key($map-for-directions, $filter-direction) and not (meta.type-of($filter-direction) == "number" and math.unit($filter-direction) == "deg") {
+    @error "`#{$filter-direction}` is not a valid $filter-direction. Pass an angle such as `45deg`, or one of: #{map.keys($map-for-directions)}.";
+  }
   @if $image-url {
     @if $filter-color {
       @if list.length($filter-color) == 1 {
         background-image: linear-gradient(to top, $filter-color, $filter-color),
-          url($image-url);
+          -image($image-url);
       } @else if list.length($filter-color) > 1 {
         $color-list: ();
         @for $i from 1 through list.length($filter-color) {
@@ -28,22 +54,22 @@
                 map.get($map-for-directions, $filter-direction),
                 $color-list
               ),
-              url($image-url);
+              -image($image-url);
           } @else {
             @if meta.type-of($filter-direction) == "number" and list.index("deg", math.unit($filter-direction)) {
               background-image: linear-gradient($filter-direction, $color-list),
-                url($image-url);
+                -image($image-url);
             } @else {
               @error "`#{$filter-direction}` is not a valid $filter-direction. Pass an angle such as `45deg`, or one of: #{map.keys($map-for-directions)}.";
             }
           }
         } @else {
           background-image: linear-gradient(to top, $color-list),
-            url($image-url);
+            -image($image-url);
         }
       }
     } @else {
-      background-image: url($image-url);
+      background-image: -image($image-url);
     }
   } @else {
     position: relative;

package/scss/library/_background-stripes.scss

@@ -5,12 +5,51 @@
 @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(string.unquote($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;
+}
+
+// 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;
+}
+
 @mixin background-stripes(
   $color: null,
   $thickness: 1em,
   $rotation: -45deg,
   $image: null
 ) {
+  // The arithmetic below runs in calc() so var() and clamp() work; on plain
+  // lengths Sass simplifies it back to the same number.
+  @if not -is-size($thickness) {
+    @error "`#{meta.inspect($thickness)}` is not a valid $thickness for `background-stripes`. Pass a length, or var(), env() or a calculation such as `clamp()`.";
+  }
   @if meta.type-of($rotation) != "number" {
     @error "`#{$rotation}` is not a valid $rotation for `background-stripes`. Pass an angle such as `-45deg`, or a unitless number which is treated as degrees.";
   }
@@ -18,7 +57,7 @@
     @error "`#{$image}` is not a valid $image for `background-stripes`. Pass an image path as a string.";
   }
   $validate-unit: if(not list.index("deg", math.unit($rotation)), $rotation + deg, $rotation);
-  $get-image: if($image, string.unquote(", ") + url(string.unquote($image)), string.unquote(""));
+  $get-image: if($image, string.unquote(", ") + -image($image), string.unquote(""));
   @if not $color {
     $color: rgba(0, 0, 0, 0.1);
     background-image: repeating-linear-gradient(
@@ -26,7 +65,7 @@
         $color 0,
         $color $thickness,
         transparent $thickness,
-        transparent $thickness * 2
+        transparent calc($thickness * 2)
       ) + $get-image;
     @if $image {
       background-position: center;
@@ -39,7 +78,7 @@
         $color 0,
         $color $thickness,
         transparent $thickness,
-        transparent $thickness * 2
+        transparent calc($thickness * 2)
       ) + $get-image;
     @if $image {
       background-position: center;
@@ -50,7 +89,7 @@
     $list: ();
     @for $i from 1 through list.length($color) {
       $index-color: list.nth($color, $i);
-      $style-rule: $index-color ($thickness * $i) - $thickness, $index-color $thickness * $i;
+      $style-rule: $index-color calc($thickness * $i - $thickness), $index-color calc($thickness * $i);
       $list: list.append($list, $style-rule, comma);
     }
     background-image: repeating-linear-gradient($validate-unit, $list) + $get-image;

package/scss/library/_before.scss

@@ -1,14 +1,29 @@
 @charset "UTF-8";
 
+@use "sass:list";
 @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;
+}
+
 @mixin before($content: null) {
   &::before {
     @if $content == null {
       @content;
     } @else if meta.type-of($content) != "string" {
       @error "`#{$content}` is not a valid $content for `before`. Pass a string to use as the content value, a data- attribute name such as `\"data-label\"` to render it with attr(), or no argument at all and write the content yourself.";
+    } @else if -is-css-function($content, "var" "attr" "counter" "counters") {
+      // Quoting would turn the call into text: content: "var(--label)".
+      content: $content;
+      @content;
     } @else {
       $data: string.slice($content, 1, 5);
       @if $data == "data-" {

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/_brand-logo.scss

@@ -1,14 +1,37 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+
 @use "../library/stretched-link" as *;
 
+// 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 brand-logo($width, $height, $image-url: null) {
   display: inline-block;
   position: relative;
   width: $width;
   height: $height;
   @if $image-url {
-    background-image: url($image-url);
+    background-image: -image($image-url);
   }
   background-position: center;
   background-repeat: no-repeat;

package/scss/library/_breakpoint.scss

@@ -2,12 +2,42 @@
 
 @use "sass:list";
 @use "sass:map";
+@use "sass:meta";
+@use "sass:string";
 @use "../maps/map-for-breakpoints" as *;
 @use "../utilities/validate-breakpoint" as *;
 
+// 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 breakpoint($params...) {
+  $custom-property: -custom-property-in($params);
+  @if $custom-property {
+    @error "`#{$custom-property}` cannot be used in a breakpoint: custom properties are not evaluated in a @media condition, so the rule would never apply. Pass a length or a key from $map-for-breakpoints.";
+  }
   @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;
@@ -65,5 +95,9 @@
         }
       }
     }
+  } @else {
+    // Anything else used to match no branch and emit nothing, so a three
+    // argument range such as `between, medium, large` failed without a sound.
+    @error "`breakpoint` takes one or two arguments; you passed #{list.length($params)}. For a range, pass `between` with a space-separated pair, `between, medium large`, or two sizes, `medium, large`.";
   }
 }

package/scss/library/_container-query.scss

@@ -7,6 +7,64 @@
 @use "../maps/map-for-breakpoints" as *;
 @use "../utilities/validate-breakpoint" as *;
 
+// 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;
+}
+
+// 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
@@ -23,11 +81,25 @@
   @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 {
+    @error "`#{$custom-property}` cannot be used in a container query: custom properties are not evaluated in a @container condition, so the rule would never apply. Pass a length or a key from $map-for-breakpoints.";
+  }
   $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/_counter.scss

@@ -1,8 +1,20 @@
 @charset "UTF-8";
 
 @use "sass:list";
+@use "sass:meta";
+@use "sass:string";
 @use "../lists/list-of-counter-styles" as *;
 
+// 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 counter($params...) {
   $counter: null;
   $counter-before: null;
@@ -33,15 +45,25 @@
     }
   }
 
+  // A prefix or suffix is quoted into text, except a call CSS resolves, which
+  // quoting would turn into the literal characters.
+  $quote-before: '"';
+  $quote-after: '"';
+  @if -is-css-function($counter-before, "var" "attr" "counter" "counters") {
+    $quote-before: "";
+  }
+  @if -is-css-function($counter-after, "var" "attr" "counter" "counters") {
+    $quote-after: "";
+  }
   &.counter-start {
     counter-reset: glsCounter;
   }
   &.counter-start .counter-item::before,
   &.counter-continue .counter-item::before {
-    content: #{if($counter-before, '"' + $counter-before + '"' + " ", null)}counter(
+    content: #{if($counter-before, $quote-before + $counter-before + $quote-before + " ", null)}counter(
         glsCounter#{if($counter, ", " + $counter, null)}
       )
-      #{if($counter-after, " " + '"' + $counter-after + '"', null)};
+      #{if($counter-after, " " + $quote-after + $counter-after + $quote-after, null)};
     counter-increment: glsCounter;
     @content;
   }

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;
+  }
+}