@lilydesignsystem/svelte-headless 0.6.0 → 0.6.2

package/dist/components/SplitView/SplitView.svelte

@@ -73,6 +73,7 @@
     {#if divider}
         {@render divider()}
     {:else}
+        <!-- svelte-ignore a11y_no_noninteractive_tabindex (a focusable separator is the WAI-ARIA window splitter pattern) -->
         <div
             class="split-view-divider"
             role="separator"

package/dist/components/Splitter/Splitter.svelte

@@ -63,6 +63,7 @@
 </script>
 
 <!-- Splitter.svelte -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex (a focusable separator is the WAI-ARIA window splitter pattern) -->
 <div
     class={`splitter ${className}`}
     role="separator"

package/dist/components/StatusLight/StatusLight.svelte

@@ -24,13 +24,7 @@
     //   - Adobe Spectrum StatusLight: https://spectrum.adobe.com/page/status-light/
 
     type Variant =
-        | "neutral"
-        | "informative"
-        | "positive"
-        | "notice"
-        | "negative"
-        | "active"
-        | "inactive";
+        "neutral" | "informative" | "positive" | "notice" | "negative" | "active" | "inactive";
 
     let {
         class: className = "",
@@ -54,6 +48,9 @@
     role="status"
     {...restProps}
 >
-    <span class="status-light-dot" aria-hidden="true"></span>
+    <span
+        class="status-light-dot"
+        aria-hidden="true"
+    ></span>
     <span class="status-light-label">{label}</span>
 </span>

package/dist/components/StepListItem/StepListItem.svelte

@@ -9,7 +9,7 @@
     //   class — string, optional. CSS class appended to the base class.
     //   status — "waiting" | "in-progress" | "finished" | "error",
     //            default "waiting". Renders as data-status.
-    //   current — boolean, default false. When true, renders aria-current="step".
+    //   current — boolean, default false. When true, renders data-current.
     //   label — string, optional. aria-label override.
     //   children — Snippet, required. Step content (typically title and description).
     //   ...restProps — additional HTML attributes spread onto the <li>.
@@ -18,7 +18,7 @@
     //   <StepListItem status="finished">Cart</StepListItem>
     //
     // Accessibility:
-    //   - aria-current="step" when current=true.
+    //   - data-current when current=true.
     //   - aria-label optional override.
     //
     // Internationalization:
@@ -60,7 +60,7 @@
 <li
     class={`step-list-item ${className}`}
     data-status={status}
-    aria-current={current ? "step" : undefined}
+    data-current={current ? "" : undefined}
     aria-label={label}
     {...restProps}
 >

package/dist/components/StickyPromoBanner/StickyPromoBanner.svelte

@@ -70,6 +70,7 @@
 </script>
 
 <!-- StickyPromoBanner.svelte -->
+<!-- svelte-ignore a11y_no_redundant_roles (explicit role keeps the landmark on wrapper hosts) -->
 <aside
     class={`sticky-promo-banner ${className}`}
     role="complementary"

package/dist/components/SunburstChart/SunburstChart.svelte

@@ -52,7 +52,11 @@
     class={`sunburst-chart ${className}`}
     {...restProps}
 >
-    <div class="sunburst-chart-graphic" role="img" aria-label={label}>
+    <div
+        class="sunburst-chart-graphic"
+        role="img"
+        aria-label={label}
+    >
         {@render children?.()}
     </div>
     {#if dataTable}

package/dist/components/SuperBanner/SuperBanner.svelte

@@ -13,6 +13,10 @@
 </script>
 
 <!-- SuperBanner.svelte -->
-<div class={`super-banner ${className}`} aria-label={label} {...restProps}>
+<div
+    class={`super-banner ${className}`}
+    aria-label={label}
+    {...restProps}
+>
     {@render children?.()}
 </div>

package/dist/components/TabBar/TabBar.svelte

@@ -70,9 +70,7 @@
 
     function onkeydown(event: KeyboardEvent) {
         if (!barRef) return;
-        const items = Array.from(
-            barRef.querySelectorAll<HTMLElement>("[role='tab']"),
-        );
+        const items = Array.from(barRef.querySelectorAll<HTMLElement>("[role='tab']"));
         const current = document.activeElement as HTMLElement;
         const index = items.indexOf(current);
         switch (event.key) {

package/dist/components/Tag/Tag.svelte

@@ -68,7 +68,12 @@
 
 <!-- Tag.svelte -->
 {#if live}
-    <span class={`tag ${className}`} role="status" aria-label={label} {...restProps}>
+    <span
+        class={`tag ${className}`}
+        role="status"
+        aria-label={label}
+        {...restProps}
+    >
         {@render children?.()}
     </span>
 {:else}
@@ -76,7 +81,10 @@
          label is screen-reader text appended after the content (the themes hide
          .screen-reader-span). The content stays exposed: it may hold a focusable
          control, such as a remove button. -->
-    <span class={`tag ${className}`} {...restProps}>
+    <span
+        class={`tag ${className}`}
+        {...restProps}
+    >
         {@render children?.()}{#if label}<span class="screen-reader-span">{label}</span>{/if}
     </span>
 {/if}

package/dist/components/TaiwanGuominShenfenzhengTongyiBianhaoInput/TaiwanGuominShenfenzhengTongyiBianhaoInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // TaiwanGuominShenfenzhengTongyiBianhaoInput component
+    //
+    // A headless input for entering Taiwan's National Identification Card Number.
+    // Format: One uppercase letter for the household-registration office, then nine digits. The first digit is 1 for a male and 2 for a female citizen (8 or 9 for a foreign resident), and the last digit is a check digit. The letter is converted to a two-digit number (A=10, B=11 and so on in the official order A-H, J-N, P-V, X, Y, W, Z, I, O), the eleven resulting digits are multiplied by the weights 1,9,8,7,6,5,4,3,2,1,1, and the sum must be a multiple of 10.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". Bindable input value; supports bind:value.
+    //   required — boolean, default false. Whether the input is required for form submission.
+    //   disabled — boolean, default false. Whether the input is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <TaiwanGuominShenfenzhengTongyiBianhaoInput label="National Identification Card Number" bind:value />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name for screen readers
+    //   - autocomplete="off" protects sensitive identifiers
+    //   - required and disabled states are conveyed to assistive technology
+    //
+    // Internationalization:
+    //   - The label prop externalizes user-facing text for translation
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/National_identification_card_(Taiwan)
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- TaiwanGuominShenfenzhengTongyiBianhaoInput.svelte -->
+<input
+    class={`taiwan-guomin-shenfenzheng-tongyi-bianhao-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    label: string;
+    value?: string;
+    required?: boolean;
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+declare const TaiwanGuominShenfenzhengTongyiBianhaoInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TaiwanGuominShenfenzhengTongyiBianhaoInput = ReturnType<typeof TaiwanGuominShenfenzhengTongyiBianhaoInput>;
+export default TaiwanGuominShenfenzhengTongyiBianhaoInput;

package/dist/components/TaiwanGuominShenfenzhengTongyiBianhaoView/TaiwanGuominShenfenzhengTongyiBianhaoView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // TaiwanGuominShenfenzhengTongyiBianhaoView component
+    //
+    // A headless display component for showing Taiwan's
+    // National Identification Card Number in a read-only format.
+    // Format: One uppercase letter for the household-registration office, then nine digits. The first digit is 1 for a male and 2 for a female citizen (8 or 9 for a foreign resident), and the last digit is a check digit. The letter is converted to a two-digit number (A=10, B=11 and so on in the official order A-H, J-N, P-V, X, Y, W, Z, I, O), the eleven resulting digits are multiplied by the weights 1,9,8,7,6,5,4,3,2,1,1, and the sum must be a multiple of 10.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". The identifier string to display.
+    //   ...restProps — additional HTML attributes spread onto the <span>.
+    //
+    // Syntax:
+    //   <TaiwanGuominShenfenzhengTongyiBianhaoView label="National Identification Card Number" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/National_identification_card_(Taiwan)
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- TaiwanGuominShenfenzhengTongyiBianhaoView.svelte -->
+<span
+    class={`taiwan-guomin-shenfenzheng-tongyi-bianhao-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    label: string;
+    value?: string;
+    [key: string]: unknown;
+};
+declare const TaiwanGuominShenfenzhengTongyiBianhaoView: import("svelte").Component<$$ComponentProps, {}, "">;
+type TaiwanGuominShenfenzhengTongyiBianhaoView = ReturnType<typeof TaiwanGuominShenfenzhengTongyiBianhaoView>;
+export default TaiwanGuominShenfenzhengTongyiBianhaoView;

package/dist/components/TaskBar/TaskBar.svelte

@@ -69,9 +69,7 @@
     function onkeydown(event: KeyboardEvent) {
         if (!barRef) return;
         const items = Array.from(
-            barRef.querySelectorAll<HTMLElement>(
-                "button, [role='button'], [tabindex]",
-            ),
+            barRef.querySelectorAll<HTMLElement>("button, [role='button'], [tabindex]"),
         );
         const current = document.activeElement as HTMLElement;
         const index = items.indexOf(current);

package/dist/components/TextAreaInput/TextAreaInput.svelte

@@ -77,5 +77,4 @@
     {rows}
     {required}
     {disabled}
-    {...restProps}
-></textarea>
+    {...restProps}></textarea>

package/dist/components/TextAreaInputWithCharacterCounter/TextAreaInputWithCharacterCounter.svelte

@@ -68,7 +68,9 @@
     const counterId = `counter-${uid}`;
 
     let counterText = $derived(
-        counterTemplate.replace("{count}", String(value.length)).replace("{max}", String(maxLength))
+        counterTemplate
+            .replace("{count}", String(value.length))
+            .replace("{max}", String(maxLength)),
     );
 </script>
 
@@ -85,8 +87,7 @@
         {rows}
         {placeholder}
         {required}
-        {disabled}
-    ></textarea>
+        {disabled}></textarea>
     <span
         id={counterId}
         aria-live="polite"

package/dist/components/ThemeProvider/ThemeProvider.svelte

@@ -35,9 +35,9 @@
 
     let styleString = $derived(
         "display: contents;" +
-        Object.entries(flatten(theme))
-            .map(([k, v]) => ` ${k}: ${v};`)
-            .join("")
+            Object.entries(flatten(theme))
+                .map(([k, v]) => ` ${k}: ${v};`)
+                .join(""),
     );
 </script>
 

package/dist/components/Tile/Tile.svelte

@@ -13,6 +13,10 @@
 </script>
 
 <!-- Tile.svelte -->
-<div class={`tile ${className}`} aria-label={label} {...restProps}>
+<div
+    class={`tile ${className}`}
+    aria-label={label}
+    {...restProps}
+>
     {@render children?.()}
 </div>

package/dist/components/TimeoutDialog/TimeoutDialog.svelte

@@ -13,6 +13,19 @@
         children: Snippet;
         [key: string]: unknown;
     } = $props();
+
+    // Always rendered, shown while `open`: as a real modal where the browser has one (see Dialog/modal.ts).
+    let el: HTMLDialogElement | undefined = $state(undefined);
+    $effect(() => {
+        if (!el) return;
+        if (open && !el.open) {
+            if (typeof el.showModal === "function") el.showModal();
+            else el.setAttribute("open", "");
+        } else if (!open && el.open) {
+            if (typeof el.close === "function") el.close();
+            else el.removeAttribute("open");
+        }
+    });
 </script>
 
 <!-- TimeoutDialog.svelte -->
@@ -20,7 +33,7 @@
     class={`timeout-dialog ${className}`}
     role="alertdialog"
     aria-label={label}
-    {open}
+    bind:this={el}
     {...restProps}
 >
     {@render children?.()}

package/dist/components/TimerButton/TimerButton.svelte

@@ -1,18 +1,66 @@
 <script lang="ts">
-    import type { Snippet } from "svelte";
+    // TimerButton: a button that counts down `duration` seconds and then activates itself; a click (or Enter /
+    // Space, natively) activates it at once. It activates once only. data-remaining-seconds carries the countdown
+    // for the consumer's display; aria-live="polite" announces the consumer's text as it changes.
+    import { onMount, type Snippet } from "svelte";
     let {
         class: className = "",
-        label = undefined,
-        children,
+        label,
+        duration,
+        disabled = false,
+        onclick = undefined,
+        children = undefined,
         ...restProps
     }: {
-        label?: string;
-        children: Snippet;
+        /** Accessible label describing the action. */
+        label: string;
+        /** Countdown duration in seconds. */
+        duration: number;
+        disabled?: boolean;
+        /** Called once, when the countdown ends or the button is pressed. */
+        onclick?: () => void;
+        children?: Snippet;
         [key: string]: unknown;
     } = $props();
+
+    let remaining = $state(0);
+    let fired = false;
+    let timer: ReturnType<typeof setInterval> | undefined;
+
+    function fire() {
+        if (fired) return;
+        fired = true;
+        clearInterval(timer);
+        onclick?.();
+    }
+
+    onMount(() => {
+        remaining = duration;
+        if (disabled) return;
+        const start = Date.now();
+        timer = setInterval(() => {
+            remaining = Math.max(0, duration - Math.floor((Date.now() - start) / 1000));
+            if (remaining === 0) fire();
+        }, 250);
+        return () => clearInterval(timer);
+    });
+
+    function handleClick() {
+        if (disabled) return;
+        fire();
+    }
 </script>
 
 <!-- TimerButton.svelte -->
-<div class={`timer-button ${className}`} aria-label={label} {...restProps}>
+<button
+    type="button"
+    class={`timer-button ${className}`}
+    aria-label={label}
+    aria-live="polite"
+    data-remaining-seconds={remaining}
+    {disabled}
+    onclick={handleClick}
+    {...restProps}
+>
     {@render children?.()}
-</div>
+</button>

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

@@ -1,7 +1,13 @@
-import type { Snippet } from "svelte";
+import { type Snippet } from "svelte";
 type $$ComponentProps = {
-    label?: string;
-    children: Snippet;
+    /** Accessible label describing the action. */
+    label: string;
+    /** Countdown duration in seconds. */
+    duration: number;
+    disabled?: boolean;
+    /** Called once, when the countdown ends or the button is pressed. */
+    onclick?: () => void;
+    children?: Snippet;
     [key: string]: unknown;
 };
 declare const TimerButton: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/ToolBar/ToolBar.svelte

@@ -68,9 +68,7 @@
     function onkeydown(event: KeyboardEvent) {
         if (!toolbarRef) return;
         const items = Array.from(
-            toolbarRef.querySelectorAll<HTMLElement>(
-                "button, [role='button'], [tabindex]",
-            ),
+            toolbarRef.querySelectorAll<HTMLElement>("button, [role='button'], [tabindex]"),
         );
         const current = document.activeElement as HTMLElement;
         const index = items.indexOf(current);

package/dist/components/ToolCallError/ToolCallError.svelte

@@ -10,7 +10,6 @@
         children,
         ...restProps
     }: {
-
         /** The content. */
         children?: Snippet;
         [key: string]: unknown;

package/dist/components/ToolCallName/ToolCallName.svelte

@@ -10,7 +10,6 @@
         children,
         ...restProps
     }: {
-
         /** The content. */
         children?: Snippet;
         [key: string]: unknown;
@@ -20,7 +19,6 @@
 <!-- ToolCallName.svelte -->
 <span
     class={`tool-call-name ${className}`}
-
     {...restProps}
 >
     {@render children?.()}

package/dist/components/Tooltip/Tooltip.svelte

@@ -31,7 +31,7 @@
     // Accessibility:
     //   - role="tooltip" identifies the element as a tooltip popup
     //   - id enables aria-describedby linking to the trigger element
-    //   - Conditionally rendered: fully removed from DOM when not visible
+    //   - Always rendered as popover="manual"; hidden (display: none) when not visible
     //
     // Internationalization:
     //   - The label prop accepts any translated string
@@ -39,13 +39,15 @@
     //
     // Claude rules:
     //   - Headless: no CSS, no styles -- consumer provides all styling
-    //   - Uses {#if visible} for conditional rendering
+    //   - Native first: popover="manual" (top layer) opened and closed by the `open` state through ./Popover/popover.ts; where the Popover API is missing (jsdom, older browsers) it falls back to the `hidden` attribute. Placement is the theme's CSS (anchor positioning); light dismiss and Escape stay the consumer's.
     //   - Consumer manages visibility (hover, focus, etc.)
     //
     // References:
     //   - WAI-ARIA Tooltip Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
     //   - MDN aria-describedby: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby
 
+    import { popoverState } from "../Popover/popover.js";
+
     let {
         class: className = "",
         label,
@@ -64,13 +66,13 @@
 </script>
 
 <!-- Tooltip.svelte -->
-{#if visible}
-    <div
-        class={`tooltip ${className}`}
-        role="tooltip"
-        {id}
-        {...restProps}
-    >
-        {label}
-    </div>
-{/if}
+<div
+    class={`tooltip ${className}`}
+    role="tooltip"
+    popover="manual"
+    use:popoverState={visible}
+    {id}
+    {...restProps}
+>
+    {label}
+</div>

package/dist/components/Tour/Tour.svelte

@@ -4,8 +4,10 @@
     // A tour guide is an outer container for a guided walkthrough experience,
     // such as for sightseeing, or pathways, or demonstrations, or onboarding.
     // It wraps a TourList and its TourListItem children, providing
-    // the dialog overlay and keyboard dismissal behavior. When active, it
-    // renders as a modal dialog that traps focus and can be closed with Escape.
+    // the dialog container and keyboard dismissal behavior. When active, it
+    // renders as a NON-modal dialog that can be closed with Escape: a tour points
+    // at parts of the real page and often asks the user to try them, so the page
+    // must stay usable. It therefore does not set aria-modal and does not trap focus.
     //
     // Props:
     //   className — string, optional. CSS class name.
@@ -46,7 +48,7 @@
     //
     // Accessibility:
     //   - role="dialog" identifies the overlay as a dialog window
-    //   - aria-modal="true" indicates the dialog is modal
+    //   - no aria-modal: the tour is non-modal, the page behind it stays usable
     //   - aria-label={label} provides an accessible name for the tour
     //   - tabindex="-1" allows the dialog to receive focus for keyboard events
     //
@@ -92,7 +94,6 @@
     <div
         class={`tour ${className}`}
         role="dialog"
-        aria-modal="true"
         aria-label={label}
         tabindex="-1"
         {onkeydown}

package/dist/components/TourList/TourList.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
     // TourList component
     //
-    // A headless guided walkthrough overlay that presents step-by-step
-    // instructions to users. Useful for onboarding flows, feature tutorials, or
+    // A headless ordered list of guided walkthrough steps that presents step-by-step
+    // instructions to users. It is a plain <ol> (no role="dialog", no aria-modal), so
+    // screen readers keep its list semantics and announce the step count; any dialog
+    // semantics belong to the enclosing Tour, which is non-modal. Useful for onboarding flows, feature tutorials, or
     // contextual help systems. The consumer provides TourListItem children to
     // define each step of the tour.
     //
@@ -11,7 +13,7 @@
     //   label — string, required. Accessible name for the tour dialog via aria-label.
     //   active — boolean, default false. Whether the tour is visible; bindable with bind:active.
     //   children — Snippet, required. TourListItem elements.
-    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //   ...restProps — additional HTML attributes spread onto the <ol>.
     //
     // Syntax:
     //   <TourList label="Getting started" bind:active>...</TourList>
@@ -34,10 +36,9 @@
     //   - Escape: closes the tour by setting active to false
     //
     // Accessibility:
-    //   - role="dialog" identifies the overlay as a dialog window
-    //   - aria-modal="true" indicates the dialog is modal
-    //   - aria-label={label} provides an accessible name for the tour
-    //   - tabindex="-1" allows the dialog to receive focus for keyboard events
+    //   - native <ol> list semantics (no role="dialog": it would hide the list; no aria-modal: not modal)
+    //   - aria-label={label} provides an accessible name for the list of steps
+    //   - tabindex="-1" allows the list to receive focus for keyboard events
     //
     // Internationalization:
     //   - The label prop accepts any translated string
@@ -62,6 +63,8 @@
     }: {
         /** Accessible label for the tour. */
         label: string;
+        /** Whether the tour is visible. Bindable. */
+        active?: boolean;
         /** TourListItem elements. */
         children: Snippet;
         [key: string]: unknown;
@@ -78,8 +81,6 @@
 {#if active}
     <ol
         class={`tour-list ${className}`}
-        role="dialog"
-        aria-modal="true"
         aria-label={label}
         tabindex="-1"
         {onkeydown}

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

@@ -2,6 +2,8 @@ import type { Snippet } from "svelte";
 type $$ComponentProps = {
     /** Accessible label for the tour. */
     label: string;
+    /** Whether the tour is visible. Bindable. */
+    active?: boolean;
     /** TourListItem elements. */
     children: Snippet;
     [key: string]: unknown;

package/dist/components/TourListItem/TourListItem.svelte

@@ -40,7 +40,7 @@
     //   - role="group" groups the step content semantically
     //   - aria-roledescription="step" identifies the element as a tour step
     //   - aria-label includes step label and optional "Step N of M" progress
-    //   - aria-current="step" indicates the currently active step
+    //   - data-current indicates the currently active step
     //   - aria-hidden="true" and hidden attribute hide inactive steps
     //
     // Internationalization:
@@ -95,7 +95,7 @@
     role="group"
     aria-roledescription="step"
     aria-label={fullLabel}
-    aria-current={current ? "step" : undefined}
+    data-current={current ? "" : undefined}
     aria-hidden={!current ? "true" : undefined}
     hidden={!current ? true : undefined}
     {...restProps}