@lilydesignsystem/svelte-headless 0.1.0

package/dist/components/PolskaPeselInput/PolskaPeselInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // PolskaPeselInput component
+    //
+    // A headless input for entering Poland's PESEL.
+    // Format: 11 numeric digits; assigned shortly after birth and unchanged for life.
+    //
+    // 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:
+    //   <PolskaPeselInput label="PESEL" 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/PESEL
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- PolskaPeselInput.svelte -->
+<input
+    class={`polska-pesel-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/PolskaPeselView/PolskaPeselView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // PolskaPeselView component
+    //
+    // A headless display component for showing Poland's
+    // PESEL in a read-only format.
+    // Format: 11 numeric digits; assigned shortly after birth and unchanged for life.
+    //
+    // 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:
+    //   <PolskaPeselView label="PESEL" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/PESEL
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- PolskaPeselView.svelte -->
+<span
+    class={`polska-pesel-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/PopconfirmDialog/PopconfirmDialog.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+    // PopconfirmDialog component
+    //
+    // A popover dialog with confirm and cancel buttons. Renders an alertdialog
+    // with required title and button labels. Generates stable id values for
+    // aria-labelledby and aria-describedby.
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   open — boolean, default false. Whether the dialog is open.
+    //   title — string, REQUIRED. Dialog heading text.
+    //   description — string, optional. Body text.
+    //   confirmLabel — string, REQUIRED. Confirm button text.
+    //   cancelLabel — string, REQUIRED. Cancel button text.
+    //   onconfirm — (event: MouseEvent) => void, optional.
+    //   oncancel — (event: MouseEvent) => void, optional.
+    //   ...restProps — additional HTML attributes spread onto the root <div>.
+    //
+    // Syntax:
+    //   <PopconfirmDialog
+    //     open={isOpen}
+    //     title="Delete this item?"
+    //     description="This cannot be undone."
+    //     confirmLabel="Delete"
+    //     cancelLabel="Cancel"
+    //     onconfirm={confirm}
+    //     oncancel={cancel}
+    //   />
+    //
+    // Accessibility:
+    //   - role="alertdialog" with aria-labelledby (title), aria-describedby
+    //     (description, when present), and aria-modal="false" (popconfirm is
+    //     not modal).
+    //
+    // Internationalization:
+    //   - All user-facing strings come through props.
+    //
+    // Claude rules:
+    //   - Headless: no styles.
+    //   - title, confirmLabel, cancelLabel are REQUIRED.
+    //   - id values are generated via crypto.randomUUID for stability.
+    //
+    // References:
+    //   - Ant Design Popconfirm: https://ant.design/components/popconfirm
+    //   - WAI-ARIA Alert and Message Dialogs Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
+
+    let {
+        class: className = "",
+        open = false,
+        title,
+        description = undefined,
+        confirmLabel,
+        cancelLabel,
+        onconfirm = undefined,
+        oncancel = undefined,
+        ...restProps
+    }: {
+        /** CSS class appended to the base class */
+        class?: string;
+        /** Whether the dialog is open */
+        open?: boolean;
+        /** Dialog heading text (REQUIRED) */
+        title: string;
+        /** Body text */
+        description?: string;
+        /** Confirm button label (REQUIRED) */
+        confirmLabel: string;
+        /** Cancel button label (REQUIRED) */
+        cancelLabel: string;
+        /** Confirm handler */
+        onconfirm?: (event: MouseEvent) => void;
+        /** Cancel handler */
+        oncancel?: (event: MouseEvent) => void;
+        [key: string]: unknown;
+    } = $props();
+
+    // Generate stable ids for aria-labelledby and aria-describedby. Using
+    // crypto.randomUUID once at component initialization keeps the ids stable
+    // for the lifetime of this component instance.
+    function makeId(prefix: string): string {
+        if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+            return `${prefix}-${crypto.randomUUID()}`;
+        }
+        return `${prefix}-${Math.random().toString(36).slice(2, 11)}`;
+    }
+
+    const titleId = makeId("popconfirm-dialog-title");
+    const descId = makeId("popconfirm-dialog-description");
+</script>
+
+<!-- PopconfirmDialog.svelte -->
+<div
+    class={`popconfirm-dialog ${className}`}
+    role="alertdialog"
+    aria-modal="false"
+    aria-labelledby={titleId}
+    aria-describedby={description ? descId : undefined}
+    hidden={!open}
+    {...restProps}
+>
+    <h2 class="popconfirm-dialog-title" id={titleId}>{title}</h2>
+    {#if description}
+        <p class="popconfirm-dialog-description" id={descId}>{description}</p>
+    {/if}
+    <button
+        class="popconfirm-dialog-cancel"
+        type="button"
+        onclick={oncancel}
+    >
+        {cancelLabel}
+    </button>
+    <button
+        class="popconfirm-dialog-confirm"
+        type="button"
+        onclick={onconfirm}
+    >
+        {confirmLabel}
+    </button>
+</div>

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

@@ -0,0 +1,22 @@
+type $$ComponentProps = {
+    /** CSS class appended to the base class */
+    class?: string;
+    /** Whether the dialog is open */
+    open?: boolean;
+    /** Dialog heading text (REQUIRED) */
+    title: string;
+    /** Body text */
+    description?: string;
+    /** Confirm button label (REQUIRED) */
+    confirmLabel: string;
+    /** Cancel button label (REQUIRED) */
+    cancelLabel: string;
+    /** Confirm handler */
+    onconfirm?: (event: MouseEvent) => void;
+    /** Cancel handler */
+    oncancel?: (event: MouseEvent) => void;
+    [key: string]: unknown;
+};
+declare const PopconfirmDialog: import("svelte").Component<$$ComponentProps, {}, "">;
+type PopconfirmDialog = ReturnType<typeof PopconfirmDialog>;
+export default PopconfirmDialog;

package/dist/components/Popover/Popover.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+    // Popover component
+    //
+    // A headless conditional dialog overlay that displays contextual information or
+    // actions near the element that triggered it. It renders a <div> with role="dialog"
+    // only when the open state is true, using $bindable() for two-way binding of
+    // visibility. Unlike tooltips, popovers can contain rich interactive content such
+    // as forms, buttons, or other controls. Commonly used for contextual menus,
+    // information panels, and inline editing.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name for the popover dialog via aria-label.
+    //   open — boolean, default false, bindable. Controls whether the popover is visible.
+    //   children — Snippet, required. The popover content.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <Popover label="Info" bind:open>{children}</Popover>
+    //
+    // Examples:
+    //   <!-- Popover with toggle trigger -->
+    //   <button onclick={() => showPopover = !showPopover}>Toggle info</button>
+    //   <Popover label="Additional information" bind:open={showPopover}>
+    //     <p>Here is some contextual information.</p>
+    //     <button onclick={() => showPopover = false}>Close</button>
+    //   </Popover>
+    //
+    // Keyboard:
+    //   - Escape: consumer should implement closing the popover by setting open to false
+    //   - Tab: consumer should consider trapping focus within the popover when open
+    //
+    // Accessibility:
+    //   - role="dialog" identifies the popover as a dialog overlay
+    //   - aria-label provides the accessible name for the dialog
+    //   - Conditionally rendered; not in the DOM when closed
+    //
+    // Internationalization:
+    //   - The label prop is the only text; all content comes through children
+    //   - No hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Consumer must provide trigger element and open/close logic
+    //   - Do not add focus trapping or Escape handling — consumer responsibility
+    //
+    // References:
+    //   - WAI-ARIA Dialog Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/dialog/
+    //   - WAI-ARIA dialog role: https://www.w3.org/TR/wai-aria-1.2/#dialog
+
+    import type { Snippet } from "svelte";
+    let {
+        class: className = "",
+        label,
+        open = $bindable(false),
+        children,
+        ...restProps
+    }: {
+        label: string;
+        open?: boolean;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Popover.svelte -->
+{#if open}
+    <div
+        class={`popover ${className}`}
+        role="dialog"
+        aria-label={label}
+        {...restProps}
+    >
+        {@render children?.()}
+    </div>
+{/if}

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

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

package/dist/components/Popup/Popup.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+    // Popup component
+    //
+    // A headless conditional overlay dialog that temporarily appears over the main
+    // content to convey information, prompt user actions, or display additional
+    // options. It renders a <div> with role="dialog" only when the open state is
+    // true. Similar to Popover but designed as a general-purpose overlay dialog.
+    // Commonly used for confirmations, prompts, contextual actions, and inline forms.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name for the popup dialog via aria-label.
+    //   open — boolean, default false, bindable. Controls whether the popup is visible.
+    //   children — Snippet, required. Content rendered inside the dialog.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <Popup label="Info" bind:open>{children}</Popup>
+    //
+    // Examples:
+    //   <!-- Confirmation popup -->
+    //   <button onclick={() => showPopup = !showPopup}>Open popup</button>
+    //   <Popup label="Confirmation" bind:open={showPopup}>
+    //     <p>Are you sure you want to proceed?</p>
+    //     <button onclick={() => showPopup = false}>Yes</button>
+    //     <button onclick={() => showPopup = false}>No</button>
+    //   </Popup>
+    //
+    // Keyboard:
+    //   - Escape: consumer should implement closing the popup by setting open to false
+    //   - Tab: consumer should consider trapping focus within the popup when open
+    //
+    // Accessibility:
+    //   - role="dialog" identifies the popup as a dialog overlay
+    //   - aria-label provides the accessible name for the dialog
+    //   - Conditionally rendered; not in the DOM when closed
+    //
+    // Internationalization:
+    //   - The label prop is the only text; all content comes through children
+    //   - No hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Consumer must provide trigger element and open/close logic
+    //   - Do not add focus trapping or Escape handling — consumer responsibility
+    //
+    // References:
+    //   - WAI-ARIA Dialog Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/dialog/
+    //   - WAI-ARIA dialog role: https://www.w3.org/TR/wai-aria-1.2/#dialog
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        open = $bindable(false),
+        children,
+        ...restProps
+    }: {
+        /** Accessible label for the popup dialog. */
+        label: string;
+        /** Whether the popup is visible. Bindable. */
+        open?: boolean;
+        /** Content rendered inside the popup. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Popup.svelte -->
+{#if open}
+    <div
+        class={`popup ${className}`}
+        role="dialog"
+        aria-label={label}
+        {...restProps}
+    >
+        {@render children?.()}
+    </div>
+{/if}

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible label for the popup dialog. */
+    label: string;
+    /** Whether the popup is visible. Bindable. */
+    open?: boolean;
+    /** Content rendered inside the popup. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const Popup: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Popup = ReturnType<typeof Popup>;
+export default Popup;

package/dist/components/PortugalNumeroDeIdentificacaoFiscalInput/PortugalNumeroDeIdentificacaoFiscalInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // PortugalNumeroDeIdentificacaoFiscalInput component
+    //
+    // A headless input for entering Portugal's Número de Identificação Fiscal (NIF).
+    // Format: 9 digits; the leading digit(s) encode the kind of taxpayer (1-3 personal, 45 non-resident citizen, 5 legal person, etc.).
+    //
+    // 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:
+    //   <PortugalNumeroDeIdentificacaoFiscalInput label="Tax Identification 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/Personal_identification_number_(Portugal)
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- PortugalNumeroDeIdentificacaoFiscalInput.svelte -->
+<input
+    class={`portugal-numero-de-identificacao-fiscal-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/PortugalNumeroDeIdentificacaoFiscalView/PortugalNumeroDeIdentificacaoFiscalView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // PortugalNumeroDeIdentificacaoFiscalView component
+    //
+    // A headless display component for showing Portugal's
+    // Número de Identificação Fiscal (NIF) in a read-only format.
+    // Format: 9 digits; the leading digit(s) encode the kind of taxpayer (1-3 personal, 45 non-resident citizen, 5 legal person, etc.).
+    //
+    // 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:
+    //   <PortugalNumeroDeIdentificacaoFiscalView label="Tax Identification Number" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Personal_identification_number_(Portugal)
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- PortugalNumeroDeIdentificacaoFiscalView.svelte -->
+<span
+    class={`portugal-numero-de-identificacao-fiscal-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/PortugalPassaporteInput/PortugalPassaporteInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // PortugalPassaporteInput component
+    //
+    // A headless input for entering Portugal's Passaporte.
+    // Format: 1 letter [A-Z] and 6 digits [0-9].
+    //
+    // 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:
+    //   <PortugalPassaporteInput label="Portuguese Passport" 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/Portuguese_passport
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- PortugalPassaporteInput.svelte -->
+<input
+    class={`portugal-passaporte-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/PortugalPassaporteView/PortugalPassaporteView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // PortugalPassaporteView component
+    //
+    // A headless display component for showing Portugal's
+    // Passaporte in a read-only format.
+    // Format: 1 letter [A-Z] and 6 digits [0-9].
+    //
+    // 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:
+    //   <PortugalPassaporteView label="Portuguese Passport" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Portuguese_passport
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- PortugalPassaporteView.svelte -->
+<span
+    class={`portugal-passaporte-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>