@lilydesignsystem/svelte-headless 0.1.0

package/dist/components/Hero/Hero.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    let {
+        class: className = "",
+        label = undefined,
+        children,
+        ...restProps
+    }: {
+        label?: string;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Hero.svelte -->
+<div class={`hero ${className}`} aria-label={label} {...restProps}>
+    {@render children?.()}
+</div>

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

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

package/dist/components/HeroHeadline/HeroHeadline.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    let {
+        class: className = "",
+        label,
+        media,
+        children,
+        ...restProps
+    }: {
+        label: string;
+        media: Snippet;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- HeroHeadline.svelte -->
+<div
+    class={`hero-headline ${className}`}
+    aria-label={label}
+    {...restProps}
+>
+    {@render media?.()}
+    {@render children?.()}
+</div>

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

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

package/dist/components/HiddenInput/HiddenInput.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    // HiddenInput component
+    //
+    // A hidden form input that renders a native <input type="hidden"> element for passing
+    // data in forms that should not be visible or editable by the user. Useful for including
+    // hidden form values such as CSRF tokens, record IDs, or other metadata that must be
+    // submitted with a form but has no visual presence.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   name — string, required. The form field name attribute.
+    //   value — string, default "". The hidden input value.
+    //   ...restProps — additional HTML attributes spread onto the input element.
+    //
+    // Syntax:
+    //   <HiddenInput name="csrf" value={token} />
+    //
+    // Examples:
+    //   <!-- CSRF token hidden input -->
+    //   <HiddenInput name="csrf" value={token} />
+    //
+    //   <!-- Record ID hidden input -->
+    //   <HiddenInput name="record_id" value={id} />
+    //
+    // Keyboard:
+    //   - None — hidden inputs are not visible or focusable
+    //
+    // Accessibility:
+    //   - No ARIA attributes needed because hidden inputs are not perceivable by any user
+    //
+    // Internationalization:
+    //   - No user-facing strings; name and value are programmatic data
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — hidden inputs have no visual presence
+    //   - Uses native <input type="hidden"> element
+    //   - No ARIA attributes are needed or applied
+    //
+    // References:
+    //   - HTML hidden input: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden
+
+    let {
+        class: className = "",
+        name,
+        value = "",
+        ...restProps
+    }: {
+        name: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- HiddenInput.svelte -->
+<input
+    class={`hidden-input ${className}`}
+    type="hidden"
+    {name}
+    {value}
+    {...restProps}
+/>

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

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

package/dist/components/Hint/Hint.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+    // Hint component
+    //
+    // A hint provides subtle, contextual guidance text associated with a form control.
+    // Typically displayed near an input field to clarify expected formats, explain
+    // functionality, or offer examples. Renders a <p> element with an optional id for
+    // linking to a form control via aria-describedby on the input element.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   id — string, default undefined. ID for linking via aria-describedby on the associated form control.
+    //   children — Snippet, required. Hint text content.
+    //   ...restProps — additional HTML attributes spread onto the p element.
+    //
+    // Syntax:
+    //   <Hint id="email-hint">Enter your work email</Hint>
+    //
+    // Examples:
+    //   <!-- Hint linked to an input via aria-describedby -->
+    //   <Hint id="email-hint">Enter your work email</Hint>
+    //   <input aria-describedby="email-hint" />
+    //
+    //   <!-- Password hint -->
+    //   <Hint id="password-hint">Must be at least 8 characters</Hint>
+    //   <input type="password" aria-describedby="password-hint" />
+    //
+    // Keyboard:
+    //   - None — this is a passive text element; announced by screen readers when the associated control receives focus
+    //
+    // Accessibility:
+    //   - The id attribute provides a target for aria-describedby on the associated form control
+    //   - Screen readers announce the hint text when the linked input receives focus
+    //
+    // Internationalization:
+    //   - All text content comes through the children snippet; no hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - The consumer is responsible for adding aria-describedby to the associated input
+    //   - Renders a <p> element, not a <span> or <div>
+    //
+    // References:
+    //   - WAI Forms Tutorial - Instructions: https://www.w3.org/WAI/tutorials/forms/instructions/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        id = undefined,
+        children,
+        ...restProps
+    }: {
+        id?: string;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Hint.svelte -->
+<p
+    class={`hint ${className}`}
+    {id}
+    {...restProps}
+>
+    {@render children?.()}
+</p>

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

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

package/dist/components/HorizontalScroller/HorizontalScroller.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    // HorizontalScroller component
+    //
+    // A horizontally scrollable region. Renders <div role="region"> with
+    // tabindex=0 and handles ArrowLeft / ArrowRight to scroll horizontally.
+    // Pointer / touch scrolling is left to native overflow behaviour.
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        step = 100,
+        children,
+        ...restProps
+    }: {
+        label: string;
+        step?: number;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    let scrollerEl: HTMLDivElement | undefined = $state(undefined);
+
+    function onkeydown(event: KeyboardEvent) {
+        if (!scrollerEl) return;
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            scrollerEl.scrollBy({ left: step, behavior: "smooth" });
+        } else if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            scrollerEl.scrollBy({ left: -step, behavior: "smooth" });
+        } else if (event.key === "Home") {
+            event.preventDefault();
+            scrollerEl.scrollTo({ left: 0, behavior: "smooth" });
+        } else if (event.key === "End") {
+            event.preventDefault();
+            scrollerEl.scrollTo({ left: scrollerEl.scrollWidth, behavior: "smooth" });
+        }
+    }
+</script>
+
+<!-- HorizontalScroller.svelte -->
+<div
+    bind:this={scrollerEl}
+    class={`horizontal-scroller ${className}`}
+    role="region"
+    aria-label={label}
+    tabindex="0"
+    {onkeydown}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

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

package/dist/components/HoverCard/HoverCard.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    // HoverCard component
+    //
+    // A hover card that displays supplementary content when triggered, typically by a
+    // hover or focus interaction on a trigger element. It conditionally renders a container
+    // with role="tooltip" when the open prop is true. Useful for user profile previews,
+    // link previews, contextual help, or any popover-style content.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name for the hover card via aria-label.
+    //   open — boolean, default false. Whether the hover card is visible; bindable with bind:open.
+    //   children — Snippet, required. Content to display inside the hover card.
+    //   ...restProps — additional HTML attributes spread onto the container div.
+    //
+    // Syntax:
+    //   <HoverCard label="User info" bind:open>{children}</HoverCard>
+    //
+    // Examples:
+    //   <!-- Hover card triggered by mouse/focus events on a button -->
+    //   <button
+    //     onmouseenter={() => open = true}
+    //     onmouseleave={() => open = false}
+    //     onfocus={() => open = true}
+    //     onblur={() => open = false}
+    //   >Hover me</button>
+    //   <HoverCard label="User info" bind:open>
+    //     <p>Profile details here</p>
+    //   </HoverCard>
+    //
+    // Keyboard:
+    //   - None at the component level — consumer manages focus-based visibility on the trigger element
+    //
+    // Accessibility:
+    //   - role="tooltip" identifies the hover card as supplementary descriptive content
+    //   - aria-label provides an accessible name describing the hover card content
+    //   - Consumer should link the trigger to the tooltip via aria-describedby
+    //
+    // Internationalization:
+    //   - The label prop allows localized accessible names; no hardcoded user-facing strings
+    //   - All content comes through the children snippet
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling and positioning
+    //   - Uses $bindable(false) for two-way binding on the open prop
+    //   - Consumer is responsible for managing hover/focus events on the trigger element
+    //   - Fully removed from DOM when closed via {#if open}
+    //
+    // References:
+    //   - WAI-ARIA tooltip role: https://www.w3.org/TR/wai-aria-1.2/#tooltip
+    //   - WAI-ARIA Tooltip Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
+
+    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>
+
+<!-- HoverCard.svelte -->
+{#if open}
+    <div
+        class={`hover-card ${className}`}
+        role="tooltip"
+        aria-label={label}
+        {...restProps}
+    >
+        {@render children?.()}
+    </div>
+{/if}

package/dist/components/HoverCard/HoverCard.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 HoverCard: import("svelte").Component<$$ComponentProps, {}, "open">;
+type HoverCard = ReturnType<typeof HoverCard>;
+export default HoverCard;

package/dist/components/HrvatskaOsobniIdentifikacijskiBrojInput/HrvatskaOsobniIdentifikacijskiBrojInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // HrvatskaOsobniIdentifikacijskiBrojInput component
+    //
+    // A headless input for entering Croatia's Osobni identifikacijski broj (OIB).
+    // Format: 11 digits — 10 random digits plus a check digit; permanent, unique, and assigned to every Croatian citizen and legal person.
+    //
+    // 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:
+    //   <HrvatskaOsobniIdentifikacijskiBrojInput label="Personal 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_(Croatia)
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- HrvatskaOsobniIdentifikacijskiBrojInput.svelte -->
+<input
+    class={`hrvatska-osobni-identifikacijski-broj-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/HrvatskaOsobniIdentifikacijskiBrojView/HrvatskaOsobniIdentifikacijskiBrojView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // HrvatskaOsobniIdentifikacijskiBrojView component
+    //
+    // A headless display component for showing Croatia's
+    // Osobni identifikacijski broj (OIB) in a read-only format.
+    // Format: 11 digits — 10 random digits plus a check digit; permanent, unique, and assigned to every Croatian citizen and legal person.
+    //
+    // 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:
+    //   <HrvatskaOsobniIdentifikacijskiBrojView label="Personal 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_(Croatia)
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- HrvatskaOsobniIdentifikacijskiBrojView.svelte -->
+<span
+    class={`hrvatska-osobni-identifikacijski-broj-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/Icon/Icon.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+    // Icon component
+    //
+    // An icon wrapper that provides proper accessibility semantics for icon content.
+    // Supports both meaningful icons (with accessible labels announced by screen readers)
+    // and decorative icons (hidden from assistive technology). The consumer provides the
+    // actual icon content (text characters, SVG, or any markup) as children.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, default undefined. Accessible name for meaningful icons via aria-label.
+    //   decorative — boolean, default false. When true, hides the icon from assistive technology.
+    //   children — Snippet, required. The icon content (text, SVG, or other markup).
+    //   ...restProps — additional HTML attributes spread onto the span element.
+    //
+    // Syntax:
+    //   <Icon label="Close">x</Icon>
+    //
+    // Examples:
+    //   <!-- Meaningful icon with accessible label -->
+    //   <Icon label="Close">x</Icon>
+    //
+    //   <!-- Decorative icon hidden from screen readers -->
+    //   <Icon decorative>*</Icon>
+    //
+    //   <!-- Icon with custom data attribute -->
+    //   <Icon label="Search" data-testid="search-icon">Q</Icon>
+    //
+    // Keyboard:
+    //   - None — this is a passive container; keyboard behavior depends on the parent interactive element
+    //
+    // Accessibility:
+    //   - role="img" applied to meaningful icons so assistive technology treats the span as an image
+    //   - aria-label provides the accessible name for meaningful icons
+    //   - aria-hidden="true" applied when decorative is true, hiding the icon from the accessibility tree
+    //   - When decorative is true, role is omitted entirely
+    //
+    // Internationalization:
+    //   - The label prop allows localized accessible names; no hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Consumer provides the icon content; this component only handles semantics
+    //   - Mutually exclusive modes: meaningful (label) vs decorative (aria-hidden)
+    //
+    // References:
+    //   - WAI-ARIA img role: https://www.w3.org/TR/wai-aria-1.2/#img
+    //   - WAI-ARIA Images Tutorial: https://www.w3.org/WAI/tutorials/images/decorative/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label = undefined,
+        decorative = false,
+        children,
+        ...restProps
+    }: {
+        label?: string;
+        decorative?: boolean;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Icon.svelte -->
+<span
+    class={`icon ${className}`}
+    role={decorative ? undefined : "img"}
+    aria-label={label}
+    aria-hidden={decorative || undefined}
+    {...restProps}
+>
+    {@render children?.()}
+</span>

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

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

package/dist/components/IconButton/IconButton.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+    // IconButton component
+    //
+    // A headless button containing only an icon with a REQUIRED accessible label.
+    // Renders a native `<button>` so keyboard support, focus, and the button role
+    // come for free. The `label` prop is mandatory because icon-only buttons must
+    // expose an accessible name to assistive technology.
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   label — string, REQUIRED. aria-label for screen readers.
+    //   type — "button" | "submit" | "reset", default "button".
+    //   disabled — boolean, default false.
+    //   pressed — boolean | undefined, default undefined. Toggle button state.
+    //   onclick — (event: MouseEvent) => void, optional. Click handler.
+    //   children — Snippet, required. The icon content (svg, glyph, emoji).
+    //   ...restProps — additional HTML attributes spread onto the <button>.
+    //
+    // Syntax:
+    //   <IconButton label="Close" onclick={handleClose}>×</IconButton>
+    //
+    // Examples:
+    //   <IconButton label="Toggle dark mode" pressed={isDark} onclick={toggle}>🌙</IconButton>
+    //
+    // Keyboard:
+    //   - Tab: Focus the button
+    //   - Enter / Space: Activate
+    //
+    // Accessibility:
+    //   - aria-label is the entire accessible name
+    //   - aria-pressed is rendered only when pressed is provided
+    //   - Native disabled attribute prevents activation
+    //
+    // Internationalization:
+    //   - Label and content come through props
+    //
+    // Claude rules:
+    //   - Headless: no styles
+    //   - label is REQUIRED — TypeScript reflects this
+    //
+    // References:
+    //   - WAI-ARIA Button Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/button/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        type = "button",
+        disabled = false,
+        pressed = undefined,
+        onclick = undefined,
+        children,
+        ...restProps
+    }: {
+        /** Accessible label (REQUIRED for icon-only buttons) */
+        label: string;
+        /** HTML button type */
+        type?: "button" | "submit" | "reset";
+        /** Whether the button is disabled */
+        disabled?: boolean;
+        /** Toggle button pressed state */
+        pressed?: boolean;
+        /** Click handler */
+        onclick?: (event: MouseEvent) => void;
+        /** Icon content */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- IconButton.svelte -->
+<button
+    class={`icon-button ${className}`}
+    {type}
+    {disabled}
+    aria-label={label}
+    aria-pressed={pressed}
+    {onclick}
+    {...restProps}
+>
+    {@render children?.()}
+</button>