@lilydesignsystem/svelte-headless 0.6.0 → 0.6.2

package/dist/components/TransferList/TransferList.svelte

@@ -74,7 +74,10 @@
     aria-label={label}
     {...restProps}
 >
-    <section class="transfer-list-source" aria-label={sourceLabel}>
+    <section
+        class="transfer-list-source"
+        aria-label={sourceLabel}
+    >
         {@render source()}
     </section>
     {#if actions}
@@ -82,7 +85,10 @@
             {@render actions()}
         </div>
     {/if}
-    <section class="transfer-list-target" aria-label={targetLabel}>
+    <section
+        class="transfer-list-target"
+        aria-label={targetLabel}
+    >
         {@render target()}
     </section>
 </div>

package/dist/components/TreeLink/TreeLink.svelte

@@ -2,17 +2,27 @@
     import type { Snippet } from "svelte";
     let {
         class: className = "",
+        href,
         label = undefined,
         children,
         ...restProps
     }: {
+        /** The URL to navigate to. */
+        href: string;
+        /** Accessible label override for screen readers. */
         label?: string;
+        /** The link content. */
         children: Snippet;
         [key: string]: unknown;
     } = $props();
 </script>
 
 <!-- TreeLink.svelte -->
-<div class={`tree-link ${className}`} aria-label={label} {...restProps}>
+<a
+    class={`tree-link ${className}`}
+    {href}
+    aria-label={label}
+    {...restProps}
+>
     {@render children?.()}
-</div>
+</a>

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

@@ -1,6 +1,10 @@
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
+    /** The URL to navigate to. */
+    href: string;
+    /** Accessible label override for screen readers. */
     label?: string;
+    /** The link content. */
     children: Snippet;
     [key: string]: unknown;
 };

package/dist/components/TreeList/TreeList.svelte

