@mozaic-ds/web-components 1.0.0-beta.7 → 1.1.0

package/dist/components/pincode/Pincode.spec.js

@@ -0,0 +1,99 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Pincode from './Pincode.svelte';
+describe('m-pincode component', () => {
+    const baseProps = {
+        id: 'test-pincode',
+        length: 4,
+    };
+    it('renders correct number of inputs', () => {
+        const { container } = render(Pincode, { props: baseProps });
+        const inputs = container.querySelectorAll('input');
+        expect(inputs.length).toBe(4);
+    });
+    it('displays initial value correctly', () => {
+        const value = '1234';
+        const { container } = render(Pincode, { props: { ...baseProps, value } });
+        const inputs = container.querySelectorAll('input');
+        inputs.forEach((input, i) => {
+            expect(input.value).toBe(value[i]);
+        });
+    });
+    it('focuses next input on input', async () => {
+        const { container } = render(Pincode, { props: baseProps });
+        const inputs = container.querySelectorAll('input');
+        await fireEvent.input(inputs[0], { target: { value: '5' } });
+        expect(document.activeElement).toBe(inputs[1]);
+    });
+    it('applies disabled and readonly props', () => {
+        const { container } = render(Pincode, {
+            props: { ...baseProps, disabled: true, readonly: true },
+        });
+        const inputs = container.querySelectorAll('input');
+        inputs.forEach((input) => {
+            expect(input).toBeDisabled();
+            expect(input).toHaveAttribute('readonly');
+        });
+    });
+    it('applies invalid class when isinvalid is true', () => {
+        const { container } = render(Pincode, {
+            props: { ...baseProps, isinvalid: true },
+        });
+        const inputs = container.querySelectorAll('input');
+        inputs.forEach((input) => {
+            expect(input.classList.contains('is-invalid')).toBe(true);
+        });
+    });
+    it('emits input event with concatenated value on input', async () => {
+        const { container } = render(Pincode, { props: baseProps });
+        const root = container.querySelector('.mc-pincode-input');
+        const inputHandler = vi.fn();
+        root.addEventListener('input', inputHandler);
+        const inputs = container.querySelectorAll('input');
+        await fireEvent.input(inputs[0], { target: { value: '1' } });
+        await fireEvent.input(inputs[1], { target: { value: '2' } });
+        expect(inputHandler).toHaveBeenCalled();
+        const lastEvent = inputHandler.mock.calls[inputHandler.mock.calls.length - 1][0];
+        expect(lastEvent.detail.value).toBe('12');
+    });
+    it('handles backspace key to clear previous input and focus', async () => {
+        const { container } = render(Pincode, { props: baseProps });
+        const inputs = container.querySelectorAll('input');
+        await fireEvent.input(inputs[0], { target: { value: '1' } });
+        await fireEvent.input(inputs[1], { target: { value: '' } });
+        await fireEvent.keyDown(inputs[1], { key: 'Backspace' });
+        expect(inputs[0].value).toBe('');
+        expect(document.activeElement).toBe(inputs[0]);
+    });
+    it('handles arrow navigation keys', async () => {
+        const { container } = render(Pincode, { props: baseProps });
+        const inputs = container.querySelectorAll('input');
+        inputs[1].focus();
+        await fireEvent.keyDown(inputs[1], { key: 'ArrowLeft' });
+        expect(document.activeElement).toBe(inputs[0]);
+        inputs[0].focus();
+        await fireEvent.keyDown(inputs[0], { key: 'ArrowRight' });
+        expect(document.activeElement).toBe(inputs[1]);
+    });
+    it('handles paste event correctly', async () => {
+        const { container } = render(Pincode, { props: baseProps });
+        const root = container.querySelector('.mc-pincode-input');
+        const inputHandler = vi.fn();
+        root.addEventListener('input', inputHandler);
+        const pasteEvent = new Event('paste', {
+            bubbles: true,
+            cancelable: true,
+        });
+        Object.defineProperty(pasteEvent, 'clipboardData', {
+            value: {
+                getData: () => '9876',
+            },
+        });
+        await root.dispatchEvent(pasteEvent);
+        expect(inputHandler).toHaveBeenCalled();
+        const inputs = container.querySelectorAll('input');
+        inputs.forEach((input, i) => {
+            expect(input.value).toBe('9876'[i]);
+        });
+    });
+});

