@lilydesignsystem/svelte-headless 0.1.0

package/dist/components/MeasurementInstanceInput/MeasurementInstanceInput.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+    // MeasurementInstanceInput component
+    //
+    // A headless text input for entering a specific measurement instance value,
+    // such as "72 kg", "98.6 F", or "120/80 mmHg". A measurement instance is an
+    // individual recorded measurement combining a numeric value with its unit.
+    // The component renders an <input type="text"> with aria-label for accessible
+    // naming and a bindable value for reactive form integration.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name for the input via aria-label.
+    //   value — string, default "". Bindable measurement instance value via $bindable().
+    //   required — boolean, default false. Whether the field is required.
+    //   disabled — boolean, default false. Whether the field is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <MeasurementInstanceInput label="Weight" bind:value />
+    //
+    // Examples:
+    //   <!-- Basic measurement input -->
+    //   <MeasurementInstanceInput label="Weight" bind:value />
+    //
+    //   <!-- Required temperature input -->
+    //   <MeasurementInstanceInput label="Temperature" bind:value required />
+    //
+    // Keyboard:
+    //   - Native <input type="text"> keyboard behavior (typing, selection, clipboard-copy-button).
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name from the label prop
+    //   - Supports required and disabled HTML states
+    //
+    // Internationalization:
+    //   - The label prop accepts any translated string
+    //   - No hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Part of the Input/View pattern; pairs with MeasurementInstanceView
+    //
+    // References:
+    //   - HTML input element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        /** Accessible name for the measurement instance input */
+        label: string;
+        /** Bindable measurement instance value */
+        value?: string;
+        /** Whether the input is required */
+        required?: boolean;
+        /** Whether the input is disabled */
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- MeasurementInstanceInput.svelte -->
+<input
+    class={`measurement-instance-input ${className}`}
+    type="text"
+    aria-label={label}
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    /** Accessible name for the measurement instance input */
+    label: string;
+    /** Bindable measurement instance value */
+    value?: string;
+    /** Whether the input is required */
+    required?: boolean;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+declare const MeasurementInstanceInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type MeasurementInstanceInput = ReturnType<typeof MeasurementInstanceInput>;
+export default MeasurementInstanceInput;

