@apliteni/apliteni-ui 0.124.1 → 0.125.0

package/guidelines/colour-and-theming.md

@@ -70,3 +70,15 @@
 **Except:** The sidebar rail's current row. Its mark may be neither an accent nor an edge — an outline there means focus — and in the page shell the rail is the card surface already. It takes the quiet fill a rung off its rail, label and all. Artur, r34 of [#475](https://github.com/apliteni/apliteni-ui/issues/475).
 
 **Except:** A status chip carries a soft fill. Where its tone reports no verdict it takes a light tint of muted ink that leaves the panel in one direction per theme, so the neutral tones read as the same family as the coloured ones.
+
+## Mark selection in forced colours
+
+<!-- rule: selected-forced-colours -->
+
+**Rule:** In forced colours, fill a selected item with the highlight colour and its label with the highlight text colour.
+
+**Why:** The mode replaces author backgrounds. A specimen cannot switch it on, so this rule draws no pair.
+
+**Do:** Ring a focused selected item in the page text colour.
+
+**Don't:** Mark selection with an outline.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.124.1",
+  "version": "0.125.0",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -545,6 +545,17 @@ class and invalid styling as appropriate:
 The frame supplies a stable ID, required state, and linked hint/error messages.
 An optional `id` lets the caller choose the control ID; it must be unique.
 
+A `Dropdown` is a control too. Spread the attributes onto it and its trigger takes
+`aria-describedby` and `aria-invalid`, so the error and hint are read when it gets focus.
+Its accessible name is the label and then the chosen value. Outside a `Field`,
+`Dropdown` takes `aria-describedby` and `aria-invalid` as props and forwards them to the trigger.
+
+```tsx
+<Field label="Owner" error="That option is no longer available.">
+  {control => <Dropdown {...control} variant="select" items={owners} />}
+</Field>
+```
+
 ### Search
 
 `SearchField` is the toolbar's search box: a search glyph, a native

package/react/dist/index.d.ts

