@livenetworks/ashlar 1.6.1 → 2.0.0

package/scss/components/_upload.scss

@@ -1,51 +0,0 @@
-@use '../config/mixins' as *;
-
-.ln-upload {
-	@include upload;
-}
-
-.ln-upload__zone {
-	@include upload-zone;
-}
-
-.ln-upload__zone--dragover {
-	@include upload-zone-dragover;
-}
-
-.ln-upload__list {
-	@include upload-list;
-}
-
-.ln-upload__item {
-	@include upload-item;
-}
-
-.ln-upload__name {
-	@include upload-name;
-}
-
-.ln-upload__size {
-	@include upload-size;
-}
-
-.ln-upload__progress {
-	@include upload-progress;
-}
-
-.ln-upload__progress-bar {
-	@include upload-progress-bar;
-}
-
-.ln-upload__item--error {
-	@include upload-item-error;
-}
-
-.ln-upload__item--deleting::before {
-	@include upload-item-deleting-spinner;
-}
-
-@keyframes ln-upload-spin {
-	to {
-		transform: rotate(360deg);
-	}
-}

package/scss/config/_theme.scss

@@ -1,216 +0,0 @@
-// ==========================================================================
-// Theme — ln-ashlar
-// ==========================================================================
-// Dark-mode overrides. Inverts the neutral scale in place, re-tunes
-// shadows and primary tint layers.
-//
-// Activation (any of the three):
-//   <html data-theme="dark">               ← explicit force
-//   @media (prefers-color-scheme: dark)    ← system preference
-//   :root:not([data-theme="light"])        ← opt-out of auto
-//
-// See docs/css/theming.md for the full guide.
-// ==========================================================================
-
-// ---------------------------------------------------------------------------
-// Shared dark overrides — used by both activation paths.
-// ---------------------------------------------------------------------------
-@mixin ln-dark-tokens {
-	// Neutral scale — inverted
-	--color-neutral-50:  220 20%  8%;
-	--color-neutral-100: 220 16% 12%;
-	--color-neutral-150: 220 14% 18%;
-	--color-neutral-200: 220 13% 24%;
-	--color-neutral-300: 220 13% 36%;
-	--color-neutral-400: 218 11% 52%;
-	--color-neutral-500: 220  9% 60%;
-	--color-neutral-600: 220 11% 72%;
-	--color-neutral-700: 220 14% 82%;
-	--color-neutral-800: 220 20% 90%;
-	--color-neutral-900: 221 30% 97%;
-
-	// Vocabulary — bg
-	// Explicit ladder: body (darkest) < base < elevated < sunken (mid).
-	// Dark UI convention keeps elevated = lighter; the neutral-scale
-	// inversion alone would flip elevation direction, so we restate
-	// the four vocabulary entries explicitly.
-	--bg-base:     hsl(220 16% 13%);
-	--bg-elevated: hsl(220 16% 17%);
-	--bg-sunken:   hsl(220 16% 20%);
-	--bg-recessed: hsl(220 16%  9%);
-
-	// Vocabulary — fg
-	--fg-default: hsl(0 0% 95%);
-	--fg-muted:   hsl(220  9% 60%);
-	--fg-subtle:  hsl(218 11% 52%);
-
-	// Vocabulary — border (collapses old --color-border-light bump)
-	--border-subtle:       hsl(220 14% 20%);
-	--border-strong:       hsl(220 13% 36%);
-	--border-strong-hover: hsl(218 11% 52%);
-
-	// Scrim — keep dark overlay in dark mode (neutral-900 inverts to
-	// near-white, which would produce a LIGHT scrim; explicit override
-	// preserves conventional modal-darkening behavior).
-	--color-scrim: hsl(0 0% 0% / 0.6);
-
-	// Primary tint layers — re-tuned for dark surfaces
-	--color-primary-light:   232 60% 22%;
-	--color-primary-lighter: 232 50% 15%;
-
-	// Status tint layers — re-tuned for dark surfaces (parallel to primary)
-	--color-success-light:   142 50% 18%;
-	--color-success-lighter: 142 40% 13%;
-	--color-warning-light:   32 55% 20%;
-	--color-warning-lighter: 32 45% 14%;
-	--color-info-light:      217 55% 22%;
-	--color-info-lighter:    217 45% 15%;
-	--color-error-light:     0 50% 20%;
-	--color-error-lighter:   0 40% 14%;
-
-	// Secondary tint layers — re-tuned for dark surfaces
-	--color-secondary-light:   160 55% 20%;
-	--color-secondary-lighter: 160 45% 14%;
-
-	// Shadows — solid black, boosted alpha, no hue (cool-tint
-	// disappears on dark surfaces)
-	--shadow-xs:
-		0 1px 2px 0 hsl(0 0% 0% / 0.32);
-	--shadow-sm:
-		0 1px 3px 0 hsl(0 0% 0% / 0.40),
-		0 1px 2px -1px hsl(0 0% 0% / 0.30);
-	--shadow-md:
-		0 4px 12px -2px hsl(0 0% 0% / 0.48),
-		0 2px 4px -2px hsl(0 0% 0% / 0.32);
-	--shadow-lg:
-		0 12px 24px -6px hsl(0 0% 0% / 0.56),
-		0 8px 12px -4px hsl(0 0% 0% / 0.40);
-	--shadow-xl:
-		0 24px 48px -12px hsl(0 0% 0% / 0.64),
-		0 12px 24px -6px hsl(0 0% 0% / 0.48);
-	--shadow-2xl:
-		0 36px 72px -18px hsl(0 0% 0% / 0.72),
-		0 18px 36px -9px hsl(0 0% 0% / 0.56);
-	--shadow-inner:
-		inset 0 2px 4px 0 hsl(0 0% 0% / 0.32);
-}
-
-// ---------------------------------------------------------------------------
-// Explicit attribute activation
-// ---------------------------------------------------------------------------
-[data-theme="dark"] {
-	@include ln-dark-tokens;
-}
-
-// ---------------------------------------------------------------------------
-// System preference activation (opt-out via data-theme="light")
-// ---------------------------------------------------------------------------
-@media (prefers-color-scheme: dark) {
-	:root:not([data-theme="light"]) {
-		@include ln-dark-tokens;
-	}
-}
-
-// ---------------------------------------------------------------------------
-// Named presets — demo theme picker. Activation:
-//   <html data-theme="ocean">   <html data-theme="sunset">   etc.
-// ---------------------------------------------------------------------------
-
-[data-theme="ocean"] {
-	--color-primary:         190 80% 35%;
-	--color-primary-light:   190 60% 90%;
-	--color-primary-lighter: 190 50% 95%;
-}
-
-[data-theme="sunset"] {
-	--color-primary:         10 80% 50%;
-	--color-primary-light:   10 70% 92%;
-	--color-primary-lighter: 10 60% 96%;
-}
-
-[data-theme="midnight"] {
-	@include ln-dark-tokens;
-	--color-primary:         265 70% 60%;
-	--color-primary-light:   265 50% 22%;
-	--color-primary-lighter: 265 40% 15%;
-}
-
-[data-theme="glass"] {
-	@include ln-dark-tokens;
-
-	// Electric blue accent — luminescent on dark navy glass
-	--color-primary:         218 95% 62%;
-	--color-primary-light:   218 55% 24%;
-	--color-primary-lighter: 218 50% 16%;
-
-	// Flat — zero radius everywhere
-	--radius-sm:   0;
-	--radius-md:   0;
-	--radius-lg:   0;
-	--radius-xl:   0;
-	--radius-full: 0;
-
-	// Flat — no elevation shadows. --shadow-inner kept for recessed
-	// surfaces (code blocks, progress tracks) which read it as a depth
-	// affordance rather than elevation.
-	--shadow-xs:  none;
-	--shadow-sm:  none;
-	--shadow-md:  none;
-	--shadow-lg:  none;
-	--shadow-xl:  none;
-	--shadow-2xl: none;
-
-	// ── Buttons — neutral chrome via --btn-* rebind, accent variant via
-	// cross-cutting --color-accent-bg-* companion tokens. Theme rebinds
-	// at :root only; library owns structure. See CLAUDE.md
-	// ## Theme Architecture for the contract.
-	--btn-bg:           var(--bg-elevated);
-	--btn-bg-hover:     var(--bg-sunken);
-	--btn-border:       var(--color-accent);
-	--btn-border-hover: var(--color-accent-hover);
-
-	// ── Accent buttons — translucent fill via consumer-scope rebind
-	// Rebind --btn-* on the button itself (not at theme :root) so
-	// var(--color-primary) inside the values resolves on the button's
-	// cascade — letting .success / .error / .warning / .info status
-	// overrides reach the fill and text color. Token-only rebinds; no
-	// background/color/border-color declarations, no &:hover blocks
-	// (button-base already handles state via --btn-*-hover).
-	button[type="submit"],
-	.btn {
-		--btn-bg:       hsl(var(--color-primary) / 0.2);
-		--btn-fg:       hsl(var(--color-primary));
-		--btn-bg-hover: hsl(var(--color-primary) / 0.3);
-		--btn-fg-hover: hsl(var(--color-primary));
-	}
-
-	// ── Nav surface — palette-only rebind ──────────────────────────
-	// @mixin nav reads --nav-link-border-color* via fallback (defaults:
-	// transparent). Glass rebinds them so hover/active draw an accent
-	// ring. --nav-list-bleed shifts the ul to the sidebar's vertical
-	// borders so dividers reach edge-to-edge; @mixin nav reads it with
-	// `0` fallback so default theme is unaffected.
-	--nav-link-border-color-hover:  var(--color-accent);
-	--nav-link-border-color-active: var(--color-accent);
-	--nav-list-bleed:               calc(-1 * var(--padding-x));
-
-	// Active-nav wash — Glass shifts --color-accent-tint one step
-	// darker (var(--color-primary-light) instead of -lighter) for
-	// stronger contrast on the deep dark surface. Replaces the
-	// pre-refactor descendant override on a.active. Side-effect:
-	// dropdown active items + upload drop-zone also pick up the
-	// slightly darker tint — improvement, not regression.
-	--color-accent-tint: hsl(var(--color-primary-light));
-
-	// ── Dropdown / menu-items dividers ─────────────────────────────
-	// @mixin menu-items reads SOFT --border-block-start on `li + li`
-	// and `hr` with `none` fallback. Glass rebinds the slot in scope
-	// so the divider appears for both. Scoped (not theme :root)
-	// because --border-block-start is read by ~10 other mixins
-	// (cards, tables, accordions) where the divider should NOT appear.
-	[data-ln-dropdown-menu],
-	.menu-items {
-		--border-block-start: var(--border-width) solid var(--color-border);
-	}
-
-}

