gerillass 0.0.6 → 2.3.1

data/scss/library/_font-face.scss

@@ -0,0 +1,240 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+@use "../maps/map-for-font-formats" as *;
+@use "../utilities/font-source" as *;
+@use "../internal/is-condition-value" as *;
+@use "../internal/words" as *;
+
+// What a @font-face rule keeps in `font-style` and `font-weight`, measured in
+// Chrome 152 by inserting the rule and reading the descriptor back, in any
+// case. font-style kept normal, italic, auto, oblique, and oblique with one or
+// two angles from -90deg to 90deg (`oblique 10deg 20deg`, `oblique 0.2rad`),
+// and dropped a CSS-wide keyword, `oblique 100deg`, an angle without a unit
+// and a weight such as `400`. font-weight kept normal, bold, auto, a number
+// from 1 to 1000 (`450`, `400.5`, `calc(400 + 100)`) and two numbers as a range
+// in either order, and dropped bolder and lighter, a CSS-wide keyword, 0, 1001,
+// three numbers, and a keyword beside a number or another keyword.
+//
+// A quoted value is split on its spaces and checked word by word, but Sass
+// cannot turn the text of a number into one, so a quoted number is checked for
+// its shape and not its range: "1001" and "oblique 100deg" are let through.
+
+// A quoted or unquoted number, without a unit, for a weight.
+@function -is-weight-number($word) {
+  @if meta.type-of($word) == "number" {
+    @return math.is-unitless($word) and $word >= 1 and $word <= 1000;
+  }
+  @if meta.type-of($word) != "string" {
+    @return false;
+  }
+  $text: string.unquote($word);
+  $nonzero: false;
+  @for $i from 1 through string.length($text) {
+    $character: string.slice($text, $i, $i);
+    @if not string.index("0123456789.", $character) {
+      @return false;
+    }
+    @if string.index("123456789", $character) {
+      $nonzero: true;
+    }
+  }
+  @return $nonzero;
+}
+
+@function -weight-problem($weight) {
+  @if $weight == null or meta.type-of($weight) == "calculation" {
+    @return null;
+  }
+  $words: wordsOf($weight);
+  @if list.length($words) > 2 {
+    @return "a weight is one value, or two numbers for a range such as `100 900`";
+  }
+  @if list.length($words) == 1 {
+    $word: list.nth($words, 1);
+    @if meta.type-of($word) == "string" and list.index("normal" "bold" "auto", string.to-lower-case(string.unquote($word))) {
+      @return null;
+    }
+    @if -is-weight-number($word) {
+      @return null;
+    }
+    @return "a weight is normal, bold, auto or a number from 1 to 1000; bolder, lighter and the CSS-wide keywords are dropped";
+  }
+  @each $word in $words {
+    @if not -is-weight-number($word) {
+      @return "a range is two numbers from 1 to 1000, such as `100 900`";
+    }
+  }
+  @return null;
+}
+
+@function -style-problem($style) {
+  @if $style == null {
+    @return null;
+  }
+  $words: wordsOf($style);
+  $first: list.nth($words, 1);
+  $keyword: null;
+  @if meta.type-of($first) == "string" {
+    $keyword: string.to-lower-case(string.unquote($first));
+  }
+  @if list.index("normal" "italic" "auto", $keyword) {
+    @if list.length($words) > 1 {
+      @return "`#{$keyword}` takes nothing after it; only oblique takes angles";
+    }
+    @return null;
+  }
+  @if $keyword != "oblique" {
+    @return "a style is normal, italic, oblique or auto; the CSS-wide keywords are dropped";
+  }
+  @if list.length($words) > 3 {
+    @return "oblique takes at most two angles";
+  }
+  @for $i from 2 through list.length($words) {
+    $angle: list.nth($words, $i);
+    @if meta.type-of($angle) == "number" {
+      @if not isConditionValue($angle, "angle") {
+        @return "`#{$angle}` is not an angle; pass one such as `10deg`";
+      }
+      @if $angle < -90deg or $angle > 90deg {
+        @return "an oblique angle is between -90deg and 90deg";
+      }
+    } @else if not isConditionValue($angle, "angle") {
+      @return "`#{$angle}` is not an angle; pass one such as `10deg`";
+    }
+  }
+  @return null;
+}
+
+@mixin font-face(
+  $font-family,
+  $file-path,
+  $font-style: normal,
+  $font-weight: 400,
+  $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.";
+  } @else if meta.type-of($font-family) != "string" {
+    @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 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`.";
+    }
+
+    // A number in $font-style is a weight. Only the hundreds used to be read
+    // that way, so `font-face("I", "/f/i", 450)` wrote `font-style: 450`, which
+    // a @font-face rule drops; any weight a rule keeps, 1 to 1000, is read so.
+    @if meta.type-of($font-style) == "number" and math.is-unitless($font-style) and $font-style >= 1 and $font-style <= 1000 {
+      $font-weight: $font-style;
+      $font-style: normal;
+    } @else if not
+      list.index("normal" "italic" "oblique", $font-style) and
+      meta.type-of($font-style) !=
+      "number"
+    {
+      $font-style-list: ();
+      @for $i from 1 through list.length($font-style) {
+        $font-style-list: list.append($font-style-list, list.nth($font-style, $i), comma);
+      }
+      @for $i from 1 through list.length($font-style-list) {
+        @if list.index("eot" "woff2" "woff" "ttf" "svg", list.nth($font-style-list, $i)) {
+          $file-formats: $font-style-list;
+          $font-style: normal;
+        }
+      }
+    }
+
+    // Checked after the reinterpretation above, on the values that are written.
+    $problem: -style-problem($font-style);
+    @if $problem {
+      @error "`#{meta.inspect($font-style)}` is not a valid $font-style for `font-face`: #{$problem}. A @font-face rule drops the descriptor.";
+    }
+    $problem: -weight-problem($font-weight);
+    @if $problem {
+      @error "`#{meta.inspect($font-weight)}` is not a valid $font-weight for `font-face`: #{$problem}. A @font-face rule drops the descriptor.";
+    }
+
+    // $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) {
+        src: url("#{$file-path}.eot");
+      }
+      @for $i from 1 through list.length($file-formats) {
+        $list: list.append($list, fontSource($font-family, $file-path, list.nth($file-formats, $i)), comma);
+      }
+      src: $list;
+      // 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;
+    }
+  }
+}

