@mozaic-ds/web-components 1.2.0 → 1.4.0

package/dist/components/phonenumber/PhoneNumber.svelte.d.ts

@@ -0,0 +1,61 @@
+import { type CountryCode } from 'libphonenumber-js';
+/**
+ * A phone number input is a specialized input field designed to capture and validate phone numbers, ensuring correct formatting based on country-specific dialing codes. It often includes a country selector that automatically adjusts the international dialing code. This component improves user experience by standardizing phone number entries, reducing errors, and facilitating global compatibility. It is commonly used in registration forms, authentication flows, and contact information fields.
+ *
+ * @event valid {CustomEvent<boolean>} - Emits the validity of the value when the PhoneNumber changes.
+ */
+interface Props {
+    [key: string]: any;
+    /**
+     * A unique identifier for the phone number input element, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The current value of the phone number input field.
+     */
+    value?: string;
+    /**
+     * Default country code for phone number formatting (e.g., 'FR', 'US', 'PT').
+     */
+    defaultcountry?: CountryCode;
+    /**
+     * A placeholder text to show in the phone number input when it is empty.
+     */
+    placeholder?: string;
+    /**
+     * Determines the size of the phone number input.
+     */
+    size?: 's' | 'm';
+    /**
+     * If `true`, applies an invalid state to the password input.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, disables the input, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the input is read-only (cannot be edited).
+     */
+    readonly?: boolean;
+    /**
+     * If `true`, display the country calling code prefix (+33, +1, etc.).
+     */
+    prefix?: boolean;
+    /**
+     * If `true`, display the country flag selector
+     */
+    flag?: boolean;
+    /**
+     * Locale for displaying country names (e.g., 'fr', 'en', 'es', 'pt').
+     */
+    locale?: string;
+    /**
+     * List of country codes to display in the selector. If not provided, all countries will be shown.
+     */
+    countrycodes?: CountryCode[];
+}
+declare const PhoneNumber: import("svelte").Component<Props, {}, "value">;
+type PhoneNumber = ReturnType<typeof PhoneNumber>;
+export default PhoneNumber;
+//# sourceMappingURL=PhoneNumber.svelte.d.ts.map

package/dist/components/phonenumber/PhoneNumber.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneNumber.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/phonenumber/PhoneNumber.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAMH,KAAK,WAAW,EACjB,MAAM,mBAAmB,CAAC;AAI3B;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;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,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;CAC9B;AA0JH,QAAA,MAAM,WAAW,gDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/phonenumber/README.md

@@ -0,0 +1,27 @@
+# `m-phone-number`
+
+A phone number input is a specialized input field designed to capture and validate phone numbers, ensuring correct formatting based on country-specific dialing codes. It often includes a country selector that automatically adjusts the international dialing code. This component improves user experience by standardizing phone number entries, reducing errors, and facilitating global compatibility. It is commonly used in registration forms, authentication flows, and contact information fields.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the phone number input element, used to associate the label with the form element. | `string` |   |
+| `value` | The current value of the phone number input field. | `string` | `$bindable('')` |
+| `defaultcountry` | Default country code for phone number formatting (e.g., 'FR', 'US', 'PT'). | `CountryCode` | `FR` |
+| `placeholder` | A placeholder text to show in the phone number input when it is empty. | `string` |   |
+| `size` | Determines the size of the phone number input. | `'s'` `'m'` | `m` |
+| `isinvalid` | If `true`, applies an invalid state to the password input. | `boolean` |   |
+| `disabled` | If `true`, disables the input, making it non-interactive. | `boolean` |   |
+| `readonly` | If `true`, the input is read-only (cannot be edited). | `boolean` |   |
+| `prefix` | If `true`, display the country calling code prefix (+33, +1, etc.). | `boolean` | `true` |
+| `flag` | If `true`, display the country flag selector | `boolean` | `true` |
+| `locale` | Locale for displaying country names (e.g., 'fr', 'en', 'es', 'pt'). | `string` | `en` |
+| `countrycodes` | List of country codes to display in the selector. If not provided, all countries will be shown. | `CountryCode[]` |   |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `valid` | Emits the validity of the value when the PhoneNumber changes. | `CustomEvent<boolean>` |
+

package/dist/components/pincode/Pincode.js

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

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Pincode.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

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

