gerillass 0.0.6 → 3.0.0

data/scss/library/_container-query.scss

@@ -0,0 +1,119 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "../maps/map-for-breakpoints" as *;
+@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`,
+// `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
+// case.
+//
+// Pass $name to query one named container rather than the nearest ancestor.
+// The container itself is declared with the `container` mixin, on an ancestor
+// of whatever this styles.
+@mixin container-query($params...) {
+  $keywords: meta.keywords($params);
+  $name: map.get($keywords, name);
+  $count: list.length($params);
+
+  @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: 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.";
+  }
+  $condition: null;
+
+  @if $count == 1 {
+    $value: list.nth($params, 1);
+    // 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, with a warning.
+    @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.";
+  } @else if $count == 2 {
+    $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: #{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: #{conditionWidth($value, "container-query", "@container")})";
+      } @else if $mode == "min" {
+        $condition: "(min-width: #{conditionWidth($value, "container-query", "@container")})";
+      } @else if $mode == "max" {
+        $condition: "(max-width: #{conditionWidth($value, "container-query", "@container")})";
+      } @else {
+        $start: list.nth($value, 1);
+        $end: list.nth($value, 2);
+        $condition: "(min-width: #{conditionWidth($start, "container-query", "@container")}) and (max-width: #{conditionWidth($end, "container-query", "@container")})";
+      }
+    }
+  } @else {
+    @error "`container-query` takes one or two arguments, and was given #{$count}. Pass a size, two sizes for a range, or one of `min`, `max`, `only` or `between` followed by a size.";
+  }
+
+  @if $name {
+    @container #{string.unquote($name)} #{$condition} {
+      @content;
+    }
+  } @else {
+    @container #{$condition} {
+      @content;
+    }
+  }
+}

data/scss/library/_container.scss

@@ -0,0 +1,72 @@
+@charset "UTF-8";
+
+@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
+// name starting with a digit or a hyphen and a digit, and a name holding `.`,
+// `#` or `!`; and for a list with any one of those in it, such as `card and`,
+// and for `none` or a CSS-wide keyword beside another name, such as `NONE card`
+// or `card inherit`. `none`, `inherit`, `revert` and the other CSS-wide
+// keywords were kept on their own, as were several valid names,
+// `-card`, and `var()`, which a container can take its name from.
+$-reserved-names: "and" "or" "not" "default";
+$-alone-names: "none" "inherit" "initial" "unset" "revert" "revert-layer";
+$-forbidden-in-name: "." "," "/" "#" ":" ";" "(" ")" "[" "]" "{" "}" "!" "@" "$" "%" "^" "&" "*" "+" "=" "<" ">" "?" "\\" "|" "~" "`" "'" "\"";
+
+@function -name-problem($name) {
+  $text: "#{$name}";
+  @if string.index($text, "var(") {
+    @return null;
+  }
+  $words: wordsOf($text);
+  @each $word in $words {
+    $lower: string.to-lower-case($word);
+    @if list.index($-alone-names, $lower) and list.length($words) > 1 {
+      @return "`#{$word}` only works as the whole value, not beside another name";
+    }
+    @if list.index($-reserved-names, $lower) {
+      @return "`and`, `or`, `not` and `default` cannot name a container";
+    }
+    $first: string.slice($word, 1, 1);
+    @if string.index("0123456789", $first) or ($first == "-" and string.length($word) > 1 and string.index("0123456789", string.slice($word, 2, 2))) {
+      @return "a container name cannot start with a digit, or with a hyphen and a digit";
+    }
+    @each $character in $-forbidden-in-name {
+      @if string.index($word, $character) {
+        @return "a container name cannot contain `#{$character}`";
+      }
+    }
+  }
+  @return null;
+}
+
+// Marks an element as a query container, so `container-query` can ask about its
+// width instead of the viewport's.
+//
+// The rule that asks has to sit on a descendant. An element is not matched by a
+// @container rule that reads its own container, and nothing warns you: the rule
+// is simply never applied. Measured in a browser, a 600px element with
+// `container-type: inline-size` on itself did not match `@container (min-width:
+// 400px)`, while the same query did match a child of it.
+@mixin container($name: null, $type: inline-size) {
+  @if not list.index("inline-size" "size" "normal", $type) {
+    @error "`#{$type}` is not a valid $type for `container`. Pass one of: inline-size, size, normal.";
+  }
+  @if $name != null and meta.type-of($name) != "string" {
+    @error "`#{$name}` is not a valid $name for `container`. Pass a name as a string, such as `\"card\"`, or no name at all.";
+  }
+  @if $name != null {
+    $problem: -name-problem($name);
+    @if $problem {
+      @error "`#{$name}` is not a valid $name for `container`: #{$problem}, and a browser drops the whole declaration. Pass a name such as `\"card\"`.";
+    }
+  }
+  container-type: $type;
+  @if $name {
+    container-name: string.unquote($name);
+  }
+}