package/dist/components/pincode/Pincode.stories.d.ts

@@ -1,14 +1,10 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * The `MPincode` component is the **Svelte / WebComponent** implementation
- * of the Mozaic Pincode Input.
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const FourDigits: any;
-export declare const WithInitialValue: any;
-export declare const Disabled: any;
-export declare const Readonly: any;
-export declare const Invalid: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const WithValue: Story;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
 //# sourceMappingURL=Pincode.stories.d.ts.map

package/dist/components/pincode/Pincode.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pincode.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pincode/Pincode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAI1D;;;GAGG;wBA2DE,IAAI;AAzDT,wBAyDU;AAqBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAoBzC,eAAO,MAAM,UAAU,KAAoB,CAAC;AAe5C,eAAO,MAAM,gBAAgB,KAAoB,CAAC;AAclD,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAW1C,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAW1C,eAAO,MAAM,OAAO,KAAoB,CAAC"}
+{"version":3,"file":"Pincode.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pincode/Pincode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IA6CX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/pincode/Pincode.stories.js

@@ -1,140 +1,75 @@
-import { userEvent, expect, within } from 'storybook/test';
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-/**
- * The `MPincode` component is the **Svelte / WebComponent** implementation
- * of the Mozaic Pincode Input.
- */
-export default {
+const meta = {
     title: 'Form Elements/Pincode',
-    tags: ['autodocs', 'beta', 'version:2.0.0'],
-    context: 'sidebar',
-    args: {
-        id: 'pincode-demo',
-        name: 'otp',
-        length: 6,
-        value: '',
-        isInvalid: false,
-        disabled: false,
-        readonly: false,
-    },
+    component: 'm-pincode',
+    tags: ['v2'],
     argTypes: {
-        id: {
-            description: 'Identifiant unique du pincode',
-            control: 'text',
-        },
-        name: {
-            description: 'Attribut name pour la soumission de formulaire',
-            control: 'text',
-        },
         length: {
-            description: 'Nombre de cases du pincode',
-            control: { type: 'radio' },
-            options: [4, 5, 6],
-        },
-        value: {
-            description: 'Valeur initiale/contrôlée du pincode',
-            control: 'text',
-        },
-        isInvalid: {
-            description: 'Applique l’état invalide',
-            control: 'boolean',
-            table: { category: 'State' },
-        },
-        disabled: {
-            description: 'Désactive le pincode',
-            control: 'boolean',
-            table: { category: 'State' },
-        },
-        readonly: {
-            description: 'Lecture seule',
-            control: 'boolean',
-            table: { category: 'State' },
+            control: {
+                type: 'number',
+                min: 4,
+                max: 6,
+            },
         },
         input: {
-            description: 'Émis à la saisie (CustomEvent<{ value: string }>)',
-            table: { category: 'Events' },
-            action: 'input',
-        },
-        change: {
-            description: 'Émis à chaque changement (CustomEvent<{ value: string }>)',
-            table: { category: 'Events' },
-            action: 'change',
+            control: false,
         },
     },
+    args: {
+        id: 'pincodeId',
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-pincode
+        id=${ifDefined(args.id)}
+        name=${ifDefined(args.name)}
+        value=${ifDefined(args.value)}
+        length=${ifDefined(args.length)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        disabled=${ifDefined(args.disabled)}
+        readonly=${ifDefined(args.readonly)}
+        @input=${(event) => {
+            onInput(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-pincode>
+    `;
+    },
 };
-const Template = (args) => {
-    const el = document.createElement('m-pincode');
-    // Attributs (kebab-case pour WC)
-    if (args.id)
-        el.setAttribute('id', args.id);
-    if (args.name)
-        el.setAttribute('name', args.name);
-    if (args.length)
-        el.setAttribute('length', String(args.length));
-    if (args.value)
-        el.setAttribute('value', String(args.value));
-    if (args.isInvalid)
-        el.setAttribute('isinvalid', 'true');
-    if (args.disabled)
-        el.setAttribute('disabled', 'true');
-    if (args.readonly)
-        el.setAttribute('readonly', 'true');
-    // Actions Storybook
-    el.addEventListener('input', action('input'));
-    el.addEventListener('change', action('change'));
-    return el;
-};
-export const Default = Template.bind({});
-Default.args = {};
-Default.play = async ({ canvasElement }) => {
-    const host = canvasElement.querySelector('m-pincode');
-    const root = host.shadowRoot;
-    const inputs = root.querySelectorAll('.mc-pincode-input__control');
-    expect(inputs.length).toBe(6);
-    await userEvent.click(inputs[0]);
-    await userEvent.type(inputs[0], '123456');
-    const joined = Array.from(inputs)
-        .map((i) => i.value)
-        .join('');
-    expect(joined).toBe('123456');
-};
-export const FourDigits = Template.bind({});
-FourDigits.args = { length: 4 };
-FourDigits.play = async ({ canvasElement }) => {
-    const host = canvasElement.querySelector('m-pincode');
-    const vals = Array.from(host.shadowRoot.querySelectorAll('.mc-pincode-input__control'));
-    expect(vals.length).toBe(4);
-    await userEvent.type(vals[0], '9876');
-    expect(vals.map((i) => i.value).join('')).toBe('9876');
-};
-export const WithInitialValue = Template.bind({});
-WithInitialValue.args = { length: 4, value: '2468' };
-WithInitialValue.play = async ({ canvasElement }) => {
-    const host = canvasElement.querySelector('m-pincode');
-    const inputs = host.shadowRoot.querySelectorAll('.mc-pincode-input__control');
-    const joined = Array.from(inputs)
-        .map((i) => i.value)
-        .join('');
-    expect(joined).toBe('2468'.padEnd(inputs.length, ''));
+export default meta;
+export const WithValue = {
+    args: {
+        id: 'valueId',
+        value: '123098',
+    },
 };
-export const Disabled = Template.bind({});
-Disabled.args = { disabled: true };
-Disabled.play = async ({ canvasElement }) => {
-    const host = canvasElement.querySelector('m-pincode');
-    const inputs = host.shadowRoot.querySelectorAll('.mc-pincode-input__control');
-    inputs.forEach((i) => expect(i.disabled).toBe(true));
+export const Default = {};
+export const Disabled = {
+    args: {
+        id: 'disableId',
+        disabled: true,
+    },
 };
-export const Readonly = Template.bind({});
-Readonly.args = { readonly: true, length: 4, value: '2468' };
-Readonly.play = async ({ canvasElement }) => {
-    const host = canvasElement.querySelector('m-pincode');
-    const inputs = host.shadowRoot.querySelectorAll('.mc-pincode-input__control');
-    inputs.forEach((i) => expect(i.readOnly).toBe(true));
+export const ReadOnly = {
+    args: {
+        id: 'readonlyId',
+        value: '123098',
+        readonly: true,
+    },
 };
-export const Invalid = Template.bind({});
-Invalid.args = { isInvalid: true };
-Invalid.play = async ({ canvasElement }) => {
-    const host = canvasElement.querySelector('m-pincode');
-    const container = host.shadowRoot.querySelector('.mc-pincode-input');
-    expect(container.classList.contains('is-invalid')).toBe(true);
+export const Invalid = {
+    args: {
+        id: 'invalidId',
+        isinvalid: true,
+    },
 };

package/dist/components/pincode/Pincode.svelte

@@ -1,67 +1,78 @@
 <svelte:options customElement={{ tag: 'm-pincode' }} />
 
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
-  type PincodeLen = 4 | 5 | 6;
+  /**
+   * A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.
+   *
+   * @event input {CustomEvent<{ value: string }>} - Emits when the pincode value changes.
+   */
   interface Props {
+    /**
+     * A unique identifier for the pincode element, used to associate the label with the form element.
+     */
     id: string;
-    length?: PincodeLen | string; // <- peut arriver en string via l'attribut
+    /**
+     * The number of input displayed in the pincode element.
+     */
+    length?: 4 | 5 | 6;
+    /**
+     * The name attribute for the pincode element, typically used for form submission.
+     */
     name?: string;
+    /**
+     * The current value of the pincode field.
+     */
     value?: string | number;
-    isInvalid?: boolean;
+    /**
+     * If `true`, applies an invalid state to the pincode.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, disables the pincode, making it non-interactive.
+     */
     disabled?: boolean;
+    /**
+     * If `true`, the pincode is read-only (cannot be edited).
+     */
     readonly?: boolean;
-    [key: string]: any;
   }
 
-  const dispatch = createEventDispatcher();
-
-  let {
-    id,
-    length = 6,
-    name,
-    value = '',
-    isInvalid = false,
-    disabled = false,
-    readonly = false,
-    ...attrsAndEvents
-  }: Props = $props();
+  let { id, length = 6, name, value, isinvalid, disabled, readonly }: Props = $props();
 
-  // Normalisation: length numérique (ex. "6" -> 6)
-  const L = $derived(
-    typeof length === 'string' ? parseInt(length, 10) || 6 : length,
-  );
+  const L = $derived(typeof length === 'string' ? parseInt(length, 10) || 6 : length);
 
-  // État minimal
   let otp = $state<string[]>(Array(L).fill(''));
   let inputs = $state<HTMLInputElement[]>([]);
+  let element: HTMLElement;
 
-  // Sync depuis props (value/length normalisé)
   $effect(() => {
     const incoming = String(value ?? '');
     otp = Array.from({ length: L }, (_, i) => incoming[i] ?? '');
   });
 
-  function focusInput(i: number) {
+  const focusInput = (i: number) => {
     queueMicrotask(() => inputs?.[i]?.focus());
-  }
+  };
 
-  function emit() {
+  const emitInput = () => {
     const joined = otp.join('');
-    dispatch('input', { value: joined });
-    dispatch('change', { value: joined });
-  }
+    const event = new CustomEvent('input', {
+      detail: { value: joined },
+      bubbles: true,
+      composed: true,
+    });
+    element.dispatchEvent(event);
+  };
 
-  function onInput(e: Event, index: number) {
+  const onInput = (e: Event, index: number) => {
     const el = e.target as HTMLInputElement;
     const digit = el.value.replace(/\D/g, '').slice(0, 1);
     otp[index] = digit;
-    emit();
+    emitInput();
     if (digit && index + 1 < L) focusInput(index + 1);
-  }
+  };
 
-  function onKeyDown(e: KeyboardEvent, index: number) {
+  const onKeyDown = (e: KeyboardEvent, index: number) => {
     if (e.key === 'ArrowLeft' && index > 0) {
       e.preventDefault();
       focusInput(index - 1);
@@ -70,34 +81,26 @@
       focusInput(index + 1);
     } else if (e.key === 'Backspace' && otp[index] === '' && index > 0) {
       otp[index - 1] = '';
-      emit();
+      emitInput();
       focusInput(index - 1);
     }
-  }
+  };
 
-  function onPaste(e: ClipboardEvent) {
+  const onPaste = (e: ClipboardEvent) => {
     e.preventDefault();
-    const pasted = (e.clipboardData?.getData('text') ?? '')
-      .replace(/\D/g, '')
-      .slice(0, L);
+    const pasted = (e.clipboardData?.getData('text') ?? '').replace(/\D/g, '').slice(0, L);
     otp = Array.from({ length: L }, (_, i) => pasted[i] ?? '');
-    emit();
+    emitInput();
     focusInput(Math.min(pasted.length, L - 1));
-  }
+  };
 </script>
 
-<div
-  class="mc-pincode-input"
-  on:paste|preventDefault={onPaste}
-  class:is-invalid={isInvalid}
-  {...attrsAndEvents}
->
-  {#each Array(L) as _, i}
+<div class="mc-pincode-input" onpaste={onPaste} bind:this={element}>
+  {#each [...Array(L).keys()] as i (i)}
     <input
       id={`pincodeItem${i}`}
       bind:this={inputs[i]}
-      class="mc-pincode-input__control"
-      class:is-invalid={isInvalid}
+      class={['mc-pincode-input__control', isinvalid && 'is-invalid']}
       type="text"
       inputmode="numeric"
       maxlength="1"
@@ -107,8 +110,8 @@
       {disabled}
       {readonly}
       value={otp[i]}
-      on:input={(e) => onInput(e, i)}
-      on:keydown={(e) => onKeyDown(e as KeyboardEvent, i)}
+      oninput={(e) => onInput(e, i)}
+      onkeydown={(e) => onKeyDown(e as KeyboardEvent, i)}
     />
   {/each}
 </div>

package/dist/components/pincode/Pincode.svelte.d.ts

@@ -1,33 +1,39 @@
-type PincodeLen = 4 | 5 | 6;
+/**
+ * A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.
+ *
+ * @event input {CustomEvent<{ value: string }>} - Emits when the pincode value changes.
+ */
 interface Props {
+    /**
+     * A unique identifier for the pincode element, used to associate the label with the form element.
+     */
     id: string;
-    length?: PincodeLen | string;
+    /**
+     * The number of input displayed in the pincode element.
+     */
+    length?: 4 | 5 | 6;
+    /**
+     * The name attribute for the pincode element, typically used for form submission.
+     */
     name?: string;
+    /**
+     * The current value of the pincode field.
+     */
     value?: string | number;
-    isInvalid?: boolean;
+    /**
+     * If `true`, applies an invalid state to the pincode.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, disables the pincode, making it non-interactive.
+     */
     disabled?: boolean;
+    /**
+     * If `true`, the pincode is read-only (cannot be edited).
+     */
     readonly?: boolean;
-    [key: string]: any;
 }
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Pincode: $$__sveltets_2_IsomorphicComponent<Props, {
-    input: CustomEvent<any>;
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Pincode = InstanceType<typeof Pincode>;
+declare const Pincode: import("svelte").Component<Props, {}, "">;
+type Pincode = ReturnType<typeof Pincode>;
 export default Pincode;
 //# sourceMappingURL=Pincode.svelte.d.ts.map

package/dist/components/pincode/Pincode.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pincode.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/pincode/Pincode.svelte.ts"],"names":[],"mappings":"AAME,KAAK,UAAU,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAC5B,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAyFH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,OAAO;;;;;cAA+E,CAAC;AAC3E,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Pincode.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/pincode/Pincode.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0EH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/pincode/README.md

@@ -0,0 +1,22 @@
+# `m-pincode`
+
+A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the pincode element, used to associate the label with the form element. | `string` |   |
+| `length` | The number of input displayed in the pincode element. | `4` `5` `6` | `6` |
+| `name` | The name attribute for the pincode element, typically used for form submission. | `string` |   |
+| `value` | The current value of the pincode field. | `string` `number` |   |
+| `isinvalid` | If `true`, applies an invalid state to the pincode. | `boolean` |   |
+| `disabled` | If `true`, disables the pincode, making it non-interactive. | `boolean` |   |
+| `readonly` | If `true`, the pincode is read-only (cannot be edited). | `boolean` |   |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `input` | Emits when the pincode value changes. | `CustomEvent<{ value: string }>` |
+