gerillass 2.3.0 → 2.3.1

package/scss/library/_border-radius.scss

@@ -1,8 +1,77 @@
 @charset "UTF-8";
 
 @use "sass:list";
+@use "sass:meta";
+@use "sass:string";
 @use "../lists/list-of-directions" as *;
 @use "../utilities/fill-nulls" as *;
+@use "../internal/length-problem" as *;
+
+// The parts of $text between the separator, empty parts left out.
+@function -split($text, $separator) {
+  $parts: ();
+  $at: string.index($text, $separator);
+  @while $at {
+    @if $at > 1 {
+      $parts: list.append($parts, string.unquote(string.slice($text, 1, $at - 1)));
+    }
+    $text: string.slice($text, $at + 1);
+    $at: string.index($text, $separator);
+  }
+  @if string.length($text) > 0 {
+    $parts: list.append($parts, string.unquote($text));
+  }
+  @return $parts;
+}
+
+// What is wrong with $value as the radii of one declaration, or null. Measured
+// in Chrome 152: border-radius kept one to four radii, and a slash between two
+// such sets; a corner's own property kept one or two radii and no slash. Both
+// kept a length, 0, a percentage and a CSS-wide keyword alone, and dropped a
+// negative radius, a keyword such as auto, and more radii than that.
+// Interpolation, as in `#{$a}/#{$b}`, gives the same value as a string, so a
+// string is read by its parts. null is a corner left out, as fillNulls has it.
+@function -radii-problem($value, $max, $slash: false) {
+  @if $value == null {
+    @return null;
+  }
+  $is-text: meta.type-of($value) == "string" and string.slice(meta.inspect($value), 1, 1) != "\"" and not string.index($value, "(");
+  @if ($is-text and string.index($value, "/")) or (meta.type-of($value) == "list" and list.separator($value) == "slash") {
+    $sets: $value;
+    @if $is-text {
+      $sets: -split($value, "/");
+    }
+    @if not $slash {
+      @return "a slash only works in the one-argument form, between two sets of radii";
+    }
+    @if list.length($sets) != 2 {
+      @return "a slash goes between exactly two sets of radii";
+    }
+    @each $set in $sets {
+      $problem: -radii-problem($set, $max);
+      @if $problem {
+        @return $problem;
+      }
+    }
+    @return null;
+  }
+  $radii: $value;
+  @if $is-text and string.index($value, " ") {
+    $radii: -split($value, " ");
+  }
+  @if list.length($radii) > $max {
+    @return "it is #{list.length($radii)} radii where at most #{$max} are meant";
+  }
+  @each $radius in $radii {
+    @if $radius != null {
+      $problem: lengthProblem($radius, $negative: false, $css-wide: list.length($radii) == 1);
+      @if $problem {
+        @return $problem;
+      }
+    }
+  }
+  @return null;
+}
 
 @mixin border-radius($args...) {
   // Logical corners are named block side first, inline side second, like the
@@ -12,11 +81,19 @@
   $list: list.join(list.join($list-of-directions, ("cross-left", "cross-right", "all")), $logical);
   @if list.length($args) == 1 {
     $value: list.nth($args, 1);
+    $problem: -radii-problem($value, 4, $slash: true);
+    @if $problem {
+      @error "`#{meta.inspect($value)}` is not a valid radius for `border-radius`: #{$problem}. A browser drops the declaration.";
+    }
     border-radius: fillNulls($value, space);
   } @else if list.length($args) == 2 {
     $corner: list.nth($args, 1);
     $value: list.nth($args, 2);
     @if list.index($list, $corner) {
+      $problem: -radii-problem($value, 2);
+      @if $problem {
+        @error "`#{meta.inspect($value)}` is not a valid radius for `border-radius`: #{$problem}. A browser drops the declaration.";
+      }
       @if $corner == "top" {
         border-top-left-radius: $value;
         border-top-right-radius: $value;
@@ -70,6 +147,12 @@
       @error "Corner value must be one of the followings: #{$list}.";
     }
   } @else if list.length($args) == 4 {
+    @each $value in $args {
+      $problem: -radii-problem($value, 2);
+      @if $problem {
+        @error "`#{meta.inspect($value)}` is not a valid radius for `border-radius`: #{$problem}. A browser drops the declaration.";
+      }
+    }
     $args: fillNulls($args, space, true);
     border-top-left-radius: list.nth($args, 1);
     border-top-right-radius: list.nth($args, 2);

package/scss/library/_brand-logo.scss

@@ -1,37 +1,23 @@
 @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;
-}
+@use "sass:meta";
+@use "../internal/image-value" as *;
+@use "../internal/length-problem" as *;
 
 @mixin brand-logo($width, $height, $image-url: null) {
+  @each $name, $value in ("$width": $width, "$height": $height) {
+    $problem: sizeProblem($value);
+    @if $problem {
+      @error "`#{meta.inspect($value)}` is not a valid #{$name} for `brand-logo`: #{$problem}. A browser drops the declaration.";
+    }
+  }
   display: inline-block;
   position: relative;
   width: $width;
   height: $height;
   @if $image-url {
-    background-image: -image($image-url);
+    background-image: imageValue($image-url, "brand-logo", "$image-url");
   }
   background-position: center;
   background-repeat: no-repeat;

package/scss/library/_breakpoint.scss

@@ -2,38 +2,26 @@
 
 @use "sass:list";
 @use "sass:map";
-@use "sass:meta";
-@use "sass:string";
 @use "../maps/map-for-breakpoints" as *;
 @use "../utilities/validate-breakpoint" as *;
+@use "../internal/custom-property-in" as *;
+@use "../internal/condition-width" 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;
-}
-
+// Every size goes through conditionWidth before a query is written, so a size no
+// width condition can match raises instead of compiling into one. The queries
+// themselves are written as they always were, and the checks in the branches
+// below are called only for the error they raise, so a call that worked writes
+// the same CSS.
 @mixin breakpoint($params...) {
-  $custom-property: -custom-property-in($params);
+  $custom-property: customPropertyIn($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);
+    // Checked before the warning below, so a size that is wrong outright is
+    // refused rather than described as a single pixel.
+    $width: conditionWidth($value, "breakpoint");
     // 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.
@@ -51,12 +39,16 @@
     @if not list.index("only" "min" "max" "between", list.nth($params, 1)) {
       $start: list.nth($params, 1);
       $end: list.nth($params, 2);
+      $checked: conditionWidth($start, "breakpoint") conditionWidth($end, "breakpoint");
       @media (min-width: #{validateBreakpoint($start)}) and (max-width: #{if(map.has-key($map-for-breakpoints, $end), validateBreakpoint($end) - 1, $end)}) {
         @content;
       }
     } @else {
       $mode: list.nth($params, 1);
       $value: list.nth($params, 2);
+      @if $mode != "between" {
+        $checked: conditionWidth($value, "breakpoint");
+      }
       @if $mode == "only" {
         @if map.has-key($map-for-breakpoints, $value) {
           @media (width: map.get($map-for-breakpoints, $value)) {
@@ -90,6 +82,7 @@
       } @else if $mode == "between" {
         $start: list.nth($value, 1);
         $end: list.nth($value, 2);
+        $checked: conditionWidth($start, "breakpoint") conditionWidth($end, "breakpoint");
         @media (min-width: #{validateBreakpoint($start)}) and (max-width: #{if(map.has-key($map-for-breakpoints, $end), validateBreakpoint($end) - 1, $end)}) {
           @content;
         }

package/scss/library/_circle.scss

@@ -1,6 +1,13 @@
 @charset "UTF-8";
 
+@use "sass:meta";
+@use "../internal/length-problem" as *;
+
 @mixin circle($size) {
+  $problem: sizeProblem($size);
+  @if $problem {
+    @error "`#{meta.inspect($size)}` is not a valid $size for `circle`: #{$problem}. A browser drops the width and height.";
+  }
   width: $size;
   height: $size;
   display: inline-block;

package/scss/library/_columnizer.scss

@@ -1,15 +1,75 @@
 @charset "UTF-8";
 
 @use "sass:list";
+@use "sass:math";
 @use "sass:meta";
+@use "sass:string";
 @use "../library/border-box" as *;
 @use "../utilities/is-gutter" as *;
+@use "../internal/length-problem" as *;
+
+// The count divides 100% in calc(), which in Chrome 152 kept a unitless number
+// and a function that resolves to one, var(), env() or attr(), or maths with
+// one of those inside. It dropped a count with a unit, a word and maths on
+// lengths alone, such as calc(100% - 10px): 100% divided by a length is not a
+// length.
+@function -count-problem($columns) {
+  @if meta.type-of($columns) == "number" {
+    @if math.is-unitless($columns) {
+      @return null;
+    }
+    @return "a column count has no unit";
+  }
+  // Interpolation, as in `#{$cols}`, gives the number as an unquoted string,
+  // which is written into calc() as it reads.
+  @if meta.type-of($columns) == "string" and string.slice(meta.inspect($columns), 1, 1) != "\"" and not string.index($columns, "(") {
+    $digits: 0;
+    @for $i from 1 through string.length($columns) {
+      $character: string.slice($columns, $i, $i);
+      @if string.index("0123456789", $character) {
+        $digits: $digits + 1;
+      } @else if not string.index(".+-", $character) {
+        @return "it is not a column count";
+      }
+    }
+    @if $digits > 0 {
+      @return null;
+    }
+  }
+  @if meta.type-of($columns) == "calculation" or (meta.type-of($columns) == "string" and string.index($columns, "(")) {
+    $text: string.to-lower-case(meta.inspect($columns));
+    @if string.index($text, "var(") or string.index($text, "env(") or string.index($text, "attr(") {
+      @return null;
+    }
+    @return "maths on lengths does not give a count; pass a number, or var(), env() or attr()";
+  }
+  @return "it is not a column count";
+}
+
+// The gutter is multiplied in calc() and written as a margin. Chrome 152 kept a
+// length, a percentage and a negative length, and dropped the flex-basis for a
+// unitless number, a unit that is not a length and a word. A unitless 0 made
+// `(3 - 1) * 0`, a number rather than a length, so it is written as 0px.
+@function -gutter($gutter) {
+  $problem: lengthProblem($gutter);
+  @if $problem {
+    @error "`#{meta.inspect($gutter)}` is not a valid gutter for `columnizer`: #{$problem}. A browser drops the column width.";
+  }
+  @if (meta.type-of($gutter) == "number" and math.is-unitless($gutter)) or (meta.type-of($gutter) == "string" and string.unquote($gutter) == string.unquote("0")) {
+    @return 0px;
+  }
+  @return $gutter;
+}
 
 @mixin columnizer($params...) {
   @if list.length($params) < 1 or list.length($params) > 3 {
     @error "`columnizer` takes 1 to 3 arguments; you passed #{list.length($params)}. Pass the column count, optionally a gutter length, and optionally a boolean telling the last row whether to fill.";
   }
   $columns: list.nth($params, 1);
+  $count-problem: -count-problem($columns);
+  @if $count-problem {
+    @error "`#{meta.inspect($columns)}` is not a valid column count for `columnizer`: #{$count-problem}. A browser drops the column width.";
+  }
   $gutter: null;
   $fill: false;
   display: flex;
@@ -33,7 +93,7 @@
           margin-right: 0;
         }
       } @else if isGutter(list.nth($params, 2)) {
-        $gutter: list.nth($params, list.length($params));
+        $gutter: -gutter(list.nth($params, list.length($params)));
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc((100% - (#{$columns} - 1) * #{$gutter}) / #{$columns});
@@ -48,7 +108,7 @@
         @error "`#{list.nth($params, 2)}` is not a valid second argument for `columnizer`. Pass a gutter length such as `20px` or `var(--gap)`, or a boolean telling the last row whether to fill.";
       }
     } @else if list.length($params) == 3 {
-      $gutter: list.nth($params, 2);
+      $gutter: -gutter(list.nth($params, 2));
       $fill: list.nth($params, list.length($params));
       flex-grow: if($fill == true, 1, 0);
       flex-shrink: 0;

package/scss/library/_container-query.scss

@@ -5,26 +5,8 @@
 @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;
-}
+@use "../internal/custom-property-in" as *;
+@use "../internal/condition-width" as *;
 
 // 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`,
@@ -88,7 +70,7 @@ $-forbidden-in-name: "." "," "/" "#" ":" ";" "(" ")" "[" "]" "{" "}" "!" "@" "$"
     }
   }
 
-  $custom-property: -custom-property-in($params);
+  $custom-property: customPropertyIn($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.";
   }
@@ -96,7 +78,9 @@ $-forbidden-in-name: "." "," "/" "#" ":" ";" "(" ")" "[" "]" "{" "}" "!" "@" "$"
 
   @if $count == 1 {
     $value: list.nth($params, 1);
-    $width: validateBreakpoint($value);
+    // Checked before the warning, as in `breakpoint`. conditionWidth returns
+    // what validateBreakpoint did, so a working call writes the same condition.
+    $width: conditionWidth($value, "container-query", "@container");
     $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.";
@@ -104,19 +88,19 @@ $-forbidden-in-name: "." "," "/" "#" ":" ";" "(" ")" "[" "]" "{" "}" "!" "@" "$"
     $mode: list.nth($params, 1);
     @if not list.index("only" "min" "max" "between", $mode) {
       // Two bare sizes mean a range, as they do in `breakpoint`.
-      $condition: "(min-width: #{validateBreakpoint($mode)}) and (max-width: #{validateBreakpoint(list.nth($params, 2))})";
+      $condition: "(min-width: #{conditionWidth($mode, "container-query", "@container")}) and (max-width: #{conditionWidth(list.nth($params, 2), "container-query", "@container")})";
     } @else {
       $value: list.nth($params, 2);
       @if $mode == "only" {
-        $condition: "(width: #{validateBreakpoint($value)})";
+        $condition: "(width: #{conditionWidth($value, "container-query", "@container")})";
       } @else if $mode == "min" {
-        $condition: "(min-width: #{validateBreakpoint($value)})";
+        $condition: "(min-width: #{conditionWidth($value, "container-query", "@container")})";
       } @else if $mode == "max" {
-        $condition: "(max-width: #{validateBreakpoint($value)})";
+        $condition: "(max-width: #{conditionWidth($value, "container-query", "@container")})";
       } @else {
         $start: list.nth($value, 1);
         $end: list.nth($value, 2);
-        $condition: "(min-width: #{validateBreakpoint($start)}) and (max-width: #{validateBreakpoint($end)})";
+        $condition: "(min-width: #{conditionWidth($start, "container-query", "@container")}) and (max-width: #{conditionWidth($end, "container-query", "@container")})";
       }
     }
   } @else {

package/scss/library/_container.scss

@@ -3,6 +3,7 @@
 @use "sass:list";
 @use "sass:meta";
 @use "sass:string";
+@use "../internal/words" as *;
 
 // 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
@@ -16,30 +17,12 @@ $-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);
+  $words: wordsOf($text);
   @each $word in $words {
     $lower: string.to-lower-case($word);
     @if list.index($-alone-names, $lower) and list.length($words) > 1 {

package/scss/library/_counter.scss

@@ -1,19 +1,8 @@
 @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;
-}
+@use "../internal/is-css-function" as *;
 
 @mixin counter($params...) {
   $counter: null;
@@ -49,10 +38,10 @@
   // quoting would turn into the literal characters.
   $quote-before: '"';
   $quote-after: '"';
-  @if -is-css-function($counter-before, "var" "attr" "counter" "counters") {
+  @if isCssFunction($counter-before, "var" "attr" "counter" "counters") {
     $quote-before: "";
   }
-  @if -is-css-function($counter-after, "var" "attr" "counter" "counters") {
+  @if isCssFunction($counter-after, "var" "attr" "counter" "counters") {
     $quote-after: "";
   }
   &.counter-start {

package/scss/library/_ellipsis.scss

@@ -1,7 +1,84 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+@use "../internal/keyword-value" as *;
+@use "../internal/length-problem" as *;
+@use "../internal/words" as *;
+
+// The display keywords, sorted by the part of the value each one fills.
+// Measured in Chrome 152, one keyword, or two or three in any order, were kept
+// when they named at most one outer type, one inner type and one list-item:
+// `inline flex`, `flex block`, `block flow list-item`, `list-item inline flow`.
+// These were dropped: two of a kind (`block inline`, `flex grid`,
+// `block block`), `list-item` beside an inner type other than flow or
+// flow-root (`list-item flex`), and a compound keyword such as `inline-block`
+// beside anything. Chrome also dropped `run-in`, the ruby-base family and the
+// -moz- and -ms- boxes; they are in the specification or used by other
+// engines, so they are let through.
+$-outer: "block" "inline" "run-in";
+$-inner: "flow" "flow-root" "table" "flex" "grid" "ruby" "math";
+$-alone: "none" "contents" "inline-block" "inline-table" "inline-flex" "inline-grid" "table-row-group" "table-header-group" "table-footer-group" "table-row" "table-cell" "table-column-group" "table-column" "table-caption" "ruby-base" "ruby-text" "ruby-base-container" "ruby-text-container";
+
+@function -display-problem($display) {
+  $keywords: list.join(list.join(list.join($-outer, $-inner), $-alone), ("list-item",));
+  $problem: keywordProblem($display, $keywords, 3, $vendor: true);
+  @if $problem or $display == null {
+    @return $problem;
+  }
+  $words: wordsOf($display);
+  $outer: 0;
+  $inner: null;
+  $inners: 0;
+  $list-items: 0;
+  @each $word in $words {
+    @if string.index($word, "(") {
+      @return null;
+    }
+    $lower: string.to-lower-case(string.unquote($word));
+    @if list.length($words) > 1 and not list.index($-outer, $lower) and not list.index($-inner, $lower) and $lower != "list-item" {
+      @return "`#{$lower}` only works as the whole value";
+    }
+    @if list.index($-outer, $lower) {
+      $outer: $outer + 1;
+    } @else if list.index($-inner, $lower) {
+      $inners: $inners + 1;
+      $inner: $lower;
+    } @else if $lower == "list-item" {
+      $list-items: $list-items + 1;
+    }
+  }
+  @if $outer > 1 {
+    @return "it names two outer display types; pass one of block, inline or run-in";
+  }
+  @if $inners > 1 {
+    @return "it names two inner display types; pass one of flow, flow-root, table, flex, grid, ruby or math";
+  }
+  @if $list-items > 1 {
+    @return "it names list-item twice";
+  }
+  @if $list-items == 1 and $inner and not list.index("flow" "flow-root", $inner) {
+    @return "`list-item` only goes with flow or flow-root, not `#{$inner}`";
+  }
+  @return null;
+}
+
 @mixin ellipsis($width: 100%, $display: inline-block) {
-  display: $display;
+  $problem: -display-problem($display);
+  @if $problem {
+    @error "`#{meta.inspect($display)}` is not a valid $display for `ellipsis`: #{$problem}. A browser drops the declaration.";
+  }
+  $problem: sizeProblem($width, $max: true);
+  @if $problem {
+    @error "`#{meta.inspect($width)}` is not a valid $width for `ellipsis`, which sets max-width: #{$problem}. A browser drops the declaration.";
+  }
+  // Written without quotes, since `display: "block"` was dropped.
+  @if meta.type-of($display) == "string" {
+    display: string.unquote($display);
+  } @else {
+    display: $display;
+  }
   max-width: $width;
   text-overflow: ellipsis;
   white-space: nowrap;

package/scss/library/_except.scss

@@ -3,6 +3,7 @@
 @use "sass:list";
 @use "sass:meta";
 @use "sass:string";
+@use "../internal/sibling-index" as *;
 
 @mixin except($params...) {
   @if list.length($params) == 0 {
@@ -10,6 +11,12 @@
   } @else if list.length($params) == 1 {
     $value: list.nth($params, 1);
     @if meta.type-of($value) == "number" {
+      // A unit or a fraction makes a selector the browser drops, and 0 excludes
+      // nothing; see scss/internal/_sibling-index.scss.
+      $problem: siblingIndexProblem($value, "except");
+      @if $problem {
+        @error "`#{meta.inspect($value)}` is not a valid position for `except`: #{$problem}.";
+      }
       @if $value < 0 {
         &:not(:nth-last-of-type(#{$value * -1})) {
           @content;
@@ -45,6 +52,14 @@
       @error "`#{$value}` is not a valid argument for `except`. Pass a positive or negative number, one of `first`, `last`, `odd`, `even`, or a selector such as `.foo`.";
     }
   } @else if list.length($params) > 1 {
+    // Every item is checked first. A word used to fail with Sass's own
+    // `Undefined operation`, and one bad position dropped the whole rule.
+    @each $item in $params {
+      $problem: siblingIndexProblem($item, "except", true);
+      @if $problem {
+        @error "`#{meta.inspect($item)}` is not a valid position for `except`: #{$problem}.";
+      }
+    }
     $items: "";
     @for $i from 1 through list.length($params) {
       $items: $items + if(list.nth($params, $i) < 0, string.unquote(":not(:nth-last-of-type(#{list.nth($params, $i) * -1}))"), string.unquote(":not(:nth-of-type(#{list.nth($params, $i)}))"));

package/scss/library/_focus-ring.scss

@@ -1,5 +1,9 @@
 @charset "UTF-8";
 
+@use "sass:meta";
+@use "../internal/color-problem" as *;
+@use "../internal/length-problem" as *;
+
 // Draws a focus ring for keyboard users. Two things are usually got wrong by
 // hand, and this writes the version that avoids both.
 //
@@ -26,6 +30,31 @@
   @if not & {
     @error "`focus-ring` styles the element it is called in, so call it inside a selector, such as `.button { @include focus-ring; }`.";
   }
+  // The colour goes into the outline shorthand, where Chrome 152 dropped a word
+  // that is not a colour, a quoted colour, a length and a CSS-wide keyword, so
+  // the ring was not drawn at all. null leaves the colour to the browser.
+  @if $color != null {
+    $problem: colorProblem($color);
+    @if $problem {
+      @error "`#{meta.inspect($color)}` is not a valid $color for `focus-ring`: #{$problem}. A browser drops the outline, so no ring is drawn. Pass a colour such as `#1a73e8`, `currentColor`, or a function such as `var(--focus)`.";
+    }
+  }
+  // The width goes into the same shorthand, which in Chrome 152 kept a length,
+  // 0 and thin, medium or thick, and dropped a percentage, a negative width and
+  // a CSS-wide keyword. The offset is a declaration of its own: it kept a
+  // negative length and a CSS-wide keyword, and dropped a percentage and thin.
+  @if $width != null {
+    $problem: lengthProblem($width, $percent: false, $negative: false, $keywords: "thin" "medium" "thick");
+    @if $problem {
+      @error "`#{meta.inspect($width)}` is not a valid $width for `focus-ring`: #{$problem}. A browser drops the outline, so no ring is drawn.";
+    }
+  }
+  @if $offset != null {
+    $problem: lengthProblem($offset, $percent: false, $css-wide: true);
+    @if $problem {
+      @error "`#{meta.inspect($offset)}` is not a valid $offset for `focus-ring`: #{$problem}. A browser drops the declaration.";
+    }
+  }
 
   &:focus-visible {
     outline: $width solid $color;