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

package/dist/components/passwordinput/PasswordInput.svelte

@@ -1,58 +1,84 @@
 <svelte:options
   customElement={{
     tag: 'm-password-input',
+    extend: customElementForwardEvents,
   }}
 />
 
 <script lang="ts">
-  import Button from '../button/Button.svelte';
+  import { customElementForwardEvents } from '../../utils';
+  /**
+   * A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.
+   */
   interface Props {
+    /**
+     * A unique identifier for the password input element, used to associate the label with the form element.
+     */
     id: string;
+    /**
+     * The name attribute for the password input element, typically used for form submission.
+     */
     name?: string;
+    /**
+     * The current value of the password input field.
+     */
     value?: string | number;
+    /**
+     * A placeholder text to show in the password input when it is empty.
+     */
     placeholder?: string;
+    /**
+     * If `true`, applies an invalid state to the password input.
+     */
     isinvalid?: boolean;
+    /**
+     * If `true`, disables the password input, making it non-interactive.
+     */
     disabled?: boolean;
+    /**
+     * If `true`, the password input is read-only (cannot be edited).
+     */
     readonly?: boolean;
+    /**
+     * If `true`, a clear button will appear when the password input has a value.
+     */
     isclearable?: boolean;
+    /**
+     * The label text for the clear button.
+     */
     clearlabel?: string;
+    /**
+     * Labels of the button displayed when showing or hiding the password.
+     */
     buttonlabel?: {
       show: string;
       hide: string;
     };
-    [key: string]: any;
   }
 
   let {
     id,
     name,
-    value = $bindable(''),
-    placeholder = '',
-    isinvalid = false,
-    disabled = false,
-    readonly = false,
-    isclearable = false,
+    value = $bindable(),
+    placeholder,
+    isinvalid,
+    disabled,
+    readonly,
+    isclearable,
     clearlabel = 'Clear content',
     buttonlabel = { show: 'Show', hide: 'Hide' },
-    onclear,
-    ontoggle,
-    ...events
   }: Props = $props();
 
   let isVisible = $state(false);
 
   function toggleVisibility() {
     isVisible = !isVisible;
-    ontoggle(isVisible);
   }
 
-  function clearValue() {
-    value = '';
-    onclear();
-  }
+  const resetValue = () => (value = '');
 </script>
 
-<div class="mc-password-input mc-text-input {isinvalid ? 'is-invalid' : ''}">
+<div class={['mc-password-input', 'mc-text-input', isinvalid && 'is-invalid']}>
   <input
     class="mc-password-input__control mc-text-input__control"
     {id}
@@ -63,15 +89,10 @@
     {disabled}
     {readonly}
     aria-invalid={isinvalid}
