@mozaic-ds/web-components 1.0.0 → 1.2.0

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 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:`/**
  * 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-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));
 //# 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":["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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"}

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]}
@@ -145,8 +133,8 @@
   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);
+  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;
@@ -166,7 +154,7 @@
 }
 .mc-pincode-input__control: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);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-pincode-input__control:disabled {
   background-color: var(--forms-color-background-disabled, #d9d9d9);
@@ -178,9 +166,9 @@
 }
 .mc-pincode-input__control.is-invalid {
   border-color: var(--forms-color-border-invalid, #ea302d);
-  box-shadow: 0 0 0 var(--border-s, 1px) 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: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);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
 }</style>

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"}

package/dist/components/quantityselector/QuantitySelector.js

@@ -1,5 +1,5 @@
-import{c as E,p as D,b as n,A,t as S,i as V,j as I,k as a,e as M,g as j,v as R,a as T,f as U,d as p,s as g,r as f,h as H}from"../../custom-element.js";import{s as u,a as G,r as W}from"../../attributes.js";import{c as X}from"../../input.js";import{c as Y}from"../../custom-element-forward-events.js";import"../../legacy.js";var Z=A('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1"></path></svg>');function L(v,e){D(e,!1);let o=n(e,"id",12,void 0),t=n(e,"style",12,void 0),r=n(e,"className",12,void 0),i=n(e,"fill",12,void 0),m=n(e,"size",12,"1.5rem");var b={get id(){return o()},set id(s){o(s),a()},get style(){return t()},set style(s){t(s),a()},get className(){return r()},set className(s){r(s),a()},get fill(){return i()},set fill(s){i(s),a()},get size(){return m()},set size(s){m(s),a()}},d=Z();return S(()=>{u(d,"id",o()),G(d,t()),M(d,0,j(r())),u(d,"fill",i())}),V(v,d),I(b)}customElements.define("less-24",E(L,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var $=A('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6z"></path></svg>');function O(v,e){D(e,!1);let o=n(e,"id",12,void 0),t=n(e,"style",12,void 0),r=n(e,"className",12,void 0),i=n(e,"fill",12,void 0),m=n(e,"size",12,"1.5rem");var b={get id(){return o()},set id(s){o(s),a()},get style(){return t()},set style(s){t(s),a()},get className(){return r()},set className(s){r(s),a()},get fill(){return i()},set fill(s){i(s),a()},get size(){return m()},set size(s){m(s),a()}},d=$();return S(()=>{u(d,"id",o()),G(d,t()),M(d,0,j(r())),u(d,"fill",i())}),V(v,d),I(b)}customElements.define("more-24",E(O,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));const ee=(v,e,o,t)=>{const r=Number(e());r>o()?e(o()):r<t()?e(t()):e(r)},te=(v,e,o,t)=>{const r=Number(e()),i=Number(o());r+i<=t()?e(r+i):e(t())},re=(v,e,o,t)=>{const r=Number(e()),i=Number(o());r-i>=t()?e(r-i):e(t())};var se=U('<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"><!></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 le={hash:"svelte-ptlds1",code:`/**
+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:`/**
  * 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-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;border-radius:var(--radius-s, 0.25rem);box-sizing:border-box;display:flex;gap:0.25rem;padding:0.1875rem;position:relative;}.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(--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;border-radius:var(--radius-s, 0.25rem);content:"";position:absolute;inset:-0.125rem var(--inset-x, 3rem);pointer-events:none;display:block;}.mc-quantity-selector.svelte-ptlds1: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-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-s, 1px) 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-s, 1px) var(--forms-color-border-invalid-hover, #c61112);}.mc-quantity-selector.svelte-ptlds1 :where(.svelte-ptlds1) {box-sizing:border-box;}`};function ne(v,e){D(e,!0),T(v,le);let o=n(e,"id",7),t=n(e,"value",15,1),r=n(e,"min",7,1),i=n(e,"max",7,100),m=n(e,"step",7,1),b=n(e,"size",7,"m"),d=n(e,"disabled",7),s=n(e,"isinvalid",7,!1),x=n(e,"name",7,"quantity-selector-input"),w=n(e,"readonly",7),q=n(e,"decrementlabel",7,"Decrement"),z=n(e,"incrementlabel",7,"Increment");var Q={get id(){return o()},set id(l){o(l),a()},get value(){return t()},set value(l=1){t(l),a()},get min(){return r()},set min(l=1){r(l),a()},get max(){return i()},set max(l=100){i(l),a()},get step(){return m()},set step(l=1){m(l),a()},get size(){return b()},set size(l="m"){b(l),a()},get disabled(){return d()},set disabled(l){d(l),a()},get isinvalid(){return s()},set isinvalid(l=!1){s(l),a()},get name(){return x()},set name(l="quantity-selector-input"){x(l),a()},get readonly(){return w()},set readonly(l){w(l),a()},get decrementlabel(){return q()},set decrementlabel(l="Decrement"){q(l),a()},get incrementlabel(){return z()},set incrementlabel(l="Increment"){z(l),a()}},_=se(),c=p(_);W(c),c.__input=[ee,t,i,r];var h=g(c,2);h.__click=[te,t,m,i];var k=p(h),C=p(k);O(C,{}),f(k);var B=g(k,2),J=p(B,!0);f(B),f(h);var y=g(h,2);y.__click=[re,t,m,r];var N=p(y),K=p(N);L(K,{}),f(N);var F=g(N,2),P=p(F,!0);return f(F),f(y),f(_),S(()=>{M(_,1,j(["mc-quantity-selector",`mc-quantity-selector--${b()}`,s()&&"is-invalid"]),"svelte-ptlds1"),u(c,"id",o()),u(c,"name",x()),u(c,"aria-valuemin",r()),u(c,"aria-valuemax",i()),u(c,"aria-valuenow",t()),u(c,"aria-invalid",`${s()}`),c.readOnly=w(),c.disabled=d(),u(h,"aria-controls",o()),h.disabled=t()===i()||d(),H(J,z()),u(y,"aria-controls",o()),y.disabled=t()===r()||d(),H(P,q())}),X(c,t),V(v,_),I(Q)}R(["input","click"]);customElements.define("m-quantityselector",E(ne,{id:{},value:{},min:{},max:{},step:{},size:{},disabled:{},isinvalid:{},name:{},readonly:{},decrementlabel:{},incrementlabel:{}},[],[],!0,Y));
+ */.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));
 //# sourceMappingURL=QuantitySelector.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"QuantitySelector.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/Less24/Less24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/More24/More24.svelte","../../../src/components/quantityselector/QuantitySelector.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'less-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=\"M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1\"/></svg>","<svelte:options customElement={{ tag: 'more-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=\"M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6z\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-quantityselector',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import Less24 from '@mozaic-ds/icons-svelte/svelte/Less24/Less24.svelte';\n  import More24 from '@mozaic-ds/icons-svelte/svelte/More24/More24.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    /**\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\n  class={[\n    'mc-quantity-selector',\n    `mc-quantity-selector--${size}`,\n    isinvalid && 'is-invalid',\n  ]}\n>\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      <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","style","className","fill","size","onValue","_","value","max","min","numericValue","onIncrement","__1","step","numericStep","onDecrement","__2","$.prop","$$props","disabled","isinvalid","name","readonly","decrementlabel","incrementlabel","customElementForwardEvents"],"mappings":"wiBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,gRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,6VCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,gRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,8FCyEQ,MAAAE,GAAO,CAAAC,EAAAC,EAAAC,EAAAC,IAAe,OACpBC,EAAe,OAAOH,GAAK,EAC7BG,EAAeF,IACjBD,EAAQC,EAAG,CAAA,EACFE,EAAeD,IACxBF,EAAQE,EAAG,CAAA,EAEXF,EAAQG,CAAY,CAExB,EAEMC,GAAW,CAAAC,EAAAL,EAAAM,EAAAL,IAAe,OACxBE,EAAe,OAAOH,GAAK,EAC3BO,EAAc,OAAOD,GAAI,EAE3BH,EAAeI,GAAeN,IAChCD,EAAQG,EAAeI,CAAW,EAElCP,EAAQC,EAAG,CAAA,CAEf,EAEMO,GAAW,CAAAC,EAAAT,EAAAM,EAAAJ,IAAe,OACxBC,EAAe,OAAOH,GAAK,EAC3BO,EAAc,OAAOD,GAAI,EAE3BH,EAAeI,GAAeL,IAChCF,EAAQG,EAAeI,CAAW,EAElCP,EAAQE,EAAG,CAAA,CAEf;;;osHA/GF,qBAkEIT,EAAEiB,EAAAC,EAAA,KAAA,CAAA,EACFX,iBAAkB,CAAC,EACnBE,cAAM,CAAC,EACPD,cAAM,GAAG,EACTK,eAAO,CAAC,EACRT,eAAO,GAAG,EACVe,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,oBAAY,EAAK,EACjBC,eAAO,yBAAyB,EAChCC,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,yBAAiB,WAAW,EAC5BC,yBAAiB,WAAW,sFAVV,EAAC,2CACb,EAAC,2CACD,IAAG,6CACF,EAAC,6CACD,IAAG,4GAEE,GAAK,6CACV,0BAAyB,sHAEf,YAAW,iEACX,YAAW,0CAiDnBnB,GAAOE,EAAAC,EAAAC,CAAA,0BAePE,GAAWJ,EAAAM,EAAAL,CAAA,0FAaXO,GAAWR,EAAAM,EAAAJ,CAAA,8FAtCpB,gDACyBL,EAAI,CAAA,GAC7BgB,KAAa,kFAUEX,GAAG,sBACHD,GAAG,sBACHD,GAAK,wBACHa,EAAS,CAAA,EAAA,oDAMXpB,GAAE,aAGPO,EAAK,IAAKC,EAAG,GAAIW,EAAQ,MAMQK,GAAc,sBAI1CxB,GAAE,aAGPO,EAAK,IAAKE,EAAG,GAAIU,EAAQ,MAMQI,GAAc,sBA/C7D,+MA7GYE","x_google_ignoreList":[0,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"}

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