@@ -66,9 +66,9 @@
 
     function onkeydown(event: KeyboardEvent) {
         if (!treeRef) return;
-        const items = Array.from(
-            treeRef.querySelectorAll<HTMLElement>("[role='treeitem']"),
-        ).filter((el) => !el.parentElement?.closest("[role='treeitem'][aria-expanded='false']"));
+        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

@@ -49,6 +49,14 @@
 </script>
 
 <!-- TreeListItem.svelte -->
-<li class={`tree-list-item ${className}`} role="treeitem" tabindex="-1" aria-label={label} aria-expanded={expanded} {onkeydown} {...restProps}>
+<li
+    class={`tree-list-item ${className}`}
+    role="treeitem"
+    tabindex="-1"
+    aria-label={label}
+    aria-expanded={expanded}
+    {onkeydown}
+    {...restProps}
+>
     {@render children?.()}
 </li>

package/dist/components/TreeMenu/TreeMenu.svelte

@@ -1,4 +1,15 @@
 <script lang="ts">
+    // TreeMenu — a hierarchical tree menu with expandable branches.
+    //
+    // The root is a <div role="tree"> named by `label`; the consumer supplies the
+    // items, each an element with role="treeitem" and tabindex="-1" (one may be
+    // tabindex="0" as the tab stop). The component moves focus between them.
+    //
+    // Keyboard:
+    //   - ArrowDown / ArrowUp: next / previous tree item, wrapping at the ends
+    //   - Home / End: first / last tree item
+    //
+    // No CSS, no default text: the label and the items are the consumer's.
     import type { Snippet } from "svelte";
     let {
         class: className = "",
@@ -10,9 +21,37 @@
         children: Snippet;
         [key: string]: unknown;
     } = $props();
+
+    let root: HTMLDivElement | undefined = $state();
+
+    function onkeydown(event: KeyboardEvent) {
+        if (!root || !["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+        const items = Array.from(root.querySelectorAll<HTMLElement>('[role="treeitem"]'));
+        if (items.length === 0) return;
+        const current = items.indexOf((event.target as Element).closest('[role="treeitem"]') as HTMLElement);
+        const last = items.length - 1;
+        const next =
+            event.key === "Home"
+                ? 0
+                : event.key === "End"
+                  ? last
+                  : event.key === "ArrowDown"
+                    ? current >= last ? 0 : current + 1
+                    : current <= 0 ? last : current - 1;
+        event.preventDefault();
+        items[next].focus();
+    }
 </script>
 
 <!-- TreeMenu.svelte -->
-<div class={`tree-menu ${className}`} aria-label={label} {...restProps}>
+<div
+    bind:this={root}
+    class={`tree-menu ${className}`}
+    role="tree"
+    aria-label={label}
+    tabindex="-1"
+    {onkeydown}
+    {...restProps}
+>
     {@render children?.()}
 </div>

package/dist/components/TreeSelect/TreeSelect.svelte

@@ -19,7 +19,8 @@
     //
     // Accessibility:
     //   - role="combobox" with aria-haspopup="tree", aria-expanded, aria-label,
-    //     aria-multiselectable when multiple=true.
+    //     data-multiple="true" when multiple=true (aria-multiselectable is not
+    //     valid on a combobox; the consumer's role="tree" carries it).
     //   - Trigger is a native <button>.
     //
     // Internationalization:
@@ -35,6 +36,8 @@
 
     import type { Snippet } from "svelte";
 
+    import { popoverState } from "../Popover/popover.js";
+
     let {
         class: className = "",
         label,
@@ -76,7 +79,7 @@
     aria-haspopup="tree"
     aria-expanded={expanded}
     aria-label={label}
-    aria-multiselectable={multiple || undefined}
+    data-multiple={multiple || undefined}
     {...restProps}
 >
     <button
@@ -87,7 +90,11 @@
     >
         {value ?? placeholder ?? ""}
     </button>
-    <div class="tree-select-panel" hidden={!expanded}>
+    <div
+        class="tree-select-panel"
+        popover="manual"
+        use:popoverState={expanded}
+    >
         {#if children}{@render children?.()}{/if}
     </div>
 </div>

package/dist/components/TuaisceartEireannHealthAndCareNumberView/TuaisceartEireannHealthAndCareNumberView.svelte

@@ -33,4 +33,5 @@
 <span
     class={`tuaisceart-eireann-health-and-care-number-view ${className}`}
     aria-label={label}
-    {...restProps}>{value}</span>
+    {...restProps}>{value}</span
+>

package/dist/components/UruguayCedulaDeIdentidadInput/UruguayCedulaDeIdentidadInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // UruguayCedulaDeIdentidadInput component
+    //
+    // A headless input for entering Uruguay's Cedula de Identidad Number.
+    // Format: Six or seven digits plus a trailing check digit, written 1.234.567-2. The body is left-padded with zeros to seven digits, multiplied by the weights 2,9,8,7,6,3,4 and summed, and the check digit is the amount that brings the sum to the next multiple of 10 (0 when it already is one).
+    //
+    // 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:
+    //   <UruguayCedulaDeIdentidadInput label="Cedula de Identidad 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/C%C3%A9dula_de_identidad
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- UruguayCedulaDeIdentidadInput.svelte -->
+<input
+    class={`uruguay-cedula-de-identidad-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/UruguayCedulaDeIdentidadView/UruguayCedulaDeIdentidadView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // UruguayCedulaDeIdentidadView component
+    //
+    // A headless display component for showing Uruguay's
+    // Cedula de Identidad Number in a read-only format.
+    // Format: Six or seven digits plus a trailing check digit, written 1.234.567-2. The body is left-padded with zeros to seven digits, multiplied by the weights 2,9,8,7,6,3,4 and summed, and the check digit is the amount that brings the sum to the next multiple of 10 (0 when it already is one).
+    //
+    // 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:
+    //   <UruguayCedulaDeIdentidadView label="Cedula de Identidad Number" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/C%C3%A9dula_de_identidad
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- UruguayCedulaDeIdentidadView.svelte -->
+<span
+    class={`uruguay-cedula-de-identidad-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/VideoPlayer/VideoPlayer.svelte

@@ -47,7 +47,7 @@
                     }
                 }
             },
-            { threshold: 0.5 }
+            { threshold: 0.5 },
         );
         observer.observe(video);
         return () => observer.disconnect();
@@ -55,7 +55,11 @@
 </script>
 
 <!-- VideoPlayer.svelte -->
-<figure class={`video-player ${className}`} aria-label={label} {...restProps}>
+<figure
+    class={`video-player ${className}`}
+    aria-label={label}
+    {...restProps}
+>
     <video
         bind:this={videoEl}
         class="video-player-element"

package/dist/components/VietNamCanCuocCongDanInput/VietNamCanCuocCongDanInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // VietNamCanCuocCongDanInput component
+    //
+    // A headless input for entering Viet Nam's Citizen Identification Number (CCCD).
+    // Format: Twelve digits: a three-digit code for the province or country of registration, one digit for gender and century of birth (0 male and 1 female for the 1900s, 2 male and 3 female for the 2000s, and so on in pairs), the last two digits of the year of birth, and six random digits. There is no published check digit.
+    //
+    // 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:
+    //   <VietNamCanCuocCongDanInput label="Citizen Identification Number (CCCD)" 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/Vietnamese_identity_card
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- VietNamCanCuocCongDanInput.svelte -->
+<input
+    class={`viet-nam-can-cuoc-cong-dan-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/VietNamCanCuocCongDanView/VietNamCanCuocCongDanView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // VietNamCanCuocCongDanView component
+    //
+    // A headless display component for showing Viet Nam's
+    // Citizen Identification Number (CCCD) in a read-only format.
+    // Format: Twelve digits: a three-digit code for the province or country of registration, one digit for gender and century of birth (0 male and 1 female for the 1900s, 2 male and 3 female for the 2000s, and so on in pairs), the last two digits of the year of birth, and six random digits. There is no published check digit.
+    //
+    // 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:
+    //   <VietNamCanCuocCongDanView label="Citizen Identification Number (CCCD)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Vietnamese_identity_card
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- VietNamCanCuocCongDanView.svelte -->
+<span
+    class={`viet-nam-can-cuoc-cong-dan-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/Visible/Visible.svelte

@@ -38,7 +38,7 @@
                     }
                 }
             },
