@mozaic-ds/web-components 1.3.0 → 1.4.0

package/dist/components/segmentedcontrol/SegmentedControl.js

@@ -1,4 +1,4 @@
-import{w as z,c as C,p as E,a as j,b as l,f as k,t as u,h,i as S,j as c,e as v,l as p,m as b,d as D,g as q,n 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 w=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(w,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)}z(["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.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.stories.d.ts","sourceRoot":"","sources":["../../../src/components/segmentedcontrol/SegmentedControl.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,2BAA2B,CAAC;AAEnC,QAAA,MAAM,IAAI,EAAE,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

@@ -5,6 +5,7 @@ import './SegmentedControl.svelte';
 const meta = {
     title: 'Action/Segmented Control',
     component: 'm-segmented-control',
+    tags: ['v2'],
     argTypes: {
         size: {
             control: 'radio',
@@ -35,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 z,r as F,d as g,s as q,h as p,i as G,j as t,e as w,t as k,g as E,n 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=z("<option disabled selected> </option>"),Q=z("<option> </option>"),R=z("<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(_,r){A(r,!0),D(_,T);let n=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),C=F(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),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()}},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 x=g(s);{var L=e=>{var o=P(),l=g(o);w(o),o.value=o.__value="",k(()=>E(l,`-- ${i()??""} --`)),p(e,o)};H(x,e=>{i()&&e(L)})}var M=q(x);return I(M,17,h,J,(e,o)=>{var l=Q(),S=g(l,!0);w(l);var y={};k(()=>{l.disabled=d(o).disabled,E(S,d(o).text),y!==(y=d(o).value)&&(l.value=(l.__value=d(o).value)??"")}),p(e,l)}),w(s),N(s,v),p(_,s),G(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    ...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","$$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,EACJS,EAAAC,EAAAV,EAAA,0WALI,IAAG,8PAYV,0BACcI,EAAI,CAAA,GAClBG,EAAQ,GAAI,sBACZF,KAAa,uCAKXI,2HAIIN,KAAW,EAAA,KAAA,CAAA,kBAFdA,EAAW,GAAAQ,EAAAC,CAAA,eAMTC,OAAAA,EAAAC,EAAA,GAAAN,OAAWO,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,sCAtB1D,+KAjEYM"}
+{"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.js

@@ -46,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.
      */

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;AAkDH,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/StarRating.js

@@ -1,4 +1,4 @@
-import{E as de,F as me,N as ge,G as ue,H as he,I as _e,J as pe,K as F,L as we,M as u,O as Q,P as ye,Q as xe,R as q,S as V,c as A,p as L,b as n,A as O,t as B,h as x,i as C,j as i,l as P,m as j,a as ze,B as Ne,C as U,n as v,D as y,f as G,e as D,s as Ee,d as W,g as be,x as Se,y as X}from"../../custom-element.js";import{B as ke,i as Me}from"../../if.js";import{e as Ae}from"../../each.js";import{c as Le}from"../../svelte-component.js";import{s as z,b as K,a as H}from"../../attributes.js";import{c as Be}from"../../custom-element-forward-events.js";import"../../legacy.js";function Ce(g,t,l,o,c,f){let d=u;u&&Q();var s=null;u&&F.nodeType===ye&&(s=F,Q());var a=u?F:g,e=new ke(a,!1);de(()=>{const m=t()||null;var E=m==="svg"?ge:null;if(m===null){e.ensure(null,null);return}return e.ensure(m,h=>{if(m){if(s=u?s:E?document.createElementNS(E,m):document.createElement(m),ue(s,s),o){u&&xe(m)&&s.append(document.createComment(""));var N=u?we(s):s.appendChild(he());u&&(N===null?q(!1):V(N)),o(s,N)}_e.nodes_end=s,h.before(s)}u&&V(h)}),()=>{}},me),pe(()=>{}),d&&(q(!0),V(a))}var Re=O('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M12 3a1 1 0 0 1 .916.598l2.178 4.969 5.055.76a1 1 0 0 1 .504 1.747l-3.923 3.378 1.435 5.286a1 1 0 0 1-1.509 1.101L12 17.823 7.344 20.84a1 1 0 0 1-1.509-1.101l1.435-5.286-3.923-3.379a1 1 0 0 1 .504-1.746l5.055-.76 2.178-4.969A1 1 0 0 1 12 3m0 3.49-1.484 3.385-.222.505-.545.083-3.445.518 2.749 2.366.477.412-.165.608-.915 3.373 3.006-1.948.544-.352.544.352 3.006 1.948-.915-3.373-.165-.608.477-.412 2.749-2.367-3.445-.517-.545-.083-.222-.505z"></path></svg>');function Y(g,t){L(t,!1);let l=n(t,"id",12,void 0),o=n(t,"style",12,void 0),c=n(t,"className",12,void 0),f=n(t,"fill",12,void 0),d=n(t,"size",12,"1.5rem");var s={get id(){return l()},set id(e){l(e),i()},get style(){return o()},set style(e){o(e),i()},get className(){return c()},set className(e){c(e),i()},get fill(){return f()},set fill(e){f(e),i()},get size(){return d()},set size(e){d(e),i()}},a=Re();return B(()=>{z(a,"id",l()),K(a,o()),P(a,0,j(c())),z(a,"fill",f())}),x(g,a),C(s)}customElements.define("star-24",A(Y,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Te=O('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M12.916 3.598a1 1 0 0 0-1.832 0L8.906 8.567l-5.055.76a1 1 0 0 0-.504 1.747l3.923 3.378-1.435 5.286a1 1 0 0 0 1.509 1.101L12 17.823l4.656 3.016a1 1 0 0 0 1.51-1.101l-1.436-5.286 3.923-3.379a1 1 0 0 0-.504-1.746l-5.055-.76z"></path></svg>');function Z(g,t){L(t,!1);let l=n(t,"id",12,void 0),o=n(t,"style",12,void 0),c=n(t,"className",12,void 0),f=n(t,"fill",12,void 0),d=n(t,"size",12,"1.5rem");var s={get id(){return l()},set id(e){l(e),i()},get style(){return o()},set style(e){o(e),i()},get className(){return c()},set className(e){c(e),i()},get fill(){return f()},set fill(e){f(e),i()},get size(){return d()},set size(e){d(e),i()}},a=Te();return B(()=>{z(a,"id",l()),K(a,o()),P(a,0,j(c())),z(a,"fill",f())}),x(g,a),C(s)}customElements.define("star-filled-24",A(Z,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Fe=O('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M12.916 3.598a1 1 0 0 0-1.832 0L8.906 8.567l-5.055.76a1 1 0 0 0-.504 1.747l3.923 3.378-1.435 5.286a1 1 0 0 0 1.509 1.101L12 17.823l4.656 3.016a1 1 0 0 0 1.51-1.101l-1.436-5.286 3.923-3.379a1 1 0 0 0-.504-1.746l-5.055-.76zM12 6.49v8.95l.544.352 3.006 1.948-.915-3.373-.165-.608.477-.411 2.749-2.367-3.445-.518-.545-.082-.222-.506z"></path></svg>');function $(g,t){L(t,!1);let l=n(t,"id",12,void 0),o=n(t,"style",12,void 0),c=n(t,"className",12,void 0),f=n(t,"fill",12,void 0),d=n(t,"size",12,"1.5rem");var s={get id(){return l()},set id(e){l(e),i()},get style(){return o()},set style(e){o(e),i()},get className(){return c()},set className(e){c(e),i()},get fill(){return f()},set fill(e){f(e),i()},get size(){return d()},set size(e){d(e),i()}},a=Fe();return B(()=>{z(a,"id",l()),K(a,o()),P(a,0,j(c())),z(a,"fill",f())}),x(g,a),C(s)}customElements.define("star-half-24",A($,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Ve=G("<span><!></span>"),De=G('<span class="mc-star-rating__info svelte-17npafv"> </span>'),He=G("<div></div> <!>",1);const Oe={hash:"svelte-17npafv",code:`/**
+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 Pe(g,t){L(t,!0),ze(g,Oe);let l=n(t,"rating",15),o=n(t,"readonly",7),c=n(t,"size",7,"m"),f=n(t,"compact",7),d=n(t,"appearance",7,"standard"),s=n(t,"text",7),a=n(t,"href",7),e=n(t,"target",7),m=Se(null);const E=y(()=>a()?"a":"div"),h=y(()=>[o(),f(),a(),s()].some(Boolean)),N=y(()=>({"mc-star-rating":!0,"mc-star-rating--link":a(),"mc-star-rating--slider":!v(h),[`mc-star-rating--${c()}`]:c(),[`mc-star-rating--${d()}`]:d()})),R=y(()=>v(m)??l()),b=y(()=>f()?1:5);function ee(r){return f()||v(R)>=r+1?Z:v(h)&&v(R)>=r+.5?$:Y}function te(r){X(m,r+1)}function I(){X(m,null)}function ae(r){l(r+1)}function re(r){const S=r.key;let _=Math.floor(l());if(S==="ArrowRight")_=Math.min(v(b),_+1);else if(S==="ArrowLeft")_=Math.max(1,_-1);else return;l(_),r.preventDefault()}const se=y(()=>v(h)?{tabindex:-1}:{onkeydown:re,onmouseleave:I,onblur:I,tabindex:0,"aria-valuemin":0,"aria-valuemax":v(b),"aria-valuenow":l(),"aria-readonly":!1});var ne={get rating(){return l()},set rating(r){l(r),i()},get readonly(){return o()},set readonly(r){o(r),i()},get size(){return c()},set size(r="m"){c(r),i()},get compact(){return f()},set compact(r){f(r),i()},get appearance(){return d()},set appearance(r="standard"){d(r),i()},get text(){return s()},set text(r){s(r),i()},get href(){return a()},set href(r){a(r),i()},get target(){return e()},set target(r){e(r),i()}},J=Ne(),ie=U(J);return Ce(ie,()=>v(E),!1,(r,S)=>{H(r,()=>({href:a(),target:e(),class:v(N)}),void 0,void 0,void 0,"svelte-17npafv");var _=He(),k=U(_);H(k,()=>({class:"mc-star-rating__wrapper",role:v(h)?"img":"slider","aria-label":`Note ${v(R)} sur ${v(b)}`,...v(se)}),void 0,void 0,void 0,"svelte-17npafv"),Ae(k,20,()=>Array.from({length:v(b)}).keys(),p=>p,(p,w)=>{const T=y(()=>ee(w));var M=Ve();H(M,()=>({class:"mc-star-rating__icon",...v(h)?{}:{onmousemove:()=>te(w),onclick:()=>ae(w)}}),void 0,void 0,void 0,"svelte-17npafv");var fe=W(M);Le(fe,()=>v(T),(ce,ve)=>{ve(ce,{})}),D(M),x(p,M)}),D(k);var le=Ee(k,2);{var oe=p=>{var w=De(),T=W(w,!0);D(w),B(()=>be(T,s()||a())),x(p,w)};Me(le,p=>{(s()||a())&&p(oe)})}x(S,_)}),x(g,J),C(ne)}customElements.define("m-star-rating",A(Pe,{rating:{},readonly:{},size:{},compact:{},appearance:{},text:{},href:{},target:{}},[],[],!0,Be));
+ */.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

@@ -1 +1 @@
-{"version":3,"file":"StarRating.js","sources":["../../../node_modules/svelte/src/internal/client/dom/blocks/svelte-element.js","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/Star24/Star24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/StarFilled24/StarFilled24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/StarHalf24/StarHalf24.svelte","../../../src/components/starrating/StarRating.svelte"],"sourcesContent":["/** @import { Effect, TemplateNode } from '#client' */\nimport { FILENAME, NAMESPACE_SVG } from '../../../../constants.js';\nimport {\n\thydrate_next,\n\thydrate_node,\n\thydrating,\n\tset_hydrate_node,\n\tset_hydrating\n} from '../hydration.js';\nimport { create_text, get_first_child } from '../operations.js';\nimport { block, teardown } from '../../reactivity/effects.js';\nimport { set_should_intro } from '../../render.js';\nimport { current_each_item, set_current_each_item } from './each.js';\nimport { active_effect } from '../../runtime.js';\nimport { component_context, dev_stack } from '../../context.js';\nimport { DEV } from 'esm-env';\nimport { EFFECT_TRANSPARENT, ELEMENT_NODE } from '#client/constants';\nimport { assign_nodes } from '../template.js';\nimport { is_raw_text_element } from '../../../../utils.js';\nimport { BranchManager } from './branches.js';\n\n/**\n * @param {Comment | Element} node\n * @param {() => string} get_tag\n * @param {boolean} is_svg\n * @param {undefined | ((element: Element, anchor: Node | null) => void)} render_fn,\n * @param {undefined | (() => string)} get_namespace\n * @param {undefined | [number, number]} location\n * @returns {void}\n */\nexport function element(node, get_tag, is_svg, render_fn, get_namespace, location) {\n\tlet was_hydrating = hydrating;\n\n\tif (hydrating) {\n\t\thydrate_next();\n\t}\n\n\tvar filename = DEV && location && component_context?.function[FILENAME];\n\n\t/** @type {null | Element} */\n\tvar element = null;\n\n\tif (hydrating && hydrate_node.nodeType === ELEMENT_NODE) {\n\t\telement = /** @type {Element} */ (hydrate_node);\n\t\thydrate_next();\n\t}\n\n\tvar anchor = /** @type {TemplateNode} */ (hydrating ? hydrate_node : node);\n\n\t/**\n\t * The keyed `{#each ...}` item block, if any, that this element is inside.\n\t * We track this so we can set it when changing the element, allowing any\n\t * `animate:` directive to bind itself to the correct block\n\t */\n\tvar each_item_block = current_each_item;\n\n\tvar branches = new BranchManager(anchor, false);\n\n\tblock(() => {\n\t\tconst next_tag = get_tag() || null;\n\t\tvar ns = get_namespace ? get_namespace() : is_svg || next_tag === 'svg' ? NAMESPACE_SVG : null;\n\n\t\tif (next_tag === null) {\n\t\t\tbranches.ensure(null, null);\n\t\t\tset_should_intro(true);\n\t\t\treturn;\n\t\t}\n\n\t\tbranches.ensure(next_tag, (anchor) => {\n\t\t\t// See explanation of `each_item_block` above\n\t\t\tvar previous_each_item = current_each_item;\n\t\t\tset_current_each_item(each_item_block);\n\n\t\t\tif (next_tag) {\n\t\t\t\telement = hydrating\n\t\t\t\t\t? /** @type {Element} */ (element)\n\t\t\t\t\t: ns\n\t\t\t\t\t\t? document.createElementNS(ns, next_tag)\n\t\t\t\t\t\t: document.createElement(next_tag);\n\n\t\t\t\tif (DEV && location) {\n\t\t\t\t\t// @ts-expect-error\n\t\t\t\t\telement.__svelte_meta = {\n\t\t\t\t\t\tparent: dev_stack,\n\t\t\t\t\t\tloc: {\n\t\t\t\t\t\t\tfile: filename,\n\t\t\t\t\t\t\tline: location[0],\n\t\t\t\t\t\t\tcolumn: location[1]\n\t\t\t\t\t\t}\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tassign_nodes(element, element);\n\n\t\t\t\tif (render_fn) {\n\t\t\t\t\tif (hydrating && is_raw_text_element(next_tag)) {\n\t\t\t\t\t\t// prevent hydration glitches\n\t\t\t\t\t\telement.append(document.createComment(''));\n\t\t\t\t\t}\n\n\t\t\t\t\t// If hydrating, use the existing ssr comment as the anchor so that the\n\t\t\t\t\t// inner open and close methods can pick up the existing nodes correctly\n\t\t\t\t\tvar child_anchor = /** @type {TemplateNode} */ (\n\t\t\t\t\t\thydrating ? get_first_child(element) : element.appendChild(create_text())\n\t\t\t\t\t);\n\n\t\t\t\t\tif (hydrating) {\n\t\t\t\t\t\tif (child_anchor === null) {\n\t\t\t\t\t\t\tset_hydrating(false);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tset_hydrate_node(child_anchor);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// `child_anchor` is undefined if this is a void element, but we still\n\t\t\t\t\t// need to call `render_fn` in order to run actions etc. If the element\n\t\t\t\t\t// contains children, it's a user error (which is warned on elsewhere)\n\t\t\t\t\t// and the DOM will be silently discarded\n\t\t\t\t\trender_fn(element, child_anchor);\n\t\t\t\t}\n\n\t\t\t\t// we do this after calling `render_fn` so that child effects don't override `nodes.end`\n\t\t\t\t/** @type {Effect} */ (active_effect).nodes_end = element;\n\n\t\t\t\tanchor.before(element);\n\t\t\t}\n\n\t\t\tset_current_each_item(previous_each_item);\n\n\t\t\tif (hydrating) {\n\t\t\t\tset_hydrate_node(anchor);\n\t\t\t}\n\t\t});\n\n\t\t// revert to the default state after the effect has been created\n\t\tset_should_intro(true);\n\n\t\treturn () => {\n\t\t\tif (next_tag) {\n\t\t\t\t// if we're in this callback because we're re-running the effect,\n\t\t\t\t// disable intros (unless no element is currently displayed)\n\t\t\t\tset_should_intro(false);\n\t\t\t}\n\t\t};\n\t}, EFFECT_TRANSPARENT);\n\n\tteardown(() => {\n\t\tset_should_intro(true);\n\t});\n\n\tif (was_hydrating) {\n\t\tset_hydrating(true);\n\t\tset_hydrate_node(anchor);\n\t}\n}\n","<svelte:options customElement={{ tag: 'star-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M12 3a1 1 0 0 1 .916.598l2.178 4.969 5.055.76a1 1 0 0 1 .504 1.747l-3.923 3.378 1.435 5.286a1 1 0 0 1-1.509 1.101L12 17.823 7.344 20.84a1 1 0 0 1-1.509-1.101l1.435-5.286-3.923-3.379a1 1 0 0 1 .504-1.746l5.055-.76 2.178-4.969A1 1 0 0 1 12 3m0 3.49-1.484 3.385-.222.505-.545.083-3.445.518 2.749 2.366.477.412-.165.608-.915 3.373 3.006-1.948.544-.352.544.352 3.006 1.948-.915-3.373-.165-.608.477-.412 2.749-2.367-3.445-.517-.545-.083-.222-.505z\"/></svg>","<svelte:options customElement={{ tag: 'star-filled-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M12.916 3.598a1 1 0 0 0-1.832 0L8.906 8.567l-5.055.76a1 1 0 0 0-.504 1.747l3.923 3.378-1.435 5.286a1 1 0 0 0 1.509 1.101L12 17.823l4.656 3.016a1 1 0 0 0 1.51-1.101l-1.436-5.286 3.923-3.379a1 1 0 0 0-.504-1.746l-5.055-.76z\"/></svg>","<svelte:options customElement={{ tag: 'star-half-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M12.916 3.598a1 1 0 0 0-1.832 0L8.906 8.567l-5.055.76a1 1 0 0 0-.504 1.747l3.923 3.378-1.435 5.286a1 1 0 0 0 1.509 1.101L12 17.823l4.656 3.016a1 1 0 0 0 1.51-1.101l-1.436-5.286 3.923-3.379a1 1 0 0 0-.504-1.746l-5.055-.76zM12 6.49v8.95l.544.352 3.006 1.948-.915-3.373-.165-.608.477-.411 2.749-2.367-3.445-.518-.545-.082-.222-.506z\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-star-rating',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import Star24 from '@mozaic-ds/icons-svelte/svelte/Star24/Star24.svelte';\n  import StarFilled24 from '@mozaic-ds/icons-svelte/svelte/StarFilled24/StarFilled24.svelte';\n  import StarHalf24 from '@mozaic-ds/icons-svelte/svelte/StarHalf24/StarHalf24.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    /**\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":["element","node","get_tag","is_svg","render_fn","get_namespace","location","was_hydrating","hydrating","hydrate_next","hydrate_node","ELEMENT_NODE","anchor","branches","BranchManager","block","next_tag","ns","NAMESPACE_SVG","assign_nodes","is_raw_text_element","child_anchor","get_first_child","create_text","set_hydrating","set_hydrate_node","active_effect","EFFECT_TRANSPARENT","teardown","id","style","className","fill","size","rating","$.prop","$$props","readonly","compact","appearance","text","href","target","hoverValue","rootTag","$.derived","isReadonly","classObject","displayValue","$.get","maxValue","getStarComponent","index","StarFilled24","StarHalf24","Star24","onHover","clearHover","$.set","onClick","onKeydown","e","key","newValue","wrapperAttrs","$$element","$$anchor","$.each","div","Star","$.template_effect","$.set_text","text_1","$$render","consequent","customElementForwardEvents"],"mappings":"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","x_google_ignoreList":[0,1,2,3]}
+{"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.stories.d.ts

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

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

@@ -1 +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;AAIrE,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"}
+{"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"}

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

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import './StarRating.svelte';
 const meta = {
     title: 'Indicators/Star Rating',
     component: 'm-star-rating',
@@ -26,9 +27,9 @@ const meta = {
         return html `
       <m-star-rating
         rating=${args.rating}
-        .readonly=${ifDefined(args.readonly)}
+        ?readonly=${args.readonly}
         size=${ifDefined(args.size)}
-        .compact=${ifDefined(args.compact)}
+        ?compact=${args.compact}
         appearance=${ifDefined(args.appearance)}
         text=${ifDefined(args.text)}
         href=${ifDefined(args.href)}

package/dist/components/starrating/StarRating.svelte

@@ -1,19 +1,22 @@
 <svelte:options
   customElement={{
     tag: 'm-star-rating',
+    props: {
+      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },
+      compact: { reflect: true, type: 'Boolean', attribute: 'compact' },
+    },
     extend: customElementForwardEvents,
   }}
 />
 
 <script lang="ts">
   import { customElementForwardEvents } from '../../utils';
-  import Star24 from '@mozaic-ds/icons-svelte/svelte/Star24/Star24.svelte';
-  import StarFilled24 from '@mozaic-ds/icons-svelte/svelte/StarFilled24/StarFilled24.svelte';
-  import StarHalf24 from '@mozaic-ds/icons-svelte/svelte/StarHalf24/StarHalf24.svelte';
+  import { Star24, StarFilled24, StarHalf24 } from '@mozaic-ds/icons-svelte';
   /**
    * 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.
    */
   interface Props {
+    [key: string]: any;
     /**
      * The current rating value of the component.
      */

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

@@ -2,6 +2,7 @@
  * 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.
  */
 interface Props {
+    [key: string]: any;
     /**
      * The current rating value of the component.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"StarRating.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/starrating/StarRating.svelte.ts"],"names":[],"mappings":"AAQE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;CAClD;AA0HH,QAAA,MAAM,UAAU,iDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"StarRating.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/starrating/StarRating.svelte.ts"],"names":[],"mappings":"AAME;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;CAClD;AA4HH,QAAA,MAAM,UAAU,iDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/statusbadge/StatusBadge.js

@@ -1,4 +1,4 @@
-import{c as v,p as m,a as h,b as l,f as p,r as y,d as u,s as k,t as w,h as _,i as x,j as b,e as n,g as $}from"../../custom-element.js";import{a as S}from"../../attributes.js";import{S as z}from"../statusdot/StatusDot.js";var D=p('<div><!> <span class="mc-status-badge__label svelte-1oceydf"> </span></div>');const j={hash:"svelte-1oceydf",code:`/**
+import{c as v,p as m,a as h,b as l,s as p,t as y,f as k,g as w,h as _,i as x,d as u,j as b,r as n,e as $}from"../../custom-element.js";import{a as S}from"../../attributes.js";import{S as z}from"../statusdot/StatusDot.js";var D=_('<div><!> <span class="mc-status-badge__label svelte-1oceydf"> </span></div>');const j={hash:"svelte-1oceydf",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-status-badge.svelte-1oceydf {background-color:var(--status-badge-color-background-info, #e1f3f9);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-info, #a7d9ed);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-100, 0.875rem);display:inline-flex;align-items:center;gap:0.25rem;border-radius:var(--border-radius-s, 0.25rem);padding-right:0.5rem;padding-left:0.5rem;text-transform:lowercase;white-space:nowrap;min-height:1.5rem;}.mc-status-badge__label.svelte-1oceydf {color:var(--status-badge-color-label, #000000);}.mc-status-badge__label.svelte-1oceydf::first-letter {text-transform:uppercase;}.mc-status-badge--success.svelte-1oceydf {background-color:var(--status-badge-color-background-success, #ebf5de);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-success, #c5e39e);}.mc-status-badge--error.svelte-1oceydf {background-color:var(--status-badge-color-background-error, #fdeaea);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-error, #f8bcbb);}.mc-status-badge--warning.svelte-1oceydf {background-color:var(--status-badge-color-background-warning, #fdf1e8);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-warning, #f8d2b3);}.mc-status-badge--neutral.svelte-1oceydf {background-color:var(--status-badge-color-background-neutral, #f2f2f2);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-neutral, #cccccc);}.mc-status-dot.svelte-1oceydf {background-color:var(--status-dot-color-background-info, #0b96cc);height:0.5rem;width:0.5rem;border-radius:var(--border-radius-full, 100%);display:inline-block;}.mc-status-dot--s.svelte-1oceydf {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-1oceydf {height:1rem;width:1rem;}.mc-status-dot--success.svelte-1oceydf {background-color:var(--status-dot-color-background-success, #3f9e10);}.mc-status-dot--error.svelte-1oceydf {background-color:var(--status-dot-color-background-error, #ea302d);}.mc-status-dot--warning.svelte-1oceydf {background-color:var(--status-dot-color-background-warning, #ea7315);}.mc-status-dot--neutral.svelte-1oceydf {background-color:var(--status-dot-color-background-neutral, #808080);}`};function B(o,e){m(e,!0),h(o,j);let t=l(e,"status",7,"info"),a=l(e,"label",7),i=y(e,["$$slots","$$events","$$legacy","$$host","status","label"]);var g={get status(){return t()},set status(s="info"){t(s),b()},get label(){return a()},set label(s){a(s),b()}},r=D();S(r,()=>({class:["mc-status-badge",`mc-status-badge--${t()}`],...i}),void 0,void 0,void 0,"svelte-1oceydf");var d=u(r);z(d,{get status(){return t()},size:"m"});var c=k(d,2),f=u(c,!0);return n(c),n(r),w(()=>$(f,a())),_(o,r),x(g)}customElements.define("m-status-badge",v(B,{status:{},label:{}},[],[],!0));
+ */.mc-status-badge.svelte-1oceydf {background-color:var(--status-badge-color-background-info, #e1f3f9);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-info, #a7d9ed);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-100, 0.875rem);display:inline-flex;align-items:center;gap:0.25rem;border-radius:var(--border-radius-s, 0.25rem);padding-right:0.5rem;padding-left:0.5rem;text-transform:lowercase;white-space:nowrap;min-height:1.5rem;}.mc-status-badge__label.svelte-1oceydf {color:var(--status-badge-color-label, #000000);}.mc-status-badge__label.svelte-1oceydf::first-letter {text-transform:uppercase;}.mc-status-badge--success.svelte-1oceydf {background-color:var(--status-badge-color-background-success, #ebf5de);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-success, #c5e39e);}.mc-status-badge--error.svelte-1oceydf {background-color:var(--status-badge-color-background-error, #fdeaea);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-error, #f8bcbb);}.mc-status-badge--warning.svelte-1oceydf {background-color:var(--status-badge-color-background-warning, #fdf1e8);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-warning, #f8d2b3);}.mc-status-badge--neutral.svelte-1oceydf {background-color:var(--status-badge-color-background-neutral, #f2f2f2);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-neutral, #cccccc);}.mc-status-dot.svelte-1oceydf {background-color:var(--status-dot-color-background-info, #0b96cc);height:0.5rem;width:0.5rem;border-radius:var(--border-radius-full, 100%);display:inline-block;}.mc-status-dot--s.svelte-1oceydf {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-1oceydf {height:1rem;width:1rem;}.mc-status-dot--success.svelte-1oceydf {background-color:var(--status-dot-color-background-success, #3f9e10);}.mc-status-dot--error.svelte-1oceydf {background-color:var(--status-dot-color-background-error, #ea302d);}.mc-status-dot--warning.svelte-1oceydf {background-color:var(--status-dot-color-background-warning, #ea7315);}.mc-status-dot--neutral.svelte-1oceydf {background-color:var(--status-dot-color-background-neutral, #808080);}`};function B(o,e){m(e,!0),h(o,j);let t=l(e,"status",7,"info"),a=l(e,"label",7),i=x(e,["$$slots","$$events","$$legacy","$$host","status","label"]);var g={get status(){return t()},set status(s="info"){t(s),b()},get label(){return a()},set label(s){a(s),b()}},r=D();S(r,()=>({class:["mc-status-badge",`mc-status-badge--${t()}`],...i}),void 0,void 0,void 0,"svelte-1oceydf");var d=u(r);z(d,{get status(){return t()},size:"m"});var c=p(d,2),f=u(c,!0);return n(c),n(r),y(()=>$(f,a())),k(o,r),w(g)}customElements.define("m-status-badge",v(B,{status:{},label:{}},[],[],!0));
 //# sourceMappingURL=StatusBadge.js.map

package/dist/components/statusbadge/StatusBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.js","sources":["../../../src/components/statusbadge/StatusBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-badge' }} />\n\n<script lang=\"ts\">\n  import StatusDot from '../statusdot/StatusDot.svelte';\n  /**\n   * A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.\n   */\n  interface Props {\n    /**\n     * Content of the status badge.\n     */\n    label: string;\n    /**\n     * Allows to define the status badge type.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';\n  }\n\n  let { status = 'info', label, ...attrs }: Props = $props();\n</script>\n\n<div class={['mc-status-badge', `mc-status-badge--${status}`]} {...attrs}>\n  <StatusDot {status} size=\"m\" />\n  <span class=\"mc-status-badge__label\">{label}</span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-badge';\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["status","label","$.prop","$$props","attrs","$.rest_props"],"mappings":";;6sEAAA,gBAkBQ,IAAAA,iBAAS,MAAM,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAKC,EAAKC,EAAAF,EAAA,0GAAvB,OAAM,2EAGV,MAAA,CAAA,sCAAuCH,EAAM,CAAA,EAAA,KAASI,iJAE3BH,EAAK,CAAA,CAAA,aAJ7C"}
+{"version":3,"file":"StatusBadge.js","sources":["../../../src/components/statusbadge/StatusBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-badge' }} />\n\n<script lang=\"ts\">\n  import StatusDot from '../statusdot/StatusDot.svelte';\n  /**\n   * A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Content of the status badge.\n     */\n    label: string;\n    /**\n     * Allows to define the status badge type.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';\n  }\n\n  let { status = 'info', label, ...attrs }: Props = $props();\n</script>\n\n<div class={['mc-status-badge', `mc-status-badge--${status}`]} {...attrs}>\n  <StatusDot {status} size=\"m\" />\n  <span class=\"mc-status-badge__label\">{label}</span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-badge';\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["status","label","$.prop","$$props","attrs","$.rest_props","div","root","StatusDot","node","span","$.sibling"],"mappings":";;6sEAEA,gBAiBQ,IAAAA,iBAAS,MAAM,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAKC,EAAKC,EAAAF,EAAA,0GAAvB,OAAM,2DAGtBG,EAAGC,EAAA,IAAHD,QAAY,MAAA,CAAA,sCAAuCN,EAAM,CAAA,EAAA,KAASI,mDAAlEE,CAAG,EACDE,EAASC,EAAA,qBAAET,EAAM,kBACjBU,EAAIC,EAAAF,EAAA,CAAA,MAAJC,EAAI,EAAA,WAAJA,CAAI,IAFNJ,CAAG,YAEoCL,EAAK,CAAA,CAAA,MAF5CK,CAAG,MAFI"}

package/dist/components/statusbadge/StatusBadge.svelte

@@ -6,6 +6,7 @@
    * A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.
    */
   interface Props {
+    [key: string]: any;
     /**
      * Content of the status badge.
      */

package/dist/components/statusbadge/StatusBadge.svelte.d.ts

@@ -2,6 +2,7 @@
  * A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.
  */
 interface Props {
+    [key: string]: any;
     /**
      * Content of the status badge.
      */

package/dist/components/statusbadge/StatusBadge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusbadge/StatusBadge.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;CAC/D;AAmBH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"StatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusbadge/StatusBadge.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;CAC/D;AAmBH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/statusdot/StatusDot.js

@@ -1,4 +1,4 @@
-import{c as l,p as n,a as m,b as c,f as v,r as p,h as g,i as b,j as u}from"../../custom-element.js";import{a as h}from"../../attributes.js";var f=v("<div></div>");const k={hash:"svelte-14acsp3",code:`/**
+import{c as l,p as n,a as m,b as c,f as v,g,h as p,i as b,j as u}from"../../custom-element.js";import{a as h}from"../../attributes.js";var f=p("<div></div>");const k={hash:"svelte-14acsp3",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-status-dot.svelte-14acsp3 {background-color:var(--status-dot-color-background-info, #0b96cc);height:0.5rem;width:0.5rem;border-radius:var(--border-radius-full, 100%);display:inline-block;}.mc-status-dot--s.svelte-14acsp3 {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-14acsp3 {height:1rem;width:1rem;}.mc-status-dot--success.svelte-14acsp3 {background-color:var(--status-dot-color-background-success, #3f9e10);}.mc-status-dot--error.svelte-14acsp3 {background-color:var(--status-dot-color-background-error, #ea302d);}.mc-status-dot--warning.svelte-14acsp3 {background-color:var(--status-dot-color-background-warning, #ea7315);}.mc-status-dot--neutral.svelte-14acsp3 {background-color:var(--status-dot-color-background-neutral, #808080);}`};function w(o,t){n(t,!0),m(o,k);let s=c(t,"size",7,"m"),a=c(t,"status",7,"info"),d=p(t,["$$slots","$$events","$$legacy","$$host","size","status"]);var i={get size(){return s()},set size(e="m"){s(e),u()},get status(){return a()},set status(e="info"){a(e),u()}},r=f();return h(r,()=>({class:["mc-status-dot",`mc-status-dot--${s()}`,`mc-status-dot--${a()}`],...d}),void 0,void 0,void 0,"svelte-14acsp3"),g(o,r),b(i)}customElements.define("m-status-dot",l(w,{size:{},status:{}},[],[],!0));export{w as S};
+ */.mc-status-dot.svelte-14acsp3 {background-color:var(--status-dot-color-background-info, #0b96cc);height:0.5rem;width:0.5rem;border-radius:var(--border-radius-full, 100%);display:inline-block;}.mc-status-dot--s.svelte-14acsp3 {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-14acsp3 {height:1rem;width:1rem;}.mc-status-dot--success.svelte-14acsp3 {background-color:var(--status-dot-color-background-success, #3f9e10);}.mc-status-dot--error.svelte-14acsp3 {background-color:var(--status-dot-color-background-error, #ea302d);}.mc-status-dot--warning.svelte-14acsp3 {background-color:var(--status-dot-color-background-warning, #ea7315);}.mc-status-dot--neutral.svelte-14acsp3 {background-color:var(--status-dot-color-background-neutral, #808080);}`};function w(o,t){n(t,!0),m(o,k);let s=c(t,"size",7,"m"),a=c(t,"status",7,"info"),d=b(t,["$$slots","$$events","$$legacy","$$host","size","status"]);var i={get size(){return s()},set size(e="m"){s(e),u()},get status(){return a()},set status(e="info"){a(e),u()}},r=f();return h(r,()=>({class:["mc-status-dot",`mc-status-dot--${s()}`,`mc-status-dot--${a()}`],...d}),void 0,void 0,void 0,"svelte-14acsp3"),v(o,r),g(i)}customElements.define("m-status-dot",l(w,{size:{},status:{}},[],[],!0));export{w as S};
 //# sourceMappingURL=StatusDot.js.map

package/dist/components/statusdot/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","sources":["../../../src/components/statusdot/StatusDot.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-dot' }} />\n\n<script lang=\"ts\">\n  /**\n   * A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.\n   */\n  interface Props {\n    /**\n     * Allows to define the status dot type.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';\n    /**\n     * Determines the size of the status dot.\n     */\n    size?: 's' | 'm' | 'l';\n  }\n\n  let { size = 'm', status = 'info', ...attrs }: Props = $props();\n</script>\n\n<div\n  class={['mc-status-dot', `mc-status-dot--${size}`, `mc-status-dot--${status}`]}\n  {...attrs}\n></div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["size","status","attrs","$.rest_props","$$props"],"mappings":";;mwBAAA,gBAiBQ,IAAAA,eAAO,GAAG,EAAEC,iBAAS,MAAM,EAAKC,EAAKC,EAAAC,EAAA,qGAA9B,IAAG,iDAAW,OAAM,0CAIzB,kCAAmCJ,EAAI,CAAA,qBAAsBC,GAAM,OACvEC,sDAJN"}
+{"version":3,"file":"StatusDot.js","sources":["../../../src/components/statusdot/StatusDot.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-dot' }} />\n\n<script lang=\"ts\">\n  /**\n   * A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Allows to define the status dot type.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';\n    /**\n     * Determines the size of the status dot.\n     */\n    size?: 's' | 'm' | 'l';\n  }\n\n  let { size = 'm', status = 'info', ...attrs }: Props = $props();\n</script>\n\n<div\n  class={['mc-status-dot', `mc-status-dot--${size}`, `mc-status-dot--${status}`]}\n  {...attrs}\n></div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["size","status","attrs","$.rest_props","$$props","div","root","$.append","$$anchor"],"mappings":";;mwBAEA,gBAgBQ,IAAAA,eAAO,GAAG,EAAEC,iBAAS,MAAM,EAAKC,EAAKC,EAAAC,EAAA,qGAA9B,IAAG,iDAAW,OAAM,YAGlCC,EAAAC,EAAA,WAAAD,eACS,kCAAmCL,EAAI,CAAA,qBAAsBC,GAAM,OACvEC,2CAFLK,EAAAC,EAAAH,CAAA,MAFO"}

package/dist/components/statusdot/StatusDot.svelte

@@ -5,6 +5,7 @@
    * A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.
    */
   interface Props {
+    [key: string]: any;
     /**
      * Allows to define the status dot type.
      */

package/dist/components/statusdot/StatusDot.svelte.d.ts

@@ -2,6 +2,7 @@
  * A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.
  */
 interface Props {
+    [key: string]: any;
     /**
      * Allows to define the status dot type.
      */

package/dist/components/statusdot/StatusDot.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusdot/StatusDot.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC9D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAeH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"StatusDot.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusdot/StatusDot.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC9D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAeH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/statusmessage/StatusMessage.js

@@ -1,4 +1,4 @@
-import{c as w,p as h,b as l,A as j,t as _,h as v,i as p,j as i,l as b,m as N,a as q,x as G,k as H,f as k,r as J,d as x,s as K,n as O,e as y,g as P}from"../../custom-element.js";import{i as Q}from"../../if.js";import{c as R}from"../../svelte-component.js";import{s as f,b as C,a as T}from"../../attributes.js";import"../../legacy.js";import{C as U}from"../../CrossCircleFilled24.js";import{L as V}from"../loader/Loader.js";var X=j('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m0 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m1 2a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0z"></path></svg>');function z(u,s){h(s,!1);let n=l(s,"id",12,void 0),a=l(s,"style",12,void 0),o=l(s,"className",12,void 0),r=l(s,"fill",12,void 0),m=l(s,"size",12,"1.5rem");var d={get id(){return n()},set id(e){n(e),i()},get style(){return a()},set style(e){a(e),i()},get className(){return o()},set className(e){o(e),i()},get fill(){return r()},set fill(e){r(e),i()},get size(){return m()},set size(e){m(e),i()}},t=X();return _(()=>{f(t,"id",n()),C(t,a()),b(t,0,N(o())),f(t,"fill",r())}),v(u,t),p(d)}customElements.define("info-circle-filled-24",w(z,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Y=j('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m1 6a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0zm-1 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2"></path></svg>');function E(u,s){h(s,!1);let n=l(s,"id",12,void 0),a=l(s,"style",12,void 0),o=l(s,"className",12,void 0),r=l(s,"fill",12,void 0),m=l(s,"size",12,"1.5rem");var d={get id(){return n()},set id(e){n(e),i()},get style(){return a()},set style(e){a(e),i()},get className(){return o()},set className(e){o(e),i()},get fill(){return r()},set fill(e){r(e),i()},get size(){return m()},set size(e){m(e),i()}},t=Y();return _(()=>{f(t,"id",n()),C(t,a()),b(t,0,N(o())),f(t,"fill",r())}),v(u,t),p(d)}customElements.define("warning-circle-filled-24",w(E,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Z=j('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m5.207 6.793a1 1 0 0 1 0 1.414l-5.5 5.5a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L11 13.586l4.793-4.793a1 1 0 0 1 1.414 0"></path></svg>');function F(u,s){h(s,!1);let n=l(s,"id",12,void 0),a=l(s,"style",12,void 0),o=l(s,"className",12,void 0),r=l(s,"fill",12,void 0),m=l(s,"size",12,"1.5rem");var d={get id(){return n()},set id(e){n(e),i()},get style(){return a()},set style(e){a(e),i()},get className(){return o()},set className(e){o(e),i()},get fill(){return r()},set fill(e){r(e),i()},get size(){return m()},set size(e){m(e),i()}},t=Z();return _(()=>{f(t,"id",n()),C(t,a()),b(t,0,N(o())),f(t,"fill",r())}),v(u,t),p(d)}customElements.define("check-circle-filled-24",w(F,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var $=k('<span class="mc-status-message__icon svelte-o2wjin"><!></span>'),ee=k('<div><!> <p class="mc-status-message__description svelte-o2wjin"> </p></div>');const se={hash:"svelte-o2wjin",code:`/**
+import{c as S,p as $,a as k,b as g,s as L,t as M,f as v,g as q,h as d,i as D,d as n,j as f,q as E,r,e as I,x as W}from"../../custom-element.js";import{i as A}from"../../if.js";import{c as B}from"../../svelte-component.js";import{a as G}from"../../attributes.js";import{g as p,h as H,i as J,d as K}from"../../Condition20.js";import{L as N}from"../loader/Loader.js";var O=d('<span class="mc-status-message__icon svelte-o2wjin"><!></span>'),P=d('<div><!> <p class="mc-status-message__description svelte-o2wjin"> </p></div>');const Q={hash:"svelte-o2wjin",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-status-message.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-info, #0b96cc);}.mc-status-message.svelte-o2wjin {display:inline-flex;gap:0.25rem;align-items:center;}.mc-status-message__icon.svelte-o2wjin {width:1.5rem;height:1.5rem;}.mc-status-message__description.svelte-o2wjin {margin:0;font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--action-bottom-bar-color-status-item-text, #404040);}.mc-status-message--success.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-success, #3f9e10);}.mc-status-message--error.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-error, #ea302d);}.mc-status-message--warning.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-warning, #ea7315);}.mc-status-message--neutral.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-neutral, #808080);}`};function te(u,s){h(s,!0),q(u,se);let n=l(s,"label",7),a=l(s,"status",7,"info"),o=J(s,["$$slots","$$events","$$legacy","$$host","label","status"]);const r=[{status:"info",component:z},{status:"success",component:F},{status:"warning",component:E},{status:"error",component:U},{status:"neutral",component:z}];function m(c){return r.find(g=>g.status===c)||r[0]}let d=G(H(m(a())));var t={get label(){return n()},set label(c){n(c),i()},get status(){return a()},set status(c="info"){a(c),i()}},e=ee();T(e,()=>({class:["mc-status-message",`mc-status-message--${a()}`],...o}),void 0,void 0,void 0,"svelte-o2wjin");var S=x(e);{var B=c=>{var g=$(),D=x(g);R(D,()=>O(d).component,(I,W)=>{W(I,{"aria-hidden":"true"})}),y(g),v(c,g)},L=c=>{V(c,{size:"s"})};Q(S,c=>{a()!=="inprogress"?c(B):c(L,!1)})}var M=K(S,2),A=x(M,!0);return y(M),y(e),_(()=>P(A,n())),v(u,e),p(t)}customElements.define("m-status-message",w(te,{label:{},status:{}},[],[],!0));
+ */.mc-status-message.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-info, #0b96cc);}.mc-status-message.svelte-o2wjin {display:inline-flex;gap:0.25rem;align-items:center;}.mc-status-message__icon.svelte-o2wjin {width:1.5rem;height:1.5rem;}.mc-status-message__description.svelte-o2wjin {margin:0;font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--status-message-color-text, #404040);}.mc-status-message--success.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-success, #3f9e10);}.mc-status-message--error.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-error, #ea302d);}.mc-status-message--warning.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-warning, #ea7315);}.mc-status-message--neutral.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-neutral, #808080);}`};function R(l,a){$(a,!0),k(l,Q);let i=g(a,"label",7),e=g(a,"status",7,"info"),_=D(a,["$$slots","$$events","$$legacy","$$host","label","status"]);const c=[{status:"info",component:p},{status:"success",component:H},{status:"warning",component:J},{status:"error",component:K},{status:"neutral",component:p}];function w(s){return c.find(t=>t.status===s)||c[0]}const h=W(()=>w(e()));var j={get label(){return i()},set label(s){i(s),f()},get status(){return e()},set status(s="info"){e(s),f()}},o=P();G(o,()=>({class:["mc-status-message",`mc-status-message--${e()}`],..._}),void 0,void 0,void 0,"svelte-o2wjin");var m=n(o);{var b=s=>{var t=O(),y=n(t);B(y,()=>E(h).component,(F,z)=>{z(F,{})}),r(t),v(s,t)},x=s=>{N(s,{size:"s"})};A(m,s=>{e()!=="inprogress"?s(b):s(x,!1)})}var u=L(m,2),C=n(u,!0);return r(u),r(o),M(()=>I(C,i())),v(l,o),q(j)}customElements.define("m-status-message",S(R,{label:{},status:{}},[],[],!0));
 //# sourceMappingURL=StatusMessage.js.map

package/dist/components/statusmessage/StatusMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusMessage.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/InfoCircleFilled24/InfoCircleFilled24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/WarningCircleFilled24/WarningCircleFilled24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/CheckCircleFilled24/CheckCircleFilled24.svelte","../../../src/components/statusmessage/StatusMessage.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'info-circle-filled-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m0 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m1 2a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0z\"/></svg>","<svelte:options customElement={{ tag: 'warning-circle-filled-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m1 6a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0zm-1 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2\"/></svg>","<svelte:options customElement={{ tag: 'check-circle-filled-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m5.207 6.793a1 1 0 0 1 0 1.414l-5.5 5.5a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L11 13.586l4.793-4.793a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'm-status-message' }} />\n\n<script lang=\"ts\">\n  import InfoCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled24/InfoCircleFilled24.svelte';\n  import WarningCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled24/WarningCircleFilled24.svelte';\n  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';\n  import CheckCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled24/CheckCircleFilled24.svelte';\n  import Loader from '../loader/Loader.svelte';\n  /**\n   * A Status Message is a compact component that combines an icon and concise text to communicate system states or user feedback in limited interface space. The icon and message work together as a unified structure to provide clear, immediate understanding of the current status. Status Messages are designed for contexts where space is constrained but clear communication is essential, offering quick recognition through color-coded icons paired with brief, actionable text.\n   */\n  interface Props {\n    /**\n     * Allows to define the status message style.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral' | 'inprogress';\n    /**\n     * Label of the status message.\n     */\n    label: string;\n  }\n\n  let { label, status = 'info', ...attrs }: Props = $props();\n\n  const iconMap = [\n    { status: 'info', component: InfoCircleFilled24 },\n    { status: 'success', component: CheckCircleFilled24 },\n    { status: 'warning', component: WarningCircleFilled24 },\n    { status: 'error', component: CrossCircleFilled24 },\n    { status: 'neutral', component: InfoCircleFilled24 },\n  ];\n\n  function getSelected(status: string) {\n    return iconMap.find((icon) => icon.status === status) || iconMap[0];\n  }\n\n  let selected = $state(getSelected(status));\n</script>\n\n<div class={['mc-status-message', `mc-status-message--${status}`]} {...attrs}>\n  {#if status !== 'inprogress'}\n    <span class=\"mc-status-message__icon\">\n      <selected.component aria-hidden=\"true\" />\n    </span>\n  {:else}\n    <Loader size=\"s\" />\n  {/if}\n  <p class=\"mc-status-message__description\">{label}</p>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-message';\n</style>\n"],"names":["id","style","className","fill","size","label","$.prop","$$props","status","attrs","$.rest_props","iconMap","InfoCircleFilled24","CheckCircleFilled24","WarningCircleFilled24","CrossCircleFilled24","getSelected","icon","selected","$.state","$.proxy","$$render","consequent","alternate"],"mappings":"guBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,gRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,uaCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,gRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,keCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,gRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E;;6mCCPA,qBAsBQE,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,iBAAS,MAAM,EAAKC,EAAKC,EAAAH,EAAA,mEAEhCI,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,CAAkB,EAC7C,CAAA,OAAQ,UAAW,UAAWC,CAAmB,EACjD,CAAA,OAAQ,UAAW,UAAWC,CAAqB,EACnD,CAAA,OAAQ,QAAS,UAAWC,CAAmB,EAC/C,CAAA,OAAQ,UAAW,UAAWH,CAAkB,YAG3CI,EAAYR,EAAgB,CAC5B,OAAAG,EAAQ,KAAMM,GAASA,EAAK,SAAWT,CAAM,GAAKG,EAAQ,CAAC,CACpE,KAEIO,EAAQC,EAAAC,EAAUJ,EAAYR,EAAM,CAAA,CAAA,CAAA,8FAdlB,OAAM,6BAiBjB,MAAA,CAAA,0CAA2CA,EAAM,CAAA,EAAA,KAASC,0LAChED,EAAM,IAAK,aAAYa,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,sDAOelB,EAAK,CAAA,CAAA,aAVlD","x_google_ignoreList":[0,1,2]}
+{"version":3,"file":"StatusMessage.js","sources":["../../../src/components/statusmessage/StatusMessage.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-message' }} />\n\n<script lang=\"ts\">\n  import {\n    InfoCircleFilled24,\n    WarningCircleFilled24,\n    CrossCircleFilled24,\n    CheckCircleFilled24,\n  } from '@mozaic-ds/icons-svelte';\n  import Loader from '../loader/Loader.svelte';\n  /**\n   * A Status Message is a compact component that combines an icon and concise text to communicate system states or user feedback in limited interface space. The icon and message work together as a unified structure to provide clear, immediate understanding of the current status. Status Messages are designed for contexts where space is constrained but clear communication is essential, offering quick recognition through color-coded icons paired with brief, actionable text.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Allows to define the status message style.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral' | 'inprogress';\n    /**\n     * Label of the status message.\n     */\n    label: string;\n  }\n\n  let { label, status = 'info', ...attrs }: Props = $props();\n\n  const iconMap = [\n    { status: 'info', component: InfoCircleFilled24 },\n    { status: 'success', component: CheckCircleFilled24 },\n    { status: 'warning', component: WarningCircleFilled24 },\n    { status: 'error', component: CrossCircleFilled24 },\n    { status: 'neutral', component: InfoCircleFilled24 },\n  ];\n\n  function getSelected(status: string) {\n    return iconMap.find((icon) => icon.status === status) || iconMap[0];\n  }\n\n  const selected = $derived(getSelected(status));\n</script>\n\n<div class={['mc-status-message', `mc-status-message--${status}`]} {...attrs}>\n  {#if status !== 'inprogress'}\n    <span class=\"mc-status-message__icon\">\n      <selected.component />\n    </span>\n  {:else}\n    <Loader size=\"s\" />\n  {/if}\n  <p class=\"mc-status-message__description\">{label}</p>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-message';\n</style>\n"],"names":["label","$.prop","$$props","status","attrs","$.rest_props","iconMap","InfoCircleFilled24","CheckCircleFilled24","WarningCircleFilled24","CrossCircleFilled24","getSelected","icon","selected","$.derived","div","root","span","root_1","selected_component","$$anchor","Loader","$$render","consequent","alternate","p","$.sibling","node"],"mappings":";;6lCAEA,oBAuBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,iBAAS,MAAM,EAAKC,EAAKC,EAAAH,EAAA,mEAEhCI,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,CAAkB,EAC7C,CAAA,OAAQ,UAAW,UAAWC,CAAmB,EACjD,CAAA,OAAQ,UAAW,UAAWC,CAAqB,EACnD,CAAA,OAAQ,QAAS,UAAWC,CAAmB,EAC/C,CAAA,OAAQ,UAAW,UAAWH,CAAkB,YAG3CI,EAAYR,EAAgB,CAC5B,OAAAG,EAAQ,KAAMM,GAASA,EAAK,SAAWT,CAAM,GAAKG,EAAQ,CAAC,CACpE,OAEMO,EAAQC,EAAA,IAAYH,EAAYR,EAAM,CAAA,CAAA,8FAdtB,OAAM,YAiB7BY,EAAGC,EAAA,IAAHD,QAAY,MAAA,CAAA,0CAA2CZ,EAAM,CAAA,EAAA,KAASC,kDAAtEW,CAAG,iBAECE,EAAIC,EAAA,MAAJD,CAAI,iCACFE,EAAkBC,EAAA,EAAA,MADpBH,CAAI,MAAJA,CAAI,SAIJI,EAAMD,EAAA,CAAA,KAAA,GAAA,CAAA,WALJjB,EAAM,IAAK,aAAYmB,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,QAO3BC,EAACC,EAAAC,EAAA,CAAA,MAADF,EAAC,EAAA,WAADA,CAAC,IARHV,CAAG,YAQyCf,EAAK,CAAA,CAAA,MARjDe,CAAG,MAFI"}