@latty-ds/web 0.10.3 → 1.0.0

package/dist/components/select/index.js

@@ -9,8 +9,12 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 
+// src/components/shared/form-field.ts
+var fieldCount = 0;
+var createFieldIds = () => ({ helper: `lt-field-${fieldCount++}-helper` });
+
 // src/components/select/select.ts
-import { html as html3 } from "lit";
+import { html as html3, nothing } from "lit";
 
 // src/base/themeable-element.ts
 import { LitElement } from "lit";
@@ -1448,8 +1452,8 @@ var selectStyles = [
     }
 
     .required-indicator {
-      color: var(--lt-color-error-500);
-      margin-left: var(--lt-spacing-1);
+      color: var(--lt-text-error);
+      margin-inline-start: var(--lt-spacing-1);
     }
 
     .select-container {
@@ -1531,7 +1535,7 @@ var selectStyles = [
       cursor: pointer;
       display: flex;
       font-family: inherit;
-      text-align: left;
+      text-align: start;
       transition: background-color 80ms ease;
       width: 100%;
     }
@@ -1540,7 +1544,7 @@ var selectStyles = [
       background: var(--lt-bg-surface);
     }
 
-    .option:focus-visible {
+    .option[data-active='true'] {
       background: var(--lt-bg-surface);
       outline: 2px solid var(--lt-interactive-primary-bg);
       outline-offset: -2px;
@@ -1624,6 +1628,16 @@ var selectStyles = [
     :host([variant='default']) .helper-text {
       color: var(--lt-text-subtle);
     }
+
+    /* ── Reduced motion ───────────────────────────────────────────────────── */
+
+    @media (prefers-reduced-motion: reduce) {
+      .select-trigger,
+      .icon-end,
+      .option {
+        transition: none;
+      }
+    }
   `
 ];
 
@@ -1702,6 +1716,14 @@ var surfaceStyles = css3`
   :host([appearance='outlined']:hover) .surface {
     border-color: var(--lt-border-strong);
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .surface {
+      transition: none;
+    }
+  }
 `;
 
 // src/components/surface/surface.ts
@@ -1904,6 +1926,20 @@ var textStyles = css4`
 `;
 
 // src/components/text/text.ts
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "span",
+  "div",
+  "label",
+  "strong",
+  "em"
+]);
 var VARIANT_TAG = {
   "display-2xl": "p",
   "display-xl": "p",
@@ -1928,7 +1964,8 @@ var Text = class extends ThemeableElement {
     this.as = "";
   }
   render() {
-    const tag = unsafeStatic(this.as || VARIANT_TAG[this.variant] || "p");
+    const requested = this.as && ALLOWED_TAGS.has(this.as) ? this.as : "";
+    const tag = unsafeStatic(requested || VARIANT_TAG[this.variant] || "p");
     return html2`<${tag} part="base"><slot></slot></${tag}>`;
   }
 };
@@ -1943,13 +1980,59 @@ Text = __decorateClass([
   customElement2("lt-text")
 ], Text);
 
+// src/components/shared/form-default.ts
+var FormDefaultController = class {
+  constructor(host, get) {
+    this._captured = false;
+    this._get = get;
+    host.addController(this);
+  }
+  hostConnected() {
+    if (this._captured) return;
+    this._captured = true;
+    this.value = this._get();
+  }
+};
+
+// src/components/shared/form-disabled.ts
+var FormDisabledController = class {
+  constructor(host) {
+    this._fieldsetDisabled = false;
+    this._host = host;
+    host.addController(this);
+  }
+  // No-op — this controller has no connect-time work of its own (formDisabledCallback drives it instead), but
+  // ReactiveController's members are all optional, and a class satisfying an all-optional interface with no
+  // members in common is a TS error (TS2559); this gives it one.
+  hostConnected() {
+  }
+  /** Whether an ancestor `<fieldset>` is currently disabled. */
+  get fieldsetDisabled() {
+    return this._fieldsetDisabled;
+  }
+  setFieldsetDisabled(disabled) {
+    if (this._fieldsetDisabled === disabled) return;
+    this._fieldsetDisabled = disabled;
+    this._host.requestUpdate();
+  }
+};
+
 // src/components/select/select.ts
+var selectCount = 0;
+var DEFAULT_LABELS = {
+  validationMessage: "Please select an option"
+};
 var Select = class extends ThemeableElement {
   constructor() {
     super();
+    this._default = new FormDefaultController(this, () => this.value);
+    this._fieldsetDisabled = new FormDisabledController(this);
+    // Scopes generated option/listbox ids to this instance, so two selects on the same page don't collide.
+    this._uid = `lt-select-${selectCount++}`;
     this.variant = "default";
     this.size = "md";
     this.value = "";
+    this.multiple = false;
     this.placeholder = "Select an option";
     this.label = "";
     this.name = "";
@@ -1957,17 +2040,42 @@ var Select = class extends ThemeableElement {
     this.disabled = false;
     this.required = false;
     this.options = [];
+    this.labels = {};
     this.isOpen = false;
+    this.activeIndex = -1;
     this._cleanupClickOutside = null;
     this._floatingCleanup = null;
+    this._fieldIds = createFieldIds();
     this._internals = this.attachInternals();
   }
+  get _selected() {
+    if (Array.isArray(this.value)) return this.value;
+    return this.value ? [this.value] : [];
+  }
+  get _labels() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  get enabledOptions() {
+    return this.options.filter((o) => !o.disabled);
+  }
+  // Ids are derived from position in the full option list (disabled options included), since that's what's
+  // actually rendered.
+  _idFor(option) {
+    return `${this._uid}-option-${this.options.indexOf(option)}`;
+  }
+  // Clicking an option button would otherwise focus it first (the default mousedown action) — a button that
+  // momentarily takes focus, then vanishes as the dropdown closes, drops focus to nothing sensible. Suppressing
+  // just that default action leaves the click itself (and selectOption) untouched, and the trigger — which
+  // never lost focus to begin with — stays the active element throughout.
+  _preventFocusSteal(e) {
+    e.preventDefault();
+  }
   /**
    * Toggles the dropdown open/closed state.
    * @private
    */
   toggleDropdown() {
-    if (!this.disabled) {
+    if (!this._isDisabled) {
       this.isOpen = !this.isOpen;
     }
   }
@@ -1987,6 +2095,12 @@ var Select = class extends ThemeableElement {
    */
   selectOption(option) {
     if (option.disabled) return;
+    if (this.multiple) {
+      const current = this._selected;
+      this.value = current.includes(option.value) ? current.filter((v) => v !== option.value) : [...current, option.value];
+      dispatch(this, "change", { value: this.value });
+      return;
+    }
     this.value = option.value;
     this.closeDropdown();
     dispatch(this, "change", { value: this.value });
@@ -1999,32 +2113,34 @@ var Select = class extends ThemeableElement {
    * @private
    */
   handleKeydown(e) {
-    if (this.disabled) return;
+    if (this._isDisabled) return;
     const { key } = e;
-    if (!this.isOpen && (key === "Enter" || key === " " || key === "ArrowDown" || key === "ArrowUp")) {
-      e.preventDefault();
-      this.isOpen = true;
+    if (!this.isOpen) {
+      if (key === "Enter" || key === " " || key === "ArrowDown" || key === "ArrowUp") {
+        e.preventDefault();
+        this.isOpen = true;
+      }
       return;
     }
-    if (this.isOpen) {
-      if (key === "Escape") {
+    const enabled = this.enabledOptions;
+    switch (key) {
+      case "Escape":
         e.preventDefault();
         this.closeDropdown();
-        return;
-      }
-      if (key === "ArrowDown" || key === "ArrowUp") {
+        break;
+      case "ArrowDown":
         e.preventDefault();
-        const options = this.shadowRoot?.querySelectorAll(".option:not([disabled])");
-        if (!options || options.length === 0) return;
-        const currentIndex = Array.from(options).findIndex((opt) => opt === this.shadowRoot?.activeElement);
-        let nextIndex = currentIndex;
-        if (key === "ArrowDown") {
-          nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;
-        } else {
-          nextIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;
-        }
-        options[nextIndex]?.focus();
-      }
+        if (enabled.length > 0) this.activeIndex = this.activeIndex < enabled.length - 1 ? this.activeIndex + 1 : 0;
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (enabled.length > 0) this.activeIndex = this.activeIndex > 0 ? this.activeIndex - 1 : enabled.length - 1;
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (enabled[this.activeIndex]) this.selectOption(enabled[this.activeIndex]);
+        break;
     }
   }
   connectedCallback() {
@@ -2043,19 +2159,33 @@ var Select = class extends ThemeableElement {
    * @private
    */
   getSelectedLabel() {
-    const selected = this.options.find((opt) => opt.value === this.value);
+    if (this.multiple) {
+      return this._selected.map((v) => this.options.find((opt) => opt.value === v)?.label).filter((label) => Boolean(label)).join(", ");
+    }
+    const selected = this.options.find((opt) => opt.value === this._selected[0]);
     return selected ? selected.label : "";
   }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (this.multiple && !Array.isArray(this.value)) this.value = this._selected;
+  }
   updated(changedProperties) {
-    this._internals.setFormValue(this.value || null);
+    if (this.multiple) {
+      const formData = new FormData();
+      if (this.name) for (const v of this._selected) formData.append(this.name, v);
+      this._internals.setFormValue(formData);
+    } else {
+      this._internals.setFormValue(this._selected[0] || null);
+    }
     const trigger = this.shadowRoot?.querySelector(".select-trigger");
-    if (this.required && !this.value && trigger) {
-      this._internals.setValidity({ valueMissing: true }, "Please select an option", trigger);
+    if (this.required && this._selected.length === 0 && trigger) {
+      this._internals.setValidity({ valueMissing: true }, this._labels.validationMessage, trigger);
     } else {
       this._internals.setValidity({});
     }
     if (!changedProperties.has("isOpen")) return;
     if (this.isOpen) {
+      this.activeIndex = -1;
       this.setAttribute("open", "");
       const selectTrigger = this.shadowRoot.querySelector(".select-trigger");
       const listbox = this.shadowRoot.querySelector("lt-surface.dropdown");
@@ -2071,7 +2201,14 @@ var Select = class extends ThemeableElement {
     }
   }
   formResetCallback() {
-    this.value = "";
+    this.value = this._default.value;
+  }
+  formDisabledCallback(disabled) {
+    this._fieldsetDisabled.setFieldsetDisabled(disabled);
+  }
+  /** `this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`). */
+  get _isDisabled() {
+    return this.disabled || this._fieldsetDisabled.fieldsetDisabled;
   }
   checkValidity() {
     return this._internals.checkValidity();
@@ -2081,7 +2218,9 @@ var Select = class extends ThemeableElement {
   }
   render() {
     const selectedLabel = this.getSelectedLabel();
-    const hasValue = Boolean(this.value && selectedLabel);
+    const hasValue = Boolean(this._selected.length && selectedLabel);
+    const activeOption = this.enabledOptions[this.activeIndex];
+    const listboxId = `${this._uid}-listbox`;
     return html3`
       <div class="wrapper">
         ${this.label ? html3`
@@ -2096,9 +2235,12 @@ var Select = class extends ThemeableElement {
             role="combobox"
             aria-haspopup="listbox"
             aria-expanded=${this.isOpen}
-            aria-disabled=${this.disabled}
+            aria-disabled=${this._isDisabled}
             aria-label=${this.label || this.placeholder}
-            tabindex=${this.disabled ? "-1" : "0"}
+            aria-describedby=${this.helperText ? this._fieldIds.helper : nothing}
+            aria-controls=${this.isOpen ? listboxId : nothing}
+            aria-activedescendant=${this.isOpen && activeOption ? this._idFor(activeOption) : nothing}
+            tabindex=${this._isDisabled ? "-1" : "0"}
             @click=${this.toggleDropdown}
             @keydown=${this.handleKeydown}
           >
@@ -2108,29 +2250,29 @@ var Select = class extends ThemeableElement {
             <lt-icon class="icon-end" name="caret-down"></lt-icon>
           </div>
           <lt-surface
+            id=${listboxId}
             class="dropdown"
             popover="manual"
             elevation="2"
             appearance="outlined"
             background="--lt-bg-default"
             role="listbox"
+            aria-multiselectable=${this.multiple ? "true" : nothing}
             part="listbox"
           >
             <div class="options-container">
               ${this.options.map(
       (option) => html3`
                   <button
+                    id=${this._idFor(option)}
                     class="option"
                     role="option"
-                    aria-selected=${option.value === this.value}
+                    tabindex="-1"
+                    aria-selected=${this._selected.includes(option.value)}
                     ?disabled=${option.disabled}
+                    data-active=${option === activeOption}
+                    @mousedown=${this._preventFocusSteal}
                     @click=${() => this.selectOption(option)}
-                    @keydown=${(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          this.selectOption(option);
-        }
-      }}
                   >
                     ${option.label}
                   </button>
@@ -2139,7 +2281,9 @@ var Select = class extends ThemeableElement {
             </div>
           </lt-surface>
         </div>
-        ${this.helperText ? html3`<lt-text variant="caption" as="span" class="helper-text">${this.helperText}</lt-text>` : ""}
+        ${this.helperText ? html3`<lt-text id=${this._fieldIds.helper} variant="caption" as="span" class="helper-text"
+              >${this.helperText}</lt-text
+            >` : ""}
       </div>
     `;
   }
@@ -2153,8 +2297,11 @@ __decorateClass([
   property4({ reflect: true })
 ], Select.prototype, "size", 2);
 __decorateClass([
-  property4({ reflect: true })
+  property4()
 ], Select.prototype, "value", 2);
+__decorateClass([
+  property4({ type: Boolean, reflect: true })
+], Select.prototype, "multiple", 2);
 __decorateClass([
   property4({ reflect: true })
 ], Select.prototype, "placeholder", 2);
@@ -2176,9 +2323,15 @@ __decorateClass([
 __decorateClass([
   property4({ type: Array })
 ], Select.prototype, "options", 2);
+__decorateClass([
+  property4({ type: Object })
+], Select.prototype, "labels", 2);
 __decorateClass([
   state()
 ], Select.prototype, "isOpen", 2);
+__decorateClass([
+  state()
+], Select.prototype, "activeIndex", 2);
 Select = __decorateClass([
   customElement3("lt-select")
 ], Select);

package/dist/components/select/select.d.ts

@@ -1,5 +1,6 @@
+import { type PropertyValues } from 'lit';
 import { ThemeableElement } from '../../base';
-import { SelectOption, SelectSize, SelectVariant } from './select.types';
+import { SelectOption, SelectSize, SelectVariant, type SelectLabels } from './select.types';
 import '@latty-ds/icons';
 import '../surface/';
 import '../text/text';
@@ -8,7 +9,8 @@ import '../text/text';
  *
  * @element lt-select
  *
- * @fires {CustomEvent<{value: string}>} change - Dispatched when the selected value changes
+ * @fires {CustomEvent<{value: string | string[]}>} change - Dispatched when the selected value changes. With `multiple`,
+ *   `value` is the array of selected values.
  *
  * @example
  * ```html
@@ -38,6 +40,9 @@ export declare class Select extends ThemeableElement {
     static styles: import("lit").CSSResult[];
     static formAssociated: boolean;
     private _internals;
+    private _default;
+    private _fieldsetDisabled;
+    private readonly _uid;
     constructor();
     /**
      * Visual variant that determines styling.
@@ -50,10 +55,20 @@ export declare class Select extends ThemeableElement {
      */
     size: SelectSize;
     /**
-     * Current selected value.
+     * Current selected value. A string for a single select; with `multiple`, an array of the selected values. Not
+     * reflected as an attribute — read the property, or the `change` event's `detail.value`, instead of
+     * `getAttribute('value')`/`[value]` (consistent with the rest of the form controls; see `lt-textfield`'s
+     * equivalent doc comment for why).
      * @default ''
      */
-    value: string;
+    value: string | string[];
+    /**
+     * Allow more than one option to be selected. The option list stays open while picking, and `value` becomes an
+     * array of the selected values.
+     * @default false
+     */
+    multiple: boolean;
+    private get _selected();
     /**
      * Placeholder text shown when no option is selected.
      * @default 'Select an option'
@@ -89,13 +104,28 @@ export declare class Select extends ThemeableElement {
      * @default []
      */
     options: SelectOption[];
+    /** Overridable UI text (the required-field validation message), for i18n. English defaults — override only the keys you need. */
+    labels: Partial<SelectLabels>;
+    private get _labels();
     /**
      * Internal state tracking whether the dropdown is open.
      * @private
      */
     private isOpen;
+    /**
+     * Index of the highlighted option, into `enabledOptions` below (not `options`) — the same list the render
+     * and the keyboard handler both use, so they can never disagree about which option is highlighted (they used
+     * to: the index came from the enabled-only list, but the previous focus-based highlight came from whichever
+     * option actually held DOM focus, decided independently).
+     * @private
+     */
+    private activeIndex;
     private _cleanupClickOutside;
     private _floatingCleanup;
+    private readonly _fieldIds;
+    private get enabledOptions();
+    private _idFor;
+    private _preventFocusSteal;
     /**
      * Toggles the dropdown open/closed state.
      * @private
@@ -129,8 +159,12 @@ export declare class Select extends ThemeableElement {
      * @private
      */
     private getSelectedLabel;
+    willUpdate(changed: PropertyValues<this>): void;
     updated(changedProperties: Map<string, unknown>): void;
     formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    /** `this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`). */
+    private get _isDisabled();
     checkValidity(): boolean;
     reportValidity(): boolean;
     render(): import("lit").TemplateResult<1>;

package/dist/components/select/select.types.d.ts

@@ -35,3 +35,8 @@ export interface SelectOption {
      */
     disabled?: boolean;
 }
+/** Overridable UI text for `lt-select`, for i18n. */
+export interface SelectLabels {
+    /** Validation message shown when a required select has no option chosen. */
+    validationMessage: string;
+}

package/dist/components/shared/aria-forwarding.d.ts

@@ -12,7 +12,7 @@ import type { ReactiveController, ReactiveControllerHost } from 'lit';
  * element lives in the same tree as the internal control, so cross-shadow references
  * are forwarded but may be ignored by assistive technology.
  */
-export declare const FORWARDED_ARIA_ATTRIBUTES: readonly ["aria-pressed", "aria-expanded", "aria-haspopup", "aria-controls", "aria-current"];
+export declare const FORWARDED_ARIA_ATTRIBUTES: readonly ["aria-pressed", "aria-expanded", "aria-haspopup", "aria-controls", "aria-current", "aria-description"];
 type AriaForwardingHost = ReactiveControllerHost & Element;
 /**
  * Reactive controller that forwards {@link FORWARDED_ARIA_ATTRIBUTES} from the

package/dist/components/shared/form-default.d.ts

@@ -0,0 +1,30 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Captures a form-associated control's initial value the first time it connects — before any user interaction,
+ * or the control's own reflection, can overwrite it — so `formResetCallback` can restore what the markup
+ * actually asked for, the way a native `<input>`/`<select>` resets to its `defaultValue`/`defaultChecked`
+ * instead of a hard-coded empty one.
+ *
+ * A reconnect (an already-upgraded element moved in the DOM) does not recapture: only the very first connect
+ * counts as "the default", matching a real form control, which keeps its `defaultValue` fixed for its whole
+ * lifetime regardless of how many times it's detached and reattached.
+ *
+ * @example
+ * ```ts
+ * class Textfield extends ThemeableElement {
+ *   private _default = new FormDefaultController(this, () => this.value);
+ *
+ *   formResetCallback() {
+ *     this.value = this._default.value;
+ *   }
+ * }
+ * ```
+ */
+export declare class FormDefaultController<T> implements ReactiveController {
+    private _get;
+    private _captured;
+    /** The captured default. Only meaningful once the host has connected at least once. */
+    value: T;
+    constructor(host: ReactiveControllerHost, get: () => T);
+    hostConnected(): void;
+}

package/dist/components/shared/form-disabled.d.ts

@@ -0,0 +1,40 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Tracks whether this form control is disabled because it's a descendant of a disabled `<fieldset>` — kept
+ * separate from the component's own explicit `disabled` property/attribute, which a consumer controls directly
+ * and which the fieldset toggling on or off must never overwrite in either direction. This mirrors how a native
+ * `<input>`'s `.disabled` IDL property only ever reflects its own attribute: a disabled fieldset makes it match
+ * `:disabled` and stop responding, but never touches the attribute itself, so re-enabling the fieldset can't
+ * accidentally un-disable an input the page explicitly disabled.
+ *
+ * The browser already makes the host match the `:disabled`/`:enabled` CSS pseudo-classes automatically for any
+ * form-associated custom element the moment a fieldset ancestor's `disabled` changes — nothing has to be done
+ * for that (verified in Chromium). This controller is for the *functional* side, which the platform does not
+ * wire up on its own: call {@link setFieldsetDisabled} from the component's own `formDisabledCallback`, and
+ * combine {@link fieldsetDisabled} with the component's own `disabled` wherever that gates interaction or the
+ * inner native control's own `disabled`.
+ *
+ * @example
+ * ```ts
+ * class Textfield extends ThemeableElement {
+ *   private _fieldsetDisabled = new FormDisabledController(this);
+ *
+ *   formDisabledCallback(disabled: boolean) {
+ *     this._fieldsetDisabled.setFieldsetDisabled(disabled);
+ *   }
+ *
+ *   private get _isDisabled(): boolean {
+ *     return this.disabled || this._fieldsetDisabled.fieldsetDisabled;
+ *   }
+ * }
+ * ```
+ */
+export declare class FormDisabledController implements ReactiveController {
+    private _host;
+    private _fieldsetDisabled;
+    constructor(host: ReactiveControllerHost);
+    hostConnected(): void;
+    /** Whether an ancestor `<fieldset>` is currently disabled. */
+    get fieldsetDisabled(): boolean;
+    setFieldsetDisabled(disabled: boolean): void;
+}

package/dist/components/shared/form-field.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Stable id for a field's helper text, so the control can point `aria-describedby` at it. Ids only need to be
+ * unique within one shadow root, but a counter keeps them unique across the page too.
+ */
+export declare const createFieldIds: () => {
+    helper: string;
+};

package/dist/components/shared/form-validity.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copies a live `ValidityState` into a plain object with its own enumerable properties, suitable for passing to
+ * `ElementInternals.setValidity()`.
+ *
+ * `ValidityState`'s flags (`valueMissing`, `typeMismatch`, etc.) are getters on its prototype, not own properties
+ * on the instance — spreading it (`{ ...validity }`) or `Object.keys(validity)` sees none of them. Real browsers'
+ * WebIDL dictionary conversion reads each named member individually, so passing the live object to `setValidity`
+ * happens to work there; jsdom's implementation enumerates instead, so it silently sees an empty flags object and
+ * treats the control as always valid. Converting explicitly avoids relying on which enumeration strategy the
+ * runtime uses, and is correct either way.
+ *
+ * @example
+ * ```ts
+ * this._internals.setValidity(toValidityFlags(input.validity), input.validationMessage, input);
+ * ```
+ */
+export declare function toValidityFlags(validity: ValidityState): ValidityStateFlags;

package/dist/components/shared/roving.d.ts

@@ -0,0 +1,11 @@
+/** Items a user can reach with the keyboard: everything not disabled, in order. */
+export declare const enabledItems: <T extends {
+    disabled: boolean;
+}>(items: readonly T[]) => T[];
+/** The one item that's a Tab stop: the one matching `value`, else the first enabled item. */
+export declare const rovingTargetOf: <T extends {
+    disabled: boolean;
+    value: string;
+}>(enabled: readonly T[], value: string) => T | undefined;
+/** One step forward or back, wrapping at both ends. An index of -1 (not in the list) steps from the start. */
+export declare const stepIndex: (index: number, length: number, delta: 1 | -1) => number;

package/dist/components/shared/scroll-lock.d.ts

@@ -0,0 +1,2 @@
+export declare function lockBodyScroll(): void;
+export declare function unlockBodyScroll(): void;