@@ -501,6 +501,10 @@ type DropdownProps = {
     /** A field above the rows that filters them as the reader types. */
     search?: boolean | DropdownSearch;
     ariaLabel?: string;
+    /** Names the elements that describe the trigger, e.g. a field's error and hint. */
+    'aria-describedby'?: string;
+    /** Marks the trigger invalid. `Field` supplies it while its error shows. */
+    'aria-invalid'?: boolean | 'true' | 'false';
     id?: string;
     panelClass?: string;
     /** Controlled: the host owns the open state and answers `onOpenChange`. */
@@ -512,7 +516,7 @@ type DropdownProps = {
     /** Draw the row yourself. `props` is everything the row needs; spread it. */
     row?: (item: DropdownItem, props: DropdownRowProps) => ReactNode;
 };
-declare function Dropdown({ label, value, placeholder, variant, items, sections, header, footer, triggerContent, triggerClass, disabled, chevron, align, direction, scroll, search, ariaLabel, id, panelClass, open: openProp, defaultOpen, onOpenChange, onSelect, row, }: DropdownProps): react.JSX.Element;
+declare function Dropdown({ label, value, placeholder, variant, items, sections, header, footer, triggerContent, triggerClass, disabled, chevron, align, direction, scroll, search, ariaLabel, id, panelClass, 'aria-describedby': describedBy, 'aria-invalid': invalid, open: openProp, defaultOpen, onOpenChange, onSelect, row, }: DropdownProps): react.JSX.Element;
 
 type BackLinkOwnProps = {
     /** The address. No address, or a `javascript:` one, and nothing is rendered. */

package/react/dist/index.js

@@ -2072,6 +2072,7 @@ function DatePicker({
 import {
   Fragment as Fragment5,
   useCallback as useCallback4,
+  useContext as useContext2,
   useEffect as useEffect7,
   useId as useId8,
   useRef as useRef11,
@@ -2087,6 +2088,12 @@ import {
   dropdownHeightFit,
   filterPanelRow
 } from "@apliteni/apliteni-ui";
+
+// src/fieldContext.ts
+import { createContext as createContext2 } from "react";
+var FieldContext = createContext2(null);
+
+// src/Dropdown.tsx
 import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var EXIT_SLACK_MS2 = 50;
 var SETTLE_MS = 450;
@@ -2140,6 +2147,8 @@ function Dropdown({
   ariaLabel,
   id,
   panelClass = "",
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
   open: openProp,
   defaultOpen = false,
   onOpenChange,
@@ -2159,6 +2168,8 @@ function Dropdown({
   const at = useRef11("");
   const auto = useId8().replace(/:/g, "");
   const uid = id ?? auto;
+  const inField = useContext2(FieldContext);
+  const fieldName = inField && id === inField.id && !(ariaLabel && triggerContent != null) ? { id: `${uid}-trigger`, labelId: inField.labelId, labelledBy: `${inField.labelId} ${uid}-trigger` } : null;
   const setOpen = useCallback4((next) => {
     if (openProp === void 0) setSelfOpen(next);
     onOpenChange?.(next);
@@ -2559,7 +2570,11 @@ function Dropdown({
         disabled: disabled || void 0,
         "aria-haspopup": sx ? "dialog" : listRole,
         "aria-expanded": open,
+        id: fieldName?.id,
         "aria-label": ariaLabel && triggerContent != null ? ariaLabel : void 0,
+        "aria-labelledby": fieldName?.labelledBy,
+        "aria-describedby": describedBy,
+        "aria-invalid": invalid,
         ref: trigger,
         onClick: (e) => {
           e.stopPropagation();
@@ -2588,6 +2603,7 @@ function Dropdown({
         "data-dropdown-panel": "",
         role: sx ? "dialog" : listRole,
         "aria-label": sx ? name : ariaLabel,
+        "aria-labelledby": !sx && !ariaLabel ? fieldName?.labelId : void 0,
         style: sx ? void 0 : cap,
         ref: panel,
         onClick: (e) => e.stopPropagation(),
@@ -3084,9 +3100,9 @@ import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 function messages(id, hint, error) {
   return [error && `${id}-error`, hint && `${id}-hint`].filter(Boolean).join(" ") || void 0;
 }
-function Frame({ id, label, hint, error, required, children }) {
+function Frame({ id, labelId, label, hint, error, required, children }) {
   return /* @__PURE__ */ jsxs24("div", { className: "ui-field", children: [
-    /* @__PURE__ */ jsxs24("label", { className: "ui-field__label", htmlFor: id, children: [
+    /* @__PURE__ */ jsxs24("label", { className: "ui-field__label", id: labelId, htmlFor: id, children: [
       label,
       required && /* @__PURE__ */ jsx29("span", { className: "ui-field__req", "aria-hidden": "true", children: "*" })
     ] }),
@@ -3109,7 +3125,8 @@ function wiring(id, hint, error) {
 function Field({ id: suppliedId, label, hint, error, required, children }) {
   const generatedId = useId10();
   const id = suppliedId ?? generatedId;
-  return /* @__PURE__ */ jsx29(Frame, { ...{ id, label, hint, error, required }, children: children({ ...wiring(id, hint, error), required }) });
+  const labelId = `${id}-label`;
+  return /* @__PURE__ */ jsx29(Frame, { ...{ id, labelId, label, hint, error, required }, children: /* @__PURE__ */ jsx29(FieldContext.Provider, { value: { id, labelId }, children: children({ ...wiring(id, hint, error), required }) }) });
 }
 var TextField = forwardRef6(function TextField2({ label, hint, error, required, type = "text", unit, icon: glyph, className = "", ...props }, ref) {
   const id = useId10();
@@ -3397,13 +3414,13 @@ var SearchField = forwardRef7(function SearchField2({ ariaLabel, className, ...p
 });
 
 // src/Toast.tsx
-import { createContext as createContext2, useCallback as useCallback5, useContext as useContext2, useEffect as useEffect12, useLayoutEffect as useLayoutEffect4, useRef as useRef18, useState as useState12 } from "react";
+import { createContext as createContext3, useCallback as useCallback5, useContext as useContext3, useEffect as useEffect12, useLayoutEffect as useLayoutEffect4, useRef as useRef18, useState as useState12 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
-var Context = createContext2(null);
+var Context = createContext3(null);
 var glyphs = { success: "circleCheck", danger: "circleX", warn: "circleAlert", info: "info", neutral: "bolt" };
 function useToast() {
-  const push = useContext2(Context);
+  const push = useContext3(Context);
   if (!push) throw new Error("useToast requires a Toast provider");
   return push;
 }

package/src/components/index.js

@@ -132,10 +132,10 @@ function withControlId(html) {
 // aria-describedby, aria-invalid, required. Anything the control already spells
 // out for itself wins — a caller who passed `invalid` to input() keeps their own
 // aria-invalid. `true` renders a bare boolean attribute.
-function withControlAttrs(html, attrs) {
+function withAttrsOn(html, openTag, attrs) {
   const pairs = Object.entries(attrs).filter(([, v]) => v != null && v !== false);
   if (!pairs.length) return html;
-  return html.replace(/<(input|textarea|select)\b([^>]*?)(\s*\/?)>/, (m, tag, rest, tail) => {
+  return html.replace(openTag, (m, tag, rest, tail) => {
     const add = pairs
       .filter(([k]) => !new RegExp(`\\s${k}(?=[\\s=>/]|$)`).test(rest))
       .map(([k, v]) => (v === true ? ` ${k}` : ` ${k}="${esc(v)}"`))
@@ -143,6 +143,38 @@ function withControlAttrs(html, attrs) {
     return `<${tag}${rest}${add}${tail}>`;
   });
 }
+const withControlAttrs = (html, attrs) => withAttrsOn(html, /<(input|textarea|select)\b([^>]*?)(\s*\/?)>/, attrs);
+
+// A dropdown() is not a form element: its id sits on the outer div, which a
+// <label for> cannot name, and its one input (the search field) is inside the
+// panel. So field() wires the trigger button instead: the label and the value
+// name it, and the hint or error describes it. why: docs/components.md#forms
+const DD_ROOT = /<(div)\b((?=[^>]*\bdata-dropdown(?=[\s>]))[^>]*?)(\s*\/?)>/;
+const DD_TRIGGER = /<(button)\b((?=[^>]*\bdata-dropdown-trigger\b)[^>]*?)(\s*\/?)>/;
+const DD_PANEL = /<(div)\b((?=[^>]*\bdata-dropdown-panel\b)[^>]*?)(\s*\/?)>/;
+const attrId = (tag) => tag?.match(/\sid="([^"]+)"/)?.[1] || null;
+function withDropdownId(html, id) {
+  const root = html.match(DD_ROOT)[0];
+  const existing = attrId(root);
+  if (existing) return { html, id: existing };
+  const own = id || nextId('field');
+  return { html: html.replace(DD_ROOT, (m) => m.replace('<div', `<div id="${esc(own)}"`)), id: own };
+}
+function withDropdownAttrs(html, { rootId, labelId, describedby, invalid }) {
+  const trigger = html.match(DD_TRIGGER)?.[0] || '';
+  const triggerId = attrId(trigger) || `${rootId}-trigger`;
+  // A trigger that carries its own aria-label keeps it: the caller named it.
+  const named = labelId && !/\saria-label(?:ledby)?=/.test(trigger);
+  let out = withAttrsOn(html, DD_TRIGGER, {
+    id: named ? triggerId : null,
+    'aria-labelledby': named ? `${labelId} ${triggerId}` : null,
+    'aria-describedby': describedby,
+    'aria-invalid': invalid,
+  });
+  const panel = html.match(DD_PANEL)?.[0] || '';
+  if (labelId && !/\saria-label(?:ledby)?=/.test(panel)) out = withAttrsOn(out, DD_PANEL, { 'aria-labelledby': labelId });
+  return out;
+}
 
 // A labelled control with, optionally, a hint or an error under it.
 //
@@ -156,21 +188,28 @@ function withControlAttrs(html, attrs) {
 export function field({ label, hint, error, control = '', id, required = false } = {}) {
   let ctl = control;
   let forId = id;
+  const dd = DD_ROOT.test(control);
+  let ddId = null;
   if (label && control) {
-    const r = withControlId(control);
+    const r = dd ? withDropdownId(control, id) : withControlId(control);
     ctl = r.html;
     forId = id || r.id;
+    if (dd) ddId = r.id;
   }
   // Error wins over hint — only one message shows, so only one id is minted.
   const msg = error || hint;
   const msgId = msg && control ? nextId(error ? 'field-err' : 'field-hint') : null;
-  ctl = withControlAttrs(ctl, {
-    'aria-describedby': msgId,
-    'aria-invalid': error ? 'true' : null,
-    required: required || null,
-  });
+  ctl = dd
+    ? withDropdownAttrs(ctl, {
+      rootId: ddId, labelId: ddId && `${ddId}-label`, describedby: msgId, invalid: error ? 'true' : null,
+    })
+    : withControlAttrs(ctl, {
+      'aria-describedby': msgId,
+      'aria-invalid': error ? 'true' : null,
+      required: required || null,
+    });
   const lab = label
-    ? `<label class="ui-field__label"${forId ? ` for="${id ? esc(id) : forId}"` : ''}>${esc(label)}`
+    ? `<label class="ui-field__label"${ddId ? ` id="${esc(ddId)}-label"` : ''}${forId ? ` for="${id ? esc(id) : forId}"` : ''}>${esc(label)}`
       + `${required ? '<span class="ui-field__req" aria-hidden="true">*</span>' : ''}</label>`
     : '';
   const foot = error

package/src/styles/command-palette.css

@@ -340,3 +340,20 @@
 @media (prefers-reduced-motion: reduce) {
   .ui-cmdk.is-open * { transition: none !important; }
 }
+
+/* Forced colours replace every author background, so a selected item takes the system
+   pair as its fill. `forced-color-adjust: none` is what keeps the pair from sitting on
+   Chromium's Canvas backplate, which would leave the label unreadable. Focus keeps its
+   own ring, drawn in CanvasText so the fill is never mistaken for it. */
+@media (forced-colors: active) {
+  .ui-cmdk__item.is-active { forced-color-adjust: none; background: Highlight !important; color: HighlightText !important; --ring: var(--ring-width) solid CanvasText; }
+  .ui-cmdk__item.is-active .ui-cmdk__label,
+  .ui-cmdk__item.is-active .ui-cmdk__ic,
+  .ui-cmdk__item.is-active .ui-cmdk__desc,
+  .ui-cmdk__item.is-danger.is-active .ui-cmdk__label,
+  .ui-cmdk__item.is-danger.is-active .ui-cmdk__ic { color: HighlightText; }
+  .ui-cmdk--roomy .ui-cmdk__item.is-active .ui-cmdk__ic { background: none; }
+  .ui-cmdk__item.is-active .ui-cmdk__badge { background: HighlightText; color: Highlight; }
+  /* Shortcut caps inherit the adjust, so they take the pair too: the item's ink on its fill, with an ink edge. */
+  .ui-cmdk__item.is-active .ui-cmdk__key { background: Highlight; color: HighlightText; border-color: HighlightText; }
+}

package/src/styles/layout.css

@@ -119,7 +119,7 @@
    resting step. */
 /* Re-tuned at #295, which took the light rail down a step with the page. Below 720px
    the glyph is the whole row, so it is held at text grade rather than at 1.4.11's bar —
-   stories/apps/shell-states.test.js:1706 `a resting glyph is dimmer but still legible`. */
+   stories/apps/shell-states.test.js:1708 `a resting glyph is dimmer but still legible`. */
 .ui-app__rail .ui-nav__ic svg { opacity: 0.66; }
 
 /* A destructive row of the rail is a navigation row and rests like one; the danger
@@ -708,3 +708,41 @@
 .ui-section-head { text-align: center; max-width: var(--panel-lg); margin: 0 auto clamp(40px, 6vh, 64px); }
 .ui-section-head h2 { color: var(--strong); font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
 .ui-section-head p { color: var(--text); font-size: calc(var(--text-lg) - 1px); line-height: 1.6; }
+
+/* Forced colours replace every author background, so a selected item takes the system
+   pair as its fill. `forced-color-adjust: none` is what keeps the pair from sitting on
+   Chromium's Canvas backplate, which would leave the label unreadable. Focus keeps its
+   own ring, drawn in CanvasText so the fill is never mistaken for it. The pair is
+   `!important` so the shell's danger ink and every hover or focus state yield to it. */
+@media (forced-colors: active) {
+  .ui-app__rail .ui-nav__item:is(.is-active, .is-current):not(.is-disabled) { forced-color-adjust: none; background: Highlight !important; color: HighlightText !important; --ring: var(--ring-width) solid CanvasText; }
+  .ui-app__rail .ui-nav__item:is(.is-active, .is-current).is-disabled { forced-color-adjust: none; background: GrayText !important; color: Canvas !important; /* muted-ink: state — unavailable control */ }
+  .ui-app__rail .ui-nav__item.is-active:not(.is-disabled)::before { background: Highlight; }
+  .ui-app__rail .ui-nav__item.is-active.is-disabled::before { background: GrayText; }
+  /* A folded row is only an icon strip: the plate carries the fill, so the row paints none. */
+  .ui-app.is-collapsed .ui-app__rail .ui-nav__item:is(.is-active, .is-current) { isolation: isolate; background: none !important; }
+  .ui-app.is-collapsed .ui-app__rail .ui-nav__item.is-current:not(.is-active)::before {
+    content: ""; position: absolute; left: 0; top: 50%; width: var(--ui-nav-strip); height: 100%; border-radius: 10px;
+    transform: translateY(-50%); /* motion: still — a mark on the current group, centred and not travelling */
+    z-index: -1;
+  }
+  .ui-app.is-collapsed .ui-app__rail .ui-nav__item.is-current:not(.is-active):not(.is-disabled)::before { background: Highlight; }
+  .ui-app.is-collapsed .ui-app__rail .ui-nav__item.is-current.is-disabled:not(.is-active)::before { background: GrayText; }
+  /* The floating name of a selected folded row inherits the row's adjust, so it is painted in system colours. */
+  .ui-app.is-collapsed .ui-app__rail .ui-nav__item:is(.is-active, .is-current):is(:hover, :focus-visible) > .ui-nav__label {
+    forced-color-adjust: auto; background: Canvas; color: CanvasText; border-color: CanvasText;
+  }
+}
+@media (forced-colors: active) and (max-width: 720px) {
+  .ui-app .ui-app__rail .ui-nav__item:is(.is-active, .is-current) { isolation: isolate; background: none !important; }
+  .ui-app .ui-app__rail .ui-nav__item.is-current:not(.is-active)::before {
+    content: ""; position: absolute; left: 0; top: 50%; width: var(--ui-nav-strip); height: 100%; border-radius: 10px;
+    transform: translateY(-50%);
+    z-index: -1;
+  }
+  .ui-app .ui-app__rail .ui-nav__item.is-current:not(.is-active):not(.is-disabled)::before { background: Highlight; }
+  .ui-app .ui-app__rail .ui-nav__item.is-current.is-disabled:not(.is-active)::before { background: GrayText; }
+  .ui-app .ui-app__rail .ui-nav__item:is(.is-active, .is-current):is(:hover, :focus-visible) > .ui-nav__label {
+    forced-color-adjust: auto; background: Canvas; color: CanvasText; border-color: CanvasText;
+  }
+}

package/src/styles/nav.css

@@ -365,3 +365,64 @@ a.ui-nav__crumb:hover { color: var(--strong); background: var(--surface); /* cod
 a.ui-nav__crumb:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .ui-nav__crumb.is-current { color: var(--strong); font-weight: 500; }
 .ui-nav__crumb .ui-nav__ic svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; }
+
+/* Forced colours replace every author background, so a selected item takes the system
+   pair as its fill. `forced-color-adjust: none` is what keeps the pair from sitting on
+   Chromium's Canvas backplate, which would leave the label unreadable. Focus keeps its
+   own ring, drawn in CanvasText so the fill is never mistaken for it.
+   The pair is `!important` because it is the reader's palette: a danger wash, a hover
+   or a focus state must never repaint it. A child of the row inherits the adjust, so
+   each child that paints its own colour is repainted here as well. */
+@media (forced-colors: active) {
+  .ui-nav__item.is-active:not(.is-disabled),
+  .ui-nav__item.is-current:not(.is-disabled),
+  .ui-nav__tab.is-active:not(.is-disabled),
+  .ui-nav--tabs.is-pill .ui-nav__tab.is-active:not(.is-disabled),
+  .ui-nav__crumb.is-current {
+    forced-color-adjust: none;
+    background: Highlight !important;
+    color: HighlightText !important;
+    --ring: var(--ring-width) solid CanvasText;
+  }
+  .ui-nav__item.is-active:not(.is-disabled) .ui-nav__ic svg,
+  .ui-nav__item.is-current:not(.is-disabled) .ui-nav__ic svg,
+  .ui-nav__tab.is-active:not(.is-disabled) .ui-nav__ic svg,
+  .ui-nav__crumb.is-current .ui-nav__ic svg { stroke: HighlightText; }
+  .ui-nav__item.is-active .ui-nav__caret,
+  .ui-nav__item.is-current .ui-nav__caret { border-color: currentColor; }
+  .ui-nav__item.is-active:not(.is-disabled) .ui-nav__badge,
+  .ui-nav__item.is-current:not(.is-disabled) .ui-nav__badge,
+  .ui-nav__tab.is-active:not(.is-disabled) .ui-nav__badge {
+    background: HighlightText !important;
+    color: Highlight !important;
+  }
+  /* A selected item that is unavailable must not look live, so it takes the disabled system pair. */
+  .ui-nav__item.is-active.is-disabled,
+  .ui-nav__item.is-current.is-disabled,
+  .ui-nav__tab.is-active.is-disabled {
+    forced-color-adjust: none;
+    background: GrayText !important;
+    color: Canvas !important; /* muted-ink: state — unavailable control */
+  }
+  .ui-nav__item.is-active.is-disabled .ui-nav__ic svg,
+  .ui-nav__item.is-current.is-disabled .ui-nav__ic svg,
+  .ui-nav__tab.is-active.is-disabled .ui-nav__ic svg { stroke: Canvas; }
+  .ui-nav__item.is-active.is-disabled .ui-nav__badge,
+  .ui-nav__item.is-current.is-disabled .ui-nav__badge,
+  .ui-nav__tab.is-active.is-disabled .ui-nav__badge {
+    background: Canvas !important;
+    color: GrayText !important; /* muted-ink: state — unavailable control */
+  }
+  /* A folded row is only an icon strip: the plate carries the fill, so the row paints none.
+     A current group takes the same plate as the current row it holds. */
+  .ui-nav--side.is-collapsed .ui-nav__item:is(.is-active, .is-current) { isolation: isolate; background: none !important; }
+  .ui-nav--side.is-collapsed .ui-nav__item.is-current:not(.is-active)::before {
+    content: ""; position: absolute; left: 0; top: 50%; width: var(--ui-nav-strip); height: 100%; border-radius: 10px;
+    transform: translateY(-50%); /* motion: still — a mark on the current group, centred and not travelling */
+    z-index: -1;
+  }
+  .ui-nav--side.is-collapsed .ui-nav__item:is(.is-active, .is-current):not(.is-disabled)::before { background: Highlight; }
+  .ui-nav--side.is-collapsed .ui-nav__item:is(.is-active, .is-current).is-disabled::before { background: GrayText; }
+  /* The fill is the one mark, so the underline bar, which would paint the accent inside it, is gone. */
+  .ui-nav--tabs.is-underline .ui-nav__tab.is-active::after { display: none; /* motion: still — the bar is not drawn while the fill marks the tab */ }
+}

package/src/styles/pagination.css

@@ -137,3 +137,22 @@ a.ui-pager__step,
 a.ui-pager__page { color: var(--text); }
 a.ui-pager__step:hover,
 a.ui-pager__page:hover { color: var(--strong); }
+
+/* Forced colours replace every author background, so a selected item takes the system
+   pair as its fill. `forced-color-adjust: none` is what keeps the pair from sitting on
+   Chromium's Canvas backplate, which would leave the label unreadable. Focus keeps its
+   own ring, drawn in CanvasText so the fill is never mistaken for it. */
+@media (forced-colors: active) {
+  .ui-pager__page.is-current:not([disabled]) {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+    --ring: var(--ring-width) solid CanvasText;
+  }
+  /* A busy pager must not look live, so its current page takes the disabled system colour. */
+  .ui-pager__page.is-current[disabled] {
+    forced-color-adjust: none;
+    background: GrayText;
+    color: Canvas; /* muted-ink: state — unavailable control */
+  }
+}

package/src/styles/segmented.css

@@ -153,11 +153,31 @@
 }
 .ui-seg--underline button.is-active::before,
 .ui-seg--underline button[aria-pressed="true"]::before { opacity: 1; transform: scaleX(1); }
-/* The mode repaints an author colour, so the bar comes back as the labels' own
-   ink. `Highlight` is kept where it is named: one mark the mode cannot flatten. */
+.ui-seg button:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
+.ui-seg button:disabled { /* muted-ink: state — unavailable choice */ color: var(--disabled-ink); cursor: not-allowed; }
+
+/* Forced colours replace every author background, so a selected item takes the system
+   pair as its fill. `forced-color-adjust: none` is what keeps the pair from sitting on
+   Chromium's Canvas backplate, which would leave the label unreadable. Focus keeps its
+   own ring, drawn in CanvasText so the fill is never mistaken for it. */
 @media (forced-colors: active) {
+  .ui-seg button.is-active,
+  .ui-seg button[aria-pressed="true"],
+  .ui-seg button[aria-selected="true"] {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+    --ring: var(--ring-width) solid CanvasText;
+  }
+  /* The fill is the one mark, so the underline bar, which would paint the accent inside it, is gone. */
   .ui-seg--underline button.is-active::before,
-  .ui-seg--underline button[aria-pressed="true"]::before { background: Highlight; }
+  .ui-seg--underline button[aria-pressed="true"]::before,
+  .ui-seg--underline button[aria-selected="true"]::before { display: none; /* motion: still — the bar is not drawn while the fill marks the choice */ }
+  /* A disabled selected choice must not look live, so it takes the disabled system colour. */
+  .ui-seg button.is-active:disabled,
+  .ui-seg button[aria-pressed="true"]:disabled,
+  .ui-seg button[aria-selected="true"]:disabled {
+    background: GrayText;
+    color: Canvas; /* muted-ink: state — unavailable choice */
+  }
 }
-.ui-seg button:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
-.ui-seg button:disabled { /* muted-ink: state — unavailable choice */ color: var(--disabled-ink); cursor: not-allowed; }