@lilydesignsystem/svelte-headless 0.5.0 → 0.6.0

package/dist/components/MiddleTruncation/MiddleTruncation.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+    // MiddleTruncation component
+    //
+    // A string shortened in the middle to fit the width its container gives it ("report-fi…q3.pdf"), keeping the start and the
+    // end. The width is measured in the browser (canvas text metrics in the element's own font) and re-measured when the
+    // container resizes; until then, and on the server, the full text is shown.
+    //
+    // The full text always stays in the accessibility tree: the shortened string is aria-hidden and the whole text sits in a
+    // sibling the consumer visually hides. A screen reader, find-in-page and copy therefore get the real text, which a
+    // title attribute (hover only) or a text-only truncation would lose.
+    //
+    // Props:
+    //   class — string, optional. Consumer class appended after the base class.
+    //   text — string, required. The full text.
+    //   ellipsis — string, required. The cut marker. No default: the headless layer ships no text.
+    //   strategy — "even" | "fixed-end" | "min-end", default "even".
+    //     even: start and end share the room. fixed-end: exactly `end` characters at the end. min-end: even, but at least `end` at the end.
+    //   end — number, optional. Characters kept at the end for "fixed-end" and "min-end".
+    //   ...restProps — spread onto the root <span>.
+    //
+    // Markup:
+    //   <span class="middle-truncation" data-strategy data-truncated?>
+    //     <span class="middle-truncation-visual" aria-hidden="true">report-fi…q3.pdf</span>
+    //     <span class="middle-truncation-full">report-final-q3.pdf</span>
+    //   </span>
+    //
+    // Consumer CSS (the component ships none): the root must be a block with a bounded width, `overflow: hidden` and
+    // `white-space: nowrap`, and `.middle-truncation-full` must be visually hidden (clipped, not display:none).
+    //
+    // Keyboard: none.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no inline styles.
+    //   - No hardcoded user-facing strings: the ellipsis is a required prop.
+
+    import { onMount } from "svelte";
+    import { truncateMiddle, type TruncationStrategy } from "./middle-truncation";
+
+    let {
+        class: className = "",
+        text,
+        ellipsis,
+        strategy = "even",
+        end,
+        ...restProps
+    }: {
+        /** The full text. */
+        text: string;
+        /** The cut marker; no default. */
+        ellipsis: string;
+        /** How the room is shared between start and end. */
+        strategy?: TruncationStrategy;
+        /** Characters kept at the end for "fixed-end" and "min-end". */
+        end?: number;
+        [key: string]: unknown;
+    } = $props();
+
+    let root: HTMLSpanElement | undefined = $state();
+    let shown: string | null = $state(null);
+    const displayed = $derived(shown ?? text);
+
+    let context: CanvasRenderingContext2D | null | undefined;
+
+    function recalculate(): void {
+        if (!root) return;
+        const width = root.clientWidth;
+        if (context === undefined) context = document.createElement("canvas").getContext("2d");
+        if (!context || width <= 0) {
+            shown = null;
+            return;
+        }
+        const style = getComputedStyle(root);
+        context.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+        const ctx = context;
+        const result = truncateMiddle(text, { ellipsis, strategy, end, maxWidth: width, measure: (s) => ctx.measureText(s).width });
+        shown = result === text ? null : result;
+    }
+
+    // Re-measure whenever the text or the options change.
+    $effect(() => {
+        text; ellipsis; strategy; end;
+        recalculate();
+    });
+
+    // Re-measure when the container resizes, at most once per animation frame.
+    onMount(() => {
+        if (!root || typeof ResizeObserver === "undefined") return;
+        let frame = 0;
+        const observer = new ResizeObserver(() => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(recalculate);
+        });
+        observer.observe(root);
+        return () => {
+            cancelAnimationFrame(frame);
+            observer.disconnect();
+        };
+    });
+</script>
+
+<!-- MiddleTruncation.svelte -->
+<span
+    bind:this={root}
+    class={`middle-truncation ${className}`}
+    data-strategy={strategy}
+    data-truncated={shown === null ? undefined : ""}
+    {...restProps}
+><span class="middle-truncation-visual" aria-hidden="true">{displayed}</span><span class="middle-truncation-full">{text}</span></span>