-            { threshold, rootMargin }
+            { threshold, rootMargin },
         );
         observer.observe(el);
         return () => observer.disconnect();

package/dist/components/WarningText/WarningText.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    // WarningText component
+    //
+    // A short warning: an optional decorative icon and one bold line of text (the GOV.UK and DHCW
+    // warning-text pattern). The icon is the consumer's (Lily bundles none) and is hidden from
+    // assistive technology. The visually hidden prefix, such as "Warning", is part of the
+    // consumer's children, in the consumer's language; there is no prop or default for it.
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   icon — Snippet, optional. Decorative icon, rendered inside an aria-hidden span.
+    //   children — Snippet, required. The hidden prefix, then the warning text.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <WarningText>
+    //       {#snippet icon()}!{/snippet}
+    //       <span class="visually-hidden">Warning</span>
+    //       You can be fined if you do not register.
+    //   </WarningText>
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        icon = undefined,
+        children,
+        ...restProps
+    }: {
+        /** Optional CSS class appended to the base class */
+        class?: string;
+        /** Optional decorative icon (aria-hidden) */
+        icon?: Snippet;
+        /** The visually hidden prefix, then the warning text */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- WarningText.svelte -->
+<div
+    class={`warning-text ${className}`}
+    {...restProps}
+>
+    {#if icon}
+        <span class="warning-text-icon" aria-hidden="true">{@render icon()}</span>
+    {/if}
+    <strong class="warning-text-text">{@render children?.()}</strong>
+</div>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Optional CSS class appended to the base class */
+    class?: string;
+    /** Optional decorative icon (aria-hidden) */
+    icon?: Snippet;
+    /** The visually hidden prefix, then the warning text */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const WarningText: import("svelte").Component<$$ComponentProps, {}, "">;
+type WarningText = ReturnType<typeof WarningText>;
+export default WarningText;

package/dist/components/WheelPicker/WheelPicker.svelte

@@ -93,7 +93,12 @@
         if (disabled) return;
         if (WHEEL_MOVE_KEYS.includes(event.key)) {
             event.preventDefault();
-            select(nextWheelIndex(options, selectedIndex, event.key as WheelMoveKey, { loop, pageSize }));
+            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));
@@ -119,7 +124,10 @@
 </script>
 
 <!-- WheelPicker.svelte -->
-<div class={`wheel-picker ${className}`} {...restProps}>
+<div
+    class={`wheel-picker ${className}`}
+    {...restProps}
+>
     <div
         bind:this={list}
         class="wheel-picker-list"
@@ -141,10 +149,16 @@
                 aria-disabled={option.disabled ? "true" : undefined}
                 data-value={option.value}
                 data-index={index}
-            >{option.label}</div>
+            >
+                {option.label}
+            </div>
         {/each}
     </div>
     {#if name}
-        <input type="hidden" {name} {value} />
+        <input
+            type="hidden"
+            {name}
+            {value}
+        />
     {/if}
 </div>

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

@@ -4,7 +4,14 @@
  *
  * 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"];
+export const WHEEL_MOVE_KEYS = [
+    "ArrowUp",
+    "ArrowDown",
+    "Home",
+    "End",
+    "PageUp",
+    "PageDown",
+];
 /** Indexes of the options that can be selected. */
 function enabledIndexes(options) {
     const out = [];
@@ -34,7 +41,11 @@ export function nextWheelIndex(options, current, key, move = {}) {
         return key === "ArrowDown" || key === "PageDown" ? first : last;
     switch (key) {
         case "ArrowDown":
-            return position + 1 < enabled.length ? enabled[position + 1] : move.loop ? first : current;
+            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":
@@ -55,7 +66,11 @@ export function nextWheelPrefix(previous, key, now, resetMs = WHEEL_TYPEAHEAD_RE
 }
 /** 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;
+    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