@lilydesignsystem/svelte-headless 0.2.0 → 0.3.0

package/dist/components/TurkiyeTcKimlikNumarasiView/TurkiyeTcKimlikNumarasiView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // TurkiyeTcKimlikNumarasiView component
+    //
+    // A headless display component for showing Turkey's
+    // T.C. Kimlik Numarası in a read-only format.
+    // Format: Eleven digits, the first never zero. The tenth digit is the units digit of ((sum of digits 1,3,5,7,9) × 7) plus ((sum of digits 2,4,6,8) × 9); the eleventh digit is the units digit of the sum of the first ten digits. The eleventh digit is always even.
+    //
+    // 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:
+    //   <TurkiyeTcKimlikNumarasiView label="T.C. Kimlik Numarası" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Turkish_Identification_Number
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- TurkiyeTcKimlikNumarasiView.svelte -->
+<span
+    class={`turkiye-tc-kimlik-numarasi-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/UkrayinaReyestratsiyniyNomerOblikovoyiKartkyPlatnykaPodatkivInput/UkrayinaReyestratsiyniyNomerOblikovoyiKartkyPlatnykaPodatkivInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // UkrayinaReyestratsiyniyNomerOblikovoyiKartkyPlatnykaPodatkivInput component
+    //
+    // A headless input for entering Ukraine's Реєстраційний номер облікової картки платника податків (РНОКПП).
+    // Format: Ten digits. The first five encode date of birth as the number of days elapsed since 1 January 1900; the next four are a registration sequence number, whose own last digit's parity encodes sex (odd male, even female); the tenth digit is a check digit computed with a weighted-sum algorithm over the first nine 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:
+    //   <UkrayinaReyestratsiyniyNomerOblikovoyiKartkyPlatnykaPodatkivInput label="Реєстраційний номер облікової картки платника податків (РНОКПП)" 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/Taxpayer_Identification_Number
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- UkrayinaReyestratsiyniyNomerOblikovoyiKartkyPlatnykaPodatkivInput.svelte -->
+<input
+    class={`ukrayina-reyestratsiyniy-nomer-oblikovoyi-kartky-platnyka-podatkiv-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/UkrayinaReyestratsiyniyNomerOblikovoyiKartkyPlatnykaPodatkivView/UkrayinaReyestratsiyniyNomerOblikovoyiKartkyPlatnykaPodatkivView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // UkrayinaReyestratsiyniyNomerOblikovoyiKartkyPlatnykaPodatkivView component
+    //
+    // A headless display component for showing Ukraine's
+    // Реєстраційний номер облікової картки платника податків (РНОКПП) in a read-only format.
+    // Format: Ten digits. The first five encode date of birth as the number of days elapsed since 1 January 1900; the next four are a registration sequence number, whose own last digit's parity encodes sex (odd male, even female); the tenth digit is a check digit computed with a weighted-sum algorithm over the first nine 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:
+    //   <UkrayinaReyestratsiyniyNomerOblikovoyiKartkyPlatnykaPodatkivView label="Реєстраційний номер облікової картки платника податків (РНОКПП)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Taxpayer_Identification_Number
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- UkrayinaReyestratsiyniyNomerOblikovoyiKartkyPlatnykaPodatkivView.svelte -->
+<span
+    class={`ukrayina-reyestratsiyniy-nomer-oblikovoyi-kartky-platnyka-podatkiv-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/YisraelTeudatZehutInput/YisraelTeudatZehutInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // YisraelTeudatZehutInput component
+    //
+    // A headless input for entering Israel's Teudat Zehut (תעודת זהות).
+    // Format: Nine digits (left-padded with zeros when shorter), with the ninth a Luhn (Modulus-10) check digit: digits alternate between weights of 1 and 2 from the left, any doubled product over 9 has its own two digits summed, and the total must be a multiple of 10.
+    //
+    // 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:
+    //   <YisraelTeudatZehutInput label="Teudat Zehut (תעודת זהות)" 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/Israeli_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>
+
+<!-- YisraelTeudatZehutInput.svelte -->
+<input
+    class={`yisrael-teudat-zehut-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/YisraelTeudatZehutView/YisraelTeudatZehutView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // YisraelTeudatZehutView component
+    //
+    // A headless display component for showing Israel's
+    // Teudat Zehut (תעודת זהות) in a read-only format.
+    // Format: Nine digits (left-padded with zeros when shorter), with the ninth a Luhn (Modulus-10) check digit: digits alternate between weights of 1 and 2 from the left, any doubled product over 9 has its own two digits summed, and the total must be a multiple of 10.
+    //
+    // 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:
+    //   <YisraelTeudatZehutView label="Teudat Zehut (תעודת זהות)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Israeli_identity_card
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- YisraelTeudatZehutView.svelte -->
+<span
+    class={`yisrael-teudat-zehut-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/ZhongguoJuminShenfenzhengHaomaInput/ZhongguoJuminShenfenzhengHaomaInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // ZhongguoJuminShenfenzhengHaomaInput component
+    //
+    // A headless input for entering China's 居民身份证号码 (Jūmín Shēnfènzhèng Hàomǎ).
+    // Format: Eighteen characters under national standard GB 11643. The first six digits encode the region of registration; the next eight encode date of birth (YYYYMMDD); the next three are a sequence number whose last digit's parity encodes sex (odd male, even female); the eighteenth character is a check character computed with the ISO 7064:1983 MOD 11-2 algorithm over the first seventeen digits — a value of 10 is written as the letter X.
+    //
+    // 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:
+    //   <ZhongguoJuminShenfenzhengHaomaInput label="居民身份证号码 (Jūmín Shēnfènzhèng Hàomǎ)" 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/Resident_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>
+
+<!-- ZhongguoJuminShenfenzhengHaomaInput.svelte -->
+<input
+    class={`zhongguo-jumin-shenfenzheng-haoma-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/ZhongguoJuminShenfenzhengHaomaView/ZhongguoJuminShenfenzhengHaomaView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // ZhongguoJuminShenfenzhengHaomaView component
+    //
+    // A headless display component for showing China's
+    // 居民身份证号码 (Jūmín Shēnfènzhèng Hàomǎ) in a read-only format.
+    // Format: Eighteen characters under national standard GB 11643. The first six digits encode the region of registration; the next eight encode date of birth (YYYYMMDD); the next three are a sequence number whose last digit's parity encodes sex (odd male, even female); the eighteenth character is a check character computed with the ISO 7064:1983 MOD 11-2 algorithm over the first seventeen digits — a value of 10 is written as the letter X.
+    //
+    // 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:
+    //   <ZhongguoJuminShenfenzhengHaomaView label="居民身份证号码 (Jūmín Shēnfènzhèng Hàomǎ)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Resident_Identity_Card
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ZhongguoJuminShenfenzhengHaomaView.svelte -->
+<span
+    class={`zhongguo-jumin-shenfenzheng-haoma-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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