@@ -8,5 +8,4 @@ export declare const Small: Story;
 export declare const Disabled: Story;
 export declare const ReadOnly: Story;
 export declare const Invalid: Story;
-export declare const readOnly: Story;
 //# sourceMappingURL=QuantitySelector.stories.d.ts.map

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;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,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;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"}

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

@@ -83,9 +83,3 @@ export const Invalid = {
         isinvalid: true,
     },
 };
-export const readOnly = {
-    args: {
-        id: 'readonlyId',
-        readonly: true,
-    },
-};

package/dist/components/quantityselector/QuantitySelector.svelte

@@ -7,8 +7,6 @@
 
 <script lang="ts">
   import { customElementForwardEvents } from '../../utils';
-  import Less24 from '@mozaic-ds/icons-svelte/svelte/Less24/Less24.svelte';
-  import More24 from '@mozaic-ds/icons-svelte/svelte/More24/More24.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.
    */
@@ -112,13 +110,7 @@
   };
 </script>
 
-<div
-  class={[
-    'mc-quantity-selector',
-    `mc-quantity-selector--${size}`,
-    isinvalid && 'is-invalid',
-  ]}
->
+<div class={['mc-quantity-selector', `mc-quantity-selector--${size}`, isinvalid && 'is-invalid']}>
   <input
     type="number"
     {id}
