@sveltia/ui 0.72.2 → 0.73.1

package/dist/services/group.svelte.js

@@ -2,6 +2,7 @@ import { isRTL } from '@sveltia/i18n';
 import { generateElementId } from '@sveltia/utils/element';
 import { sleep } from '@sveltia/utils/misc';
 import { getSelectedItemDetail } from './select.svelte.js';
+import { findTypeAheadMatch, TypeAhead } from './type-ahead.js';
 
 /**
  * @import { Attachment } from 'svelte/attachments';
@@ -31,6 +32,17 @@ export const normalize = (value) => {
   return value.normalize('NFD').replace(DIACRITIC_RE, '').toLocaleLowerCase();
 };
 
+/**
+ * Set an element’s `tabindex` attribute, leaving the DOM alone if it already holds that value.
+ * @param {HTMLElement} element Element.
+ * @param {number} tabIndex New value.
+ */
+const setTabIndex = (element, tabIndex) => {
+  if (element.getAttribute('tabindex') !== String(tabIndex)) {
+    element.tabIndex = tabIndex;
+  }
+};
+
 /**
  * @type {{ [role: string]: {
  * orientation: 'vertical' | 'horizontal',
@@ -48,7 +60,9 @@ const config = {
     childRoles: ['row'],
     childSelectedAttr: 'aria-selected',
     focusChild: true,
-    selectFirst: true,
+    // Rows are data, not a choice the widget has to make on the user’s behalf: nothing is
+    // selected until the user selects it. The first row is only the tab stop.
+    selectFirst: false,
     controlsPanel: false,
     rovingTabStop: 'selected',
   },
@@ -177,6 +191,12 @@ const getMenuOpener = (element) => {
  * Implement keyboard and mouse interactions for a grouping composite widget.
  */
 export class Group {
+  /**
+   * Whether {@link activate} has run. Until then, members are left as they are rendered.
+   * @type {boolean}
+   */
+  activated = false;
+
   /**
    * Memoized member lists, discarded whenever the widget’s subtree changes. See {@link #members}.
    * @type {{ all: HTMLElement[], active: HTMLElement[] } | undefined}
@@ -200,6 +220,12 @@ export class Group {
    */
   #hiddenState = new WeakMap();
 
+  /**
+   * Keystroke buffer for type-ahead.
+   * @type {TypeAhead}
+   */
+  #typeAhead = new TypeAhead();
+
   /**
    * Get the normalized value a member is searched by, computing it only when the underlying raw
    * value has changed since the last call.
@@ -295,8 +321,15 @@ export class Group {
     // The members can be added, removed, disabled or hidden at any time, which is what invalidates
     // the cached lists. Only the attributes that decide membership are watched, so the group’s own
     // writes — the selected state and the roving `tabindex` — don’t needlessly discard the cache.
-    this.observer = new globalThis.MutationObserver(() => {
+    this.observer = new globalThis.MutationObserver((records) => {
       this.#memberCache = undefined;
+
+      // Members rendered after activation — rows that arrive with the data, say — start out with
+      // whatever `tabindex` their component gives them, so the roving tab stop has to be redone
+      // for them to become a single stop
+      if (this.activated && records.some(({ type }) => type === 'childList')) {
+        this.updateTabStop();
+      }
     });
 
     this.observer.observe(parent, {
@@ -319,6 +352,8 @@ export class Group {
   activate() {
     const { parent, allMembers, selected: defaultSelected } = this;
 
+    this.activated = true;
+
     allMembers.forEach((element, index) => {
       // Select the first one if no member has the `selected` attribute
       const isSelected =
@@ -378,18 +413,55 @@ export class Group {
       return;
     }
 
+    // The stop stays where the user is. This runs again whenever the subtree changes, so a member
+    // the user has moved to must not be handed back to the selected or first one just because a
+    // cell re-rendered or a row arrived. Only when there is no single stop — at activation, where
+    // every member may render as one, or after new members have — is one picked.
+    const { activeElement } = document;
+
+    const focused = activeMembers.find(
+      (element) => element === activeElement || element.contains(activeElement),
+    );
+
+    const holders = activeMembers.filter((element) => element.getAttribute('tabindex') === '0');
+
     const tabStop =
-      this.rovingTabStop === 'selected'
-        ? (activeMembers.find(
-            (element) => element.getAttribute(this.childSelectedAttr) === 'true',
-          ) ?? activeMembers[0])
-        : activeMembers[0];
+      focused ??
+      (holders.length === 1
+        ? holders[0]
+        : ((this.rovingTabStop === 'selected'
+            ? activeMembers.find(
+                (element) => element.getAttribute(this.childSelectedAttr) === 'true',
+              )
+            : undefined) ?? activeMembers[0]));
 
     allMembers.forEach((element) => {
-      element.tabIndex = element === tabStop ? 0 : -1;
+      // Only touch the DOM when it changes; this runs on every mutation of a large widget. The
+      // attribute is what’s compared: a `<button>` reports a `tabIndex` of 0 without one, and the
+      // popup looks the tab stop up by attribute.
+      setTabIndex(element, element === tabStop ? 0 : -1);
     });
   }
 
+  /**
+   * Count the columns of a grid layout from where the members sit, rather than from their widths:
+   * a row of a data grid spans the full width, a tile in a grid listbox doesn’t, and a header row
+   * may have no box at all.
+   * @returns {number} Number of members per visual row, at least 1.
+   */
+  get columnCount() {
+    // Members without a layout box don’t occupy a column
+    const laidOut = this.allMembers.filter((member) => member.getClientRects().length);
+    const firstTop = laidOut[0]?.getBoundingClientRect().top;
+
+    const count = laidOut.findIndex(
+      (member) => Math.abs(member.getBoundingClientRect().top - firstTop) > 1,
+    );
+
+    // Everything on one visual row when nothing wraps
+    return Math.max(1, count === -1 ? laidOut.length : count);
+  }
+
   /**
    * CSS selector to retrieve the members.
    * @type {string}
@@ -721,18 +793,17 @@ export class Group {
     });
 
     if (this.focusChild) {
-      // Wait a bit before the elements are rerendered. A single frame serves the whole group;
-      // scheduling a callback per member would queue thousands of them on a large widget.
-      globalThis.requestAnimationFrame(() => {
-        affected.forEach((element) => {
-          element.tabIndex = element === newTarget ? 0 : -1;
-        });
-
-        if (targetAffected) {
-          newTarget.focus();
-          newTarget.dispatchEvent(new CustomEvent('Focus'));
-        }
+      // Done right away rather than on the next frame: a key that repeats, or a second press
+      // before the frame, has to start from the member that was just reached, which it reads
+      // from the focus
+      affected.forEach((element) => {
+        setTabIndex(element, element === newTarget ? 0 : -1);
       });
+
+      if (targetAffected) {
+        newTarget.focus();
+        newTarget.dispatchEvent(new CustomEvent('Focus'));
+      }
     }
 
     this.parent.dispatchEvent(
@@ -786,22 +857,85 @@ export class Group {
     const { allMembers, activeMembers } = this;
 
     /** @type {HTMLElement | undefined} */
+    // A field the user is typing in keeps its keys: the caret moves, the text changes. Escape and
+    // Tab still reach the group, so a menu holding a field can be left the usual ways.
+    if (
+      target !== this.parent &&
+      target.matches('input, textarea, select, [contenteditable]:not([contenteditable="false"])') &&
+      key !== 'Escape' &&
+      key !== 'Tab'
+    ) {
+      return;
+    }
+
     const currentTarget = (() => {
       if (!this.focusChild) {
         return activeMembers.find((member) => member.matches('.focused'));
       }
 
-      if (target.matches(this.selector)) {
-        return target;
-      }
+      // A key pressed on a control inside a member, such as a checkbox in a grid row, moves from
+      // that member
+      const member = /** @type {HTMLElement | null} */ (target.closest(this.selector));
 
-      return undefined;
+      return member && this.parent.contains(member) ? member : undefined;
     })();
 
     if (['Enter', ' ', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
       event.preventDefault();
     }
 
+    // Home, End and type-ahead only apply to keystrokes on the group itself or on a member. A text
+    // field nested in a menu, say, keeps them for its own caret and content.
+    const fromMember = target === this.parent || target.matches(this.selector);
+
+    // Home and End jump to the ends of the group, in any layout
+    if (key === 'Home' || key === 'End') {
+      if (!fromMember) {
+        return;
+      }
+
+      event.preventDefault();
+
+      const newTarget = activeMembers[key === 'Home' ? 0 : activeMembers.length - 1];
+
+      if (newTarget && newTarget !== currentTarget) {
+        this.selectTarget(event, newTarget);
+      }
+
+      return;
+    }
+
+    // Type-ahead: a printable character moves to the next member whose label starts with what has
+    // been typed so far, as in a native `<select>` and per the Listbox and Menu patterns. This goes
+    // by the visible label, not the search value, which may hold synonyms for filtering — and by
+    // the label element rather than the whole text, which would take in icon ligature names.
+    if (key.length === 1 && key !== ' ' && fromMember && (this.role === 'listbox' || isMenu)) {
+      // Swallow the key whether or not it matches, as a native `<select>` does. Left to the
+      // browser, a printable key on a non-editable element starts Firefox’s find-as-you-type.
+      event.preventDefault();
+
+      const labels = activeMembers.map((member) =>
+        normalize(
+          member.dataset.label ??
+            member.querySelector('.label')?.textContent ??
+            member.textContent ??
+            '',
+        ),
+      );
+
+      const index = findTypeAheadMatch(
+        labels,
+        this.#typeAhead.push(key),
+        currentTarget ? activeMembers.indexOf(currentTarget) : -1,
+      );
+
+      if (index !== -1 && activeMembers[index] !== currentTarget) {
+        this.selectTarget(event, activeMembers[index]);
+      }
+
+      return;
+    }
+
     if (key === 'Enter') {
       currentTarget?.click(); // Also close the popup if needed
 
@@ -858,17 +992,31 @@ export class Group {
     let newTarget;
 
     if (this.grid) {
-      const colCount = Math.floor(this.parent.clientWidth / activeMembers[0].clientWidth);
+      const colCount = this.columnCount;
+      const lastIndex = allMembers.length - 1;
       const _isRTL = isRTL();
 
       index = currentTarget ? allMembers.indexOf(currentTarget) : -1;
 
+      // With nothing focused yet, the arrows start from either end, as in a list
+      if (index === -1) {
+        const forward = key === 'ArrowDown' || key === (_isRTL ? 'ArrowLeft' : 'ArrowRight');
+        const backward = key === 'ArrowUp' || key === (_isRTL ? 'ArrowRight' : 'ArrowLeft');
+
+        if (forward) {
+          [newTarget] = activeMembers;
+        } else if (backward) {
+          newTarget = activeMembers[activeMembers.length - 1];
+        }
+      }
+
       if (key === 'ArrowUp' && index > 0) {
-        newTarget = allMembers[index - colCount];
+        newTarget = allMembers[Math.max(index - colCount, 0)];
       }
 
-      if (key === 'ArrowDown' && index < allMembers.length - 1) {
-        newTarget = allMembers[index + colCount];
+      if (key === 'ArrowDown' && index !== -1 && index < lastIndex) {
+        // A partial last row still gets reached
+        newTarget = allMembers[Math.min(index + colCount, lastIndex)];
       }
 
       // In RTL, ArrowLeft moves right (next), ArrowRight moves left (previous)
@@ -876,7 +1024,7 @@ export class Group {
         newTarget = allMembers[index + (_isRTL ? 1 : -1)];
       }
 
-      if (key === 'ArrowRight' && index < allMembers.length - 1) {
+      if (key === 'ArrowRight' && index !== -1 && index < lastIndex) {
         newTarget = allMembers[index + (_isRTL ? -1 : 1)];
       }
 
@@ -929,6 +1077,7 @@ export class Group {
    * Clean up event listeners.
    */
   destroy() {
+    this.#typeAhead.reset();
     this.observer.disconnect();
     this.parent.removeEventListener('click', this._onClick);
     this.parent.removeEventListener('keydown', this._onKeyDown);

package/dist/services/popup.svelte.js

@@ -115,10 +115,33 @@ class Popup {
       const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
       const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
 
-      if (!this.isDisabled && !this.isReadOnly && ['Enter', ' '].includes(key) && !hasModifier) {
+      if (this.isDisabled || this.isReadOnly) {
+        return;
+      }
+
+      if (['Enter', ' '].includes(key) && !hasModifier) {
         event.preventDefault();
         event.stopPropagation();
         this.open = !this.open;
+
+        return;
+      }
+
+      // The arrow keys open a listbox or menu, the way they do a native `<select>`; Alt+Down is the
+      // combobox convention (APG Select-Only Combobox, Menu Button). They never close one: inside
+      // the popup they belong to the list. A menu item that opens a submenu is left alone: there
+      // the arrows move through the parent menu, and the submenu opens with the inline arrow.
+      if (
+        ['ArrowDown', 'ArrowUp'].includes(key) &&
+        !(shiftKey || ctrlKey || metaKey) &&
+        (!altKey || key === 'ArrowDown') &&
+        ['listbox', 'menu'].includes(anchorElement.getAttribute('aria-haspopup') ?? '') &&
+        !anchorElement.matches('[role^="menuitem"]') &&
+        !this.open
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.open = true;
       }
     });
 

package/dist/services/select.svelte.d.ts

@@ -20,6 +20,11 @@ export class OptionRegistry {
      * @returns {number} Count.
      */
     get count(): number;
+    /**
+     * Registered options, in registration order.
+     * @returns {OptionEntry[]} Entries.
+     */
+    get entries(): OptionEntry[];
     /**
      * The option that is currently marked as selected, if any.
      * @returns {OptionEntry | undefined} Matching option.

package/dist/services/select.svelte.js

@@ -42,6 +42,14 @@ export class OptionRegistry {
     return this.#entries.length;
   }
 
+  /**
+   * Registered options, in registration order.
+   * @returns {OptionEntry[]} Entries.
+   */
+  get entries() {
+    return this.#entries;
+  }
+
   /**
    * The option that is currently marked as selected, if any.
    * @returns {OptionEntry | undefined} Matching option.

package/dist/services/type-ahead.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Type-ahead support shared by the composite widgets: the collapsed select-only combobox, and the
+ * listbox and menu groups.
+ */
+/**
+ * How long, in milliseconds, successive keystrokes keep adding up to one type-ahead prefix.
+ */
+export const TYPE_AHEAD_TIMEOUT: 500;
+/**
+ * Keystroke buffer behind type-ahead: printable keys typed in quick succession make up a prefix,
+ * which is dropped again after a short pause.
+ */
+export class TypeAhead {
+    /**
+     * Add a keystroke to the prefix.
+     * @param {string} key Printable key.
+     * @returns {string} Current prefix.
+     */
+    push(key: string): string;
+    /**
+     * Drop the prefix.
+     */
+    reset(): void;
+    #private;
+}
+export function findTypeAheadMatch(labels: string[], prefix: string, currentIndex: number): number;

package/dist/services/type-ahead.js

@@ -0,0 +1,81 @@
+/**
+ * Type-ahead support shared by the composite widgets: the collapsed select-only combobox, and the
+ * listbox and menu groups.
+ */
+
+/**
+ * How long, in milliseconds, successive keystrokes keep adding up to one type-ahead prefix.
+ */
+export const TYPE_AHEAD_TIMEOUT = 500;
+
+/**
+ * Keystroke buffer behind type-ahead: printable keys typed in quick succession make up a prefix,
+ * which is dropped again after a short pause.
+ */
+export class TypeAhead {
+  /** @type {string} */
+  #prefix = '';
+
+  /** @type {number} */
+  #timer = 0;
+
+  /**
+   * Add a keystroke to the prefix.
+   * @param {string} key Printable key.
+   * @returns {string} Current prefix.
+   */
+  push(key) {
+    globalThis.clearTimeout(this.#timer);
+    this.#prefix += key.toLocaleLowerCase();
+    this.#timer = /** @type {number} */ (
+      /** @type {unknown} */ (
+        globalThis.setTimeout(() => {
+          this.#prefix = '';
+        }, TYPE_AHEAD_TIMEOUT)
+      )
+    );
+
+    return this.#prefix;
+  }
+
+  /**
+   * Drop the prefix.
+   */
+  reset() {
+    globalThis.clearTimeout(this.#timer);
+    this.#prefix = '';
+  }
+}
+
+/**
+ * Find the item that a type-ahead prefix lands on, the way a native `<select>` does. A single
+ * character moves to the next item after the current one whose label starts with it, wrapping
+ * around, and a repeated character (“aa”, …) keeps cycling through those. A longer prefix refines
+ * the match from the current item, which is where the first character landed.
+ * @param {string[]} labels Normalized item labels, in order.
+ * @param {string} prefix Normalized prefix typed so far.
+ * @param {number} currentIndex Index of the current item, or `-1` if there is none.
+ * @returns {number} Index of the matching item, or `-1` if nothing matches.
+ */
+export const findTypeAheadMatch = (labels, prefix, currentIndex) => {
+  if (!prefix) {
+    return -1;
+  }
+
+  const cycling = prefix.length > 1 && [...prefix].every((char) => char === prefix[0]);
+  const needle = cycling ? prefix[0] : prefix;
+  // A single or repeated character is a request to move on, so the search starts after the current
+  // item; a longer prefix is refining what the first character found, so it starts there
+  const start = prefix.length === 1 || cycling ? currentIndex + 1 : Math.max(currentIndex, 0);
+  const { length } = labels;
+
+  for (let i = 0; i < length; i += 1) {
+    const index = (start + i) % length;
+
+    if (labels[index].startsWith(needle)) {
+      return index;
+    }
+  }
+
+  return -1;
+};

package/dist/styles/core.scss

@@ -46,6 +46,7 @@
 
   :focus-visible {
     outline-color: var(--sui-focus-ring-color);
+    outline-offset: var(--sui-focus-ring-offset, 0);
     z-index: 2;
   }
 
@@ -158,19 +159,19 @@
     padding-inline-start: 12px;
   }
 
-  :is(.disabled, .readonly, [aria-disabled="true"], [aria-readonly="true"], [inert]):not(body) {
+  :is(.disabled, [aria-disabled="true"], [inert]):not(body) {
     cursor: default;
     pointer-events: none;
     -webkit-user-select: none;
     user-select: none;
-    filter: grayscale(1) opacity(0.35);
+    filter: grayscale(1) opacity(var(--sui-disabled-opacity, 0.35));
 
     * {
       filter: grayscale(0) opacity(1); // Maintain the opacity on child nodes
     }
   }
 
-  :is(.disabled, .readonly, [aria-disabled="true"], [aria-readonly="true"], [inert]) {
+  :is(.disabled, [aria-disabled="true"], [inert]) {
     * {
       cursor: default;
       pointer-events: none;
@@ -178,4 +179,14 @@
       user-select: none;
     }
   }
+
+  // A read-only control is not inactive: its value is content the user reads and copies, so it
+  // keeps full contrast and stays selectable (WCAG 1.4.3). Only the cursor changes.
+  :is(.readonly, [aria-readonly="true"]):not(body) {
+    cursor: default;
+
+    * {
+      cursor: default;
+    }
+  }
 }

package/dist/styles/variables.scss

@@ -72,6 +72,102 @@
   --sui-alert-border-color-lightness: 38%;
 }
 
+// High-contrast variants, layered over the light and dark themes for `prefers-contrast: more` (or
+// `data-contrast="more"`). Every text colour reaches 7:1 and every control boundary 3:1 or better;
+// the translucent and faded treatments the default themes use for hierarchy are made opaque.
+@mixin high-contrast-light {
+  --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 10%; // primary, 17.5:1
+  --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 18%; // secondary, 13.7:1
+  --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 28%; // tertiary, 9.3:1
+  --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 45%; // disabled, 4.8:1
+  // The surface levels are spread further apart, so panels read as panels without relying on
+  // the faint default steps
+  --sui-background-color-3-hsl: var(--sui-base-hue) 5% 93%; // secondary
+  --sui-background-color-4-hsl: var(--sui-base-hue) 5% 88%; // tertiary/disabled
+  --sui-background-color-5-hsl: var(--sui-base-hue) 5% 70%; // highlight
+  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 40%; // control, 5.8:1
+  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 55%; // primary, 3.4:1
+  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 65%; // secondary
+  // Accents
+  --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 32%); // 8:1
+  --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 37%);
+  --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 32%);
+  --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 26%);
+  // Alerts
+  --sui-alert-foreground-color-lightness: 18%;
+  --sui-alert-border-color-saturation: 55%;
+  --sui-alert-border-color-lightness: 40%;
+  @include high-contrast-common;
+}
+
+@mixin high-contrast-dark {
+  --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 92%; // primary, 15.3:1
+  --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 85%; // secondary, 12.9:1
+  --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 75%; // tertiary, 9.9:1
+  --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 55%; // disabled, 5.4:1
+  // Near-black content and input surfaces with distinctly lighter panels, the way macOS treats
+  // its own windows with Increase Contrast on
+  --sui-background-color-1-hsl: var(--sui-base-hue) 10% 4%; // content/input
+  --sui-background-color-2-hsl: var(--sui-base-hue) 10% 7%; // primary
+  --sui-background-color-3-hsl: var(--sui-base-hue) 10% 12%; // secondary
+  --sui-background-color-4-hsl: var(--sui-base-hue) 10% 18%; // tertiary/disabled
+  --sui-background-color-5-hsl: var(--sui-base-hue) 10% 40%; // highlight
+  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 60%; // control, 6.4:1
+  --sui-border-color-2-hsl: var(--sui-base-hue) 10% 50%; // primary, 4.5:1
+  --sui-border-color-3-hsl: var(--sui-base-hue) 10% 40%; // secondary, 3.1:1
+  // Accents. The fill stays put: lighter would lose the white label on a primary button, darker
+  // would lose the fill against the page. The text accent and the focus ring go lighter instead.
+  --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 70%); // 8.3:1
+  --sui-focus-ring-color: var(--sui-primary-accent-color-text);
+  // Alerts
+  --sui-alert-foreground-color-lightness: 85%;
+  --sui-alert-border-color-saturation: 55%;
+  --sui-alert-border-color-lightness: 55%;
+  @include high-contrast-common;
+}
+
+// Apply the high-contrast variant matching the active theme, however the theme was chosen
+@mixin high-contrast-themes {
+  &[data-theme="light"] {
+    @include high-contrast-light;
+  }
+
+  &[data-theme="dark"] {
+    @include high-contrast-dark;
+  }
+
+  &:not([data-theme]) {
+    @media (prefers-color-scheme: light) {
+      @include high-contrast-light;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      @include high-contrast-dark;
+    }
+  }
+}
+
+// Shared by both high-contrast variants: solid state backgrounds and boundaries in place of the
+// translucent ones, and placeholder text at full strength
+@mixin high-contrast-common {
+  --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 60%);
+  --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl));
+  --sui-active-background-color: hsl(var(--sui-background-color-5-hsl));
+  --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
+  --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
+  --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
+  --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 70%);
+  --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 60%);
+  // A text box shares the page background, so its border is what marks the field
+  --sui-textbox-border-color: hsl(var(--sui-border-color-1-hsl));
+  --sui-textbox-placeholder-foreground-color: var(--sui-tertiary-foreground-color);
+  --sui-textbox-placeholder-opacity: 1;
+  // Disabled controls are dimmed less; the loss of colour still marks them
+  --sui-disabled-opacity: 0.6;
+  // Dialogs and drawers get an outline, as the OS draws around its own windows
+  --sui-modal-border-width: 1px;
+}
+
 :global {
   :root,
   :host {
@@ -128,9 +224,16 @@
       var(--sui-success-color-hue) var(--sui-alert-background-color-saturation)
         var(--sui-alert-background-color-lightness)
     );
+    // Disabled controls: how far they fade (they also lose their colour)
+    --sui-disabled-opacity: 0.35;
+    // Dialog & drawer outline; none by default, drawn by the high-contrast theme
+    --sui-modal-border-width: 0;
     // Outline
     --sui-focus-ring-width: 2px;
-    --sui-focus-ring-color: var(--sui-primary-accent-color-translucent);
+    // Opaque, so the ring reaches 3:1 against the page (WCAG 1.4.11); the offset keeps a sliver of
+    // page background between the ring and a control filled with the same accent colour
+    --sui-focus-ring-color: var(--sui-primary-accent-color);
+    --sui-focus-ring-offset: 1px;
     // Borders
     --sui-primary-border-color: hsl(var(--sui-border-color-2-hsl));
     --sui-secondary-border-color: hsl(var(--sui-border-color-3-hsl));
@@ -290,5 +393,19 @@
         @include dark-theme;
       }
     }
+
+    // High contrast is a second dimension on top of the light/dark theme, and is resolved the same
+    // way: `data-contrast="more"` turns it on, any other value keeps the standard palette, and
+    // without the attribute the system setting decides. The selectors here are more specific than
+    // the theme blocks above, so these overrides win whichever way the theme was picked.
+    &[data-contrast="more"] {
+      @include high-contrast-themes;
+    }
+
+    &:not([data-contrast]) {
+      @media (prefers-contrast: more) {
+        @include high-contrast-themes;
+      }
+    }
   }
 }