data/scss/library/_hide.scss

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+@mixin hide($toggle: "hide") {
+  @if $toggle == "hide" {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(100%);
+    white-space: nowrap;
+  } @else if $toggle == "unhide" {
+    position: static;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    clip: auto;
+    clip-path: none;
+    white-space: inherit;
+  } @else if not index ("hide" "unhide", $toggle) {
+    @error "#{$toggle} is not a valid value for the `$toggle` argument. The value must be either `hide` or `unhide`.";
+  }
+}

data/scss/library/_index.scss

@@ -0,0 +1,58 @@
+@charset "UTF-8";
+
+@forward "adaptive";
+@forward "after";
+@forward "all-buttons";
+@forward "all-text-inputs";
+@forward "antialias";
+@forward "aspect-ratio";
+@forward "background-dots";
+@forward "background-image";
+@forward "background-stripes";
+@forward "before";
+@forward "border-box";
+@forward "border-radius";
+@forward "brand-logo";
+@forward "breakpoint";
+@forward "breakpointer";
+@forward "center";
+@forward "circle";
+@forward "clearfix";
+@forward "columnizer";
+@forward "container";
+@forward "container-query";
+@forward "counter";
+@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";
+@forward "position";
+@forward "radial-gradient";
+@forward "remove";
+@forward "reset-css";
+@forward "reset-figure";
+@forward "resizable";
+@forward "responsive-image";
+@forward "scissors";
+@forward "screen-agent";
+@forward "sizer";
+@forward "smartphone";
+@forward "sprite";
+@forward "stretched-link";
+@forward "tablet";
+@forward "text-gradient";
+@forward "text-image";
+@forward "text-selection";
+@forward "text-shadow";
+@forward "text-stroke";
+@forward "tokens";
+@forward "triangle";

data/scss/library/_line-clamp.scss

@@ -0,0 +1,38 @@
+@charset "UTF-8";
+
+@use "sass:math";
+@use "sass:meta";
+@use "../internal/is-css-function" as *;
+
+// 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
+// only works alongside two other properties.
+//
+// All five were measured in a browser, on a paragraph that runs to five lines
+// with a clamp of three:
+//
+//   the three together        3 lines, with an ellipsis
+//   without -webkit-box-orient    5 lines, no clamping and no warning
+//   without display: -webkit-box  5 lines, likewise
+//   the standard line-clamp alone 5 lines; it is not Baseline yet
+//   without overflow: hidden      the box is 3 lines, but the rest of the text
+//                                 spills out below it
+//
+// 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) {
+  // var() is resolved by the browser, so only a literal count is checked.
+  @if $lines != none and not isCssFunction($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.";
+    }
+    @if $lines < 1 or $lines != math.round($lines) {
+      @error "`#{$lines}` is not a valid $lines for `line-clamp`. Pass a whole number of lines that is at least 1, or `none` to undo a clamp.";
+    }
+  }
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lines;
+  line-clamp: $lines;
+  overflow: hidden;
+}

data/scss/library/_linear-gradient.scss