package/scss/config/mixins/_btn.scss

@@ -1,179 +0,0 @@
-@use 'spacing' as *;
-@use 'display' as *;
-@use 'sizing' as *;
-@use 'typography' as *;
-@use 'colors' as *;
-@use 'borders' as *;
-@use 'transitions' as *;
-@use 'interaction' as *;
-@use 'focus' as *;
-
-// Buttons
-// button-base  — shared neutral chrome (global button + anchor-as-button)
-// btn          — accent variant of button-base; rebinds --btn-* to accent colors
-// btn-sm       — smaller size modifier
-// btn-lg       — larger size modifier
-// btn-group    — inline list of peer action buttons (ghost rebind)
-
-// ─── button-base ──────────────────────────────────────
-// Neutral chrome shared by <button>, <input type="submit|reset|button">,
-// and anchors used as buttons (e.g. inside form-actions). Reads the
-// six-token --btn-* surface: --btn-bg/fg/border (idle) and
-// --btn-bg-hover/fg-hover/border-hover (hover + active). Both the
-// neutral default and the accent variant are fully token-driven —
-// the difference is which values --btn-* resolves to.
-//
-// Neutral default: --btn-* read from :root, where they wire to
-// --color-bg / --color-fg / --border-strong (and --border-strong-hover
-// companions for the hover state). Theme overrides rebind --btn-*
-// (e.g. Glass rebinds --btn-bg to --bg-elevated, --btn-border
-// to --color-accent for an outlined neutral chrome).
-//
-// Accent variant (submit + @mixin btn): rebinds --btn-* on the
-// consumer element to accent values. Because the rebind happens on
-// the button itself (not at :root), and because @mixin btn first
-// re-declares --color-accent: hsl(var(--color-primary)) at the same
-// scope, .success/.error/.warning/.info classes that override
-// --color-primary cascade through --color-accent → --btn-* →
-// background/color/border-color cleanly. var() always resolves at
-// the declaration site, and the declaration site for both the
-// rebind and button-base's reads is the button element.
-//
-// Why cross-cutting --color-accent-bg-* companions, not per-component
-// --btn-accent-* tokens at :root: a per-component surface declared at
-// :root (--btn-accent-bg: var(--color-accent)) would freeze
-// --color-accent at :root scope and break the
-// .success/.error/.warning/.info cascade for descendant overrides.
-// Cross-cutting --color-accent-bg-* companions (read via fallback to
-// --color-accent / --color-accent-fg) sidestep that: the default
-// theme leaves them unset (mixin falls back to solid + white), Glass
-// rebinds them at theme :root to flip the accent button to
-// translucent. Solid-accent consumers (toast-icon, pill-checked,
-// stepper active/complete) read --color-accent / --color-accent-fg
-// directly and are unaffected by Glass's rebind because Glass leaves
-// --color-accent-fg alone. See CLAUDE.md ## Theme Architecture for
-// the full contract.
-
-@mixin button-base {
-	@include inline-flex;
-	@include items-center;
-	@include justify-center;
-	gap: var(--gap);
-	padding: var(--padding-y) var(--padding-x);
-	@include text-sm;
-	@include font-medium;
-	border-radius: var(--radius);
-	white-space: nowrap;
-	border: var(--border-width) solid var(--btn-border);
-	outline: none;
-	background: var(--btn-bg);
-	color: var(--btn-fg);
-	@include transition-colors;
-
-	&:hover:not(:disabled) {
-		background: var(--btn-bg-hover);
-		color: var(--btn-fg-hover);
-		border-color: var(--btn-border-hover);
-	}
-
-	&:active:not(:disabled) {
-		background: var(--btn-bg-hover);
-		border-color: var(--btn-border-hover);
-	}
-
-	&:focus-visible {
-		@include focus-ring;
-	}
-
-	&:disabled {
-		@include opacity-50;
-		@include cursor-not-allowed;
-	}
-}
-
-@mixin btn {
-	// Accent variant — rebinds the --btn-* token surface to accent
-	// values. button-base reads --btn-bg/fg/border (idle) and
-	// --btn-bg-hover/fg-hover/border-hover (hover + active), so this
-	// mixin only needs to set tokens. No direct background/color/
-	// border-color, no &:hover/&:active blocks.
-	//
-	// Re-declares --color-accent on the consumer element so
-	// var(--color-primary) re-resolves at this scope.
-	// .success/.error/.warning/.info classes override --color-primary;
-	// without these re-declarations, --color-accent stays frozen at
-	// :root and semantic colors don't cascade.
-	//
-	// --color-accent-fg is NOT re-declared — the :root default
-	// (hsl(var(--color-white))) already cascades, and re-declaring
-	// here would shadow theme companion overrides on solid-only
-	// surfaces (which there are none here, but the redundancy is
-	// noise either way).
-	--color-accent:       hsl(var(--color-primary));
-
-	// Hover state derived from --color-accent at THIS scope via CSS
-	// relative color syntax — same hue + saturation, lightness reduced
-	// by 8. Computing here (consumer scope) instead of reading a
-	// separate :root token means a consumer override (e.g.
-	// `style="--color-primary: var(--color-error)"` or a .error
-	// ancestor via @mixin semantic-color) cascades to BOTH the idle
-	// and hover surfaces — the whole state machine follows from a
-	// single token change.
-	//
-	// IMPORTANT — `calc(l - 8)` not `calc(l - 8%)`. Inside
-	// relative color syntax, channel keywords (h/s/l) evaluate to
-	// <number> tokens, not <percentage>. `l - 8%` mixes types →
-	// invalid color → browser falls back to `transparent` and the
-	// hover bg vanishes. The number form is what the spec mandates;
-	// hsl(216 95 34) without `%` is valid CSS Color 4 and reads as
-	// "lightness 34%" exactly like the legacy hsl(216 95% 34%) form.
-	//
-	// Pattern shared with @mixin pill, @mixin data-table-row-focused,
-	// the anchor hover in _global.scss, and @mixin semantic-color's
-	// status-family cascade. -light / -lighter remain explicit tokens
-	// (theme-controlled, not derivable from base).
-	--color-accent-hover: hsl(from var(--color-accent) h s calc(l - 8));
-
-	// --btn-bg / --btn-fg read translucent companions via fallback.
-	// Default theme: companions unset → falls back to --color-accent
-	// / --color-accent-fg (solid + white). Glass theme: companions
-	// rebound at :root → translucent fill + accent-colored fg. The
-	// var() fallback resolves at the consumer (this button), so the
-	// .success/.error/.warning/.info cascade through --color-primary
-	// still works in both themes.
-	--btn-bg:           var(--color-accent-bg,       var(--color-accent));
-	--btn-fg:           var(--color-accent-bg-fg,    var(--color-accent-fg));
-	--btn-border:       var(--color-accent);
-	--btn-bg-hover:     var(--color-accent-bg-hover, var(--color-accent-hover));
-	--btn-fg-hover:     var(--color-accent-bg-fg,    var(--color-accent-fg));
-	--btn-border-hover: var(--color-accent-hover);
-}
-
-@mixin btn-sm {
-	--btn-padding-x: var(--size-sm-up);
-	--gap:           var(--size-xs);
-	gap: var(--gap);
-	@include text-xs;
-}
-
-@mixin btn-lg {
-	--btn-padding-x: var(--size-lg);
-	--btn-padding-y: var(--size-md);
-	--gap:           var(--size-sm-up);
-	gap: var(--gap);
-	@include text-base;
-}
-
-@mixin btn-group {
-	--gap: var(--size-xs);
-	@include inline-flex;
-	@include items-center;
-	gap: var(--gap);
-
-	button {
-		--btn-bg: transparent;
-		--btn-border: transparent;
-		color: var(--fg-subtle);
-	}
-}
-

