@mozaic-ds/web-components 1.0.0 → 1.1.0

package/dist/components/loader/Loader.spec.js

@@ -13,7 +13,6 @@ describe('m-loader component', () => {
         expect(svg).toBeTruthy();
         expect(svg?.getAttribute('viewBox')).toBe('0 0 32 32');
         const circle = container.querySelector('circle.mc-loader__path');
-        expect(circle).toBeTruthy();
         expect(circle?.getAttribute('r')).toBe('9');
         const textSpan = container.querySelector('.mc-loader__text');
         expect(textSpan).toBeNull();
@@ -51,4 +50,24 @@ describe('m-loader component', () => {
         expect(textSpan).toBeTruthy();
         expect(textSpan.classList.contains('mc-loader__text')).toBe(true);
     });
+    it('renders correctly for size "xs" (falls through to "s" logic)', () => {
+        const { container } = render(Loader, { props: { size: 'xs' } });
+        const svg = container.querySelector('svg.mc-loader__icon');
+        expect(svg?.getAttribute('viewBox')).toBe('0 0 20 20');
+        const circle = container.querySelector('circle.mc-loader__path');
+        expect(circle?.getAttribute('r')).toBe('6');
+    });
+    it('handles unsupported size by falling back to defaults', () => {
+        const { container } = render(Loader, { props: { size: 'unknown' } });
+        const svg = container.querySelector('svg.mc-loader__icon');
+        expect(svg?.getAttribute('viewBox')).toBe('0 0 32 32');
+        const circle = container.querySelector('circle.mc-loader__path');
+        expect(circle?.getAttribute('r')).toBe('9');
+    });
+    it('handles unsupported appearance by still rendering standard loader', () => {
+        const { container } = render(Loader, { props: { appearance: 'weird' } });
+        const loader = container.querySelector('.mc-loader');
+        expect(loader?.classList).toContain('mc-loader--weird');
+        expect(container.querySelector('svg.mc-loader__icon')).toBeTruthy();
+    });
 });

package/dist/components/loader/Loader.stories.js

