@lumiose/ui 0.0.0-stage → 0.1.0

package/dist/themes/default.css

@@ -0,0 +1,2111 @@
+/*
+ * @lumiose/ui's default theme (decision-62): opt-in, for demos, getting started and the docs. It
+ * styles the classes below, which you put on the parts through their `class` prop, and nothing
+ * else. Every colour, radius and ring comes from a `--lu-` custom property named as in shadcn/ui,
+ * with light and dark values that follow the page's `color-scheme`. All of it sits in the
+ * `lu.theme` layer, above `lu.core`: any app CSS outside layers wins, so set a property on `:root`
+ * (or any subtree) to restyle everything.
+ *
+ * WCAG 2.2 AA (decision-62, doc-9 section 17), light / dark: every `-foreground` reaches 4.5:1 on
+ * its surface, muted text included (5.1 / 5.8 on --lu-muted, 5.6 / 6.9 on --lu-popover); field
+ * and control borders (--lu-input) and the focus ring 3:1 on the surfaces they sit on (3.3 / 3.1
+ * on --lu-muted; ring 5.2 / 7.0). --lu-border is for decoration only: it is not enough to outline
+ * a control. The ratios per pair are in TASK-392.
+ *
+ *   .lu-button                          a button; data-variant="primary" | "destructive"
+ *   .lu-dialog                          a Dialog.Popup: surface, backdrop, title (h2),
+ *                                       description (p), footer
+ *   .lu-popover                         a Popover.Popup: surface, title (h2), description (p),
+ *                                       footer, a 4px gap to the trigger
+ *   .lu-tooltip                         a Tooltip.Popup: inverted colours, a 6px gap
+ *   .lu-tabs                            a Tabs.Root: the list, its tabs (the selected one
+ *                                       underlined, by a sliding Tabs.Indicator when there is one)
+ *                                       and the panels
+ *   .lu-menu                            a Menu.Popup (submenus too): surface, items, checkbox
+ *                                       and radio marks, separators, group labels
+ *   .lu-combobox                        a Combobox.Root: the field (label, chips, input, trigger
+ *                                       and clear buttons), the popup, options, groups, states
+ *   .lu-field                           a Field.Root: label, description and errors in a column
+ *   .lu-input                           an Input (Field.Control): a text field
+ *   .lu-fieldset                        a Fieldset.Root, CheckboxGroup or RadioGroup: legend
+ *                                       and items in a column
+ *   .lu-checkbox, .lu-radio             a Checkbox.Root, a Radio.Root: box, mark, 24px target
+ *   .lu-switch                          a Switch.Root: track and thumb
+ *   .lu-select                          a Select.Root: a customizable select (control, picker,
+ *                                       options, groups, separators)
+ *   .lu-collapsible                     a Collapsible.Root: the trigger (a chevron) and the
+ *                                       panel, its height animated
+ *   .lu-accordion                       an Accordion.Root: items between borders, their triggers
+ *                                       and panels, as for Collapsible
+ *   .lu-toast-viewport                  a Toast.Viewport: a column at the bottom end
+ *   .lu-toast                           a Toast.Root: surface, title (h2), description (p), the
+ *                                       close button (Toast.Close); data-type="error"
+ *   .lu-toggle                          a Toggle: a button with a pressed surface and bar
+ *   .lu-toggle-group                    a ToggleGroup: its toggles in a row (or a column)
+ *   .lu-progress, .lu-meter             a Progress.Root, a Meter.Root: label, value and bar
+ *   .lu-slider                          a Slider.Root: label, value, track, indicator, thumbs
+ *   .lu-drawer                          a Drawer.Popup: a surface against its edge (a handle on
+ *                                       a bottom sheet), title, description, footer; slides
+ *   .lu-separator                       a Separator: a 1px line, horizontal or vertical
+ *   .lu-avatar                          an Avatar.Root: a 40px circle, the image covering it,
+ *                                       the fallback's initials centred on a muted surface
+ *   .lu-menubar                         a Menubar: a bordered bar of its menus' triggers (the
+ *                                       open one filled); `lu-menu` on each Menu.Popup
+ *   .lu-navigation-menu                 a NavigationMenu.Root: its list in a row (a column when
+ *                                       vertical), triggers and links, the current page
+ *                                       underlined, contents as surfaces of links that slide in
+ *   .lu-number-field                    a NumberField.Root: label, one bordered group with the
+ *                                       input between its buttons
+ *   .lu-otp-field                       an OTPField.Root: a box per character, the caret's box
+ *                                       ringed while focused, a dash for a separator
+ *   .lu-preview-card                    a PreviewCard.Popup: a surface like a popover's, with a fade
+ *   .lu-toolbar                         a Toolbar.Root: a bordered row (or column) of its items,
+ *                                       separators across it
+ *   .lu-scroll-area                     a ScrollArea.Root: a bordered box, 10px scrollbars that
+ *                                       show while hovered, scrolled or focused
+ */
+@layer lu.core, lu.theme;
+
+@layer lu.theme {
+  :root {
+    color-scheme: light dark;
+    --lu-background: light-dark(#fff, #09090b);
+    --lu-foreground: light-dark(#09090b, #fafafa);
+    --lu-card: light-dark(#fff, #18181b);
+    --lu-card-foreground: light-dark(#09090b, #fafafa);
+    --lu-popover: light-dark(#fff, #18181b);
+    --lu-popover-foreground: light-dark(#09090b, #fafafa);
+    --lu-primary: #2563eb;
+    --lu-primary-foreground: #fff;
+    --lu-secondary: light-dark(#f4f4f5, #27272a);
+    --lu-secondary-foreground: light-dark(#18181b, #fafafa);
+    --lu-muted: light-dark(#f4f4f5, #27272a);
+    --lu-muted-foreground: light-dark(#67676f, #a1a1aa);
+    --lu-accent: light-dark(#f4f4f5, #27272a);
+    --lu-accent-foreground: light-dark(#18181b, #fafafa);
+    --lu-destructive: #dc2626;
+    --lu-destructive-foreground: #fff;
+    --lu-border: light-dark(#e4e4e7, #3f3f46);
+    --lu-input: light-dark(#85858e, #71717a);
+    --lu-ring: light-dark(#2563eb, #60a5fa);
+    --lu-radius: 0.625rem;
+  }
+
+  /* Button ------------------------------------------------------------------------------------ */
+
+  .lu-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-block-size: 2.25rem;
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--lu-input);
+    border-radius: calc(var(--lu-radius) - 2px);
+    background: var(--lu-background);
+    color: var(--lu-foreground);
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25;
+    cursor: pointer;
+  }
+  .lu-button:hover {
+    background: var(--lu-accent);
+    color: var(--lu-accent-foreground);
+  }
+  .lu-button:focus-visible {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: 2px;
+  }
+  .lu-button:disabled,
+  .lu-button[aria-disabled="true"] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  /* An `aria-disabled` button still takes focus: its ring keeps full contrast (WCAG 1.4.11). */
+  .lu-button[aria-disabled="true"]:focus-visible {
+    opacity: 1;
+  }
+  .lu-button[data-variant="primary"] {
+    border-color: transparent;
+    background: var(--lu-primary);
+    color: var(--lu-primary-foreground);
+  }
+  .lu-button[data-variant="destructive"] {
+    border-color: transparent;
+    background: var(--lu-destructive);
+    color: var(--lu-destructive-foreground);
+  }
+  .lu-button[data-variant]:hover {
+    background-image: linear-gradient(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.1));
+  }
+
+  /* Dialog ------------------------------------------------------------------------------------ */
+
+  .lu-dialog {
+    box-sizing: border-box;
+    inline-size: min(32rem, 100vw - 2rem);
+    max-block-size: calc(100dvh - 2rem);
+    padding: 1.5rem;
+    border: 1px solid var(--lu-border);
+    border-radius: var(--lu-radius);
+    background: var(--lu-popover);
+    color: var(--lu-popover-foreground);
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+  }
+  .lu-dialog::backdrop {
+    background: rgb(0 0 0 / 0.5);
+  }
+  .lu-dialog :where(h2) {
+    margin: 0 0 0.5rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+    line-height: 1.3;
+  }
+  .lu-dialog :where(p) {
+    margin: 0 0 1.5rem;
+    color: var(--lu-muted-foreground);
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+  .lu-dialog :where(footer) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    gap: 0.5rem;
+  }
+
+  /*
+   * Fade and zoom in and out. `overlay` keeps the dialog in the top layer while it fades out, in
+   * Chromium only: elsewhere it leaves at once.
+   */
+  @media (prefers-reduced-motion: no-preference) {
+    .lu-dialog,
+    .lu-dialog::backdrop {
+      transition:
+        opacity 150ms ease-out,
+        scale 150ms ease-out,
+        overlay 150ms allow-discrete,
+        display 150ms allow-discrete;
+    }
+    .lu-dialog:not([open]),
+    .lu-dialog:not([open])::backdrop {
+      opacity: 0;
+    }
+    .lu-dialog:not([open]) {
+      scale: 0.96;
+    }
+    @starting-style {
+      .lu-dialog[open],
+      .lu-dialog[open]::backdrop {
+        opacity: 0;
+      }
+      .lu-dialog[open] {
+        scale: 0.96;
+      }
+    }
+  }
+
+  /* Popover ----------------------------------------------------------------------------------- */
+
+  .lu-popover {
+    --lu-side-offset: 4px;
+    box-sizing: border-box;
+    inline-size: max-content;
+    max-inline-size: min(20rem, 100vw - 1rem);
+    padding: 1rem;
+    border: 1px solid var(--lu-border);
+    border-radius: var(--lu-radius);
+    background: var(--lu-popover);
+    color: var(--lu-popover-foreground);
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+  }
+  .lu-popover :where(h2) {
+    margin: 0 0 0.25rem;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.3;
+  }
+  .lu-popover :where(p) {
+    margin: 0;
+    color: var(--lu-muted-foreground);
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+  .lu-popover :where(footer) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    gap: 0.5rem;
+    margin-block-start: 1rem;
+  }
+
+  /* Tooltip ----------------------------------------------------------------------------------- */
+
+  .lu-tooltip {
+    --lu-side-offset: 6px;
+    box-sizing: border-box;
+    max-inline-size: min(18rem, 100vw - 1rem);
+    padding: 0.375rem 0.625rem;
+    border: 0;
+    border-radius: calc(var(--lu-radius) - 4px);
+    background: var(--lu-foreground);
+    color: var(--lu-background);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
+
+  /* Fade in and out; `overlay` keeps them in the top layer while they fade out, in Chromium only. */
+  @media (prefers-reduced-motion: no-preference) {
+    .lu-popover,
+    .lu-tooltip {
+      transition:
+        opacity 120ms ease-out,
+        scale 120ms ease-out,
+        overlay 120ms allow-discrete,
+        display 120ms allow-discrete;
+    }
+    /* A modal popover is an open <dialog>, not an open popover (TASK-394). */
+    .lu-popover:not(:popover-open, [open]),
+    .lu-tooltip:not(:popover-open) {
+      opacity: 0;
+      scale: 0.96;
+    }
+    @starting-style {
+      .lu-popover:is(:popover-open, [open]),
+      .lu-tooltip:popover-open {
+        opacity: 0;
+        scale: 0.96;
+      }
+    }
+  }
+
+  /* Tabs -------------------------------------------------------------------------------------- */
+
+  /*
+   * The selected tab is marked by a 2px bar in the foreground colour (19:1, against 3:1 for
+   * WCAG 1.4.11) and by its text colour, not by colour alone.
+   */
+  .lu-tabs [role="tablist"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    border-block-end: 1px solid var(--lu-border);
+  }
+  .lu-tabs [role="tablist"][aria-orientation="vertical"] {
+    flex-direction: column;
+    border-block-end: 0;
+    border-inline-end: 1px solid var(--lu-border);
+  }
+  .lu-tabs [role="tab"] {
+    min-block-size: 2.25rem;
+    padding: 0.5rem 0.875rem;
+    border: 0;
+    border-radius: calc(var(--lu-radius) - 4px) calc(var(--lu-radius) - 4px) 0 0;
+    background: transparent;
+    color: var(--lu-muted-foreground);
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25;
+    cursor: pointer;
+  }
+  .lu-tabs [role="tab"]:hover {
+    color: var(--lu-foreground);
+  }
+  .lu-tabs [role="tab"][aria-selected="true"] {
+    color: var(--lu-foreground);
+    box-shadow: inset 0 -2px var(--lu-foreground);
+  }
+  /*
+   * Logical sides, so a vertical list mirrors right to left without `:dir()` (which Lightning CSS
+   * lowers to `:lang()`s that miss a `dir` attribute, TASK-385).
+   */
+  .lu-tabs [aria-orientation="vertical"] [role="tab"] {
+    border-radius: 0;
+    border-start-start-radius: calc(var(--lu-radius) - 4px);
+    border-end-start-radius: calc(var(--lu-radius) - 4px);
+    border-inline-end: 2px solid transparent;
+    text-align: start;
+  }
+  .lu-tabs [aria-orientation="vertical"] [role="tab"][aria-selected="true"] {
+    border-inline-end-color: var(--lu-foreground);
+    box-shadow: none;
+  }
+  /*
+   * A Tabs.Indicator (TASK-395) draws the same bar over the selected tab's from the server HTML
+   * on; once the script runs, the tab's own bar goes and the indicator slides to the next tab.
+   */
+  .lu-tabs [data-indicator] {
+    border-block-end: 2px solid var(--lu-foreground);
+  }
+  .lu-tabs [aria-orientation="vertical"] > [data-indicator] {
+    border-block-end: 0;
+    border-inline-end: 2px solid var(--lu-foreground);
+  }
+  .lu-tabs:defined [role="tablist"]:has(> [data-indicator]) [role="tab"][aria-selected="true"] {
+    border-inline-end-color: transparent;
+    box-shadow: none;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .lu-tabs [data-indicator] {
+      transition:
+        left 0.2s ease,
+        top 0.2s ease,
+        width 0.2s ease,
+        height 0.2s ease;
+    }
+  }
+  /* Dimmed by its text, not `opacity`, which would dim its focus ring too (disabled tabs take focus). */
+  .lu-tabs [role="tab"][aria-disabled="true"] {
+    color: color-mix(in srgb, var(--lu-muted-foreground) 55%, transparent);
+    cursor: not-allowed;
+  }
+  .lu-tabs [role="tab"]:focus-visible,
+  .lu-tabs [role="tabpanel"]:focus-visible {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: 2px;
+  }
+  .lu-tabs [role="tabpanel"] {
+    padding-block: 1rem;
+    border-radius: calc(var(--lu-radius) - 4px);
+  }
+
+  /* Menu (TASK-357) --------------------------------------------------------------------------- */
+
+  .lu-menu {
+    box-sizing: border-box;
+    min-inline-size: 8rem;
+    max-block-size: min(24rem, var(--lu-available-height, 100dvh - 1rem));
+    overflow-y: auto;
+    padding: 0.25rem;
+    border: 1px solid var(--lu-border);
+    border-radius: calc(var(--lu-radius) - 2px);
+    background: var(--lu-popover);
+    color: var(--lu-popover-foreground);
+    font-size: 0.875rem;
+    line-height: 1.25;
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --lu-side-offset: 0.25rem;
+  }
+  /* A submenu's first item lines up with its trigger. */
+  .lu-menu[data-side^="inline-"],
+  .lu-menu[data-side="left"],
+  .lu-menu[data-side="right"] {
+    --lu-side-offset: 0.125rem;
+    --lu-align-offset: calc(-0.25rem - 1px);
+  }
+  .lu-menu :where([role^="menuitem"]) {
+    box-sizing: border-box;
+    gap: 0.5rem;
+    min-block-size: 2rem;
+    padding: 0.375rem 0.5rem;
+    border: 0;
+    border-radius: calc(var(--lu-radius) - 4px);
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    text-decoration: none;
+    cursor: default;
+  }
+  .lu-menu :where([role^="menuitem"][data-highlighted], [aria-expanded="true"]) {
+    background: var(--lu-accent);
+    color: var(--lu-accent-foreground);
+  }
+  .lu-menu :where([role^="menuitem"]:focus-visible) {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: -2px;
+  }
+  /* Dimmed by its text, not `opacity`, which would fade its focus ring to 2:1 (TASK-455, L34). */
+  .lu-menu :where([role^="menuitem"][aria-disabled="true"]) {
+    color: color-mix(in srgb, var(--lu-muted-foreground) 55%, transparent);
+  }
+  /* Checkbox and radio marks: a symbol, not only a colour; empty alt text keeps them out of the name. */
+  .lu-menu :where([role="menuitemcheckbox"], [role="menuitemradio"])::before {
+    content: "";
+    flex: none;
+    inline-size: 1rem;
+    text-align: center;
+  }
+  .lu-menu :where([role="menuitemcheckbox"][aria-checked="true"])::before {
+    content: "✓" / "";
+  }
+  .lu-menu :where([role="menuitemradio"][aria-checked="true"])::before {
+    content: "●" / "";
+    font-size: 0.5rem;
+  }
+  .lu-menu :where([role="menuitem"][aria-haspopup="menu"])::after {
+    content: "›" / "";
+    margin-inline-start: auto;
+    padding-inline-start: 1rem;
+  }
+  /* Not `:dir(rtl)`: Lightning CSS lowers it to `:lang()`s, which miss a `dir` attribute. */
+  :where([dir="rtl"]) .lu-menu :where([role="menuitem"][aria-haspopup="menu"])::after {
+    content: "‹" / "";
+  }
+  :where([dir="rtl"])
+    :where([dir="ltr"])
+    .lu-menu
+    :where([role="menuitem"][aria-haspopup="menu"])::after {
+    content: "›" / "";
+  }
+  .lu-menu :where([role="separator"]) {
+    block-size: 1px;
+    margin: 0.25rem -0.25rem;
+    background: var(--lu-border);
+  }
+  .lu-menu :where([role="group"] > [role="presentation"]) {
+    padding: 0.375rem 0.5rem;
+    color: var(--lu-muted-foreground);
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+
+  /* Fade and zoom in and out; `overlay` keeps the menu in the top layer while it fades (Chromium). */
+  @media (prefers-reduced-motion: no-preference) {
+    .lu-menu {
+      transition:
+        opacity 100ms ease-out,
+        scale 100ms ease-out,
+        overlay 100ms allow-discrete,
+        display 100ms allow-discrete;
+    }
+    .lu-menu:not(:popover-open) {
+      opacity: 0;
+      scale: 0.96;
+    }
+    @starting-style {
+      .lu-menu:popover-open {
+        opacity: 0;
+        scale: 0.96;
+      }
+    }
+  }
+
+  /* Combobox (TASK-358) ----------------------------------------------------------------------- */
+
+  /*
+   * The root becomes the field's grid: the label, the chips, then the input with the trigger and
+   * clear buttons laid over its inline end.
+   */
+  .lu-combobox {
+    display: inline-grid;
+    grid-template-areas: "label label label" "chips chips chips" "field field field";
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    align-items: center;
+    inline-size: min(18rem, 100%);
+    font-size: 0.875rem;
+    line-height: 1.25;
+  }
+  .lu-combobox > :where(label) {
+    grid-area: label;
+    margin-block-end: 0.375rem;
+    font-weight: 500;
+  }
+  .lu-combobox > :where(input[role="combobox"]) {
+    grid-area: field;
+    box-sizing: border-box;
+    min-inline-size: 0;
+    min-block-size: 2.25rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--lu-input);
+    border-radius: calc(var(--lu-radius) - 2px);
+    background: var(--lu-background);
+    color: var(--lu-foreground);
+    font: inherit;
+  }
+  .lu-combobox:has(> [command="--toggle"]) > :where(input[role="combobox"]) {
+    padding-inline-end: 2.25rem;
+  }
+  .lu-combobox:has(> [command="--toggle"]):has(> [command="--clear"]:not([hidden]))
+    > :where(input[role="combobox"]) {
+    padding-inline-end: 4rem;
+  }
+  .lu-combobox > :where(input[role="combobox"])::placeholder {
+    color: var(--lu-muted-foreground);
+  }
+  .lu-combobox > :where(input[role="combobox"]:focus-visible) {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: 2px;
+  }
+  .lu-combobox > :where(input[role="combobox"]:disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  /* The trigger and clear buttons: 28px targets inside the field; a glyph when they are empty. */
+  .lu-combobox > :where(button[command]) {
+    grid-row: field;
+    z-index: 1;
+    display: inline-grid;
+    place-items: center;
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    margin-inline-end: 0.25rem;
+    padding: 0;
+    border: 0;
+    border-radius: calc(var(--lu-radius) - 4px);
+    background: none;
+    color: var(--lu-muted-foreground);
+    font: inherit;
+    cursor: default;
+  }
+  .lu-combobox > :where(button[command="--toggle"]) {
+    grid-column: 3;
+  }
+  .lu-combobox > :where(button[command="--clear"]) {
+    grid-column: 2;
+  }
+  .lu-combobox > :where(button[command]:hover) {
+    background: var(--lu-accent);
+    color: var(--lu-accent-foreground);
+  }
+  .lu-combobox > :where(button[command="--toggle"]:empty)::before {
+    content: "⌄" / "";
+    translate: 0 -0.2em;
+  }
+  .lu-combobox > :where(button[command="--clear"]:empty)::before {
+    content: "×" / "";
+    font-size: 1.125rem;
+  }
+  .lu-combobox > :where([role="list"]) {
+    grid-area: chips;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    margin-block-end: 0.375rem;
+  }
+  .lu-combobox > :where([role="list"]:empty) {
+    display: none;
+  }
+  .lu-combobox :where([role="listitem"]) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.125rem;
+    padding-inline-start: 0.5rem;
+    border-radius: calc(var(--lu-radius) - 4px);
+    background: var(--lu-secondary);
+    color: var(--lu-secondary-foreground);
+    font-size: 0.8125rem;
+  }
+  .lu-combobox :where([role="listitem"] > button) {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    padding: 0;
+    border: 0;
+    border-radius: inherit;
+    background: none;
+    color: inherit;
+    font: inherit;
+  }
+  .lu-combobox :where([role="listitem"] > button:hover) {
+    background: var(--lu-accent);
+  }
+  /* A chip the arrow keys reach (TASK-461). */
+  .lu-combobox :where([role="listitem"]:focus-visible) {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: 1px;
+  }
+  /* The popup: the List, or the Popup around it; the list scrolls. */
+  .lu-combobox :where([popover]) {
+    --lu-side-offset: 0.25rem;
+    box-sizing: border-box;
+    min-inline-size: 12rem;
+    padding: 0.25rem;
+    border: 1px solid var(--lu-border);
+    border-radius: calc(var(--lu-radius) - 2px);
+    background: var(--lu-popover);
+    color: var(--lu-popover-foreground);
+    font-size: 0.875rem;
+    line-height: 1.25;
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+  }
+  @supports (anchor-name: --a) {
+    .lu-combobox :where([popover]) {
+      min-inline-size: anchor-size(inline);
+    }
+  }
+  .lu-combobox :where([role="listbox"]) {
+    max-block-size: min(20rem, var(--lu-available-height, 100dvh - 1rem));
+    overflow-y: auto;
+  }
+  .lu-combobox :where([role="option"]) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-block-size: 2rem;
+    padding: 0.375rem 0.5rem;
+    border-radius: calc(var(--lu-radius) - 4px);
+    cursor: default;
+  }
+  /* The highlighted option has no focus of its own: it gets the focus ring the input passes on. */
+  .lu-combobox :where([role="option"][data-highlighted]) {
+    background: var(--lu-accent);
+    color: var(--lu-accent-foreground);
+    outline: 2px solid var(--lu-ring);
+    outline-offset: -2px;
+  }
+  .lu-combobox :where([role="option"][aria-disabled="true"]) {
+    opacity: 0.5;
+  }
+  /* A mark, not only a colour, for the selected options; empty alt text keeps it out of the name. */
+  .lu-combobox :where([role="option"])::before {
+    content: "";
+    flex: none;
+    inline-size: 1rem;
+    text-align: center;
+  }
+  .lu-combobox :where([role="option"][aria-selected="true"])::before {
+    content: "✓" / "";
+  }
+  .lu-combobox :where([role="group"] > [role="presentation"]) {
+    padding: 0.375rem 0.5rem;
+    color: var(--lu-muted-foreground);
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+  .lu-combobox :where([popover] [role="status"]) {
+    padding: 0.5rem;
+    color: var(--lu-muted-foreground);
+    text-align: center;
+  }
+  .lu-combobox :where([popover] [role="status"]:empty) {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .lu-combobox :where([popover]) {
+      transition:
+        opacity 100ms ease-out,
+        overlay 100ms allow-discrete,
+        display 100ms allow-discrete;
+    }
+    .lu-combobox :where([popover]:not(:popover-open)) {
+      opacity: 0;
+    }
+    @starting-style {
+      .lu-combobox :where([popover]:popover-open) {
+        opacity: 0;
+      }
+    }
+  }
+
+  /* Select (TASK-358) ------------------------------------------------------------------------- */
+
+  /* A customizable select where the browser has it; elsewhere the closed control is styled. */
+  .lu-select,
+  .lu-select::picker(select) {
+    appearance: base-select;
+  }
+  .lu-select {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-inline-size: 10rem;
+    min-block-size: 2.25rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--lu-input);
+    border-radius: calc(var(--lu-radius) - 2px);
+    background: var(--lu-background);
+    color: var(--lu-foreground);
+    font: inherit;
+    font-size: 0.875rem;
+    line-height: 1.25;
+  }
+  .lu-select:focus-visible {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: 2px;
+  }
+  .lu-select:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  /* With a Select.Trigger, the button is the whole control: it takes the padding and the target. */
+  .lu-select:has(> button) {
+    padding: 0;
+  }
+  .lu-select > :where(button) {
+    display: inline-flex;
+    flex: 1;
+    align-items: center;
+    gap: 0.5rem;
+    box-sizing: border-box;
+    min-block-size: calc(2.25rem - 2px);
+    padding: 0.5rem 0.75rem;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+  }
+  .lu-select::picker-icon {
+    margin-inline-start: auto;
+    color: var(--lu-muted-foreground);
+  }
+  .lu-select:has(> button)::picker-icon {
+    margin-inline-end: 0.75rem;
+  }
+  .lu-select::picker(select) {
+    box-sizing: border-box;
+    min-inline-size: anchor-size(inline);
+    max-block-size: min(20rem, 100dvh - 1rem);
+    margin-block: 0.25rem;
+    padding: 0.25rem;
+    border: 1px solid var(--lu-border);
+    border-radius: calc(var(--lu-radius) - 2px);
+    background: var(--lu-popover);
+    color: var(--lu-popover-foreground);
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+  }
+  .lu-select :where(option) {
+    gap: 0.5rem;
+    min-block-size: 2rem;
+    padding: 0.375rem 0.5rem;
+    border-radius: calc(var(--lu-radius) - 4px);
+  }
+  .lu-select :where(option:hover, option:focus-visible) {
+    background: var(--lu-accent);
+    color: var(--lu-accent-foreground);
+  }
+  .lu-select :where(option:focus-visible) {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: -2px;
+  }
+  .lu-select :where(option:disabled) {
+    opacity: 0.5;
+  }
+  .lu-select :where(optgroup) {
+    color: var(--lu-muted-foreground);
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+  .lu-select :where(optgroup option) {
+    color: var(--lu-popover-foreground);
+    font-size: 0.875rem;
+    font-weight: 400;
+  }
+  .lu-select :where(hr) {
+    margin: 0.25rem -0.25rem;
+    border: 0;
+    border-block-start: 1px solid var(--lu-border);
+  }
+
+  /* Field, Fieldset and Input (TASK-365) ------------------------------------------------------ */
+
+  .lu-field {
+    display: grid;
+    gap: 0.375rem;
+    font-size: 0.875rem;
+    line-height: 1.25;
+  }
+  .lu-field > :where(label) {
+    font-weight: 500;
+  }
+  .lu-field > :where(p) {
+    margin: 0;
+    color: var(--lu-muted-foreground);
+    font-size: 0.8125rem;
+  }
+  /* Errors: the destructive red where it reaches 4.5:1 on the page, a lighter red in dark. */
+  .lu-field > :where(output) {
+    color: light-dark(var(--lu-destructive), #f87171);
+    font-size: 0.8125rem;
+  }
+  .lu-input {
+    box-sizing: border-box;
+    min-block-size: 2.25rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--lu-input);
+    border-radius: calc(var(--lu-radius) - 2px);
+    background: var(--lu-background);
+    color: var(--lu-foreground);
+    font: inherit;
+    font-size: 0.875rem;
+  }
+  .lu-input::placeholder {
+    color: var(--lu-muted-foreground);
+  }
+  .lu-input:focus-visible {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: 2px;
+  }
+  .lu-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .lu-input[aria-invalid="true"] {
+    border-color: light-dark(var(--lu-destructive), #f87171);
+  }
+  .lu-fieldset {
+    display: grid;
+    gap: 0.75rem;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 0.875rem;
+  }
+  .lu-fieldset > :where(legend) {
+    margin-block-end: 0.25rem;
+    padding: 0;
+    font-weight: 600;
+  }
+  .lu-fieldset > :where(label) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  /* Checkbox, Radio and Switch (TASK-366 to TASK-368) ----------------------------------------- */
+
+  /*
+   * A 24px target (WCAG 2.5.8) around an 18px box drawn by `::before`; the mark is a symbol and a
+   * shape, not only a colour (1.4.1). The box's border is --lu-input (3:1, 1.4.11).
+   */
+  .lu-checkbox,
+  .lu-radio {
+    appearance: none;
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    margin: 0;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+  .lu-checkbox::before,
+  .lu-radio::before {
+    content: "";
+    box-sizing: border-box;
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+    border: 1px solid var(--lu-input);
+    border-radius: calc(var(--lu-radius) - 6px);
+    background: var(--lu-background);
+    color: var(--lu-primary-foreground);
+    font-size: 0.75rem;
+    font-weight: 700;
+    line-height: calc(1.125rem - 2px);
+    text-align: center;
+  }
+  .lu-radio::before {
+    border-radius: 50%;
+  }
+  .lu-checkbox:is(:checked, :indeterminate, [data-indeterminate])::before {
+    border-color: var(--lu-primary);
+    background: var(--lu-primary);
+  }
+  .lu-checkbox:checked::before {
+    content: "✓" / "";
+  }
+  .lu-checkbox:is(:indeterminate, [data-indeterminate])::before {
+    content: "–" / "";
+  }
+  .lu-radio:checked::before {
+    border: 0.3125rem solid var(--lu-primary);
+  }
+  .lu-switch {
+    appearance: none;
+    display: inline-block;
+    flex: none;
+    position: relative;
+    box-sizing: border-box;
+    inline-size: 2.5rem;
+    block-size: 1.5rem;
+    margin: 0;
+    border: 1px solid var(--lu-input);
+    border-radius: 999px;
+    background: var(--lu-input);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+  /* The thumb's side tells on from off, not only the track's colour. */
+  .lu-switch::before {
+    content: "";
+    position: absolute;
+    inset-block: 1px;
+    inset-inline-start: 1px;
+    inline-size: calc(1.5rem - 4px);
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
+  }
+  .lu-switch:checked {
+    border-color: var(--lu-primary);
+    background: var(--lu-primary);
+  }
+  .lu-switch:checked::before {
+    inset-inline-start: calc(100% - 1.5rem + 3px);
+  }
+  :is(.lu-checkbox, .lu-radio, .lu-switch):focus-visible {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: 2px;
+  }
+  :is(.lu-checkbox, .lu-radio):focus-visible {
+    outline-offset: -1px;
+    border-radius: calc(var(--lu-radius) - 4px);
+  }
+  :is(.lu-checkbox, .lu-radio, .lu-switch):disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  :is(.lu-checkbox, .lu-radio)[aria-invalid="true"]::before,
+  .lu-switch[aria-invalid="true"] {
+    border-color: light-dark(var(--lu-destructive), #f87171);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .lu-switch,
+    .lu-switch::before {
+      transition:
+        background-color 120ms ease-out,
+        inset-inline-start 120ms ease-out;
+    }
+  }
+
+  /* Collapsible and Accordion (TASK-370) ------------------------------------------------------ */
+
+  /*
+   * The trigger: a row with a chevron that turns while the panel is open (a shape, not only a
+   * colour), a 36px target. The panel's height animates between 0 and the size the client script
+   * measures (--lu-collapsible-panel-height, --lu-accordion-panel-height), and `::details-content` stays
+   * visible while it closes. Spacers inside the panel keep its content's focus rings clear of the
+   * clipping the animation needs.
+   */
+  :is(.lu-collapsible, .lu-accordion > details) > summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    min-block-size: 2.25rem;
+    padding: 0.5rem 0.25rem;
+    border-radius: calc(var(--lu-radius) - 4px);
+    color: var(--lu-foreground);
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25;
+    list-style: none;
+    cursor: pointer;
+  }
+  :is(.lu-collapsible, .lu-accordion > details) > summary::-webkit-details-marker {
+    display: none;
+  }
+  :is(.lu-collapsible, .lu-accordion > details) > summary::after {
+    content: "";
+    flex: none;
+    inline-size: 0.4375rem;
+    block-size: 0.4375rem;
+    /* Physical sides: rotated, they draw a down chevron in either direction (TASK-385). */
+    border-bottom: 1.5px solid currentColor;
+    border-right: 1.5px solid currentColor;
+    rotate: 45deg;
+    translate: 0 -25%;
+  }
+  :is(.lu-collapsible, .lu-accordion > details)[open] > summary::after {
+    rotate: 225deg;
+    translate: 0 25%;
+  }
+  :is(.lu-collapsible, .lu-accordion > details) > summary:hover {
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+  :is(.lu-collapsible, .lu-accordion > details) > summary:focus-visible {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: 2px;
+  }
+  :is(.lu-collapsible, .lu-accordion > details) > summary[aria-disabled="true"] {
+    color: color-mix(in srgb, var(--lu-muted-foreground) 55%, transparent);
+  }
+  .lu-accordion > details > summary > :is(h1, h2, h3, h4, h5, h6) {
+    margin: 0;
+    font: inherit;
+  }
+  .lu-accordion > details {
+    border-block-end: 1px solid var(--lu-border);
+  }
+  :is(.lu-collapsible, .lu-accordion > details) > :not(summary) {
+    overflow: hidden;
+    padding-inline: 0.25rem;
+    color: var(--lu-muted-foreground);
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+  :is(.lu-collapsible, .lu-accordion > details) > :not(summary)::before,
+  :is(.lu-collapsible, .lu-accordion > details) > :not(summary)::after {
+    content: "";
+    display: block;
+    block-size: 0.25rem;
+  }
+  :is(.lu-collapsible, .lu-accordion > details) > :not(summary)::after {
+    block-size: 0.75rem;
+  }
+  .lu-collapsible > :not(summary) {
+    block-size: var(--lu-collapsible-panel-height, auto);
+  }
+  .lu-accordion > details > :not(summary) {
+    block-size: var(--lu-accordion-panel-height, auto);
+  }
+  :is(.lu-collapsible, .lu-accordion > details) > :is([data-starting-style], [data-ending-style]) {
+    block-size: 0;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    :is(.lu-collapsible, .lu-accordion > details)::details-content {
+      transition: content-visibility 200ms allow-discrete;
+    }
+    :is(.lu-collapsible, .lu-accordion > details) > :not(summary) {
+      transition: block-size 200ms ease-out;
+    }
+    :is(.lu-collapsible, .lu-accordion > details) > summary::after {
+      transition:
+        rotate 200ms ease-out,
+        translate 200ms ease-out;
+    }
+  }
+
+  /* Toast (TASK-371) -------------------------------------------------------------------------- */
+
+  /*
+   * The viewport: a column at the window's bottom end, the newest toast nearest the corner. A toast:
+   * a popover surface with its title, description and buttons, the close button a 28px target. It
+   * slides in, fades out, follows a swipe and leaves in its direction. An error toast has a red
+   * edge besides its text.
+   */
+  .lu-toast-viewport {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 0.5rem;
+    inline-size: min(24rem, 100vw);
+    padding: 1rem;
+    border-radius: var(--lu-radius);
+  }
+  .lu-toast-viewport:focus-visible {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: -2px;
+  }
+  .lu-toast {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: start;
+    gap: 0.25rem 0.75rem;
+    padding: 0.875rem 0.75rem 0.875rem 1rem;
+    border: 1px solid var(--lu-border);
+    border-radius: var(--lu-radius);
+    background: var(--lu-popover);
+    color: var(--lu-popover-foreground);
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+    font-size: 0.875rem;
+    line-height: 1.4;
+    translate: var(--lu-toast-swipe-movement-x, 0) var(--lu-toast-swipe-movement-y, 0);
+  }
+  .lu-toast > * {
+    grid-column: 1;
+  }
+  .lu-toast :where(h2) {
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+  .lu-toast :where(p) {
+    margin: 0;
+    color: var(--lu-muted-foreground);
+  }
+  .lu-toast :where(.lu-button) {
+    justify-self: start;
+    margin-block-start: 0.5rem;
+  }
+  .lu-toast > [command="--close-toast"] {
+    grid-column: 2;
+    grid-row: 1;
+    display: inline-grid;
+    place-items: center;
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    margin-block: -0.25rem;
+    padding: 0;
+    border: 0;
+    border-radius: calc(var(--lu-radius) - 4px);
+    background: transparent;
+    color: var(--lu-muted-foreground);
+    font: inherit;
+    font-size: 1rem;
+    line-height: 1;
+    cursor: pointer;
+  }
+  .lu-toast > [command="--close-toast"]:hover {
+    background: var(--lu-accent);
+    color: var(--lu-accent-foreground);
+  }
+  .lu-toast > [command="--close-toast"]:focus-visible {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: 0;
+  }
+  .lu-toast[data-type="error"] {
+    border-inline-start: 4px solid var(--lu-destructive);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .lu-toast {
+      transition:
+        opacity 200ms ease-out,
+        translate 200ms ease-out;
+    }
+    .lu-toast[data-starting-style] {
+      opacity: 0;
+      translate: 0 0.75rem;
+    }
+    .lu-toast[data-ending-style] {
+      opacity: 0;
+    }
+    .lu-toast[data-ending-style][data-swipe-direction="right"] {
+      translate: calc(100% + 1rem) 0;
+    }
+    .lu-toast[data-ending-style][data-swipe-direction="left"] {
+      translate: calc(-100% - 1rem) 0;
+    }
+    .lu-toast[data-ending-style][data-swipe-direction="down"] {
+      translate: 0 calc(100% + 1rem);
+    }
+    .lu-toast[data-ending-style][data-swipe-direction="up"] {
+      translate: 0 calc(-100% - 1rem);
+    }
+    .lu-toast[data-swiping] {
+      transition: none;
+    }
+  }
+
+  /* Toggle and Toggle Group (TASK-369) -------------------------------------------------------- */
+
+  .lu-toggle {
+    display: inline-grid;
+    place-items: center;
+    min-inline-size: 2.25rem;
+    min-block-size: 2.25rem;
+    padding: 0.375rem 0.625rem;
+    border: 1px solid var(--lu-input);
+    border-radius: calc(var(--lu-radius) - 2px);
+    background: var(--lu-background);
+    color: var(--lu-foreground);
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25;
+    cursor: pointer;
+  }
+  .lu-toggle:hover {
+    background: var(--lu-accent);
+  }
+  /* Pressed: a filled surface and a bar along the bottom, a shape and not only a colour. */
+  .lu-toggle[aria-pressed="true"] {
+    background: var(--lu-accent);
+    color: var(--lu-accent-foreground);
+    box-shadow: inset 0 -3px 0 var(--lu-foreground);
+  }
+  .lu-toggle:focus-visible {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: 2px;
+  }
+  .lu-toggle:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .lu-toggle-group {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
+  .lu-toggle-group[data-orientation="vertical"] {
+    flex-direction: column;
+  }
+
+  /* Progress and Meter (TASK-373) ------------------------------------------------------------- */
+
+  .lu-progress,
+  .lu-meter {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: baseline;
+    gap: 0.375rem 1rem;
+    inline-size: min(20rem, 100%);
+    font-size: 0.875rem;
+  }
+  .lu-progress > :where(label),
+  .lu-meter > :where(label) {
+    font-weight: 500;
+  }
+  .lu-progress > :where(span),
+  .lu-meter > :where(span) {
+    color: var(--lu-muted-foreground);
+    font-variant-numeric: tabular-nums;
+  }
+  /*
+   * The bar: its edge in --lu-input (3:1, so the full range shows), the value in the primary
+   * colour (a lighter blue in dark, 3:1 against the bar there too).
+   */
+  .lu-progress > :where(progress),
+  .lu-meter > :where(meter) {
+    grid-column: 1 / -1;
+    appearance: none;
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 0.625rem;
+    border: 1px solid var(--lu-input);
+    border-radius: 999px;
+    background: var(--lu-background);
+    overflow: hidden;
+    --lu-bar: light-dark(var(--lu-primary), #60a5fa);
+  }
+  .lu-progress > progress::-webkit-progress-bar {
+    background: transparent;
+  }
+  .lu-progress > progress::-webkit-progress-value {
+    border-radius: inherit;
+    background: var(--lu-bar);
+  }
+  .lu-progress > progress::-moz-progress-bar {
+    border-radius: inherit;
+    background: var(--lu-bar);
+  }
+  /* Indeterminate: a segment that slides, still where motion is reduced. */
+  .lu-progress > progress:indeterminate {
+    background-image: linear-gradient(
+      to right,
+      transparent 0 35%,
+      var(--lu-bar) 35% 65%,
+      transparent 65%
+    );
+    background-size: 200% 100%;
+  }
+  .lu-progress > progress:indeterminate::-moz-progress-bar {
+    background: transparent;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .lu-progress > progress:indeterminate {
+      animation: lu-progress-slide 1.4s linear infinite;
+    }
+    /*
+     * Right to left, the segment slides the other way (TASK-385). Not `:dir(rtl)`: Lightning CSS
+     * lowers it to a list of `:lang()`s, which misses a `dir` attribute.
+     */
+    :where([dir="rtl"]) .lu-progress > progress:indeterminate {
+      animation-direction: reverse;
+    }
+    :where([dir="rtl"]) :where([dir="ltr"]) .lu-progress > progress:indeterminate {
+      animation-direction: normal;
+    }
+  }
+  @keyframes lu-progress-slide {
+    from {
+      background-position: 100% 0;
+    }
+    to {
+      background-position: -100% 0;
+    }
+  }
+  .lu-meter > meter::-webkit-meter-bar {
+    border: 0;
+    background: transparent;
+  }
+  .lu-meter > meter::-webkit-meter-optimum-value,
+  .lu-meter > meter::-webkit-meter-suboptimum-value,
+  .lu-meter > meter::-webkit-meter-even-less-good-value {
+    border-radius: inherit;
+    background: var(--lu-bar);
+  }
+  .lu-meter > meter::-moz-meter-bar {
+    border-radius: inherit;
+    background: var(--lu-bar);
+  }
+
+  /* Slider (TASK-372) ------------------------------------------------------------------------- */
+
+  .lu-slider {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: baseline;
+    gap: 0.25rem 1rem;
+    inline-size: min(20rem, 100%);
+    font-size: 0.875rem;
+    --lu-bar: light-dark(var(--lu-primary), #60a5fa);
+    /* The thumbs' size: slider.css lines the track up with their centres. */
+    --lu-slider-thumb-size: 1.5rem;
+  }
+  .lu-slider > :where(label) {
+    font-weight: 500;
+  }
+  .lu-slider > :where(output) {
+    color: var(--lu-muted-foreground);
+    font-variant-numeric: tabular-nums;
+  }
+  /* The control: a 24px tall strip (the thumbs' target), the full width. */
+  .lu-slider > :where(div) {
+    grid-column: 1 / -1;
+    block-size: 1.5rem;
+  }
+  /* Center alignment: the thumbs overhang the control, inside the slider's box. */
+  .lu-slider[data-thumb-alignment="center"] > :where(div) {
+    margin-inline: calc(var(--lu-slider-thumb-size) / 2);
+  }
+  .lu-slider[data-orientation="vertical"] > :where(div) {
+    grid-column: auto;
+    inline-size: 1.5rem;
+    block-size: 10rem;
+  }
+  /* The track: --lu-input at its edge (3:1), the selected part in the primary colour. */
+  .lu-slider > div > :where(div) {
+    box-sizing: border-box;
+    block-size: 0.5rem;
+    border: 1px solid var(--lu-input);
+    border-radius: 999px;
+    background: var(--lu-background);
+  }
+  .lu-slider[data-orientation="vertical"] > div > :where(div) {
+    inline-size: 0.5rem;
+    block-size: auto;
+  }
+  .lu-slider > div > div > :where(div) {
+    border-radius: inherit;
+    background: var(--lu-bar);
+  }
+  /* In the thumb's own writing mode: a vertical thumb's block size is its width. */
+  .lu-slider :where(input[type="range"]) {
+    block-size: var(--lu-slider-thumb-size);
+    cursor: pointer;
+  }
+  /* The thumb: a 24px circle with a primary edge; focus adds a ring around it. */
+  .lu-slider input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    box-sizing: border-box;
+    inline-size: var(--lu-slider-thumb-size);
+    block-size: var(--lu-slider-thumb-size);
+    border: 2px solid var(--lu-bar);
+    border-radius: 50%;
+    background: var(--lu-background);
+    box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
+  }
+  .lu-slider input[type="range"]::-moz-range-thumb {
+    box-sizing: border-box;
+    inline-size: var(--lu-slider-thumb-size);
+    block-size: var(--lu-slider-thumb-size);
+    border: 2px solid var(--lu-bar);
+    border-radius: 50%;
+    background: var(--lu-background);
+    box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
+  }
+  .lu-slider input[type="range"]:focus-visible {
+    outline: none;
+  }
+  .lu-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: 2px;
+  }
+  .lu-slider input[type="range"]:focus-visible::-moz-range-thumb {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: 2px;
+  }
+  .lu-slider input[type="range"]:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Drawer (TASK-382) ------------------------------------------------------------------------- */
+
+  /*
+   * A popover surface against its edge, rounded on the inside; a bottom sheet has a handle (a
+   * decoration: the close buttons and Escape do what a swipe does). It slides in and out from its
+   * edge, follows a swipe, and leaves from where the swipe let go; the backdrop fades with it.
+   */
+  .lu-drawer {
+    box-sizing: border-box;
+    padding: 1.5rem;
+    border: 1px solid var(--lu-border);
+    background: var(--lu-popover);
+    color: var(--lu-popover-foreground);
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+    translate: var(--lu-drawer-swipe-movement-x, 0) var(--lu-drawer-swipe-movement-y, 0);
+  }
+  .lu-drawer::backdrop {
+    background: rgb(0 0 0 / 0.5);
+    opacity: calc(1 - var(--lu-drawer-swipe-progress, 0));
+  }
+  .lu-drawer[data-swipe-direction="down"] {
+    max-block-size: 85dvh;
+    padding-block-start: 2rem;
+    border-block-end: 0;
+    border-radius: var(--lu-radius) var(--lu-radius) 0 0;
+  }
+  .lu-drawer[data-swipe-direction="down"]::before {
+    content: "";
+    position: absolute;
+    inset-block-start: 0.75rem;
+    inset-inline-start: 50%;
+    inline-size: 2.5rem;
+    block-size: 0.25rem;
+    border-radius: 999px;
+    background: var(--lu-input);
+    translate: -50% 0;
+  }
+  .lu-drawer[data-swipe-direction="up"] {
+    max-block-size: 85dvh;
+    border-block-start: 0;
+    border-radius: 0 0 var(--lu-radius) var(--lu-radius);
+  }
+  .lu-drawer:is([data-swipe-direction="left"], [data-swipe-direction="right"]) {
+    inline-size: min(22rem, 100vw - 3rem);
+  }
+  .lu-drawer[data-swipe-direction="left"] {
+    border-inline-start: 0;
+    border-start-end-radius: var(--lu-radius);
+    border-end-end-radius: var(--lu-radius);
+  }
+  .lu-drawer[data-swipe-direction="right"] {
+    border-inline-end: 0;
+    border-start-start-radius: var(--lu-radius);
+    border-end-start-radius: var(--lu-radius);
+  }
+  .lu-drawer :where(h2) {
+    margin: 0 0 0.5rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+    line-height: 1.3;
+  }
+  .lu-drawer :where(p) {
+    margin: 0 0 1.5rem;
+    color: var(--lu-muted-foreground);
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+  .lu-drawer :where(footer) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    gap: 0.5rem;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .lu-drawer,
+    .lu-drawer::backdrop {
+      transition:
+        translate 250ms ease-out,
+        opacity 250ms ease-out,
+        overlay 250ms allow-discrete,
+        display 250ms allow-discrete;
+    }
+    .lu-drawer[data-swiping],
+    .lu-drawer[data-swiping]::backdrop {
+      transition: none;
+    }
+    .lu-drawer:not([open])::backdrop {
+      opacity: 0;
+    }
+    .lu-drawer[data-swipe-direction="down"]:not([open]) {
+      translate: 0 100%;
+    }
+    .lu-drawer[data-swipe-direction="up"]:not([open]) {
+      translate: 0 -100%;
+    }
+    .lu-drawer[data-swipe-direction="left"]:not([open]) {
+      translate: -100% 0;
+    }
+    .lu-drawer[data-swipe-direction="right"]:not([open]) {
+      translate: 100% 0;
+    }
+    @starting-style {
+      .lu-drawer[open]::backdrop {
+        opacity: 0;
+      }
+      .lu-drawer[data-swipe-direction="down"][open] {
+        translate: 0 100%;
+      }
+      .lu-drawer[data-swipe-direction="up"][open] {
+        translate: 0 -100%;
+      }
+      .lu-drawer[data-swipe-direction="left"][open] {
+        translate: -100% 0;
+      }
+      .lu-drawer[data-swipe-direction="right"][open] {
+        translate: 100% 0;
+      }
+    }
+  }
+
+  /* Number Field (TASK-375) ------------------------------------------------------------------- */
+
+  .lu-number-field {
+    display: grid;
+    gap: 0.375rem;
+    justify-items: start;
+    font-size: 0.875rem;
+  }
+  .lu-number-field :where(label) {
+    font-weight: 500;
+  }
+  /* The group: one bordered control with the input between its buttons; focus rings all of it. */
+  .lu-number-field > :where(div),
+  .lu-number-field > :where(input:not([type="hidden"])) {
+    display: inline-flex;
+    align-items: stretch;
+    border: 1px solid var(--lu-input);
+    border-radius: calc(var(--lu-radius) - 2px);
+    background: var(--lu-background);
+    color: var(--lu-foreground);
+  }
+  .lu-number-field > div:focus-within,
+  .lu-number-field > input:focus-visible {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: 2px;
+  }
+  .lu-number-field :where(input:not([type="hidden"])) {
+    box-sizing: border-box;
+    inline-size: 8rem;
+    min-block-size: 2.25rem;
+    padding: 0.5rem 0.75rem;
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+  }
+  .lu-number-field > div > :where(input) {
+    border: 0;
+    background: transparent;
+    color: inherit;
+  }
+  .lu-number-field > div > input:focus-visible {
+    outline: none;
+  }
+  .lu-number-field :where(input):disabled {
+    opacity: 0.5;
+  }
+  .lu-number-field :where(button[data-action]) {
+    display: grid;
+    place-items: center;
+    min-inline-size: 2.25rem;
+    padding: 0;
+    border: 0;
+    background: var(--lu-muted);
+    color: var(--lu-foreground);
+    font: inherit;
+    font-size: 1rem;
+    cursor: pointer;
+  }
+  .lu-number-field :where(button[data-action="decrement"]) {
+    border-inline-end: 1px solid var(--lu-input);
+  }
+  .lu-number-field :where(button[data-action="increment"]) {
+    border-inline-start: 1px solid var(--lu-input);
+  }
+  .lu-number-field button[data-action]:hover:not(:disabled) {
+    background: var(--lu-accent);
+  }
+  .lu-number-field button[data-action]:disabled {
+    color: var(--lu-muted-foreground);
+    cursor: not-allowed;
+  }
+  /* A scrub area reads as part of the label; dragging it shows the resize cursor everywhere. */
+  .lu-number-field[data-scrubbing],
+  .lu-number-field[data-scrubbing] * {
+    cursor: ew-resize;
+  }
+
+  /* Separator and Avatar (TASK-374) ----------------------------------------------------------- */
+
+  /* A decorative line in --lu-border: a separator groups content, it is not needed to read it. */
+  .lu-separator {
+    flex: none;
+    block-size: 1px;
+    margin: 0.75rem 0;
+    border: 0;
+    background: var(--lu-border);
+  }
+  .lu-separator[data-orientation="vertical"] {
+    inline-size: 1px;
+    block-size: auto;
+    margin: 0;
+  }
+  .lu-avatar {
+    place-items: center;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    overflow: hidden;
+    border-radius: 50%;
+    background: var(--lu-muted);
+    color: var(--lu-muted-foreground);
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1;
+    vertical-align: middle;
+    user-select: none;
+  }
+  .lu-avatar > img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  /* OTP Field (TASK-376) ---------------------------------------------------------------------- */
+
+  .lu-otp-field {
+    align-items: center;
+    gap: 0.5rem;
+    max-inline-size: 100%;
+  }
+  /* A box per character; the caret's box gets the focus ring while the input has focus. */
+  .lu-otp-field > :where([data-slot]) {
+    display: grid;
+    place-items: center;
+    box-sizing: border-box;
+    flex: 0 1 2.5rem;
+    min-inline-size: 1.75rem;
+    block-size: 2.75rem;
+    border: 1px solid var(--lu-input);
+    border-radius: calc(var(--lu-radius) - 2px);
+    background: var(--lu-background);
+    color: var(--lu-foreground);
+    font-size: 1.25rem;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+  .lu-otp-field > [data-slot][data-active] {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: 2px;
+  }
+  /* The caret, in the caret's box while it is empty. */
+  .lu-otp-field > [data-slot][data-active]:not([data-filled])::after {
+    content: "";
+    inline-size: 1px;
+    block-size: 1.25rem;
+    background: var(--lu-foreground);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .lu-otp-field > [data-slot][data-active]:not([data-filled])::after {
+      animation: lu-otp-caret 1s steps(1) infinite;
+    }
+  }
+  @keyframes lu-otp-caret {
+    50% {
+      opacity: 0;
+    }
+  }
+  .lu-otp-field > :where([data-orientation="horizontal"]) {
+    flex: 0 1 0.75rem;
+    min-inline-size: 0.25rem;
+    block-size: 2px;
+    background: var(--lu-muted-foreground);
+  }
+  .lu-otp-field:has(input:disabled) {
+    opacity: 0.5;
+  }
+  /* Without its script, the input is a plain field: style it as one. */
+  .lu-otp-field:not(:defined) > :where(input) {
+    box-sizing: border-box;
+    min-block-size: 2.25rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--lu-input);
+    border-radius: calc(var(--lu-radius) - 2px);
+    background: var(--lu-background);
+    color: var(--lu-foreground);
+    font: inherit;
+    letter-spacing: 0.5em;
+  }
+
+  /* Preview Card (TASK-381) ------------------------------------------------------------------- */
+
+  .lu-preview-card {
+    --lu-side-offset: 8px;
+    box-sizing: border-box;
+    inline-size: max-content;
+    max-inline-size: min(20rem, 100vw - 1rem);
+    padding: 1rem;
+    border: 1px solid var(--lu-border);
+    border-radius: var(--lu-radius);
+    background: var(--lu-popover);
+    color: var(--lu-popover-foreground);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+  }
+  .lu-preview-card :where(img) {
+    display: block;
+    max-inline-size: 100%;
+    border-radius: calc(var(--lu-radius) - 2px);
+  }
+  .lu-preview-card :where(p) {
+    margin: 0.25rem 0 0;
+    color: var(--lu-muted-foreground);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .lu-preview-card {
+      transition:
+        opacity 150ms ease-out,
+        scale 150ms ease-out,
+        overlay 150ms allow-discrete,
+        display 150ms allow-discrete;
+    }
+    .lu-preview-card:not(:popover-open) {
+      opacity: 0;
+      scale: 0.96;
+    }
+    @starting-style {
+      .lu-preview-card:popover-open {
+        opacity: 0;
+        scale: 0.96;
+      }
+    }
+  }
+
+  /* Toolbar (TASK-383) ------------------------------------------------------------------------ */
+
+  .lu-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem;
+    inline-size: fit-content;
+    max-inline-size: 100%;
+    box-sizing: border-box;
+    padding: 0.25rem;
+    border: 1px solid var(--lu-border);
+    border-radius: var(--lu-radius);
+    background: var(--lu-background);
+  }
+  .lu-toolbar[data-orientation="vertical"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .lu-toolbar :where([role="group"]) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
+  .lu-toolbar[data-orientation="vertical"] :where([role="group"]) {
+    flex-direction: column;
+  }
+  /* Separators run across the toolbar: a line from top to bottom in a row. */
+  .lu-toolbar :where(hr) {
+    flex: none;
+    align-self: stretch;
+    margin: 0 0.25rem;
+    border: 0;
+    background: var(--lu-border);
+  }
+  .lu-toolbar :where(hr[data-orientation="vertical"]) {
+    inline-size: 1px;
+    block-size: auto;
+  }
+  .lu-toolbar :where(hr[data-orientation="horizontal"]) {
+    inline-size: auto;
+    block-size: 1px;
+    margin: 0.25rem 0;
+  }
+  /* A link is an item like the buttons: as tall, with room around its text (2.5.8). */
+  .lu-toolbar :where(a) {
+    display: inline-flex;
+    align-items: center;
+    min-block-size: 2.25rem;
+    padding: 0 0.5rem;
+    border-radius: calc(var(--lu-radius) - 2px);
+    font-size: 0.875rem;
+  }
+  .lu-toolbar :where(a):focus-visible {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: 2px;
+  }
+
+  /* Scroll Area (TASK-384) -------------------------------------------------------------------- */
+
+  .lu-scroll-area {
+    box-sizing: border-box;
+    border: 1px solid var(--lu-border);
+    border-radius: var(--lu-radius);
+    background: var(--lu-background);
+  }
+  /* Inside the box, which clips: the ring is drawn inward. */
+  .lu-scroll-area :where([data-viewport]):focus-visible {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: -2px;
+  }
+  .lu-scroll-area :where([data-viewport]) > :where(div) {
+    padding: 0.75rem 1rem;
+  }
+  .lu-scroll-area :where([data-scrollbar]) {
+    padding: 2px;
+    opacity: 0;
+  }
+  /* 4px at the track's ends, where the thumb's larger target (below) reaches. */
+  .lu-scroll-area :where([data-scrollbar][data-orientation="vertical"]) {
+    inline-size: 10px;
+    padding-block: 4px;
+  }
+  .lu-scroll-area :where([data-scrollbar][data-orientation="horizontal"]) {
+    block-size: 10px;
+    padding-inline: 4px;
+  }
+  /* Shown while the pointer is over the area, while it scrolls, and while it has focus. */
+  .lu-scroll-area :where([data-scrollbar]):is([data-hovering], [data-scrolling]),
+  .lu-scroll-area:focus-within :where([data-scrollbar]) {
+    opacity: 1;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .lu-scroll-area :where([data-scrollbar]) {
+      transition: opacity 150ms ease-out;
+    }
+  }
+  /* The thumb: --lu-muted-foreground, 3:1 against the area, rounded. */
+  .lu-scroll-area :where([data-thumb]) {
+    position: relative;
+    border-radius: 999px;
+    background: var(--lu-muted-foreground);
+  }
+  /*
+   * A 24px target for the pointer (WCAG 2.5.8, TASK-444 L7): the 6px thumb takes presses 16px
+   * inward and over the scrollbar's padding, and 4px past its ends (its least length is 16px).
+   */
+  .lu-scroll-area :where([data-thumb])::before {
+    content: "";
+    position: absolute;
+    inset-block: -4px;
+    inset-inline: -16px -2px;
+  }
+  .lu-scroll-area :where([data-orientation="horizontal"] > [data-thumb])::before {
+    inset-block: -16px -2px;
+    inset-inline: -4px;
+  }
+
+  /* Menubar (TASK-379) ------------------------------------------------------------------------ */
+
+  .lu-menubar {
+    display: inline-flex;
+    gap: 0.125rem;
+    padding: 0.25rem;
+    border: 1px solid var(--lu-border);
+    border-radius: var(--lu-radius);
+    background: var(--lu-background);
+  }
+  .lu-menubar > lu-menu > [role="menuitem"] {
+    min-block-size: 2rem;
+    padding: 0.25rem 0.75rem;
+    border: 0;
+    border-radius: calc(var(--lu-radius) - 4px);
+    background: transparent;
+    color: var(--lu-foreground);
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-align: start;
+    cursor: pointer;
+  }
+  .lu-menubar > lu-menu > [role="menuitem"]:is(:hover, [aria-expanded="true"]) {
+    background: var(--lu-accent);
+    color: var(--lu-accent-foreground);
+  }
+  .lu-menubar > lu-menu > [role="menuitem"]:focus-visible {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: -2px;
+  }
+  .lu-menubar > lu-menu > [role="menuitem"]:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Navigation Menu (TASK-380) ---------------------------------------------------------------- */
+
+  .lu-navigation-menu :where(ul) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .lu-navigation-menu > ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
+  .lu-navigation-menu[data-orientation="vertical"] > ul {
+    flex-direction: column;
+    align-items: start;
+  }
+  .lu-navigation-menu > ul > li {
+    display: flex;
+  }
+  .lu-navigation-menu > ul > li > :is(button, a) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-block-size: 2.25rem;
+    padding: 0.375rem 0.75rem;
+    border: 0;
+    border-radius: calc(var(--lu-radius) - 2px);
+    background: transparent;
+    color: var(--lu-foreground);
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .lu-navigation-menu > ul > li > :is(button, a):is(:hover, [aria-expanded="true"]) {
+    background: var(--lu-accent);
+    color: var(--lu-accent-foreground);
+  }
+  /* The current page: underlined, a shape and not only a colour. */
+  .lu-navigation-menu a[aria-current="page"] {
+    text-decoration: underline 2px;
+    text-underline-offset: 0.35em;
+  }
+  .lu-navigation-menu :is(button, a):focus-visible {
+    outline: 2px solid var(--lu-ring);
+    outline-offset: 2px;
+  }
+  .lu-navigation-menu button[aria-expanded="true"] > [aria-hidden="true"] {
+    rotate: 180deg;
+  }
+  .lu-navigation-menu [popover] {
+    --lu-side-offset: 4px;
+    box-sizing: border-box;
+    min-inline-size: 12rem;
+    max-inline-size: min(28rem, 100vw - 1rem);
+    padding: 0.375rem;
+    border: 1px solid var(--lu-border);
+    border-radius: var(--lu-radius);
+    background: var(--lu-popover);
+    color: var(--lu-popover-foreground);
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+  }
+  .lu-navigation-menu [popover] a {
+    display: block;
+    padding: 0.5rem 0.75rem;
+    border-radius: calc(var(--lu-radius) - 4px);
+    color: inherit;
+    font-size: 0.875rem;
+    text-decoration: none;
+  }
+  .lu-navigation-menu [popover] a:is(:hover, :focus-visible) {
+    background: var(--lu-accent);
+    color: var(--lu-accent-foreground);
+  }
+  /* Fade in and out, sliding in from where the previous content was; `overlay` keeps a content in
+     the top layer while it fades out, in Chromium only. */
+  @media (prefers-reduced-motion: no-preference) {
+    .lu-navigation-menu button > [aria-hidden="true"] {
+      transition: rotate 150ms ease;
+    }
+    .lu-navigation-menu [popover] {
+      transition:
+        opacity 150ms ease,
+        translate 150ms ease,
+        overlay 150ms allow-discrete,
+        display 150ms allow-discrete;
+    }
+    .lu-navigation-menu [popover]:not(:popover-open) {
+      opacity: 0;
+    }
+    @starting-style {
+      .lu-navigation-menu [popover]:popover-open {
+        opacity: 0;
+        translate: 0 -4px;
+      }
+      .lu-navigation-menu [popover][data-activation-direction="right"]:popover-open {
+        translate: 1rem 0;
+      }
+      .lu-navigation-menu [popover][data-activation-direction="left"]:popover-open {
+        translate: -1rem 0;
+      }
+    }
+  }
+
+  /* Forced colours (TASK-441 M38) ------------------------------------------------------------- */
+
+  /*
+   * A forced palette drops shadows and gradients and paints author backgrounds as Canvas, so the
+   * state indicators drawn with them vanish; system colours, which it keeps, draw them again. A
+   * transparent border shows there: a border that must stay hidden is Canvas.
+   */
+  @media (forced-colors: active) {
+    .lu-switch::before {
+      background: ButtonText;
+    }
+    .lu-switch:checked {
+      border-color: Highlight;
+      background: Highlight;
+    }
+    .lu-switch:checked::before {
+      background: HighlightText;
+    }
+    .lu-toggle[aria-pressed="true"] {
+      border-color: Highlight;
+      background: Highlight;
+      color: HighlightText;
+    }
+    /* The ring is outside, on Canvas: Firefox would draw it in the text colour, HighlightText, which
+       no contrast theme pairs with Canvas (TASK-462). */
+    .lu-toggle[aria-pressed="true"]:focus-visible {
+      outline-color: CanvasText;
+    }
+    .lu-tabs [role="tab"] {
+      border-block-end: 2px solid Canvas;
+    }
+    .lu-tabs [aria-orientation="vertical"] [role="tab"] {
+      border-block-end: 0;
+      border-inline-end-color: Canvas;
+    }
+    .lu-tabs [role="tab"][aria-selected="true"] {
+      border-block-end-color: Highlight;
+    }
+    .lu-tabs [aria-orientation="vertical"] [role="tab"][aria-selected="true"] {
+      border-inline-end-color: Highlight;
+    }
+    .lu-tabs [data-indicator] {
+      border-color: Highlight;
+    }
+    .lu-tabs:defined [role="tablist"]:has(> [data-indicator]) [role="tab"][aria-selected="true"] {
+      border-color: Canvas;
+    }
+    .lu-progress > progress::-webkit-progress-value,
+    .lu-meter > meter::-webkit-meter-optimum-value,
+    .lu-meter > meter::-webkit-meter-suboptimum-value,
+    .lu-meter > meter::-webkit-meter-even-less-good-value {
+      background: Highlight;
+    }
+    .lu-progress > progress::-moz-progress-bar,
+    .lu-meter > meter::-moz-meter-bar {
+      background: Highlight;
+    }
+    /* The sliding segment is a gradient: kept, in system colours. */
+    .lu-progress > progress:indeterminate {
+      forced-color-adjust: none;
+      border-color: CanvasText;
+      background-color: Canvas;
+      background-image: linear-gradient(
+        to right,
+        transparent 0 35%,
+        Highlight 35% 65%,
+        transparent 65%
+      );
+    }
+    .lu-slider > div > div > :where(div) {
+      background: Highlight;
+    }
+    .lu-scroll-area :where([data-thumb]) {
+      background: CanvasText;
+    }
+    .lu-menu :where([role^="menuitem"][data-highlighted], [aria-expanded="true"]) {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+}