npm - @mozaic-ds/web-components - Versions diffs - 1.6.0 → 1.8.0 - Mend

@mozaic-ds/web-components 1.6.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (215) hide show

package/dist/components/phonenumber/PhoneNumber.svelte CHANGED Viewed

@@ -254,10 +254,10 @@
   display: block;
   width: 100%;
   height: 3rem;
-  box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  box-sizing: border-box;
 }
 .mc-text-input__control {
   background-color: transparent;
@@ -720,7 +720,7 @@
   position: fixed;
   pointer-events: none;
   transition: opacity 0.4s ease, visibility 0ms 0.4s;
-  z-index: var(--overlay-z-index, 2);
+  z-index: var(--overlay-z-index, 4);
 }
 .mc-listbox:has(.mc-listbox__content:not([popover])).is-visible, .mc-listbox:has(.mc-listbox__content:popover-open).is-visible {
   opacity: 1;
@@ -882,6 +882,7 @@
   display: flex;
   position: relative;
   gap: 0.25rem;
+  box-sizing: border-box;
 }
 .mc-phone-number-input__country-code {
   font-weight: var(--font-weight-semi-bold, 600);

package/dist/components/pincode/Pincode.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import{o as S,c as K,e as O,a as R,p as i,v as x,g as D,B as F,q as z,l as o,C as G,b as A,d as H,w as J,f as j,i as d,r as N,t as Q,s as T,h as U,u as B}from"../../custom-element.js";import{e as V}from"../../each.js";import{r as W,s as I,e as X}from"../../attributes.js";import{b as E}from"../../this.js";var Y=j('<input type="text" inputmode="numeric" maxlength="1" pattern="\\d*" autocomplete="one-time-code"/>'),Z=j('<div class="mc-pincode-input svelte-h63szf"></div>');const $={hash:"svelte-h63szf",code:`/**
+import{o as K,c as O,e as R,a as F,p as i,v as x,g as D,B as G,q as z,i as o,b as A,d as H,w as J,f as E,l as N,m as d,t as Q,j as T,n as U,u as B,r as V}from"../../custom-element.js";import{e as W}from"../../each.js";import{a as X,r as Y,s as I,e as Z}from"../../attributes.js";import{b as j}from"../../this.js";var $=E('<input type="text" inputmode="numeric" maxlength="1" pattern="\\d*" autocomplete="one-time-code"/>'),ee=E("<div></div>");const te={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 ee(k,s){O(s,!0),R(k,$);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=J(()=>typeof c()=="string"?parseInt(c(),10)||6:c());let l=x(D([])),_=x(D([])),y;F(()=>{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)},q=(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)},C=(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=Z();return V(f,20,()=>[...Array(o(n)).keys()],e=>e,(e,t)=>{var r=Y();W(r),E(r,(a,P)=>o(_)[P]=a,a=>o(_)?.[a],()=>[t]),Q(()=>{I(r,"id",`pincodeItem${t}`),T(r,1,U(["mc-pincode-input__control",h()&&"is-invalid"]),"svelte-h63szf"),I(r,"name",v()??`pincode-${m()}`),r.disabled=b(),r.readOnly=g(),X(r,o(l)[t])}),B("input",r,a=>q(a,t)),B("keydown",r,a=>C(a,t)),A(e,r)}),N(f),E(f,e=>y=e,()=>y),G("paste",f,L),A(k,f),H(M)}S(["input","keydown"]);customElements.define("m-pincode",K(ee,{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:{}},[],[],{mode:"open"}));
+}.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 oe(k,s){R(s,!0),F(k,te);let v=i(s,"id",7),c=i(s,"length",7,6),m=i(s,"name",7),p=i(s,"value",15),h=i(s,"isinvalid",7),b=i(s,"disabled",7),g=i(s,"readonly",7),q=N(s,["$$slots","$$events","$$legacy","$$host","id","length","name","value","isinvalid","disabled","readonly"]);const n=J(()=>typeof c()=="string"?parseInt(c(),10)||6:c());let l=x(D([])),_=x(D([])),y;G(()=>{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)},L=(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)},M=(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))},P=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 S={get id(){return v()},set id(e){v(e),d()},get length(){return c()},set length(e=6){c(e),d()},get name(){return m()},set name(e){m(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=ee();return X(f,()=>({class:"mc-pincode-input",onpaste:P,...q}),void 0,void 0,void 0,"svelte-h63szf"),W(f,20,()=>[...Array(o(n)).keys()],e=>e,(e,t)=>{var r=$();Y(r),j(r,(a,C)=>o(_)[C]=a,a=>o(_)?.[a],()=>[t]),Q(()=>{I(r,"id",`pincodeItem${t}`),T(r,1,U(["mc-pincode-input__control",h()&&"is-invalid"]),"svelte-h63szf"),I(r,"name",m()??`pincode-${v()}`),r.disabled=b(),r.readOnly=g(),Z(r,o(l)[t])}),B("input",r,a=>L(a,t)),B("keydown",r,a=>M(a,t)),A(e,r)}),V(f),j(f,e=>y=e,()=>y),A(k,f),H(S)}K(["input","keydown"]);customElements.define("m-pincode",O(oe,{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:{}},[],[],{mode:"open"}));
 //# sourceMappingURL=Pincode.js.map

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

	@@ -1 +1 @@
1	- {"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","$.bind_this","$$value","$.set_attribute","$.set_class","$.clsx","$.delegated","e","$.append"~~,"$.event"~~],"mappings":";;;;0xDAWA,~~oBAqCQA~~,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,iBAAS,CAAC,EAAEC,EAAIH,EAAAC,EAAA,OAAA,CAAA,EAAEG,EAAKJ,EAAAC,EAAA,QAAA,~~CAAA~~,~~EAAEI~~,EAASL,EAAAC,EAAA,YAAA,CAAA,EAAEK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EAAEM,EAAQP,EAAAC,EAAA,WAAA,CAAA,~~EAE1D~~,~~MAAAO~~,EAACC,EAAA,IAAA,~~OAAmBP~~,EAAM,GAAK,SAAW,SAASA,EAAM,EAAE,EAAE,GAAK,EAAIA,EAAM,CAAA,EAE9E,~~IAAAQ~~,EAAMC,EAAMC,EAAA,CAAA,CAAA,CAAA,EACZC,EAASF,EAAMC,EAAA,CAAA,CAAA,CAAA,EACfE,EAEJC,EAAO,IAAO,CACN,MAAAC,EAAW,~~OAAOZ~~,EAAK,GAAI,EAAE,~~EACnCa~~,EAAAP,EAAM,MAAKQ,EAACV,CAAC,CAAA,EAAE,KAAK,EAAE,EAAA,EAAA,EACtBS,EAAAP,EAAM,MAAM,KAAI,CAAG,OAAMQ,EAAEV,CAAC,CAAA,EAAA,CAAKW,EAAGC,IAAMJ,EAASI,CAAC,GAAK,EAAE,EAAA,EAAA,CAC7D,CAAC,QAEKC,EAAcD,GAAc,CAChC,eAAc,IAAAF,EAAOL,CAAM,IAAGO,CAAC,GAAG,OAAK,CACzC,EAEME,EAAS,IAAS,CAChB,MAAAC,EAAML,EAAGR,CAAG,EAAC,KAAK,EAAE,EACpBc,MAAY,YAAY,QAAO,CACnC,OAAM,CAAI,MAAOD,CAAM,EACvB,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBT,EAAQ,cAAcU,CAAK,CAC7B,EAEMC,EAAO,CAAI,EAAUC,IAAkB,CAErC,MAAAC,EADK,EAAE,OACI,MAAM,QAAQ,MAAO,EAAE,EAAE,MAAM,EAAG,CAAC,IACpDjB,CAAG,EAACgB,CAAK,EAAIC,EACbL,EAAS,EACLK,GAASD,EAAQ,EAACR,EAAGV,CAAC,GAAEa,EAAWK,EAAQ,CAAC,CAClD,EAEME,EAAS,CAAI,EAAkBF,IAAkB,CACjD,EAAE,MAAQ,aAAeA,EAAQ,GACnC,EAAE,eAAc,EAChBL,EAAWK,EAAQ,CAAC,GACX,EAAE,MAAQ,cAAgBA,EAAKR,EAAGV,CAAC,EAAG,GAC/C,EAAE,eAAc,EAChBa,EAAWK,EAAQ,CAAC,GACX,EAAE,MAAQ,aAAWR,EAAIR,CAAG,EAACgB,CAAK,IAAM,IAAMA,EAAQ,IAC/DR,EAAAR,CAAG,EAACgB,EAAQ,CAAC,EAAI,GACjBJ,EAAS,EACTD,EAAWK,EAAQ,CAAC,EAExB,EAEMG,EAAW,GAAsB,CACrC,EAAE,eAAc,QACVC,GAAU,EAAE,eAAe,QAAQ,MAAM,GAAK,IAAI,QAAQ,MAAO,EAAE,EAAE,MAAM,EAACZ,EAAEV,CAAC,CAAA,EACrFS,EAAAP,EAAM,MAAM,KAAI,CAAG,OAAMQ,EAAEV,CAAC,CAAA,EAAA,CAAKW,EAAGC,IAAMU,EAAOV,CAAC,GAAK,EAAE,EAAA,EAAA,EACzDE,EAAS,EACTD,EAAW,KAAK,IAAIS,EAAO,OAAMZ,EAAEV,CAAC,EAAG,CAAC,CAAA,CAC1C,wFAxDmB,EAAC,yQA2DrBuB,EAAGC,~~EAAA~~,WAAHD,EAAG,GAAA,IAAA,CAAA,GACS,MAAKb,EAACV,CAAC,CAAA,EAAE,KAAI,CAAA,EAAOY,GAAGA,EAAC,CAAAa,EAAJb,IAAC,CAC7B,IAAAc,EAAAC,EAAA,EAAAC,EAAAF,CAAA,EAAAG,EAAAH,EAAA,CAAAI,EAEmBlB,IAACF,EAARL,CAAM,EAACO,CAAC,EAAAkB,EAADlB,GAACF,EAARL,CAAM,IAACO,CAAC,EAAA,IAAA,CAADA,CAAC,CAAA,SAFpBmB,EAAAL,EAAA,KAAA,cACmBd,CAAC,EAAA,EADpBoB,EAAAN,EAAA,EAAAO,EAAA,CAGS,~~4BAA6BpC~~,KAAa,YAAY,CAAA,EAAA,eAAA,IAH/~~D6B~~,EAAA,~~OASO/B~~,EAAI,cAAeJ,EAAE,CAAA,EAAA,~~EAT5BmC~~,EAAA,~~SAUE5B~~,EAAQ,~~EAVV4B~~,EAAA,~~SAWE3B~~,EAAQ,~~IAXV2B~~,EAAAhB,EAYQR,CAAG,EAACU,CAAC,CAAA,IAZbsB,EAAA,QAAAR,EAaWS,GAAMlB,EAAQkB,EAAGvB,CAAC,CAAA,EAb7BsB,EAAA,UAAAR,EAcaS,GAAMf,EAAUe,EAAoBvB,CAAC,CAAA,EAdlDwB,EAAAX,EAAAC,CAAA,MAFJH,CAAG,IAAHA,EAAGO,GAAuDxB,EAAOwB,EAAA,IAAPxB,CAAO,~~EAAjE+B~~,~~EAAA,QAAAd,EAAsCF,CAAO,MAA7CE,~~CAAG,MAFI"}
1	+ {"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 [key: string]: any;\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 = $bindable(), isinvalid, disabled, readonly, ...attrs }: 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} {...attrs}>\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","attrs","$.rest_props","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","$.bind_this","$$value","$.set_attribute","$.set_class","$.clsx","$.delegated","e","$.append"],"mappings":";;;;0xDAWA,qBAsCQA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,iBAAS,CAAC,EAAEC,EAAIH,EAAAC,EAAA,OAAA,CAAA,EAAEG,EAAKJ,EAAAC,EAAA,QAAA,EAAA,EAAgBI,EAASL,EAAAC,EAAA,YAAA,CAAA,EAAEK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EAAEM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EAAKO,EAAKC,EAAAR,EAAA,2GAElF,MAAAS,EAACC,EAAA,IAAA,OAAmBT,EAAM,GAAK,SAAW,SAASA,EAAM,EAAE,EAAE,GAAK,EAAIA,EAAM,CAAA,EAE9E,IAAAU,EAAMC,EAAMC,EAAA,CAAA,CAAA,CAAA,EACZC,EAASF,EAAMC,EAAA,CAAA,CAAA,CAAA,EACfE,EAEJC,EAAO,IAAO,CACN,MAAAC,EAAW,OAAOd,EAAK,GAAI,EAAE,EACnCe,EAAAP,EAAM,MAAKQ,EAACV,CAAC,CAAA,EAAE,KAAK,EAAE,EAAA,EAAA,EACtBS,EAAAP,EAAM,MAAM,KAAI,CAAG,OAAMQ,EAAEV,CAAC,CAAA,EAAA,CAAKW,EAAGC,IAAMJ,EAASI,CAAC,GAAK,EAAE,EAAA,EAAA,CAC7D,CAAC,QAEKC,EAAcD,GAAc,CAChC,eAAc,IAAAF,EAAOL,CAAM,IAAGO,CAAC,GAAG,OAAK,CACzC,EAEME,EAAS,IAAS,CAChB,MAAAC,EAAML,EAAGR,CAAG,EAAC,KAAK,EAAE,EACpBc,MAAY,YAAY,QAAO,CACnC,OAAM,CAAI,MAAOD,CAAM,EACvB,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBT,EAAQ,cAAcU,CAAK,CAC7B,EAEMC,EAAO,CAAI,EAAUC,IAAkB,CAErC,MAAAC,EADK,EAAE,OACI,MAAM,QAAQ,MAAO,EAAE,EAAE,MAAM,EAAG,CAAC,IACpDjB,CAAG,EAACgB,CAAK,EAAIC,EACbL,EAAS,EACLK,GAASD,EAAQ,EAACR,EAAGV,CAAC,GAAEa,EAAWK,EAAQ,CAAC,CAClD,EAEME,EAAS,CAAI,EAAkBF,IAAkB,CACjD,EAAE,MAAQ,aAAeA,EAAQ,GACnC,EAAE,eAAc,EAChBL,EAAWK,EAAQ,CAAC,GACX,EAAE,MAAQ,cAAgBA,EAAKR,EAAGV,CAAC,EAAG,GAC/C,EAAE,eAAc,EAChBa,EAAWK,EAAQ,CAAC,GACX,EAAE,MAAQ,aAAWR,EAAIR,CAAG,EAACgB,CAAK,IAAM,IAAMA,EAAQ,IAC/DR,EAAAR,CAAG,EAACgB,EAAQ,CAAC,EAAI,GACjBJ,EAAS,EACTD,EAAWK,EAAQ,CAAC,EAExB,EAEMG,EAAW,GAAsB,CACrC,EAAE,eAAc,QACVC,GAAU,EAAE,eAAe,QAAQ,MAAM,GAAK,IAAI,QAAQ,MAAO,EAAE,EAAE,MAAM,EAACZ,EAAEV,CAAC,CAAA,EACrFS,EAAAP,EAAM,MAAM,KAAI,CAAG,OAAMQ,EAAEV,CAAC,CAAA,EAAA,CAAKW,EAAGC,IAAMU,EAAOV,CAAC,GAAK,EAAE,EAAA,EAAA,EACzDE,EAAS,EACTD,EAAW,KAAK,IAAIS,EAAO,OAAMZ,EAAEV,CAAC,EAAG,CAAC,CAAA,CAC1C,wFAxDmB,EAAC,yQA2DrBuB,EAAGC,GAAA,WAAHD,EAAG,KAAA,CAAA,MAAA,mBAAA,QAAmCF,EAAO,GAA0BvB,CAAK,GAAA,OAAA,OAAA,OAAA,eAAA,IAA5EyB,EAAG,GAAA,IAAA,CAAA,GACS,MAAKb,EAACV,CAAC,CAAA,EAAE,KAAI,CAAA,EAAOY,GAAGA,EAAC,CAAAa,EAAJb,IAAC,CAC7B,IAAAc,EAAAC,EAAA,EAAAC,EAAAF,CAAA,EAAAG,EAAAH,EAAA,CAAAI,EAEmBlB,IAACF,EAARL,CAAM,EAACO,CAAC,EAAAkB,EAADlB,GAACF,EAARL,CAAM,IAACO,CAAC,EAAA,IAAA,CAADA,CAAC,CAAA,SAFpBmB,EAAAL,EAAA,KAAA,cACmBd,CAAC,EAAA,EADpBoB,EAAAN,EAAA,EAAAO,EAAA,CAGS,4BAA6BtC,KAAa,YAAY,CAAA,EAAA,eAAA,IAH/D+B,EAAA,OASOjC,EAAI,cAAeJ,EAAE,CAAA,EAAA,EAT5BqC,EAAA,SAUE9B,EAAQ,EAVV8B,EAAA,SAWE7B,EAAQ,IAXV6B,EAAAhB,EAYQR,CAAG,EAACU,CAAC,CAAA,IAZbsB,EAAA,QAAAR,EAaWS,GAAMlB,EAAQkB,EAAGvB,CAAC,CAAA,EAb7BsB,EAAA,UAAAR,EAcaS,GAAMf,EAAUe,EAAoBvB,CAAC,CAAA,EAdlDwB,EAAAX,EAAAC,CAAA,MAFJH,CAAG,IAAHA,EAAGO,GAAuDxB,EAAOwB,EAAA,IAAPxB,CAAO,MAAjEiB,CAAG,MAFI"}

package/dist/components/pincode/Pincode.svelte CHANGED Viewed

@@ -16,6 +16,7 @@
    * @event input {CustomEvent<{ value: string }>} - Emits when the pincode value changes.
    */
   interface Props {
+    [key: string]: any;
     /**
      * A unique identifier for the pincode element, used to associate the label with the form element.
      */
@@ -46,7 +47,7 @@
     readonly?: boolean;
   }
-  let { id, length = 6, name, value, isinvalid, disabled, readonly }: Props = $props();
+  let { id, length = 6, name, value = $bindable(), isinvalid, disabled, readonly, ...attrs }: Props = $props();
   const L = $derived(typeof length === 'string' ? parseInt(length, 10) || 6 : length);
@@ -105,7 +106,7 @@
   };
 </script>
-<div class="mc-pincode-input" onpaste={onPaste} bind:this={element}>
+<div class="mc-pincode-input" onpaste={onPaste} bind:this={element} {...attrs}>
   {#each [...Array(L).keys()] as i (i)}
     <input
       id={`pincodeItem${i}`}

package/dist/components/pincode/Pincode.svelte.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@
  * @event input {CustomEvent<{ value: string }>} - Emits when the pincode value changes.
  */
 interface Props {
+    [key: string]: any;
     /**
      * A unique identifier for the pincode element, used to associate the label with the form element.
      */
@@ -33,7 +34,7 @@ interface Props {
      */
     readonly?: boolean;
 }
-declare const Pincode: import("svelte").Component<Props, {}, "">;
+declare const Pincode: import("svelte").Component<Props, {}, "value">;
 type Pincode = ReturnType<typeof Pincode>;
 export default Pincode;
 //# sourceMappingURL=Pincode.svelte.d.ts.map

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

	@@ -1 +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;AAkFH,QAAA,MAAM,OAAO,~~2CAAwC~~,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"Pincode.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/pincode/Pincode.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;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,gDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/pincode/README.md CHANGED Viewed

@@ -9,7 +9,7 @@ A pincode input is a specialized input field used to enter short numeric codes,
 | `id*` | A unique identifier for the pincode element, used to associate the label with the form element. | `string` |   |
 | `length` | The number of input displayed in the pincode element. | `4` `5` `6` | `6` |
 | `name` | The name attribute for the pincode element, typically used for form submission. | `string` |   |
-| `value` | The current value of the pincode field. | `string` `number` |   |
+| `value` | The current value of the pincode field. | `string` `number` | `$bindable()` |
 | `isinvalid` | If `true`, applies an invalid state to the pincode. | `boolean` |   |
 | `disabled` | If `true`, disables the pincode, making it non-interactive. | `boolean` |   |
 | `readonly` | If `true`, the pincode is read-only (cannot be edited). | `boolean` |   |

package/dist/components/popover/Popover.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import{o as $,c as ee,e as re,a as oe,p as s,B as te,k as f,t as U,u as pe,b as _,d as ae,f as b,j as o,i as v,r as t,s as se,h as ve,m as J}from"../../custom-element.js";import{o as ie}from"../../index-client.js";import{i as C}from"../../if.js";import{s as K}from"../../slot.js";import{s as y}from"../../attributes.js";import{b as O}from"../../this.js";import{I as ne}from"../iconbutton/IconButton.js";import{C as le}from"../../Condition20.js";import"../../branches.js";import"../loader/Loader.js";var ce=b('<p class="mc-popover__title svelte-yg26u3"> </p>'),me=b('<p class="mc-popover__description svelte-yg26u3"> </p>'),de=b('<div class="mc-popover__headings svelte-yg26u3"><!> <!></div>'),ge=b('<div class="mc-popover__close svelte-yg26u3"><!></div>'),ue=b('<div><div><!></div> <div role="dialog" tabindex="0" class="mc-popover__wrapper svelte-yg26u3" popover="manual"><div class="mc-popover__content svelte-yg26u3"><!> <div><!></div> <!> <footer class="mc-popover__footer svelte-yg26u3"><!></footer></div></div></div>');const we={hash:"svelte-yg26u3",code:`/**
+import{o as $,c as ee,e as re,a as oe,p as s,B as te,s as f,t as U,j as pe,n as ae,u as se,b as _,d as ve,f as b,h as o,m as v,r as t,k as J}from"../../custom-element.js";import{o as ie}from"../../index-client.js";import{i as C}from"../../if.js";import{s as K}from"../../slot.js";import{s as y}from"../../attributes.js";import{b as O}from"../../this.js";import{I as ne}from"../iconbutton/IconButton.js";import{C as le}from"../../Condition20.js";import"../../branches.js";import"../loader/Loader.js";var ce=b('<p class="mc-popover__title svelte-yg26u3"> </p>'),me=b('<p class="mc-popover__description svelte-yg26u3"> </p>'),de=b('<div class="mc-popover__headings svelte-yg26u3"><!> <!></div>'),ge=b('<div class="mc-popover__close svelte-yg26u3"><!></div>'),ue=b('<div><div><!></div> <div role="dialog" tabindex="0" class="mc-popover__wrapper svelte-yg26u3" popover="manual"><div class="mc-popover__content svelte-yg26u3"><!> <div><!></div> <!> <footer class="mc-popover__footer svelte-yg26u3"><!></footer></div></div></div>');const we={hash:"svelte-yg26u3",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-popover__wrapper.svelte-yg26u3 {border-radius:var(--border-radius-m, 0.5rem);}.mc-popover__wrapper.svelte-yg26u3: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-popover__wrapper.svelte-yg26u3 {position:relative;padding:1rem;background-color:var(--popover-color-background-standard, #ffffff);box-sizing:border-box;overflow:visible;border:var(--border-width-s, 0.0625rem) solid var(--popover-color-border-standard, #cccccc);box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));}
 @supports (width: max-content) {.mc-popover__wrapper.svelte-yg26u3 {width:max-content;}
-}.mc-popover__wrapper.svelte-yg26u3::before {background-color:var(--popover-color-border-standard, #cccccc);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;content:"";height:0.625rem;position:absolute;width:0.625rem;}.mc-popover__wrapper.svelte-yg26u3::after {background-color:var(--popover-color-background-standard, #ffffff);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;content:"";height:0.5rem;position:absolute;width:0.5rem;}.mc-popover__content.svelte-yg26u3 {display:flex;flex-direction:column;gap:1rem;}.mc-popover__headings.svelte-yg26u3 {display:flex;flex-direction:column;gap:0.5rem;}.mc-popover__close.svelte-yg26u3 {position:absolute;top:4px;right:4px;}.mc-popover__title.svelte-yg26u3 {font-size:var(--font-body-s, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--popover-color-text-standard, #000000);margin:0;}.mc-popover__description.svelte-yg26u3 {font-size:var(--font-body-s, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--popover-color-text-standard, #000000);margin:0;}.mc-popover__footer.svelte-yg26u3 {display:flex;justify-content:end;gap:1rem;}.mc-popover--inverse.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {background-color:var(--popover-color-background-inverse, #242938);border-color:var(--popover-color-border-inverse, #636d88);}.mc-popover--inverse.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {background-color:var(--popover-color-border-inverse, #636d88);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-popover--inverse.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::after {background-color:var(--popover-color-background-inverse, #242938);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-popover--inverse.svelte-yg26u3 .mc-popover__title:where(.svelte-yg26u3), .mc-popover--inverse.svelte-yg26u3 .mc-popover__description:where(.svelte-yg26u3) {color:var(--popover-color-text-inverse, #ffffff);}.mc-popover--s.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {width:18rem;}.mc-popover--m.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {width:27.75rem;}.mc-popover--l.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {width:37.5rem;}.mc-popover--top.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {margin:0 0 10px;inset:auto;position-area:top;}.mc-popover--top.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::after, .mc-popover--top.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {bottom:0;left:50%;transform:translate(-50%, 100%) rotate(-90deg);}.mc-popover--top.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {bottom:-1px;}.mc-popover--right.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {margin:0 0 0 10px;inset:auto;position-area:right;}.mc-popover--right.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::after, .mc-popover--right.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {top:50%;left:0;transform:translate(-99%, -50%);}.mc-popover--right.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {left:-1px;}.mc-popover--left.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {margin:0 10px 0 0;inset:auto;position-area:left;}.mc-popover--left.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::after, .mc-popover--left.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {top:50%;right:0;transform:translate(99%, -50%) rotate(180deg);}.mc-popover--left.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {right:-1px;}.mc-popover--bottom.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {margin:10px 0 0;inset:auto;position-area:bottom;}.mc-popover--bottom.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::after, .mc-popover--bottom.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {top:0;left:50%;transform:translate(-50%, -100%) rotate(90deg);}.mc-popover--bottom.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {top:-1px;}.mc-popover--no-pointer.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::after, .mc-popover--no-pointer.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {background:none;}`};function he(S,r){re(r,!0),oe(S,we);let l=s(r,"open",15),x=s(r,"appearance",7,"standard"),E=s(r,"position",7,"top"),z=s(r,"pointer",7,!0),B=s(r,"size",7,"s"),M=s(r,"closable",7,!0),c=s(r,"title",7),m=s(r,"description",7);const w=crypto.randomUUID();let P,d,g;function N(){!d||!g||(l()?(d.showPopover({source:g}),d.focus()):d.hidePopover({source:g}))}function q(e){const a=e.composedPath?e.composedPath():[];!a.includes(P)&&!a.includes(g)&&l(!1)}function Q(e){e.key==="Escape"&&l(!1)}te(N),ie(()=>(document.addEventListener("mousedown",q),()=>{document.removeEventListener("mousedown",q)}));var R={get open(){return l()},set open(e){l(e),v()},get appearance(){return x()},set appearance(e="standard"){x(e),v()},get position(){return E()},set position(e="top"){E(e),v()},get pointer(){return z()},set pointer(e=!0){z(e),v()},get size(){return B()},set size(e="s"){B(e),v()},get closable(){return M()},set closable(e=!0){M(e),v()},get title(){return c()},set title(e){c(e),v()},get description(){return m()},set description(e){m(e),v()}},h=ue(),k=o(h),T=o(k);K(T,r,"activator",{},null),t(k),O(k,e=>g=e,()=>g);var i=f(k,2),A=o(i),F=o(A);{var V=e=>{var a=de(),u=o(a);{var j=n=>{var p=ce(),L=o(p,!0);t(p),U(()=>{y(p,"id",`${w}-title`),J(L,c())}),_(n,p)};C(u,n=>{c()&&n(j)})}var D=f(u,2);{var Z=n=>{var p=me(),L=o(p,!0);t(p),U(()=>{y(p,"id",`${w}-description`),J(L,m())}),_(n,p)};C(D,n=>{m()&&n(Z)})}t(a),_(e,a)};C(F,e=>{(c()||m())&&e(V)})}var I=f(F,2),W=o(I);K(W,r,"default",{},null),t(I);var G=f(I,2);{var X=e=>{const a=D=>{le(D,{})};var u=ge(),j=o(u);ne(j,{ghost:!0,get icon(){return a},get appearance(){return x()},iconposition:"only","aria-label":"Close button",onclick:()=>l(!1)}),t(u),_(e,u)};C(G,e=>{M()&&e(X)})}var H=f(G,2),Y=o(H);return K(Y,r,"footer",{},null),t(H),t(A),t(i),O(i,e=>d=e,()=>d),t(h),O(h,e=>P=e,()=>P),U(()=>{se(h,1,ve({"mc-popover":!0,[`mc-popover--${x()}`]:!0,[`mc-popover--${E()}`]:!0,"mc-popover--no-pointer":!z(),[`mc-popover--${B()}`]:!0}),"svelte-yg26u3"),y(i,"id",`popover-${w}`),y(i,"aria-labelledby",c()?`${w}-title`:void 0),y(i,"aria-describedby",m()?`${w}-description`:void 0)}),pe("keydown",i,Q),_(S,h),ae(R)}$(["keydown"]);customElements.define("m-popover",ee(he,{open:{attribute:"open",reflect:!0,type:"Boolean"},pointer:{attribute:"pointer",reflect:!0,type:"Boolean"},closable:{attribute:"closable",reflect:!0,type:"Boolean"},appearance:{},position:{},size:{},title:{},description:{}},["activator","default","footer"],[],{mode:"open"}));
+}.mc-popover__wrapper.svelte-yg26u3::before {background-color:var(--popover-color-border-standard, #cccccc);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;content:"";height:0.625rem;position:absolute;width:0.625rem;}.mc-popover__wrapper.svelte-yg26u3::after {background-color:var(--popover-color-background-standard, #ffffff);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;content:"";height:0.5rem;position:absolute;width:0.5rem;}.mc-popover__content.svelte-yg26u3 {display:flex;flex-direction:column;gap:1rem;}.mc-popover__headings.svelte-yg26u3 {display:flex;flex-direction:column;gap:0.5rem;}.mc-popover__close.svelte-yg26u3 {position:absolute;top:4px;right:4px;}.mc-popover__title.svelte-yg26u3 {font-size:var(--font-body-s, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--popover-color-text-standard, #000000);margin:0;}.mc-popover__description.svelte-yg26u3 {font-size:var(--font-body-s, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--popover-color-text-standard, #000000);margin:0;}.mc-popover__footer.svelte-yg26u3 {display:flex;justify-content:end;gap:1rem;}.mc-popover--inverse.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {background-color:var(--popover-color-background-inverse, #242938);border-color:var(--popover-color-border-inverse, #636d88);}.mc-popover--inverse.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {background-color:var(--popover-color-border-inverse, #636d88);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-popover--inverse.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::after {background-color:var(--popover-color-background-inverse, #242938);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-popover--inverse.svelte-yg26u3 .mc-popover__title:where(.svelte-yg26u3), .mc-popover--inverse.svelte-yg26u3 .mc-popover__description:where(.svelte-yg26u3) {color:var(--popover-color-text-inverse, #ffffff);}.mc-popover--s.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {width:18rem;}.mc-popover--m.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {width:27.75rem;}.mc-popover--l.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {width:37.5rem;}.mc-popover--top.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {margin:0 0 10px;inset:auto;position-area:top;}.mc-popover--top.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::after, .mc-popover--top.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {bottom:0;left:50%;transform:translate(-50%, 100%) rotate(-90deg);}.mc-popover--top.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {bottom:-1px;}.mc-popover--right.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {margin:0 0 0 10px;inset:auto;position-area:right;}.mc-popover--right.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::after, .mc-popover--right.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {top:50%;left:0;transform:translate(-99%, -50%);}.mc-popover--right.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {left:-1px;}.mc-popover--left.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {margin:0 10px 0 0;inset:auto;position-area:left;}.mc-popover--left.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::after, .mc-popover--left.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {top:50%;right:0;transform:translate(99%, -50%) rotate(180deg);}.mc-popover--left.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {right:-1px;}.mc-popover--bottom.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3) {margin:10px 0 0;inset:auto;position-area:bottom;}.mc-popover--bottom.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::after, .mc-popover--bottom.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {top:0;left:50%;transform:translate(-50%, -100%) rotate(90deg);}.mc-popover--bottom.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {top:-1px;}.mc-popover--no-pointer.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::after, .mc-popover--no-pointer.svelte-yg26u3 .mc-popover__wrapper:where(.svelte-yg26u3)::before {background:none;}`};function he(S,r){re(r,!0),oe(S,we);let l=s(r,"open",15),x=s(r,"appearance",7,"standard"),E=s(r,"position",7,"top"),z=s(r,"pointer",7,!0),B=s(r,"size",7,"s"),M=s(r,"closable",7,!0),c=s(r,"title",7),m=s(r,"description",7);const w=crypto.randomUUID();let P,d,g;function N(){!d||!g||(l()?(d.showPopover({source:g}),d.focus()):d.hidePopover({source:g}))}function q(e){const a=e.composedPath?e.composedPath():[];!a.includes(P)&&!a.includes(g)&&l(!1)}function Q(e){e.key==="Escape"&&l(!1)}te(N),ie(()=>(document.addEventListener("mousedown",q),()=>{document.removeEventListener("mousedown",q)}));var R={get open(){return l()},set open(e){l(e),v()},get appearance(){return x()},set appearance(e="standard"){x(e),v()},get position(){return E()},set position(e="top"){E(e),v()},get pointer(){return z()},set pointer(e=!0){z(e),v()},get size(){return B()},set size(e="s"){B(e),v()},get closable(){return M()},set closable(e=!0){M(e),v()},get title(){return c()},set title(e){c(e),v()},get description(){return m()},set description(e){m(e),v()}},h=ue(),k=o(h),T=o(k);K(T,r,"activator",{},null),t(k),O(k,e=>g=e,()=>g);var i=f(k,2),A=o(i),F=o(A);{var V=e=>{var a=de(),u=o(a);{var j=n=>{var p=ce(),L=o(p,!0);t(p),U(()=>{y(p,"id",`${w}-title`),J(L,c())}),_(n,p)};C(u,n=>{c()&&n(j)})}var D=f(u,2);{var Z=n=>{var p=me(),L=o(p,!0);t(p),U(()=>{y(p,"id",`${w}-description`),J(L,m())}),_(n,p)};C(D,n=>{m()&&n(Z)})}t(a),_(e,a)};C(F,e=>{(c()||m())&&e(V)})}var I=f(F,2),W=o(I);K(W,r,"default",{},null),t(I);var G=f(I,2);{var X=e=>{const a=D=>{le(D,{})};var u=ge(),j=o(u);ne(j,{ghost:!0,get icon(){return a},get appearance(){return x()},iconposition:"only","aria-label":"Close button",onclick:()=>l(!1)}),t(u),_(e,u)};C(G,e=>{M()&&e(X)})}var H=f(G,2),Y=o(H);return K(Y,r,"footer",{},null),t(H),t(A),t(i),O(i,e=>d=e,()=>d),t(h),O(h,e=>P=e,()=>P),U(()=>{pe(h,1,ae({"mc-popover":!0,[`mc-popover--${x()}`]:!0,[`mc-popover--${E()}`]:!0,"mc-popover--no-pointer":!z(),[`mc-popover--${B()}`]:!0}),"svelte-yg26u3"),y(i,"id",`popover-${w}`),y(i,"aria-labelledby",c()?`${w}-title`:void 0),y(i,"aria-describedby",m()?`${w}-description`:void 0)}),se("keydown",i,Q),_(S,h),ve(R)}$(["keydown"]);customElements.define("m-popover",ee(he,{open:{attribute:"open",reflect:!0,type:"Boolean"},pointer:{attribute:"pointer",reflect:!0,type:"Boolean"},closable:{attribute:"closable",reflect:!0,type:"Boolean"},appearance:{},position:{},size:{},title:{},description:{}},["activator","default","footer"],[],{mode:"open"}));
 //# sourceMappingURL=Popover.js.map

package/dist/components/quantityselector/QuantitySelector.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import{o as H,c as J,e as K,a as O,p as o,k as h,t as P,u as V,b as R,d as T,f as U,n as W,j as n,i as s,r as i,s as X,h as Y,m as B}from"../../custom-element.js";import{a as Z,s as E}from"../../attributes.js";import{c as $}from"../../input.js";import{c as ee}from"../../custom-element-forward-events.js";import{M as te,r as re}from"../../Condition20.js";var oe=U('<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 se={hash:"svelte-ptlds1",code:`/**
+import{o as H,c as J,e as K,a as O,p as o,s as h,t as P,j as R,n as T,k as V,u as B,b as U,d as W,f as X,l as Y,h as n,m as s,r as i}from"../../custom-element.js";import{a as Z,s as E}from"../../attributes.js";import{c as $}from"../../input.js";import{c as ee}from"../../custom-element-forward-events.js";import{M as te,r as re}from"../../Condition20.js";var oe=X('<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 se={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, #000000);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, #b3b3b3);cursor:not-allowed;}.mc-quantity-selector__button.svelte-ptlds1:hover:not(:disabled) {background-color:var(--quantity-selector-color-button-background-hover, rgba(0, 0, 0, 0.05));}.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 le(N,r){K(r,!0),O(N,se);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"),I=W(r,["$$slots","$$events","$$legacy","$$host","id","value","min","max","step","size","disabled","isinvalid","name","readonly","decrementlabel","incrementlabel"]);const j=()=>{const e=Number(t());e>a()?t(a()):e<l()?t(l()):t(e)},F=()=>{const e=Number(t()),v=Number(b());e+v<=a()?t(e+v):t(a())},M=()=>{const e=Number(t()),v=Number(b());e-v>=l()?t(e-v):t(l())};var G={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=oe(),x=n(f);Z(x,()=>({type:"number",id:d(),name:_(),oninput:j,class:"mc-quantity-selector__control","aria-valuemin":l(),"aria-valuemax":a(),"aria-valuenow":t(),"aria-invalid":`${p()}`,readonly:g(),disabled:u(),...I}),void 0,void 0,void 0,"svelte-ptlds1",!0);var c=h(x,2),k=n(c),L=n(k);te(L,{}),i(k);var D=h(k,2),Q=n(D,!0);i(D),i(c);var m=h(c,2),z=n(m),A=n(z);re(A,{}),i(z);var S=h(z,2),C=n(S,!0);return i(S),i(m),i(f),P(()=>{X(f,1,Y(["mc-quantity-selector",`mc-quantity-selector--${y()}`,p()&&"is-invalid"]),"svelte-ptlds1"),E(c,"aria-controls",d()),c.disabled=t()===a()||u(),B(Q,w()),E(m,"aria-controls",d()),m.disabled=t()===l()||u(),B(C,q())}),$(x,t),V("click",c,F),V("click",m,M),R(N,f),T(G)}H(["click"]);customElements.define("m-quantityselector",J(le,{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:{}},[],[],{mode:"open"},ee));
+ */.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;display:flex;gap:0.25rem;padding:0.1875rem;position:relative;border-radius:var(--border-radius-s, 0.25rem);box-sizing:border-box;}.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, #000000);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, #b3b3b3);cursor:not-allowed;}.mc-quantity-selector__button.svelte-ptlds1:hover:not(:disabled) {background-color:var(--quantity-selector-color-button-background-hover, rgba(0, 0, 0, 0.05));}.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 le(N,r){K(r,!0),O(N,se);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"),I=Y(r,["$$slots","$$events","$$legacy","$$host","id","value","min","max","step","size","disabled","isinvalid","name","readonly","decrementlabel","incrementlabel"]);const j=()=>{const e=Number(t());e>a()?t(a()):e<l()?t(l()):t(e)},F=()=>{const e=Number(t()),v=Number(b());e+v<=a()?t(e+v):t(a())},M=()=>{const e=Number(t()),v=Number(b());e-v>=l()?t(e-v):t(l())};var G={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=oe(),x=n(f);Z(x,()=>({type:"number",id:d(),name:_(),oninput:j,class:"mc-quantity-selector__control","aria-valuemin":l(),"aria-valuemax":a(),"aria-valuenow":t(),"aria-invalid":`${p()}`,readonly:g(),disabled:u(),...I}),void 0,void 0,void 0,"svelte-ptlds1",!0);var c=h(x,2),k=n(c),L=n(k);te(L,{}),i(k);var D=h(k,2),Q=n(D,!0);i(D),i(c);var m=h(c,2),z=n(m),A=n(z);re(A,{}),i(z);var S=h(z,2),C=n(S,!0);return i(S),i(m),i(f),P(()=>{R(f,1,T(["mc-quantity-selector",`mc-quantity-selector--${y()}`,p()&&"is-invalid"]),"svelte-ptlds1"),E(c,"aria-controls",d()),c.disabled=t()===a()||u(),V(Q,w()),E(m,"aria-controls",d()),m.disabled=t()===l()||u(),V(C,q())}),$(x,t),B("click",c,F),B("click",m,M),U(N,f),W(G)}H(["click"]);customElements.define("m-quantityselector",J(le,{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:{}},[],[],{mode:"open"},ee));
 //# sourceMappingURL=QuantitySelector.js.map

package/dist/components/quantityselector/QuantitySelector.svelte CHANGED Viewed

@@ -174,12 +174,12 @@
   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);