@@ -0,0 +1,33 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "../maps/map-for-directions" as *;
+@use "../internal/color-stops-problem" as *;
+
+@mixin linear-gradient($direction, $colors) {
+  // A stop the browser does not keep drops the whole gradient; see
+  // scss/internal/_color-stops-problem.scss for what was measured.
+  $problem: colorStopsProblem($colors);
+  @if $problem {
+    @error "`#{meta.inspect($colors)}` is not a valid $colors for `linear-gradient`: #{$problem}. A browser drops the whole gradient.";
+  }
+  $list: ();
+  @for $i from 1 through list.length($colors) {
+    $list: list.append($list, list.nth($colors, $i), comma);
+  }
+  @if map.has-key($map-for-directions, $direction) {
+    background: linear-gradient(
+      map.get($map-for-directions, $direction),
+      $list
+    );
+  } @else if not map.has-key($map-for-directions, $direction) {
+    @if meta.type-of($direction) != "number" or not list.index("deg", math.unit($direction)) {
+      @error "`#{$direction}` is not a valid $direction for `linear-gradient`. Pass an angle such as `45deg`, or one of: #{map.keys($map-for-directions)}.";
+    } @else {
+      background: linear-gradient($direction, $list);
+    }
+  }
+}

data/scss/library/_loadify.scss

@@ -0,0 +1,62 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@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") {
+      @keyframes loadify {
+        to {
+          opacity: 1;
+          visibility: visible;
+          backface-visibility: visible;
+        }
+      }
+      %loadify {
+        opacity: 0;
+        visibility: hidden;
+        backface-visibility: hidden;
+        animation-name: loadify;
+        animation-fill-mode: forwards;
+
+        // The element starts invisible and the animation is what reveals it,
+        // so switching the animation off is not enough on its own: it would
+        // leave the content hidden for good. Under reduced motion the end
+        // state is applied directly instead, and nothing moves.
+        @media (prefers-reduced-motion: reduce) {
+          opacity: 1;
+          visibility: visible;
+          backface-visibility: visible;
+          animation: none;
+        }
+      }
+    } @else if (list.length($params) == 1 and list.nth($params, 1) != "init") or (list.length($params) == 1 and meta.type-of(list.nth($params, 1)) != "string") {
+      @error "#{list.nth($params, 1)} is not a valid argument. Please pass `init` as an argument to initialize the effect or do not pass any argument at all.";
+    } @else if list.length($params) > 1 {
+      @error "Only one argument is allowed when you call this mixin at the root of your stylesheet! Please pass `init` as an argument to initialize the effect or do not pass any argument at all.";
+    }
+  } @else if & {
+    @extend %loadify;
+    @if list.length($params) == 0 {
+      animation-delay: 0.2s;
+      animation-duration: 0.5s;
+    } @else if list.length($params) == 1 {
+      animation-delay: #{isTime(list.nth($params, 1))};
+      animation-duration: 0.5s;
+    } @else if list.length($params) == 2 {
+      animation-delay: #{isTime(list.nth($params, 1))};
+      animation-duration: #{isTime(list.nth($params, 2))};
+    } @else if list.length($params) > 2 {
+      @error "You cannot pass more than two arguments.";
+    }
+  }
+}

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

data/scss/library/_only.scss

@@ -0,0 +1,73 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+@use "../internal/sibling-index" as *;
+
+@mixin only($params...) {
+  @if list.length($params) == 0 {
+    @error "Please pass an argument. The argument must be either a negative or positive number or list of numbers. Or pass one of the following predefined string values: 'first', 'last', 'odd', 'even'.";
+  } @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 matches
+      // nothing; see scss/internal/_sibling-index.scss.
+      $problem: siblingIndexProblem($value, "only");
+      @if $problem {
+        @error "`#{meta.inspect($value)}` is not a valid position for `only`: #{$problem}.";
+      }
+      @if $value < 0 {
+        &:nth-last-of-type(#{$value * -1}) {
+          @content;
+        }
+      } @else {
+        &:nth-of-type(#{$value}) {
+          @content;
+        }
+      }
+    } @else if meta.type-of($value) == "string" {
+      @if $value == "odd" {
+        &:nth-of-type(odd) {
+          @content;
+        }
+      } @else if $value == "even" {
+        &:nth-of-type(even) {
+          @content;
+        }
+      } @else if $value == "first" {
+        &:first-of-type {
+          @content;
+        }
+      } @else if $value == "last" {
+        &:last-of-type {
+          @content;
+        }
+      } @else {
+        // For class, id or attribute selectors.
+        &#{$value} {
+          @content;
+        }
+      }
+    } @else {
+      @error "`#{$value}` is not a valid argument for `only`. 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 emptied the whole selector
+    // list, taking the good positions with it.
+    @each $item in $params {
+      $problem: siblingIndexProblem($item, "only", true);
+      @if $problem {
+        @error "`#{meta.inspect($item)}` is not a valid position for `only`: #{$problem}.";
+      }
+    }
+    $list: ();
+    @for $i from 1 through list.length($params) {
+      $list: list.append($list, if(list.nth($params, $i) < 0, string.unquote("&:nth-last-of-type(#{list.nth($params, $i) * -1})"), string.unquote("&:nth-of-type(#{list.nth($params, $i)})")), comma);
+    }
+    #{$list} {
+      @content;
+    }
+  }
+}