package/scss/config/mixins/_confirm.scss

@@ -1,31 +0,0 @@
-@use 'spacing' as *;
-@use 'typography' as *;
-@use 'shadows' as *;
-@use 'tooltip' as *;
-
-// Confirm tooltip — visual tooltip for icon-only confirm buttons.
-//
-// Usage:
-//   .ln-confirm-tooltip { @include confirm-tooltip; }
-//
-// JS adds .ln-confirm-tooltip class and data-tooltip-text attribute
-// to icon-only buttons entering confirm state.
-
-@mixin confirm-tooltip {
-	position: relative;
-	overflow: visible !important;
-
-	// Confirm icon inherits this color
-	color: hsl(var(--color-error)) !important;
-
-	&::after {
-		@include tooltip-bubble;
-		content: attr(data-tooltip-text);
-		position: absolute;
-		bottom: 100%;
-		left: 50%;
-		transform: translateX(-50%);
-		--margin-block: var(--size-sm);
-		margin-bottom: var(--margin-block);
-	}
-}

package/scss/config/mixins/_dropdown.scss

@@ -1,141 +0,0 @@
-@use 'display' as *;
-@use 'spacing' as *;
-@use 'colors' as *;
-@use 'borders' as *;
-@use 'shadows' as *;
-@use 'typography' as *;
-@use 'sizing' as *;
-@use 'position' as *;
-@use 'interaction' as *;
-@use 'transitions' as *;
-@use 'motion' as *;
-@use 'card' as *;
-
-// Dropdown menu — floating panel with menu items.
-//
-// Usage:
-//   [data-ln-dropdown] { @include dropdown; }
-//   [data-ln-dropdown-menu] { @include dropdown-menu; }
-//
-// Open/close state (display:none ↔ display:block + .open) is JS-driven
-// and lives in the co-located JS SCSS, not here.
-
-@mixin dropdown {
-	@include relative;
-}
-
-// ─── Menu items — shared recipe ────────────────────────
-// The "list of interactive menu items" recipe, without container
-// chrome or positioning. Composes with any floating container
-// (dropdown, popover-with-menu, other future surfaces).
-//
-// Expected HTML:
-//   <ul>
-//     <li><a>…</a></li>
-//     <li><button>…</button></li>
-//     <li><button aria-current="true">Active item</button></li>
-//     <li><hr></li>
-//     <li><form><button type="submit">Logout</button></form></li>
-//   </ul>
-//
-// Selection state — `aria-current="true"` (boolean flavor) marks the
-// active item in single-select pickers (theme, language). NOT the
-// `="page"` / `="step"` flavors — those belong to breadcrumbs /
-// stepper and have their own styling in those mixins.
-
-@mixin menu-items {
-	// ─── Row resets ────────────────────────────────────
-	li {
-		margin: 0;
-		padding: 0;
-	}
-
-	form {
-		margin: 0;
-		padding: 0;
-		display: contents;
-	}
-
-	// ─── Interactive items ─────────────────────────────
-	a,
-	button,
-	input[type="submit"],
-	input[type="reset"],
-	input[type="button"] {
-		@include w-full;
-		@include flex;
-		@include items-center;
-		justify-content: flex-start;
-		gap: var(--gap);
-		@include text-left;
-		@include text-sm;
-		@include cursor-pointer;
-		@include transition-fast;
-		background: none;
-		border: none;
-		border-radius: 0;
-		color: var(--color-fg);
-		text-decoration: none;
-
-		&:hover:not(:disabled),
-		&:active:not(:disabled) {
-			--color-bg: var(--bg-sunken);
-			background: var(--color-bg);
-			color: var(--color-fg);
-		}
-
-		&:focus {
-			box-shadow: none;
-		}
-
-		// Active item — single-select selection state.
-		// Scoped to the boolean flavor so we don't collide with
-		// breadcrumbs (`="page"`) or stepper (`="step"`).
-		&[aria-current="true"] {
-			background: var(--color-accent-tint);
-			color: var(--color-accent);
-		}
-	}
-
-	a {
-		--padding-y: var(--size-xs);
-		--padding-x: var(--size-sm);
-		padding: var(--padding-y) var(--padding-x);
-	}
-
-	:is(button, input[type="submit"], input[type="reset"], input[type="button"]) {
-		--btn-padding-y: var(--size-xs);
-		--btn-padding-x: var(--size-sm);
-	}
-
-	// Inter-item divider — SOFT --border-block-start primitive read with
-	// `none` fallback. Default theme: no divider. Themes that opt in
-	// (Glass) rebind --border-block-start in scope.
-	li + li {
-		border-block-start: var(--border-block-start, none);
-	}
-
-	// ─── Separator ─────────────────────────────────────
-	hr {
-		border: none;
-		border-block-start: var(--border-block-start, var(--border-width) solid var(--color-border));
-		--margin-block: var(--size-xs);
-		margin-block: var(--margin-block);
-	}
-}
-
-// ─── Dropdown menu — floating panel + menu items ───────
-// Dropdown-specific chrome (anchor-positioned absolute panel) plus
-// the shared menu-items recipe.
-
-@mixin dropdown-menu {
-	@include floating-panel;
-	@include fixed;
-	inset: auto;
-	margin: 0;
-	--padding-y: var(--size-xs);
-	padding-block: var(--padding-y);
-	min-width: 10rem;
-
-	@include menu-items;
-}

