@lilydesignsystem/svelte-headless 0.6.1 → 0.6.2

package/dist/components/CareCard/CareCard.svelte

@@ -69,6 +69,7 @@
 </script>
 
 <!-- CareCard.svelte -->
+<!-- svelte-ignore a11y_no_redundant_roles (explicit role keeps the landmark when a wrapper host changes the tag) -->
 <section
     class={`care-card ${className}`}
     role="region"

package/dist/components/Cascader/Cascader.svelte

@@ -39,6 +39,8 @@
 
     import type { Snippet } from "svelte";
 
+    import { popoverState } from "../Popover/popover.js";
+
     let {
         class: className = "",
         label,
@@ -87,7 +89,11 @@
     >
         {value ?? placeholder ?? ""}
     </button>
-    <div class="cascader-panel" hidden={!expanded}>
+    <div
+        class="cascader-panel"
+        popover="manual"
+        use:popoverState={expanded}
+    >
         {#if children}{@render children?.()}{/if}
     </div>
 </div>

package/dist/components/ChatComposer/ChatComposer.svelte

@@ -86,7 +86,11 @@
 </script>
 
 <!-- ChatComposer.svelte -->
-<form class={`chat-composer ${className}`} onsubmit={onSubmit} {...restProps}>
+<form
+    class={`chat-composer ${className}`}
+    onsubmit={onSubmit}
+    {...restProps}
+>
     {@render children?.()}
     <textarea
         class="chat-composer-input"
@@ -96,8 +100,7 @@
         {placeholder}
         {name}
         {disabled}
-        onkeydown={onKeydown}
-    ></textarea>
+        onkeydown={onKeydown}></textarea>
     <button
         class="chat-composer-button"
         type={busy ? "button" : "submit"}

package/dist/components/ChatList/ChatList.svelte

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

package/dist/components/ChatListItem/ChatListItem.svelte

@@ -3,16 +3,24 @@
     let {
         class: className = "",
         label = undefined,
+        current = false,
         children,
         ...restProps
     }: {
         label?: string;
+        /** Marks the currently selected conversation (aria-current="true"). */
+        current?: boolean;
         children: Snippet;
         [key: string]: unknown;
     } = $props();
 </script>
 
 <!-- ChatListItem.svelte -->
-<div class={`chat-list-item ${className}`} aria-label={label} {...restProps}>
+<li
+    class={`chat-list-item ${className}`}
+    aria-label={label}
+    aria-current={current ? "true" : undefined}
+    {...restProps}
+>
     {@render children?.()}
-</div>
+</li>

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

@@ -1,6 +1,8 @@
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
     label?: string;
+    /** Marks the currently selected conversation (aria-current="true"). */
+    current?: boolean;
     children: Snippet;
     [key: string]: unknown;
 };

package/dist/components/ChatMessage/ChatMessage.svelte

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

package/dist/components/ChatNav/ChatNav.svelte

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

package/dist/components/CheckListItem/CheckListItem.svelte

@@ -61,7 +61,10 @@
 </script>
 
 <!-- CheckListItem.svelte -->
-<li class={`check-list-item ${className}`} {...restProps}>
+<li
+    class={`check-list-item ${className}`}
+    {...restProps}
+>
     <label>
         <input
             type="checkbox"

package/dist/components/CheckboxGroup/CheckboxGroup.svelte

@@ -72,6 +72,7 @@
 </script>
 
 <!-- CheckboxGroup.svelte -->
+<!-- svelte-ignore a11y_no_redundant_roles (explicit role=group is part of the documented contract) -->
 <fieldset
     class={`checkbox-group ${className}`}
     role="group"

package/dist/components/ChoroplethChart/ChoroplethChart.svelte

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

package/dist/components/Citation/Citation.svelte

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

package/dist/components/Coachmark/Coachmark.svelte

@@ -27,7 +27,7 @@
     //   - role="dialog" with aria-modal="false" (non-modal popover dialog)
     //   - aria-labelledby points at the heading
     //   - aria-describedby points at the description (when provided)
-    //   - hidden attribute removes the closed coachmark from the AT tree
+    //   - closed, it is display: none (popover="manual", or the hidden attribute where the Popover API is missing), so out of the AT tree
     //
     // Internationalization:
     //   - All user-facing strings via props
@@ -37,15 +37,14 @@
     //   - WAI-ARIA Dialog Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 
     function makeId(prefix: string): string {
-        if (
-            typeof crypto !== "undefined" &&
-            typeof crypto.randomUUID === "function"
-        ) {
+        if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
             return `${prefix}-${crypto.randomUUID()}`;
         }
         return `${prefix}-${Math.random().toString(36).slice(2, 11)}`;
     }
 
+    import { popoverState } from "../Popover/popover.js";
+
     let {
         class: className = "",
         open = false,
@@ -80,17 +79,28 @@
     aria-modal="false"
     aria-labelledby={titleId}
     aria-describedby={description ? descId : undefined}
-    hidden={!open}
+    popover="manual"
+    use:popoverState={open}
     {...restProps}
 >
-    <h2 class="coachmark-title" id={titleId}>{title}</h2>
+    <h2
+        class="coachmark-title"
+        id={titleId}
+    >
+        {title}
+    </h2>
     {#if description}
-        <p class="coachmark-description" id={descId}>{description}</p>
+        <p
+            class="coachmark-description"
+            id={descId}
+        >
+            {description}
+        </p>
     {/if}
     <button
         class="coachmark-dismiss"
         type="button"
         aria-label={dismissLabel}
-        onclick={onDismiss}
-    >×</button>
+        onclick={onDismiss}>×</button
+    >
 </div>

package/dist/components/Code/Code.svelte

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

package/dist/components/CodeBlock/CodeBlock.svelte

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

package/dist/components/CollectionListItem/CollectionListItem.svelte

@@ -85,7 +85,7 @@
     {/if}
     <h3 class="collection-list-item-heading">
         {#if href}
-            <a href={href}>{heading}</a>
+            <a {href}>{heading}</a>
         {:else}
             {heading}
         {/if}

package/dist/components/ColombiaCedulaDeCiudadaniaInput/ColombiaCedulaDeCiudadaniaInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // ColombiaCedulaDeCiudadaniaInput component
+    //
+    // A headless input for entering Colombia's Cedula de Ciudadania Number.
+    // Format: Six to ten digits, usually written with dots as thousands separators (1.020.304.050). Newer cards carry the ten-digit Número Único de Identificación Personal (NUIP). There is no 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:
+    //   <ColombiaCedulaDeCiudadaniaInput label="Cedula de Ciudadania 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/Colombian_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>
+
+<!-- ColombiaCedulaDeCiudadaniaInput.svelte -->
+<input
+    class={`colombia-cedula-de-ciudadania-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/ColombiaCedulaDeCiudadaniaView/ColombiaCedulaDeCiudadaniaView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // ColombiaCedulaDeCiudadaniaView component
+    //
+    // A headless display component for showing Colombia's
+    // Cedula de Ciudadania Number in a read-only format.
+    // Format: Six to ten digits, usually written with dots as thousands separators (1.020.304.050). Newer cards carry the ten-digit Número Único de Identificación Personal (NUIP). There is no 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:
+    //   <ColombiaCedulaDeCiudadaniaView label="Cedula de Ciudadania Number" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Colombian_identity_card
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ColombiaCedulaDeCiudadaniaView.svelte -->
+<span
+    class={`colombia-cedula-de-ciudadania-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/ColumnChart/ColumnChart.svelte

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

package/dist/components/Combobox/Combobox.svelte

@@ -57,6 +57,8 @@
     const uid = $props.id();
     const listboxId = `combobox-listbox-${uid}`;
 
+    import { popoverState } from "../Popover/popover.js";
+
     let {
         class: className = "",
         label,
@@ -99,13 +101,13 @@
         bind:value
         {onkeydown}
     />
-    {#if open}
-        <div
-            role="listbox"
-            id={listboxId}
-            aria-label={label}
-        >
-            {@render children?.()}
-        </div>
-    {/if}
+    <div
+        role="listbox"
+        popover="manual"
+        use:popoverState={open}
+        id={listboxId}
+        aria-label={label}
+    >
+        {@render children?.()}
+    </div>
 </div>

package/dist/components/Comment/Comment.svelte

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

package/dist/components/ComposedChart/ComposedChart.svelte

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

package/dist/components/ContentsListItem/ContentsListItem.svelte

@@ -58,6 +58,9 @@
 </script>
 
 <!-- ContentsListItem.svelte -->
-<li class={`contents-list-item ${className}`} {...restProps}>
+<li
+    class={`contents-list-item ${className}`}
+    {...restProps}
+>
     {@render children?.()}
 </li>

package/dist/components/ContentsNav/ContentsNav.svelte

@@ -1,3 +1,39 @@
+<script
+    lang="ts"
+    module
+>
+    /**
+     * Which section is current: the last whose top has passed the activation line
+     * (`tops` are each section's top relative to the scroller; `offset` is the line).
+     * At the bottom of the scroll range the last section wins (a short last section
+     * never reaches the line); before the first section, the first.
+     */
+    export function activeSectionIndex(tops: number[], offset: number, atBottom: boolean): number {
+        if (tops.length === 0) return -1;
+        if (atBottom) return tops.length - 1;
+        let index = 0;
+        for (let i = 0; i < tops.length; i++) {
+            if (tops[i] <= offset + 1) index = i;
+        }
+        return index;
+    }
+
+    /** The in-page `<a href="#id">` links inside `nav`. */
+    export function contentsLinks(nav: Element): HTMLAnchorElement[] {
+        return Array.from(nav.querySelectorAll<HTMLAnchorElement>('a[href^="#"]')).filter(
+            (a) => a.getAttribute("href")!.length > 1,
+        );
+    }
+
+    export function contentsLinkId(link: Element): string {
+        return decodeURIComponent((link.getAttribute("href") ?? "").slice(1));
+    }
+
+    export function contentsTarget(link: Element, doc: Document): HTMLElement | null {
+        return doc.getElementById(contentsLinkId(link));
+    }
+</script>
+
 <script lang="ts">
     // ContentsNav component
     //
@@ -131,7 +167,9 @@
             if (locked) return;
             if (hashPending) {
                 const id = decodeURIComponent(window.location.hash.slice(1));
-                const hashed = id ? contentsLinks(nav!).find((a) => contentsLinkId(a) === id) : undefined;
+                const hashed = id
+                    ? contentsLinks(nav!).find((a) => contentsLinkId(a) === id)
+                    : undefined;
                 if (hashed) {
                     mark(hashed);
                     return;
@@ -174,7 +212,12 @@
 
         function onClick(event: Event): void {
             const link = (event.target as Element | null)?.closest?.("a");
-            if (!link || !nav!.contains(link) || !contentsTarget(link as HTMLAnchorElement, nav!.ownerDocument)) return;
+            if (
+                !link ||
+                !nav!.contains(link) ||
+                !contentsTarget(link as HTMLAnchorElement, nav!.ownerDocument)
+            )
+                return;
             // The link is current at once; observer-style updates wait until the scroll settles.
             mark(link as HTMLAnchorElement);
             locked = true;
@@ -194,13 +237,21 @@
         window.addEventListener("hashchange", onHashChange);
         nav.addEventListener("click", onClick);
         // Links rendered or re-pointed after mount (a list built from data) are picked up too.
-        const mutations = typeof MutationObserver === "undefined" ? null : new MutationObserver(schedule);
-        mutations?.observe(nav, { childList: true, subtree: true, attributes: true, attributeFilter: ["href"] });
+        const mutations =
+            typeof MutationObserver === "undefined" ? null : new MutationObserver(schedule);
+        mutations?.observe(nav, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ["href"],
+        });
 
         // The URL hash wins on load; otherwise the position decides.
         const initial = decodeURIComponent(window.location.hash.slice(1));
         hashPending = initial !== "";
-        const hashLink = initial ? contentsLinks(nav).find((a) => contentsLinkId(a) === initial) : undefined;
+        const hashLink = initial
+            ? contentsLinks(nav).find((a) => contentsLinkId(a) === initial)
+            : undefined;
         if (hashLink) mark(hashLink);
         else update();
 
@@ -217,37 +268,6 @@
     });
 </script>
 
-<script lang="ts" module>
-    /**
-     * Which section is current: the last whose top has passed the activation line
-     * (`tops` are each section's top relative to the scroller; `offset` is the line).
-     * At the bottom of the scroll range the last section wins (a short last section
-     * never reaches the line); before the first section, the first.
-     */
-    export function activeSectionIndex(tops: number[], offset: number, atBottom: boolean): number {
-        if (tops.length === 0) return -1;
-        if (atBottom) return tops.length - 1;
-        let index = 0;
-        for (let i = 0; i < tops.length; i++) {
-            if (tops[i] <= offset + 1) index = i;
-        }
-        return index;
-    }
-
-    /** The in-page `<a href="#id">` links inside `nav`. */
-    export function contentsLinks(nav: Element): HTMLAnchorElement[] {
-        return Array.from(nav.querySelectorAll<HTMLAnchorElement>('a[href^="#"]')).filter((a) => a.getAttribute("href")!.length > 1);
-    }
-
-    export function contentsLinkId(link: Element): string {
-        return decodeURIComponent((link.getAttribute("href") ?? "").slice(1));
-    }
-
-    export function contentsTarget(link: Element, doc: Document): HTMLElement | null {
-        return doc.getElementById(contentsLinkId(link));
-    }
-</script>
-
 <!-- ContentsNav.svelte -->
 <nav
     bind:this={navEl}