@mozaic-ds/web-components 1.2.0 → 1.4.0

package/dist/components/radiogroup/RadioGroup.js

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

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

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

package/dist/components/radiogroup/RadioGroup.stories.d.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './RadioGroup.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/radiogroup/RadioGroup.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAyDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
+{"version":3,"file":"RadioGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/radiogroup/RadioGroup.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAyDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

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

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
+import './RadioGroup.svelte';
 const meta = {
     title: 'Form Elements/Radio Group',
     component: 'm-radio-group',
@@ -40,8 +41,8 @@ const meta = {
         name=${ifDefined(args.name)}
         .options=${ifDefined(args.options)}
         value=${ifDefined(args.value)}
-        isinvalid=${ifDefined(args.isinvalid)}
-        inline=${ifDefined(args.inline)}
+        ?isinvalid=${args.isinvalid}
+        ?inline=${args.inline}
         @input=${(event) => {
             onInput(event);
         }}

package/dist/components/radiogroup/RadioGroup.svelte

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

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

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

package/dist/components/segmentedcontrol/SegmentedControl.js

@@ -1,4 +1,4 @@
-import{v as w,c as C,p as E,a as j,b as l,f as k,t as u,i as h,j as S,k as c,r as v,e as p,g as b,d as D,h as q,m as A}from"../../custom-element.js";import{e as B,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{u as w,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,n as p,o as b,d as q,e as B,q as D}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:`/**
  * 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;}.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),m=l(r,"size",7,"s"),a=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 m()},set size(e="s"){m(e),c()},get segments(){return a()},set segments(e){a(e),c()}},s=I();return B(s,21,a,F,(e,f,n)=>{var t=H();t.__click=()=>x(n);var z=D(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"),q(z,A(f).label)}),h(e,t)}),v(s),G(s,e=>i=e,()=>i),u(()=>p(s,1,b(["mc-segmented-control",`mc-segmented-control--${m()}`,d()&&"mc-segmented-control--full"]),"svelte-1p6odhf")),h(g,s),S(y)}w(["click"]);customElements.define("m-segmented-control",C(K,{selected:{},full:{},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;}.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),m=l(r,"size",7,"s"),a=l(r,"segments",7),f;const x=e=>{o(e);const i=new CustomEvent("change",{detail:e,bubbles:!0,composed:!0});f.dispatchEvent(i)};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 m()},set size(e="s"){m(e),c()},get segments(){return a()},set segments(e){a(e),c()}},s=I();return A(s,21,a,F,(e,i,n)=>{var t=H();t.__click=()=>x(n);var z=q(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"),B(z,D(i).label)}),h(e,t)}),v(s),G(s,e=>f=e,()=>f),u(()=>p(s,1,b(["mc-segmented-control",`mc-segmented-control--${m()}`,d()&&"mc-segmented-control--full"]),"svelte-1p6odhf")),h(g,s),S(y)}w(["click"]);customElements.define("m-segmented-control",C(K,{full:{attribute:"full",reflect:!0,type:"Boolean"},selected:{},size:{},segments:{}},[],[],!0));
 //# 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 customElement={{ tag: 'm-segmented-control' }} />\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","$.each","div","segment","button","$.set_attribute","$.set_text","text","$.get","$.bind_this","$$value"],"mappings":";;imDAAA,gBAgCQ,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,uEAwBxCC,OAAAA,EAAAC,EAAA,GAAAN,OAAYO,EAAOJ,IAAA,WAUPK,EAAA,QAAA,IAAAN,EAAQC,CAAK,qCAN1B,gCACAR,EAAQ,IAAKQ,GAAS,8DAGdM,EAAAD,EAAA,WAAAb,EAAQ,IAAKQ,EAAQ,IAAM,EACvBM,EAAAD,EAAA,eAAAb,EAAQ,IAAKQ,EAAQ,OAAS,OAAO,EAGlDO,EAAAC,EAAAC,EAAAL,CAAO,EAAC,KAAK,kBAdPM,EAAAP,EAAAQ,GAAAb,QAAAA,CAAO,iBALhB,gDACyBF,EAAI,CAAA,GAC7BH,KAAQ,6DANZ"}
+{"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":";;imDASA,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"}

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './SegmentedControl.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

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

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

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

@@ -1,9 +1,11 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
+import './SegmentedControl.svelte';
 const meta = {
     title: 'Action/Segmented Control',
     component: 'm-segmented-control',
+    tags: ['v2'],
     argTypes: {
         size: {
             control: 'radio',
@@ -34,7 +36,7 @@ const meta = {
         return html `
       <m-segmented-control
         selected=${ifDefined(args.selected)}
-        full=${ifDefined(args.full)}
+        ?full=${args.full}
         size=${ifDefined(args.size)}
         .segments=${ifDefined(args.segments)}
         @change=${(event) => {

package/dist/components/segmentedcontrol/SegmentedControl.svelte

@@ -1,4 +1,11 @@
-<svelte:options customElement={{ tag: 'm-segmented-control' }} />
+<svelte:options
+  customElement={{
+    tag: 'm-segmented-control',
+    props: {
+      full: { reflect: true, type: 'Boolean', attribute: 'full' },
+    },
+  }}
+/>
 
 <script lang="ts">
   /**

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

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

package/dist/components/select/Select.js

@@ -1,7 +1,7 @@
-import{c as j,p as A,a as D,b as a,f as x,d as g,s as F,t as p,i as w,j as q,k as t,r as _,h as E,e as G,g as H,m as n}from"../../custom-element.js";import{i as I}from"../../if.js";import{e as J,i as K}from"../../each.js";import{c as N,s as C}from"../../attributes.js";import{c as O}from"../../custom-element-forward-events.js";var P=x("<option disabled selected> </option>"),Q=x("<option> </option>"),R=x("<select><!><!></select>");const T={hash:"svelte-6nznl5",code:`/**
+import{c as j,p as q,a as A,b as t,s as D,f as g,g as F,h as y,i as G,d as p,j as a,r as w,t as k,e as E,q as d}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";var P=y("<option disabled selected> </option>"),Q=y("<option> </option>"),R=y("<select><!><!></select>");const T={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-enable string-no-newline */`};function U(z,r){A(r,!0),D(z,T);let d=a(r,"id",7),c=a(r,"name",7),v=a(r,"value",15),i=a(r,"placeholder",7),m=a(r,"size",7,"m"),u=a(r,"isinvalid",7),f=a(r,"disabled",7),b=a(r,"readonly",7),h=a(r,"options",7);var B={get id(){return d()},set id(e){d(e),t()},get name(){return c()},set name(e){c(e),t()},get value(){return v()},set value(e){v(e),t()},get placeholder(){return i()},set placeholder(e){i(e),t()},get size(){return m()},set size(e="m"){m(e),t()},get isinvalid(){return u()},set isinvalid(e){u(e),t()},get disabled(){return f()},set disabled(e){f(e),t()},get readonly(){return b()},set readonly(e){b(e),t()},get options(){return h()},set options(e){h(e),t()}},l=R(),y=g(l);{var L=e=>{var o=P(),s=g(o);_(o),o.value=o.__value="",p(()=>E(s,`-- ${i()??""} --`)),w(e,o)};I(y,e=>{i()&&e(L)})}var M=F(y);return J(M,17,h,K,(e,o)=>{var s=Q(),S=g(s,!0);_(s);var k={};p(()=>{s.disabled=n(o).disabled,E(S,n(o).text),k!==(k=n(o).value)&&(s.value=(s.__value=n(o).value)??"")}),w(e,s)}),_(l),p(()=>{C(l,"id",d()),G(l,1,H(["mc-select",`mc-select--${m()}`,b()&&"mc-select--readonly",u()&&"is-invalid"]),"svelte-6nznl5"),C(l,"name",c()),l.disabled=f()}),N(l,v),w(z,l),q(B)}customElements.define("m-select",j(U,{options:{attribute:"options",type:"Array"},id:{},name:{},value:{},placeholder:{},size:{},isinvalid:{},disabled:{},readonly:{}},[],[],!0,O));
+/* stylelint-enable string-no-newline */`};function U(z,r){q(r,!0),A(z,T);let n=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 n()},set id(e){n(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:n(),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=D(_);return I(M,17,h,J,(e,o)=>{var l=Q(),S=p(l,!0);w(l);var x={};k(()=>{l.disabled=d(o).disabled,E(S,d(o).text),x!==(x=d(o).value)&&(l.value=(l.__value=d(o).value)??"")}),g(e,l)}),w(s),N(s,v),g(z,s),F(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));
 //# 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    },\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    /**\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  }: 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>\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","$$render","consequent","$.each","node_1","option","option_2","$.get","$.set_text","text_1","option_2_value","customElementForwardEvents"],"mappings":";;;;;0DAAA,oBA4DIA,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,2OAJA,IAAG,mTAsBJG,KAAW,EAAA,KAAA,CAAA,kBAFdA,EAAW,GAAAM,EAAAC,CAAA,eAMTC,OAAAA,EAAAC,EAAA,GAAAJ,OAAWK,IAAM,0CACJC,EAAA,SAAAC,EAAAF,CAAM,EAAC,SACtBG,EAAAC,EAAAF,EAAAF,CAAM,EAAC,IAAI,EAD4BK,KAAAA,EAAAH,EAAAF,CAAM,EAAC,SAAPC,EAAA,OAAAA,EAAA,QAAAC,EAAAF,CAAM,EAAC,QAAK,kDAhBtD,0BACcT,EAAI,CAAA,GAClBG,EAAQ,GAAI,sBACZF,KAAa,mFARjB,+KAhEYc"}
+{"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"}

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Select.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

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;AAKrE,QAAA,MAAM,IAAI,EAAE,IAgEX,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,IAgEX,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"}

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

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
+import './Select.svelte';
 const meta = {
     title: 'Form Elements/Select',
     component: 'm-select',
@@ -45,10 +46,10 @@ const meta = {
         value=${ifDefined(args.value)}
         .options=${ifDefined(args.options)}
         placeholder=${ifDefined(args.placeholder)}
-        isinvalid=${ifDefined(args.isinvalid)}
-        disabled=${ifDefined(args.disabled)}
+        ?isinvalid=${args.isinvalid}
+        ?disabled=${args.disabled}
         size=${ifDefined(args.size)}
-        readonly=${ifDefined(args.readonly)}
+        ?readonly=${args.readonly}
         @input=${(event) => {
             onInput(event);
         }}

package/dist/components/select/Select.svelte

@@ -3,6 +3,9 @@
     tag: 'm-select',
     props: {
       options: { type: 'Array', attribute: 'options' },
+      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },
+      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
+      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },
     },
     extend: customElementForwardEvents,
   }}
@@ -14,6 +17,7 @@
    * 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.
    */
   interface Props {
+    [key: string]: any;
     /**
      * A unique identifier for the select, used to associate the label with the form element.
      */
@@ -67,6 +71,7 @@
     disabled,
     readonly,
     options,
+    ...attrs
   }: Props = $props();
 </script>
 
@@ -81,6 +86,7 @@
   {name}
   {disabled}
   bind:value
+  {...attrs}
 >
   {#if placeholder}
     <option value="" disabled selected>

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

@@ -2,6 +2,7 @@
  * 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.
  */
 interface Props {
+    [key: string]: any;
     /**
      * A unique identifier for the select, used to associate the label with the form element.
      */

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;;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;AAiDH,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;AAqDH,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/starrating/README.md

@@ -0,0 +1,22 @@
+# `m-star-rating`
+
+A Star rating visually represents a score or evaluation and can be used to display a rating or allow users to rate an item, such as a product or service. It serves two main purposes: collecting user feedback by enabling individuals to express their experience and providing social proof by displaying ratings from other users to assist decision-making. Rating Stars are commonly found in e-commerce, review systems, and feedback interfaces, offering a quick and intuitive way to assess quality or satisfaction.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `rating*` | The current rating value of the component. | `number` | `$bindable()` |
+| `readonly` | Determines whether the rating is interactive or read-only.
+When true, all user interactions (click, hover, keyboard) are disabled.
+Automatically set to true when `compact`, `href`, or `information` are provided. | `boolean` |   |
+| `size` | Defines the visual size of the star icons and the accompanying text. | `'s'` `'m'` `'l'` | `m` |
+| `compact` | Enables a compact display mode that shows only one star instead of five.
+Typically used for summaries or quick visual cues.
+When enabled, the component automatically becomes read-only. | `boolean` |   |
+| `appearance` | Specifies the color scheme of the stars. | `'standard'` `'accent'` | `standard` |
+| `text` | Optional text displayed next to the star rating.
+If provided, the component automatically becomes read-only. | `string` |   |
+| `href` | URL for the link. | `string` |   |
+| `target` | Where to open the link. | `'_self'` `'_blank'` `'_parent'` `'_top'` |   |
+

package/dist/components/starrating/StarRating.js

@@ -0,0 +1,4 @@
+import{c as W,p as X,a as Y,b as s,k as Z,l as M,f as y,g as $,j as i,q as t,r as A,s as ee,d as R,t as te,e as ae,x as v,h as j,v as C,w as re}from"../../custom-element.js";import{i as ne}from"../../if.js";import{e as se}from"../../each.js";import{c as ie}from"../../svelte-component.js";import{e as oe}from"../../svelte-element.js";import{a as V}from"../../attributes.js";import{c as le}from"../../custom-element-forward-events.js";import{S as ce,j as ve,k as me}from"../../Condition20.js";var fe=j("<span><!></span>"),ge=j('<span class="mc-star-rating__info svelte-17npafv"> </span>'),pe=j("<div></div> <!>",1);const de={hash:"svelte-17npafv",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-star-rating.svelte-17npafv {display:inline-flex;align-items:center;gap:0.5rem;}.mc-star-rating--standard.svelte-17npafv .mc-star-rating__icon:where(.svelte-17npafv) {fill:var(--star-rating-color-icon-standard, #000000);}.mc-star-rating--accent.svelte-17npafv .mc-star-rating__icon:where(.svelte-17npafv) {fill:var(--star-rating-color-icon-accent, #ea7315);}.mc-star-rating--slider.svelte-17npafv {cursor:pointer;}.mc-star-rating--link.svelte-17npafv {text-decoration:none;cursor:pointer;}.mc-star-rating--link.svelte-17npafv:not(:hover) .mc-star-rating__info:where(.svelte-17npafv) {text-decoration:underline;}.mc-star-rating--s.svelte-17npafv .mc-star-rating__icon:where(.svelte-17npafv) {width:1.25rem;height:1.25rem;}.mc-star-rating--s.svelte-17npafv .mc-star-rating__info:where(.svelte-17npafv) {font-size:var(--font-size-100, 0.875rem);}.mc-star-rating--m.svelte-17npafv .mc-star-rating__icon:where(.svelte-17npafv) {width:1.5rem;height:1.5rem;}.mc-star-rating--m.svelte-17npafv .mc-star-rating__info:where(.svelte-17npafv) {font-size:var(--font-size-150, 1rem);}.mc-star-rating--l.svelte-17npafv .mc-star-rating__icon:where(.svelte-17npafv) {width:2rem;height:2rem;}.mc-star-rating--l.svelte-17npafv .mc-star-rating__info:where(.svelte-17npafv) {font-size:var(--font-size-200, 1.125rem);}.mc-star-rating__wrapper.svelte-17npafv {display:flex;align-items:center;}.mc-star-rating__info.svelte-17npafv {font-weight:var(--font-weight-medium, 600);line-height:var(--line-height-s, 1.3);color:var(--star-rating-color-text, #000000);}.mc-star-rating__icon.svelte-17npafv svg {height:100%;width:100%;}`};function ue(B,a){X(a,!0),Y(B,de);let o=s(a,"rating",15),x=s(a,"readonly",7),p=s(a,"size",7,"m"),m=s(a,"compact",7),d=s(a,"appearance",7,"standard"),f=s(a,"text",7),r=s(a,"href",7),k=s(a,"target",7),b=re(null);const D=v(()=>r()?"a":"div"),g=v(()=>[x(),m(),r(),f()].some(Boolean)),F=v(()=>({"mc-star-rating":!0,"mc-star-rating--link":r(),"mc-star-rating--slider":!t(g),[`mc-star-rating--${p()}`]:p(),[`mc-star-rating--${d()}`]:d()})),z=v(()=>t(b)??o()),u=v(()=>m()?1:5);function q(e){return m()||t(z)>=e+1?ce:t(g)&&t(z)>=e+.5?ve:me}function K(e){C(b,e+1)}function E(){C(b,null)}function L(e){o(e+1)}function N(e){const h=e.key;let n=Math.floor(o());if(h==="ArrowRight")n=Math.min(t(u),n+1);else if(h==="ArrowLeft")n=Math.max(1,n-1);else return;o(n),e.preventDefault()}const O=v(()=>t(g)?{tabindex:-1}:{onkeydown:N,onmouseleave:E,onblur:E,tabindex:0,"aria-valuemin":0,"aria-valuemax":t(u),"aria-valuenow":o(),"aria-readonly":!1});var T={get rating(){return o()},set rating(e){o(e),i()},get readonly(){return x()},set readonly(e){x(e),i()},get size(){return p()},set size(e="m"){p(e),i()},get compact(){return m()},set compact(e){m(e),i()},get appearance(){return d()},set appearance(e="standard"){d(e),i()},get text(){return f()},set text(e){f(e),i()},get href(){return r()},set href(e){r(e),i()},get target(){return k()},set target(e){k(e),i()}},H=Z(),G=M(H);return oe(G,()=>t(D),!1,(e,h)=>{V(e,()=>({href:r(),target:k(),class:t(F)}),void 0,void 0,void 0,"svelte-17npafv");var n=pe(),_=M(n);V(_,()=>({class:"mc-star-rating__wrapper",role:t(g)?"img":"slider","aria-label":`Note ${t(z)} sur ${t(u)}`,...t(O)}),void 0,void 0,void 0,"svelte-17npafv"),se(_,20,()=>Array.from({length:t(u)}).keys(),l=>l,(l,c)=>{const S=v(()=>q(c));var w=fe();V(w,()=>({class:"mc-star-rating__icon",...t(g)?{}:{onmousemove:()=>K(c),onclick:()=>L(c)}}),void 0,void 0,void 0,"svelte-17npafv");var P=R(w);ie(P,()=>t(S),(Q,U)=>{U(Q,{})}),A(w),y(l,w)}),A(_);var I=ee(_,2);{var J=l=>{var c=ge(),S=R(c,!0);A(c),te(()=>ae(S,f()||r())),y(l,c)};ne(I,l=>{(f()||r())&&l(J)})}y(h,n)}),y(B,H),$(T)}customElements.define("m-star-rating",W(ue,{readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},compact:{attribute:"compact",reflect:!0,type:"Boolean"},rating:{},size:{},appearance:{},text:{},href:{},target:{}},[],[],!0,le));
+//# sourceMappingURL=StarRating.js.map

package/dist/components/starrating/StarRating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StarRating.js","sources":["../../../src/components/starrating/StarRating.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-star-rating',\n    props: {\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n      compact: { reflect: true, type: 'Boolean', attribute: 'compact' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import { Star24, StarFilled24, StarHalf24 } from '@mozaic-ds/icons-svelte';\n  /**\n   * A Star rating visually represents a score or evaluation and can be used to display a rating or allow users to rate an item, such as a product or service. It serves two main purposes: collecting user feedback by enabling individuals to express their experience and providing social proof by displaying ratings from other users to assist decision-making. Rating Stars are commonly found in e-commerce, review systems, and feedback interfaces, offering a quick and intuitive way to assess quality or satisfaction.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * The current rating value of the component.\n     */\n    rating: number;\n    /**\n     * Determines whether the rating is interactive or read-only.\n     * When true, all user interactions (click, hover, keyboard) are disabled.\n     * Automatically set to true when `compact`, `href`, or `information` are provided.\n     */\n    readonly?: boolean;\n    /**\n     * Defines the visual size of the star icons and the accompanying text.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * Enables a compact display mode that shows only one star instead of five.\n     * Typically used for summaries or quick visual cues.\n     * When enabled, the component automatically becomes read-only.\n     */\n    compact?: boolean;\n    /**\n     * Specifies the color scheme of the stars.\n     */\n    appearance?: 'standard' | 'accent';\n    /**\n     * Optional text displayed next to the star rating.\n     * If provided, the component automatically becomes read-only.\n     */\n    text?: string;\n    /**\n     * URL for the link.\n     */\n    href?: string;\n    /**\n     * Where to open the link.\n     */\n    target?: '_self' | '_blank' | '_parent' | '_top';\n  }\n\n  let {\n    rating = $bindable(),\n    readonly,\n    size = 'm',\n    compact,\n    appearance = 'standard',\n    text,\n    href,\n    target,\n  }: Props = $props();\n\n  let hoverValue: number | null = $state(null);\n  const rootTag = $derived(href ? 'a' : 'div');\n\n  const isReadonly = $derived([readonly, compact, href, text].some(Boolean));\n\n  const classObject = $derived({\n    'mc-star-rating': true,\n    'mc-star-rating--link': href,\n    'mc-star-rating--slider': !isReadonly,\n    [`mc-star-rating--${size}`]: size,\n    [`mc-star-rating--${appearance}`]: appearance,\n  });\n\n  const displayValue = $derived(hoverValue ?? rating);\n  const maxValue = $derived(compact ? 1 : 5);\n\n  function getStarComponent(index: number) {\n    if (compact || displayValue >= index + 1) {\n      return StarFilled24;\n    } else if (isReadonly && displayValue >= index + 0.5) {\n      return StarHalf24;\n    } else {\n      return Star24;\n    }\n  }\n\n  function onHover(index: number) {\n    hoverValue = index + 1;\n  }\n\n  function clearHover() {\n    hoverValue = null;\n  }\n\n  function onClick(index: number) {\n    rating = index + 1;\n  }\n\n  function onKeydown(e: KeyboardEvent) {\n    const key = e.key;\n    let newValue = Math.floor(rating);\n\n    if (key === 'ArrowRight') {\n      newValue = Math.min(maxValue, newValue + 1);\n    } else if (key === 'ArrowLeft') {\n      newValue = Math.max(1, newValue - 1);\n    } else return;\n\n    rating = newValue;\n\n    e.preventDefault();\n  }\n\n  const wrapperAttrs = $derived(\n    isReadonly\n      ? {\n          tabindex: -1,\n        }\n      : {\n          onkeydown: onKeydown,\n          onmouseleave: clearHover,\n          onblur: clearHover,\n          tabindex: 0,\n          'aria-valuemin': 0,\n          'aria-valuemax': maxValue,\n          'aria-valuenow': rating,\n          'aria-readonly': false,\n        },\n  );\n</script>\n\n<svelte:element this={rootTag} {href} {target} class={classObject}>\n  <div\n    class=\"mc-star-rating__wrapper\"\n    role={isReadonly ? 'img' : 'slider'}\n    aria-label={`Note ${displayValue} sur ${maxValue}`}\n    {...wrapperAttrs}\n  >\n    {#each Array.from({ length: maxValue }).keys() as index (index)}\n      {@const Star = getStarComponent(index)}\n\n      <span\n        class=\"mc-star-rating__icon\"\n        {...!isReadonly\n          ? {\n              onmousemove: () => onHover(index),\n              onclick: () => onClick(index),\n            }\n          : {}}\n      >\n        <Star />\n      </span>\n    {/each}\n  </div>\n\n  {#if text || href}\n    <span class=\"mc-star-rating__info\">\n      {text || href}\n    </span>\n  {/if}\n</svelte:element>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/star-rating';\n\n  .mc-star-rating__icon {\n    :global(svg) {\n      height: 100%;\n      width: 100%;\n    }\n  }\n</style>\n"],"names":["rating","$.prop","$$props","readonly","size","compact","appearance","text","href","target","hoverValue","$.state","rootTag","$.derived","isReadonly","classObject","displayValue","$.get","maxValue","getStarComponent","index","StarFilled24","StarHalf24","Star24","onHover","clearHover","$.set","onClick","onKeydown","key","newValue","wrapperAttrs","$$element","$$anchor","div","$.first_child","fragment_1","$.each","Star","span","root_2","node_1","$.child","Star_1","$.reset","$.append","node_2","$.sibling","span_1","root_3","$.template_effect","$.set_text","text_1","$$render","consequent","customElementForwardEvents"],"mappings":";;ylDAWA,qBAgDIA,EAAMC,EAAAC,EAAA,SAAA,EAAA,EACNC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,eAAO,GAAG,EACVC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EACPI,qBAAa,UAAU,EACvBC,EAAIN,EAAAC,EAAA,OAAA,CAAA,EACJM,EAAIP,EAAAC,EAAA,OAAA,CAAA,EACJO,EAAMR,EAAAC,EAAA,SAAA,CAAA,EAGJQ,EAA4BC,GAAO,IAAI,EACrC,MAAAC,EAAOC,EAAA,IAAYL,EAAI,EAAG,IAAM,KAAK,EAErCM,EAAUD,EAAA,IAAA,CAAaV,EAAQ,EAAEE,EAAO,EAAEG,EAAI,EAAED,EAAI,CAAA,EAAE,KAAK,OAAO,CAAA,EAElEQ,EAAWF,EAAA,KAAA,CACf,iBAAkB,GAClB,uBAAwBL,EAAI,EAC5B,4BAA2BM,CAAU,EACjB,CAAA,mBAAAV,OAASA,EAAI,EACb,CAAA,mBAAAE,EAAU,KAAKA,EAAU,KAGzCU,EAAYH,EAAA,IAAAI,EAAYP,CAAU,GAAIV,GAAM,EAC5CkB,EAAQL,EAAA,IAAYR,EAAO,EAAG,EAAI,CAAC,WAEhCc,EAAiBC,EAAe,CACnC,OAAAf,EAAO,KAAIW,CAAY,GAAII,EAAQ,EAC9BC,GACRJ,EAAUH,CAAU,GAAAG,EAAID,CAAY,GAAII,EAAQ,GACxCE,GAEAC,EAEX,UAESC,EAAQJ,EAAe,GAC9BV,EAAaU,EAAQ,CAAC,CACxB,CAES,SAAAK,GAAa,CACpBC,EAAAhB,EAAa,IAAI,CACnB,UAESiB,EAAQP,EAAe,CAC9BpB,EAASoB,EAAQ,CAAC,CACpB,UAESQ,EAAU,EAAkB,OAC7BC,EAAM,EAAE,IACV,IAAAC,EAAW,KAAK,MAAM9B,EAAM,CAAA,KAE5B6B,IAAQ,aACVC,EAAW,KAAK,MAAIZ,CAAQ,EAAEY,EAAW,CAAC,UACjCD,IAAQ,YACjBC,EAAW,KAAK,IAAI,EAAGA,EAAW,CAAC,MACpC,QAED9B,EAAS8B,CAAQ,EAEjB,EAAE,eAAc,CAClB,CAEM,MAAAC,EAAYlB,EAAA,IAAAI,EAChBH,CAAA,EAEM,CAAA,WAAY,GAGZ,UAAWc,EACX,aAAcH,EACd,OAAQA,EACR,SAAU,EACV,gBAAiB,EACjB,kBAAiBP,CAAQ,EACzB,gBAAiBlB,EAAM,EACvB,gBAAiB,oJA1EhB,IAAG,4GAEG,WAAU,sLA6ELY,CAAO,EAAA,GAAA,CAAAoB,EAAAC,IAAA,gBAAGzB,EAAI,EAAA,OAAGC,EAAM,EAAA,MAAAQ,EAASF,CAAW,IAAA,OAAA,OAAA,OAAA,gBAAA,aAC9DmB,EAAAC,EAAAC,CAAA,IAAAF,+CAEOpB,CAAU,EAAG,MAAQ,SACP,aAAA,QAAAG,EAAAD,CAAY,WAAQE,CAAQ,CAAA,QAC5Ca,CAAY,2CAJjBM,GAAAH,EAAA,GAAA,IAMQ,MAAM,KAAI,CAAG,OAAMjB,EAAEC,CAAQ,CAAA,CAAA,EAAI,OAAUE,GAAOA,KAAPA,IAAK,OAC7CkB,EAAIzB,EAAA,IAAGM,EAAiBC,CAAK,CAAA,EAEpC,IAAAmB,EAAAC,GAAA,IAAAD,qCAEM,GAAAtB,EAAAH,CAAA,MAEC,YAAW,IAAQU,EAAQJ,CAAK,EAChC,QAAO,IAAQO,EAAQP,CAAK,4CALnC,IAAAqB,EAAAC,EAAAH,CAAA,wBASEI,EAAIV,EAAA,EAAA,IATNW,EAAAL,CAAA,EAAAM,EAAAZ,EAAAM,CAAA,IATJK,EAAAV,CAAA,EAAA,IAAAY,EAAAC,GAAAb,EAAA,CAAA,iBAwBEc,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,EACFE,GAAA,IAAAC,GAAAC,EAAA7C,EAAI,GAAIC,EAAI,CAAA,CAAA,MADdwC,CAAI,aADFzC,EAAI,GAAIC,MAAI6C,EAAAC,CAAA,wBA1BX,mOAnIIC"}

package/dist/components/starrating/StarRating.spec.js

@@ -0,0 +1,108 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import StarRating from './StarRating.svelte';
+function getStars(container) {
+    return Array.from(container.querySelectorAll('.mc-star-rating__icon'));
+}
+function getValue(container) {
+    const wrapper = container.querySelector('.mc-star-rating__wrapper');
+    const value = wrapper?.getAttribute('aria-valuenow');
+    return Number(value);
+}
+describe('StarRating', () => {
+    it('renders 5 stars by default', () => {
+        const { container } = render(StarRating, { rating: 0 });
+        expect(getStars(container).length).toBe(5);
+    });
+    it('renders 1 star when compact mode is enabled', () => {
+        const { container } = render(StarRating, { rating: 0, compact: true });
+        expect(getStars(container).length).toBe(1);
+    });
+    it('does not allow x.5 value on input mode', async () => {
+        const { container } = render(StarRating, { rating: 3, readonly: false });
+        const wrapper = container.querySelector('.mc-star-rating__wrapper');
+        await fireEvent.keyDown(wrapper, { key: 'ArrowRight' });
+        const value = getValue(container);
+        expect(value).toBe(4);
+    });
+    it('allows x.5 values on readonly mode', () => {
+        const { container } = render(StarRating, { rating: 1.5, readonly: true });
+        const wrapper = container.querySelector('.mc-star-rating__wrapper');
+        const label = wrapper?.getAttribute('aria-label');
+        expect(label).toBe('Note 1.5 sur 5');
+    });
+    it('updates rating when clicking a star', async () => {
+        const { container } = render(StarRating, { rating: 2, readonly: false });
+        const stars = container.querySelectorAll('.mc-star-rating__icon');
+        await fireEvent.click(stars[0]);
+        const value = getValue(container);
+        expect(value).toBe(1);
+    });
+    it('updates rating when pressing ArrowRight', async () => {
+        const { container } = render(StarRating, { rating: 2, readonly: false });
+        const wrapper = container.querySelector('.mc-star-rating__wrapper');
+        await fireEvent.keyDown(wrapper, { key: 'ArrowRight' });
+        const value = getValue(container);
+        expect(value).toBe(3);
+    });
+    it('updates rating when pressing ArrowLeft', async () => {
+        const { container } = render(StarRating, { rating: 2, readonly: false });
+        const wrapper = container.querySelector('.mc-star-rating__wrapper');
+        await fireEvent.keyDown(wrapper, { key: 'ArrowLeft' });
+        const value = getValue(container);
+        expect(value).toBe(1);
+    });
+    it('does not update rating when other keys pressed', async () => {
+        const { container } = render(StarRating, { rating: 2, readonly: false });
+        const wrapper = container.querySelector('.mc-star-rating__wrapper');
+        await fireEvent.keyDown(wrapper, { key: 'ArrowUp' });
+        const value = getValue(container);
+        expect(value).toBe(2);
+    });
+    it('clears hover on mouseleave', async () => {
+        const { container } = render(StarRating, { rating: 2, readonly: false });
+        const wrapper = container.querySelector('.mc-star-rating__wrapper');
+        const stars = getStars(container);
+        await fireEvent.mouseMove(stars[0]);
+        expect(wrapper.getAttribute('aria-label')).toContain('1');
+        await fireEvent.mouseLeave(wrapper);
+        expect(wrapper.getAttribute('aria-label')).toContain('2');
+    });
+    it('clears hover on blur', async () => {
+        const { container } = render(StarRating, { rating: 3, readonly: false });
+        const wrapper = container.querySelector('.mc-star-rating__wrapper');
+        const stars = getStars(container);
+        await fireEvent.focus(wrapper);
+        await fireEvent.mouseMove(stars[1]);
+        expect(wrapper.getAttribute('aria-label')).toContain('2');
+        await fireEvent.blur(wrapper);
+        expect(wrapper.getAttribute('aria-label')).toContain('3');
+    });
+    it('renders info text when text is provided', () => {
+        const { container } = render(StarRating, {
+            rating: 3,
+            text: 'Note publique',
+        });
+        const info = container.querySelector('.mc-star-rating__info');
+        expect(info).not.toBeNull();
+        expect(info?.textContent).toBe('Note publique');
+    });
+    it('renders href text when provided and no text', () => {
+        const { container } = render(StarRating, { rating: 2, href: '/voir' });
+        const info = container.querySelector('.mc-star-rating__info');
+        expect(info).not.toBeNull();
+        expect(info?.textContent).toBe('/voir');
+    });
+    it('does not render info span when neither text nor href provided', () => {
+        const { container } = render(StarRating, { rating: 1 });
+        expect(container.querySelector('.mc-star-rating__info')).toBeNull();
+    });
+    it('renders <a> when href provided', () => {
+        const { container } = render(StarRating, { rating: 1, href: '#' });
+        expect(container.querySelector('a')).toBeTruthy();
+    });
+    it('renders <div> when no href provided', () => {
+        const { container } = render(StarRating, { rating: 1 });
+        expect(container.querySelector('div.mc-star-rating')).toBeTruthy();
+    });
+});

package/dist/components/starrating/StarRating.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './StarRating.svelte';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const AsInput: Story;
+export declare const SizeM: Story;
+export declare const SizeL: Story;
+export declare const StandardAppearance: Story;
+export declare const WithText: Story;
+export declare const WithLink: Story;
+export declare const CompactModeWithText: Story;
+//# sourceMappingURL=StarRating.stories.d.ts.map

package/dist/components/starrating/StarRating.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StarRating.stories.d.ts","sourceRoot":"","sources":["../../../src/components/starrating/StarRating.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAoCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAIhC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAMjC,CAAC"}