package/scss/config/mixins/_popover.scss

@@ -1,64 +0,0 @@
-@use 'spacing' as *;
-@use 'borders' as *;
-@use 'motion' as *;
-@use 'card' as *;
-@use 'form' as *;
-@use 'focus' as *;
-
-@mixin popover {
-	@include floating-panel;
-	display: none;
-	position: fixed;
-	inset: auto;
-	margin: 0;
-	min-width: 14rem;
-	max-width: 24rem;
-	padding: var(--padding-y) var(--padding-x);
-
-	&[data-ln-popover="open"] {
-		display: block;
-
-		@include motion-safe {
-			animation: ln-popover-fade var(--transition-fast);
-		}
-	}
-
-	&:focus {
-		outline: none;
-	}
-
-	// Filter popover content: optional search + checkbox option list
-	> input[type="search"] {
-		width: 100%;
-		margin-bottom: var(--size-xs);
-		box-sizing: border-box;
-	}
-
-	> ul {
-		list-style: none;
-		padding: 0;
-		margin: 0;
-		max-height: var(--filter-options-max-height, 15rem);
-		overflow-y: auto;
-
-		// Nav-link treatment for filter options (accent-tint wash on checked).
-		// Visually-hidden input (below) keeps the checkbox keyboard-focusable.
-		@include check-list-nav;
-
-		> li > label > input {
-			// Override pill's display:none — keep in focus order for keyboard nav
-			display: revert;
-			position: absolute;
-			width: 1px;
-			height: 1px;
-			overflow: hidden;
-			clip-path: inset(50%);
-			white-space: nowrap;
-		}
-
-		// Focus ring on label when the hidden input receives keyboard focus
-		> li > label:has(> input:focus-visible) {
-			@include focus-ring;
-		}
-	}
-}