-    {...events}
   />
   {#if isclearable && value}
     <div class="mc-controls-options">
-      <button
-        class="mc-controls-options__button"
-        type="button"
-        onclick={clearValue}
-      >
+      <button class="mc-controls-options__button" type="button" onclick={resetValue}>
         <svg class="mc-controls-options__icon" aria-hidden="true">
           <path
             fill-rule="evenodd"
@@ -83,18 +104,17 @@
     </div>
   {/if}
 
-  <Button
+  <button
+    class={['mc-button', 'mc-button--s', 'mc-button--ghost']}
     type="button"
     role="switch"
     tabindex="0"
-    aria-checked={isVisible}
-    size="s"
-    ghost={true}
     {disabled}
+    aria-checked={isVisible}
     onclick={toggleVisibility}
   >
     <span>{isVisible ? buttonlabel.hide : buttonlabel.show}</span>
-  </Button>
+  </button>
 </div>
 
 <style>/**
@@ -217,6 +237,345 @@
 }
 
 /* stylelint-enable string-no-newline */
+.mc-button {
+  color: var(--button-color-filled-standard-font, #ffffff);
+  background-color: var(--button-color-filled-standard-background, #464e63);
+}
+.mc-button:hover {
+  background-color: var(--button-color-filled-standard-hover-background, #343b4c);
+}
+.mc-button:active {
+  background-color: var(--button-color-filled-standard-active-background, #242938);
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button {
+  font-weight: var(--font-weight-semi-bold, 600);
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+}
+.mc-button .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button {
+  display: inline-flex;
+  justify-content: center;
+  vertical-align: middle;
+  text-align: center;
+  border: 2px solid transparent;
+  border-radius: var(--button-radius, 0.25rem);
+  transition: all ease 200ms;
+  transition: box-shadow 200ms ease;
+  align-items: center;
+  box-sizing: border-box;
+  font-family: inherit;
+  fill: currentcolor;
+  gap: 0.25rem;
+  cursor: pointer;
+}
+.mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button__icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-button--s {
+  padding: 0 calc(0.75rem - 0.125rem);
+  min-height: 2rem;
+  min-width: 2rem;
+}
+.mc-button--s .mc-button__label {
+  font-size: var(--font-size-100, 0.875rem);
+}
+.mc-button--s .mc-button__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-button--s .mc-button__icon:only-child {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-button--m {
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+}
+.mc-button--m .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button--m .mc-button__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button--m .mc-button__icon:only-child {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button--l {
+  padding: 0 calc(1.25rem - 0.125rem);
+  min-height: 4rem;
+  min-width: 4rem;
+}
+.mc-button--l .mc-button__label {
+  font-size: var(--font-size-200, 1.125rem);
+}
+.mc-button--l .mc-button__icon {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-button--l .mc-button__icon:only-child {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-button--icon-only {
+  padding: 0.25rem;
+}
+.mc-button--outlined {
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
+}
+.mc-button--outlined:hover {
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
+}
+.mc-button--outlined:active {
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
+}
+.mc-button--outlined:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost {
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost:hover {
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
+}
+.mc-button--ghost:active {
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
+}
+.mc-button--ghost:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--accent {
+  color: var(--button-color-filled-accent-font, #ffffff);
+  background-color: var(--button-color-filled-accent-background, #117f03);
+}
+.mc-button--accent:hover {
+  background-color: var(--button-color-filled-accent-hover-background, #006902);
+}
+.mc-button--accent:active {
+  background-color: var(--button-color-filled-accent-active-background, #035010);
+}
+.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--danger {
+  color: var(--button-color-filled-danger-font, #ffffff);
+  background-color: var(--button-color-filled-danger-background, #c61112);
+}
+.mc-button--danger:hover {
+  background-color: var(--button-color-filled-danger-hover-background, #8c0003);
+}
+.mc-button--danger:active {
+  background-color: var(--button-color-filled-danger-active-background, #530000);
+}
+.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--inverse {
+  --focus-color-mid: var(--focus-color-outline-outer, #000000);
+  --focus-color-outer: var(--focus-color-outline-mid, #ffffff);
+  color: var(--button-color-filled-inverse-font, #242938);
+  background-color: var(--button-color-filled-inverse-background, #ffffff);
+}
+.mc-button--inverse:hover {
+  background-color: var(--button-color-filled-inverse-hover-background, #e6e6e6);
+}
+.mc-button--inverse:active {
+  background-color: var(--button-color-filled-inverse-active-background, #cccccc);
+}
+.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--icon-button {
+  border-radius: var(--radius-full, 100%);
+  padding: 0;
+}
+.mc-button--loading .mc-button__loader {
+  position: absolute;
+  color: currentcolor;
+}
+.mc-button--loading .mc-button__label,
+.mc-button--loading .mc-button__icon {
+  visibility: hidden;
+}
+.mc-button--outlined.mc-button--standard {
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
+}
+.mc-button--outlined.mc-button--standard:hover {
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
+}
+.mc-button--outlined.mc-button--standard:active {
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
+}
+.mc-button--outlined.mc-button--standard:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--accent {
+  color: var(--button-color-outlined-accent-font, #117f03);
+  border-color: var(--button-color-outlined-accent-border, #78be20);
+  background-color: var(--button-color-outlined-accent-background, #ffffff);
+}
+.mc-button--outlined.mc-button--accent:hover {
+  background-color: var(--button-color-outlined-accent-hover-background, #ebf5de);
+}
+.mc-button--outlined.mc-button--accent:active {
+  background-color: var(--button-color-outlined-accent-active-background, #c5e39e);
+}
+.mc-button--outlined.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--danger {
+  color: var(--button-color-outlined-danger-font, #c61112);
+  border-color: var(--button-color-outlined-danger-border, #ef5f5c);
+  background-color: var(--button-color-outlined-danger-background, #ffffff);
+}
+.mc-button--outlined.mc-button--danger:hover {
+  background-color: var(--button-color-outlined-danger-hover-background, #fdeaea);
+}
+.mc-button--outlined.mc-button--danger:active {
+  background-color: var(--button-color-outlined-danger-active-background, #f8bcbb);
+}
+.mc-button--outlined.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--inverse {
+  color: var(--button-color-outlined-inverse-font, #ffffff);
+  border-color: var(--button-color-outlined-inverse-border, #ffffff);
+  background-color: var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--outlined.mc-button--inverse:hover {
+  background-color: var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));
+}
+.mc-button--outlined.mc-button--inverse:active {
+  background-color: var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));
+}
+.mc-button--outlined.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--standard {
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--standard:hover {
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
+}
+.mc-button--ghost.mc-button--standard:active {
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
+}
+.mc-button--ghost.mc-button--standard:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--accent {
+  color: var(--button-color-ghost-accent-font, #117f03);
+  background-color: var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--accent:hover {
+  background-color: var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));
+}
+.mc-button--ghost.mc-button--accent:active {
+  background-color: var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));
+}
+.mc-button--ghost.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--danger {
+  color: var(--button-color-ghost-danger-font, #c61112);
+  background-color: var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--danger:hover {
+  background-color: var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));
+}
+.mc-button--ghost.mc-button--danger:active {
+  background-color: var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));
+}
+.mc-button--ghost.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--inverse {
+  color: var(--button-color-ghost-inverse-font, #ffffff);
+  background-color: var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--inverse:hover {
+  background-color: var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));
+}
+.mc-button--ghost.mc-button--inverse:active {
+  background-color: var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));
+}
+.mc-button--ghost.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+
 .mc-controls-options {
   align-items: center;
   display: inline-flex;

package/dist/components/passwordinput/PasswordInput.svelte.d.ts

@@ -1,18 +1,50 @@
+/**
+ * A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.
+ */
 interface Props {
+    /**
+     * A unique identifier for the password input element, used to associate the label with the form element.
+     */
     id: string;
+    /**
+     * The name attribute for the password input element, typically used for form submission.
+     */
     name?: string;
+    /**
+     * The current value of the password input field.
+     */
     value?: string | number;
+    /**
+     * A placeholder text to show in the password input when it is empty.
+     */
     placeholder?: string;
+    /**
+     * If `true`, applies an invalid state to the password input.
+     */
     isinvalid?: boolean;
+    /**
+     * If `true`, disables the password input, making it non-interactive.
+     */
     disabled?: boolean;
+    /**
+     * If `true`, the password input is read-only (cannot be edited).
+     */
     readonly?: boolean;
+    /**
+     * If `true`, a clear button will appear when the password input has a value.
+     */
     isclearable?: boolean;
+    /**
+     * The label text for the clear button.
+     */
     clearlabel?: string;
+    /**
+     * Labels of the button displayed when showing or hiding the password.
+     */
     buttonlabel?: {
         show: string;
         hide: string;
     };
-    [key: string]: any;
 }
 declare const PasswordInput: import("svelte").Component<Props, {}, "value">;
 type PasswordInput = ReturnType<typeof PasswordInput>;

package/dist/components/passwordinput/PasswordInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/passwordinput/PasswordInput.svelte.ts"],"names":[],"mappings":"AAKE,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA4DH,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/passwordinput/PasswordInput.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH;AAsDH,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/passwordinput/README.md

@@ -0,0 +1,19 @@
+# `m-password-input`
+
+A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the password input element, used to associate the label with the form element. | `string` |   |
+| `name` | The name attribute for the password input element, typically used for form submission. | `string` |   |
+| `value` | The current value of the password input field. | `string` `number` | `$bindable()` |
+| `placeholder` | A placeholder text to show in the password input when it is empty. | `string` |   |
+| `isinvalid` | If `true`, applies an invalid state to the password input. | `boolean` |   |
+| `disabled` | If `true`, disables the password input, making it non-interactive. | `boolean` |   |
+| `readonly` | If `true`, the password input is read-only (cannot be edited). | `boolean` |   |
+| `isclearable` | If `true`, a clear button will appear when the password input has a value. | `boolean` |   |
+| `clearlabel` | The label text for the clear button. | `string` | `Clear content` |
+| `buttonlabel` | Labels of the button displayed when showing or hiding the password. | `{ show: string; hide: string; }` | `{ show: 'Show', hide: 'Hide' }` |
+

package/dist/components/pincode/Pincode.js

@@ -1,6 +1,6 @@
-import{x as K,$ as R,y as Y,a0 as F,a1 as G,c as H,p as J,a as N,b as m,v as A,l as S,m as a,z as Q,a2 as U,w as E,f as q,D as V,o as I,h as L,i as W,j as p,r as X,t as Z,e as $}from"../../custom-element.js";import{c as ee}from"../../index-client.js";import{e as re,i as te}from"../../each.js";import{b as oe,C as ae,r as se,s as j,e as ne}from"../../attributes.js";function M(o,t){return o===t||(o==null?void 0:o[G])===t}function ie(o={},t,c,u){return K(()=>{var l,i;return R(()=>{l=i,i=(u==null?void 0:u())||[],Y(()=>{o!==c(...i)&&(t(o,...i),l&&M(c(...l),o)&&t(null,...l))})}),()=>{F(()=>{i&&M(c(...i),o)&&t(null,...i)})}}),o}function le(o){return function(...t){var c=t[0];return c.preventDefault(),o==null?void 0:o.apply(this,t)}}var de=q('<input type="text" inputmode="numeric" maxlength="1" pattern="\\d*" autocomplete="one-time-code"/>'),ce=q("<div></div>");const fe={hash:"svelte-h63szf",code:`/**
+import{v as B,c as C,p as K,a as O,b as d,w as z,l as D,m as t,L as R,u as F,x as A,f as L,M as G,i as I,j as H,k as c,r as J,t as N,e as Q,g as T}from"../../custom-element.js";import{e as U}from"../../each.js";import{r as V,s as j,e as W}from"../../attributes.js";import{b as E}from"../../this.js";var X=(u,s,n)=>s(u,n),Y=(u,s,n)=>s(u,n),Z=L('<input type="text" inputmode="numeric" maxlength="1" pattern="\\d*" autocomplete="one-time-code"/>'),$=L('<div class="mc-pincode-input svelte-h63szf"></div>');const ee={hash:"svelte-h63szf",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-pincode-input.svelte-h63szf {display:inline-flex;column-gap:0.5rem;}
 @media screen and (width <= 1024px) {.mc-pincode-input.svelte-h63szf {flex-wrap:wrap;row-gap:0.75rem;}
-}.mc-pincode-input__control.svelte-h63szf {font-size:var(--font-size-400, 1.75rem);transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-radius-border, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:3rem;box-sizing:border-box;height:4rem;text-align:center;line-height:var(--line-height-s, 1.3);}.mc-pincode-input__control.svelte-h63szf::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-pincode-input__control.svelte-h63szf:focus-within {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-pincode-input__control.svelte-h63szf:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-pincode-input__control.svelte-h63szf:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none;}.mc-pincode-input__control.is-invalid.svelte-h63szf {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-pincode-input__control.is-invalid.svelte-h63szf:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);}`};function ue(o,t){J(t,!0),N(o,fe);const c=ee();let u=m(t,"id",7),l=m(t,"length",7,6),i=m(t,"name",7),_=m(t,"value",7,""),g=m(t,"isInvalid",7,!1),x=m(t,"disabled",7,!1),z=m(t,"readonly",7,!1),B=V(t,["$$slots","$$events","$$legacy","$$host","id","length","name","value","isInvalid","disabled","readonly"]);const f=Q(()=>typeof l()=="string"?parseInt(l(),10)||6:l());let v=A(S(Array(a(f)).fill(""))),k=A(S([]));U(()=>{const e=String(_()??"");E(v,Array.from({length:a(f)},(r,n)=>e[n]??""),!0)});function h(e){queueMicrotask(()=>{var r,n;return(n=(r=a(k))==null?void 0:r[e])==null?void 0:n.focus()})}function D(){const e=a(v).join("");c("input",{value:e}),c("change",{value:e})}function C(e,r){const s=e.target.value.replace(/\D/g,"").slice(0,1);a(v)[r]=s,D(),s&&r+1<a(f)&&h(r+1)}function O(e,r){e.key==="ArrowLeft"&&r>0?(e.preventDefault(),h(r-1)):e.key==="ArrowRight"&&r<a(f)-1?(e.preventDefault(),h(r+1)):e.key==="Backspace"&&a(v)[r]===""&&r>0&&(a(v)[r-1]="",D(),h(r-1))}function P(e){var n;e.preventDefault();const r=(((n=e.clipboardData)==null?void 0:n.getData("text"))??"").replace(/\D/g,"").slice(0,a(f));E(v,Array.from({length:a(f)},(s,y)=>r[y]??""),!0),D(),h(Math.min(r.length,a(f)-1))}var T={get id(){return u()},set id(e){u(e),p()},get length(){return l()},set length(e=6){l(e),p()},get name(){return i()},set name(e){i(e),p()},get value(){return _()},set value(e=""){_(e),p()},get isInvalid(){return g()},set isInvalid(e=!1){g(e),p()},get disabled(){return x()},set disabled(e=!1){x(e),p()},get readonly(){return z()},set readonly(e=!1){z(e),p()}},b=ce();return oe(b,e=>({class:"mc-pincode-input",...B,[ae]:e}),[()=>({"is-invalid":g()})],void 0,"svelte-h63szf"),re(b,21,()=>Array(a(f)),te,(e,r,n)=>{var s=de();se(s),j(s,"id",`pincodeItem${n}`);let y;ie(s,(d,w)=>a(k)[w]=d,d=>{var w;return(w=a(k))==null?void 0:w[d]},()=>[n]),Z(d=>{y=$(s,1,"mc-pincode-input__control svelte-h63szf",null,y,d),j(s,"name",i()??`pincode-${u()}`),s.disabled=x(),s.readOnly=z(),ne(s,a(v)[n])},[()=>({"is-invalid":g()})]),I("input",s,d=>C(d,n)),I("keydown",s,d=>O(d,n)),L(e,s)}),X(b),I("paste",b,le(P)),L(o,b),W(T)}customElements.define("m-pincode",H(ue,{id:{},length:{},name:{},value:{},isInvalid:{},disabled:{},readonly:{}},[],[],!0));
+}.mc-pincode-input__control.svelte-h63szf {font-size:var(--font-size-400, 1.75rem);transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-radius-border, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:3rem;box-sizing:border-box;height:4rem;text-align:center;line-height:var(--line-height-s, 1.3);}.mc-pincode-input__control.svelte-h63szf::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-pincode-input__control.svelte-h63szf:focus-within {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-pincode-input__control.svelte-h63szf:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-pincode-input__control.svelte-h63szf:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none;}.mc-pincode-input__control.is-invalid.svelte-h63szf {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-pincode-input__control.is-invalid.svelte-h63szf:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);}`};function oe(u,s){K(s,!0),O(u,ee);let n=d(s,"id",7),v=d(s,"length",7,6),h=d(s,"name",7),b=d(s,"value",7),g=d(s,"isinvalid",7),_=d(s,"disabled",7),y=d(s,"readonly",7);const a=R(()=>typeof v()=="string"?parseInt(v(),10)||6:v());let l=z(D(Array(t(a)).fill(""))),w=z(D([])),x;F(()=>{const e=String(b()??"");A(l,Array.from({length:t(a)},(o,r)=>e[r]??""),!0)});const m=e=>{queueMicrotask(()=>{var o,r;return(r=(o=t(w))==null?void 0:o[e])==null?void 0:r.focus()})},k=()=>{const e=t(l).join(""),o=new CustomEvent("input",{detail:{value:e},bubbles:!0,composed:!0});x.dispatchEvent(o)},M=(e,o)=>{const i=e.target.value.replace(/\D/g,"").slice(0,1);t(l)[o]=i,k(),i&&o+1<t(a)&&m(o+1)},P=(e,o)=>{e.key==="ArrowLeft"&&o>0?(e.preventDefault(),m(o-1)):e.key==="ArrowRight"&&o<t(a)-1?(e.preventDefault(),m(o+1)):e.key==="Backspace"&&t(l)[o]===""&&o>0&&(t(l)[o-1]="",k(),m(o-1))},S=e=>{var r;e.preventDefault();const o=(((r=e.clipboardData)==null?void 0:r.getData("text"))??"").replace(/\D/g,"").slice(0,t(a));A(l,Array.from({length:t(a)},(i,f)=>o[f]??""),!0),k(),m(Math.min(o.length,t(a)-1))};var q={get id(){return n()},set id(e){n(e),c()},get length(){return v()},set length(e=6){v(e),c()},get name(){return h()},set name(e){h(e),c()},get value(){return b()},set value(e){b(e),c()},get isinvalid(){return g()},set isinvalid(e){g(e),c()},get disabled(){return _()},set disabled(e){_(e),c()},get readonly(){return y()},set readonly(e){y(e),c()}},p=$();return U(p,20,()=>[...Array(t(a)).keys()],e=>e,(e,o)=>{var r=Z();V(r),r.__input=[X,M,o],r.__keydown=[Y,P,o],E(r,(i,f)=>t(w)[f]=i,i=>{var f;return(f=t(w))==null?void 0:f[i]},()=>[o]),N(()=>{j(r,"id",`pincodeItem${o}`),Q(r,1,T(["mc-pincode-input__control",g()&&"is-invalid"]),"svelte-h63szf"),j(r,"name",h()??`pincode-${n()}`),r.disabled=_(),r.readOnly=y(),W(r,t(l)[o])}),I(e,r)}),J(p),E(p,e=>x=e,()=>x),G("paste",p,S),I(u,p),H(q)}B(["input","keydown"]);customElements.define("m-pincode",C(oe,{id:{},length:{},name:{},value:{},isinvalid:{},disabled:{},readonly:{}},[],[],!0));
 //# sourceMappingURL=Pincode.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Pincode.js","sources":["../../../node_modules/svelte/src/internal/client/dom/elements/bindings/this.js","../../../node_modules/svelte/src/internal/client/dom/legacy/event-modifiers.js","../../../src/components/pincode/Pincode.svelte"],"sourcesContent":["import { STATE_SYMBOL } from '#client/constants';\nimport { effect, render_effect } from '../../../reactivity/effects.js';\nimport { untrack } from '../../../runtime.js';\nimport { queue_micro_task } from '../../task.js';\n\n/**\n * @param {any} bound_value\n * @param {Element} element_or_component\n * @returns {boolean}\n */\nfunction is_bound_this(bound_value, element_or_component) {\n\treturn (\n\t\tbound_value === element_or_component || bound_value?.[STATE_SYMBOL] === element_or_component\n\t);\n}\n\n/**\n * @param {any} element_or_component\n * @param {(value: unknown, ...parts: unknown[]) => void} update\n * @param {(...parts: unknown[]) => unknown} get_value\n * @param {() => unknown[]} [get_parts] Set if the this binding is used inside an each block,\n * \t\t\t\t\t\t\t\t\t\treturns all the parts of the each block context that are used in the expression\n * @returns {void}\n */\nexport function bind_this(element_or_component = {}, update, get_value, get_parts) {\n\teffect(() => {\n\t\t/** @type {unknown[]} */\n\t\tvar old_parts;\n\n\t\t/** @type {unknown[]} */\n\t\tvar parts;\n\n\t\trender_effect(() => {\n\t\t\told_parts = parts;\n\t\t\t// We only track changes to the parts, not the value itself to avoid unnecessary reruns.\n\t\t\tparts = get_parts?.() || [];\n\n\t\t\tuntrack(() => {\n\t\t\t\tif (element_or_component !== get_value(...parts)) {\n\t\t\t\t\tupdate(element_or_component, ...parts);\n\t\t\t\t\t// If this is an effect rerun (cause: each block context changes), then nullfiy the binding at\n\t\t\t\t\t// the previous position if it isn't already taken over by a different effect.\n\t\t\t\t\tif (old_parts && is_bound_this(get_value(...old_parts), element_or_component)) {\n\t\t\t\t\t\tupdate(null, ...old_parts);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\treturn () => {\n\t\t\t// We cannot use effects in the teardown phase, we we use a microtask instead.\n\t\t\tqueue_micro_task(() => {\n\t\t\t\tif (parts && is_bound_this(get_value(...parts), element_or_component)) {\n\t\t\t\t\tupdate(null, ...parts);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\t});\n\n\treturn element_or_component;\n}\n","import { noop } from '../../../shared/utils.js';\nimport { user_pre_effect } from '../../reactivity/effects.js';\nimport { on } from '../elements/events.js';\n\n/**\n * Substitute for the `trusted` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function trusted(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\tif (event.isTrusted) {\n\t\t\t// @ts-ignore\n\t\t\tfn?.apply(this, args);\n\t\t}\n\t};\n}\n\n/**\n * Substitute for the `self` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function self(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\t// @ts-ignore\n\t\tif (event.target === this) {\n\t\t\t// @ts-ignore\n\t\t\tfn?.apply(this, args);\n\t\t}\n\t};\n}\n\n/**\n * Substitute for the `stopPropagation` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function stopPropagation(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\tevent.stopPropagation();\n\t\t// @ts-ignore\n\t\treturn fn?.apply(this, args);\n\t};\n}\n\n/**\n * Substitute for the `once` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function once(fn) {\n\tvar ran = false;\n\n\treturn function (...args) {\n\t\tif (ran) return;\n\t\tran = true;\n\n\t\t// @ts-ignore\n\t\treturn fn?.apply(this, args);\n\t};\n}\n\n/**\n * Substitute for the `stopImmediatePropagation` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function stopImmediatePropagation(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\tevent.stopImmediatePropagation();\n\t\t// @ts-ignore\n\t\treturn fn?.apply(this, args);\n\t};\n}\n\n/**\n * Substitute for the `preventDefault` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function preventDefault(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\tevent.preventDefault();\n\t\t// @ts-ignore\n\t\treturn fn?.apply(this, args);\n\t};\n}\n\n/**\n * Substitute for the `passive` event modifier, implemented as an action\n * @deprecated\n * @param {HTMLElement} node\n * @param {[event: string, handler: () => EventListener]} options\n */\nexport function passive(node, [event, handler]) {\n\tuser_pre_effect(() => {\n\t\treturn on(node, event, handler() ?? noop, {\n\t\t\tpassive: true\n\t\t});\n\t});\n}\n\n/**\n * Substitute for the `nonpassive` event modifier, implemented as an action\n * @deprecated\n * @param {HTMLElement} node\n * @param {[event: string, handler: () => EventListener]} options\n */\nexport function nonpassive(node, [event, handler]) {\n\tuser_pre_effect(() => {\n\t\treturn on(node, event, handler() ?? noop, {\n\t\t\tpassive: false\n\t\t});\n\t});\n}\n","<svelte:options customElement={{ tag: 'm-pincode' }} />\n\n<script lang=\"ts\">\n  import { createEventDispatcher } from 'svelte';\n\n  type PincodeLen = 4 | 5 | 6;\n  interface Props {\n    id: string;\n    length?: PincodeLen | string; // <- peut arriver en string via l'attribut\n    name?: string;\n    value?: string | number;\n    isInvalid?: boolean;\n    disabled?: boolean;\n    readonly?: boolean;\n    [key: string]: any;\n  }\n\n  const dispatch = createEventDispatcher();\n\n  let {\n    id,\n    length = 6,\n    name,\n    value = '',\n    isInvalid = false,\n    disabled = false,\n    readonly = false,\n    ...attrsAndEvents\n  }: Props = $props();\n\n  // Normalisation: length numérique (ex. \"6\" -> 6)\n  const L = $derived(\n    typeof length === 'string' ? parseInt(length, 10) || 6 : length,\n  );\n\n  // État minimal\n  let otp = $state<string[]>(Array(L).fill(''));\n  let inputs = $state<HTMLInputElement[]>([]);\n\n  // Sync depuis props (value/length normalisé)\n  $effect(() => {\n    const incoming = String(value ?? '');\n    otp = Array.from({ length: L }, (_, i) => incoming[i] ?? '');\n  });\n\n  function focusInput(i: number) {\n    queueMicrotask(() => inputs?.[i]?.focus());\n  }\n\n  function emit() {\n    const joined = otp.join('');\n    dispatch('input', { value: joined });\n    dispatch('change', { value: joined });\n  }\n\n  function onInput(e: Event, index: number) {\n    const el = e.target as HTMLInputElement;\n    const digit = el.value.replace(/\\D/g, '').slice(0, 1);\n    otp[index] = digit;\n    emit();\n    if (digit && index + 1 < L) focusInput(index + 1);\n  }\n\n  function onKeyDown(e: KeyboardEvent, index: number) {\n    if (e.key === 'ArrowLeft' && index > 0) {\n      e.preventDefault();\n      focusInput(index - 1);\n    } else if (e.key === 'ArrowRight' && index < L - 1) {\n      e.preventDefault();\n      focusInput(index + 1);\n    } else if (e.key === 'Backspace' && otp[index] === '' && index > 0) {\n      otp[index - 1] = '';\n      emit();\n      focusInput(index - 1);\n    }\n  }\n\n  function onPaste(e: ClipboardEvent) {\n    e.preventDefault();\n    const pasted = (e.clipboardData?.getData('text') ?? '')\n      .replace(/\\D/g, '')\n      .slice(0, L);\n    otp = Array.from({ length: L }, (_, i) => pasted[i] ?? '');\n    emit();\n    focusInput(Math.min(pasted.length, L - 1));\n  }\n</script>\n\n<div\n  class=\"mc-pincode-input\"\n  on:paste|preventDefault={onPaste}\n  class:is-invalid={isInvalid}\n  {...attrsAndEvents}\n>\n  {#each Array(L) as _, i}\n    <input\n      id={`pincodeItem${i}`}\n      bind:this={inputs[i]}\n      class=\"mc-pincode-input__control\"\n      class:is-invalid={isInvalid}\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"1\"\n      pattern=\"\\d*\"\n      autocomplete=\"one-time-code\"\n      name={name ?? `pincode-${id}`}\n      {disabled}\n      {readonly}\n      value={otp[i]}\n      on:input={(e) => onInput(e, i)}\n      on:keydown={(e) => onKeyDown(e as KeyboardEvent, i)}\n    />\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pincode-input';\n</style>\n"],"names":["is_bound_this","bound_value","element_or_component","STATE_SYMBOL","bind_this","update","get_value","get_parts","effect","old_parts","parts","render_effect","untrack","queue_micro_task","preventDefault","fn","args","event","dispatch","createEventDispatcher","id","$.prop","$$props","length","name","value","isInvalid","disabled","readonly","attrsAndEvents","$.rest_props","L","$.derived","otp","$.get","inputs","$.state","$.proxy","$.user_effect","incoming","$.set","_","i","focusInput","emit","joined","onInput","index","digit","onKeyDown","onPaste","pasted","_a","$.attribute_effect","div","$0","$.index","$$anchor","$$value","$.set_attribute","input","$.set_value","$.event","e"],"mappings":"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","x_google_ignoreList":[0,1]}
+{"version":3,"file":"Pincode.js","sources":["../../../src/components/pincode/Pincode.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-pincode' }} />\n\n<script lang=\"ts\">\n  /**\n   * 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.\n   *\n   * @event input {CustomEvent<{ value: string }>} - Emits when the pincode value changes.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pincode element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The number of input displayed in the pincode element.\n     */\n    length?: 4 | 5 | 6;\n    /**\n     * The name attribute for the pincode element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the pincode field.\n     */\n    value?: string | number;\n    /**\n     * If `true`, applies an invalid state to the pincode.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the pincode, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the pincode is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let { id, length = 6, name, value, isinvalid, disabled, readonly }: Props = $props();\n\n  const L = $derived(typeof length === 'string' ? parseInt(length, 10) || 6 : length);\n\n  let otp = $state<string[]>(Array(L).fill(''));\n  let inputs = $state<HTMLInputElement[]>([]);\n  let element: HTMLElement;\n\n  $effect(() => {\n    const incoming = String(value ?? '');\n    otp = Array.from({ length: L }, (_, i) => incoming[i] ?? '');\n  });\n\n  const focusInput = (i: number) => {\n    queueMicrotask(() => inputs?.[i]?.focus());\n  };\n\n  const emitInput = () => {\n    const joined = otp.join('');\n    const event = new CustomEvent('input', {\n      detail: { value: joined },\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n\n  const onInput = (e: Event, index: number) => {\n    const el = e.target as HTMLInputElement;\n    const digit = el.value.replace(/\\D/g, '').slice(0, 1);\n    otp[index] = digit;\n    emitInput();\n    if (digit && index + 1 < L) focusInput(index + 1);\n  };\n\n  const onKeyDown = (e: KeyboardEvent, index: number) => {\n    if (e.key === 'ArrowLeft' && index > 0) {\n      e.preventDefault();\n      focusInput(index - 1);\n    } else if (e.key === 'ArrowRight' && index < L - 1) {\n      e.preventDefault();\n      focusInput(index + 1);\n    } else if (e.key === 'Backspace' && otp[index] === '' && index > 0) {\n      otp[index - 1] = '';\n      emitInput();\n      focusInput(index - 1);\n    }\n  };\n\n  const onPaste = (e: ClipboardEvent) => {\n    e.preventDefault();\n    const pasted = (e.clipboardData?.getData('text') ?? '').replace(/\\D/g, '').slice(0, L);\n    otp = Array.from({ length: L }, (_, i) => pasted[i] ?? '');\n    emitInput();\n    focusInput(Math.min(pasted.length, L - 1));\n  };\n</script>\n\n<div class=\"mc-pincode-input\" onpaste={onPaste} bind:this={element}>\n  {#each [...Array(L).keys()] as i (i)}\n    <input\n      id={`pincodeItem${i}`}\n      bind:this={inputs[i]}\n      class={['mc-pincode-input__control', isinvalid && 'is-invalid']}\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"1\"\n      pattern=\"\\d*\"\n      autocomplete=\"one-time-code\"\n      name={name ?? `pincode-${id}`}\n      {disabled}\n      {readonly}\n      value={otp[i]}\n      oninput={(e) => onInput(e, i)}\n      onkeydown={(e) => onKeyDown(e as KeyboardEvent, i)}\n    />\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pincode-input';\n</style>\n"],"names":["on_input","e","onInput","i","on_keydown","onKeyDown","id","$.prop","$$props","length","name","value","isinvalid","disabled","readonly","L","$.derived","otp","$.get","inputs","$.state","$.proxy","element","$.user_effect","incoming","$.set","_","focusInput","emitInput","joined","event","index","digit","onPaste","pasted","_a","$$anchor","$$value","$.set_attribute","input","$.set_value","$.bind_this","div"],"mappings":"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"}