@mozaic-ds/web-components 1.6.0 → 1.7.0

package/dist/components/phonenumber/PhoneNumber.svelte

@@ -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

@@ -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 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,i as o,C as G,b as A,d as H,w as J,f as E,m as d,t as N,j as Q,l as T,u as B,r as U}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 j}from"../../this.js";var Y=E('<input type="text" inputmode="numeric" maxlength="1" pattern="\\d*" autocomplete="one-time-code"/>'),Z=E('<div class="mc-pincode-input svelte-h63szf"></div>');const $={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 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),j(r,(a,P)=>o(_)[P]=a,a=>o(_)?.[a],()=>[t]),N(()=>{I(r,"id",`pincodeItem${t}`),Q(r,1,T(["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)}),U(f),j(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"}));
 //# sourceMappingURL=Pincode.js.map

package/dist/components/popover/Popover.js

@@ -1,4 +1,4 @@
-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,u as pe,b as _,d as ae,f as b,h as o,m as v,r as t,j as se,l as ve,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;}

package/dist/components/quantityselector/QuantitySelector.js

@@ -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,u as V,b as R,d as T,f as U,n as W,h as n,m as s,r as i,j as X,l as Y,k 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:`/**
  * 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 {
+ */.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=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));
 //# sourceMappingURL=QuantitySelector.js.map

package/dist/components/quantityselector/QuantitySelector.svelte

@@ -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

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

@@ -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 A,e as D,a as F,p as a,t as g,b as k,d as G,f as E,m as i,h as w,s as R,r as _,j as y,l as x,i as o,k 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:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-radio.svelte-clvmul {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-radio__label.svelte-clvmul {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-radio__input.svelte-clvmul {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease 200ms;height:1.25rem;width:1.25rem;position:relative;}.mc-radio__input.svelte-clvmul::before {border-radius:var(--border-radius-full, 100%);content:"";display:block;height:0.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:0.5rem;}.mc-radio__input.svelte-clvmul:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-clvmul:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-radio__input.svelte-clvmul:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-clvmul:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-clvmul:checked, .mc-radio__input.svelte-clvmul:disabled {border-color:transparent;}.mc-radio__input.svelte-clvmul:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-clvmul:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-clvmul:disabled + .mc-radio__label:where(.svelte-clvmul) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-clvmul:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-clvmul:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-clvmul:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
 
 /* stylelint-disable string-no-newline */.mc-field__content.svelte-clvmul {margin-top:0.5rem;}
 
-/* stylelint-enable string-no-newline */.mc-field__content.svelte-clvmul:where(.mc-field__content--inline:where(.svelte-clvmul)) {display:flex;flex-flow:row wrap;gap:0.25rem 1rem;}`};function M(p,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 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=w(v);C(r);var h,f=R(r,2),j=w(f,!0);_(f),_(v),g(()=>{y(r,1,x(["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(()=>y(n,1,x(["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));
 //# sourceMappingURL=RadioGroup.js.map

package/dist/components/segmentedcontrol/README.md

@@ -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

@@ -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,b as v,d as F,f as y,m as a,h as G,r as b,l as _,i as c,j as k,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);b(r),p((C,E,j)=>{k(r,1,C,"svelte-1p6odhf"),x(r,"tabindex",E),x(r,"aria-checked",j),H(S,c(t).label)},[()=>_(["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)),v(e,r)}),b(l),L(l,e=>g=e,()=>g),p(()=>k(l,1,_(["mc-segmented-control",`mc-segmented-control--${i()}`,m()&&"mc-segmented-control--full"]),"svelte-1p6odhf")),v(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

@@ -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"}
+{"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"}

package/dist/components/segmentedcontrol/SegmentedControl.spec.js

@@ -2,15 +2,25 @@ import { describe, it, expect, vi } from 'vitest';
 import { render, fireEvent } from '@testing-library/svelte';
 import SegmentedControl from './SegmentedControl.svelte';
 describe('m-segmented-control component', () => {
-    const baseProps = {
+    const numberBasedProps = {
         segments: [{ label: 'Segment 1' }, { label: 'Segment 2' }, { label: 'Segment 3' }],
         selected: 1,
         size: 's',
         full: false,
     };
+    const stringBasedProps = {
+        segments: [
+            { id: '1', label: 'Segment 1' },
+            { id: '2', label: 'Segment 2' },
+            { id: '3', label: 'Segment 3' },
+        ],
+        selected: '2',
+        size: 's',
+        full: false,
+    };
     it('renders correct number of segments with labels', () => {
         const { getAllByRole } = render(SegmentedControl, {
-            props: baseProps,
+            props: numberBasedProps,
         });
         const buttons = getAllByRole('radio');
         expect(buttons.length).toBe(3);
@@ -18,32 +28,59 @@ describe('m-segmented-control component', () => {
         expect(buttons[1].textContent).toBe('Segment 2');
         expect(buttons[2].textContent).toBe('Segment 3');
     });
-    it('sets the correct initial selected segment', () => {
-        const { getAllByRole } = render(SegmentedControl, { props: baseProps });
-        const buttons = getAllByRole('radio');
-        expect(buttons[1].getAttribute('aria-checked')).toBe('true');
-        expect(buttons[1].tabIndex).toBe(0);
-        expect(buttons[0].getAttribute('aria-checked')).toBe('false');
-        expect(buttons[0].tabIndex).toBe(-1);
+    describe('Segment selection - number type', () => {
+        it('sets the correct initial selected segment', () => {
+            const { getAllByRole } = render(SegmentedControl, { props: numberBasedProps });
+            const buttons = getAllByRole('radio');
+            expect(buttons[1].getAttribute('aria-checked')).toBe('true');
+            expect(buttons[1].tabIndex).toBe(0);
+            expect(buttons[0].getAttribute('aria-checked')).toBe('false');
+            expect(buttons[0].tabIndex).toBe(-1);
+        });
+        it('updates selected segment and dispatches event on click', async () => {
+            const { container, getAllByRole } = render(SegmentedControl, {
+                props: numberBasedProps,
+            });
+            const buttons = getAllByRole('radio');
+            const handler = vi.fn();
+            container.firstChild?.addEventListener('change', handler);
+            await fireEvent.click(buttons[2]);
+            expect(handler).toHaveBeenCalledTimes(1);
+            expect(handler.mock.calls[0][0].detail).toBe(2);
+            expect(buttons[2].getAttribute('aria-checked')).toBe('true');
+            expect(buttons[2].tabIndex).toBe(0);
+            expect(buttons[1].getAttribute('aria-checked')).toBe('false');
+            expect(buttons[1].tabIndex).toBe(-1);
+        });
     });
-    it('updates selected segment and dispatches event on click', async () => {
-        const { container, getAllByRole } = render(SegmentedControl, {
-            props: baseProps,
+    describe('Segment selection - string type', () => {
+        it('sets the correct initial selected segment', () => {
+            const { getAllByRole } = render(SegmentedControl, { props: stringBasedProps });
+            const buttons = getAllByRole('radio');
+            expect(buttons[1].getAttribute('aria-checked')).toBe('true');
+            expect(buttons[1].tabIndex).toBe(0);
+            expect(buttons[0].getAttribute('aria-checked')).toBe('false');
+            expect(buttons[0].tabIndex).toBe(-1);
+        });
+        it('updates selected segment and dispatches event on click', async () => {
+            const { container, getAllByRole } = render(SegmentedControl, {
+                props: stringBasedProps,
+            });
+            const buttons = getAllByRole('radio');
+            const handler = vi.fn();
+            container.firstChild?.addEventListener('change', handler);
+            await fireEvent.click(buttons[2]);
+            expect(handler).toHaveBeenCalledTimes(1);
+            expect(handler.mock.calls[0][0].detail).toBe('3');
+            expect(buttons[2].getAttribute('aria-checked')).toBe('true');
+            expect(buttons[2].tabIndex).toBe(0);
+            expect(buttons[1].getAttribute('aria-checked')).toBe('false');
+            expect(buttons[1].tabIndex).toBe(-1);
         });
-        const buttons = getAllByRole('radio');
-        const handler = vi.fn();
-        container.firstChild?.addEventListener('change', handler);
-        await fireEvent.click(buttons[2]);
-        expect(handler).toHaveBeenCalledTimes(1);
-        expect(handler.mock.calls[0][0].detail).toBe(2);
-        expect(buttons[2].getAttribute('aria-checked')).toBe('true');
-        expect(buttons[2].tabIndex).toBe(0);
-        expect(buttons[1].getAttribute('aria-checked')).toBe('false');
-        expect(buttons[1].tabIndex).toBe(-1);
     });
     it('applies size and full classes correctly', () => {
         const { container } = render(SegmentedControl, {
-            props: { ...baseProps, size: 'm', full: true },
+            props: { ...numberBasedProps, size: 'm', full: true },
         });
         const rootDiv = container.querySelector('.mc-segmented-control');
         expect(rootDiv.classList.contains('mc-segmented-control--m')).toBe(true);

package/dist/components/segmentedcontrol/SegmentedControl.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.stories.d.ts","sourceRoot":"","sources":["../../../src/components/segmentedcontrol/SegmentedControl.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,2BAA2B,CAAC;AAEnC,QAAA,MAAM,IAAI,EAAE,IA4CX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}
+{"version":3,"file":"SegmentedControl.stories.d.ts","sourceRoot":"","sources":["../../../src/components/segmentedcontrol/SegmentedControl.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,2BAA2B,CAAC;AAEnC,QAAA,MAAM,IAAI,EAAE,IAiDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}

package/dist/components/segmentedcontrol/SegmentedControl.stories.js

@@ -16,17 +16,22 @@ const meta = {
         },
     },
     args: {
+        selected: 'label2',
         segments: [
             {
+                id: 'label1',
                 label: 'Label',
             },
             {
+                id: 'label2',
                 label: 'Label',
             },
             {
+                id: 'label3',
                 label: 'Label',
             },
             {
+                id: 'label4',
                 label: 'Label',
             },
         ],
@@ -35,7 +40,7 @@ const meta = {
         const onChange = action('change');
         return html `
       <m-segmented-control
-        selected=${ifDefined(args.selected)}
+        selected="${args.selected}"
         ?full=${args.full}
         size=${ifDefined(args.size)}
         .segments=${ifDefined(args.segments)}

package/dist/components/segmentedcontrol/SegmentedControl.svelte

@@ -11,13 +11,16 @@
   /**
    * 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.
    *
-   * @event change {CustomEvent<number>} - Emits when the selected segment changes.
+   * @event change {CustomEvent<number | string | undefined>} - Emits when the selected segment changes.
    */
   interface Props {
     /**
-     * The selected segment index, bound via v-model.
+     * 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.
      */
-    selected?: number;
+    selected?: number | string;
     /**
      * if `true`, the segmented control take the full width.
      */
@@ -30,6 +33,10 @@
      * An array of objects that allows you to provide all the data needed to generate the content for each segment.
      */
     segments: Array<{
+      /**
+       * Unique identifier for the segment.
+       */
+      id?: string;
       /**
        * The label displayed for the segment.
        */
@@ -40,16 +47,22 @@
   let { selected = $bindable(0), full, size = 's', segments }: Props = $props();
   let element: HTMLElement;
 
-  const onClick = (index: number) => {
-    selected = index;
+  const onClick = (index: number, id?: string) => {
+    const value = typeof selected === 'string' ? id || '' : index;
+    selected = value;
 
     const event = new CustomEvent('change', {
-      detail: index,
+      detail: value,
       bubbles: true,
       composed: true,
     });
     element.dispatchEvent(event);
   };
+
+  const isSegmentSelected = (index: number, id?: string) => {
+    const value = typeof selected === 'string' ? id || '' : index;
+    return selected === value;
+  };
 </script>
 
 <div
@@ -66,12 +79,12 @@
       type="button"
       class={[
         'mc-segmented-control__segment',
-        selected === index && 'mc-segmented-control__segment--selected',
+        isSegmentSelected(index, segment.id) && 'mc-segmented-control__segment--selected',
       ]}
       role="radio"
-      tabindex={selected === index ? 0 : -1}
-      aria-checked={selected === index ? 'true' : 'false'}
-      onclick={() => onClick(index)}
+      tabindex={isSegmentSelected(index, segment.id) ? 0 : -1}
+      aria-checked={isSegmentSelected(index, segment.id) ? 'true' : 'false'}
+      onclick={() => onClick(index, segment.id)}
     >
       {segment.label}
     </button>

package/dist/components/segmentedcontrol/SegmentedControl.svelte.d.ts

@@ -1,13 +1,16 @@
 /**
  * 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.
  *
- * @event change {CustomEvent<number>} - Emits when the selected segment changes.
+ * @event change {CustomEvent<number | string | undefined>} - Emits when the selected segment changes.
  */
 interface Props {
     /**
-     * The selected segment index, bound via v-model.
+     * 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.
      */
-    selected?: number;
+    selected?: number | string;
     /**
      * if `true`, the segmented control take the full width.
      */
@@ -20,6 +23,10 @@ interface Props {
      * An array of objects that allows you to provide all the data needed to generate the content for each segment.
      */
     segments: Array<{
+        /**
+         * Unique identifier for the segment.
+         */
+        id?: string;
         /**
          * The label displayed for the segment.
          */

package/dist/components/segmentedcontrol/SegmentedControl.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/segmentedcontrol/SegmentedControl.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC;QACd;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;CACJ;AA6CH,QAAA,MAAM,gBAAgB,mDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SegmentedControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/segmentedcontrol/SegmentedControl.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC;QACd;;WAEG;QACH,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;CACJ;AAmDH,QAAA,MAAM,gBAAgB,mDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/select/Select.js

@@ -1,4 +1,4 @@
-import{c as A,e as D,a as F,p as t,k as Y,t as w,b as z,d as q,f as y,n as G,j as d,i as a,r as c,m as C,s as H,h as I,l as v}from"../../custom-element.js";import{i as J}from"../../if.js";import{e as K,i as N}from"../../each.js";import{a as O,d as P}from"../../attributes.js";import{c as Q}from"../../custom-element-forward-events.js";import"../../branches.js";var R=y('<option disabled="" selected=""> </option>'),T=y("<option> </option>"),U=y("<div><select><!><!></select></div>");const V={hash:"svelte-6nznl5",code:`/**
+import{c as A,e as D,a as F,p as t,s as Y,t as w,b as z,d as q,f as y,n as G,h as d,m as a,r as c,k as C,i as v,j as H,l as I}from"../../custom-element.js";import{i as J}from"../../if.js";import{e as K,i as N}from"../../each.js";import{a as O,d as P}from"../../attributes.js";import{c as Q}from"../../custom-element-forward-events.js";import"../../branches.js";var R=y('<option disabled="" selected=""> </option>'),T=y("<option> </option>"),U=y("<div><select><!><!></select></div>");const V={hash:"svelte-6nznl5",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-select.svelte-6nznl5 {position:relative;display:block;width:100%;}.mc-select.svelte-6nznl5::after {content:"";pointer-events:none;position:absolute;top:50%;right:1rem;transform:translateY(-50%);width:1rem;height:1rem;background-color:var(--forms-color-icon-interactive, #000000);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%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='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-select__control.svelte-6nznl5 {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);height:3rem;padding:0 3rem 0 0.75rem;background-position:right 1rem center;border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;border-radius:var(--border-radius-s, 0.25rem);}.mc-select__control.svelte-6nznl5:hover {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-select__control.svelte-6nznl5:focus {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-select__control.svelte-6nznl5:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-select__control--readonly.svelte-6nznl5 {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-select__control.is-invalid.svelte-6nznl5 {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-select__control.is-invalid.svelte-6nznl5:hover {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-select--s.svelte-6nznl5 .mc-select__control:where(.svelte-6nznl5) {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);height:2rem;padding:0 2rem 0 0.5rem;background-position:right 0.5rem center;}

package/dist/components/sidebar/Sidebar.js

@@ -1,4 +1,4 @@
-import{c as M,e as B,a as S,p as v,B as I,k as l,t as q,b as D,d as P,f as Q,j as o,i as u,r as i,s as R,h as A,l as F,w as G}from"../../custom-element.js";import{o as H}from"../../index-client.js";import{s as d}from"../../slot.js";import{b as J}from"../../this.js";import{q as K}from"../../Condition20.js";import{I as N}from"../iconbutton/IconButton.js";import{M as O}from"../../media-query.js";import"../../attributes.js";import"../../if.js";import"../../branches.js";import"../loader/Loader.js";var T=Q('<aside><div class="mc-sidebar__wrapper svelte-l14y5r"><!> <!> <section class="mc-sidebar__container svelte-l14y5r"><nav class="mc-sidebar__menu svelte-l14y5r" aria-label="navigation items"><ul class="mc-sidebar__list svelte-l14y5r"><!></ul></nav></section> <!></div> <span class="mc-sidebar__close-button svelte-l14y5r"><!></span></aside>');const U={hash:"svelte-l14y5r",code:`/**
+import{c as M,e as B,a as S,p as v,B as I,s as l,t as q,b as D,d as P,f as Q,h as o,m as u,r as i,j as R,l as A,i as F,w as G}from"../../custom-element.js";import{o as H}from"../../index-client.js";import{s as d}from"../../slot.js";import{b as J}from"../../this.js";import{q as K}from"../../Condition20.js";import{I as N}from"../iconbutton/IconButton.js";import{M as O}from"../../media-query.js";import"../../attributes.js";import"../../if.js";import"../../branches.js";import"../loader/Loader.js";var T=Q('<aside><div class="mc-sidebar__wrapper svelte-l14y5r"><!> <!> <section class="mc-sidebar__container svelte-l14y5r"><nav class="mc-sidebar__menu svelte-l14y5r" aria-label="navigation items"><ul class="mc-sidebar__list svelte-l14y5r"><!></ul></nav></section> <!></div> <span class="mc-sidebar__close-button svelte-l14y5r"><!></span></aside>');const U={hash:"svelte-l14y5r",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-sidebar.svelte-l14y5r {display:flex;align-items:start;font-size:var(--font-size-100, 0.875rem);color:var(--sidebar-color-text-default, #404040);box-sizing:border-box;background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));padding-right:4rem;position:relative;}
 @media screen and (min-width: 680px) {.mc-sidebar.svelte-l14y5r {display:inline-flex;padding-right:0;}

package/dist/components/sidebarexpandableitem/SidebarExpandableItem.js

@@ -1,4 +1,4 @@
-import{o as ee,c as ae,e as te,a as se,p as B,l as u,y as ie,x as re,b as f,d as le,v as C,i as K,j as a,k as p,r as t,q as E,t as P,m as R,C as m,u as X,f as S}from"../../custom-element.js";import{i as L}from"../../if.js";import{a as oe,s as D}from"../../slot.js";import{c as M,s as w}from"../../attributes.js";import{b as G}from"../../this.js";import{u as ne}from"../../floating-item.svelte.js";import{p as de}from"../../Condition20.js";import{g as H,s as ce}from"../../sidebar-state.svelte.js";import"../../branches.js";import"../../media-query.js";var me=S('<span class="mc-sidebar__icon svelte-1c38lw3"><!></span>'),be=S('<li class="mc-sidebar__item svelte-1c38lw3"><details class="mc-sidebar__link-expand svelte-1c38lw3" open=""><summary class="mc-sidebar__link svelte-1c38lw3"><!> <span class="mc-sidebar__text svelte-1c38lw3"> </span> <span class="mc-sidebar__sub svelte-1c38lw3"><!></span></summary> <ul class="mc-sidebar__sublist svelte-1c38lw3"><!></ul></details></li>'),ve=S('<span class="mc-sidebar__icon svelte-1c38lw3"><!></span>'),_e=S('<div class="mc-sidebar__item svelte-1c38lw3"><button class="mc-sidebar__trigger mc-sidebar__link svelte-1c38lw3" aria-haspopup="listbox"><!></button> <div class="mc-sidebar__floating-item mc-sidebar__floating-item--hidden svelte-1c38lw3" tabindex="0" role="menu"><div class="mc-sidebar__listbox svelte-1c38lw3"><h3 class="mc-sidebar__listbox-title svelte-1c38lw3"> </h3> <ul class="mc-sidebar__list svelte-1c38lw3"><!></ul></div></div></div>');const ue={hash:"svelte-1c38lw3",code:`/**
+import{o as ee,c as ae,e as te,a as se,p as B,i as u,y as ie,x as re,b as f,d as le,v as C,m as K,h as a,s as p,r as t,q as E,t as R,k as X,C as m,u as j,f as S}from"../../custom-element.js";import{i as L}from"../../if.js";import{a as oe,s as D}from"../../slot.js";import{c as M,s as w}from"../../attributes.js";import{b as G}from"../../this.js";import{u as ne}from"../../floating-item.svelte.js";import{p as de}from"../../Condition20.js";import{g as H,s as ce}from"../../sidebar-state.svelte.js";import"../../branches.js";import"../../media-query.js";var me=S('<span class="mc-sidebar__icon svelte-1c38lw3"><!></span>'),be=S('<li class="mc-sidebar__item svelte-1c38lw3"><details class="mc-sidebar__link-expand svelte-1c38lw3" open=""><summary class="mc-sidebar__link svelte-1c38lw3"><!> <span class="mc-sidebar__text svelte-1c38lw3"> </span> <span class="mc-sidebar__sub svelte-1c38lw3"><!></span></summary> <ul class="mc-sidebar__sublist svelte-1c38lw3"><!></ul></details></li>'),ve=S('<span class="mc-sidebar__icon svelte-1c38lw3"><!></span>'),_e=S('<div class="mc-sidebar__item svelte-1c38lw3"><button class="mc-sidebar__trigger mc-sidebar__link svelte-1c38lw3" aria-haspopup="listbox"><!></button> <div class="mc-sidebar__floating-item mc-sidebar__floating-item--hidden svelte-1c38lw3" tabindex="0" role="menu"><div class="mc-sidebar__listbox svelte-1c38lw3"><h3 class="mc-sidebar__listbox-title svelte-1c38lw3"> </h3> <ul class="mc-sidebar__list svelte-1c38lw3"><!></ul></div></div></div>');const ue={hash:"svelte-1c38lw3",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 @media screen and (min-width: 680px) {
@@ -14,5 +14,5 @@ import{o as ee,c as ae,e as te,a as se,p as B,l as u,y as ie,x as re,b as f,d as
 @media screen and (min-width: 680px) {
 }
 @media screen and (min-width: 680px) {
-}.mc-sidebar__listbox.svelte-1c38lw3 {min-width:18.75rem;border-radius:var(--border-radius-m, 0.5rem);background-color:var(--listbox-color-background, #ffffff);padding:1rem;display:flex;flex-direction:column;gap:0.25rem;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%));}.mc-sidebar__listbox-title.svelte-1c38lw3 {font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);padding-bottom:0.75rem;margin:0;border-bottom:1px solid var(--divider-color-primary, #cccccc);color:var(--sidebar-color-shortcut-item-text-default, #404040);}.mc-sidebar__list.svelte-1c38lw3 {list-style-type:none;margin:0;padding:0;}.mc-sidebar__link.svelte-1c38lw3 {display:flex;align-items:center;gap:0.25rem;height:2.5rem;width:100%;padding-left:0.25rem;text-align:left;text-decoration:none;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--sidebar-color-section-item-text-default, #404040);border-radius:var(--border-radius-m, 0.5rem);background:transparent;border:none;cursor:pointer;}.mc-sidebar__link.svelte-1c38lw3:not(.mc-sidebar__link--selected):hover {background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));}.mc-sidebar__link.svelte-1c38lw3: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-sidebar__link-expand.svelte-1c38lw3:open .mc-sidebar__sub:where(.svelte-1c38lw3) {transform:rotate(180deg);}.mc-sidebar__link.svelte-1c38lw3:is(summary:where(.svelte-1c38lw3)) .mc-sidebar__text:where(.svelte-1c38lw3) {flex-grow:1;}.mc-sidebar__icon.svelte-1c38lw3 {fill:currentcolor;width:1.5rem;height:1.5rem;}.mc-sidebar__text.svelte-1c38lw3 {display:block;}.mc-sidebar__sub.svelte-1c38lw3 {width:1.25rem;height:1.25rem;}.mc-sidebar__sublist.svelte-1c38lw3 {list-style-type:none;margin:0;padding:0 0 0 2rem;display:flex;flex-direction:column;gap:0.25rem;}.mc-sidebar__item.svelte-1c38lw3 {position:relative;}`};function fe(T,l){const j=oe(l);te(l,!0),se(T,ue);let b=B(l,"id",23,()=>crypto.randomUUID()),g=B(l,"label",7),z=B(l,"menulabel",7),U=C(null),A=C(null);const{floatingItemIsDisplayed:J,hideFloatingItem:h,showFloatingItem:q,onTriggerKeydown:O,onListboxKeydown:Q}=ne(()=>u(U),()=>u(A));let F=C(!1);var V={get id(){return b()},set id(s=crypto.randomUUID()){b(s),K()},get label(){return g()},set label(s){g(s),K()},get menulabel(){return z()},set menulabel(s){z(s),K()}},N=ie(),W=re(N);{var Y=s=>{var r=be(),e=a(r),d=a(e),x=a(d);{var o=n=>{var _=me(),$=a(_);D($,l,"icon",{},null),t(_),f(n,_)};L(x,n=>{j.icon&&n(o)})}var c=p(x,2),v=a(c,!0);t(c);var y=p(c,2),k=a(y);de(k,{}),t(y),t(d);var I=p(d,2),i=a(I);D(i,l,"default",{},null),t(I),t(e),t(r),M(r,()=>H({setExpanded:n=>E(F,n,!0)})),M(r,()=>ce("M-SIDEBAR-EXPANDABLE-ITEM")),P(()=>{w(d,"aria-label",g()),R(v,g())}),f(s,r)},Z=s=>{var r=_e(),e=a(r),d=a(e);{var x=i=>{var n=ve(),_=a(n);D(_,l,"icon",{},null),t(n),f(i,n)};L(d,i=>{j.icon&&i(x)})}t(e),G(e,i=>E(U,i),()=>u(U));var o=p(e,2),c=a(o),v=a(c),y=a(v,!0);t(v);var k=p(v,2),I=a(k);D(I,l,"default",{},null),t(k),t(c),t(o),G(o,i=>E(A,i),()=>u(A)),t(r),M(r,()=>H({setExpanded:i=>E(F,i,!0)})),P(()=>{w(e,"id",b()),w(e,"aria-expanded",J),w(e,"aria-controls",`listbox-${b()}`),w(o,"id",`listbox-${b()}`),R(y,z())}),m("mouseenter",e,q),m("focus",e,q),X("keydown",e,O),m("mouseleave",e,h),m("blur",e,h),X("keydown",o,Q),m("mouseleave",o,h),m("blur",o,h),f(s,r)};L(W,s=>{u(F)?s(Y):s(Z,!1)})}return f(T,N),le(V)}ee(["keydown"]);customElements.define("m-sidebar-expandable-item",ae(fe,{id:{},label:{},menulabel:{}},["icon","default"],[],{mode:"open"}));
+}.mc-sidebar__listbox.svelte-1c38lw3 {min-width:18.75rem;border-radius:var(--border-radius-m, 0.5rem);background-color:var(--listbox-color-background, #ffffff);padding:1rem;display:flex;flex-direction:column;gap:0.25rem;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%));}.mc-sidebar__listbox-title.svelte-1c38lw3 {font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);padding-bottom:0.75rem;margin:0;border-bottom:1px solid var(--divider-color-primary, #cccccc);color:var(--sidebar-color-shortcut-item-text-default, #404040);}.mc-sidebar__list.svelte-1c38lw3 {list-style-type:none;margin:0;padding:0;}.mc-sidebar__link.svelte-1c38lw3 {display:flex;align-items:center;gap:0.25rem;height:2.5rem;width:100%;padding-left:0.25rem;text-align:left;text-decoration:none;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--sidebar-color-section-item-text-default, #404040);border-radius:var(--border-radius-m, 0.5rem);background:transparent;border:none;cursor:pointer;}.mc-sidebar__link.svelte-1c38lw3:not(.mc-sidebar__link--selected):hover {background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));}.mc-sidebar__link.svelte-1c38lw3: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-sidebar__link-expand.svelte-1c38lw3:open .mc-sidebar__sub:where(.svelte-1c38lw3) {transform:rotate(180deg);}.mc-sidebar__link.svelte-1c38lw3:is(summary:where(.svelte-1c38lw3)) .mc-sidebar__text:where(.svelte-1c38lw3) {flex-grow:1;}.mc-sidebar__icon.svelte-1c38lw3 {fill:currentcolor;width:1.5rem;height:1.5rem;}.mc-sidebar__text.svelte-1c38lw3 {display:block;}.mc-sidebar__sub.svelte-1c38lw3 {width:1.25rem;height:1.25rem;}.mc-sidebar__sublist.svelte-1c38lw3 {list-style-type:none;margin:0;padding:0 0 0 2rem;display:flex;flex-direction:column;gap:0.25rem;}.mc-sidebar__item.svelte-1c38lw3 {position:relative;}`};function fe(T,l){const q=oe(l);te(l,!0),se(T,ue);let b=B(l,"id",23,()=>crypto.randomUUID()),h=B(l,"label",7),z=B(l,"menulabel",7),U=C(null),A=C(null);const{floatingItemIsDisplayed:J,hideFloatingItem:g,showFloatingItem:N,onTriggerKeydown:O,onListboxKeydown:Q}=ne(()=>u(U),()=>u(A));let F=C(!1);var V={get id(){return b()},set id(s=crypto.randomUUID()){b(s),K()},get label(){return h()},set label(s){h(s),K()},get menulabel(){return z()},set menulabel(s){z(s),K()}},P=ie(),W=re(P);{var Y=s=>{var r=be(),e=a(r),d=a(e),x=a(d);{var o=n=>{var _=me(),$=a(_);D($,l,"icon",{},null),t(_),f(n,_)};L(x,n=>{q.icon&&n(o)})}var c=p(x,2),v=a(c,!0);t(c);var y=p(c,2),k=a(y);de(k,{}),t(y),t(d);var I=p(d,2),i=a(I);D(i,l,"default",{},null),t(I),t(e),t(r),M(r,()=>H({setExpanded:n=>E(F,n,!0)})),M(r,()=>ce("M-SIDEBAR-EXPANDABLE-ITEM")),R(()=>{w(d,"aria-label",h()),X(v,h())}),f(s,r)},Z=s=>{var r=_e(),e=a(r),d=a(e);{var x=i=>{var n=ve(),_=a(n);D(_,l,"icon",{},null),t(n),f(i,n)};L(d,i=>{q.icon&&i(x)})}t(e),G(e,i=>E(U,i),()=>u(U));var o=p(e,2),c=a(o),v=a(c),y=a(v,!0);t(v);var k=p(v,2),I=a(k);D(I,l,"default",{},null),t(k),t(c),t(o),G(o,i=>E(A,i),()=>u(A)),t(r),M(r,()=>H({setExpanded:i=>E(F,i,!0)})),R(()=>{w(e,"id",b()),w(e,"aria-expanded",J),w(e,"aria-controls",`listbox-${b()}`),w(o,"id",`listbox-${b()}`),X(y,z())}),m("mouseenter",e,N),m("focus",e,N),j("keydown",e,O),m("mouseleave",e,g),m("blur",e,g),j("keydown",o,Q),m("mouseleave",o,g),m("blur",o,g),f(s,r)};L(W,s=>{u(F)?s(Y):s(Z,-1)})}return f(T,P),le(V)}ee(["keydown"]);customElements.define("m-sidebar-expandable-item",ae(fe,{id:{},label:{},menulabel:{}},["icon","default"],[],{mode:"open"}));
 //# sourceMappingURL=SidebarExpandableItem.js.map

package/dist/components/sidebarfooter/SidebarFooter.js

@@ -1,4 +1,4 @@
-import{o as xe,c as we,e as ye,a as ze,p as x,l as o,k as v,q as O,t as S,b as a,d as Le,v as K,w as J,f as s,j as g,i as w,y as N,x as P,r as p,u as Ie,s as je,h as Ee,m as ne}from"../../custom-element.js";import{i as l}from"../../if.js";import{s as ae}from"../../slot.js";import{c as Oe}from"../../svelte-component.js";import{e as Se}from"../../svelte-element.js";import{c as de,a as Fe,s as V}from"../../attributes.js";import{b as W}from"../../this.js";import{m as De,n as Me,c as Te}from"../../Condition20.js";import{D as Ce}from"../divider/Divider.js";import{I as Ke}from"../iconbutton/IconButton.js";import{_ as ce}from"./_SidebarFooterMenu.js";import{u as Pe}from"../../floating-item.svelte.js";import{g as Ae,s as Be}from"../../sidebar-state.svelte.js";import{M as Re}from"../../media-query.js";import"../../branches.js";import"../loader/Loader.js";import"../sidebarnavitem/SidebarNavItem.js";import"../../index-client.js";import"../tooltip/Tooltip.js";var qe=s('<img class="mc-sidebar__footer-avatar svelte-15fp7dn" loading="lazy"/>'),Qe=s('<p class="mc-sidebar__footer-title svelte-15fp7dn"> </p>'),Ue=s('<p class="mc-sidebar__footer-subtitle svelte-15fp7dn"> </p>'),Ge=s('<div class="mc-sidebar__footer-content svelte-15fp7dn"><!> <!></div>'),He=s("<!> <!> <!>",1),Je=s('<span class="mc-sidebar__footer-expand svelte-15fp7dn"><!></span>'),Ne=s('<button class="mc-button mc-button--icon-button mc-button--ghost mc-sidebar__footer-expand--mobile svelte-15fp7dn" aria-label="Profile menu"><!> <!></button>'),Ve=s('<footer><!> <div class="mc-sidebar__footer-container svelte-15fp7dn"><!> <!> <!></div></footer>');const We={hash:"svelte-15fp7dn",code:`/**
+import{o as xe,c as we,e as ye,a as ze,p as x,i as o,s as v,q as O,t as S,b as a,d as Le,v as K,w as J,f as s,h as g,m as w,y as N,x as P,r as p,u as Ie,j as je,l as Ee,k as ne}from"../../custom-element.js";import{i as l}from"../../if.js";import{s as ae}from"../../slot.js";import{c as Oe}from"../../svelte-component.js";import{e as Se}from"../../svelte-element.js";import{c as de,a as Fe,s as V}from"../../attributes.js";import{b as W}from"../../this.js";import{m as De,n as Me,c as Te}from"../../Condition20.js";import{D as Ce}from"../divider/Divider.js";import{I as Ke}from"../iconbutton/IconButton.js";import{_ as ce}from"./_SidebarFooterMenu.js";import{u as Pe}from"../../floating-item.svelte.js";import{g as Ae,s as Be}from"../../sidebar-state.svelte.js";import{M as Re}from"../../media-query.js";import"../../branches.js";import"../loader/Loader.js";import"../sidebarnavitem/SidebarNavItem.js";import"../../index-client.js";import"../tooltip/Tooltip.js";var qe=s('<img class="mc-sidebar__footer-avatar svelte-15fp7dn" loading="lazy"/>'),Qe=s('<p class="mc-sidebar__footer-title svelte-15fp7dn"> </p>'),Ue=s('<p class="mc-sidebar__footer-subtitle svelte-15fp7dn"> </p>'),Ge=s('<div class="mc-sidebar__footer-content svelte-15fp7dn"><!> <!></div>'),He=s("<!> <!> <!>",1),Je=s('<span class="mc-sidebar__footer-expand svelte-15fp7dn"><!></span>'),Ne=s('<button class="mc-button mc-button--icon-button mc-button--ghost mc-sidebar__footer-expand--mobile svelte-15fp7dn" aria-label="Profile menu"><!> <!></button>'),Ve=s('<footer><!> <div class="mc-sidebar__footer-container svelte-15fp7dn"><!> <!> <!></div></footer>');const We={hash:"svelte-15fp7dn",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-sidebar.svelte-15fp7dn {display:flex;align-items:start;font-size:var(--font-size-100, 0.875rem);color:var(--sidebar-color-text-default, #404040);box-sizing:border-box;background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));padding-right:4rem;position:relative;}
 @media screen and (min-width: 680px) {.mc-sidebar.svelte-15fp7dn {display:inline-flex;padding-right:0;}