package/dist/components/MeasurementInstanceView/MeasurementInstanceView.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+    // MeasurementInstanceView component
+    //
+    // A headless display component that shows a specific measurement instance
+    // value in a <span> element. A measurement instance is a concrete data point
+    // such as "72 kg", "98.6 F", or "120/80 mmHg". This is a read-only display
+    // component, part of the Input/View pattern for measurement data.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   value — string, required. The measurement instance value to display.
+    //   label — string, optional. Accessible name via aria-label for additional context.
+    //   ...restProps — additional HTML attributes spread onto the <span>.
+    //
+    // Syntax:
+    //   <MeasurementInstanceView value="72 kg" />
+    //
+    // Examples:
+    //   <!-- Simple measurement display -->
+    //   <MeasurementInstanceView value="72 kg" />
+    //
+    //   <!-- With accessible label for screen reader context -->
+    //   <MeasurementInstanceView value="98.6 F" label="Body temperature" />
+    //
+    // Keyboard:
+    //   - None — this is a display-only component with no interactive behavior.
+    //
+    // Accessibility:
+    //   - aria-label optionally provides additional context beyond the displayed value
+    //   - Text content is inherently accessible to screen readers
+    //
+    // Internationalization:
+    //   - All text comes through the value and label props
+    //   - No hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Part of the Input/View pattern; pairs with MeasurementInstanceInput
+    //
+    // References:
+    //   - HTML span element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
+
+    let {
+        class: className = "",
+        value,
+        label = undefined,
+        ...restProps
+    }: {
+        /** The measurement instance value to display */
+        value: string;
+        /** Optional accessible name */
+        label?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- MeasurementInstanceView.svelte -->
+<span
+    class={`measurement-instance-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    /** The measurement instance value to display */
+    value: string;
+    /** Optional accessible name */
+    label?: string;
+    [key: string]: unknown;
+};
+declare const MeasurementInstanceView: import("svelte").Component<$$ComponentProps, {}, "">;
+type MeasurementInstanceView = ReturnType<typeof MeasurementInstanceView>;
+export default MeasurementInstanceView;

package/dist/components/MeasurementSystemInput/MeasurementSystemInput.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+    // MeasurementSystemInput component
+    //
+    // A headless text input for entering a measurement system name, such as
+    // "metric", "imperial", or "SI". A measurement system is a collection of
+    // units and rules for measuring physical quantities. The component renders
+    // an <input type="text"> with aria-label for accessible naming and a bindable
+    // value for reactive form integration.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name for the input via aria-label.
+    //   value — string, default "". Bindable measurement system name via $bindable().
+    //   required — boolean, default false. Whether the field is required.
+    //   disabled — boolean, default false. Whether the field is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <MeasurementSystemInput label="Measurement system" bind:value />
+    //
+    // Examples:
+    //   <!-- Basic measurement system input -->
+    //   <MeasurementSystemInput label="Measurement system" bind:value />
+    //
+    //   <!-- Required system input -->
+    //   <MeasurementSystemInput label="System" bind:value required />
+    //
+    // Keyboard:
+    //   - Native <input type="text"> keyboard behavior (typing, selection, clipboard-copy-button).
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name from the label prop
+    //   - Supports required and disabled HTML states
+    //
+    // Internationalization:
+    //   - The label prop accepts any translated string
+    //   - No hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Part of the Input/View pattern; pairs with MeasurementSystemView
+    //
+    // References:
+    //   - HTML input element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        /** Accessible name for the measurement system input */
+        label: string;
+        /** Bindable measurement system name */
+        value?: string;
+        /** Whether the input is required */
+        required?: boolean;
+        /** Whether the input is disabled */
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- MeasurementSystemInput.svelte -->
+<input
+    class={`measurement-system-input ${className}`}
+    type="text"
+    aria-label={label}
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    /** Accessible name for the measurement system input */
+    label: string;
+    /** Bindable measurement system name */
+    value?: string;
+    /** Whether the input is required */
+    required?: boolean;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+declare const MeasurementSystemInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type MeasurementSystemInput = ReturnType<typeof MeasurementSystemInput>;
+export default MeasurementSystemInput;

package/dist/components/MeasurementSystemView/MeasurementSystemView.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // MeasurementSystemView component
+    //
+    // A headless display component that shows a measurement system name in a
+    // <span> element. A measurement system is a collection of units and rules for
+    // measuring physical quantities, such as "metric", "imperial", or "SI". This
+    // is a read-only display component, part of the Input/View pattern for
+    // measurement data.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   value — string, required. The measurement system name to display.
+    //   label — string, optional. Accessible name via aria-label for additional context.
+    //   ...restProps — additional HTML attributes spread onto the <span>.
+    //
+    // Syntax:
+    //   <MeasurementSystemView value="metric" />
+    //
+    // Examples:
+    //   <!-- Simple system name display -->
+    //   <MeasurementSystemView value="metric" />
+    //
+    //   <!-- With accessible label for abbreviated system name -->
+    //   <MeasurementSystemView value="SI" label="International System of Units" />
+    //
+    // Keyboard:
+    //   - None — this is a display-only component with no interactive behavior.
+    //
+    // Accessibility:
+    //   - aria-label optionally provides additional context beyond the displayed name
+    //   - Text content is inherently accessible to screen readers
+    //
+    // Internationalization:
+    //   - All text comes through the value and label props
+    //   - No hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Part of the Input/View pattern; pairs with MeasurementSystemInput
+    //
+    // References:
+    //   - HTML span element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
+
+    let {
+        class: className = "",
+        value,
+        label = undefined,
+        ...restProps
+    }: {
+        /** The measurement system name to display */
+        value: string;
+        /** Optional accessible name */
+        label?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- MeasurementSystemView.svelte -->
+<span
+    class={`measurement-system-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    /** The measurement system name to display */
+    value: string;
+    /** Optional accessible name */
+    label?: string;
+    [key: string]: unknown;
+};
+declare const MeasurementSystemView: import("svelte").Component<$$ComponentProps, {}, "">;
+type MeasurementSystemView = ReturnType<typeof MeasurementSystemView>;
+export default MeasurementSystemView;

package/dist/components/MeasurementUnitInput/MeasurementUnitInput.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+    // MeasurementUnitInput component
+    //
+    // A headless text input for entering a measurement unit, such as "kg", "lb",
+    // "cm", "inch", "F", or "C". A measurement unit is a standard quantity used
+    // to express a physical measurement. The component renders an <input type="text">
+    // with aria-label for accessible naming and a bindable value for reactive form
+    // integration.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name for the input via aria-label.
+    //   value — string, default "". Bindable measurement unit value via $bindable().
+    //   required — boolean, default false. Whether the field is required.
+    //   disabled — boolean, default false. Whether the field is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <MeasurementUnitInput label="Unit" bind:value />
+    //
+    // Examples:
+    //   <!-- Basic unit input -->
+    //   <MeasurementUnitInput label="Unit" bind:value />
+    //
+    //   <!-- Required unit input -->
+    //   <MeasurementUnitInput label="Unit of measure" bind:value required />
+    //
+    // Keyboard:
+    //   - Native <input type="text"> keyboard behavior (typing, selection, clipboard-copy-button).
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name from the label prop
+    //   - Supports required and disabled HTML states
+    //
+    // Internationalization:
+    //   - The label prop accepts any translated string
+    //   - No hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Part of the Input/View pattern; pairs with MeasurementUnitView
+    //
+    // References:
+    //   - HTML input element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        /** Accessible name for the measurement unit input */
+        label: string;
+        /** Bindable measurement unit value */
+        value?: string;
+        /** Whether the input is required */
+        required?: boolean;
+        /** Whether the input is disabled */
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- MeasurementUnitInput.svelte -->
+<input
+    class={`measurement-unit-input ${className}`}
+    type="text"
+    aria-label={label}
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    /** Accessible name for the measurement unit input */
+    label: string;
+    /** Bindable measurement unit value */
+    value?: string;
+    /** Whether the input is required */
+    required?: boolean;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+declare const MeasurementUnitInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type MeasurementUnitInput = ReturnType<typeof MeasurementUnitInput>;
+export default MeasurementUnitInput;

package/dist/components/MeasurementUnitView/MeasurementUnitView.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // MeasurementUnitView component
+    //
+    // A headless display component that shows a measurement unit in a <span>
+    // element. A measurement unit is a standard quantity used to express a
+    // physical measurement, such as "kg", "lb", "cm", or "inch". This is a
+    // read-only display component, part of the Input/View pattern for measurement
+    // data.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   value — string, required. The measurement unit to display.
+    //   label — string, optional. Accessible name via aria-label for additional context.
+    //   ...restProps — additional HTML attributes spread onto the <span>.
+    //
+    // Syntax:
+    //   <MeasurementUnitView value="kg" />
+    //
+    // Examples:
+    //   <!-- Simple unit abbreviation display -->
+    //   <MeasurementUnitView value="kg" />
+    //
+    //   <!-- With accessible label for abbreviated unit -->
+    //   <MeasurementUnitView value="lb" label="Pounds" />
+    //
+    // Keyboard:
+    //   - None — this is a display-only component with no interactive behavior.
+    //
+    // Accessibility:
+    //   - aria-label optionally provides additional context beyond the displayed unit
+    //   - Text content is inherently accessible to screen readers
+    //
+    // Internationalization:
+    //   - All text comes through the value and label props
+    //   - No hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Part of the Input/View pattern; pairs with MeasurementUnitInput
+    //
+    // References:
+    //   - HTML span element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
+
+    let {
+        class: className = "",
+        value,
+        label = undefined,
+        ...restProps
+    }: {
+        /** The measurement unit to display */
+        value: string;
+        /** Optional accessible name */
+        label?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- MeasurementUnitView.svelte -->
+<span
+    class={`measurement-unit-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    /** The measurement unit to display */
+    value: string;
+    /** Optional accessible name */
+    label?: string;
+    [key: string]: unknown;
+};
+declare const MeasurementUnitView: import("svelte").Component<$$ComponentProps, {}, "">;
+type MeasurementUnitView = ReturnType<typeof MeasurementUnitView>;
+export default MeasurementUnitView;

package/dist/components/MedicalBanner/MedicalBanner.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+    // MedicalBanner component
+    //
+    // A headless medical banner for displaying prominent medical information
+    // messages at the top of a page. Renders as a <div role="region"> with
+    // aria-live="polite", data-type for variants, and data-context="medical".
+    // Supports optional dismiss functionality. Commonly used for patient alerts,
+    // clinical notifications, and medical record summaries.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name via aria-label.
+    //   type — "info" | "success" | "warning" | "error", default "info".
+    //   dismissible — boolean, default false.
+    //   onclose — () => void, optional. Callback when dismissed.
+    //   closeLabel — string, optional. Accessible label for dismiss button.
+    //   children — Snippet, required. The banner content.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <MedicalBanner label="Patient alerts">content</MedicalBanner>
+    //
+    // Keyboard:
+    //   - Tab: Focus dismiss button (when dismissible)
+    //   - Enter/Space: Dismiss the banner
+    //
+    // Accessibility:
+    //   - role="region" for landmark identification
+    //   - aria-live="polite" for announcing content changes
+    //   - data-context="medical" for medical context
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        type = "info",
+        dismissible = false,
+        onclose = undefined,
+        closeLabel = undefined,
+        children,
+        ...restProps
+    }: {
+        label: string;
+        type?: "info" | "success" | "warning" | "error";
+        dismissible?: boolean;
+        onclose?: () => void;
+        closeLabel?: string;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    let visible = $state(true);
+
+    function dismiss() {
+        visible = false;
+        onclose?.();
+    }
+</script>
+
+<!-- MedicalBanner.svelte -->
+{#if visible}
+    <div
+        class={`medical-banner ${className}`}
+        role="region"
+        aria-live="polite"
+        aria-label={label}
+        data-type={type}
+        data-context="medical"
+        {...restProps}
+    >
+        {@render children?.()}
+        {#if dismissible}
+            <button
+                type="button"
+                aria-label={closeLabel}
+                onclick={dismiss}
+            ></button>
+        {/if}
+    </div>
+{/if}

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    label: string;
+    type?: "info" | "success" | "warning" | "error";
+    dismissible?: boolean;
+    onclose?: () => void;
+    closeLabel?: string;
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const MedicalBanner: import("svelte").Component<$$ComponentProps, {}, "">;
+type MedicalBanner = ReturnType<typeof MedicalBanner>;
+export default MedicalBanner;

package/dist/components/MedicalBannerBox/MedicalBannerBox.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    // MedicalBannerBox component
+    //
+    // A headless layout component designed to be placed inside a MedicalBanner.
+    // Renders a <div> with data-context="medical" that the consumer styles with
+    // flexbox horizontal layout to arrange medical banner content items side by side.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, optional. Accessible name via aria-label.
+    //   children — Snippet, required. The medical banner box content.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <MedicalBannerBox>content</MedicalBannerBox>
+    //
+    // Keyboard:
+    //   - None (passive layout element)
+    //
+    // Accessibility:
+    //   - No additional ARIA required; parent MedicalBanner provides landmark
+    //   - Optional aria-label via label prop
+    //   - data-context="medical" for medical context
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label = undefined,
+        children,
+        ...restProps
+    }: {
+        label?: string;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- MedicalBannerBox.svelte -->
+<div
+    class={`medical-banner-box ${className}`}
+    aria-label={label}
+    data-context="medical"
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

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