@@ -1 +1 @@
-{"version":3,"file":"Pincode.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pincode/Pincode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IA6CX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
+{"version":3,"file":"Pincode.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pincode/Pincode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,kBAAkB,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IA6CX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

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

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
+import './Pincode.svelte';
 const meta = {
     title: 'Form Elements/Pincode',
     component: 'm-pincode',
@@ -30,9 +31,9 @@ const meta = {
         name=${ifDefined(args.name)}
         value=${ifDefined(args.value)}
         length=${ifDefined(args.length)}
-        isinvalid=${ifDefined(args.isinvalid)}
-        disabled=${ifDefined(args.disabled)}
-        readonly=${ifDefined(args.readonly)}
+        ?isinvalid=${args.isinvalid}
+        ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         @input=${(event) => {
             onInput(event);
         }}

package/dist/components/pincode/Pincode.svelte

@@ -1,4 +1,13 @@
-<svelte:options customElement={{ tag: 'm-pincode' }} />
+<svelte:options
+  customElement={{
+    tag: 'm-pincode',
+    props: {
+      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },
+      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
+      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },
+    },
+  }}
+/>
 
 <script lang="ts">
   /**
@@ -41,12 +50,13 @@
 
   const L = $derived(typeof length === 'string' ? parseInt(length, 10) || 6 : length);
 
-  let otp = $state<string[]>(Array(L).fill(''));
+  let otp = $state<string[]>([]);
   let inputs = $state<HTMLInputElement[]>([]);
   let element: HTMLElement;
 
   $effect(() => {
     const incoming = String(value ?? '');
+    otp = Array(L).fill('');
     otp = Array.from({ length: L }, (_, i) => incoming[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;AA0EH,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;AAkFH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/quantityselector/QuantitySelector.js

@@ -1,5 +1,5 @@
-import{v as H,c as J,p as K,a as L,b as o,f as M,d as c,s as _,e as D,t as P,i as R,j as T,k as l,r as d,g as U,h as I}from"../../custom-element.js";import{r as W,s as i}from"../../attributes.js";import{c as X}from"../../input.js";import{c as Y}from"../../custom-element-forward-events.js";var Z=M('<div><input type="number" class="mc-quantity-selector__control svelte-ptlds1"/> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--increase svelte-ptlds1" tabindex="-1"><span class="mc-quantity-selector__icon svelte-ptlds1"><more-24></more-24></span> <span class="mc-quantity-selector__label svelte-ptlds1"> </span></button> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--decrease svelte-ptlds1" tabindex="-1"><span class="mc-quantity-selector__icon svelte-ptlds1"><less-24></less-24></span> <span class="mc-quantity-selector__label svelte-ptlds1"> </span></button></div>',2);const $={hash:"svelte-ptlds1",code:`/**
+import{u as C,c as H,p as J,a as K,b as o,s as h,t as O,f as P,g as R,h as T,i as U,d as n,j as s,r as i,n as W,o as X,e as V}from"../../custom-element.js";import{a as Y,s as B}from"../../attributes.js";import{c as Z}from"../../input.js";import{c as $}from"../../custom-element-forward-events.js";import{M as ee,L as te}from"../../Condition20.js";var re=T('<div><input/> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--increase svelte-ptlds1" tabindex="-1"><span class="mc-quantity-selector__icon svelte-ptlds1"><!></span> <span class="mc-quantity-selector__label svelte-ptlds1"> </span></button> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--decrease svelte-ptlds1" tabindex="-1"><span class="mc-quantity-selector__icon svelte-ptlds1"><!></span> <span class="mc-quantity-selector__label svelte-ptlds1"> </span></button></div>');const oe={hash:"svelte-ptlds1",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-quantity-selector.svelte-ptlds1 {background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 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;gap:0.25rem;padding:0.1875rem;position:relative;border-radius:var(--border-radius-s, 0.25rem);}.mc-quantity-selector__control.svelte-ptlds1 {background-color:transparent;border-width:0;color:inherit;font-family:inherit;outline:none;}.mc-quantity-selector__control[type=number].svelte-ptlds1::-webkit-inner-spin-button, .mc-quantity-selector__control[type=number].svelte-ptlds1::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-quantity-selector__control[type=number].svelte-ptlds1 {
-  /* For Gecko rendering engine */appearance:textfield;}.mc-quantity-selector__control.svelte-ptlds1 {padding:0;font-size:inherit;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-semi-bold, 600);cursor:inherit;text-align:center;flex-grow:1;}.mc-quantity-selector__control.svelte-ptlds1::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-quantity-selector__button.svelte-ptlds1 {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;height:2.5rem;width:2.5rem;border-radius:var(--border-radius-full, 100%);color:var(--quantity-selector-color-button-text-default, #242938);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}.mc-quantity-selector__button.svelte-ptlds1:disabled {color:var(--quantity-selector-color-button-text-disabled, #d9d9d9);cursor:not-allowed;}.mc-quantity-selector__button.svelte-ptlds1:hover:not(:disabled) {background-color:var(--quantity-selector-color-button-background-hover, rgba(255, 255, 255, 0.1));}.mc-quantity-selector__button--decrease.svelte-ptlds1 {order:-1;}.mc-quantity-selector__icon.svelte-ptlds1 {height:1.5rem;width:1.5rem;fill:currentcolor;}.mc-quantity-selector__label.svelte-ptlds1 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-quantity-selector.svelte-ptlds1::after {transition:box-shadow 200ms ease;content:"";position:absolute;inset:-0.125rem var(--inset-x, 3rem);pointer-events:none;display:block;border-radius:var(--border-radius-s, 0.25rem);}.mc-quantity-selector.svelte-ptlds1:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):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-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):disabled) .mc-quantity-selector__button:where(.svelte-ptlds1):disabled {color:var(--forms-color-icon-disabled, #737373);}.mc-quantity-selector.svelte-ptlds1:has(input[readonly]:where(.svelte-ptlds1)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-quantity-selector.svelte-ptlds1:has(input[readonly]:where(.svelte-ptlds1)) .mc-quantity-selector__control[readonly]:where(.svelte-ptlds1) {text-align:left;padding-left:0.5rem;}.mc-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):focus)::after {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-quantity-selector--s.svelte-ptlds1 {--inset-x: 2rem;height:2rem;}.mc-quantity-selector--s.svelte-ptlds1 .mc-quantity-selector__button:where(.svelte-ptlds1) {height:1.5rem;width:1.5rem;}.mc-quantity-selector--s.svelte-ptlds1 .mc-quantity-selector__icon:where(.svelte-ptlds1) {height:1.25rem;width:1.25rem;}.mc-quantity-selector.is-invalid.svelte-ptlds1 {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-quantity-selector.is-invalid.svelte-ptlds1:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}.mc-quantity-selector.svelte-ptlds1 :where(.svelte-ptlds1) {box-sizing:border-box;}`};function ee(S,r){K(r,!0),L(S,$);let m=o(r,"id",7),t=o(r,"value",15,1),n=o(r,"min",7,1),a=o(r,"max",7,100),f=o(r,"step",7,1),g=o(r,"size",7,"m"),v=o(r,"disabled",7),h=o(r,"isinvalid",7,!1),q=o(r,"name",7,"quantity-selector-input"),w=o(r,"readonly",7),x=o(r,"decrementlabel",7,"Decrement"),k=o(r,"incrementlabel",7,"Increment");const j=()=>{const e=Number(t());e>a()?t(a()):e<n()?t(n()):t(e)},F=()=>{const e=Number(t()),p=Number(f());e+p<=a()?t(e+p):t(a())},G=()=>{const e=Number(t()),p=Number(f());e-p>=n()?t(e-p):t(n())};var O={get id(){return m()},set id(e){m(e),l()},get value(){return t()},set value(e=1){t(e),l()},get min(){return n()},set min(e=1){n(e),l()},get max(){return a()},set max(e=100){a(e),l()},get step(){return f()},set step(e=1){f(e),l()},get size(){return g()},set size(e="m"){g(e),l()},get disabled(){return v()},set disabled(e){v(e),l()},get isinvalid(){return h()},set isinvalid(e=!1){h(e),l()},get name(){return q()},set name(e="quantity-selector-input"){q(e),l()},get readonly(){return w()},set readonly(e){w(e),l()},get decrementlabel(){return x()},set decrementlabel(e="Decrement"){x(e),l()},get incrementlabel(){return k()},set incrementlabel(e="Increment"){k(e),l()}},y=Z(),s=c(y);W(s),s.__input=j;var u=_(s,2);u.__click=F;var z=c(u),Q=c(z);D(Q,1,"svelte-ptlds1"),d(z);var V=_(z,2),A=c(V,!0);d(V),d(u);var b=_(u,2);b.__click=G;var N=c(b),B=c(N);D(B,1,"svelte-ptlds1"),d(N);var E=_(N,2),C=c(E,!0);return d(E),d(b),d(y),P(()=>{D(y,1,U(["mc-quantity-selector",`mc-quantity-selector--${g()}`,h()&&"is-invalid"]),"svelte-ptlds1"),i(s,"id",m()),i(s,"name",q()),i(s,"aria-valuemin",n()),i(s,"aria-valuemax",a()),i(s,"aria-valuenow",t()),i(s,"aria-invalid",`${h()}`),s.readOnly=w(),s.disabled=v(),i(u,"aria-controls",m()),u.disabled=t()===a()||v(),I(A,k()),i(b,"aria-controls",m()),b.disabled=t()===n()||v(),I(C,x())}),X(s,t),R(S,y),T(O)}H(["input","click"]);customElements.define("m-quantityselector",J(ee,{id:{},value:{},min:{},max:{},step:{},size:{},disabled:{},isinvalid:{},name:{},readonly:{},decrementlabel:{},incrementlabel:{}},[],[],!0,Y));
+  /* For Gecko rendering engine */appearance:textfield;}.mc-quantity-selector__control.svelte-ptlds1 {padding:0;font-size:inherit;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-semi-bold, 600);cursor:inherit;text-align:center;flex-grow:1;}.mc-quantity-selector__control.svelte-ptlds1::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-quantity-selector__button.svelte-ptlds1 {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;height:2.5rem;width:2.5rem;border-radius:var(--border-radius-full, 100%);color:var(--quantity-selector-color-button-text-default, #242938);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}.mc-quantity-selector__button.svelte-ptlds1:disabled {color:var(--quantity-selector-color-button-text-disabled, #d9d9d9);cursor:not-allowed;}.mc-quantity-selector__button.svelte-ptlds1:hover:not(:disabled) {background-color:var(--quantity-selector-color-button-background-hover, rgba(255, 255, 255, 0.1));}.mc-quantity-selector__button--decrease.svelte-ptlds1 {order:-1;}.mc-quantity-selector__icon.svelte-ptlds1 {height:1.5rem;width:1.5rem;fill:currentcolor;}.mc-quantity-selector__label.svelte-ptlds1 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-quantity-selector.svelte-ptlds1::after {transition:box-shadow 200ms ease;content:"";position:absolute;inset:-0.125rem var(--inset-x, 3rem);pointer-events:none;display:block;border-radius:var(--border-radius-s, 0.25rem);}.mc-quantity-selector.svelte-ptlds1:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):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-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):disabled) .mc-quantity-selector__button:where(.svelte-ptlds1):disabled {color:var(--forms-color-icon-disabled, #737373);}.mc-quantity-selector.svelte-ptlds1:has(input[readonly]:where(.svelte-ptlds1)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-quantity-selector.svelte-ptlds1:has(input[readonly]:where(.svelte-ptlds1)) .mc-quantity-selector__control[readonly]:where(.svelte-ptlds1) {text-align:left;padding-left:0.5rem;}.mc-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):focus)::after {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-quantity-selector--s.svelte-ptlds1 {--inset-x: 2rem;height:2rem;}.mc-quantity-selector--s.svelte-ptlds1 .mc-quantity-selector__button:where(.svelte-ptlds1) {height:1.5rem;width:1.5rem;}.mc-quantity-selector--s.svelte-ptlds1 .mc-quantity-selector__icon:where(.svelte-ptlds1) {height:1.25rem;width:1.25rem;}.mc-quantity-selector.is-invalid.svelte-ptlds1 {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-quantity-selector.is-invalid.svelte-ptlds1:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}.mc-quantity-selector.svelte-ptlds1 :where(.svelte-ptlds1) {box-sizing:border-box;}`};function se(N,r){J(r,!0),K(N,oe);let d=o(r,"id",7),t=o(r,"value",15,1),l=o(r,"min",7,1),a=o(r,"max",7,100),b=o(r,"step",7,1),y=o(r,"size",7,"m"),u=o(r,"disabled",7),p=o(r,"isinvalid",7,!1),_=o(r,"name",7,"quantity-selector-input"),g=o(r,"readonly",7),q=o(r,"decrementlabel",7,"Decrement"),w=o(r,"incrementlabel",7,"Increment"),E=U(r,["$$slots","$$events","$$legacy","$$host","id","value","min","max","step","size","disabled","isinvalid","name","readonly","decrementlabel","incrementlabel"]);const I=()=>{const e=Number(t());e>a()?t(a()):e<l()?t(l()):t(e)},j=()=>{const e=Number(t()),v=Number(b());e+v<=a()?t(e+v):t(a())},F=()=>{const e=Number(t()),v=Number(b());e-v>=l()?t(e-v):t(l())};var L={get id(){return d()},set id(e){d(e),s()},get value(){return t()},set value(e=1){t(e),s()},get min(){return l()},set min(e=1){l(e),s()},get max(){return a()},set max(e=100){a(e),s()},get step(){return b()},set step(e=1){b(e),s()},get size(){return y()},set size(e="m"){y(e),s()},get disabled(){return u()},set disabled(e){u(e),s()},get isinvalid(){return p()},set isinvalid(e=!1){p(e),s()},get name(){return _()},set name(e="quantity-selector-input"){_(e),s()},get readonly(){return g()},set readonly(e){g(e),s()},get decrementlabel(){return q()},set decrementlabel(e="Decrement"){q(e),s()},get incrementlabel(){return w()},set incrementlabel(e="Increment"){w(e),s()}},f=re(),x=n(f);Y(x,()=>({type:"number",id:d(),name:_(),oninput:I,class:"mc-quantity-selector__control","aria-valuemin":l(),"aria-valuemax":a(),"aria-valuenow":t(),"aria-invalid":`${p()}`,readonly:g(),disabled:u(),...E}),void 0,void 0,void 0,"svelte-ptlds1",!0);var c=h(x,2);c.__click=j;var k=n(c),M=n(k);ee(M,{}),i(k);var D=h(k,2),G=n(D,!0);i(D),i(c);var m=h(c,2);m.__click=F;var z=n(m),Q=n(z);te(Q,{}),i(z);var S=h(z,2),A=n(S,!0);return i(S),i(m),i(f),O(()=>{W(f,1,X(["mc-quantity-selector",`mc-quantity-selector--${y()}`,p()&&"is-invalid"]),"svelte-ptlds1"),B(c,"aria-controls",d()),c.disabled=t()===a()||u(),V(G,w()),B(m,"aria-controls",d()),m.disabled=t()===l()||u(),V(A,q())}),Z(x,t),P(N,f),R(L)}C(["click"]);customElements.define("m-quantityselector",H(se,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},id:{},value:{},min:{},max:{},step:{},size:{},name:{},decrementlabel:{},incrementlabel:{}},[],[],!0,$));
 //# sourceMappingURL=QuantitySelector.js.map

package/dist/components/quantityselector/QuantitySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuantitySelector.js","sources":["../../../src/components/quantityselector/QuantitySelector.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-quantityselector',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the quantity selector element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the quantity selector element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the quantity selector field.\n     */\n    value?: number;\n    /**\n     * If `true`, applies an invalid state to the quantity selector.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the quantity selector, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the quantity selector.\n     */\n    size?: 's' | 'm';\n    /**\n     * Minimum acceptable value for the quantity selector.\n     */\n    min?: number;\n    /**\n     * Maximum acceptable value for the quantity selector.\n     */\n    max?: number;\n    /**\n     * Determines how much the value will change per click when the quantity is increased or decreased.\n     */\n    step?: number;\n    /**\n     * If `true`, the quantity selector is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * The label text for the increment button.\n     */\n    incrementlabel?: string;\n    /**\n     * The label text for the decrement button.\n     */\n    decrementlabel?: string;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    min = 1,\n    max = 100,\n    step = 1,\n    size = 'm',\n    disabled,\n    isinvalid = false,\n    name = 'quantity-selector-input',\n    readonly,\n    decrementlabel = 'Decrement',\n    incrementlabel = 'Increment',\n  }: Props = $props();\n\n  const onValue = (): void => {\n    const numericValue = Number(value);\n    if (numericValue > max) {\n      value = max;\n    } else if (numericValue < min) {\n      value = min;\n    } else {\n      value = numericValue;\n    }\n  };\n\n  const onIncrement = (): void => {\n    const numericValue = Number(value);\n    const numericStep = Number(step);\n\n    if (numericValue + numericStep <= max) {\n      value = numericValue + numericStep;\n    } else {\n      value = max;\n    }\n  };\n\n  const onDecrement = (): void => {\n    const numericValue = Number(value);\n    const numericStep = Number(step);\n\n    if (numericValue - numericStep >= min) {\n      value = numericValue - numericStep;\n    } else {\n      value = min;\n    }\n  };\n</script>\n\n<div class={['mc-quantity-selector', `mc-quantity-selector--${size}`, isinvalid && 'is-invalid']}>\n  <input\n    type=\"number\"\n    {id}\n    {name}\n    bind:value\n    oninput={onValue}\n    class=\"mc-quantity-selector__control\"\n    aria-valuemin={min}\n    aria-valuemax={max}\n    aria-valuenow={value}\n    aria-invalid={`${isinvalid}`}\n    {readonly}\n    {disabled}\n  />\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--increase\"\n    tabindex=\"-1\"\n    disabled={value === max || disabled}\n    onclick={onIncrement}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <more-24></more-24>\n    </span>\n    <span class=\"mc-quantity-selector__label\">{incrementlabel}</span>\n  </button>\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--decrease\"\n    tabindex=\"-1\"\n    disabled={value === min || disabled}\n    onclick={onDecrement}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <less-24></less-24>\n    </span>\n    <span class=\"mc-quantity-selector__label\">{decrementlabel}</span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/quantity-selector';\n</style>\n"],"names":["id","$.prop","$$props","value","min","max","step","size","disabled","isinvalid","name","readonly","decrementlabel","incrementlabel","onValue","numericValue","onIncrement","numericStep","onDecrement","customElementForwardEvents"],"mappings":";;;svHAAA,oBAgEIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,iBAAkB,CAAC,EACnBC,cAAM,CAAC,EACPC,cAAM,GAAG,EACTC,eAAO,CAAC,EACRC,eAAO,GAAG,EACVC,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,oBAAY,EAAK,EACjBC,eAAO,yBAAyB,EAChCC,EAAQV,EAAAC,EAAA,WAAA,CAAA,EACRU,yBAAiB,WAAW,EAC5BC,yBAAiB,WAAW,EAGxB,MAAAC,EAAO,IAAe,OACpBC,EAAe,OAAOZ,GAAK,EAC7BY,EAAeV,IACjBF,EAAQE,EAAG,CAAA,EACFU,EAAeX,IACxBD,EAAQC,EAAG,CAAA,EAEXD,EAAQY,CAAY,CAExB,EAEMC,EAAW,IAAe,OACxBD,EAAe,OAAOZ,GAAK,EAC3Bc,EAAc,OAAOX,GAAI,EAE3BS,EAAeE,GAAeZ,IAChCF,EAAQY,EAAeE,CAAW,EAElCd,EAAQE,EAAG,CAAA,CAEf,EAEMa,EAAW,IAAe,OACxBH,EAAe,OAAOZ,GAAK,EAC3Bc,EAAc,OAAOX,GAAI,EAE3BS,EAAeE,GAAeb,IAChCD,EAAQY,EAAeE,CAAW,EAElCd,EAAQC,EAAG,CAAA,CAEf,sFA5CoB,EAAC,2CACb,EAAC,2CACD,IAAG,6CACF,EAAC,6CACD,IAAG,4GAEE,GAAK,6CACV,0BAAyB,sHAEf,YAAW,iEACX,YAAW,wCA2CnBU,yBAeAE,wGAaAE,6GAlCA,gDAAiDX,EAAI,CAAA,GAAIE,KAAa,kFAQhEL,GAAG,sBACHC,GAAG,sBACHF,GAAK,wBACHM,EAAS,CAAA,EAAA,oDAMXT,GAAE,aAGPG,EAAK,IAAKE,EAAG,GAAIG,EAAQ,MAMQK,GAAc,sBAI1Cb,GAAE,aAGPG,EAAK,IAAKC,EAAG,GAAII,EAAQ,MAMQI,GAAc,sBAzC7D,+MA3GYO"}
+{"version":3,"file":"QuantitySelector.js","sources":["../../../src/components/quantityselector/QuantitySelector.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-quantityselector',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import { More24, Less24 } from '@mozaic-ds/icons-svelte';\n  /**\n   * A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * A unique identifier for the quantity selector element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the quantity selector element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the quantity selector field.\n     */\n    value?: number;\n    /**\n     * If `true`, applies an invalid state to the quantity selector.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the quantity selector, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the quantity selector.\n     */\n    size?: 's' | 'm';\n    /**\n     * Minimum acceptable value for the quantity selector.\n     */\n    min?: number;\n    /**\n     * Maximum acceptable value for the quantity selector.\n     */\n    max?: number;\n    /**\n     * Determines how much the value will change per click when the quantity is increased or decreased.\n     */\n    step?: number;\n    /**\n     * If `true`, the quantity selector is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * The label text for the increment button.\n     */\n    incrementlabel?: string;\n    /**\n     * The label text for the decrement button.\n     */\n    decrementlabel?: string;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    min = 1,\n    max = 100,\n    step = 1,\n    size = 'm',\n    disabled,\n    isinvalid = false,\n    name = 'quantity-selector-input',\n    readonly,\n    decrementlabel = 'Decrement',\n    incrementlabel = 'Increment',\n    ...attrs\n  }: Props = $props();\n\n  const onValue = (): void => {\n    const numericValue = Number(value);\n    if (numericValue > max) {\n      value = max;\n    } else if (numericValue < min) {\n      value = min;\n    } else {\n      value = numericValue;\n    }\n  };\n\n  const onIncrement = (): void => {\n    const numericValue = Number(value);\n    const numericStep = Number(step);\n\n    if (numericValue + numericStep <= max) {\n      value = numericValue + numericStep;\n    } else {\n      value = max;\n    }\n  };\n\n  const onDecrement = (): void => {\n    const numericValue = Number(value);\n    const numericStep = Number(step);\n\n    if (numericValue - numericStep >= min) {\n      value = numericValue - numericStep;\n    } else {\n      value = min;\n    }\n  };\n</script>\n\n<div class={['mc-quantity-selector', `mc-quantity-selector--${size}`, isinvalid && 'is-invalid']}>\n  <input\n    type=\"number\"\n    {id}\n    {name}\n    bind:value\n    oninput={onValue}\n    class=\"mc-quantity-selector__control\"\n    aria-valuemin={min}\n    aria-valuemax={max}\n    aria-valuenow={value}\n    aria-invalid={`${isinvalid}`}\n    {readonly}\n    {disabled}\n    {...attrs}\n  />\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--increase\"\n    tabindex=\"-1\"\n    disabled={value === max || disabled}\n    onclick={onIncrement}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <More24 />\n    </span>\n    <span class=\"mc-quantity-selector__label\">{incrementlabel}</span>\n  </button>\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--decrease\"\n    tabindex=\"-1\"\n    disabled={value === min || disabled}\n    onclick={onDecrement}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <Less24 />\n    </span>\n    <span class=\"mc-quantity-selector__label\">{decrementlabel}</span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/quantity-selector';\n</style>\n"],"names":["id","$.prop","$$props","value","min","max","step","size","disabled","isinvalid","name","readonly","decrementlabel","incrementlabel","attrs","$.rest_props","onValue","numericValue","onIncrement","numericStep","onDecrement","div","root","input","$.child","button","$.sibling","span","More24","node","span_1","$.reset","button_1","span_2","Less24","node_1","span_3","$.set_attribute","$.bind_value","customElementForwardEvents"],"mappings":";;;svHAYA,qBA2DIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,iBAAkB,CAAC,EACnBC,cAAM,CAAC,EACPC,cAAM,GAAG,EACTC,eAAO,CAAC,EACRC,eAAO,GAAG,EACVC,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,oBAAY,EAAK,EACjBC,eAAO,yBAAyB,EAChCC,EAAQV,EAAAC,EAAA,WAAA,CAAA,EACRU,yBAAiB,WAAW,EAC5BC,yBAAiB,WAAW,EACzBC,EAAAC,EAAAb,EAAA,8JAGC,MAAAc,EAAO,IAAe,OACpBC,EAAe,OAAOd,GAAK,EAC7Bc,EAAeZ,IACjBF,EAAQE,EAAG,CAAA,EACFY,EAAeb,IACxBD,EAAQC,EAAG,CAAA,EAEXD,EAAQc,CAAY,CAExB,EAEMC,EAAW,IAAe,OACxBD,EAAe,OAAOd,GAAK,EAC3BgB,EAAc,OAAOb,GAAI,EAE3BW,EAAeE,GAAed,IAChCF,EAAQc,EAAeE,CAAW,EAElChB,EAAQE,EAAG,CAAA,CAEf,EAEMe,EAAW,IAAe,OACxBH,EAAe,OAAOd,GAAK,EAC3BgB,EAAc,OAAOb,GAAI,EAE3BW,EAAeE,GAAef,IAChCD,EAAQc,EAAeE,CAAW,EAElChB,EAAQC,EAAG,CAAA,CAEf,sFA7CoB,EAAC,2CACb,EAAC,2CACD,IAAG,6CACF,EAAC,6CACD,IAAG,4GAEE,GAAK,6CACV,0BAAyB,sHAEf,YAAW,iEACX,YAAW,YAsC/BiB,EAAGC,GAAA,EACDC,EAAAC,EADFH,CAAG,IACDE,yBAEEvB,EAAE,OACFU,EAAI,UAEIM,wDAEMZ,EAAG,kBACHC,EAAG,kBACHF,EAAK,oBACHM,EAAS,CAAA,YACzBE,EAAQ,WACRH,EAAQ,KACLM,iDAELW,EAAAC,EAfAH,EAAA,CAAA,EAeAE,EAMC,QAASP,EAER,IAAAS,EAAIH,EARNC,CAAA,MAQEE,CAAI,EACFC,GAAMC,EAAA,EAAA,IADRF,CAAI,EAGJ,IAAAG,IAHAH,EAAI,CAAA,MAGJG,EAAI,EAAA,IAAJA,CAAI,EAXNC,EAAAN,CAAA,MAaAO,EAAAN,EAbAD,EAAA,CAAA,EAaAO,EAMC,QAASZ,EAER,IAAAa,EAAIT,EARNQ,CAAA,MAQEC,CAAI,EACFC,GAAMC,EAAA,EAAA,IADRF,CAAI,EAGJ,IAAAG,IAHAH,EAAI,CAAA,MAGJG,EAAI,EAAA,WAAJA,CAAI,EAXNL,EAAAC,CAAA,IA7BFX,CAAG,WAAHA,OAAY,gDAAiDd,EAAI,CAAA,GAAIE,KAAa,gCAgBhF4B,EAAAZ,EAAA,gBAEgBzB,GAAE,EAFlByB,EAAA,SAKWtB,EAAK,IAAKE,EAAG,GAAIG,EAAQ,MAMQK,GAAc,EAE1DwB,EAAAL,EAAA,gBAEgBhC,GAAE,EAFlBgC,EAAA,SAKW7B,EAAK,IAAKC,EAAG,GAAII,EAAQ,MAMQI,GAAc,IAvC1D0B,EAAAf,EAAApB,CAAA,MADFkB,CAAG,MAFI,kVA9GIkB"}

package/dist/components/quantityselector/QuantitySelector.stories.d.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './QuantitySelector.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/quantityselector/QuantitySelector.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuantitySelector.stories.d.ts","sourceRoot":"","sources":["../../../src/components/quantityselector/QuantitySelector.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,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,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
+{"version":3,"file":"QuantitySelector.stories.d.ts","sourceRoot":"","sources":["../../../src/components/quantityselector/QuantitySelector.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,2BAA2B,CAAC;AAEnC,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,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/quantityselector/QuantitySelector.stories.js

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
+import './QuantitySelector.svelte';
 const meta = {
     title: 'Form Elements/Quantity Selector',
     component: 'm-quantityselector',
@@ -26,13 +27,13 @@ const meta = {
         id=${ifDefined(args.id)}
         name=${ifDefined(args.name)}
         value=${ifDefined(args.value)}
-        isinvalid=${ifDefined(args.isinvalid)}
-        disabled=${ifDefined(args.disabled)}
+        ?isinvalid=${args.isinvalid}
+        ?disabled=${args.disabled}
         size=${ifDefined(args.size)}
         min=${ifDefined(args.min)}
         max=${ifDefined(args.max)}
         step=${ifDefined(args.step)}
-        readonly=${ifDefined(args.readonly)}
+        ?readonly=${args.readonly}
         incrementlabel=${ifDefined(args.incrementlabel)}
         decrementlabel=${ifDefined(args.decrementlabel)}
         @input=${(event) => {

package/dist/components/quantityselector/QuantitySelector.svelte

@@ -1,16 +1,23 @@
 <svelte:options
   customElement={{
     tag: 'm-quantityselector',
+    props: {
+      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },
+      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
+      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },
+    },
     extend: customElementForwardEvents,
   }}
 />
 
 <script lang="ts">
   import { customElementForwardEvents } from '../../utils';
+  import { More24, Less24 } from '@mozaic-ds/icons-svelte';
   /**
    * A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.
    */
   interface Props {
+    [key: string]: any;
     /**
      * A unique identifier for the quantity selector element, used to associate the label with the form element.
      */
@@ -74,6 +81,7 @@
     readonly,
     decrementlabel = 'Decrement',
     incrementlabel = 'Increment',
+    ...attrs
   }: Props = $props();
 
   const onValue = (): void => {
@@ -124,6 +132,7 @@
     aria-invalid={`${isinvalid}`}
     {readonly}
     {disabled}
+    {...attrs}
   />
   <button
     type="button"
@@ -134,7 +143,7 @@
     onclick={onIncrement}
   >
     <span class="mc-quantity-selector__icon">
-      <more-24></more-24>
+      <More24 />
     </span>
     <span class="mc-quantity-selector__label">{incrementlabel}</span>
   </button>
@@ -147,7 +156,7 @@
     onclick={onDecrement}
   >
     <span class="mc-quantity-selector__icon">
-      <less-24></less-24>
+      <Less24 />
     </span>
     <span class="mc-quantity-selector__label">{decrementlabel}</span>
   </button>

package/dist/components/quantityselector/QuantitySelector.svelte.d.ts

@@ -2,6 +2,7 @@
  * A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.
  */
 interface Props {
+    [key: string]: any;
     /**
      * A unique identifier for the quantity selector element, used to associate the label with the form element.
      */

package/dist/components/quantityselector/QuantitySelector.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuantitySelector.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/quantityselector/QuantitySelector.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,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA+EH,QAAA,MAAM,gBAAgB,gDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"QuantitySelector.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/quantityselector/QuantitySelector.svelte.ts"],"names":[],"mappings":"AAME;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAsFH,QAAA,MAAM,gBAAgB,gDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/radio/Radio.js

@@ -1,4 +1,4 @@
-import{c as w,p as k,a as g,b as a,f as q,s as x,d as f,t as y,i as E,j as z,k as t,r as _,e as j,g as B,h as D}from"../../custom-element.js";import{r as F,s as u,d as R}from"../../attributes.js";import{c as S}from"../../custom-element-forward-events.js";var A=q('<div class="mc-radio svelte-1bwbq3n"><input type="radio"/> <label class="mc-radio__label svelte-1bwbq3n"> </label></div>');const C={hash:"svelte-1bwbq3n",code:`/**
+import{c as w,p as k,a as g,b as o,s as q,t as y,f as x,g as B,h as E,i as z,d as v,j as a,r as f,e as j}from"../../custom-element.js";import{a as D,s as F}from"../../attributes.js";import{c as R}from"../../custom-element-forward-events.js";var S=E('<div class="mc-radio svelte-1bwbq3n"><input/> <label class="mc-radio__label svelte-1bwbq3n"> </label></div>');const A={hash:"svelte-1bwbq3n",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-radio.svelte-1bwbq3n {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-radio__label.svelte-1bwbq3n {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-radio__input.svelte-1bwbq3n {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease 200ms;height:1.25rem;width:1.25rem;position:relative;}.mc-radio__input.svelte-1bwbq3n::before {border-radius:var(--border-radius-full, 100%);content:"";display:block;height:0.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:0.5rem;}.mc-radio__input.svelte-1bwbq3n:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-1bwbq3n: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-radio__input.svelte-1bwbq3n:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-1bwbq3n:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-1bwbq3n:checked, .mc-radio__input.svelte-1bwbq3n:disabled {border-color:transparent;}.mc-radio__input.svelte-1bwbq3n:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-1bwbq3n:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-1bwbq3n:disabled + .mc-radio__label:where(.svelte-1bwbq3n) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-1bwbq3n:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-1bwbq3n:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-1bwbq3n:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}`};function G(v,r){k(r,!0),g(v,C);let d=a(r,"id",7),i=a(r,"name",7),l=a(r,"label",7),s=a(r,"checked",15,!1),n=a(r,"disabled",7),c=a(r,"isinvalid",7);var h={get id(){return d()},set id(e){d(e),t()},get name(){return i()},set name(e){i(e),t()},get label(){return l()},set label(e){l(e),t()},get checked(){return s()},set checked(e=!1){s(e),t()},get disabled(){return n()},set disabled(e){n(e),t()},get isinvalid(){return c()},set isinvalid(e){c(e),t()}},b=A(),o=f(b);F(o);var m=x(o,2),p=f(m,!0);return _(m),_(b),y(()=>{u(o,"id",d()),j(o,1,B(["mc-radio__input",c()&&"is-invalid"]),"svelte-1bwbq3n"),u(o,"name",i()),o.disabled=n(),R(o,s()),u(m,"for",d()),D(p,l())}),E(v,b),z(h)}customElements.define("m-radio",w(G,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},id:{},name:{},label:{},disabled:{},isinvalid:{}},[],[],!0,S));
+ */.mc-radio.svelte-1bwbq3n {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-radio__label.svelte-1bwbq3n {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-radio__input.svelte-1bwbq3n {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease 200ms;height:1.25rem;width:1.25rem;position:relative;}.mc-radio__input.svelte-1bwbq3n::before {border-radius:var(--border-radius-full, 100%);content:"";display:block;height:0.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:0.5rem;}.mc-radio__input.svelte-1bwbq3n:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-1bwbq3n: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-radio__input.svelte-1bwbq3n:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-1bwbq3n:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-1bwbq3n:checked, .mc-radio__input.svelte-1bwbq3n:disabled {border-color:transparent;}.mc-radio__input.svelte-1bwbq3n:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-1bwbq3n:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-1bwbq3n:disabled + .mc-radio__label:where(.svelte-1bwbq3n) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-1bwbq3n:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-1bwbq3n:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-1bwbq3n:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}`};function C(u,r){k(r,!0),g(u,A);let t=o(r,"id",7),i=o(r,"name",7),d=o(r,"label",7),l=o(r,"checked",15,!1),s=o(r,"disabled",7),n=o(r,"isinvalid",7),h=z(r,["$$slots","$$events","$$legacy","$$host","id","name","label","checked","disabled","isinvalid"]);var _={get id(){return t()},set id(e){t(e),a()},get name(){return i()},set name(e){i(e),a()},get label(){return d()},set label(e){d(e),a()},get checked(){return l()},set checked(e=!1){l(e),a()},get disabled(){return s()},set disabled(e){s(e),a()},get isinvalid(){return n()},set isinvalid(e){n(e),a()}},c=S(),m=v(c);D(m,()=>({id:t(),type:"radio",class:["mc-radio__input",n()&&"is-invalid"],name:i(),disabled:s(),checked:l(),...h}),void 0,void 0,void 0,"svelte-1bwbq3n",!0);var b=q(m,2),p=v(b,!0);return f(b),f(c),y(()=>{F(b,"for",t()),j(p,d())}),x(u,c),B(_)}customElements.define("m-radio",w(C,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},id:{},name:{},label:{}},[],[],!0,R));
 //# sourceMappingURL=Radio.js.map

package/dist/components/radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-radio',\n    props: {\n      checked: { reflect: true, type: 'Boolean', attribute: 'checked' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the radio, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the radio element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The text label displayed next to the radio.\n     */\n    label?: string;\n    /**\n     * The radio's checked state.\n     */\n    checked?: boolean;\n    /**\n     * If `true`, applies an invalid state to the radio.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the radio, making it non-interactive.\n     */\n    disabled?: boolean;\n  }\n\n  let { id, name, label, checked = $bindable(false), disabled, isinvalid }: Props = $props();\n</script>\n\n<div class=\"mc-radio\">\n  <input\n    {id}\n    type=\"radio\"\n    class={['mc-radio__input', isinvalid && 'is-invalid']}\n    {name}\n    {disabled}\n    {checked}\n  />\n  <label for={id} class=\"mc-radio__label\">{label}</label>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/radio';\n</style>\n"],"names":["id","$.prop","$$props","name","label","checked","disabled","isinvalid","customElementForwardEvents"],"mappings":";;sxEAAA,oBA0CQA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAEE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EAAEG,mBAAoB,EAAK,EAAGC,EAAQL,EAAAC,EAAA,WAAA,CAAA,EAAEK,EAASN,EAAAC,EAAA,YAAA,CAAA,sLAA3B,GAAK,gNAOtC,kBAAmBK,KAAa,YAAY,CAAA,EAAA,gBAAA,oDAK1CP,GAAE,MAA2BI,GAAK,eAXhD,wJArCYI"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-radio',\n    props: {\n      checked: { reflect: true, type: 'Boolean', attribute: 'checked' },\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * A unique identifier for the radio, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the radio element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The text label displayed next to the radio.\n     */\n    label?: string;\n    /**\n     * The radio's checked state.\n     */\n    checked?: boolean;\n    /**\n     * If `true`, applies an invalid state to the radio.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the radio, making it non-interactive.\n     */\n    disabled?: boolean;\n  }\n\n  let {\n    id,\n    name,\n    label,\n    checked = $bindable(false),\n    disabled,\n    isinvalid,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<div class=\"mc-radio\">\n  <input\n    {id}\n    type=\"radio\"\n    class={['mc-radio__input', isinvalid && 'is-invalid']}\n    {name}\n    {disabled}\n    {checked}\n    {...attrs}\n  />\n  <label for={id} class=\"mc-radio__label\">{label}</label>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/radio';\n</style>\n"],"names":["id","$.prop","$$props","name","label","checked","disabled","isinvalid","attrs","$.rest_props","div","root","input","$.child","label_1","$.sibling","$.set_attribute","customElementForwardEvents"],"mappings":";;sxEAYA,oBAkCIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,mBAAoB,EAAK,EACzBC,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACNM,EAAAC,EAAAP,EAAA,qRAHiB,GAAK,wHAO5BQ,EAAGC,EAAA,EACDC,EAAAC,EADFH,CAAG,IACDE,WACEZ,EAAE,sBAEK,kBAAmBO,EAAS,GAAI,YAAY,OACnDJ,EAAI,WACJG,EAAQ,UACRD,EAAO,KACJG,8CAEL,IAAAM,EAAKC,EATLH,EAAA,CAAA,MASAE,EAAK,EAAA,WAALA,CAAK,IAVPJ,CAAG,SAUDM,EAAAF,QAAWd,GAAE,MAA2BI,GAAK,QAV/CM,CAAG,MAFI,qPA9CIO"}

package/dist/components/radio/Radio.stories.d.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Radio.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/radio/Radio.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.stories.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAgCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC"}
+{"version":3,"file":"Radio.stories.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,gBAAgB,CAAC;AAExB,QAAA,MAAM,IAAI,EAAE,IAgCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC"}

package/dist/components/radio/Radio.stories.js

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
+import './Radio.svelte';
 const meta = {
     title: 'Form Elements/Radio',
     component: 'm-radio',
@@ -17,9 +18,9 @@ const meta = {
         id=${ifDefined(args.id)}
         name=${ifDefined(args.name)}
         label=${ifDefined(args.label)}
-        checked=${ifDefined(args.checked)}
-        isinvalid=${ifDefined(args.isinvalid)}
-        disabled=${ifDefined(args.disabled)}
+        ?checked=${args.checked}
+        ?isinvalid=${args.isinvalid}
+        ?disabled=${args.disabled}
         @change=${(event) => {
             onChange(event);
         }}

package/dist/components/radio/Radio.svelte

@@ -3,6 +3,8 @@
     tag: 'm-radio',
     props: {
       checked: { reflect: true, type: 'Boolean', attribute: 'checked' },
+      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },
+      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
     },
     extend: customElementForwardEvents,
   }}
@@ -14,6 +16,7 @@
    * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.
    */
   interface Props {
+    [key: string]: any;
     /**
      * A unique identifier for the radio, used to associate the label with the form element.
      */
@@ -40,7 +43,15 @@
     disabled?: boolean;
   }
 
-  let { id, name, label, checked = $bindable(false), disabled, isinvalid }: Props = $props();
+  let {
+    id,
+    name,
+    label,
+    checked = $bindable(false),
+    disabled,
+    isinvalid,
+    ...attrs
+  }: Props = $props();
 </script>
 
 <div class="mc-radio">
@@ -51,6 +62,7 @@
     {name}
     {disabled}
     {checked}
+    {...attrs}
   />
   <label for={id} class="mc-radio__label">{label}</label>
 </div>

package/dist/components/radio/Radio.svelte.d.ts

@@ -2,6 +2,7 @@
  * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.
  */
 interface Props {
+    [key: string]: any;
     /**
      * A unique identifier for the radio, used to associate the label with the form element.
      */

package/dist/components/radio/Radio.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.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,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAyBH,QAAA,MAAM,KAAK,kDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmCH,QAAA,MAAM,KAAK,kDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}