@@ -6,7 +6,7 @@ const meta = {
     argTypes: {
         size: {
             control: 'radio',
-            options: ['s', 'm', 'l'],
+            options: ['xs', 's', 'm', 'l'],
         },
         appearance: {
             control: 'radio',

package/dist/components/loader/Loader.svelte

@@ -13,7 +13,7 @@
     /**
      * Defines the size of the loader.
      */
-    size?: 's' | 'm' | 'l';
+    size?: 'xs' | 's' | 'm' | 'l';
 
     /**
      * Text to display alongside the loader when using the loader inside an `Overlay`.
@@ -27,6 +27,9 @@
     let viewBox: string;
 
     switch (size) {
+      case 'xs':
+        viewBox = '0 0 20 20';
+        break;
       case 's':
         viewBox = '0 0 24 24';
         break;
@@ -44,6 +47,9 @@
     let circleRadius: number;
 
     switch (size) {
+      case 'xs':
+        circleRadius = 6;
+        break;
       case 's':
         circleRadius = 6;
         break;
@@ -67,11 +73,7 @@
   ]}
 >
   <span class="mc-loader__spinner">
-    <svg
-      class="mc-loader__icon"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox={setViewBox()}
-    >
+    <svg class="mc-loader__icon" xmlns="http://www.w3.org/2000/svg" viewBox={setViewBox()}>
       <circle class="mc-loader__path" cx="50%" cy="50%" r={setCircleRadius()} />
     </svg>
   </span>

package/dist/components/loader/Loader.svelte.d.ts

@@ -9,7 +9,7 @@ interface Props {
     /**
      * Defines the size of the loader.
      */
-    size?: 's' | 'm' | 'l';
+    size?: 'xs' | 's' | 'm' | 'l';
     /**
      * Text to display alongside the loader when using the loader inside an `Overlay`.
      */

package/dist/components/loader/Loader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/loader/Loader.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IAE/C;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAEvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAkEH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Loader.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/loader/Loader.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IAE/C;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAE9B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAwEH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/loader/README.md

@@ -7,6 +7,6 @@ A loader is a visual indicator used to inform users that a process is in progres
 | Name | Description | Type | Default |
 |------|-------------|------|---------|
 | `appearance` | Specifies the visual appearance of the loader. | `'standard'` `'accent'` `'inverse'` | `standard` |
-| `size` | Defines the size of the loader. | `'s'` `'m'` `'l'` | `m` |
+| `size` | Defines the size of the loader. | `'xs'` `'s'` `'m'` `'l'` | `m` |
 | `text` | Text to display alongside the loader when using the loader inside an `Overlay`. | `string` |   |
 

package/dist/components/loadingoverlay/LoadingOverlay.stories.d.ts

@@ -3,5 +3,5 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
-export declare const text: Story;
+export declare const Text: Story;
 //# sourceMappingURL=LoadingOverlay.stories.d.ts.map

package/dist/components/loadingoverlay/LoadingOverlay.stories.js

@@ -32,7 +32,7 @@ const meta = {
 };
 export default meta;
 export const Default = {};
-export const text = {
+export const Text = {
     args: {
         text: 'Insert your text here',
     },

package/dist/components/modal/Modal.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,sEAAsE,CAAC;AAC9E,OAAO,0EAA0E,CAAC;AAElF,QAAA,MAAM,IAAI,EAAE,IAkDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAQlB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;CAahB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAOlB,CAAC"}
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,sEAAsE,CAAC;AAC9E,OAAO,0EAA0E,CAAC;AAElF,QAAA,MAAM,IAAI,EAAE,IAgDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAQlB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;CAahB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAOlB,CAAC"}

package/dist/components/modal/Modal.stories.js

@@ -46,10 +46,8 @@ const meta = {
         closable=${ifDefined(args.closable)}
         @update:open=${handleUpdateOpen}
       >
-        ${unsafeHTML(ifDefined(args.icon))}
-        ${unsafeHTML(ifDefined(args.default))}
-        ${unsafeHTML(ifDefined(args.link))}
-        ${unsafeHTML(ifDefined(args.footer))}
+        ${unsafeHTML(ifDefined(args.icon))} ${unsafeHTML(ifDefined(args.default))}
+        ${unsafeHTML(ifDefined(args.link))} ${unsafeHTML(ifDefined(args.footer))}
       </m-modal>
     `;
     },

package/dist/components/numberbadge/NumberBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberBadge.js","sources":["../../../src/components/numberbadge/NumberBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-number-badge' }} />\n\n<script lang=\"ts\">\n  /**\n   * A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.\n   */\n  interface Props {\n    /**\n     * Content of the badge.\n     */\n    label: number;\n    /**\n     * Allows to define the badge appearance.\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n\n    /**\n     * Allows to define the badge size.\n     */\n    size?: 's' | 'm';\n  }\n\n  let { label, appearance = 'standard', size = 's' }: Props = $props();\n</script>\n\n<div\n  class={[\n    'mc-number-badge',\n    `mc-number-badge--${appearance}`,\n    `mc-number-badge--${size}`,\n  ]}\n>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/number-badge';\n</style>\n"],"names":["label","$.prop","$$props","appearance","size"],"mappings":";;+iCAAA,oBAsBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,sGAAtB,WAAU,6CAAS,IAAG,wDAK9C,sCACoBD,EAAU,CAAA,uBACVC,GAAI,yBAGzBJ,GAAK,eATR"}
+{"version":3,"file":"NumberBadge.js","sources":["../../../src/components/numberbadge/NumberBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-number-badge' }} />\n\n<script lang=\"ts\">\n  /**\n   * A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.\n   */\n  interface Props {\n    /**\n     * Content of the badge.\n     */\n    label: number;\n    /**\n     * Allows to define the badge appearance.\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n\n    /**\n     * Allows to define the badge size.\n     */\n    size?: 's' | 'm';\n  }\n\n  let { label, appearance = 'standard', size = 's' }: Props = $props();\n</script>\n\n<div class={['mc-number-badge', `mc-number-badge--${appearance}`, `mc-number-badge--${size}`]}>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/number-badge';\n</style>\n"],"names":["label","$.prop","$$props","appearance","size"],"mappings":";;+iCAAA,oBAsBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,sGAAtB,WAAU,6CAAS,IAAG,wDAGrC,sCAAuCD,EAAU,CAAA,uBAAwBC,GAAI,yBACvFJ,GAAK,eAHR"}

package/dist/components/numberbadge/NumberBadge.svelte

@@ -23,13 +23,7 @@
   let { label, appearance = 'standard', size = 's' }: Props = $props();
 </script>
 
-<div
-  class={[
-    'mc-number-badge',
-    `mc-number-badge--${appearance}`,
-    `mc-number-badge--${size}`,
-  ]}
->
+<div class={['mc-number-badge', `mc-number-badge--${appearance}`, `mc-number-badge--${size}`]}>
   {label}
 </div>
 

package/dist/components/numberbadge/NumberBadge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/numberbadge/NumberBadge.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAE1D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAqBH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"NumberBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/numberbadge/NumberBadge.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAE1D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAiBH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/overlay/Overlay.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.stories.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/Overlay.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IA+BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
+{"version":3,"file":"Overlay.stories.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/Overlay.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IA4BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/components/overlay/Overlay.stories.js

@@ -25,10 +25,7 @@ const meta = {
         },
     },
     render: (args) => html `
-    <m-overlay
-      isvisible=${ifDefined(args.isvisible)}
-      dialoglabel=${ifDefined(args.dialoglabel)}
-    >
+    <m-overlay isvisible=${ifDefined(args.isvisible)} dialoglabel=${ifDefined(args.dialoglabel)}>
       ${unsafeHTML(ifDefined(args.default))}
     </m-overlay>
   `,

package/dist/components/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronLeft24/ChevronLeft24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronRight24/ChevronRight24.svelte","../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'chevron-left-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'chevron-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-pagination',\n  }}\n/>\n\n<script lang=\"ts\">\n  import ChevronLeft24 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';\n  import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  /**\n   * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pagination.\n     */\n    id: string;\n    /**\n     * The current value of the selected page.\n     */\n    value: number;\n    /**\n     * If `true`, display a compact version without the select.\n     */\n    compact?: boolean;\n    /**\n     * Total number of pages.\n     */\n    total?: number;\n    /**\n     * Accessible label for the select of the pagination.\n     */\n    selectLabel?: string;\n    /**\n     * Word displayed before the current page number.\n     */\n    prefixlabel?: string;\n    /**\n     * Word displayed between the current page number and total page number.\n     */\n    pagelabel?: string;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    total = 10,\n    compact,\n    selectLabel = 'Page selector',\n    prefixlabel = 'Page',\n    pagelabel = 'of',\n  }: Props = $props();\n\n  let selected = $state(Number(value));\n\n  const isFirstPage = $state(() => selected <= 1);\n  const isLastPage = $state(() => selected >= total);\n\n  const pages = $state(() => Array.from({ length: total }, (_, i) => i + 1));\n\n  function previous() {\n    if (!isFirstPage()) {\n      selected = Number(selected) - 1;\n    }\n  }\n\n  function next() {\n    if (!isLastPage()) {\n      selected = Number(selected) + 1;\n    }\n  }\n\n  function onSelectChange(event: Event) {\n    const selected = Number((event.target as HTMLSelectElement).value);\n    value = selected;\n  }\n</script>\n\n<nav class=\"mc-pagination\" aria-label=\"pagination\">\n  {#if !compact}\n    <Button\n      iconposition=\"only\"\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 slot=\"icon\" />\n    </Button>\n  {:else}\n    <IconButton\n      outlined\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n\n  {#if !compact}\n    <div class=\"mc-pagination__field\">\n      <select\n        {id}\n        class=\"mc-select mc-pagination__select\"\n        aria-label={selectLabel}\n        disabled={total <= 1}\n        bind:value={selected}\n        onchange={onSelectChange}\n      >\n        {#each pages() as page}\n          <option\n            value={Number(page)}\n            selected={Number(page) == Number(selected)}\n          >\n            {prefixlabel}\n            {page}\n            {pagelabel}\n            {total}\n          </option>\n        {/each}\n      </select>\n    </div>\n  {:else}\n    <span class=\"mc-pagination__label\" aria-current=\"page\">\n      {prefixlabel}\n      {value}\n      {pagelabel}\n      {total}\n    </span>\n  {/if}\n\n  {#if !compact}\n    <Button\n      iconposition=\"only\"\n      aria-label=\"Next page\"\n      disabled={isLastPage()}\n      onclick={next}\n    >\n      <ChevronRight24 slot=\"icon\" />\n    </Button>\n  {:else}\n    <IconButton\n      outlined\n      aria-label=\"Next page\"\n      disabled={isLastPage()}\n      onclick={next}\n    >\n      <ChevronRight24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pagination';\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","style","className","fill","size","onSelectChange","event","value","selected","$.prop","$$props","total","compact","selectLabel","prefixlabel","pagelabel","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","$$render","alternate","consequent","$.each","select","page","$.bind_select_value","$$value","alternate_1","consequent_1","alternate_2","consequent_2"],"mappings":"uxBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,+YCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,gHCmEWE,GAAeC,EAAYC,EAAE,CAC9B,MAAAC,EAAW,OAAQF,EAAM,OAA6B,KAAK,EACjEC,EAAQC,CAAQ,CAClB;;;;;;2DA7EF,sBA8CIR,EAAES,EAAAC,EAAA,KAAA,CAAA,EACFH,iBAAkB,CAAC,EACnBI,gBAAQ,EAAE,EACVC,EAAOH,EAAAC,EAAA,UAAA,CAAA,EACPG,sBAAc,eAAe,EAC7BC,sBAAc,MAAM,EACpBC,oBAAY,IAAI,EAGdP,EAAQQ,EAAAC,GAAU,OAAOV,EAAK,CAAA,CAAA,CAAA,QAE5BW,EAAWF,EAAA,IAAAG,EAAgBX,CAAQ,GAAI,CAAC,EACxCY,EAAUJ,EAAA,IAAAG,EAAgBX,CAAQ,GAAIG,GAAK,EAE3CU,EAAKL,EAAA,IAAgB,MAAM,MAAO,OAAQL,EAAK,CAAA,EAAA,CAAKW,EAAGC,IAAMA,EAAI,CAAC,CAAA,EAE/D,SAAAC,GAAW,CACbL,EAAAD,CAAW,KACdO,EAAAjB,EAAW,OAAMW,EAACX,CAAQ,GAAI,CAAC,CAEnC,CAES,SAAAkB,GAAO,CACTP,EAAAC,CAAU,KACbK,EAAAjB,EAAW,OAAMW,EAACX,CAAQ,GAAI,CAAC,CAEnC,qFAzBoB,EAAC,+CACX,GAAE,8GAEI,gBAAe,2DACf,OAAM,uDACR,KAAI,oDAiCJU,CAAW,EAAA,CAAA,4FACZM,uEAQCN,CAAW,EAAA,CAAA,oFACZM,yDAdPZ,EAAO,EAAAe,EAAAC,GAAA,EAAA,EAAAD,EAAAE,CAAA,2DA4BGxB,GAAcE,CAAA,EAEjBuB,GAAAC,EAAA,GAAA,IAAAZ,EAAAE,CAAK,UAAMW,IAAI,8DAKjBlB,EAAW,GAAA,EAAA;AAAA,gBACXkB,CAAI,GAAA,EAAA;AAAA,cACJjB,EAAS,GAAA,EAAA;AAAA,cACTJ,EAAK,GAAA,EAAA,EAAA,2CALI,IAAA,OAAMQ,EAACa,CAAI,CAAA,GAAK,SAAOxB,CAAQ,CAAA,EADlC,IAAA,SAAOwB,CAAI,CAAA,6DAPVnB,GAAW,EACbkB,EAAA,SAAApB,EAAK,GAAI,IACPsB,GAAAF,EAAA,IAAAZ,EAAAX,CAAQ,OAARA,EAAQ0B,CAAA,CAAA,qDAkBrBpB,EAAW,GAAA,EAAA;AAAA,QACXP,EAAK,GAAA,EAAA;AAAA,QACLQ,EAAS,GAAA,EAAA;AAAA,QACTJ,EAAK,GAAA,EAAA,EAAA,CAAA,kBA5BJC,EAAO,EAAAe,EAAAQ,GAAA,EAAA,EAAAR,EAAAS,EAAA,6CAoCChB,CAAU,EAAA,CAAA,wFACXM,uEAQCN,CAAU,EAAA,CAAA,gFACXM,0DAdPd,EAAO,EAAAe,EAAAU,GAAA,EAAA,EAAAV,EAAAW,EAAA,2BAvDf","x_google_ignoreList":[0,1]}
+{"version":3,"file":"Pagination.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronLeft24/ChevronLeft24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronRight24/ChevronRight24.svelte","../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'chevron-left-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'chevron-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-pagination',\n  }}\n/>\n\n<script lang=\"ts\">\n  import ChevronLeft24 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';\n  import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  /**\n   * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pagination.\n     */\n    id: string;\n    /**\n     * The current value of the selected page.\n     */\n    value: number;\n    /**\n     * If `true`, display a compact version without the select.\n     */\n    compact?: boolean;\n    /**\n     * Total number of pages.\n     */\n    total?: number;\n    /**\n     * Accessible label for the select of the pagination.\n     */\n    selectLabel?: string;\n    /**\n     * Word displayed before the current page number.\n     */\n    prefixlabel?: string;\n    /**\n     * Word displayed between the current page number and total page number.\n     */\n    pagelabel?: string;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    total = 10,\n    compact,\n    selectLabel = 'Page selector',\n    prefixlabel = 'Page',\n    pagelabel = 'of',\n  }: Props = $props();\n\n  let selected = $state(Number(value));\n\n  const isFirstPage = $state(() => selected <= 1);\n  const isLastPage = $state(() => selected >= total);\n\n  const pages = $state(() => Array.from({ length: total }, (_, i) => i + 1));\n\n  function previous() {\n    if (!isFirstPage()) {\n      selected = Number(selected) - 1;\n    }\n  }\n\n  function next() {\n    if (!isLastPage()) {\n      selected = Number(selected) + 1;\n    }\n  }\n\n  function onSelectChange(event: Event) {\n    const selected = Number((event.target as HTMLSelectElement).value);\n    value = selected;\n  }\n</script>\n\n<nav class=\"mc-pagination\" aria-label=\"pagination\">\n  {#if !compact}\n    <Button\n      iconposition=\"only\"\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 slot=\"icon\" />\n    </Button>\n  {:else}\n    <IconButton outlined aria-label=\"Previous page\" disabled={isFirstPage()} onclick={previous}>\n      <ChevronLeft24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n\n  {#if !compact}\n    <div class=\"mc-pagination__field\">\n      <select\n        {id}\n        class=\"mc-select mc-pagination__select\"\n        aria-label={selectLabel}\n        disabled={total <= 1}\n        bind:value={selected}\n        onchange={onSelectChange}\n      >\n        {#each pages() as page, index (index)}\n          <option value={Number(page)} selected={Number(page) == Number(selected)}>\n            {prefixlabel}\n            {page}\n            {pagelabel}\n            {total}\n          </option>\n        {/each}\n      </select>\n    </div>\n  {:else}\n    <span class=\"mc-pagination__label\" aria-current=\"page\">\n      {prefixlabel}\n      {value}\n      {pagelabel}\n      {total}\n    </span>\n  {/if}\n\n  {#if !compact}\n    <Button iconposition=\"only\" aria-label=\"Next page\" disabled={isLastPage()} onclick={next}>\n      <ChevronRight24 slot=\"icon\" />\n    </Button>\n  {:else}\n    <IconButton outlined aria-label=\"Next page\" disabled={isLastPage()} onclick={next}>\n      <ChevronRight24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pagination';\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","style","className","fill","size","onSelectChange","event","value","selected","$.prop","$$props","total","compact","selectLabel","prefixlabel","pagelabel","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","$$render","alternate","consequent","$.each","select","page","$.bind_select_value","$$value","alternate_1","consequent_1","alternate_2","consequent_2"],"mappings":"uxBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,+YCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,gHCmEWE,GAAeC,EAAYC,EAAE,CAC9B,MAAAC,EAAW,OAAQF,EAAM,OAA6B,KAAK,EACjEC,EAAQC,CAAQ,CAClB;;;;;;2DA7EF,sBA8CIR,EAAES,EAAAC,EAAA,KAAA,CAAA,EACFH,iBAAkB,CAAC,EACnBI,gBAAQ,EAAE,EACVC,EAAOH,EAAAC,EAAA,UAAA,CAAA,EACPG,sBAAc,eAAe,EAC7BC,sBAAc,MAAM,EACpBC,oBAAY,IAAI,EAGdP,EAAQQ,EAAAC,GAAU,OAAOV,EAAK,CAAA,CAAA,CAAA,QAE5BW,EAAWF,EAAA,IAAAG,EAAgBX,CAAQ,GAAI,CAAC,EACxCY,EAAUJ,EAAA,IAAAG,EAAgBX,CAAQ,GAAIG,GAAK,EAE3CU,EAAKL,EAAA,IAAgB,MAAM,MAAO,OAAQL,EAAK,CAAA,EAAA,CAAKW,EAAGC,IAAMA,EAAI,CAAC,CAAA,EAE/D,SAAAC,GAAW,CACbL,EAAAD,CAAW,KACdO,EAAAjB,EAAW,OAAMW,EAACX,CAAQ,GAAI,CAAC,CAEnC,CAES,SAAAkB,GAAO,CACTP,EAAAC,CAAU,KACbK,EAAAjB,EAAW,OAAMW,EAACX,CAAQ,GAAI,CAAC,CAEnC,qFAzBoB,EAAC,+CACX,GAAE,8GAEI,gBAAe,2DACf,OAAM,uDACR,KAAI,oDAiCJU,CAAW,EAAA,CAAA,4FACZM,uEAK+CN,CAAW,EAAA,CAAA,oFAAaM,yDAV9EZ,EAAO,EAAAe,EAAAC,GAAA,EAAA,EAAAD,EAAAE,CAAA,2DAuBGxB,GAAcE,CAAA,EAEjBuB,GAAAC,EAAA,GAAA,IAAAZ,EAAAE,CAAK,UAAMW,IAAI,8DAEjBlB,EAAW,GAAA,EAAA;AAAA,gBACXkB,CAAI,GAAA,EAAA;AAAA,cACJjB,EAAS,GAAA,EAAA;AAAA,cACTJ,EAAK,GAAA,EAAA,EAAA,2CAJ+B,IAAA,OAAMQ,EAACa,CAAI,CAAA,GAAK,SAAOxB,CAAQ,CAAA,EAAvD,IAAA,SAAOwB,CAAI,CAAA,6DANhBnB,GAAW,EACbkB,EAAA,SAAApB,EAAK,GAAI,IACPsB,GAAAF,EAAA,IAAAZ,EAAAX,CAAQ,OAARA,EAAQ0B,CAAA,CAAA,qDAerBpB,EAAW,GAAA,EAAA;AAAA,QACXP,EAAK,GAAA,EAAA;AAAA,QACLQ,EAAS,GAAA,EAAA;AAAA,QACTJ,EAAK,GAAA,EAAA,EAAA,CAAA,kBAzBJC,EAAO,EAAAe,EAAAQ,GAAA,EAAA,EAAAR,EAAAS,EAAA,6CA8BkDhB,CAAU,EAAA,CAAA,wFAAaM,uEAI9BN,CAAU,EAAA,CAAA,gFAAaM,0DALzEd,EAAO,EAAAe,EAAAU,GAAA,EAAA,EAAAV,EAAAW,EAAA,2BA/Cf","x_google_ignoreList":[0,1]}

package/dist/components/pagination/Pagination.spec.js

@@ -23,7 +23,7 @@ describe('m-pagination component', () => {
         expect(nextBtn).not.toBeDisabled();
     });
     it('updates value when select changes', async () => {
-        const { container, getByLabelText } = render(Pagination, {
+        const { getByLabelText } = render(Pagination, {
             props: baseProps,
         });
         const select = getByLabelText(baseProps.selectLabel);
@@ -50,7 +50,7 @@ describe('m-pagination component', () => {
     });
     it('disables next button on last page', async () => {
         const props = { ...baseProps, value: 5, total: 5 };
-        const { container, getByLabelText } = render(Pagination, { props });
+        const { container } = render(Pagination, { props });
         const nextBtn = container.querySelector('button[aria-label="Next page"]');
         expect(nextBtn.disabled).toBe(true);
         const prevBtn = container.querySelector('button[aria-label="Previous page"]');

package/dist/components/pagination/Pagination.svelte

@@ -89,12 +89,7 @@
       <ChevronLeft24 slot="icon" />
     </Button>
   {:else}
-    <IconButton
-      outlined
-      aria-label="Previous page"
-      disabled={isFirstPage()}
-      onclick={previous}
-    >
+    <IconButton outlined aria-label="Previous page" disabled={isFirstPage()} onclick={previous}>
       <ChevronLeft24 slot="icon" />
     </IconButton>
   {/if}
@@ -109,11 +104,8 @@
         bind:value={selected}
         onchange={onSelectChange}
       >
-        {#each pages() as page}
-          <option
-            value={Number(page)}
-            selected={Number(page) == Number(selected)}
-          >
+        {#each pages() as page, index (index)}
+          <option value={Number(page)} selected={Number(page) == Number(selected)}>
             {prefixlabel}
             {page}
             {pagelabel}
@@ -132,21 +124,11 @@
   {/if}
 
   {#if !compact}
-    <Button
-      iconposition="only"
-      aria-label="Next page"
-      disabled={isLastPage()}
-      onclick={next}
-    >
+    <Button iconposition="only" aria-label="Next page" disabled={isLastPage()} onclick={next}>
       <ChevronRight24 slot="icon" />
     </Button>
   {:else}
-    <IconButton
-      outlined
-      aria-label="Next page"
-      disabled={isLastPage()}
-      onclick={next}
-    >
+    <IconButton outlined aria-label="Next page" disabled={isLastPage()} onclick={next}>
       <ChevronRight24 slot="icon" />
     </IconButton>
   {/if}

package/dist/components/passwordinput/PasswordInput.js

@@ -4,5 +4,5 @@ import{v as q,c as A,p as B,a as G,b as r,f as D,s as L,d as n,e as E,g as H,w a
 
 /* stylelint-disable string-no-newline */.mc-text-input.svelte-1luc9tv {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:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:0.5rem;}.mc-text-input__control.svelte-1luc9tv {background-color:transparent;border-width:0;font-family:inherit;outline:none;}.mc-text-input__control.svelte-1luc9tv {padding:0.75rem 0.6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);flex-grow:1;}.mc-text-input__control.svelte-1luc9tv::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input.svelte-1luc9tv: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-text-input.svelte-1luc9tv: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-text-input.svelte-1luc9tv:has(input:where(.svelte-1luc9tv):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-text-input.svelte-1luc9tv:has(input[readonly]:where(.svelte-1luc9tv)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-1luc9tv:has(.mc-controls-options:where(.svelte-1luc9tv)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-1luc9tv:has(.mc-controls-options:where(.svelte-1luc9tv)) .mc-text-input__control:where(.svelte-1luc9tv) {padding-inline-end:0;}.mc-text-input.is-invalid.svelte-1luc9tv {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-text-input.is-invalid.svelte-1luc9tv: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);}.mc-text-input.svelte-1luc9tv :where(.svelte-1luc9tv) {box-sizing:border-box;}
 
-/* stylelint-enable string-no-newline */.mc-button.svelte-1luc9tv {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1luc9tv:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1luc9tv:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1luc9tv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1luc9tv {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1luc9tv {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.svelte-1luc9tv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1luc9tv: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.svelte-1luc9tv {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--ghost.svelte-1luc9tv {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.svelte-1luc9tv:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1luc9tv:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1luc9tv: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.svelte-1luc9tv {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-1luc9tv {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--radius-full, 100%);}.mc-controls-options__button.svelte-1luc9tv:hover .mc-controls-options__icon:where(.svelte-1luc9tv) {fill:var(--forms-color-icon-clear-hover, #4d4d4d);}.mc-controls-options__button.svelte-1luc9tv: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-controls-options__icon.svelte-1luc9tv {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-1luc9tv, .mc-controls-options__icon.svelte-1luc9tv {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-1luc9tv {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function et(d,e){B(e,!0),G(d,tt);let h=r(e,"id",7),g=r(e,"name",7),i=r(e,"value",7),_=r(e,"placeholder",7),u=r(e,"isinvalid",7),v=r(e,"disabled",7),w=r(e,"readonly",7),x=r(e,"isclearable",7),k=r(e,"clearlabel",7,"Clear content"),b=r(e,"buttonlabel",23,()=>({show:"Show",hide:"Hide"})),m=J(!1);var F={get id(){return h()},set id(t){h(t),l()},get name(){return g()},set name(t){g(t),l()},get value(){return i()},set value(t){i(t),l()},get placeholder(){return _()},set placeholder(t){_(t),l()},get isinvalid(){return u()},set isinvalid(t){u(t),l()},get disabled(){return v()},set disabled(t){v(t),l()},get readonly(){return w()},set readonly(t){w(t),l()},get isclearable(){return x()},set isclearable(t){x(t),l()},get clearlabel(){return k()},set clearlabel(t="Clear content"){k(t),l()},get buttonlabel(){return b()},set buttonlabel(t={show:"Show",hide:"Hide"}){b(t),l()}},f=$(),o=n(f);R(o);var S=L(o,2);{var I=t=>{var y=Y(),z=n(y);z.__click=[X,i];var C=L(n(z),2),P=n(C,!0);s(C),s(z),s(y),M(()=>Z(P,k())),V(t,y)};Q(S,t=>{x()&&i()&&t(I)})}var a=L(S,2);E(a,1,H(["mc-button","mc-button--s","mc-button--ghost"]),"svelte-1luc9tv"),a.__click=[W,m];var j=n(a),O=n(j,!0);return s(j),s(a),s(f),M(()=>{E(f,1,H(["mc-password-input","mc-text-input",u()&&"is-invalid"]),"svelte-1luc9tv"),c(o,"id",h()),c(o,"name",g()),c(o,"type",p(m)?"text":"password"),c(o,"placeholder",_()),o.disabled=v(),o.readOnly=w(),c(o,"aria-invalid",u()),a.disabled=v(),c(a,"aria-checked",p(m)),Z(O,p(m)?b().hide:b().show)}),T(o,i),V(d,f),K(F)}q(["click"]);customElements.define("m-password-input",A(et,{id:{},name:{},value:{},placeholder:{},isinvalid:{},disabled:{},readonly:{},isclearable:{},clearlabel:{},buttonlabel:{}},[],[],!0,U));
+/* stylelint-enable string-no-newline */.mc-button.svelte-1luc9tv {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1luc9tv:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1luc9tv:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1luc9tv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1luc9tv {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1luc9tv {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.svelte-1luc9tv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1luc9tv: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.svelte-1luc9tv {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--ghost.svelte-1luc9tv {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.svelte-1luc9tv:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1luc9tv:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1luc9tv: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.svelte-1luc9tv {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-1luc9tv {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--radius-full, 100%);}.mc-controls-options__button.svelte-1luc9tv:hover .mc-controls-options__icon:where(.svelte-1luc9tv) {fill:var(--forms-color-icon-clear-hover, #4d4d4d);}.mc-controls-options__button.svelte-1luc9tv: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-controls-options__icon.svelte-1luc9tv {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-1luc9tv, .mc-controls-options__icon.svelte-1luc9tv {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-1luc9tv {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function et(d,e){B(e,!0),G(d,tt);let h=r(e,"id",7),g=r(e,"name",7),i=r(e,"value",15),_=r(e,"placeholder",7),u=r(e,"isinvalid",7),v=r(e,"disabled",7),w=r(e,"readonly",7),x=r(e,"isclearable",7),k=r(e,"clearlabel",7,"Clear content"),b=r(e,"buttonlabel",23,()=>({show:"Show",hide:"Hide"})),m=J(!1);var F={get id(){return h()},set id(t){h(t),l()},get name(){return g()},set name(t){g(t),l()},get value(){return i()},set value(t){i(t),l()},get placeholder(){return _()},set placeholder(t){_(t),l()},get isinvalid(){return u()},set isinvalid(t){u(t),l()},get disabled(){return v()},set disabled(t){v(t),l()},get readonly(){return w()},set readonly(t){w(t),l()},get isclearable(){return x()},set isclearable(t){x(t),l()},get clearlabel(){return k()},set clearlabel(t="Clear content"){k(t),l()},get buttonlabel(){return b()},set buttonlabel(t={show:"Show",hide:"Hide"}){b(t),l()}},f=$(),o=n(f);R(o);var S=L(o,2);{var I=t=>{var y=Y(),z=n(y);z.__click=[X,i];var C=L(n(z),2),P=n(C,!0);s(C),s(z),s(y),M(()=>Z(P,k())),V(t,y)};Q(S,t=>{x()&&i()&&t(I)})}var a=L(S,2);E(a,1,H(["mc-button","mc-button--s","mc-button--ghost"]),"svelte-1luc9tv"),a.__click=[W,m];var j=n(a),O=n(j,!0);return s(j),s(a),s(f),M(()=>{E(f,1,H(["mc-password-input","mc-text-input",u()&&"is-invalid"]),"svelte-1luc9tv"),c(o,"id",h()),c(o,"name",g()),c(o,"type",p(m)?"text":"password"),c(o,"placeholder",_()),o.disabled=v(),o.readOnly=w(),c(o,"aria-invalid",u()),a.disabled=v(),c(a,"aria-checked",p(m)),Z(O,p(m)?b().hide:b().show)}),T(o,i),V(d,f),K(F)}q(["click"]);customElements.define("m-password-input",A(et,{id:{},name:{},value:{},placeholder:{},isinvalid:{},disabled:{},readonly:{},isclearable:{},clearlabel:{},buttonlabel:{}},[],[],!0,U));
 //# sourceMappingURL=PasswordInput.js.map

package/dist/components/passwordinput/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","sources":["../../../src/components/passwordinput/PasswordInput.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-password-input',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * 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.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the password input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the password input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the password input field.\n     */\n    value?: string | number;\n    /**\n     * A placeholder text to show in the password input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, applies an invalid state to the password input.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the password input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the password input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the password input has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n    /**\n     * Labels of the button displayed when showing or hiding the password.\n     */\n    buttonlabel?: {\n      show: string;\n      hide: string;\n    };\n  }\n\n  let {\n    id,\n    name,\n    value,\n    placeholder,\n    isinvalid,\n    disabled,\n    readonly,\n    isclearable,\n    clearlabel = 'Clear content',\n    buttonlabel = { show: 'Show', hide: 'Hide' },\n  }: Props = $props();\n\n  let isVisible = $state(false);\n\n  function toggleVisibility() {\n    isVisible = !isVisible;\n  }\n\n  const resetValue = () => (value = '');\n</script>\n\n<div class={['mc-password-input', 'mc-text-input', isinvalid && 'is-invalid']}>\n  <input\n    class=\"mc-password-input__control mc-text-input__control\"\n    {id}\n    {name}\n    type={isVisible ? 'text' : 'password'}\n    bind:value\n    {placeholder}\n    {disabled}\n    {readonly}\n    aria-invalid={isinvalid}\n  />\n  {#if isclearable && value}\n    <div class=\"mc-controls-options\">\n      <button\n        class=\"mc-controls-options__button\"\n        type=\"button\"\n        onclick={resetValue}\n      >\n        <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n          />\n        </svg>\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n\n  <button\n    class={['mc-button', 'mc-button--s', 'mc-button--ghost']}\n    type=\"button\"\n    role=\"switch\"\n    tabindex=\"0\"\n    {disabled}\n    aria-checked={isVisible}\n    onclick={toggleVisibility}\n  >\n    <span>{isVisible ? buttonlabel.hide : buttonlabel.show}</span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/password-input';\n  @use '@mozaic-ds/styles/components/text-input';\n  @use '@mozaic-ds/styles/components/button';\n  @use '@mozaic-ds/styles/components/controls-options';\n</style>\n"],"names":["toggleVisibility","_","isVisible","$.set","resetValue","__1","value","id","$.prop","$$props","name","placeholder","isinvalid","disabled","readonly","isclearable","clearlabel","buttonlabel","$$value","$$render","consequent","$.set_text","text_1","$.get","customElementForwardEvents"],"mappings":"uVAyEW,SAAAA,EAAgBC,EAAAC,EAAG,CAC1BC,EAAAD,KAAaA,CAAS,CAAA,CACxB,OAEME,EAAU,CAAAC,EAAAC,IAAUA,EAAQ,EAAE;;;;;;g7GA7EtC,qBA2DIC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJH,EAAKE,EAAAC,EAAA,QAAA,CAAA,EACLE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,EAASJ,EAAAC,EAAA,YAAA,CAAA,EACTI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAWP,EAAAC,EAAA,cAAA,CAAA,EACXO,qBAAa,eAAe,EAC5BC,6BAAgB,KAAM,OAAQ,KAAM,MAAM,EAAA,EAGxCf,IAAmB,EAAK,mdAJb,gBAAe,yCACZ,IAAA,YAAAgB,EAAA,CAAA,KAAM,OAAQ,KAAM,QAAM,kFA6B7Bd,EAAUE,CAAA,qDAQuBU,EAAU,CAAA,CAAA,kBAbrDD,EAAW,GAAIT,KAAKa,EAAAC,CAAA,0BAmBf,YAAa,eAAgB,kBAAkB,CAAA,EAAA,gBAAA,aAM9CpB,EAAgBE,CAAA,6DArChB,oBAAqB,gBAAiBU,KAAa,4EAKtDV,CAAS,EAAG,OAAS,UAAU,0EAKvBU,GAAS,sCA0BTV,CAAS,CAAA,EAGhBmB,EAAAC,EAAAC,EAAArB,CAAS,EAAGe,EAAW,EAAC,KAAOA,EAAW,EAAC,IAAI,sBAzC1D,8LA3EYO"}
+{"version":3,"file":"PasswordInput.js","sources":["../../../src/components/passwordinput/PasswordInput.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-password-input',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * 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.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the password input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the password input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the password input field.\n     */\n    value?: string | number;\n    /**\n     * A placeholder text to show in the password input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, applies an invalid state to the password input.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the password input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the password input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the password input has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n    /**\n     * Labels of the button displayed when showing or hiding the password.\n     */\n    buttonlabel?: {\n      show: string;\n      hide: string;\n    };\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(),\n    placeholder,\n    isinvalid,\n    disabled,\n    readonly,\n    isclearable,\n    clearlabel = 'Clear content',\n    buttonlabel = { show: 'Show', hide: 'Hide' },\n  }: Props = $props();\n\n  let isVisible = $state(false);\n\n  function toggleVisibility() {\n    isVisible = !isVisible;\n  }\n\n  const resetValue = () => (value = '');\n</script>\n\n<div class={['mc-password-input', 'mc-text-input', isinvalid && 'is-invalid']}>\n  <input\n    class=\"mc-password-input__control mc-text-input__control\"\n    {id}\n    {name}\n    type={isVisible ? 'text' : 'password'}\n    bind:value\n    {placeholder}\n    {disabled}\n    {readonly}\n    aria-invalid={isinvalid}\n  />\n  {#if isclearable && value}\n    <div class=\"mc-controls-options\">\n      <button class=\"mc-controls-options__button\" type=\"button\" onclick={resetValue}>\n        <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n          />\n        </svg>\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n\n  <button\n    class={['mc-button', 'mc-button--s', 'mc-button--ghost']}\n    type=\"button\"\n    role=\"switch\"\n    tabindex=\"0\"\n    {disabled}\n    aria-checked={isVisible}\n    onclick={toggleVisibility}\n  >\n    <span>{isVisible ? buttonlabel.hide : buttonlabel.show}</span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/password-input';\n  @use '@mozaic-ds/styles/components/text-input';\n  @use '@mozaic-ds/styles/components/button';\n  @use '@mozaic-ds/styles/components/controls-options';\n</style>\n"],"names":["toggleVisibility","_","isVisible","$.set","resetValue","__1","value","id","$.prop","$$props","name","placeholder","isinvalid","disabled","readonly","isclearable","clearlabel","buttonlabel","$$value","$$render","consequent","$.set_text","text_1","$.get","customElementForwardEvents"],"mappings":"uVAyEW,SAAAA,EAAgBC,EAAAC,EAAG,CAC1BC,EAAAD,KAAaA,CAAS,CAAA,CACxB,OAEME,EAAU,CAAAC,EAAAC,IAAUA,EAAQ,EAAE;;;;;;g7GA7EtC,qBA2DIC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJH,EAAKE,EAAAC,EAAA,QAAA,EAAA,EACLE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,EAASJ,EAAAC,EAAA,YAAA,CAAA,EACTI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAWP,EAAAC,EAAA,cAAA,CAAA,EACXO,qBAAa,eAAe,EAC5BC,6BAAgB,KAAM,OAAQ,KAAM,MAAM,EAAA,EAGxCf,IAAmB,EAAK,mdAJb,gBAAe,yCACZ,IAAA,YAAAgB,EAAA,CAAA,KAAM,OAAQ,KAAM,QAAM,kFA0B2Bd,EAAUE,CAAA,qDAOjCU,EAAU,CAAA,CAAA,kBATrDD,EAAW,GAAIT,KAAKa,EAAAC,CAAA,0BAef,YAAa,eAAgB,kBAAkB,CAAA,EAAA,gBAAA,aAM9CpB,EAAgBE,CAAA,6DAjChB,oBAAqB,gBAAiBU,KAAa,4EAKtDV,CAAS,EAAG,OAAS,UAAU,0EAKvBU,GAAS,sCAsBTV,CAAS,CAAA,EAGhBmB,EAAAC,EAAAC,EAAArB,CAAS,EAAGe,EAAW,EAAC,KAAOA,EAAW,EAAC,IAAI,sBArC1D,8LA3EYO"}

package/dist/components/passwordinput/PasswordInput.spec.js

@@ -33,7 +33,7 @@ describe('m-password-input component', () => {
         expect(toggleBtn.getAttribute('aria-checked')).toBe('false');
     });
     it('shows clear button when isclearable is true and value is not empty', async () => {
-        const { container, component } = render(PasswordInput, {
+        const { container } = render(PasswordInput, {
             props: { ...baseProps, isclearable: true, value: 'secret' },
         });
         const clearBtn = container.querySelector('.mc-controls-options__button');

package/dist/components/passwordinput/PasswordInput.svelte

@@ -59,7 +59,7 @@
   let {
     id,
     name,
-    value,
+    value = $bindable(),
     placeholder,
     isinvalid,
     disabled,
@@ -92,11 +92,7 @@
   />
   {#if isclearable && value}
     <div class="mc-controls-options">
-      <button
-        class="mc-controls-options__button"
-        type="button"
-        onclick={resetValue}
-      >
+      <button class="mc-controls-options__button" type="button" onclick={resetValue}>
         <svg class="mc-controls-options__icon" aria-hidden="true">
           <path
             fill-rule="evenodd"

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

@@ -46,7 +46,7 @@ interface Props {
         hide: string;
     };
 }
-declare const PasswordInput: import("svelte").Component<Props, {}, "">;
+declare const PasswordInput: import("svelte").Component<Props, {}, "value">;
 type PasswordInput = ReturnType<typeof PasswordInput>;
 export default PasswordInput;
 //# sourceMappingURL=PasswordInput.svelte.d.ts.map

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;;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,2CAAwC,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

@@ -8,7 +8,7 @@ A password input is a specialized input field used to securely enter and manage
 |------|-------------|------|---------|
 | `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` |   |
+| `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` |   |

package/dist/components/pincode/Pincode.js

@@ -1,6 +1,6 @@
-import{v as C,c as K,p as O,a as R,b as d,w as D,l as A,m as r,L as F,u as G,x as I,f as M,M as H,i as j,j as J,k as c,r as N,t as Q,e as T,g as U}from"../../custom-element.js";import{e as V,i as W}from"../../each.js";import{r as X,s as E,e as Y}from"../../attributes.js";import{b as L}from"../../this.js";var Z=M('<input type="text" inputmode="numeric" maxlength="1" pattern="\\d*" autocomplete="one-time-code"/>'),$=M('<div class="mc-pincode-input svelte-h63szf"></div>');const ee={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 oe(k,n){O(n,!0),R(k,ee);let p=d(n,"id",7),u=d(n,"length",7,6),h=d(n,"name",7),b=d(n,"value",7),g=d(n,"isinvalid",7),_=d(n,"disabled",7),y=d(n,"readonly",7);const l=F(()=>typeof u()=="string"?parseInt(u(),10)||6:u());let i=D(A(Array(r(l)).fill(""))),w=D(A([])),x;G(()=>{const e=String(b()??"");I(i,Array.from({length:r(l)},(o,s)=>e[s]??""),!0)});const f=e=>{queueMicrotask(()=>{var o,s;return(s=(o=r(w))==null?void 0:o[e])==null?void 0:s.focus()})},z=()=>{const e=r(i).join(""),o=new CustomEvent("input",{detail:{value:e},bubbles:!0,composed:!0});x.dispatchEvent(o)},P=(e,o)=>{const t=e.target.value.replace(/\D/g,"").slice(0,1);r(i)[o]=t,z(),t&&o+1<r(l)&&f(o+1)},S=(e,o)=>{e.key==="ArrowLeft"&&o>0?(e.preventDefault(),f(o-1)):e.key==="ArrowRight"&&o<r(l)-1?(e.preventDefault(),f(o+1)):e.key==="Backspace"&&r(i)[o]===""&&o>0&&(r(i)[o-1]="",z(),f(o-1))},q=e=>{var s;e.preventDefault();const o=(((s=e.clipboardData)==null?void 0:s.getData("text"))??"").replace(/\D/g,"").slice(0,r(l));I(i,Array.from({length:r(l)},(t,a)=>o[a]??""),!0),z(),f(Math.min(o.length,r(l)-1))};var B={get id(){return p()},set id(e){p(e),c()},get length(){return u()},set length(e=6){u(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()}},v=$();return V(v,21,()=>Array(r(l)),W,(e,o,s)=>{var t=Z();X(t),E(t,"id",`pincodeItem${s}`),t.__input=a=>P(a,s),t.__keydown=a=>S(a,s),L(t,(a,m)=>r(w)[m]=a,a=>{var m;return(m=r(w))==null?void 0:m[a]},()=>[s]),Q(()=>{T(t,1,U(["mc-pincode-input__control",g()&&"is-invalid"]),"svelte-h63szf"),E(t,"name",h()??`pincode-${p()}`),t.disabled=_(),t.readOnly=y(),Y(t,r(i)[s])}),j(e,t)}),N(v),L(v,e=>x=e,()=>x),H("paste",v,q),j(k,v),J(B)}C(["input","keydown"]);customElements.define("m-pincode",K(oe,{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":["../../../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 {\n    id,\n    length = 6,\n    name,\n    value,\n    isinvalid,\n    disabled,\n    readonly,\n  }: Props = $props();\n\n  const L = $derived(\n    typeof length === 'string' ? parseInt(length, 10) || 6 : length,\n  );\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') ?? '')\n      .replace(/\\D/g, '')\n      .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) as _, 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":["id","$.prop","$$props","length","name","value","isinvalid","disabled","readonly","L","$.derived","otp","$.get","inputs","$.state","$.proxy","element","$.user_effect","incoming","$.set","_","i","focusInput","emitInput","joined","event","onInput","index","digit","onKeyDown","onPaste","pasted","_a","$.index","$$anchor","input","e","$$value","$.set_attribute","$.set_value","$.bind_this","div"],"mappings":"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"}
+{"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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"}

package/dist/components/pincode/Pincode.svelte

@@ -37,19 +37,9 @@
     readonly?: boolean;
   }
 
-  let {
-    id,
-    length = 6,
-    name,
-    value,
-    isinvalid,
-    disabled,
-    readonly,
-  }: Props = $props();
+  let { id, length = 6, name, value, isinvalid, disabled, readonly }: Props = $props();
 
-  const L = $derived(
-    typeof length === 'string' ? parseInt(length, 10) || 6 : length,
-  );
+  const L = $derived(typeof length === 'string' ? parseInt(length, 10) || 6 : length);
 
   let otp = $state<string[]>(Array(L).fill(''));
   let inputs = $state<HTMLInputElement[]>([]);
@@ -98,9 +88,7 @@
 
   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] ?? '');
     emitInput();
     focusInput(Math.min(pasted.length, L - 1));
@@ -108,7 +96,7 @@
 </script>
 
 <div class="mc-pincode-input" onpaste={onPaste} bind:this={element}>
-  {#each Array(L) as _, i}
+  {#each [...Array(L).keys()] as i (i)}
     <input
       id={`pincodeItem${i}`}
       bind:this={inputs[i]}

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":"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;AAsFH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,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"}