package/dist/components/MiddleTruncation/MiddleTruncation.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type TruncationStrategy } from "./middle-truncation";
+type $$ComponentProps = {
+    /** The full text. */
+    text: string;
+    /** The cut marker; no default. */
+    ellipsis: string;
+    /** How the room is shared between start and end. */
+    strategy?: TruncationStrategy;
+    /** Characters kept at the end for "fixed-end" and "min-end". */
+    end?: number;
+    [key: string]: unknown;
+};
+declare const MiddleTruncation: import("svelte").Component<$$ComponentProps, {}, "">;
+type MiddleTruncation = ReturnType<typeof MiddleTruncation>;
+export default MiddleTruncation;

package/dist/components/MiddleTruncation/middle-truncation.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Middle truncation: shorten a string to fit a width by cutting out the middle, keeping the start and the end ("report-fi…q3.pdf").
+ * Pure and framework-neutral: the caller supplies `measure`, so the module reads no DOM and is tested without a browser.
+ *
+ * Works on grapheme clusters (Intl.Segmenter, falling back to code points), so it never splits a surrogate pair, a combining
+ * sequence or an emoji. The width search is binary, so it measures O(log n) candidate strings.
+ *
+ * Strategies:
+ *   "even"      the start and the end share what fits, the end taking the extra cluster when the count is odd.
+ *   "fixed-end" exactly `end` clusters are kept at the end; the start takes all the remaining room.
+ *   "min-end"   an even split, but at least `end` clusters are kept at the end (a file extension, a domain suffix).
+ */
+export type TruncationStrategy = "even" | "fixed-end" | "min-end";
+export interface TruncateMiddleOptions {
+    /** The ellipsis string. Required: the module has no default text (internationalisation). */
+    ellipsis: string;
+    /** The width available to the whole result, in the unit `measure` returns. */
+    maxWidth: number;
+    /** Width of a string in the same unit as `maxWidth`. */
+    measure: (text: string) => number;
+    strategy?: TruncationStrategy;
+    /** Clusters kept at the end for "fixed-end" and "min-end". Ignored by "even". */
+    end?: number;
+}
+/** Split into user-perceived characters. */
+export declare function splitGraphemes(text: string): string[];
+/** The text shortened to fit `maxWidth`, or unchanged when it already fits. */
+export declare function truncateMiddle(text: string, options: TruncateMiddleOptions): string;

package/dist/components/MiddleTruncation/middle-truncation.js

@@ -0,0 +1,67 @@
+/**
+ * Middle truncation: shorten a string to fit a width by cutting out the middle, keeping the start and the end ("report-fi…q3.pdf").
+ * Pure and framework-neutral: the caller supplies `measure`, so the module reads no DOM and is tested without a browser.
+ *
+ * Works on grapheme clusters (Intl.Segmenter, falling back to code points), so it never splits a surrogate pair, a combining
+ * sequence or an emoji. The width search is binary, so it measures O(log n) candidate strings.
+ *
+ * Strategies:
+ *   "even"      the start and the end share what fits, the end taking the extra cluster when the count is odd.
+ *   "fixed-end" exactly `end` clusters are kept at the end; the start takes all the remaining room.
+ *   "min-end"   an even split, but at least `end` clusters are kept at the end (a file extension, a domain suffix).
+ */
+/** Split into user-perceived characters. */
+export function splitGraphemes(text) {
+    const Segmenter = Intl.Segmenter;
+    if (Segmenter)
+        return Array.from(new Segmenter(undefined, { granularity: "grapheme" }).segment(text), (s) => s.segment);
+    return Array.from(text);
+}
+function clampEnd(end, length) {
+    if (end === undefined || !Number.isFinite(end))
+        return 0;
+    return Math.min(Math.max(Math.floor(end), 0), length);
+}
+/** The text shortened to fit `maxWidth`, or unchanged when it already fits. */
+export function truncateMiddle(text, options) {
+    const { ellipsis, maxWidth, measure, strategy = "even" } = options;
+    if (measure(text) <= maxWidth)
+        return text;
+    const g = splitGraphemes(text);
+    const n = g.length;
+    const tail = (count) => (count > 0 ? g.slice(n - count).join("") : "");
+    const head = (count) => g.slice(0, count).join("");
+    if (strategy === "fixed-end") {
+        const end = clampEnd(options.end, n);
+        const endText = tail(end);
+        const room = maxWidth - measure(ellipsis + endText);
+        let low = 0;
+        let high = n - end;
+        while (low < high) {
+            const middle = Math.ceil((low + high) / 2);
+            if (measure(head(middle)) <= room)
+                low = middle;
+            else
+                high = middle - 1;
+        }
+        return head(low) + ellipsis + endText;
+    }
+    const minEnd = strategy === "min-end" ? clampEnd(options.end, n) : 0;
+    const split = (kept) => {
+        const endCount = Math.min(n, Math.max(Math.ceil(kept / 2), minEnd));
+        return [Math.max(0, kept - endCount), endCount];
+    };
+    const room = maxWidth - measure(ellipsis);
+    let low = 0;
+    let high = n;
+    while (low < high) {
+        const middle = Math.ceil((low + high) / 2);
+        const [startCount, endCount] = split(middle);
+        if (measure(head(startCount) + tail(endCount)) <= room)
+            low = middle;
+        else
+            high = middle - 1;
+    }
+    const [startCount, endCount] = split(low);
+    return head(startCount) + ellipsis + tail(endCount);
+}