@@ -142,7 +134,7 @@
     onclick={onIncrement}
   >
     <span class="mc-quantity-selector__icon">
-      <More24 />
+      <more-24></more-24>
     </span>
     <span class="mc-quantity-selector__label">{incrementlabel}</span>
   </button>
@@ -155,7 +147,7 @@
     onclick={onDecrement}
   >
     <span class="mc-quantity-selector__icon">
-      <Less24 />
+      <less-24></less-24>
     </span>
     <span class="mc-quantity-selector__label">{decrementlabel}</span>
   </button>
@@ -166,19 +158,19 @@
  */
 .mc-quantity-selector {
   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);
+  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;
-  border-radius: var(--radius-s, 0.25rem);
   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 {
   background-color: transparent;
@@ -225,7 +217,7 @@
   padding: 0;
   height: 2.5rem;
   width: 2.5rem;
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   color: var(--quantity-selector-color-button-text-default, #242938);
   display: inline-flex;
   align-items: center;
@@ -259,16 +251,16 @@
 }
 .mc-quantity-selector::after {
   transition: box-shadow 200ms ease;
-  border-radius: var(--radius-s, 0.25rem);
   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: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);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-quantity-selector:has(input:disabled) {
   background-color: var(--forms-color-background-disabled, #d9d9d9);
@@ -308,11 +300,11 @@
 }
 .mc-quantity-selector.is-invalid {
   border-color: var(--forms-color-border-invalid, #ea302d);
-  box-shadow: 0 0 0 var(--border-s, 1px) 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: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);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
 }
 .mc-quantity-selector * {
   box-sizing: border-box;

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":"AAOE;;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;AAqFH,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":"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"}

package/dist/components/radio/Radio.js

@@ -1,4 +1,4 @@
-import{c as k,p as w,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,c 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 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:`/**
  * 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-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(--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){w(r,!0),g(v,C);let i=a(r,"id",7),d=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 i()},set id(e){i(e),t()},get name(){return d()},set name(e){d(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",i()),j(o,1,B(["mc-radio__input",c()&&"is-invalid"]),"svelte-1bwbq3n"),u(o,"name",d()),o.disabled=n(),R(o,s()),u(m,"for",i()),D(p,l())}),E(v,b),z(h)}customElements.define("m-radio",k(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 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));
 //# 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 {\n    id,\n    name,\n    label,\n    checked = $bindable(false),\n    disabled,\n    isinvalid,\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  />\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":";;ywEAAA,oBA2CIA,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,sLAFW,GAAK,gNAUjB,kBAAmBK,KAAa,YAAY,CAAA,EAAA,gBAAA,oDAK1CP,GAAE,MAA2BI,GAAK,eAXhD,wJA5CYI"}
+{"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"}

package/dist/components/radio/Radio.svelte

@@ -40,14 +40,7 @@
     disabled?: boolean;
   }
 
-  let {
-    id,
-    name,
-    label,
-    checked = $bindable(false),
-    disabled,
-    isinvalid,
-  }: Props = $props();
+  let { id, name, label, checked = $bindable(false), disabled, isinvalid }: Props = $props();
 </script>
 
 <div class="mc-radio">
@@ -84,7 +77,7 @@
   flex-shrink: 0;
   transition: box-shadow 200ms ease;
   background-color: var(--forms-color-background-default, #ffffff);
-  border: var(--border-m, 0.125rem) solid var(--forms-color-border-default, #666666);
+  border: var(--border-width-m, 0.125rem) solid var(--forms-color-border-default, #666666);
   border-radius: 100%;
   transition: all ease 200ms;
   height: 1.25rem;
@@ -92,7 +85,7 @@
   position: relative;
 }
 .mc-radio__input::before {
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   content: "";
   display: block;
   height: 0.5rem;

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;AAgCH,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;;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"}

package/dist/components/radiogroup/RadioGroup.js

@@ -1,8 +1,8 @@
-import{c as D,p as F,a as G,b as i,f as E,t as g,i as k,j as R,k as t,r as _,e as w,g as x,d as y,s as S,m as o,h as q}from"../../custom-element.js";import{e as B,i as C}from"../../each.js";import{r as H,s as b}from"../../attributes.js";import{b as I}from"../../input.js";import{c as J}from"../../custom-element-forward-events.js";var K=E('<div class="mc-radio mc-field__item svelte-clvmul"><input type="radio"/> <label class="mc-radio__label svelte-clvmul"> </label></div>'),L=E("<div></div>");const M={hash:"svelte-clvmul",code:`/**
+import{c as D,p as F,a as G,b as i,f as E,t as g,i as k,j as R,k as t,r as _,e as w,g as x,d as y,s as S,m as o,h as q}from"../../custom-element.js";import{e as B}from"../../each.js";import{r as C,s as b}from"../../attributes.js";import{b as H}from"../../input.js";import{c as I}from"../../custom-element-forward-events.js";var J=E('<div class="mc-radio mc-field__item svelte-clvmul"><input type="radio"/> <label class="mc-radio__label svelte-clvmul"> </label></div>'),K=E("<div></div>");const L={hash:"svelte-clvmul",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-radio.svelte-clvmul {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-radio__label.svelte-clvmul {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-clvmul {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-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-clvmul::before {border-radius:var(--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-clvmul:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-clvmul: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-clvmul:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-clvmul:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-clvmul:checked, .mc-radio__input.svelte-clvmul:disabled {border-color:transparent;}.mc-radio__input.svelte-clvmul:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-clvmul:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-clvmul:disabled + .mc-radio__label:where(.svelte-clvmul) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-clvmul:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-clvmul:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-clvmul:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
+ */.mc-radio.svelte-clvmul {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-radio__label.svelte-clvmul {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-clvmul {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-clvmul::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-clvmul:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-clvmul: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-clvmul:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-clvmul:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-clvmul:checked, .mc-radio__input.svelte-clvmul:disabled {border-color:transparent;}.mc-radio__input.svelte-clvmul:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-clvmul:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-clvmul:disabled + .mc-radio__label:where(.svelte-clvmul) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-clvmul:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-clvmul:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-clvmul:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
 
 /* stylelint-disable string-no-newline */.mc-field__content.svelte-clvmul {margin-top:0.5rem;}
 
-/* stylelint-enable string-no-newline */.mc-field__content.svelte-clvmul:where(.mc-field__content--inline:where(.svelte-clvmul)) {display:flex;flex-flow:row wrap;gap:0.25rem 1rem;}`};function N(p,a){F(a,!0),G(p,M);const z=[];let s=i(a,"value",15),c=i(a,"name",7),d=i(a,"options",7),m=i(a,"inline",7),v=i(a,"isinvalid",7);var j={get value(){return s()},set value(e){s(e),t()},get name(){return c()},set name(e){c(e),t()},get options(){return d()},set options(e){d(e),t()},get inline(){return m()},set inline(e){m(e),t()},get isinvalid(){return v()},set isinvalid(e){v(e),t()}},n=L();return B(n,21,d,C,(e,l)=>{var u=K(),r=y(u);H(r);var h,f=S(r,2),A=y(f,!0);_(f),_(u),g(()=>{w(r,1,x(["mc-radio__input",v()&&"is-invalid"]),"svelte-clvmul"),b(r,"id",o(l).id),b(r,"name",c()),r.disabled=o(l).disabled,h!==(h=o(l).value)&&(r.value=(r.__value=o(l).value)??""),b(f,"for",o(l).id),q(A,o(l).label)}),I(z,[],r,()=>(o(l).value,s()),s),k(e,u)}),_(n),g(()=>w(n,1,x(["mc-field__content",m()&&"mc-field__content--inline"]),"svelte-clvmul")),k(p,n),R(j)}customElements.define("m-radio-group",D(N,{options:{attribute:"options",type:"Array"},value:{},name:{},inline:{},isinvalid:{}},[],[],!0,J));
+/* stylelint-enable string-no-newline */.mc-field__content.svelte-clvmul:where(.mc-field__content--inline:where(.svelte-clvmul)) {display:flex;flex-flow:row wrap;gap:0.25rem 1rem;}`};function M(p,a){F(a,!0),G(p,L);const z=[];let s=i(a,"value",15),c=i(a,"name",7),d=i(a,"options",7),m=i(a,"inline",7),v=i(a,"isinvalid",7);var j={get value(){return s()},set value(e){s(e),t()},get name(){return c()},set name(e){c(e),t()},get options(){return d()},set options(e){d(e),t()},get inline(){return m()},set inline(e){m(e),t()},get isinvalid(){return v()},set isinvalid(e){v(e),t()}},n=K();return B(n,21,d,e=>e.id,(e,l)=>{var u=J(),r=y(u);C(r);var h,f=S(r,2),A=y(f,!0);_(f),_(u),g(()=>{w(r,1,x(["mc-radio__input",v()&&"is-invalid"]),"svelte-clvmul"),b(r,"id",o(l).id),b(r,"name",c()),r.disabled=o(l).disabled,h!==(h=o(l).value)&&(r.value=(r.__value=o(l).value)??""),b(f,"for",o(l).id),q(A,o(l).label)}),H(z,[],r,()=>(o(l).value,s()),s),k(e,u)}),_(n),g(()=>w(n,1,x(["mc-field__content",m()&&"mc-field__content--inline"]),"svelte-clvmul")),k(p,n),R(j)}customElements.define("m-radio-group",D(M,{options:{attribute:"options",type:"Array"},value:{},name:{},inline:{},isinvalid:{}},[],[],!0,I));
 //# sourceMappingURL=RadioGroup.js.map

package/dist/components/radiogroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radiogroup/RadioGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-radio-group',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\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     * The name attribute for the radio element, typically used for form submission.\n     */\n    name: string;\n    /**\n     * The current value of the radio group.\n     */\n    value?: string;\n    /**\n     * list of properties of each radio button of the radio group\n     */\n    options: Array<{\n      id: string;\n      label: string;\n      value: string;\n      disabled?: boolean;\n    }>;\n    /**\n     * If `true`, applies an invalid state to the radio group.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, make the form element of the group inline.\n     */\n    inline?: boolean;\n  }\n\n  let {\n    value = $bindable(),\n    name,\n    options,\n    inline,\n    isinvalid,\n  }: Props = $props();\n</script>\n\n<div class={['mc-field__content', inline && 'mc-field__content--inline']}>\n  {#each options as option}\n    <div class=\"mc-radio mc-field__item\">\n      <input\n        type=\"radio\"\n        class={['mc-radio__input', isinvalid && 'is-invalid']}\n        id={option.id}\n        {name}\n        bind:group={value}\n        value={option.value}\n        disabled={option.disabled}\n      />\n      <label for={option.id} class=\"mc-radio__label\">{option.label}</label>\n    </div>\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/radio';\n  @use '@mozaic-ds/styles/components/field';\n\n  .mc-field__content:where(.mc-field__content--inline) {\n    display: flex;\n    flex-flow: row wrap;\n    gap: 0.25rem 1rem;\n  }\n</style>\n"],"names":["value","$.prop","$$props","name","options","inline","isinvalid","$.each","div","option","$.set_attribute","input","$.get","input_value","label","$.set_text","text","customElementForwardEvents"],"mappings":";;;;;;sMAAA,+BA4CIA,EAAKC,EAAAC,EAAA,QAAA,EAAA,EACLC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAOH,EAAAC,EAAA,UAAA,CAAA,EACPG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAASL,EAAAC,EAAA,YAAA,CAAA,uQAKJK,OAAAA,EAAAC,EAAA,GAAAJ,OAAWK,IAAM,0EAIV,kBAAmBH,KAAa,YAAY,CAAA,EAAA,eAAA,EAChDI,EAAAC,EAAA,KAAAC,EAAAH,CAAM,EAAC,EAAE,kBAIHE,EAAA,SAAAC,EAAAH,CAAM,EAAC,SADVI,KAAAA,EAAAD,EAAAH,CAAM,EAAC,SAAPE,EAAA,OAAAA,EAAA,QAAAC,EAAAH,CAAM,EAAC,QAAK,IAGTC,EAAAI,EAAA,MAAAF,EAAAH,CAAM,EAAC,EAAE,EAA2BM,EAAAC,EAAAJ,EAAAH,CAAM,EAAC,KAAK,kBAHnDG,EAAAH,CAAM,EAAC,MADFT,EAAK,GAALA,gCARP,oBAAqBK,EAAM,GAAI,2BAA2B,CAAA,EAAA,eAAA,CAAA,aAFvE,yIA5CYY"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radiogroup/RadioGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-radio-group',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\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     * The name attribute for the radio element, typically used for form submission.\n     */\n    name: string;\n    /**\n     * The current value of the radio group.\n     */\n    value?: string;\n    /**\n     * list of properties of each radio button of the radio group\n     */\n    options: Array<{\n      id: string;\n      label: string;\n      value: string;\n      disabled?: boolean;\n    }>;\n    /**\n     * If `true`, applies an invalid state to the radio group.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, make the form element of the group inline.\n     */\n    inline?: boolean;\n  }\n\n  let { value = $bindable(), name, options, inline, isinvalid }: Props = $props();\n</script>\n\n<div class={['mc-field__content', inline && 'mc-field__content--inline']}>\n  {#each options as option (option.id)}\n    <div class=\"mc-radio mc-field__item\">\n      <input\n        type=\"radio\"\n        class={['mc-radio__input', isinvalid && 'is-invalid']}\n        id={option.id}\n        {name}\n        bind:group={value}\n        value={option.value}\n        disabled={option.disabled}\n      />\n      <label for={option.id} class=\"mc-radio__label\">{option.label}</label>\n    </div>\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/radio';\n  @use '@mozaic-ds/styles/components/field';\n\n  .mc-field__content:where(.mc-field__content--inline) {\n    display: flex;\n    flex-flow: row wrap;\n    gap: 0.25rem 1rem;\n  }\n</style>\n"],"names":["value","$.prop","$$props","name","options","inline","isinvalid","$.each","div","option","$.set_attribute","input","$.get","input_value","label","$.set_text","text","customElementForwardEvents"],"mappings":";;;;;;sMAAA,+BA2CQA,EAAKC,EAAAC,EAAA,QAAA,EAAA,EAAgBC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAEE,EAAOH,EAAAC,EAAA,UAAA,CAAA,EAAEG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EAAEI,EAASL,EAAAC,EAAA,YAAA,CAAA,uQAIpDK,OAAAA,EAAAC,EAAA,GAAAJ,EAAWK,GAAQA,EAAO,MAAfA,IAAM,0EAIV,kBAAmBH,KAAa,YAAY,CAAA,EAAA,eAAA,EAChDI,EAAAC,EAAA,KAAAC,EAAAH,CAAM,EAAC,EAAE,kBAIHE,EAAA,SAAAC,EAAAH,CAAM,EAAC,SADVI,KAAAA,EAAAD,EAAAH,CAAM,EAAC,SAAPE,EAAA,OAAAA,EAAA,QAAAC,EAAAH,CAAM,EAAC,QAAK,IAGTC,EAAAI,EAAA,MAAAF,EAAAH,CAAM,EAAC,EAAE,EAA2BM,EAAAC,EAAAJ,EAAAH,CAAM,EAAC,KAAK,kBAHnDG,EAAAH,CAAM,EAAC,MADFT,EAAK,GAALA,gCARP,oBAAqBK,EAAM,GAAI,2BAA2B,CAAA,EAAA,eAAA,CAAA,aAFvE,yIAtCYY"}

package/dist/components/radiogroup/RadioGroup.svelte

@@ -41,17 +41,11 @@
     inline?: boolean;
   }
 
-  let {
-    value = $bindable(),
-    name,
-    options,
-    inline,
-    isinvalid,
-  }: Props = $props();
+  let { value = $bindable(), name, options, inline, isinvalid }: Props = $props();
 </script>
 
 <div class={['mc-field__content', inline && 'mc-field__content--inline']}>
-  {#each options as option}
+  {#each options as option (option.id)}
     <div class="mc-radio mc-field__item">
       <input
         type="radio"
@@ -89,7 +83,7 @@
   flex-shrink: 0;
   transition: box-shadow 200ms ease;
   background-color: var(--forms-color-background-default, #ffffff);
-  border: var(--border-m, 0.125rem) solid var(--forms-color-border-default, #666666);
+  border: var(--border-width-m, 0.125rem) solid var(--forms-color-border-default, #666666);
   border-radius: 100%;
   transition: all ease 200ms;
   height: 1.25rem;
@@ -97,7 +91,7 @@
   position: relative;
 }
 .mc-radio__input::before {
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   content: "";
   display: block;
   height: 0.5rem;

package/dist/components/radiogroup/RadioGroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/radiogroup/RadioGroup.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAmCH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/radiogroup/RadioGroup.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA6BH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}