@mozaic-ds/web-components 1.5.1 → 1.6.0

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

@@ -5,7 +5,7 @@ import './QuantitySelector.svelte';
 const meta = {
     title: 'Form Elements/Quantity Selector',
     component: 'm-quantityselector',
-    subcomponents: { 'Field': 'm-field' },
+    subcomponents: { Field: 'm-field' },
     args: {
         id: 'quantitySelectorId',
         value: 10,

package/dist/components/quantityselector/QuantitySelector.svelte

@@ -227,18 +227,18 @@
   height: 2.5rem;
   width: 2.5rem;
   border-radius: var(--border-radius-full, 100%);
-  color: var(--quantity-selector-color-button-text-default, #242938);
+  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:disabled {
-  color: var(--quantity-selector-color-button-text-disabled, #d9d9d9);
+  color: var(--quantity-selector-color-button-text-disabled, #b3b3b3);
   cursor: not-allowed;
 }
 .mc-quantity-selector__button:hover:not(:disabled) {
-  background-color: var(--quantity-selector-color-button-background-hover, rgba(255, 255, 255, 0.1));
+  background-color: var(--quantity-selector-color-button-background-hover, rgba(0, 0, 0, 0.05));
 }
 .mc-quantity-selector__button--decrease {
   order: -1;

package/dist/components/radio/Radio.js

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

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

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

package/dist/components/radiogroup/RadioGroup.js

@@ -1,8 +1,8 @@
-import{c as A,p as D,a as F,b as a,t as g,f as k,g as G,h as E,j as i,r as _,l as w,m as y,d as x,s as R,n as o,e 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,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:`/**
  * 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),u=a(t,"inline",7),v=a(t,"isinvalid",7);var B={get value(){return s()},set value(e){s(e),i()},get name(){return c()},set name(e){c(e),i()},get options(){return d()},set options(e){d(e),i()},get inline(){return u()},set inline(e){u(e),i()},get isinvalid(){return v()},set isinvalid(e){v(e),i()}},n=K();return q(n,21,d,e=>e.id,(e,l)=>{var m=J(),r=x(m);C(r);var h,f=R(r,2),j=x(f,!0);_(f),_(m),g(()=>{w(r,1,y(["mc-radio__input",v()&&"is-invalid"]),"svelte-clvmul"),b(r,"id",o(l).id),b(r,"name",c()),r.disabled=o(l).disabled,h!==(h=o(l).value)&&(r.value=(r.__value=o(l).value)??""),b(f,"for",o(l).id),S(j,o(l).label)}),H(z,[],r,()=>(o(l).value,s()),s),k(e,m)}),_(n),g(()=>w(n,1,y(["mc-field__content",u()&&"mc-field__content--inline"]),"svelte-clvmul")),k(p,n),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:{}},[],[],!0,I));
+/* stylelint-enable string-no-newline */.mc-field__content.svelte-clvmul:where(.mc-field__content--inline:where(.svelte-clvmul)) {display:flex;flex-flow:row wrap;gap:0.25rem 1rem;}`};function M(p,t){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));
 //# sourceMappingURL=RadioGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radiogroup/RadioGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-radio-group',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      inline: { reflect: true, type: 'Boolean', attribute: 'inline' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.\n   */\n  interface Props {\n    /**\n     * The name attribute for the radio element, typically used for form submission.\n     */\n    name: string;\n    /**\n     * The current value of the radio group.\n     */\n    value?: string;\n    /**\n     * list of properties of each radio button of the radio group\n     */\n    options: Array<{\n      id: string;\n      label: string;\n      value: string;\n      disabled?: boolean;\n    }>;\n    /**\n     * If `true`, applies an invalid state to the radio group.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, make the form element of the group inline.\n     */\n    inline?: boolean;\n  }\n\n  let { value = $bindable(), name, options, inline, isinvalid }: Props = $props();\n</script>\n\n<div class={['mc-field__content', inline && 'mc-field__content--inline']}>\n  {#each options as option (option.id)}\n    <div class=\"mc-radio mc-field__item\">\n      <input\n        type=\"radio\"\n        class={['mc-radio__input', isinvalid && 'is-invalid']}\n        id={option.id}\n        {name}\n        bind:group={value}\n        value={option.value}\n        disabled={option.disabled}\n      />\n      <label for={option.id} class=\"mc-radio__label\">{option.label}</label>\n    </div>\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/radio';\n  @use '@mozaic-ds/styles/components/field';\n\n  .mc-field__content:where(.mc-field__content--inline) {\n    display: flex;\n    flex-flow: row wrap;\n    gap: 0.25rem 1rem;\n  }\n</style>\n"],"names":["value","$.prop","$$props","name","options","inline","isinvalid","div","root","option","$$anchor","div_1","root_1","input","$.child","$.remove_input_defaults","label","$.sibling","$.set_class","$.clsx","$.get","$.set_attribute","input_value","$.set_text","text","$.template_effect","customElementForwardEvents"],"mappings":";;;;;;sMAYA,+BAiCQA,EAAKC,EAAAC,EAAA,QAAA,EAAA,EAAgBC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAEE,EAAOH,EAAAC,EAAA,UAAA,CAAA,EAAEG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EAAEI,EAASL,EAAAC,EAAA,YAAA,CAAA,iQAG5DK,EAAGC,EAAA,WAAHD,EAAG,GACKH,EAAWK,GAAQA,EAAO,GAAE,CAAAC,EAAjBD,IAAM,KACrBE,EAAGC,EAAA,EACDC,EAAAC,EADFH,CAAG,EACDI,EAAAF,CAAA,QASAG,EAAKC,EATLJ,EAAA,CAAA,MASAG,EAAK,EAAA,IAALA,CAAK,IAVPL,CAAG,SACDO,EAAAL,EAAA,EAAAM,EAAA,CAES,kBAAmBb,KAAa,YAAY,CAAA,EAAA,eAAA,IAFrDO,EAAA,KAAAO,EAGKX,CAAM,EAAC,EAAE,EAHdY,EAAAR,EAAA,OAIEV,GAAI,EAJNU,EAAA,SAAAO,EAOWX,CAAM,EAAC,SADVa,KAAAA,EAAAF,EAAAX,CAAM,EAAC,SANfI,EAAA,OAAAA,EAAA,QAAAO,EAMQX,CAAM,EAAC,QAAK,MAGpBO,EAAK,MAAAI,EAAMX,CAAM,EAAC,EAAE,EAA2Bc,EAAAC,EAAAJ,EAAAX,CAAM,EAAC,KAAK,WAT3DI,OAMQO,EAAAX,CAAM,EAAC,MADFT,EAAK,GAALA,OANfW,CAAG,MAFPJ,CAAG,EAAHkB,EAAA,IAAAP,EAAAX,EAAG,EAAAY,EAAA,CAAS,oBAAqBd,EAAM,GAAI,2BAA2B,CAAA,EAAA,eAAA,CAAA,MAAtEE,CAAG,MAFI,oOAtCImB"}
+{"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"}

package/dist/components/radiogroup/RadioGroup.svelte

@@ -181,13 +181,17 @@
   color: var(--field-color-validation-valid, #117f03);
 }
 .mc-field__validation-message.is-valid::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' 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");
+  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 {
   color: var(--field-color-validation-invalid, #c61112);
 }
 .mc-field__validation-message.is-invalid::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' 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");
+  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 {
   color: var(--field-color-validation-loading, #666666);

package/dist/components/segmentedcontrol/SegmentedControl.js

@@ -1,4 +1,4 @@
-import{o as z,c as C,p as E,a as j,b as l,t as u,f as h,g as S,h as k,j as c,r as v,l as p,m as b,d as B,e as D,n as q}from"../../custom-element.js";import{e as A,i as F}from"../../each.js";import{s as _}from"../../attributes.js";import{b as G}from"../../this.js";var H=k('<button type="button" role="radio"> </button>'),I=k('<div role="radiogroup"></div>');const J={hash:"svelte-1p6odhf",code:`/**
+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:`/**
  * 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 K(g,r){E(r,!0),j(g,J);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=I();return A(s,21,m,F,(e,f,n)=>{var t=H();t.__click=()=>x(n);var w=B(t,!0);v(t),u(()=>{p(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)}),h(e,t)}),v(s),G(s,e=>i=e,()=>i),u(()=>p(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(K,{full:{attribute:"full",reflect:!0,type:"Boolean"},selected:{},size:{},segments:{}},[],[],!0));
+ */.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"}));
 //# 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,EAAAD,EASC,QAAO,IAAQN,EAAQC,CAAK,EAT7B,IAAAO,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,IAXfS,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>} - 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"}

package/dist/components/select/Select.js

@@ -1,7 +1,7 @@
-import{c as j,p as A,a as D,b as t,s as F,f as g,g as q,h as y,i as G,d as p,j as a,r as w,t as k,e as E,n}from"../../custom-element.js";import{i as H}from"../../if.js";import{e as I,i as J}from"../../each.js";import{a as K,c as N}from"../../attributes.js";import{c as O}from"../../custom-element-forward-events.js";import"../../branches.js";var P=y("<option disabled selected> </option>"),Q=y("<option> </option>"),R=y("<select><!><!></select>");const T={hash:"svelte-6nznl5",code:`/**
+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:`/**
  * Do not edit directly, this file was auto-generated.
  */
-/* stylelint-disable string-no-newline */.mc-select.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;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' 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");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;background-repeat:no-repeat;background-size:1rem;border-radius:var(--border-radius-s, 0.25rem);}.mc-select.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.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.svelte-6nznl5:disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' 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");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--readonly.svelte-6nznl5 {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-select.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.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 {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;}
+/* 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;}
 
-/* stylelint-enable string-no-newline */`};function U(z,r){A(r,!0),D(z,T);let d=t(r,"id",7),c=t(r,"name",7),v=t(r,"value",15),i=t(r,"placeholder",7),m=t(r,"size",7,"m"),u=t(r,"isinvalid",7),f=t(r,"disabled",7),b=t(r,"readonly",7),h=t(r,"options",7),C=G(r,["$$slots","$$events","$$legacy","$$host","id","name","value","placeholder","size","isinvalid","disabled","readonly","options"]);var B={get id(){return d()},set id(e){d(e),a()},get name(){return c()},set name(e){c(e),a()},get value(){return v()},set value(e){v(e),a()},get placeholder(){return i()},set placeholder(e){i(e),a()},get size(){return m()},set size(e="m"){m(e),a()},get isinvalid(){return u()},set isinvalid(e){u(e),a()},get disabled(){return f()},set disabled(e){f(e),a()},get readonly(){return b()},set readonly(e){b(e),a()},get options(){return h()},set options(e){h(e),a()}},s=R();K(s,()=>({id:d(),class:["mc-select",`mc-select--${m()}`,b()&&"mc-select--readonly",u()&&"is-invalid"],name:c(),disabled:f(),...C}),void 0,void 0,void 0,"svelte-6nznl5");var _=p(s);{var L=e=>{var o=P(),l=p(o);w(o),o.value=o.__value="",k(()=>E(l,`-- ${i()??""} --`)),g(e,o)};H(_,e=>{i()&&e(L)})}var M=F(_);return I(M,17,h,J,(e,o)=>{var l=Q(),S=p(l,!0);w(l);var x={};k(()=>{l.disabled=n(o).disabled,E(S,n(o).text),x!==(x=n(o).value)&&(l.value=(l.__value=n(o).value)??"")}),g(e,l)}),w(s),N(s,v),g(z,s),q(B)}customElements.define("m-select",j(U,{options:{attribute:"options",type:"Array"},isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},id:{},name:{},value:{},placeholder:{},size:{}},[],[],!0,O));
+/* stylelint-enable string-no-newline */`};function W(x,r){D(r,!0),F(x,V);let m=t(r,"id",7),u=t(r,"name",7),f=t(r,"value",15),s=t(r,"placeholder",7),h=t(r,"size",7,"m"),b=t(r,"isinvalid",7),g=t(r,"disabled",7),p=t(r,"readonly",7),_=t(r,"options",7),B=G(r,["$$slots","$$events","$$legacy","$$host","id","name","value","placeholder","size","isinvalid","disabled","readonly","options"]);var L={get id(){return m()},set id(e){m(e),a()},get name(){return u()},set name(e){u(e),a()},get value(){return f()},set value(e){f(e),a()},get placeholder(){return s()},set placeholder(e){s(e),a()},get size(){return h()},set size(e="m"){h(e),a()},get isinvalid(){return b()},set isinvalid(e){b(e),a()},get disabled(){return g()},set disabled(e){g(e),a()},get readonly(){return p()},set readonly(e){p(e),a()},get options(){return _()},set options(e){_(e),a()}},n=U(),i=d(n);O(i,()=>({id:m(),class:["mc-select__control",p()&&"mc-select__control--readonly",b()&&"is-invalid"],name:u(),disabled:g(),...B}),void 0,void 0,void 0,"svelte-6nznl5");var k=d(i);{var M=e=>{var o=R(),l=d(o);c(o),o.value=o.__value="",w(()=>C(l,`-- ${s()??""} --`)),z(e,o)};J(k,e=>{s()&&e(M)})}var S=Y(k);return K(S,17,_,N,(e,o)=>{var l=T(),j=d(l,!0);c(l);var E={};w(()=>{l.disabled=v(o).disabled,C(j,v(o).text),E!==(E=v(o).value)&&(l.value=(l.__value=v(o).value)??"")}),z(e,l)}),c(i),c(n),w(()=>H(n,1,I(["mc-select",`mc-select--${h()}`]),"svelte-6nznl5")),P(i,f),z(x,n),q(L)}customElements.define("m-select",A(W,{options:{attribute:"options",type:"Array"},isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},id:{},name:{},value:{},placeholder:{},size:{}},[],[],{mode:"open"},Q));
 //# sourceMappingURL=Select.js.map

package/dist/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-select',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A select component allows users to choose a single option from a predefined list within a native dropdown menu. It helps simplify input by displaying only relevant choices, reducing the need for manual text entry. Select components are commonly used in forms, settings, and filters where structured selection is required.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * A unique identifier for the select, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the select element, used for form submission.\n     */\n    name?: string;\n    /**\n     * Define the available choices for the select element.\n     */\n    options: Array<{\n      id?: string;\n      text: string;\n      value: string | number;\n      disabled?: boolean;\n    }>;\n    /**\n     * The current value of the select.\n     */\n    value?: string | number;\n    /**\n     * Text displayed when the select has no selected value.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the select is marked as invalid.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, the select is disabled and non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the select.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the select is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(),\n    placeholder,\n    size = 'm',\n    isinvalid,\n    disabled,\n    readonly,\n    options,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<select\n  {id}\n  class={[\n    'mc-select',\n    `mc-select--${size}`,\n    readonly && 'mc-select--readonly',\n    isinvalid && 'is-invalid',\n  ]}\n  {name}\n  {disabled}\n  bind:value\n  {...attrs}\n>\n  {#if placeholder}\n    <option value=\"\" disabled selected>\n      -- {placeholder} --\n    </option>\n  {/if}\n\n  {#each options as option, index (index)}\n    <option disabled={option.disabled} value={option.value}>\n      {option.text}\n    </option>\n  {/each}\n</select>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","size","isinvalid","disabled","readonly","options","attrs","$.rest_props","select","root","node","$.child","option_1","root_1","$$render","consequent","$.each","node_1","option","option_2","root_2","$.get","$.set_text","text_1","option_2_value","$.reset","$.bind_select_value","$.append","$$anchor","customElementForwardEvents"],"mappings":";;;;;0DAaA,oBAmDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,EAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,eAAO,GAAG,EACVC,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAQR,EAAAC,EAAA,WAAA,CAAA,EACRQ,EAAOT,EAAAC,EAAA,UAAA,CAAA,EACJS,EAAAC,EAAAV,EAAA,0WALI,IAAG,gOASbW,EAAAC,EAAA,IAAAD,WACEb,EAAE,SAED,0BACcM,EAAI,CAAA,GAClBG,EAAQ,GAAI,sBACZF,KAAa,mBAEdJ,EAAI,WACJK,EAAQ,KAELG,0CAXL,IAAAI,EAAAC,EAAAH,CAAA,iBAcII,EAAMC,EAAA,MAAND,CAAM,IAANA,CAAM,EAANA,QAAAA,EAAM,QAAA,mBACDZ,KAAW,EAAA,KAAA,CAAA,MADhBY,CAAM,WADJZ,EAAW,GAAAc,EAAAC,CAAA,eAMTC,OAAAA,EAAAC,EAAA,GAAAZ,OAAWa,IAAM,KACrBC,EAAMC,EAAA,MAAND,EAAM,EAAA,IAANA,CAAM,kBAANA,EAAM,SAAAE,EAAWH,CAAM,EAAC,SACtBI,EAAAC,EAAAF,EAAAH,CAAM,EAAC,IAAI,EAD4BM,KAAAA,EAAAH,EAAAH,CAAM,EAAC,SAAhDC,EAAM,OAANA,EAAM,QAAAE,EAAmCH,CAAM,EAAC,QAAK,UAArDC,CAAM,IApBVM,EAAAjB,CAAA,EAAAkB,EAAAlB,EAAAT,CAAA,EAAA4B,EAAAC,EAAApB,CAAA,MAFO,0TAlEIqB"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-select',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A select component allows users to choose a single option from a predefined list within a native dropdown menu. It helps simplify input by displaying only relevant choices, reducing the need for manual text entry. Select components are commonly used in forms, settings, and filters where structured selection is required.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * A unique identifier for the select, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the select element, used for form submission.\n     */\n    name?: string;\n    /**\n     * Define the available choices for the select element.\n     */\n    options: Array<{\n      id?: string;\n      text: string;\n      value: string | number;\n      disabled?: boolean;\n    }>;\n    /**\n     * The current value of the select.\n     */\n    value?: string | number;\n    /**\n     * Text displayed when the select has no selected value.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the select is marked as invalid.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, the select is disabled and non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the select.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the select is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(),\n    placeholder,\n    size = 'm',\n    isinvalid,\n    disabled,\n    readonly,\n    options,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<div class={[\n    'mc-select',\n    `mc-select--${size}`,\n  ]}\n>\n  <select\n    {id}\n    class={[\n      'mc-select__control',\n      readonly && 'mc-select__control--readonly',\n      isinvalid && 'is-invalid',\n    ]}\n    {name}\n    {disabled}\n    bind:value\n    {...attrs}\n  >\n    {#if placeholder}\n      <option value=\"\" disabled selected>\n        -- {placeholder} --\n      </option>\n    {/if}\n\n    {#each options as option, index (index)}\n      <option disabled={option.disabled} value={option.value}>\n        {option.text}\n      </option>\n    {/each}\n  </select>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","size","isinvalid","disabled","readonly","options","attrs","$.rest_props","div","root","select","$.child","node","option_1","root_1","$$render","consequent","$.each","node_1","option","option_2","root_2","$.get","$.set_text","text_1","option_2_value","$.reset","$.clsx","$.bind_select_value","customElementForwardEvents"],"mappings":";;;;;0DAaA,oBAmDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,EAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,eAAO,GAAG,EACVC,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAQR,EAAAC,EAAA,WAAA,CAAA,EACRQ,EAAOT,EAAAC,EAAA,UAAA,CAAA,EACJS,EAAAC,EAAAV,EAAA,0WALI,IAAG,gOASbW,EAAGC,EAAA,EAKDC,EAAAC,EALFH,CAAG,IAKDE,WACEf,EAAE,SAED,qBACAS,EAAQ,GAAI,+BACZF,KAAa,mBAEdJ,EAAI,WACJK,EAAQ,KAELG,0CAVL,IAAAM,EAAAD,EAAAD,CAAA,iBAaIG,EAAMC,EAAA,MAAND,CAAM,IAANA,CAAM,EAANA,QAAAA,EAAM,QAAA,mBACDb,KAAW,EAAA,KAAA,CAAA,MADhBa,CAAM,WADJb,EAAW,GAAAe,EAAAC,CAAA,eAMTC,OAAAA,EAAAC,EAAA,GAAAb,OAAWc,IAAM,KACrBC,EAAMC,EAAA,MAAND,EAAM,EAAA,IAANA,CAAM,kBAANA,EAAM,SAAAE,EAAWH,CAAM,EAAC,SACtBI,EAAAC,EAAAF,EAAAH,CAAM,EAAC,IAAI,EAD4BM,KAAAA,EAAAH,EAAAH,CAAM,EAAC,SAAhDC,EAAM,OAANA,EAAM,QAAAE,EAAmCH,CAAM,EAAC,QAAK,UAArDC,CAAM,IAnBVM,EAAAhB,CAAA,IALFF,CAAG,UAAHA,EAAG,EAAAmB,EAAA,CACA,YAAW,cACG1B,EAAI,CAAA,EAAA,CAAA,EAAA,eAAA,CAAA,EAGnB2B,EAAAlB,EAAAX,CAAA,MALFS,CAAG,MAFI,qUAlEIqB"}

package/dist/components/select/Select.spec.js

@@ -57,7 +57,7 @@ describe('m-select component', () => {
             props: { ...baseProps, readonly: true },
         });
         const select = container.querySelector('select');
-        expect(select.classList.contains('mc-select--readonly')).toBe(true);
+        expect(select.classList.contains('mc-select__control--readonly')).toBe(true);
     });
     it('applies the is-invalid class when isinvalid is true', () => {
         const { container } = render(Select, {
@@ -70,7 +70,7 @@ describe('m-select component', () => {
         const { container } = render(Select, {
             props: { ...baseProps, size: 's' },
         });
-        const select = container.querySelector('select');
+        const select = container.querySelector('.mc-select');
         expect(select.classList.contains('mc-select--s')).toBe(true);
     });
 });

package/dist/components/select/Select.stories.d.ts

@@ -3,7 +3,7 @@ import './Select.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
-export declare const WithValue: Story;
+export declare const Value: Story;
 export declare const Default: Story;
 export declare const Small: Story;
 export declare const Disabled: Story;

package/dist/components/select/Select.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,iBAAiB,CAAC;AAEzB,QAAA,MAAM,IAAI,EAAE,IAiEX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,iBAAiB,CAAC;AAEzB,QAAA,MAAM,IAAI,EAAE,IAiEX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/select/Select.stories.js

@@ -5,7 +5,7 @@ import './Select.svelte';
 const meta = {
     title: 'Form Elements/Select',
     component: 'm-select',
-    subcomponents: { 'Field': 'm-field' },
+    subcomponents: { Field: 'm-field' },
     argTypes: {
         size: {
             control: 'radio',
@@ -68,7 +68,7 @@ const meta = {
     },
 };
 export default meta;
-export const WithValue = {
+export const Value = {
     args: {
         id: 'withValueId',
         value: 'option1',

package/dist/components/select/Select.svelte

@@ -75,37 +75,60 @@
   }: Props = $props();
 </script>
 
-<select
-  {id}
-  class={[
+<div class={[
     'mc-select',
     `mc-select--${size}`,
-    readonly && 'mc-select--readonly',
-    isinvalid && 'is-invalid',
   ]}
-  {name}
-  {disabled}
-  bind:value
-  {...attrs}
 >
-  {#if placeholder}
-    <option value="" disabled selected>
-      -- {placeholder} --
-    </option>
-  {/if}
+  <select
+    {id}
+    class={[
+      'mc-select__control',
+      readonly && 'mc-select__control--readonly',
+      isinvalid && 'is-invalid',
+    ]}
+    {name}
+    {disabled}
+    bind:value
+    {...attrs}
+  >
+    {#if placeholder}
+      <option value="" disabled selected>
+        -- {placeholder} --
+      </option>
+    {/if}
 
-  {#each options as option, index (index)}
-    <option disabled={option.disabled} value={option.value}>
-      {option.text}
-    </option>
-  {/each}
-</select>
+    {#each options as option, index (index)}
+      <option disabled={option.disabled} value={option.value}>
+        {option.text}
+      </option>
+    {/each}
+  </select>
+</div>
 
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */
 .mc-select {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+.mc-select::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 {
   appearance: none;
   font-family: inherit;
   transition: box-shadow 200ms ease;
@@ -114,47 +137,43 @@
   height: 3rem;
   padding: 0 3rem 0 0.75rem;
   background-position: right 1rem center;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' 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");
   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;
-  background-repeat: no-repeat;
-  background-size: 1rem;
   border-radius: var(--border-radius-s, 0.25rem);
 }
-.mc-select:hover {
+.mc-select__control: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:focus {
+.mc-select__control: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:disabled {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' 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");
+.mc-select__control: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--readonly {
+.mc-select__control--readonly {
   border-color: var(--forms-color-border-read-only, #cccccc);
   pointer-events: none;
 }
-.mc-select.is-invalid {
+.mc-select__control.is-invalid {
   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.is-invalid:hover {
+.mc-select__control.is-invalid: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 {
+.mc-select--s .mc-select__control {
   font-size: var(--font-size-100, 0.875rem);
   line-height: var(--line-height-s, 1.3);
   height: 2rem;

package/dist/components/select/Select.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC;QACb,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqDH,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC;QACb,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAyDH,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/sidebar/README.md

@@ -0,0 +1,28 @@
+# `m-sidebar`
+
+A sidebar is a vertical navigation component that provides quick access to key sections and functionalities within an application or website. It contains expandable menus, and shortcuts, allowing users to navigate efficiently while keeping the main content area uncluttered. Sidebars can be collapsible or persistent, adapting to different screen sizes and user preferences. They are commonly used in dashboards, content management systems, and productivity tools.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `expanded*` | Defines the sidebar state | `boolean` | `$bindable(true)` |
+| `onexpanded` | Callback to trigger when the sidebar state changes. | `(value: boolean) => void` |   |
+| `onclose` | Callback to trigger when the close button is clicked (mobile only). | `() => void` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `header` | Slot for the sidebar header. Should contain an `MSidebarHeader` component. |
+| `shortcuts` | Slot for sidebar shortcuts. Should contain an `MSidebarShortcuts` component with one or more `MSidebarShortcutItem` components inside. |
+| `nav` | Slot for the main navigation items. Should contain one or more `MSidebarNavItem` components. |
+| `footer` | Slot for the sidebar footer. Should contain an `MSidebarFooter` component. |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `update:expanded` | Emits when the sidebar state changes. | `CustomEvent<void>` |
+| `close` | Emits when the sidebar is closed (mobile only). | `CustomEvent<void>` |
+

package/dist/components/sidebar/Sidebar.js

@@ -0,0 +1,18 @@
+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:`/**
+ * 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;}
+}.mc-sidebar__wrapper.svelte-l14y5r {display:flex;flex-direction:column;gap:0.75rem;min-height:100vh;width:100%;padding:0.75rem;background-color:var(--sidebar-color-background-primary, #ffffff);}
+@media screen and (min-width: 680px) {.mc-sidebar__wrapper.svelte-l14y5r {width:17.25rem;}
+}.mc-sidebar__close-button.svelte-l14y5r {position:absolute;top:0.5rem;right:0.5rem;}
+@media screen and (min-width: 680px) {.mc-sidebar__close-button.svelte-l14y5r {display:none;}
+}.mc-sidebar__container.svelte-l14y5r {flex-grow:1;}.mc-sidebar__floating-item.svelte-l14y5r {position:absolute;padding-left:1.25rem;left:3rem;}.mc-sidebar__floating-item--tooltip.svelte-l14y5r {top:0.25rem;}.mc-sidebar__floating-item--expanded.svelte-l14y5r {left:0;padding:0;}
+@media screen and (min-width: 680px) {.mc-sidebar__floating-item--expanded.svelte-l14y5r {left:18.5rem;}
+}.mc-sidebar__floating-item--hidden.svelte-l14y5r {visibility:hidden;overflow:hidden;opacity:0;height:0;pointer-events:none;}.mc-sidebar--expanded.svelte-l14y5r .mc-sidebar__menu:where(.svelte-l14y5r) {padding:0 0.25rem;}.mc-sidebar--collapsed.svelte-l14y5r {width:4rem;}.mc-sidebar--collapsed.svelte-l14y5r .mc-sidebar__menu:where(.svelte-l14y5r) {padding:0;}.mc-sidebar__footer-container.svelte-l14y5r {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;margin-top:0.5rem;}.mc-sidebar__footer-avatar.svelte-l14y5r {width:2rem;height:2rem;border-radius:var(--border-radius-full, 100%);}.mc-sidebar__footer-profile.svelte-l14y5r {display:flex;align-items:center;gap:0.5rem;height:2.5rem;flex-grow:1;border-radius:var(--border-radius-s, 0.25rem);background-color:var(--sidebar-color-extra-feature-background-default, rgba(255, 255, 255, 0.01));cursor:pointer;border:none;}.mc-sidebar__footer-profile.svelte-l14y5r:hover {background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));}.mc-sidebar__footer-content.svelte-l14y5r {display:none;}.mc-sidebar__footer-title.svelte-l14y5r {margin:0;text-align:left;color:var(--sidebar-color-section-item-text-default, #404040);font-weight:var(--font-weight-bold, 700);}.mc-sidebar__footer-subtitle.svelte-l14y5r {margin:0;font-size:var(--font-caption, 0.75rem);color:var(--sidebar-color-job-title, #666666);}.mc-sidebar__footer-expand.svelte-l14y5r {display:none;min-width:2.5rem;min-height:2.5rem;width:2.5rem;height:2.5rem;transform:none;}
+@media screen and (min-width: 680px) {.mc-sidebar__footer-expand.svelte-l14y5r {display:inline-flex;}
+}.mc-sidebar__footer-expand--mobile.svelte-l14y5r {position:relative;}
+@media screen and (min-width: 680px) {.mc-sidebar__footer-expand--mobile.svelte-l14y5r {display:none;}
+}.mc-sidebar__footer-menu.svelte-l14y5r {width:19.75rem;box-sizing:border-box;padding:0.5rem 0.75rem;background-color:var(--listbox-color-background, #ffffff);border:1px solid var(--listbox-color-border, #cccccc);border-radius:var(--border-radius-m, 0.5rem);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%));}
+@media screen and (min-width: 680px) {.mc-sidebar__footer-menu.svelte-l14y5r {width:18.75rem;}
+}.mc-sidebar__header.svelte-l14y5r {display:flex;align-items:center;justify-content:center;gap:0.5rem;}.mc-sidebar__header-logo.svelte-l14y5r {width:2.5rem;height:2.5rem;}.mc-sidebar__header-title.svelte-l14y5r {font-size:var(--font-size-200, 1.125rem);font-weight:var(--font-weight-bold, 700);color:var(--sidebar-color-product-name, #000000);margin:0;flex-grow:1;display:none;}.mc-sidebar__listbox.svelte-l14y5r {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-l14y5r {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-l14y5r {list-style-type:none;margin:0;padding:0;}.mc-sidebar__link.svelte-l14y5r {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--selected.svelte-l14y5r {color:var(--sidebar-color-section-item-text-selected, #006902);background:var(--sidebar-color-section-item-background-selected, #ebf5de);}.mc-sidebar__link--locked.svelte-l14y5r {pointer-events:none;}.mc-sidebar__link.svelte-l14y5r:not(.mc-sidebar__link--selected):hover {background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));}.mc-sidebar__link.svelte-l14y5r: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__icon.svelte-l14y5r {fill:currentcolor;width:1.5rem;height:1.5rem;}.mc-sidebar__indicator.svelte-l14y5r {fill:currentcolor;width:1.25rem;height:1.25rem;}.mc-sidebar__text.svelte-l14y5r {display:block;}.mc-sidebar__sub.svelte-l14y5r {width:1.25rem;height:1.25rem;}.mc-sidebar__sublist.svelte-l14y5r {list-style-type:none;margin:0;padding:0 0 0 2rem;display:flex;flex-direction:column;gap:0.25rem;}.mc-sidebar__item.svelte-l14y5r {position:relative;}.mc-sidebar__shortcut-wrapper.svelte-l14y5r {width:100%;display:grid;justify-content:center;position:relative;}.mc-sidebar__shortcut-list.svelte-l14y5r {display:flex;margin:0;}.mc-sidebar__shortcut-list--grid.svelte-l14y5r {padding:0;gap:0.5rem;align-items:center;}.mc-sidebar__shortcut-list--stacked.svelte-l14y5r {gap:0.25rem;flex-direction:column;padding:0;}.mc-sidebar__shortcut-list--stacked.svelte-l14y5r:not(.mc-sidebar__shortcut-list--floating) {padding:0 0 0.5rem 1rem;margin-bottom:0.5rem;border-bottom:1px solid var(--divider-color-primary, #cccccc);}.mc-sidebar__shortcut-item.svelte-l14y5r {cursor:pointer;display:flex;align-items:center;list-style:none;border-radius:var(--border-radius-m, 0.5rem);overflow:hidden;}.mc-sidebar__shortcut-item.svelte-l14y5r:hover {background-color:var(--sidebar-color-shortcut-item-background-hover, rgba(70, 78, 99, 0.2));}.mc-sidebar__shortcut-item.svelte-l14y5r:nth-child(n+5) {display:none;}.mc-sidebar__shortcut-item--grid.svelte-l14y5r {justify-content:center;padding:0 0.125rem;height:3rem;width:3.9375rem;background-color:var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));}.mc-sidebar__shortcut-item--stacked.svelte-l14y5r {padding:0.125rem 0.25rem;width:12.5rem;height:2.5rem;}.mc-sidebar__shortcut-item--stacked.mc-sidebar__shortcut-item--floating.svelte-l14y5r {width:100%;padding:0.125rem 0 0.125rem 0.25rem;}.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item.svelte-l14y5r {background-color:var(--sidebar-color-shortcut-item-background-selected, #ebf5de);}.mc-sidebar__shortcut-item.svelte-l14y5r:is(.mc-sidebar__trigger:where(.svelte-l14y5r)) {width:3rem;height:3rem;justify-content:center;border:none;background-color:var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));}.mc-sidebar__shortcut-item.svelte-l14y5r:is(.mc-sidebar__trigger:where(.svelte-l14y5r)):hover {background-color:var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));}.mc-sidebar__shortcut-link.svelte-l14y5r: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__shortcut-link.svelte-l14y5r {text-decoration:none;display:flex;align-items:center;justify-content:center;}.mc-sidebar__shortcut-label.svelte-l14y5r {font-size:var(--font-size-25, 0.625rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--sidebar-color-shortcut-item-text-default, #404040);white-space:nowrap;overflow:hidden;}.mc-sidebar__shortcut-icon.svelte-l14y5r {fill:var(--sidebar-color-shortcut-item-text-default, #404040);width:1.5rem;height:1.5rem;}`};function V(f,r){B(r,!0),S(f,U);let t=v(r,"expanded",15,!0),n=v(r,"onexpanded",7),c=v(r,"onclose",7),a;const k=G(()=>new O("(max-width: 780px)").current);function h(){t(!t())}I(()=>{n()?.(t()),a.dispatchEvent(new CustomEvent("update:expanded",{detail:t(),bubbles:!0,composed:!0}))});function z(){c()?.(),a.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}function _(){F(k)&&t(!0)}H(()=>(document.addEventListener("toggle",h),window.addEventListener("resize",_),()=>{document.removeEventListener("toggle",h),window.removeEventListener("resize",_)}));var E={get expanded(){return t()},set expanded(e=!0){t(e),u()},get onexpanded(){return n()},set onexpanded(e){n(e),u()},get onclose(){return c()},set onclose(e){c(e),u()}},s=T(),m=o(s),p=o(m);d(p,r,"header",{},null);var g=l(p,2);d(g,r,"shortcuts",{},null);var b=l(g,2),y=o(b),x=o(y),j=o(x);d(j,r,"nav",{},null),i(x),i(y),i(b);var C=l(b,2);d(C,r,"footer",{},null),i(m);var w=l(m,2),L=o(w);return N(L,{ghost:!0,"aria-label":"Sidebar close button",onclick:z,$$slots:{icon:(e,W)=>{K(e,{slot:"icon"})}}}),i(w),i(s),J(s,e=>a=e,()=>a),q(()=>R(s,1,A(["mc-sidebar",`mc-sidebar--${t()?"expanded":"collapsed"}`]),"svelte-l14y5r")),D(f,s),P(E)}customElements.define("m-sidebar",M(V,{expanded:{attribute:"expanded",reflect:!0,type:"Boolean"},onexpanded:{},onclose:{}},["header","shortcuts","nav","footer"],[],{mode:"open"}));
+//# sourceMappingURL=Sidebar.js.map

package/dist/components/sidebar/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sources":["../../../src/components/sidebar/Sidebar.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-sidebar',\n    props: {\n      expanded: { reflect: true, type: 'Boolean', attribute: 'expanded' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { onMount } from 'svelte';\n  import { Cross24 } from '@mozaic-ds/icons-svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  import { MediaQuery } from 'svelte/reactivity';\n\n  /**\n   * A sidebar is a vertical navigation component that provides quick access to key sections and functionalities within an application or website. It contains expandable menus, and shortcuts, allowing users to navigate efficiently while keeping the main content area uncluttered. Sidebars can be collapsible or persistent, adapting to different screen sizes and user preferences. They are commonly used in dashboards, content management systems, and productivity tools.\n   * @slot header - Slot for the sidebar header. Should contain an `MSidebarHeader` component.\n   * @slot shortcuts - Slot for sidebar shortcuts. Should contain an `MSidebarShortcuts` component with one or more `MSidebarShortcutItem` components inside.\n   * @slot nav - Slot for the main navigation items. Should contain one or more `MSidebarNavItem` components.\n   * @slot footer - Slot for the sidebar footer. Should contain an `MSidebarFooter` component.\n   * @event update:expanded {CustomEvent<void>} - Emits when the sidebar state changes.\n   * @event close {CustomEvent<void>} - Emits when the sidebar is closed (mobile only).\n   */\n\n  interface Props {\n    /**\n     * Defines the sidebar state\n     */\n    expanded: boolean;\n    /**\n     * Callback to trigger when the sidebar state changes.\n     */\n    onexpanded?: (value: boolean) => void;\n    /**\n     * Callback to trigger when the close button is clicked (mobile only).\n     */\n    onclose?: () => void;\n  }\n\n  let { expanded = $bindable(true), onexpanded, onclose }: Props = $props();\n\n  let element: HTMLElement;\n\n  const isMobile = $derived(new MediaQuery('(max-width: 780px)').current);\n\n  function toggle() {\n    expanded = !expanded;\n  }\n\n  $effect(() => {\n    onexpanded?.(expanded);\n\n    element.dispatchEvent(\n      new CustomEvent('update:expanded', {\n        detail: expanded,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  });\n\n  function handleClose() {\n    onclose?.();\n    element.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n  }\n\n  function handleResize() {\n    if (isMobile) {\n      expanded = true;\n    }\n  }\n\n  onMount(() => {\n    document.addEventListener('toggle', toggle);\n    window.addEventListener('resize', handleResize);\n\n    return () => {\n      document.removeEventListener('toggle', toggle);\n      window.removeEventListener('resize', handleResize);\n    };\n  });\n</script>\n\n<aside\n  bind:this={element}\n  class={['mc-sidebar', `mc-sidebar--${expanded ? 'expanded' : 'collapsed'}`]}\n>\n  <div class=\"mc-sidebar__wrapper\">\n    <slot name=\"header\" />\n\n    <slot name=\"shortcuts\" />\n\n    <section class=\"mc-sidebar__container\">\n      <nav class=\"mc-sidebar__menu\" aria-label=\"navigation items\">\n        <ul class=\"mc-sidebar__list\">\n          <slot name=\"nav\" />\n        </ul>\n      </nav>\n    </section>\n\n    <slot name=\"footer\" />\n  </div>\n\n  <span class=\"mc-sidebar__close-button\">\n    <IconButton ghost aria-label=\"Sidebar close button\" onclick={handleClose}>\n      <Cross24 slot=\"icon\" />\n    </IconButton>\n  </span>\n</aside>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/sidebar';\n</style>\n"],"names":["expanded","onexpanded","$.prop","$$props","onclose","element","isMobile","$.derived","MediaQuery","toggle","$.user_effect","handleClose","handleResize","$.get","onMount","aside","root","div","$.child","section","$.sibling","node_1","nav","ul","span","IconButton","node_4","Cross24","$$anchor","$.reset","$$value","$.append"],"mappings":";;;;;;;;;;;;;;;;s3KASA,gBA+BQ,IAAAA,oBAAqB,EAAI,EAAGC,EAAUC,EAAAC,EAAA,aAAA,CAAA,EAAEC,EAAOF,EAAAC,EAAA,UAAA,CAAA,EAEjDE,EAEE,MAAAC,EAAQC,EAAA,IAAA,IAAgBC,EAAW,oBAAoB,EAAE,OAAO,EAE7D,SAAAC,GAAS,CAChBT,GAAYA,GAAQ,CACtB,CAEAU,EAAO,IAAO,CACZT,EAAU,IAAGD,GAAQ,EAErBK,EAAQ,cAAa,IACf,YAAY,kBAAiB,CAC/B,OAAQL,EAAQ,EAChB,QAAS,GACT,SAAU,EAAI,CAAA,CAAA,CAGpB,CAAC,EAEQ,SAAAW,GAAc,CACrBP,MAAO,EACPC,EAAQ,cAAa,IAAK,YAAY,QAAO,CAAI,QAAS,GAAM,SAAU,EAAI,CAAA,CAAA,CAChF,CAES,SAAAO,GAAe,CAClBC,EAAAP,CAAQ,GACVN,EAAW,EAAI,CAEnB,CAEAc,EAAO,KACL,SAAS,iBAAiB,SAAUL,CAAM,EAC1C,OAAO,iBAAiB,SAAUG,CAAY,EAEjC,IAAA,CACX,SAAS,oBAAoB,SAAUH,CAAM,EAC7C,OAAO,oBAAoB,SAAUG,CAAY,CACnD,EACD,mDAzC0B,GAAI,wHA4ChCG,EAAAC,EAAA,EAIEC,EAAGC,EAJLH,CAAA,MAIEE,CAAG,sEAKDE,EAAOC,EAAAC,EAAA,CAAA,EACLC,IADFH,CAAO,EAEHI,IADFD,CAAG,MACDC,CAAE,yBAAFA,CAAE,IADJD,CAAG,IADLH,CAAO,UAAPA,EAAO,CAAA,4BALTF,CAAG,EAgBH,IAAAO,IAhBAP,EAAG,CAAA,MAgBHO,CAAI,EACF,OAAAC,EAAUC,EAAA,sDAAkDf,wBAC1DgB,EAAOC,EAAA,CAAA,KAAA,MAAA,CAAA,QAFXJ,CAAI,EApBNK,EAAAd,CAAA,IAAAA,EAAAe,GACYzB,QAAAA,CAAO,UADnBU,OAES,4BAA6Bf,IAAW,WAAa,WAAW,uBAFzE+B,EAAAH,EAAAb,CAAA,MAFO"}