package/dist/components/PasswordInput/PasswordInput.svelte

@@ -62,7 +62,7 @@
         /** Current value. Bindable. */
         value?: string;
         /** Autocomplete hint. */
-        autocomplete?: string;
+        autocomplete?: "current-password" | "new-password" | "off";
         /** Whether required. */
         required?: boolean;
         /** Whether disabled. */

package/dist/components/PasswordInput/PasswordInput.svelte.d.ts

@@ -4,7 +4,7 @@ type $$ComponentProps = {
     /** Current value. Bindable. */
     value?: string;
     /** Autocomplete hint. */
-    autocomplete?: string;
+    autocomplete?: "current-password" | "new-password" | "off";
     /** Whether required. */
     required?: boolean;
     /** Whether disabled. */

package/dist/components/TreeList/TreeList.svelte

@@ -40,7 +40,7 @@
     //
     // Claude rules:
     //   - Headless: no CSS, no styles -- consumer provides all styling
-    //   - Queries [role='treeitem'] descendants for keyboard navigation
+    //   - Queries [role='treeitem'] descendants for keyboard navigation, skipping items inside a collapsed (aria-expanded=false) item
     //   - Uses $state() for internal DOM reference
     //
     // References:
@@ -68,7 +68,7 @@
         if (!treeRef) return;
         const items = Array.from(
             treeRef.querySelectorAll<HTMLElement>("[role='treeitem']"),
-        );
+        ).filter((el) => !el.parentElement?.closest("[role='treeitem'][aria-expanded='false']"));
         const current = document.activeElement as HTMLElement;
         const index = items.indexOf(current);
         switch (event.key) {

package/dist/components/TreeListItem/TreeListItem.svelte

@@ -3,16 +3,52 @@
     let {
         class: className = "",
         label = undefined,
+        expanded = $bindable(undefined),
         children,
         ...restProps
     }: {
         label?: string;
+        /** Expanded state, bindable. Leave undefined for a leaf (no aria-expanded). */
+        expanded?: boolean;
         children: Snippet;
         [key: string]: unknown;
     } = $props();
+
+    // ArrowRight/ArrowLeft (WAI-ARIA tree pattern). Only for the focused item itself, not a
+    // nested one the event bubbled up from. Swapped in right-to-left layouts.
+    function onkeydown(event: KeyboardEvent) {
+        const item = event.currentTarget as HTMLElement;
+        if (event.target !== item) return;
+        const rtl = getComputedStyle(item).direction === "rtl";
+        const open = rtl ? "ArrowLeft" : "ArrowRight";
+        const close = rtl ? "ArrowRight" : "ArrowLeft";
+        if (event.key === open) {
+            if (expanded === false) {
+                event.preventDefault();
+                expanded = true;
+            } else if (expanded === true) {
+                const child = item.querySelector<HTMLElement>("[role='treeitem']");
+                if (child) {
+                    event.preventDefault();
+                    child.focus();
+                }
+            }
+        } else if (event.key === close) {
+            if (expanded === true) {
+                event.preventDefault();
+                expanded = false;
+            } else {
+                const parent = item.parentElement?.closest<HTMLElement>("[role='treeitem']");
+                if (parent) {
+                    event.preventDefault();
+                    parent.focus();
+                }
+            }
+        }
+    }
 </script>
 
 <!-- TreeListItem.svelte -->
-<div class={`tree-list-item ${className}`} aria-label={label} {...restProps}>
+<li class={`tree-list-item ${className}`} role="treeitem" tabindex="-1" aria-label={label} aria-expanded={expanded} {onkeydown} {...restProps}>
     {@render children?.()}
-</div>
+</li>

package/dist/components/TreeListItem/TreeListItem.svelte.d.ts

@@ -1,9 +1,11 @@
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
     label?: string;
+    /** Expanded state, bindable. Leave undefined for a leaf (no aria-expanded). */
+    expanded?: boolean;
     children: Snippet;
     [key: string]: unknown;
 };