data/scss/library/_placeholder-shown.scss

@@ -0,0 +1,7 @@
+@charset "UTF-8";
+
+@mixin placeholder-shown {
+  &:placeholder-shown {
+    @content;
+  }
+}

data/scss/library/_placeholder.scss

@@ -0,0 +1,19 @@
+@charset "UTF-8";
+
+@mixin placeholder {
+  &::-webkit-input-placeholder {
+    @content;
+  }
+  &::-moz-placeholder {
+    @content;
+  }
+  &:-ms-input-placeholder {
+    @content;
+  }
+  &:-moz-placeholder {
+    @content;
+  }
+  &::placeholder {
+    @content;
+  }
+}

data/scss/library/_position.scss

@@ -0,0 +1,72 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+@use "../utilities/shorthand-property" as *;
+@use "../internal/keyword-value" as *;
+@use "../internal/length-problem" as *;
+
+// Sets position and its four offsets in shorthand order: top, right, bottom,
+// left, as `margin` and `padding` take them.
+//
+// Pass $logical: true for the offsets that follow the writing direction, the
+// same choice `triangle` and `border-radius` offer with their logical names.
+// The shorthand order stays the same and each position maps to its logical
+// twin: top to inset-block-start, right to inset-inline-end, bottom to
+// inset-block-end, left to inset-inline-start. Measured in Chrome 152: under
+// dir="ltr" each logical offset put the box where its physical twin did, and
+// under dir="rtl" where the mirrored twin did, while a physical `left: 16px`
+// stayed 16px from the left in both. For one offset, writing inset-* by hand is
+// as short; the argument is here so the library behaves the same way
+// everywhere.
+@mixin position($position: absolute, $offsets: 0, $logical: false) {
+  // null is read as false, as a null argument means "not set" across the
+  // library, so a caller can pass a variable that may be unset.
+  @if $logical != true and $logical != false and $logical != null {
+    @error "`#{meta.inspect($logical)}` is not a valid $logical for `position`. Pass true for offsets that follow the writing direction, or false for top, right, bottom and left.";
+  }
+  // Measured in Chrome 152, `position` kept the five keywords in any case, the
+  // CSS-wide keywords and var(), and dropped anything else, a quoted keyword
+  // included. A vendor keyword is let through: Chrome drops `-webkit-sticky`,
+  // which Safari uses. null leaves position out, as it always has.
+  $problem: keywordProblem($position, "static" "relative" "absolute" "fixed" "sticky", $vendor: true);
+  @if $problem {
+    @error "`#{meta.inspect($position)}` is not a valid $position for `position`: #{$problem}. A browser drops the declaration.";
+  }
+
+  $offsets: shorthandProperty($offsets);
+  // Each offset is a declaration of its own. Measured in Chrome 152, top, left
+  // and the inset-* properties kept a length, a negative length, a percentage,
+  // 0, auto and a CSS-wide keyword in any case, var(), maths functions, anchor()
+  // and anchor-size(), and dropped any other word, a unitless number, a unit
+  // that is not a length, a colour, an image and a quoted length. This used to
+  // go through validateLength, which only warns, and warned about working
+  // values such as AUTO and revert-layer while saying nothing about 10deg or
+  // url(); validateLength itself is unchanged, for callers who want a warning.
+  @each $value in $offsets {
+    @if $value != null {
+      $problem: lengthProblem($value, $keywords: ("auto",), $functions: "anchor" "anchor-size", $css-wide: true);
+      @if $problem {
+        @error "`#{meta.inspect($value)}` is not a valid offset for `position`: #{$problem}. A browser drops the declaration.";
+      }
+    }
+  }
+  $edges: top right bottom left;
+  @if $logical {
+    $edges: inset-block-start inset-inline-end inset-block-end inset-inline-start;
+  }
+
+  // Written without quotes, since `position: "sticky"` was dropped.
+  @if meta.type-of($position) == "string" {
+    position: string.unquote($position);
+  } @else {
+    position: $position;
+  }
+  @for $i from 1 through 4 {
+    $value: list.nth($offsets, $i);
+    @if $value != null {
+      #{list.nth($edges, $i)}: $value;
+    }
+  }
+}