@rt-tools/ui-kit 0.0.19 → 0.0.21

package/src/lib/ui-kit/table/components/table-container/table-container.component.scss

@@ -44,24 +44,26 @@ $table-container: (
 );
 
 :host {
-    width: 100%;
     position: relative;
     display: flex;
     overflow: hidden;
+    width: 100%;
 
     // initial table container scrollbar styles
     ::-webkit-scrollbar-track:hover {
         border: 1px solid var(--rt-border-neutral-subtle);
     }
+
     ::-webkit-scrollbar-thumb {
-        background: var(--rt-scrollbar-thumb);
         border: 3px solid transparent;
-        border-radius: 6px;
+        border-radius: var(--rt-radius-sm);
+        background: var(--rt-scrollbar-thumb);
         background-clip: content-box;
     }
+
     ::-webkit-scrollbar-thumb:hover {
-        background: var(--rt-scrollbar-thumb-hover);
         border: 2px solid transparent;
+        background: var(--rt-scrollbar-thumb-hover);
         background-clip: content-box;
     }
 
@@ -94,10 +96,10 @@ $table-container: (
     .table-container {
         &__selectors {
             display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            flex-grow: 1;
             width: 100%;
+            flex-grow: 1;
+            align-items: center;
+            justify-content: flex-start;
             margin: var(--rt-table-container-selectors-margin);
             gap: var(--rt-table-container-toolbar-actions-gap);
 
@@ -110,16 +112,16 @@ $table-container: (
             }
 
             &-counter {
-                font-size: var(--rt-table-container-selector-counter-font-size);
                 color: var(--rt-table-container-selector-counter-color);
+                font-size: var(--rt-table-container-selector-counter-font-size);
             }
         }
 
         &__toolbar {
-            width: 100%;
             display: flex;
-            justify-content: flex-end;
+            width: 100%;
             align-items: center;
+            justify-content: flex-end;
 
             &-actions {
                 display: flex;
@@ -143,9 +145,9 @@ $table-container: (
         }
 
         &__content {
+            overflow: auto;
             width: 100%;
             flex-grow: 1;
-            overflow: auto;
             padding: var(--rt-table-container-content-padding);
 
             &::-webkit-scrollbar {
@@ -155,12 +157,12 @@ $table-container: (
         }
 
         &__placeholder {
+            display: flex;
             width: var(--rt-table-container-placeholder-width);
             height: var(--rt-table-container-placeholder-height);
-            display: flex;
             flex-direction: column;
-            justify-content: center;
             align-items: center;
+            justify-content: center;
             gap: var(--rt-table-container-placeholder-gap);
 
             &-icon {
@@ -203,8 +205,8 @@ $table-container: (
 
                 &-search {
                     width: 100%;
-                    grid-row: 1;
                     justify-content: center;
+                    grid-row: 1;
                 }
             }
         }

package/src/lib/ui-kit/table/components/table-header-cell/table-header-cell.component.scss

@@ -21,8 +21,8 @@ $header-cell: (
 
 :host {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     cursor: pointer;
 
     @each $element, $elements in $header-cell {
@@ -38,8 +38,8 @@ $header-cell: (
     }
 
     .header-cell-label {
-        flex-grow: 1;
         display: flex;
+        flex-grow: 1;
         align-items: center;
         gap: var(--rt-table-header-cell-label-gap);
 
@@ -64,9 +64,9 @@ $header-cell: (
         }
 
         &__text {
-            white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            white-space: nowrap;
         }
 
         &__suffix {
@@ -85,10 +85,9 @@ $header-cell: (
     .header-cell-icons {
         display: flex;
         flex-direction: column;
-        justify-content: center;
         align-items: center;
+        justify-content: center;
         margin: var(--rt-table-header-cell-icon-margin);
-
         visibility: hidden;
 
         &--active {
@@ -98,12 +97,12 @@ $header-cell: (
         &__icon {
             width: 0;
             height: 0;
-            border-left: 3px solid transparent;
             border-right: 3px solid transparent;
             border-bottom: 5.2px solid var(--rt-table-header-cell-icon-color);
+            border-left: 3px solid transparent;
 
             &--second {
-                margin-top: 2px;
+                margin-top: var(--rt-spacing-2);
                 transform: scaleY(-1);
             }
 

package/src/lib/ui-kit/table/components/table-header-filter-cell/table-header-filter-cell.component.scss

@@ -1,9 +1,9 @@
 :host {
-    width: 100%;
     display: flex;
-    justify-content: flex-start;
+    width: 100%;
     align-items: center;
-    gap: 0.5rem;
+    justify-content: flex-start;
+    gap: var(--rt-spacing-8);
 
     .table-header-cell-filter-input {
         width: 100%;

package/src/lib/ui-kit/table/dynamic-list.component.scss

@@ -1,6 +1,6 @@
 :host {
-    width: 100%;
-    height: 100%;
     display: flex;
     overflow: hidden;
+    width: 100%;
+    height: 100%;
 }

package/src/lib/ui-kit/table/stories/dynamic-list/test-dynamic-list.component.scss

@@ -1,7 +1,7 @@
 :host {
+    display: flex;
     width: 100vw;
     height: 100vh;
-    display: flex;
     flex-direction: column;
     margin: -1rem;
 

package/src/lib/ui-kit/table/stories/pagination/test-pagination-component.scss

@@ -1,16 +1,16 @@
 :host {
+    position: relative;
+    display: flex;
+    overflow: hidden;
     width: 100vw;
     height: 100vh;
-    display: flex;
     flex-direction: column;
     margin: -1rem;
-    position: relative;
-    overflow: hidden;
 
     .pagination {
-        width: 100%;
         position: absolute;
         top: 0;
         left: 0;
+        width: 100%;
     }
 }

package/src/lib/ui-kit/table/stories/table/test-table-component.scss

@@ -1,7 +1,7 @@
 :host {
+    display: flex;
     width: 100vw;
     height: 100vh;
-    display: flex;
     flex-direction: column;
     margin: -1rem;
 }

package/src/lib/ui-kit/toggle/rtui-toggle.component.scss

@@ -13,7 +13,7 @@ $toggle: (
     toggle: (
         border-radius: 6.25rem,
         background-color: var(--rt-bg-base-subtle),
-        box-shadow: inset 0 0 0.125rem 0.0625rem rgba(0, 0, 0, 0.05),
+        box-shadow: inset 0 0 0.125rem 0.0625rem rgb(0 0 0 / 5%),
     ),
     toggle-check: (
         box-shadow: inset 0 0 0 1.25rem var(--rt-control-checked),
@@ -21,7 +21,7 @@ $toggle: (
     toggle-switch: (
         border-radius: 2.25rem,
         background-color: var(--rt-control-thumb),
-        box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2),
+        box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 20%),
     ),
     toggle-track: (
         background-color: var(--rt-control-track),
@@ -79,12 +79,12 @@ $toggle: (
 
         .rtui-toggle {
             position: relative;
+            overflow: hidden;
             width: 3.125rem;
             min-width: 3.125rem;
             height: 1.875rem;
             border-radius: var(--rt-toggle-toggle-border-radius);
             background-color: var(--rt-toggle-toggle-background-color);
-            overflow: hidden;
             box-shadow: var(--rt-toggle-toggle-box-shadow);
             cursor: pointer;
 
@@ -103,36 +103,30 @@ $toggle: (
                     right: 0.125rem;
                     left: 1.375rem;
                     transition: 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-                    transition-property: left, right;
                     transition-delay: 0.05s, 0s;
+                    transition-property: left, right;
                 }
             }
 
             &__switch {
                 position: absolute;
-                left: 0.125rem;
-                top: 0.125rem;
-                bottom: 0.125rem;
-                right: 1.375rem;
-                background-color: var(--rt-toggle-toggle-switch-background-color);
-                border-radius: var(--rt-toggle-toggle-switch-border-radius);
                 z-index: 1;
+                border-radius: var(--rt-toggle-toggle-switch-border-radius);
+                background-color: var(--rt-toggle-toggle-switch-background-color);
+                box-shadow: var(--rt-toggle-toggle-switch-box-shadow);
+                inset: 0.125rem 1.375rem 0.125rem 0.125rem;
                 transition: 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-                transition-property: left, right;
                 transition-delay: 0s, 0.05s;
-                box-shadow: var(--rt-toggle-toggle-switch-box-shadow);
+                transition-property: left, right;
             }
 
             &__track {
                 position: absolute;
-                left: 0;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                transition: 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-                background-color: var(--rt-toggle-toggle-track-background-color);
-                border-radius: var(--rt-toggle-toggle-track-border-radius);
                 border: var(--rt-toggle-toggle-track-border);
+                border-radius: var(--rt-toggle-toggle-track-border-radius);
+                background-color: var(--rt-toggle-toggle-track-background-color);
+                inset: 0;
+                transition: 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
             }
 
             // modify
@@ -148,8 +142,8 @@ $toggle: (
                 }
 
                 .rtui-toggle__check:checked ~ .rtui-toggle__switch {
-                    left: 1.625rem;
                     right: 0.125rem;
+                    left: 1.625rem;
                 }
             }
 
@@ -165,8 +159,8 @@ $toggle: (
                 }
 
                 .rtui-toggle__check:checked ~ .rtui-toggle__switch {
-                    left: 0.75rem;
                     right: 0.125rem;
+                    left: 0.75rem;
                 }
             }
         }

package/src/lib/ui-kit/toggle/stories/component/test-toggle.component.scss

@@ -1,9 +1,9 @@
 :host {
+    display: flex;
     width: 100vw;
     height: 100vh;
-    display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
     margin: -1rem;
 }

package/src/lib/ui-kit/toolbar/toolbar.component.scss

@@ -40,9 +40,8 @@ $toolbar: (
         --mat-toolbar-standard-height: var(--rt-toolbar-body-mobile-height);
         --mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-mobile-height);
 
-        min-height: var(--rt-toolbar-body-mobile-height);
         height: var(--rt-toolbar-body-mobile-height);
-
+        min-height: var(--rt-toolbar-body-mobile-height);
         padding: var(--rt-toolbar-body-padding);
         background-color: transparent;
 
@@ -61,25 +60,21 @@ $toolbar: (
 
         .bars {
             position: relative;
-
             display: flex;
             width: 100%;
             height: 100%;
-
+            border-bottom: var(--rt-toolbar-bars-border-bottom-width) var(--rt-toolbar-bars-border-bottom-style)
+                var(--rt-toolbar-bars-border-bottom-color);
             background-color: var(--rt-toolbar-body-background-color);
 
-            border-bottom-style: var(--rt-toolbar-bars-border-bottom-style);
-            border-bottom-width: var(--rt-toolbar-bars-border-bottom-width);
-            border-bottom-color: var(--rt-toolbar-bars-border-bottom-color);
-
             &__bar {
                 &--left {
                     width: var(--rt-toolbar-bars-left-width);
                 }
 
                 &--center {
-                    width: var(--rt-toolbar-bars-center-width);
                     overflow: hidden;
+                    width: var(--rt-toolbar-bars-center-width);
                 }
 
                 &--right {
@@ -89,8 +84,8 @@ $toolbar: (
                 &--left,
                 &--center,
                 &--right {
-                    height: 100%;
                     display: flex;
+                    height: 100%;
                     align-items: center;
                 }
             }

package/src/styles/TOKENS.md

@@ -18,11 +18,104 @@ Quick facts:
   fallback chains. Opt out: `@use '...main' with ($tokens-use-material: false)`.
 - Accent roles `{primary,success,warning,danger,info,neutral}`,
   steps `{subtle,solid,hover,disabled}` (simplified vs GMT).
+- Accent indirection: the accent semantic tier derives from `--rt-color-{role}-{0..100}`
+  ramps (`{primary,info,success,warning,danger,brand}`). Custom brand palettes
+  override only those rows — see **Custom color schemes** below.
 - Foundations: `--rt-spacing-{0..64}` (px-named, rem values), `--rt-radius-*`,
   `--rt-font-*`, `--rt-shadow-*`, `--rt-transition-*`, `--rt-z-index-*`.
-- Legacy `--clr-*` variables are emitted as **deprecated aliases**.
 - Prebuilt CSS for non-sass consumers: `dist/ui-kit/styles/tokens.css`
   (`pnpm run build:tokens`).
 - Figma parity: collections `core` (`rt/color/*`) and `theme` (`rt/{bg,text,icon,border}/*`,
   Light/Dark modes) in the “RT-Tools UI Kit” file mirror these names 1:1.
-- App-defined (never set by the kit): `--clr-avalon`, `--font-default`, mat theme colors.
+- App-defined (never set by the kit): `--font-default`, mat theme colors.
+
+## Component theming API (Tier 3 contract)
+
+Tier-3 vars are split into a **public theming API** and **internal implementation details**.
+Only the public set is a compatibility promise; internal vars may be renamed or stop being
+emitted in the next major release.
+
+**Public** (override these from your app):
+
+1. Every var matching `--rt-<component>-*-{color,background-color,bg,shadow,indicator}` —
+   the color surface of each component.
+2. Documented size hooks proven by consumers:
+   `--rt-table-row-height`, `--rt-toolbar-body-height`, `--rt-toolbar-body-mobile-height`,
+   `--rt-aside-error-box-height`, `--rt-aside-host-width`,
+   `--rt-image-upload-host-min-height`, `--rt-image-upload-image-container-image-max-height`.
+
+**Internal** (everything else): layout paddings/margins/gaps/font-sizes generated from SCSS maps.
+They currently _are_ emitted (≈380 vars total, ~14% actually themed by consumers) — in the next
+major the internal set stops being emitted and gets inlined into rules.
+
+### `:root` vs `:host` emission — override semantics
+
+- Vars emitted at **`:root`** (global stylesheets + `ViewEncapsulation.None` components like
+  aside-panel) are overridable from any ancestor scope: `.dark-mode { --rt-aside-host-background-color: …; }`.
+- Vars emitted at **`:host`** are set on the element itself and **win over inherited values** —
+  consumers must target the element (`rtui-toolbar { --rt-toolbar-body-height: … !important; }`).
+  This asymmetry is why some consumers need `!important` for toolbar/toggle but not for aside/table.
+- Planned unification (major): emit defaults via `var(--override, default)` indirection so all
+  components are ancestor-overridable without `!important`.
+
+## Buttons: legacy vs rtui
+
+`.c-button` (\_button.scss) is **deprecated**; `.rtui-btn` (\_rtui_button.scss) is the system.
+Both stay until the next major because consumers apply `.c-button` classes and override
+`--rt-button-*` directly. Migration map:
+
+| legacy `.c-button`        | `.rtui-btn`                                                           |
+| ------------------------- | --------------------------------------------------------------------- |
+| `--fill-green` / `-light` | `rtui-btn-success` / `-light`                                         |
+| `--fill-red` / `-light`   | `rtui-btn-error` / `-light`                                           |
+| `--fill-blue`             | `rtui-btn-accent-light`                                               |
+| `--fill-base/black/gray`  | `rtui-btn-secondary` (+`-light`)                                      |
+| `--outline-{blue,base}`   | `rtui-btn-{accent,secondary}-outline`                                 |
+| `--txt-*`, `--fab`        | no equivalent yet — needs a text/icon appearance in `.rtui-btn` first |
+| `--size-{sm,md,l}`        | `rtui-btn-{sm,md,lg}` (+`-full`)                                      |
+
+## Material bridge
+
+All **global** Material/CDK overrides live in `styles/components/_material-bridge.scss`
+(single file to review on a Material upgrade). Component-scoped piercings stay with their
+component; the bridge header keeps the inventory of those locations.
+
+## Custom color schemes (brand palettes)
+
+The accent semantic tier never hardcodes color — it derives from an indirection layer,
+the **accent-role ramps** `--rt-color-{role}-{0..100}` for
+`{primary, info, success, warning, danger, brand}`. A custom brand palette overrides
+**only** those rows; the kit derives `--rt-{bg,text,icon,border}-accent-*`,
+hover/subtle/disabled and `--rt-border-focus` from them. The block is scoped to
+`[data-rt-scheme="<name>"]` on `<html>`, set raw → it wins over `--mat-sys-*`.
+
+```scss
+@use '@rt-tools/ui-kit/src/styles/main' as rt;
+@include rt.color-scheme(
+    'teal',
+    (
+        primary: (
+            20: #b3e3e1,
+            40: #5cb8b5,
+            60: #1a9d99,
+            100: #008582,
+        ),
+        brand: (
+            20: #e8e8e8,
+            100: #008582,
+        ),
+    )
+);
+```
+
+```typescript
+// runtime twin (browser-only); prefer the Sass path for SSR/brand-critical schemes
+theme.registerColorScheme('teal', { primary: { 100: '#008582' /* … */ } });
+theme.setColorScheme('teal'); // data-rt-scheme="teal"; persisted to rt-color-scheme
+theme.setColorScheme(null); // back to the default palette
+```
+
+- Orthogonal to light/dark (one ramp per role serves both modes).
+- Δ0: with no scheme the accent layer is byte-for-byte the historical palette
+  (regression-tested in `styles/color-scheme.spec.ts`); Sass↔JS generator parity is tested too.
+- Full guide: Storybook **Foundation/Theming/Custom color schemes** (`docs/ColorSchemes.mdx`).

package/src/styles/base/_base.scss

@@ -1,6 +1,6 @@
 $palette: (
     white: (
-        100: #ffffff,
+        100: #fff,
     ),
     gray: (
         5: #f5f6f8,
@@ -10,7 +10,7 @@ $palette: (
     ),
     black: (
         10: #f3f3f3,
-        15: #eeeeee,
+        15: #eee,
         20: #e0e0e0,
         30: #b2cbca,
         40: #a3a3a3,
@@ -55,10 +55,9 @@ $palette: (
 
 // NOTE: the $palette map above is kept for backwards compatibility (consumers may @use it).
 // All CSS custom property emission lives in base/_tokens.scss:
-//   --rt-color-* primitives, --rt-{bg,text,icon,border}-* semantic, foundations,
-//   and deprecated --clr-* aliases.
+//   --rt-color-* primitives, --rt-{bg,text,icon,border}-* semantic, and foundations.
 
 :root {
     // Buttons
-    --rt-button-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 1px 18px 0 rgba(0, 0, 0, 0.14);
+    --rt-button-box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 12%), 0 1px 18px 0 rgb(0 0 0 / 14%);
 }

package/src/styles/base/_color-scheme.scss

@@ -0,0 +1,86 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+@use './tokens' as tokens;
+
+/// ============================================================================
+/// Custom color schemes (brand palettes)
+/// ============================================================================
+///
+/// A color scheme overrides ONLY the accent-role indirection rows
+/// `--rt-color-{role}-{0..100}` (see `_tokens.scss`). The whole semantic accent
+/// tier (`--rt-bg/text/icon/border-accent-*`, hover/subtle/disabled, `--rt-border-focus`)
+/// re-derives from those rows — so a brand recolors with Δ0 effort and the
+/// component contract (semantic token names) stays untouched.
+///
+/// The emitted block is scoped to `[data-rt-scheme="<name>"]`, which the runtime
+/// (`RtThemeService.setColorScheme`) toggles on `<html>`. Because the scheme sets
+/// raw values, it overrides the default rows that carry the `--mat-sys-*` fallback
+/// → the scheme wins over an active Material theme.
+///
+/// Usage:
+///   @use '@rt-tools/ui-kit/src/styles/main' as rt;   // or the package's scss entry
+///   @include rt.color-scheme('teal', (
+///       primary: (20: #b3e3e1, 40: #5cb8b5, 60: #1a9d99, 100: #008582),
+///       brand:   (20: #e8e8e8, 100: #008582),
+///   ));
+///
+/// One tonal ramp per role serves both light and dark (M3-style): the mode picks
+/// the tone via `light-dark()` inside the semantic tier — schemes never duplicate
+/// that logic. `$modes` is accepted for forward-compatibility but a single ramp
+/// already covers every mode.
+
+/// Roles a scheme may override, with their valid tone steps (from the default ramps).
+$known-roles: tokens.$accent-roles;
+
+/// Validate a single role/ramp pair; @error with an actionable message on bad input.
+@function _validate-role($name, $role, $ramp) {
+    @if not map.has-key($known-roles, $role) {
+        @error 'rt.color-scheme("#{$name}"): unknown role "#{$role}". Allowed roles: #{map.keys($known-roles)}.';
+    }
+
+    @if meta.type-of($ramp) != 'map' {
+        @error 'rt.color-scheme("#{$name}"): role "#{$role}" must be a map of (tone: color), got #{meta.type-of($ramp)}.';
+    }
+
+    @each $step, $value in $ramp {
+        @if meta.type-of($step) != 'number' or not _is-integer-step($step) {
+            @error 'rt.color-scheme("#{$name}"): role "#{$role}" tone "#{$step}" must be an integer 0–100.';
+        }
+    }
+
+    @return true;
+}
+
+/// Tone steps must be integers within 0–100.
+@function _is-integer-step($step) {
+    @return $step >= 0 and $step <= 100 and ($step % 1 == 0);
+}
+
+/// Emit a named color scheme as a `[data-rt-scheme]` block (only raw `--rt-color-{role}-{N}` rows).
+///
+/// @param {String} $name   Scheme name, matched by `data-rt-scheme="<name>"`.
+/// @param {Map}    $roles  Map of `role: (tone: color, …)`. Roles ⊆ #{map.keys($known-roles)}.
+/// @param {List}   $modes  Reserved for forward-compat; one ramp already serves all modes.
+@mixin color-scheme($name, $roles, $modes: (light, dark)) {
+    @if meta.type-of($name) != 'string' {
+        @error 'rt.color-scheme: $name must be a string, got #{meta.type-of($name)}.';
+    }
+
+    @if meta.type-of($roles) != 'map' or list.length(map.keys($roles)) == 0 {
+        @error 'rt.color-scheme("#{$name}"): $roles must be a non-empty map of (role: ramp).';
+    }
+
+    @each $role, $ramp in $roles {
+        $ok: _validate-role($name, $role, $ramp);
+    }
+
+    // `:root[...]` (0,2,0) outranks the default `:root` rows (0,1,0) regardless of source order.
+    :root[data-rt-scheme='#{$name}'] {
+        @each $role, $ramp in $roles {
+            @each $step, $value in $ramp {
+                --rt-color-#{$role}-#{$step}: #{$value};
+            }
+        }
+    }
+}

package/src/styles/base/_mixin.scss

@@ -1,12 +1,7 @@
+@use 'sass:color';
 @use 'sass:math';
 @use './variables' as vars;
 
-// css clr var generator
-// #{generateCssVar(red, 100)}: #eb5055;
-@function generateCssClrVar($color, $saturate) {
-    @return --#{vars.$styles-clr-prefix}-#{$color}-#{$saturate};
-}
-
 // css var generator
 // #{generateCssVar(table-base-cell, suffix-icon, size)}: 1rem;
 @function generateCssVar($component-name, $element, $style-token) {
@@ -16,9 +11,9 @@
 // convert hex to rgb values
 // #{convert-hex-to-rgb-values(#ab2727)}: 171, 39, 39;
 @function convert-hex-to-rgb-values($hex) {
-    $r: red($hex);
-    $g: green($hex);
-    $b: blue($hex);
+    $r: color.channel($hex, 'red', $space: rgb);
+    $g: color.channel($hex, 'green', $space: rgb);
+    $b: color.channel($hex, 'blue', $space: rgb);
 
     @return $r + ', ' + $g + ', ' + $b;
 }
@@ -26,6 +21,7 @@
 // px to rem
 // font-size: rem(16);
 $browser-context: 16;
+
 @function rem($valueRem, $context: $browser-context) {
     @return #{math.div($valueRem, $context)}rem;
 }
@@ -47,20 +43,21 @@ $browser-context: 16;
 @mixin flex-column-center {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
 }
 
 @mixin visually-hidden {
     position: absolute;
+    overflow: hidden;
     width: 1px;
     height: 1px;
-    margin: -1px;
-    border: 0;
     padding: 0;
-    white-space: nowrap;
-    clip-path: inset(100%);
+    border: 0;
+    margin: -1px;
+    /* stylelint-disable-next-line property-no-deprecated -- legacy-browser leg of the visually-hidden pattern */
     clip: rect(0 0 0 0);
-    overflow: hidden;
+    clip-path: inset(100%);
     pointer-events: none;
+    white-space: nowrap;
 }