+  box-sizing: border-box;
 }
 .mc-quantity-selector__control {
   background-color: transparent;

package/dist/components/radio/Radio.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{c as k,e as w,a as g,p as o,k as q,t as x,b as y,d as B,f as E,n as z,j as v,i as a,r as f,m as R}from"../../custom-element.js";import{a as j,s as D}from"../../attributes.js";import{c as F}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:`/**
+import{c as k,e as w,a as g,p as o,s as q,t as x,k as y,b as B,d as E,f as z,l as R,h as v,m as a,r as f}from"../../custom-element.js";import{a as D,s as F}from"../../attributes.js";import{c as S}from"../../custom-element-forward-events.js";var j=z('<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){w(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),_=z(r,["$$slots","$$events","$$legacy","$$host","id","name","label","checked","disabled","isinvalid"]);var h={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);j(u,()=>({id:t(),type:"radio",class:["mc-radio__input",n()&&"is-invalid"],name:i(),disabled:s(),checked:l(),..._}),void 0,void 0,void 0,"svelte-1bwbq3n",!0);var b=q(u,2),p=v(b,!0);return f(b),f(c),x(()=>{D(b,"for",t()),R(p,d())}),y(m,c),B(h)}customElements.define("m-radio",k(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:{}},[],[],{mode:"open"},F));export{C as 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(m,r){w(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=R(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=j(),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=q(u,2),p=v(b,!0);return f(b),f(c),x(()=>{F(b,"for",t()),y(p,d())}),B(m,c),E(_)}customElements.define("m-radio",k(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:{}},[],[],{mode:"open"},S));export{C as R};
 //# sourceMappingURL=Radio.js.map

package/dist/components/radiogroup/RadioGroup.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import{c as A,e as D,a as F,p as a,t as g,b as k,d as G,f as E,i,r as _,s as w,h as y,j as x,k as R,l as o,m as S}from"../../custom-element.js";import{e as q}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 C,e as M,a as z,p as o,b,d as B,f as k,l as q,m as t,h as w,s as L,r as g,t as V,j,n as A,i as a,k as D}from"../../custom-element.js";import{e as F}from"../../each.js";import{a as G,r as R,s as _}from"../../attributes.js";import{b as S}from"../../input.js";import{c as H}from"../../custom-element-forward-events.js";var I=k('<div class="mc-radio mc-field__item svelte-clvmul"><input type="radio"/> <label class="mc-radio__label svelte-clvmul"> </label></div>'),J=k("<div></div>");const K={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-disable string-no-newline */.mc-field__label.svelte-clvmul, .mc-field__legend.svelte-clvmul {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000);}.mc-field__legend.svelte-clvmul {padding-inline:0;}.mc-field__requirement.svelte-clvmul, .mc-field__help.svelte-clvmul {font-size:var(--font-size-50, 0.75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666);}.mc-field__help.svelte-clvmul {display:block;margin-top:0.125rem;}.mc-field__content.svelte-clvmul {margin-top:0.5rem;}.mc-field__validation-message.svelte-clvmul {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:0.25rem;margin-top:0.25rem;}.mc-field__validation-message.is-valid.svelte-clvmul::before, .mc-field__validation-message.is-invalid.svelte-clvmul::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-clvmul {color:var(--field-color-validation-valid, #117f03);}.mc-field__validation-message.is-valid.svelte-clvmul::before {background-color:var(--field-color-validation-valid, #117f03);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-field__validation-message.is-invalid.svelte-clvmul {color:var(--field-color-validation-invalid, #c61112);}.mc-field__validation-message.is-invalid.svelte-clvmul::before {background-color:var(--field-color-validation-invalid, #c61112);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-field__validation-message.is-loading.svelte-clvmul {color:var(--field-color-validation-loading, #666666);}.mc-field--group.svelte-clvmul {border-width:0;margin-inline:0;padding:0;}
-/* 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){D(t,!0),F(p,L);const z=[];let s=a(t,"value",15),c=a(t,"name",7),d=a(t,"options",7),m=a(t,"inline",7),u=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 m()},set inline(e){m(e),i()},get isinvalid(){return u()},set isinvalid(e){u(e),i()}},n=K();return q(n,21,d,e=>e.id,(e,l)=>{var v=J(),r=x(v);C(r);var h,f=R(r,2),j=x(f,!0);_(f),_(v),g(()=>{w(r,1,y(["mc-radio__input",u()&&"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),S(j,o(l).label)}),H(z,[],r,()=>(o(l).value,s()),s),k(e,v)}),_(n),g(()=>w(n,1,y(["mc-field__content",m()&&"mc-field__content--inline"]),"svelte-clvmul")),k(p,n),G(B)}customElements.define("m-radio-group",A(M,{options:{attribute:"options",type:"Array"},isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},inline:{attribute:"inline",reflect:!0,type:"Boolean"},value:{},name:{}},[],[],{mode:"open"},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 N(h,i){M(i,!0),z(h,K);const x=[];let n=o(i,"value",15),d=o(i,"name",7),c=o(i,"options",7),v=o(i,"inline",7),m=o(i,"isinvalid",7),y=q(i,["$$slots","$$events","$$legacy","$$host","value","name","options","inline","isinvalid"]);var E={get value(){return n()},set value(e){n(e),t()},get name(){return d()},set name(e){d(e),t()},get options(){return c()},set options(e){c(e),t()},get inline(){return v()},set inline(e){v(e),t()},get isinvalid(){return m()},set isinvalid(e){m(e),t()}},s=J();return G(s,()=>({class:["mc-field__content",v()&&"mc-field__content--inline"],...y}),void 0,void 0,void 0,"svelte-clvmul"),F(s,21,c,e=>e.id,(e,r)=>{var u=I(),l=w(u);R(l);var p,f=L(l,2),Z=w(f,!0);g(f),g(u),V(()=>{j(l,1,A(["mc-radio__input",m()&&"is-invalid"]),"svelte-clvmul"),_(l,"id",a(r).id),_(l,"name",d()),l.disabled=a(r).disabled,p!==(p=a(r).value)&&(l.value=(l.__value=a(r).value)??""),_(f,"for",a(r).id),D(Z,a(r).label)}),S(x,[],l,()=>(a(r).value,n()),n),b(e,u)}),g(s),b(h,s),B(E)}customElements.define("m-radio-group",C(N,{options:{attribute:"options",type:"Array"},isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},inline:{attribute:"inline",reflect:!0,type:"Boolean"},value:{},name:{}},[],[],{mode:"open"},H));
 //# sourceMappingURL=RadioGroup.js.map

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

	@@ -1 +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 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,+~~OAtCImB~~"}
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 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 [key: string]: any;\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, ...attrs }: Props = $props();\n</script>\n\n<div class={['mc-field__content', inline && 'mc-field__content--inline']} {...attrs}>\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","attrs","$.rest_props","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","customElementForwardEvents"],"mappings":";;;;;;sMAYA,+BAkCQA,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,EAAKK,EAAKC,EAAAN,EAAA,yVAGtEO,EAAGC,EAAA,WAAHD,eAAY,oBAAqBJ,EAAM,GAAI,2BAA2B,KAAOE,4CAA7EE,EAAG,GACKL,EAAWO,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,kBAAmBf,KAAa,YAAY,CAAA,EAAA,eAAA,IAFrDS,EAAA,KAAAO,EAGKX,CAAM,EAAC,EAAE,EAHdY,EAAAR,EAAA,OAIEZ,GAAI,EAJNY,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,MADFX,EAAK,GAALA,OANfa,CAAG,MAFPJ,CAAG,MAAHA,CAAG,MAFI,+OAvCIkB"}

package/dist/components/radiogroup/RadioGroup.svelte CHANGED Viewed

@@ -16,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;
     /**
      * The name attribute for the radio element, typically used for form submission.
      */
@@ -43,10 +44,10 @@
     inline?: boolean;
   }
-  let { value = $bindable(), name, options, inline, isinvalid }: Props = $props();
+  let { value = $bindable(), name, options, inline, isinvalid, ...attrs }: Props = $props();
 </script>
-<div class={['mc-field__content', inline && 'mc-field__content--inline']}>
+<div class={['mc-field__content', inline && 'mc-field__content--inline']} {...attrs}>
   {#each options as option (option.id)}
     <div class="mc-radio mc-field__item">
       <input

package/dist/components/radiogroup/RadioGroup.svelte.d.ts CHANGED Viewed

@@ -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;
     /**
      * The name attribute for the radio element, typically used for form submission.
      */

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

	@@ -1 +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;AA+BH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/radiogroup/RadioGroup.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;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"}

package/dist/components/segmentedcontrol/README.md CHANGED Viewed

@@ -6,14 +6,17 @@ A Segmented Control allows users to switch between multiple options or views wit
 | Name | Description | Type | Default |
 |------|-------------|------|---------|
-| `selected` | The selected segment index, bound via v-model. | `number` | `$bindable(0)` |
+| `selected` | Defines the currently active tab.
+- If a `number` is provided, it represents the index of the segment.
+- If a `string` is provided, it must match the `id` of one of the segments. | `number` `string` | `$bindable(0)` |
 | `full` | if `true`, the segmented control take the full width. | `boolean` |   |
 | `size` | Determines the size of the segmented control. | `'s'` `'m'` | `s` |
-| `segments*` | An array of objects that allows you to provide all the data needed to generate the content for each segment. | `Array<{ label: string; }>` |   |
+| `segments*` | An array of objects that allows you to provide all the data needed to generate the content for each segment. | `Array<{ id?: string; label: string; }>` |   |
 ## Events
 | Name | Description | Type |
 |------|------|-------------|
-| `change` | Emits when the selected segment changes. | `CustomEvent<number>` |
+| `change` | Emits when the selected segment changes. | `CustomEvent<number | string | undefined>` |

package/dist/components/segmentedcontrol/SegmentedControl.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{o as z,c as C,e as E,a as j,p as l,t as u,b as h,d as S,f as k,i as c,r as p,s as v,h as b,j as B,m as D,l as q,u as A}from"../../custom-element.js";import{e as F,i as G}from"../../each.js";import{s as _}from"../../attributes.js";import{b as H}from"../../this.js";var I=k('<button type="button" role="radio"> </button>'),J=k('<div role="radiogroup"></div>');const K={hash:"svelte-1p6odhf",code:`/**
+import{o as B,c as D,e as q,a as A,p as d,t as p,j as v,n as b,b as _,d as F,f as y,m as a,h as G,r as k,i as c,k as H,u as I}from"../../custom-element.js";import{e as J,i as K}from"../../each.js";import{s as x}from"../../attributes.js";import{b as L}from"../../this.js";var M=y('<button type="button" role="radio"> </button>'),N=y('<div role="radiogroup"></div>');const O={hash:"svelte-1p6odhf",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-segmented-control.svelte-1p6odhf {display:inline-flex;background-color:var(--segmented-control-color-background-default, #ffffff);border:1px solid var(--segmented-control-color-border, #cccccc);border-radius:3rem;height:2rem;padding:0.25rem;box-sizing:border-box;gap:0.25rem;}.mc-segmented-control__segment.svelte-1p6odhf {display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;color:var(--segmented-control-color-text-default, #666666);cursor:pointer;font-family:inherit;font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, 0.875rem);padding:0 1rem;border-radius:3rem;height:1.5rem;width:100%;transition:background-color 0.3s ease;white-space:nowrap;}.mc-segmented-control__segment.svelte-1p6odhf:not(.mc-segmented-control__segment--selected):hover {background-color:var(--segmented-control-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-segmented-control__segment--selected.svelte-1p6odhf {color:var(--segmented-control-color-text-selected, #ffffff);background-color:var(--segmented-control-color-background-selected, #464e63);}.mc-segmented-control__segment.svelte-1p6odhf: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-segmented-control--m.svelte-1p6odhf {height:3rem;padding:0.5rem;}.mc-segmented-control--m.svelte-1p6odhf .mc-segmented-control__segment:where(.svelte-1p6odhf) {height:2rem;}.mc-segmented-control--full.svelte-1p6odhf {display:flex;}`};function L(g,r){E(r,!0),j(g,K);let o=l(r,"selected",15,0),d=l(r,"full",7),a=l(r,"size",7,"s"),m=l(r,"segments",7),i;const x=e=>{o(e);const f=new CustomEvent("change",{detail:e,bubbles:!0,composed:!0});i.dispatchEvent(f)};var y={get selected(){return o()},set selected(e=0){o(e),c()},get full(){return d()},set full(e){d(e),c()},get size(){return a()},set size(e="s"){a(e),c()},get segments(){return m()},set segments(e){m(e),c()}},s=J();return F(s,21,m,G,(e,f,n)=>{var t=I(),w=B(t,!0);p(t),u(()=>{v(t,1,b(["mc-segmented-control__segment",o()===n&&"mc-segmented-control__segment--selected"]),"svelte-1p6odhf"),_(t,"tabindex",o()===n?0:-1),_(t,"aria-checked",o()===n?"true":"false"),D(w,q(f).label)}),A("click",t,()=>x(n)),h(e,t)}),p(s),H(s,e=>i=e,()=>i),u(()=>v(s,1,b(["mc-segmented-control",`mc-segmented-control--${a()}`,d()&&"mc-segmented-control--full"]),"svelte-1p6odhf")),h(g,s),S(y)}z(["click"]);customElements.define("m-segmented-control",C(L,{full:{attribute:"full",reflect:!0,type:"Boolean"},selected:{},size:{},segments:{}},[],[],{mode:"open"}));
+ */.mc-segmented-control.svelte-1p6odhf {display:inline-flex;background-color:var(--segmented-control-color-background-default, #ffffff);border:1px solid var(--segmented-control-color-border, #cccccc);border-radius:3rem;height:2rem;padding:0.25rem;box-sizing:border-box;gap:0.25rem;}.mc-segmented-control__segment.svelte-1p6odhf {display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;color:var(--segmented-control-color-text-default, #666666);cursor:pointer;font-family:inherit;font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, 0.875rem);padding:0 1rem;border-radius:3rem;height:1.5rem;width:100%;transition:background-color 0.3s ease;white-space:nowrap;}.mc-segmented-control__segment.svelte-1p6odhf:not(.mc-segmented-control__segment--selected):hover {background-color:var(--segmented-control-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-segmented-control__segment--selected.svelte-1p6odhf {color:var(--segmented-control-color-text-selected, #ffffff);background-color:var(--segmented-control-color-background-selected, #464e63);}.mc-segmented-control__segment.svelte-1p6odhf: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-segmented-control--m.svelte-1p6odhf {height:3rem;padding:0.5rem;}.mc-segmented-control--m.svelte-1p6odhf .mc-segmented-control__segment:where(.svelte-1p6odhf) {height:2rem;}.mc-segmented-control--full.svelte-1p6odhf {display:flex;}`};function P(h,n){q(n,!0),A(h,O);let s=d(n,"selected",15,0),m=d(n,"full",7),i=d(n,"size",7,"s"),f=d(n,"segments",7),g;const w=(e,t)=>{const o=typeof s()=="string"?t||"":e;s(o);const r=new CustomEvent("change",{detail:o,bubbles:!0,composed:!0});g.dispatchEvent(r)},u=(e,t)=>{const o=typeof s()=="string"?t||"":e;return s()===o};var z={get selected(){return s()},set selected(e=0){s(e),a()},get full(){return m()},set full(e){m(e),a()},get size(){return i()},set size(e="s"){i(e),a()},get segments(){return f()},set segments(e){f(e),a()}},l=N();return J(l,21,f,K,(e,t,o)=>{var r=M(),S=G(r,!0);k(r),p((C,E,j)=>{v(r,1,C,"svelte-1p6odhf"),x(r,"tabindex",E),x(r,"aria-checked",j),H(S,c(t).label)},[()=>b(["mc-segmented-control__segment",u(o,c(t).id)&&"mc-segmented-control__segment--selected"]),()=>u(o,c(t).id)?0:-1,()=>u(o,c(t).id)?"true":"false"]),I("click",r,()=>w(o,c(t).id)),_(e,r)}),k(l),L(l,e=>g=e,()=>g),p(()=>v(l,1,b(["mc-segmented-control",`mc-segmented-control--${i()}`,m()&&"mc-segmented-control--full"]),"svelte-1p6odhf")),_(h,l),F(z)}B(["click"]);customElements.define("m-segmented-control",D(P,{full:{attribute:"full",reflect:!0,type:"Boolean"},selected:{},size:{},segments:{}},[],[],{mode:"open"}));
 //# sourceMappingURL=SegmentedControl.js.map

package/dist/components/segmentedcontrol/SegmentedControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/segmentedcontrol/SegmentedControl.svelte"],"sourcesContent":["<svelte:options\n customElement={{\n tag: 'm-segmented-control',\n props: {\n full: { reflect: true, type: 'Boolean', attribute: 'full' },\n },\n }}\n/>\n\n<script lang=\"ts\">\n /*\n A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.\n \n @event change {CustomEvent<number>} - Emits when the selected segment changes.\n /\n interface Props {\n /\n ~~The~~ ~~selected~~ segment ~~index~~, ~~bound~~ ~~via~~ ~~v-model~~.\n /\n selected?: number;\n /\n if `true`, the segmented control take the full width.\n /\n full?: boolean;\n /\n Determines the size of the segmented control.\n /\n size?: 's' \| 'm';\n /\n An array of objects that allows you to provide all the data needed to generate the content for each segment.\n /\n segments: Array<{\n /\n The label displayed for the segment.\n */\n label: string;\n }>;\n }\n\n let { selected = $bindable(0), full, size = 's', segments }: Props = $props();\n let element: HTMLElement;\n\n const onClick = (index: number) => {\n ~~selected~~ = index;\n\n const event = new CustomEvent('change', {\n detail: ~~index~~,\n bubbles: true,\n composed: true,\n });\n element.dispatchEvent(event);\n };\n</script>\n\n<div\n class={[\n 'mc-segmented-control',\n `mc-segmented-control--${size}`,\n full && 'mc-segmented-control--full',\n ]}\n role=\"radiogroup\"\n bind:this={element}\n>\n {#each segments as segment, index (index)}\n <button\n type=\"button\"\n class={[\n 'mc-segmented-control__segment',\n ~~selected~~ ~~===~~ ~~index~~ && 'mc-segmented-control__segment--selected',\n ]}\n role=\"radio\"\n tabindex={~~selected~~ ~~===~~ ~~index~~ ? 0 : -1}\n aria-checked={~~selected~~ ~~===~~ ~~index~~ ? 'true' : 'false'}\n onclick={() => onClick(index)}\n >\n {segment.label}\n </button>\n {/each}\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/segmented-control';\n</style>\n"],"names":["selected","full","$.prop","$$props","size","segments","element","onClick","index","event","div","root","segment","button","root_1","text","$.child","$.reset","$.set_attribute","$.set_text","$.get","$.append","$$anchor","$$value"],"mappings":";;onDASA,~~gBA8BQ~~,IAAAA,oBAAqB,CAAC,EAAGC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,eAAO,GAAG,EAAEC,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACrDG,~~QAEEC~~,~~EAAWC~~,~~GAAkB~~,~~CACjCR~~,~~EAAWQ~~,CAAK,EAEV,MAAAC,EAAK,IAAO,YAAY,UAC5B,OAAQD,EACR,QAAS,GACT,SAAU,EAAI,CAAA,~~EAEhBF~~,EAAQ,~~cAAcG~~,CAAK,CAC7B,~~mDAZ2B~~,EAAC,0FAAgB,IAAG,~~iEAehDC~~,EAAAC,EAAA,WAAAD,EAAA,~~GASQL~~,~~OAAYO~~,~~EAAOJ~~,IAAA,CACvB,~~IAAAK~~,EAAAC,EAAA,EAAAC,EAAAC,EAAAH,EAAA,EAAA,EAAAI,EAAAJ,CAAA,~~WAAAA~~,~~OAGG~~,~~gCACAb~~,~~EAAQ~~,~~IAAKQ~~,~~GAAS~~,~~8DAJzBU~~,~~EAAAL~~,EAAA,~~WAOWb~~,~~EAAQ~~,~~IAAKQ~~,~~EAAQ~~,~~IAAM~~,~~EAPtCU~~,~~EAAAL~~,~~EAAA~~,~~eAQeb~~,~~EAAQ~~,~~IAAKQ~~,~~EAAQ~~,~~OAAS~~,~~OAAO~~,~~EAGlDW~~,~~EAAAJ~~,~~EAAAK~~,~~EAAAR~~,CAAO,EAAC,~~KAAK~~,~~cAXfC~~,EAAA,~~IASgBN~~,EAAQC,~~CAAK~~,CAAA,~~EAT7Ba~~,EAAAC,~~EAAAT~~,CAAA,IAVJI,EAAAP,CAAA,IAAAA,~~EAAAa~~,~~GAOYjB~~,QAAAA,CAAO,~~UAPnBI~~,OAEG,~~gDACyBN~~,EAAI,CAAA,GAC7BH,KAAQ,~~kDAJXoB~~,EAAAC,~~EAAAZ~~,CAAA,MAFO"}
1	+ {"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/segmentedcontrol/SegmentedControl.svelte"],"sourcesContent":["<svelte:options\n customElement={{\n tag: 'm-segmented-control',\n props: {\n full: { reflect: true, type: 'Boolean', attribute: 'full' },\n },\n }}\n/>\n\n<script lang=\"ts\">\n /*\n A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.\n \n @event change {CustomEvent<number \| string \| undefined>} - Emits when the selected segment changes.\n /\n interface Props {\n /\n Defines the currently active tab.\n \n - If a `number` is provided, it represents the index of the segment.\n * - If a `string` is provided, it must match the `id` of one of the segments.\n /\n selected?: number \| string;\n /\n if `true`, the segmented control take the full width.\n /\n full?: boolean;\n /\n Determines the size of the segmented control.\n /\n size?: 's' \| 'm';\n /\n An array of objects that allows you to provide all the data needed to generate the content for each segment.\n /\n segments: Array<{\n /\n Unique identifier for the segment.\n /\n id?: string;\n /\n The label displayed for the segment.\n */\n label: string;\n }>;\n }\n\n let { selected = $bindable(0), full, size = 's', segments }: Props = $props();\n let element: HTMLElement;\n\n const onClick = (index: number, id?: string) => {\n const value = typeof selected === 'string' ? id \|\| '' : index;\n selected = value;\n\n const event = new CustomEvent('change', {\n detail: value,\n bubbles: true,\n composed: true,\n });\n element.dispatchEvent(event);\n };\n\n const isSegmentSelected = (index: number, id?: string) => {\n const value = typeof selected === 'string' ? id \|\| '' : index;\n return selected === value;\n };\n</script>\n\n<div\n class={[\n 'mc-segmented-control',\n `mc-segmented-control--${size}`,\n full && 'mc-segmented-control--full',\n ]}\n role=\"radiogroup\"\n bind:this={element}\n>\n {#each segments as segment, index (index)}\n <button\n type=\"button\"\n class={[\n 'mc-segmented-control__segment',\n isSegmentSelected(index, segment.id) && 'mc-segmented-control__segment--selected',\n ]}\n role=\"radio\"\n tabindex={isSegmentSelected(index, segment.id) ? 0 : -1}\n aria-checked={isSegmentSelected(index, segment.id) ? 'true' : 'false'}\n onclick={() => onClick(index, segment.id)}\n >\n {segment.label}\n </button>\n {/each}\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/segmented-control';\n</style>\n"],"names":["selected","full","$.prop","$$props","size","segments","element","onClick","index","id","value","event","isSegmentSelected","div","root","segment","button","root_1","text","$.child","$.reset","$.set_class","$0","$.set_attribute","$1","$2","$.set_text","$.get","$.delegated","$.append","$$anchor","$$value"],"mappings":";;onDASA,gBAqCQ,IAAAA,oBAAqB,CAAC,EAAGC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,eAAO,GAAG,EAAEC,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACrDG,EAEE,MAAAC,EAAO,CAAIC,EAAeC,IAAgB,OACxCC,EAAK,OAAUV,EAAQ,GAAK,SAAWS,GAAM,GAAKD,EACxDR,EAAWU,CAAK,EAEV,MAAAC,EAAK,IAAO,YAAY,UAC5B,OAAQD,EACR,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBJ,EAAQ,cAAcK,CAAK,CAC7B,EAEMC,EAAiB,CAAIJ,EAAeC,IAAgB,OAClDC,EAAK,OAAUV,EAAQ,GAAK,SAAWS,GAAM,GAAKD,EACjD,OAAAR,EAAQ,IAAKU,CACtB,mDAlB2B,EAAC,0FAAgB,IAAG,iEAqBhDG,EAAAC,EAAA,WAAAD,EAAA,GASQR,OAAYU,EAAOP,IAAA,CACvB,IAAAQ,EAAAC,EAAA,EAAAC,EAAAC,EAAAH,EAAA,EAAA,EAAAI,EAAAJ,CAAA,cAAAK,EAAAL,EAAA,EAAAM,EAAA,gBAAA,EAAAC,EAAAP,EAAA,WAAAQ,CAAA,EAAAD,EAAAP,EAAA,eAAAS,CAAA,EAWEC,EAAAR,EAAAS,EAAAZ,CAAO,EAAC,KAAK,WARZ,gCACAH,EAAkBJ,EAAKmB,EAAEZ,CAAO,EAAC,EAAE,GAAK,gDAGhCH,EAAkBJ,EAAKmB,EAAEZ,CAAO,EAAC,EAAE,EAAI,EAAC,OACpCH,EAAkBJ,EAAKmB,EAAEZ,CAAO,EAAC,EAAE,EAAI,OAAS,UAR/Da,EAAA,QAAAZ,EAAA,IASgBT,EAAQC,EAAKmB,EAAEZ,CAAO,EAAC,EAAE,CAAA,EATzCc,EAAAC,EAAAd,CAAA,IAVJI,EAAAP,CAAA,IAAAA,EAAAkB,GAOYzB,QAAAA,CAAO,UAPnBO,OAEG,gDACyBT,EAAI,CAAA,GAC7BH,KAAQ,kDAJX4B,EAAAC,EAAAjB,CAAA,MAFO"}