@sveltia/ui 0.72.2 → 0.73.0

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;
+      }
+    }
   }
 }

package/dist/typedefs.d.ts

@@ -205,9 +205,15 @@ export type ModalProps = {
 };
 export type DialogProps = {
     /**
-     * Text label displayed on the header. Required.
+     * Text label displayed on the header. Required. With a custom `header`
+     * snippet, it’s used as the dialog’s `aria-label` instead.
      */
     title?: string | undefined;
+    /**
+     * ID of the element that labels the dialog, typically a heading
+     * inside a custom `header` snippet. Takes precedence over `title` for the accessible name.
+     */
+    ariaLabelledby?: string | undefined;
     /**
      * The `role` attribute on the `<dialog>` element.
      */

package/dist/typedefs.js

@@ -77,7 +77,10 @@
 
 /**
  * @typedef {object} DialogProps
- * @property {string} [title] Text label displayed on the header. Required.
+ * @property {string} [title] Text label displayed on the header. Required. With a custom `header`
+ * snippet, it’s used as the dialog’s `aria-label` instead.
+ * @property {string} [ariaLabelledby] ID of the element that labels the dialog, typically a heading
+ * inside a custom `header` snippet. Takes precedence over `title` for the accessible name.
  * @property {'dialog' | 'alertdialog'} [role] The `role` attribute on the `<dialog>` element.
  * @property {'small' | 'medium' | 'large' | 'x-large'} [size] Width of the dialog.
  * @property {string} [class] The `class` attribute on the `<dialog>` element.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.72.2",
+  "version": "0.73.0",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -64,12 +64,12 @@
     "eslint-config-airbnb-extended": "^3.2.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^64.3.10",
+    "eslint-plugin-jsdoc": "^64.4.0",
     "eslint-plugin-package-json": "^1.8.1",
     "eslint-plugin-svelte": "^3.23.0",
     "globals": "^17.12.0",
     "happy-dom": "^20.14.5",
-    "oxlint": "^1.82.0",
+    "oxlint": "^1.83.0",
     "playwright": "^1.63.0",
     "postcss": "^8.5.28",
     "postcss-html": "^2.0.0",