@mozaic-ds/web-components 1.3.0 → 1.4.0

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

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumber.stories.d.ts","sourceRoot":"","sources":["../../../src/components/phonenumber/PhoneNumber.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,sBAAsB,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAmDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAWpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAY9B,CAAC"}
+{"version":3,"file":"PhoneNumber.stories.d.ts","sourceRoot":"","sources":["../../../src/components/phonenumber/PhoneNumber.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAMrE,OAAO,sBAAsB,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAuDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAWpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAY9B,CAAC"}

package/dist/components/phonenumber/PhoneNumber.stories.js

@@ -1,6 +1,8 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
+import {} from 'libphonenumber-js';
+import metadata from 'libphonenumber-js/metadata.min.json';
 import './PhoneNumber.svelte';
 const meta = {
     title: 'Form Elements/Phone Number',
@@ -10,6 +12,10 @@ const meta = {
             control: 'inline-radio',
             options: ['s', 'm'],
         },
+        defaultcountry: {
+            control: 'select',
+            options: Object.keys(metadata.countries),
+        },
         valid: {
             control: false,
         },
@@ -27,11 +33,11 @@ const meta = {
         defaultcountry=${ifDefined(args.defaultcountry)}
         placeholder=${ifDefined(args.placeholder)}
         size=${ifDefined(args.size)}
-        isinvalid=${ifDefined(args.isinvalid)}
-        disabled=${ifDefined(args.disabled)}
+        ?isinvalid=${args.isinvalid}
+        ?disabled=${args.disabled}
         readonly=${ifDefined(args.readonly)}
-        .prefix=${args.prefix}
-        .flag=${ifDefined(args.flag)}
+        ?prefix=${args.prefix}
+        ?flag=${args.flag}
         locale=${ifDefined(args.locale)}
         .countrycodes=${ifDefined(args.countrycodes)}
         @input=${(event) => {

package/dist/components/phonenumber/PhoneNumber.svelte

@@ -1,6 +1,13 @@
 <svelte:options
   customElement={{
     tag: 'm-phone-number',
+    props: {
+      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },
+      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
+      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },
+      prefix: { reflect: true, type: 'Boolean', attribute: 'prefix' },
+      flag: { reflect: true, type: 'Boolean', attribute: 'flag' },
+    },
     extend: customElementForwardEvents,
   }}
 />
@@ -16,13 +23,14 @@
     type CountryCode,
   } from 'libphonenumber-js';
   import examples from 'libphonenumber-js/mobile/examples';
-  import ChevronDown20 from '@mozaic-ds/icons-svelte/svelte/ChevronDown20/ChevronDown20.svelte';
+  import { ChevronDown20 } from '@mozaic-ds/icons-svelte';
   /**
    * A phone number input is a specialized input field designed to capture and validate phone numbers, ensuring correct formatting based on country-specific dialing codes. It often includes a country selector that automatically adjusts the international dialing code. This component improves user experience by standardizing phone number entries, reducing errors, and facilitating global compatibility. It is commonly used in registration forms, authentication flows, and contact information fields.
    *
    * @event valid {CustomEvent<boolean>} - Emits the validity of the value when the PhoneNumber changes.
    */
   interface Props {
+    [key: string]: any;
     /**
      * A unique identifier for the phone number input element, used to associate the label with the form element.
      */
@@ -91,13 +99,14 @@
   let element: HTMLElement;
 
   let phoneNumber: string = $state(value);
-  let selectedCountry: CountryCode = $state(defaultcountry);
+  let selectedCountry: CountryCode = $state('FR' as CountryCode);
 
   $effect(() => {
+    selectedCountry = defaultcountry;
     value = phoneNumber;
   });
 
-  const countries: CountryCode[] = countrycodes || getCountries();
+  const countries: CountryCode[] = $derived(countrycodes || getCountries());
 
   const dynamicPlaceholder = () => {
     if (placeholder) return placeholder;
@@ -194,7 +203,7 @@
       </div>
 
       <span class="mc-phone-number-input__chevron">
-        <ChevronDown20 aria-hidden="true" />
+        <ChevronDown20 />
       </span>
     </div>
   </div>

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

@@ -5,6 +5,7 @@ import { type CountryCode } from 'libphonenumber-js';
  * @event valid {CustomEvent<boolean>} - Emits the validity of the value when the PhoneNumber changes.
  */
 interface Props {
+    [key: string]: any;
     /**
      * A unique identifier for the phone number input element, used to associate the label with the form element.
      */

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

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

package/dist/components/pincode/Pincode.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Pincode.js","sources":["../../../src/components/pincode/Pincode.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-pincode' }} />\n\n<script lang=\"ts\">\n  /**\n   * A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.\n   *\n   * @event input {CustomEvent<{ value: string }>} - Emits when the pincode value changes.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pincode element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The number of input displayed in the pincode element.\n     */\n    length?: 4 | 5 | 6;\n    /**\n     * The name attribute for the pincode element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the pincode field.\n     */\n    value?: string | number;\n    /**\n     * If `true`, applies an invalid state to the pincode.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the pincode, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the pincode is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let { id, length = 6, name, value, isinvalid, disabled, readonly }: Props = $props();\n\n  const L = $derived(typeof length === 'string' ? parseInt(length, 10) || 6 : length);\n\n  let otp = $state<string[]>(Array(L).fill(''));\n  let inputs = $state<HTMLInputElement[]>([]);\n  let element: HTMLElement;\n\n  $effect(() => {\n    const incoming = String(value ?? '');\n    otp = Array.from({ length: L }, (_, i) => incoming[i] ?? '');\n  });\n\n  const focusInput = (i: number) => {\n    queueMicrotask(() => inputs?.[i]?.focus());\n  };\n\n  const emitInput = () => {\n    const joined = otp.join('');\n    const event = new CustomEvent('input', {\n      detail: { value: joined },\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n\n  const onInput = (e: Event, index: number) => {\n    const el = e.target as HTMLInputElement;\n    const digit = el.value.replace(/\\D/g, '').slice(0, 1);\n    otp[index] = digit;\n    emitInput();\n    if (digit && index + 1 < L) focusInput(index + 1);\n  };\n\n  const onKeyDown = (e: KeyboardEvent, index: number) => {\n    if (e.key === 'ArrowLeft' && index > 0) {\n      e.preventDefault();\n      focusInput(index - 1);\n    } else if (e.key === 'ArrowRight' && index < L - 1) {\n      e.preventDefault();\n      focusInput(index + 1);\n    } else if (e.key === 'Backspace' && otp[index] === '' && index > 0) {\n      otp[index - 1] = '';\n      emitInput();\n      focusInput(index - 1);\n    }\n  };\n\n  const onPaste = (e: ClipboardEvent) => {\n    e.preventDefault();\n    const pasted = (e.clipboardData?.getData('text') ?? '').replace(/\\D/g, '').slice(0, L);\n    otp = Array.from({ length: L }, (_, i) => pasted[i] ?? '');\n    emitInput();\n    focusInput(Math.min(pasted.length, L - 1));\n  };\n</script>\n\n<div class=\"mc-pincode-input\" onpaste={onPaste} bind:this={element}>\n  {#each [...Array(L).keys()] as i (i)}\n    <input\n      id={`pincodeItem${i}`}\n      bind:this={inputs[i]}\n      class={['mc-pincode-input__control', isinvalid && 'is-invalid']}\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"1\"\n      pattern=\"\\d*\"\n      autocomplete=\"one-time-code\"\n      name={name ?? `pincode-${id}`}\n      {disabled}\n      {readonly}\n      value={otp[i]}\n      oninput={(e) => onInput(e, i)}\n      onkeydown={(e) => onKeyDown(e as KeyboardEvent, i)}\n    />\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pincode-input';\n</style>\n"],"names":["id","$.prop","$$props","length","name","value","isinvalid","disabled","readonly","L","$.derived","otp","$.get","inputs","$.state","$.proxy","element","$.user_effect","incoming","$.set","_","i","focusInput","emitInput","joined","event","onInput","index","digit","onKeyDown","onPaste","pasted","$$anchor","input","e","$$value","$.set_attribute","$.set_value","$.bind_this","div"],"mappings":"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"}
+{"version":3,"file":"Pincode.js","sources":["../../../src/components/pincode/Pincode.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-pincode',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  /**\n   * A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.\n   *\n   * @event input {CustomEvent<{ value: string }>} - Emits when the pincode value changes.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pincode element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The number of input displayed in the pincode element.\n     */\n    length?: 4 | 5 | 6;\n    /**\n     * The name attribute for the pincode element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the pincode field.\n     */\n    value?: string | number;\n    /**\n     * If `true`, applies an invalid state to the pincode.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the pincode, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the pincode is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let { id, length = 6, name, value, isinvalid, disabled, readonly }: Props = $props();\n\n  const L = $derived(typeof length === 'string' ? parseInt(length, 10) || 6 : length);\n\n  let otp = $state<string[]>([]);\n  let inputs = $state<HTMLInputElement[]>([]);\n  let element: HTMLElement;\n\n  $effect(() => {\n    const incoming = String(value ?? '');\n    otp = Array(L).fill('');\n    otp = Array.from({ length: L }, (_, i) => incoming[i] ?? '');\n  });\n\n  const focusInput = (i: number) => {\n    queueMicrotask(() => inputs?.[i]?.focus());\n  };\n\n  const emitInput = () => {\n    const joined = otp.join('');\n    const event = new CustomEvent('input', {\n      detail: { value: joined },\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n\n  const onInput = (e: Event, index: number) => {\n    const el = e.target as HTMLInputElement;\n    const digit = el.value.replace(/\\D/g, '').slice(0, 1);\n    otp[index] = digit;\n    emitInput();\n    if (digit && index + 1 < L) focusInput(index + 1);\n  };\n\n  const onKeyDown = (e: KeyboardEvent, index: number) => {\n    if (e.key === 'ArrowLeft' && index > 0) {\n      e.preventDefault();\n      focusInput(index - 1);\n    } else if (e.key === 'ArrowRight' && index < L - 1) {\n      e.preventDefault();\n      focusInput(index + 1);\n    } else if (e.key === 'Backspace' && otp[index] === '' && index > 0) {\n      otp[index - 1] = '';\n      emitInput();\n      focusInput(index - 1);\n    }\n  };\n\n  const onPaste = (e: ClipboardEvent) => {\n    e.preventDefault();\n    const pasted = (e.clipboardData?.getData('text') ?? '').replace(/\\D/g, '').slice(0, L);\n    otp = Array.from({ length: L }, (_, i) => pasted[i] ?? '');\n    emitInput();\n    focusInput(Math.min(pasted.length, L - 1));\n  };\n</script>\n\n<div class=\"mc-pincode-input\" onpaste={onPaste} bind:this={element}>\n  {#each [...Array(L).keys()] as i (i)}\n    <input\n      id={`pincodeItem${i}`}\n      bind:this={inputs[i]}\n      class={['mc-pincode-input__control', isinvalid && 'is-invalid']}\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"1\"\n      pattern=\"\\d*\"\n      autocomplete=\"one-time-code\"\n      name={name ?? `pincode-${id}`}\n      {disabled}\n      {readonly}\n      value={otp[i]}\n      oninput={(e) => onInput(e, i)}\n      onkeydown={(e) => onKeyDown(e as KeyboardEvent, i)}\n    />\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pincode-input';\n</style>\n"],"names":["id","$.prop","$$props","length","name","value","isinvalid","disabled","readonly","L","$.derived","otp","$.state","$.proxy","inputs","element","$.user_effect","incoming","$.set","$.get","_","i","focusInput","emitInput","joined","event","onInput","index","digit","onKeyDown","onPaste","pasted","div","root","$$anchor","input","root_1","$.remove_input_defaults","e","$.bind_this","$$value","$.set_attribute","$.set_class","$.clsx","$.append","$.event"],"mappings":"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"}

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

@@ -31,9 +31,9 @@ const meta = {
         name=${ifDefined(args.name)}
         value=${ifDefined(args.value)}
         length=${ifDefined(args.length)}
-        isinvalid=${ifDefined(args.isinvalid)}
-        disabled=${ifDefined(args.disabled)}
-        readonly=${ifDefined(args.readonly)}
+        ?isinvalid=${args.isinvalid}
+        ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         @input=${(event) => {
             onInput(event);
         }}

package/dist/components/pincode/Pincode.svelte

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

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

@@ -1 +1 @@
-{"version":3,"file":"Pincode.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/pincode/Pincode.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0EH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Pincode.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/pincode/Pincode.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkFH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/quantityselector/QuantitySelector.js

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

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

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

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

@@ -27,13 +27,13 @@ const meta = {
         id=${ifDefined(args.id)}
         name=${ifDefined(args.name)}
         value=${ifDefined(args.value)}
-        isinvalid=${ifDefined(args.isinvalid)}
-        disabled=${ifDefined(args.disabled)}
+        ?isinvalid=${args.isinvalid}
+        ?disabled=${args.disabled}
         size=${ifDefined(args.size)}
         min=${ifDefined(args.min)}
         max=${ifDefined(args.max)}
         step=${ifDefined(args.step)}
-        readonly=${ifDefined(args.readonly)}
+        ?readonly=${args.readonly}
         incrementlabel=${ifDefined(args.incrementlabel)}
         decrementlabel=${ifDefined(args.decrementlabel)}
         @input=${(event) => {

package/dist/components/quantityselector/QuantitySelector.svelte

@@ -1,18 +1,23 @@
 <svelte:options
   customElement={{
     tag: 'm-quantityselector',
+    props: {
+      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },
+      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
+      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },
+    },
     extend: customElementForwardEvents,
   }}
 />
 
 <script lang="ts">
   import { customElementForwardEvents } from '../../utils';
-  import More24 from '@mozaic-ds/icons-svelte/svelte/More24/More24.svelte';
-  import Less24 from '@mozaic-ds/icons-svelte/svelte/Less24/Less24.svelte';
+  import { More24, Less24 } from '@mozaic-ds/icons-svelte';
   /**
    * A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.
    */
   interface Props {
+    [key: string]: any;
     /**
      * A unique identifier for the quantity selector element, used to associate the label with the form element.
      */

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

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

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

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

package/dist/components/radio/Radio.js

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

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

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

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

@@ -18,9 +18,9 @@ const meta = {
         id=${ifDefined(args.id)}
         name=${ifDefined(args.name)}
         label=${ifDefined(args.label)}
-        checked=${ifDefined(args.checked)}
-        isinvalid=${ifDefined(args.isinvalid)}
-        disabled=${ifDefined(args.disabled)}
+        ?checked=${args.checked}
+        ?isinvalid=${args.isinvalid}
+        ?disabled=${args.disabled}
         @change=${(event) => {
             onChange(event);
         }}

package/dist/components/radio/Radio.svelte

@@ -3,6 +3,8 @@
     tag: 'm-radio',
     props: {
       checked: { reflect: true, type: 'Boolean', attribute: 'checked' },
+      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },
+      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
     },
     extend: customElementForwardEvents,
   }}
@@ -14,6 +16,7 @@
    * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.
    */
   interface Props {
+    [key: string]: any;
     /**
      * A unique identifier for the radio, used to associate the label with the form element.
      */

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

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

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

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

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,h as k,i as R,j as t,e as _,l as w,m as x,d as y,s as S,n as o,g 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:`/**
+import{c as q,p as A,a as D,b as a,t as g,f as k,g as F,h as E,j as i,r as _,n as w,o as y,d as x,s as G,q as o,e as R}from"../../custom-element.js";import{e as S}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-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 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));
+/* 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,t){A(t,!0),D(p,L);const z=[];let s=a(t,"value",15),c=a(t,"name",7),d=a(t,"options",7),u=a(t,"inline",7),v=a(t,"isinvalid",7);var B={get value(){return s()},set value(e){s(e),i()},get name(){return c()},set name(e){c(e),i()},get options(){return d()},set options(e){d(e),i()},get inline(){return u()},set inline(e){u(e),i()},get isinvalid(){return v()},set isinvalid(e){v(e),i()}},n=K();return S(n,21,d,e=>e.id,(e,l)=>{var m=J(),r=x(m);C(r);var h,f=G(r,2),j=x(f,!0);_(f),_(m),g(()=>{w(r,1,y(["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),R(j,o(l).label)}),H(z,[],r,()=>(o(l).value,s()),s),k(e,m)}),_(n),g(()=>w(n,1,y(["mc-field__content",u()&&"mc-field__content--inline"]),"svelte-clvmul")),k(p,n),F(B)}customElements.define("m-radio-group",q(M,{options:{attribute:"options",type:"Array"},isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},inline:{attribute:"inline",reflect:!0,type:"Boolean"},value:{},name:{}},[],[],!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 { 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"}
+{"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      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      inline: { reflect: true, type: 'Boolean', attribute: 'inline' },\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","div","root","option","$$anchor","div_1","root_1","input","$.child","$.remove_input_defaults","label","$.sibling","$.set_class","$.clsx","$.get","$.set_attribute","input_value","$.set_text","text","$.template_effect","customElementForwardEvents"],"mappings":";;;;;;sMAYA,+BAiCQA,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,iQAG5DK,EAAGC,EAAA,WAAHD,EAAG,GACKH,EAAWK,GAAQA,EAAO,GAAE,CAAAC,EAAjBD,IAAM,KACrBE,EAAGC,EAAA,EACDC,EAAAC,EADFH,CAAG,EACDI,EAAAF,CAAA,QASAG,EAAKC,EATLJ,EAAA,CAAA,MASAG,EAAK,EAAA,IAALA,CAAK,IAVPL,CAAG,SACDO,EAAAL,EAAA,EAAAM,EAAA,CAES,kBAAmBb,KAAa,YAAY,CAAA,EAAA,eAAA,IAFrDO,EAAA,KAAAO,EAGKX,CAAM,EAAC,EAAE,EAHdY,EAAAR,EAAA,OAIEV,GAAI,EAJNU,EAAA,SAAAO,EAOWX,CAAM,EAAC,SADVa,KAAAA,EAAAF,EAAAX,CAAM,EAAC,SANfI,EAAA,OAAAA,EAAA,QAAAO,EAMQX,CAAM,EAAC,QAAK,MAGpBO,EAAK,MAAAI,EAAMX,CAAM,EAAC,EAAE,EAA2Bc,EAAAC,EAAAJ,EAAAX,CAAM,EAAC,KAAK,WAT3DI,OAMQO,EAAAX,CAAM,EAAC,MADFT,EAAK,GAALA,OANfW,CAAG,MAFPJ,CAAG,EAAHkB,EAAA,IAAAP,EAAAX,EAAG,EAAAY,EAAA,CAAS,oBAAqBd,EAAM,GAAI,2BAA2B,CAAA,EAAA,eAAA,CAAA,MAAtEE,CAAG,MAFI,oOAtCImB"}

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

@@ -41,8 +41,8 @@ const meta = {
         name=${ifDefined(args.name)}
         .options=${ifDefined(args.options)}
         value=${ifDefined(args.value)}
-        isinvalid=${ifDefined(args.isinvalid)}
-        inline=${ifDefined(args.inline)}
+        ?isinvalid=${args.isinvalid}
+        ?inline=${args.inline}
         @input=${(event) => {
             onInput(event);
         }}

package/dist/components/radiogroup/RadioGroup.svelte

@@ -3,6 +3,8 @@
     tag: 'm-radio-group',
     props: {
       options: { type: 'Array', attribute: 'options' },
+      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },
+      inline: { reflect: true, type: 'Boolean', attribute: 'inline' },
     },
     extend: customElementForwardEvents,
   }}

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;AA6BH,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;AA+BH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}