data/scss/library/_counter.scss

@@ -0,0 +1,59 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "../lists/list-of-counter-styles" as *;
+@use "../internal/is-css-function" as *;
+
+@mixin counter($params...) {
+  $counter: null;
+  $counter-before: null;
+  $counter-after: null;
+
+  @if list.length($params) == 1 {
+    @if list.index($list-of-counter-styles, list.nth($params, 1)) {
+      $counter: list.nth($params, 1);
+    } @else {
+      $counter-after: list.nth($params, 1);
+    }
+  } @else if list.length($params) == 2 {
+    @if list.index($list-of-counter-styles, list.nth($params, 1)) {
+      $counter: list.nth($params, 1);
+      $counter-after: list.nth($params, 2);
+    } @else if list.index($list-of-counter-styles, list.nth($params, 2)) {
+      $counter-before: list.nth($params, 1);
+      $counter: list.nth($params, 2);
+    } @else {
+      $counter-before: list.nth($params, 1);
+      $counter-after: list.nth($params, 2);
+    }
+  } @else if list.length($params) == 3 {
+    @if list.index($list-of-counter-styles, list.nth($params, 2)) {
+      $counter-before: list.nth($params, 1);
+      $counter: list.nth($params, 2);
+      $counter-after: list.nth($params, 3);
+    }
+  }
+
+  // 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 isCssFunction($counter-before, "var" "attr" "counter" "counters") {
+    $quote-before: "";
+  }
+  @if isCssFunction($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, $quote-before + $counter-before + $quote-before + " ", null)}counter(
+        glsCounter#{if($counter, ", " + $counter, null)}
+      )
+      #{if($counter-after, " " + $quote-after + $counter-after + $quote-after, null)};
+    counter-increment: glsCounter;
+    @content;
+  }
+}

data/scss/library/_ellipsis.scss

@@ -0,0 +1,87 @@
+@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) {
+  $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;
+  overflow: hidden;
+  word-wrap: normal;
+}

data/scss/library/_escape-to-parent.scss

@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+
+@mixin escape-to-parent($selector: null) {
+  @if $selector != null and meta.type-of($selector) != "string" {
+    @error "`#{$selector}` is not a valid $selector for `escape-to-parent`. Pass a selector as a string, such as `\".theme-dark\"`.";
+  }
+  @at-root #{$selector}#{&} {
+    @content;
+  }
+}

data/scss/library/_except.scss

@@ -0,0 +1,71 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+@use "../internal/sibling-index" as *;
+
+@mixin except($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 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;
+        }
+      } @else {
+        &:not(:nth-of-type(#{$value})) {
+          @content;
+        }
+      }
+    } @else if meta.type-of($value) == "string" {
+      @if $value == "odd" {
+        &:not(:nth-of-type(odd)) {
+          @content;
+        }
+      } @else if $value == "even" {
+        &:not(:nth-of-type(even)) {
+          @content;
+        }
+      } @else if $value == "first" {
+        &:not(:first-of-type) {
+          @content;
+        }
+      } @else if $value == "last" {
+        &:not(:last-of-type) {
+          @content;
+        }
+      } @else {
+        &:not(#{$value}) {
+          @content;
+        }
+      }
+    } @else {
+      @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)}))"));
+    }
+    &#{$items} {
+      @content;
+    }
+  }
+}

data/scss/library/_focus-ring.scss

@@ -0,0 +1,63 @@
+@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.
+//
+// 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; }`.";
+  }
+  // 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;
+    outline-offset: $offset;
+  }
+}