-declare const TreeListItem: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const TreeListItem: import("svelte").Component<$$ComponentProps, {}, "expanded">;
 type TreeListItem = ReturnType<typeof TreeListItem>;
 export default TreeListItem;

package/dist/components/WheelPicker/WheelPicker.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+    // WheelPicker component
+    //
+    // A vertical single-select listbox where the selection follows the cursor: moving with the arrow keys, typing, or
+    // clicking an option chooses it. Use it to pick one of a short list (hours, minutes, months, years) in the manner of a
+    // scroll wheel. The component owns the roles, the keys and the selected value; the wheel LOOK (scroll snapping, fading,
+    // 3-D) is the consumer's CSS. Pointer dragging and touch inertia are plain scrolling of `.wheel-picker-list`.
+    //
+    // Props:
+    //   class — string, optional. Consumer class appended after the base class.
+    //   label — string, required. Accessible name of the listbox.
+    //   options — { value: string; label: string; disabled?: boolean }[], required.
+    //   value — string, bindable, default "". The selected option's value; "" or an unknown value selects nothing.
+    //   loop — boolean, default false. Arrow keys wrap from the last enabled option to the first and back.
+    //   pageSize — number, default 5. Enabled options PageUp / PageDown move by.
+    //   disabled — boolean, default false. Ignores keys and clicks; not focusable.
+    //   name — string, optional. When set, a hidden input carries the value for a form.
+    //   onChange — (value: string) => void, optional. Called once when the selection changes.
+    //   ...restProps — spread onto the root <div>.
+    //
+    // Markup:
+    //   <div class="wheel-picker">
+    //     <div class="wheel-picker-list" role="listbox" aria-orientation="vertical" tabindex="0" aria-activedescendant>
+    //       <div class="wheel-picker-option" role="option" aria-selected aria-disabled? data-value>…</div>
+    //     </div>
+    //     <input type="hidden" name value>   (only with `name`)
+    //   </div>
+    //
+    // Keyboard (APG listbox, selection follows focus): ArrowDown / ArrowUp, Home / End, PageDown / PageUp, type-ahead over
+    // the labels. Disabled options are skipped.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no inline styles; no animation (the selected option is centred instantly).
+    //   - No hardcoded user-facing strings.
+
+    import {
+        isWheelTypeaheadKey,
+        nextWheelIndex,
+        nextWheelPrefix,
+        WHEEL_MOVE_KEYS,
+        wheelTypeaheadIndex,
+        type WheelMoveKey,
+        type WheelOption,
+        type WheelTypeahead,
+    } from "./wheel-picker";
+
+    let {
+        class: className = "",
+        label,
+        options,
+        value = $bindable(""),
+        loop = false,
+        pageSize = 5,
+        disabled = false,
+        name,
+        onChange,
+        ...restProps
+    }: {
+        /** Accessible name. */
+        label: string;
+        /** The choices. */
+        options: WheelOption[];
+        /** The selected option's value. Bindable. */
+        value?: string;
+        /** Arrow keys wrap at the ends. */
+        loop?: boolean;
+        /** Enabled options PageUp / PageDown move by. */
+        pageSize?: number;
+        /** Ignores keys and clicks. */
+        disabled?: boolean;
+        /** Form field name for a hidden input. */
+        name?: string;
+        /** Called once when the selection changes. */
+        onChange?: (value: string) => void;
+        [key: string]: unknown;
+    } = $props();
+
+    const uid = $props.id();
+    let list: HTMLElement | undefined = $state();
+    let typeahead: WheelTypeahead = { prefix: "", at: 0 };
+
+    const selectedIndex = $derived(options.findIndex((o) => o.value === value));
+
+    function select(index: number): void {
+        if (index < 0) return;
+        const next = options[index].value;
+        if (next === value) return; // applying the selection already held is a no-op
+        value = next;
+        onChange?.(next);
+    }
+
+    function onkeydown(event: KeyboardEvent): void {
+        if (disabled) return;
+        if (WHEEL_MOVE_KEYS.includes(event.key)) {
+            event.preventDefault();
+            select(nextWheelIndex(options, selectedIndex, event.key as WheelMoveKey, { loop, pageSize }));
+        } else if (isWheelTypeaheadKey(event)) {
+            typeahead = nextWheelPrefix(typeahead, event.key, Date.now());
+            select(wheelTypeaheadIndex(options, selectedIndex, typeahead.prefix));
+        }
+    }
+
+    function onclick(event: MouseEvent): void {
+        if (disabled) return;
+        const target = (event.target as Element).closest<HTMLElement>('[role="option"]');
+        if (!target || target.getAttribute("aria-disabled") === "true") return;
+        select(Number(target.getAttribute("data-index")));
+        list?.focus();
+    }
+
+    // Keep the selected option centred in the list. Only the list scrolls (never the page), and instantly: no animation.
+    $effect(() => {
+        const index = selectedIndex;
+        if (!list || index < 0) return;
+        const option = list.querySelector<HTMLElement>(`[data-index="${index}"]`);
+        if (!option) return;
+        list.scrollTop = option.offsetTop - (list.clientHeight - option.offsetHeight) / 2;
+    });
+</script>
+
+<!-- WheelPicker.svelte -->
+<div class={`wheel-picker ${className}`} {...restProps}>
+    <div
+        bind:this={list}
+        class="wheel-picker-list"
+        role="listbox"
+        aria-label={label}
+        aria-orientation="vertical"
+        aria-disabled={disabled ? "true" : undefined}
+        aria-activedescendant={selectedIndex >= 0 ? `${uid}-option-${selectedIndex}` : undefined}
+        tabindex={disabled ? -1 : 0}
+        {onkeydown}
+        {onclick}
+    >
+        {#each options as option, index (option.value)}
+            <div
+                class="wheel-picker-option"
+                role="option"
+                id={`${uid}-option-${index}`}
+                aria-selected={index === selectedIndex}
+                aria-disabled={option.disabled ? "true" : undefined}
+                data-value={option.value}
+                data-index={index}
+            >{option.label}</div>
+        {/each}
+    </div>
+    {#if name}
+        <input type="hidden" {name} {value} />
+    {/if}
+</div>

package/dist/components/WheelPicker/WheelPicker.svelte.d.ts

@@ -0,0 +1,23 @@
+import { type WheelOption } from "./wheel-picker";
+type $$ComponentProps = {
+    /** Accessible name. */
+    label: string;
+    /** The choices. */
+    options: WheelOption[];
+    /** The selected option's value. Bindable. */
+    value?: string;
+    /** Arrow keys wrap at the ends. */
+    loop?: boolean;
+    /** Enabled options PageUp / PageDown move by. */
+    pageSize?: number;
+    /** Ignores keys and clicks. */
+    disabled?: boolean;
+    /** Form field name for a hidden input. */
+    name?: string;
+    /** Called once when the selection changes. */
+    onChange?: (value: string) => void;
+    [key: string]: unknown;
+};
+declare const WheelPicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type WheelPicker = ReturnType<typeof WheelPicker>;
+export default WheelPicker;

package/dist/components/WheelPicker/wheel-picker.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Keyboard model for a wheel picker: a single-select listbox where the selection follows the cursor (APG listbox, "selection
+ * follows focus"), so moving the cursor IS choosing. Pure and framework-neutral, tested without a browser.
+ *
+ * Disabled options are skipped by every move. Arrows wrap only when `loop` is set; Home, End, PageUp and PageDown never wrap.
+ */
+export interface WheelOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export type WheelMoveKey = "ArrowUp" | "ArrowDown" | "Home" | "End" | "PageUp" | "PageDown";
+export declare const WHEEL_MOVE_KEYS: readonly string[];
+export interface WheelMoveOptions {
+    /** Arrow keys wrap from the last enabled option to the first and back. Default false. */
+    loop?: boolean;
+    /** Enabled options PageUp / PageDown move by. Default 5. */
+    pageSize?: number;
+}
+/**
+ * The index to select after `key`, or -1 when no option can be selected. `current` is the selected index, or -1 for none.
+ * With nothing selected, ArrowDown / PageDown / Home choose the first enabled option and ArrowUp / PageUp / End the last.
+ */
+export declare function nextWheelIndex(options: readonly WheelOption[], current: number, key: WheelMoveKey, move?: WheelMoveOptions): number;
+export declare const WHEEL_TYPEAHEAD_RESET_MS = 700;
+export interface WheelTypeahead {
+    prefix: string;
+    at: number;
+}
+/** The prefix after `key` at time `now`: it grows while presses are within the reset time, else starts over. */
+export declare function nextWheelPrefix(previous: WheelTypeahead, key: string, now: number, resetMs?: number): WheelTypeahead;
+/** Whether a key press is a type-ahead character: one printable character other than space, no Ctrl, Alt or Meta. */
+export declare function isWheelTypeaheadKey(event: {
+    key: string;
+    ctrlKey?: boolean;
+    altKey?: boolean;
+    metaKey?: boolean;
+}): boolean;
+/**
+ * The enabled option to move to for the typed `prefix`, or -1. Searches from the option after `current` and wraps; a prefix of one
+ * repeated letter ("ss") counts as that single letter, so pressing it again steps through the options that start with it.
+ */
+export declare function wheelTypeaheadIndex(options: readonly WheelOption[], current: number, prefix: string): number;

package/dist/components/WheelPicker/wheel-picker.js

@@ -0,0 +1,79 @@
+/**
+ * Keyboard model for a wheel picker: a single-select listbox where the selection follows the cursor (APG listbox, "selection
+ * follows focus"), so moving the cursor IS choosing. Pure and framework-neutral, tested without a browser.
+ *
+ * Disabled options are skipped by every move. Arrows wrap only when `loop` is set; Home, End, PageUp and PageDown never wrap.
+ */
+export const WHEEL_MOVE_KEYS = ["ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown"];
+/** Indexes of the options that can be selected. */
+function enabledIndexes(options) {
+    const out = [];
+    options.forEach((o, i) => {
+        if (!o.disabled)
+            out.push(i);
+    });
+    return out;
+}
+/**
+ * The index to select after `key`, or -1 when no option can be selected. `current` is the selected index, or -1 for none.
+ * With nothing selected, ArrowDown / PageDown / Home choose the first enabled option and ArrowUp / PageUp / End the last.
+ */
+export function nextWheelIndex(options, current, key, move = {}) {
+    const enabled = enabledIndexes(options);
+    if (enabled.length === 0)
+        return -1;
+    const first = enabled[0];
+    const last = enabled[enabled.length - 1];
+    const position = enabled.indexOf(current);
+    const pageSize = Math.max(1, Math.floor(move.pageSize ?? 5));
+    if (key === "Home")
+        return first;
+    if (key === "End")
+        return last;
+    if (position === -1)
+        return key === "ArrowDown" || key === "PageDown" ? first : last;
+    switch (key) {
+        case "ArrowDown":
+            return position + 1 < enabled.length ? enabled[position + 1] : move.loop ? first : current;
+        case "ArrowUp":
+            return position > 0 ? enabled[position - 1] : move.loop ? last : current;
+        case "PageDown":
+            return enabled[Math.min(enabled.length - 1, position + pageSize)];
+        case "PageUp":
+            return enabled[Math.max(0, position - pageSize)];
+    }
+}
+/** Lower-case and strip diacritics so "é" is typed with "e". */
+function fold(text) {
+    return text.normalize("NFD").replace(/\p{M}/gu, "").toLocaleLowerCase();
+}
+export const WHEEL_TYPEAHEAD_RESET_MS = 700;
+/** The prefix after `key` at time `now`: it grows while presses are within the reset time, else starts over. */
+export function nextWheelPrefix(previous, key, now, resetMs = WHEEL_TYPEAHEAD_RESET_MS) {
+    const continuing = previous.prefix !== "" && now - previous.at <= resetMs;
+    return { prefix: (continuing ? previous.prefix : "") + key, at: now };
+}
+/** Whether a key press is a type-ahead character: one printable character other than space, no Ctrl, Alt or Meta. */
+export function isWheelTypeaheadKey(event) {
+    return event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.altKey && !event.metaKey;
+}
+/**
+ * The enabled option to move to for the typed `prefix`, or -1. Searches from the option after `current` and wraps; a prefix of one
+ * repeated letter ("ss") counts as that single letter, so pressing it again steps through the options that start with it.
+ */
+export function wheelTypeaheadIndex(options, current, prefix) {
+    const folded = fold(prefix);
+    if (folded === "" || options.length === 0)
+        return -1;
+    const repeated = folded.length > 1 && [...folded].every((c) => c === folded[0]);
+    const needle = repeated ? folded[0] : folded;
+    const startOffset = needle.length > 1 ? 0 : 1;
+    const from = current < 0 ? -startOffset : current;
+    for (let step = 0; step < options.length; step++) {
+        const index = (from + startOffset + step + options.length) % options.length;
+        const option = options[index];
+        if (!option.disabled && fold(option.label).startsWith(needle))
+            return index;
+    }
+    return -1;
+}

package/dist/index.d.ts

@@ -241,6 +241,7 @@ export { default as HangukJuminDeungnokBeonhoView } from "./components/HangukJum
 export { default as Header } from "./components/Header/Header.svelte";
 export { default as Headline } from "./components/Headline/Headline.svelte";
 export { default as HeatmapChart } from "./components/HeatmapChart/HeatmapChart.svelte";
+export { default as HeatmapChartWithYearOfDays } from "./components/HeatmapChartWithYearOfDays/HeatmapChartWithYearOfDays.svelte";
 export { default as Hero } from "./components/Hero/Hero.svelte";
 export { default as HeroHeadline } from "./components/HeroHeadline/HeroHeadline.svelte";
 export { default as HiddenInput } from "./components/HiddenInput/HiddenInput.svelte";
@@ -323,6 +324,7 @@ export { default as MenuItem } from "./components/MenuItem/MenuItem.svelte";
 export { default as Meter } from "./components/Meter/Meter.svelte";
 export { default as MexicoClaveUnicaDeRegistroDePoblacionInput } from "./components/MexicoClaveUnicaDeRegistroDePoblacionInput/MexicoClaveUnicaDeRegistroDePoblacionInput.svelte";
 export { default as MexicoClaveUnicaDeRegistroDePoblacionView } from "./components/MexicoClaveUnicaDeRegistroDePoblacionView/MexicoClaveUnicaDeRegistroDePoblacionView.svelte";
+export { default as MiddleTruncation } from "./components/MiddleTruncation/MiddleTruncation.svelte";
 export { default as MisrAlRaqmAlQawmiInput } from "./components/MisrAlRaqmAlQawmiInput/MisrAlRaqmAlQawmiInput.svelte";
 export { default as MisrAlRaqmAlQawmiView } from "./components/MisrAlRaqmAlQawmiView/MisrAlRaqmAlQawmiView.svelte";
 export { default as MockupBrowser } from "./components/MockupBrowser/MockupBrowser.svelte";
@@ -565,6 +567,7 @@ export { default as Visible } from "./components/Visible/Visible.svelte";
 export { default as WarningCallout } from "./components/WarningCallout/WarningCallout.svelte";
 export { default as Watermark } from "./components/Watermark/Watermark.svelte";
 export { default as WeekInput } from "./components/WeekInput/WeekInput.svelte";
+export { default as WheelPicker } from "./components/WheelPicker/WheelPicker.svelte";
 export { default as YisraelTeudatZehutInput } from "./components/YisraelTeudatZehutInput/YisraelTeudatZehutInput.svelte";
 export { default as YisraelTeudatZehutView } from "./components/YisraelTeudatZehutView/YisraelTeudatZehutView.svelte";
 export { default as ZhongguoJuminShenfenzhengHaomaInput } from "./components/ZhongguoJuminShenfenzhengHaomaInput/ZhongguoJuminShenfenzhengHaomaInput.svelte";