@lilydesignsystem/svelte-headless 0.2.0 → 0.3.0

package/dist/components/OsterreichSozialversicherungsnummerInput/OsterreichSozialversicherungsnummerInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // OsterreichSozialversicherungsnummerInput component
+    //
+    // A headless input for entering Austria's Sozialversicherungsnummer (SVNR).
+    // Format: Ten digits, displayed as NNNN DDMMYY. The first three digits are a serial number (the first not zero) followed by a Modulus-11 check digit as the fourth digit; the remaining six digits encode date of birth (DDMMYY). If the Modulus-11 remainder is 10, the serial number is incremented by one and the check digit recalculated.
+    //
+    // 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:
+    //   <OsterreichSozialversicherungsnummerInput label="Sozialversicherungsnummer (SVNR)" 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://de.wikipedia.org/wiki/Sozialversicherungsnummer
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- OsterreichSozialversicherungsnummerInput.svelte -->
+<input
+    class={`osterreich-sozialversicherungsnummer-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/OsterreichSozialversicherungsnummerView/OsterreichSozialversicherungsnummerView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // OsterreichSozialversicherungsnummerView component
+    //
+    // A headless display component for showing Austria's
+    // Sozialversicherungsnummer (SVNR) in a read-only format.
+    // Format: Ten digits, displayed as NNNN DDMMYY. The first three digits are a serial number (the first not zero) followed by a Modulus-11 check digit as the fourth digit; the remaining six digits encode date of birth (DDMMYY). If the Modulus-11 remainder is 10, the serial number is incremented by one and the check digit recalculated.
+    //
+    // 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:
+    //   <OsterreichSozialversicherungsnummerView label="Sozialversicherungsnummer (SVNR)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://de.wikipedia.org/wiki/Sozialversicherungsnummer
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- OsterreichSozialversicherungsnummerView.svelte -->
+<span
+    class={`osterreich-sozialversicherungsnummer-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/PilipinasPhilhealthIdentificationNumberInput/PilipinasPhilhealthIdentificationNumberInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // PilipinasPhilhealthIdentificationNumberInput component
+    //
+    // A headless input for entering the Philippines's PhilHealth Identification Number (PIN).
+    // Format: Twelve-digit number assigned by the Philippine Health Insurance Corporation (PhilHealth) to every enrolled member, commonly displayed grouped as NN-NNNNNNNNN-N. No published check-digit algorithm; correctness is confirmed against PhilHealth's own membership records.
+    //
+    // 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:
+    //   <PilipinasPhilhealthIdentificationNumberInput label="PhilHealth Identification Number (PIN)" 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/PhilHealth
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- PilipinasPhilhealthIdentificationNumberInput.svelte -->
+<input
+    class={`pilipinas-philhealth-identification-number-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/PilipinasPhilhealthIdentificationNumberView/PilipinasPhilhealthIdentificationNumberView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // PilipinasPhilhealthIdentificationNumberView component
+    //
+    // A headless display component for showing the Philippines's
+    // PhilHealth Identification Number (PIN) in a read-only format.
+    // Format: Twelve-digit number assigned by the Philippine Health Insurance Corporation (PhilHealth) to every enrolled member, commonly displayed grouped as NN-NNNNNNNNN-N. No published check-digit algorithm; correctness is confirmed against PhilHealth's own membership records.
+    //
+    // 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:
+    //   <PilipinasPhilhealthIdentificationNumberView label="PhilHealth Identification Number (PIN)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/PhilHealth
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- PilipinasPhilhealthIdentificationNumberView.svelte -->
+<span
+    class={`pilipinas-philhealth-identification-number-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/PrathetThaiLekPrajamTuaPrachachonInput/PrathetThaiLekPrajamTuaPrachachonInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // PrathetThaiLekPrajamTuaPrachachonInput component
+    //
+    // A headless input for entering Thailand's เลขประจำตัวประชาชน (Lek Prajam Tua Prachachon).
+    // Format: Thirteen digits. Digit 1 denotes registration category; digits 2-5 denote the district/province office of registration; digits 6-10 form a serial number; digit 11 is a Modulus-11 check digit computed over the first ten digits; digits 12-13 are further disambiguating digits.
+    //
+    // 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:
+    //   <PrathetThaiLekPrajamTuaPrachachonInput label="เลขประจำตัวประชาชน (Lek Prajam Tua Prachachon)" 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/Thai_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>
+
+<!-- PrathetThaiLekPrajamTuaPrachachonInput.svelte -->
+<input
+    class={`prathet-thai-lek-prajam-tua-prachachon-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/PrathetThaiLekPrajamTuaPrachachonView/PrathetThaiLekPrajamTuaPrachachonView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // PrathetThaiLekPrajamTuaPrachachonView component
+    //
+    // A headless display component for showing Thailand's
+    // เลขประจำตัวประชาชน (Lek Prajam Tua Prachachon) in a read-only format.
+    // Format: Thirteen digits. Digit 1 denotes registration category; digits 2-5 denote the district/province office of registration; digits 6-10 form a serial number; digit 11 is a Modulus-11 check digit computed over the first ten digits; digits 12-13 are further disambiguating digits.
+    //
+    // 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:
+    //   <PrathetThaiLekPrajamTuaPrachachonView label="เลขประจำตัวประชาชน (Lek Prajam Tua Prachachon)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Thai_identity_card
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- PrathetThaiLekPrajamTuaPrachachonView.svelte -->
+<span
+    class={`prathet-thai-lek-prajam-tua-prachachon-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/RadarChart/RadarChart.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // RadarChart component
+    //
+    // A headless chart container. The consumer supplies the inline svg as
+    // `children`; the component draws nothing. The graphic is a
+    // role="img" wrapper named by `label`. The optional `dataTable` snippet
+    // renders the accessible table alternative as a SIBLING of that image
+    // wrapper, never inside it: a role="img" element makes its descendants
+    // presentational, so a table placed inside would be invisible to
+    // assistive technology.
+    //
+    // Props:
+    //   class — string, optional. Consumer class appended after the base class.
+    //   label — string, required. Accessible name of the chart image.
+    //   children — Snippet. The consumer-supplied inline svg.
+    //   dataTable — Snippet, optional. The accessible table alternative.
+    //   ...restProps — spread onto the root <figure>.
+    //
+    // Markup:
+    //   <figure class="radar-chart">
+    //     <div class="radar-chart-graphic" role="img" aria-label>…svg…</div>
+    //     <div class="radar-chart-data-table">…table…</div>   (only when provided)
+    //   </figure>
+    //
+    // Keyboard: none on the graphic; the data table follows native table behaviour.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no inline styles; no drawing.
+    //   - No hardcoded user-facing strings.
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        children,
+        dataTable,
+        ...restProps
+    }: {
+        /** Accessible name for the chart. */
+        label: string;
+        /** The consumer-supplied inline svg. */
+        children: Snippet;
+        /** Optional accessible data table alternative. */
+        dataTable?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RadarChart.svelte -->
+<figure
+    class={`radar-chart ${className}`}
+    {...restProps}
+>
+    <div class="radar-chart-graphic" role="img" aria-label={label}>
+        {@render children?.()}
+    </div>
+    {#if dataTable}
+        <div class="radar-chart-data-table">
+            {@render dataTable()}
+        </div>
+    {/if}
+</figure>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name for the chart. */
+    label: string;
+    /** The consumer-supplied inline svg. */
+    children: Snippet;
+    /** Optional accessible data table alternative. */
+    dataTable?: Snippet;
+    [key: string]: unknown;
+};
+declare const RadarChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type RadarChart = ReturnType<typeof RadarChart>;
+export default RadarChart;

package/dist/components/RossiyaSnilsInput/RossiyaSnilsInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // RossiyaSnilsInput component
+    //
+    // A headless input for entering Russia's СНИЛС (Strakhovoy Nomer Individualnogo Litsevogo Scheta).
+    // Format: Eleven digits, displayed as NNN-NNN-NNN CC. The first nine digits are an account number; the last two form a Modulus-101 check value computed as a weighted sum of the first nine digits (each multiplied by its position from 9 down to 1), with sums of 100 or 101 both mapping to a check value of 00.
+    //
+    // 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:
+    //   <RossiyaSnilsInput label="СНИЛС (Strakhovoy Nomer Individualnogo Litsevogo Scheta)" 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/SNILS_(Russia)
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RossiyaSnilsInput.svelte -->
+<input
+    class={`rossiya-snils-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/RossiyaSnilsView/RossiyaSnilsView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // RossiyaSnilsView component
+    //
+    // A headless display component for showing Russia's
+    // СНИЛС (Strakhovoy Nomer Individualnogo Litsevogo Scheta) in a read-only format.
+    // Format: Eleven digits, displayed as NNN-NNN-NNN CC. The first nine digits are an account number; the last two form a Modulus-101 check value computed as a weighted sum of the first nine digits (each multiplied by its position from 9 down to 1), with sums of 100 or 101 both mapping to a check value of 00.
+    //
+    // 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:
+    //   <RossiyaSnilsView label="СНИЛС (Strakhovoy Nomer Individualnogo Litsevogo Scheta)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/SNILS_(Russia)
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RossiyaSnilsView.svelte -->
+<span
+    class={`rossiya-snils-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/SankeyChart/SankeyChart.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // SankeyChart component
+    //
+    // A headless chart container. The consumer supplies the inline svg as
+    // `children`; the component draws nothing. The graphic is a
+    // role="img" wrapper named by `label`. The optional `dataTable` snippet
+    // renders the accessible table alternative as a SIBLING of that image
+    // wrapper, never inside it: a role="img" element makes its descendants
+    // presentational, so a table placed inside would be invisible to
+    // assistive technology.
+    //
+    // Props:
+    //   class — string, optional. Consumer class appended after the base class.
+    //   label — string, required. Accessible name of the chart image.
+    //   children — Snippet. The consumer-supplied inline svg.
+    //   dataTable — Snippet, optional. The accessible table alternative.
+    //   ...restProps — spread onto the root <figure>.
+    //
+    // Markup:
+    //   <figure class="sankey-chart">
+    //     <div class="sankey-chart-graphic" role="img" aria-label>…svg…</div>
+    //     <div class="sankey-chart-data-table">…table…</div>   (only when provided)
+    //   </figure>
+    //
+    // Keyboard: none on the graphic; the data table follows native table behaviour.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no inline styles; no drawing.
+    //   - No hardcoded user-facing strings.
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        children,
+        dataTable,
+        ...restProps
+    }: {
+        /** Accessible name for the chart. */
+        label: string;
+        /** The consumer-supplied inline svg. */
+        children: Snippet;
+        /** Optional accessible data table alternative. */
+        dataTable?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- SankeyChart.svelte -->
+<figure
+    class={`sankey-chart ${className}`}
+    {...restProps}
+>
+    <div class="sankey-chart-graphic" role="img" aria-label={label}>
+        {@render children?.()}
+    </div>
+    {#if dataTable}
+        <div class="sankey-chart-data-table">
+            {@render dataTable()}
+        </div>
+    {/if}
+</figure>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name for the chart. */
+    label: string;
+    /** The consumer-supplied inline svg. */
+    children: Snippet;
+    /** Optional accessible data table alternative. */
+    dataTable?: Snippet;
+    [key: string]: unknown;
+};
+declare const SankeyChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type SankeyChart = ReturnType<typeof SankeyChart>;
+export default SankeyChart;