@mozaic-ds/web-components 1.3.0 → 1.5.0

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte.d.ts

@@ -2,6 +2,7 @@
  * A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.
  */
 interface Props {
+    [key: string]: any;
     /**
      * Allows to define the progress bar size.
      */

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgressbarBuffer.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiBH,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"LinearProgressbarBuffer.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiBH,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.js

@@ -1,4 +1,4 @@
-import{c as g,p as b,a as m,b as u,f,r as h,d as r,t as _,h as x,i as k,j as w,U as y,e as a,g as $}from"../../custom-element.js";import{a as z}from"../../attributes.js";var j=f('<div class="mc-linear-progressbar-percentage svelte-kh7ttv"><div><div class="mc-linear-progressbar-percentage__label svelte-kh7ttv"><p class="mc-linear-progressbar-percentage__value svelte-kh7ttv"> <span class="mc-linear-progressbar-percentage__unit svelte-kh7ttv">%</span></p></div></div></div>');const L={hash:"svelte-kh7ttv",code:`/**
+import{c as g,p as b,a as m,b as u,t as f,f as h,g as _,h as x,i as k,d as r,j as w,aH as y,r as a,e as $}from"../../custom-element.js";import{a as z}from"../../attributes.js";var j=x('<div class="mc-linear-progressbar-percentage svelte-kh7ttv"><div><div class="mc-linear-progressbar-percentage__label svelte-kh7ttv"><p class="mc-linear-progressbar-percentage__value svelte-kh7ttv"> <span class="mc-linear-progressbar-percentage__unit svelte-kh7ttv">%</span></p></div></div></div>');const L={hash:"svelte-kh7ttv",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-linear-progressbar-percentage.svelte-kh7ttv {--progress-value: 40;font-family:var(--font-family, LeroyMerlin), sans-serif;background-color:var(--progressbar-color-background, #c9d0de);height:1.5rem;position:relative;min-width:6rem;border-radius:var(--border-radius-l, 1rem);box-sizing:border-box;}.mc-linear-progressbar-percentage__indicator.svelte-kh7ttv {border-radius:var(--border-radius-l, 1rem);background-color:var(--progressbar-color-indicator, #464e63);min-width:40px;height:100%;top:0;left:0;position:absolute;transition:width 0.4s ease;overflow:hidden;display:flex;justify-content:flex-end;width:calc(40px + var(--progress-value) * (100% - 40px) / 100);}.mc-linear-progressbar-percentage__label.svelte-kh7ttv {box-sizing:border-box;border-radius:var(--border-radius-l, 1rem);background-color:var(--progressbar-badge-color-background, #ffffff);color:var(--progressbar-badge-color-text, #171b26);height:1.5rem;width:2.5rem;border:0.125rem solid var(--progressbar-color-indicator, #464e63);display:flex;align-items:center;justify-content:center;}.mc-linear-progressbar-percentage__value.svelte-kh7ttv {font-size:var(--font-size-50, 0.75rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;}.mc-linear-progressbar-percentage__unit.svelte-kh7ttv {font-size:var(--font-size-25, 0.625rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;position:relative;bottom:1px;}`};function P(i,t){b(t,!0),m(i,L);let e=u(t,"value",7,0),v=h(t,["$$slots","$$events","$$legacy","$$host","value"]);var c={get value(){return e()},set value(p=0){e(p),w()}},s=j(),o=r(s);z(o,()=>({class:"mc-linear-progressbar-percentage__indicator",role:"progressbar",style:`--progress-value: ${e()};`,"aria-valuenow":e(),"aria-valuemin":"0","aria-valuemax":"100",...v}),void 0,void 0,void 0,"svelte-kh7ttv");var l=r(o),n=r(l),d=r(n);return y(),a(n),a(l),a(o),a(s),_(()=>$(d,`${e()??""} `)),x(i,s),k(c)}customElements.define("m-linear-progressbar-percentage",g(P,{value:{}},[],[],!0));
+ */.mc-linear-progressbar-percentage.svelte-kh7ttv {--progress-value: 40;font-family:var(--font-family, LeroyMerlin), sans-serif;background-color:var(--progressbar-color-background, #c9d0de);height:1.5rem;position:relative;min-width:6rem;border-radius:var(--border-radius-l, 1rem);box-sizing:border-box;}.mc-linear-progressbar-percentage__indicator.svelte-kh7ttv {border-radius:var(--border-radius-l, 1rem);background-color:var(--progressbar-color-indicator, #464e63);min-width:40px;height:100%;top:0;left:0;position:absolute;transition:width 0.4s ease;overflow:hidden;display:flex;justify-content:flex-end;width:calc(40px + var(--progress-value) * (100% - 40px) / 100);}.mc-linear-progressbar-percentage__label.svelte-kh7ttv {box-sizing:border-box;border-radius:var(--border-radius-l, 1rem);background-color:var(--progressbar-badge-color-background, #ffffff);color:var(--progressbar-badge-color-text, #171b26);height:1.5rem;width:2.5rem;border:0.125rem solid var(--progressbar-color-indicator, #464e63);display:flex;align-items:center;justify-content:center;}.mc-linear-progressbar-percentage__value.svelte-kh7ttv {font-size:var(--font-size-50, 0.75rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;}.mc-linear-progressbar-percentage__unit.svelte-kh7ttv {font-size:var(--font-size-25, 0.625rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;position:relative;bottom:1px;}`};function P(i,t){b(t,!0),m(i,L);let e=u(t,"value",7,0),v=k(t,["$$slots","$$events","$$legacy","$$host","value"]);var c={get value(){return e()},set value(p=0){e(p),w()}},s=j(),o=r(s);z(o,()=>({class:"mc-linear-progressbar-percentage__indicator",role:"progressbar",style:`--progress-value: ${e()};`,"aria-valuenow":e(),"aria-valuemin":"0","aria-valuemax":"100",...v}),void 0,void 0,void 0,"svelte-kh7ttv");var l=r(o),n=r(l),d=r(n);return y(),a(n),a(l),a(o),a(s),f(()=>$(d,`${e()??""} `)),h(i,s),_(c)}customElements.define("m-linear-progressbar-percentage",g(P,{value:{}},[],[],!0));
 //# sourceMappingURL=LinearProgressbarPercentage.js.map

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgressbarPercentage.js","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-linear-progressbar-percentage' }} />\n\n<script lang=\"ts\">\n  /**\n   * A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.\n   */\n  interface Props {\n    /**\n     * The current value of the progress bar.\n     */\n    value?: number;\n  }\n\n  let { value = 0, ...attrs }: Props = $props();\n</script>\n\n<div class=\"mc-linear-progressbar-percentage\">\n  <div\n    class=\"mc-linear-progressbar-percentage__indicator\"\n    role=\"progressbar\"\n    style={`--progress-value: ${value};`}\n    aria-valuenow={value}\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    {...attrs}\n  >\n    <div class=\"mc-linear-progressbar-percentage__label\">\n      <p class=\"mc-linear-progressbar-percentage__value\">\n        {value}\n        <span class=\"mc-linear-progressbar-percentage__unit\">%</span>\n      </p>\n    </div>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/linear-progressbar-percentage';\n</style>\n"],"names":["value","attrs","$.rest_props","$$props"],"mappings":";;i4CAAA,gBAaQ,IAAAA,gBAAQ,CAAC,EAAKC,EAAKC,EAAAC,EAAA,CAAA,UAAA,WAAA,WAAA,SAAA,OAAA,CAAA,6CAAX,EAAC,qIAOeH,EAAK,CAAA,oBAClBA,EAAK,+CAGhBC,+GAICD,KAAK,EAAA,GAAA,CAAA,aAdd"}
+{"version":3,"file":"LinearProgressbarPercentage.js","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-linear-progressbar-percentage' }} />\n\n<script lang=\"ts\">\n  /**\n   * A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * The current value of the progress bar.\n     */\n    value?: number;\n  }\n\n  let { value = 0, ...attrs }: Props = $props();\n</script>\n\n<div class=\"mc-linear-progressbar-percentage\">\n  <div\n    class=\"mc-linear-progressbar-percentage__indicator\"\n    role=\"progressbar\"\n    style={`--progress-value: ${value};`}\n    aria-valuenow={value}\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    {...attrs}\n  >\n    <div class=\"mc-linear-progressbar-percentage__label\">\n      <p class=\"mc-linear-progressbar-percentage__value\">\n        {value}\n        <span class=\"mc-linear-progressbar-percentage__unit\">%</span>\n      </p>\n    </div>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/linear-progressbar-percentage';\n</style>\n"],"names":["value","attrs","$.rest_props","$$props","div","root","div_1","$.child","div_2","p","$.reset"],"mappings":";;i4CAEA,gBAYQ,IAAAA,gBAAQ,CAAC,EAAKC,EAAKC,EAAAC,EAAA,CAAA,UAAA,WAAA,WAAA,SAAA,OAAA,CAAA,6CAAX,EAAC,YAGhBC,EAAGC,EAAA,EACDC,EAAAC,EADFH,CAAG,IACDE,0GAG6BN,EAAK,CAAA,oBAClBA,EAAK,+CAGhBC,0CAEH,IAAAO,EAAGD,EATLD,CAAA,EAUIG,IADFD,CAAG,MACDC,CAAC,eAADA,CAAC,IADHD,CAAG,EATLE,EAAAJ,CAAA,IADFF,CAAG,eAYKJ,KAAK,EAAA,GAAA,CAAA,MAZbI,CAAG,MAFI"}

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte

@@ -5,6 +5,7 @@
    * A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.
    */
   interface Props {
+    [key: string]: any;
     /**
      * The current value of the progress bar.
      */

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte.d.ts

@@ -2,6 +2,7 @@
  * A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.
  */
 interface Props {
+    [key: string]: any;
     /**
      * The current value of the progress bar.
      */

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgressbarPercentage.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwBH,QAAA,MAAM,2BAA2B,2CAAwC,CAAC;AAC1E,KAAK,2BAA2B,GAAG,UAAU,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAClF,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"LinearProgressbarPercentage.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwBH,QAAA,MAAM,2BAA2B,2CAAwC,CAAC;AAC1E,KAAK,2BAA2B,GAAG,UAAU,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAClF,eAAe,2BAA2B,CAAC"}

package/dist/components/link/Link.js

@@ -1,4 +1,4 @@
-import{c as L,p as S,a as q,b as i,f as _,r as A,d as c,s as b,h as u,i as B,j as a,e as s}from"../../custom-element.js";import{i as w}from"../../if.js";import{s as x}from"../../slot.js";import{a as F}from"../../attributes.js";var G=_('<span class="mc-link__icon svelte-5kacnx"><!></span>'),H=_('<span class="mc-link__icon svelte-5kacnx"><!></span>'),I=_('<a><!> <span class="mc-link__label svelte-5kacnx"><!></span> <!></a>');const J={hash:"svelte-5kacnx",code:`/**
+import{c as E,p as L,a as S,b as i,s as b,f as h,g as q,h as _,i as A,d as c,j as a,r as s}from"../../custom-element.js";import{i as y}from"../../if.js";import{s as x}from"../../slot.js";import{a as F}from"../../attributes.js";import"../../branches.js";var G=_('<span class="mc-link__icon svelte-5kacnx"><!></span>'),H=_('<span class="mc-link__icon svelte-5kacnx"><!></span>'),I=_('<a><!> <span class="mc-link__label svelte-5kacnx"><!></span> <!></a>');const J={hash:"svelte-5kacnx",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-link.svelte-5kacnx {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-5kacnx {line-height:1.3;}.mc-link__icon.svelte-5kacnx {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-5kacnx:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-5kacnx) {text-decoration:underline;}.mc-link.svelte-5kacnx: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-link--m.svelte-5kacnx {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-5kacnx {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-5kacnx {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-5kacnx {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-5kacnx {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {border-bottom:var(--border-width-s, 0.0625rem) solid currentColor;}.mc-link--stand-alone.svelte-5kacnx:hover .mc-link__label:where(.svelte-5kacnx) {border-color:transparent;}.mc-link--inline.svelte-5kacnx {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {line-height:1;}.mc-link--inline.svelte-5kacnx:hover {text-decoration:none;}.mc-link__icon.svelte-5kacnx:empty {display:none;}`};function K(p,n){S(n,!0),q(p,J);let m=i(n,"href",7),f=i(n,"target",7),l=i(n,"inline",7),k=i(n,"appearance",7,"standard"),v=i(n,"size",7,"s"),o=i(n,"iconposition",7,"left"),y=A(n,["$$slots","$$events","$$legacy","$$host","href","target","inline","appearance","size","iconposition"]);var z={get href(){return m()},set href(e){m(e),a()},get target(){return f()},set target(e){f(e),a()},get inline(){return l()},set inline(e){l(e),a()},get appearance(){return k()},set appearance(e="standard"){k(e),a()},get size(){return v()},set size(e="s"){v(e),a()},get iconposition(){return o()},set iconposition(e="left"){o(e),a()}},r=I();F(r,()=>({class:["mc-link",`mc-link--${k()}`,`mc-link--${v()}`,l()&&"mc-link--inline",!l()&&"mc-link--stand-alone"],href:m(),target:f(),...y}),void 0,void 0,void 0,"svelte-5kacnx");var g=c(r);{var j=e=>{var t=G(),h=c(t);x(h,n,"icon",{}),s(t),u(e,t)};w(g,e=>{o()==="left"&&e(j)})}var d=b(g,2),C=c(d);x(C,n,"default",{}),s(d);var D=b(d,2);{var E=e=>{var t=H(),h=c(t);x(h,n,"icon",{}),s(t),u(e,t)};w(D,e=>{o()==="right"&&e(E)})}return s(r),u(p,r),B(z)}customElements.define("m-link",L(K,{href:{},target:{},inline:{},appearance:{},size:{},iconposition:{}},["icon","default"],[],!0));
+ */.mc-link.svelte-5kacnx {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-5kacnx {line-height:1.3;}.mc-link__icon.svelte-5kacnx {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-5kacnx:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-5kacnx) {text-decoration:underline;}.mc-link.svelte-5kacnx: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-link--m.svelte-5kacnx {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-5kacnx {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-5kacnx {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-5kacnx {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-5kacnx {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {border-bottom:var(--border-width-s, 0.0625rem) solid currentColor;}.mc-link--stand-alone.svelte-5kacnx:hover .mc-link__label:where(.svelte-5kacnx) {border-color:transparent;}.mc-link--inline.svelte-5kacnx {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {line-height:1;}.mc-link--inline.svelte-5kacnx:hover {text-decoration:none;}.mc-link__icon.svelte-5kacnx:empty {display:none;}`};function K(p,n){L(n,!0),S(p,J);let m=i(n,"href",7),f=i(n,"target",7),l=i(n,"inline",7),k=i(n,"appearance",7,"standard"),v=i(n,"size",7,"s"),r=i(n,"iconposition",7,"left"),w=A(n,["$$slots","$$events","$$legacy","$$host","href","target","inline","appearance","size","iconposition"]);var z={get href(){return m()},set href(e){m(e),a()},get target(){return f()},set target(e){f(e),a()},get inline(){return l()},set inline(e){l(e),a()},get appearance(){return k()},set appearance(e="standard"){k(e),a()},get size(){return v()},set size(e="s"){v(e),a()},get iconposition(){return r()},set iconposition(e="left"){r(e),a()}},o=I();F(o,()=>({class:["mc-link",`mc-link--${k()}`,`mc-link--${v()}`,l()&&"mc-link--inline",!l()&&"mc-link--stand-alone"],href:m(),target:f(),...w}),void 0,void 0,void 0,"svelte-5kacnx");var g=c(o);{var j=e=>{var t=G(),u=c(t);x(u,n,"icon",{},null),s(t),h(e,t)};y(g,e=>{r()==="left"&&e(j)})}var d=b(g,2),B=c(d);x(B,n,"default",{},null),s(d);var C=b(d,2);{var D=e=>{var t=H(),u=c(t);x(u,n,"icon",{},null),s(t),h(e,t)};y(C,e=>{r()==="right"&&e(D)})}return s(o),h(p,o),q(z)}customElements.define("m-link",E(K,{inline:{attribute:"inline",reflect:!0,type:"Boolean"},href:{},target:{},appearance:{},size:{},iconposition:{}},["icon","default"],[],!0));
 //# sourceMappingURL=Link.js.map

package/dist/components/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-link' }} />\n\n<script lang=\"ts\">\n  /**\n   * A link is an interactive text element used to navigate between pages, sections, or external resources. It is typically underlined and styled to indicate its clickable nature. Links can be standalone or embedded within text, and they may include icons to reinforce their purpose. They are essential for navigation and content referencing in web and application interfaces.\n   *\n   * @slot default - Use this slot to insert the textual content of the Link.\n   * @slot icon - Use this slot to insert an icon for the Link.\n   */\n  interface Props {\n    /**\n     * Position of the icon relative to the text.\n     */\n    iconposition?: 'left' | 'right';\n    /**\n     * Allows to define the link appearance.\n     */\n    appearance?: 'secondary' | 'accent' | 'inverse' | 'standard';\n    /**\n     * Allows to define the link size.\n     */\n    size?: 's' | 'm';\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     * Specify wether the link is inline.\n     */\n    inline?: boolean;\n  }\n\n  let {\n    href,\n    target,\n    inline,\n    appearance = 'standard',\n    size = 's',\n    iconposition = 'left',\n    ...attrs\n  }: Props = $props();\n</script>\n\n<a\n  class={[\n    'mc-link',\n    `mc-link--${appearance}`,\n    `mc-link--${size}`,\n    inline && 'mc-link--inline',\n    !inline && 'mc-link--stand-alone',\n  ]}\n  {href}\n  {target}\n  {...attrs}\n>\n  {#if iconposition === 'left'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <span class=\"mc-link__label\">\n    <slot />\n  </span>\n  {#if iconposition === 'right'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n</a>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/link';\n\n  .mc-link__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["href","$.prop","$$props","target","inline","appearance","size","iconposition","attrs","$.rest_props","$$render","consequent","consequent_1"],"mappings":";;+zDAAA,oBAqCIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAMF,EAAAC,EAAA,SAAA,CAAA,EACNE,EAAMH,EAAAC,EAAA,SAAA,CAAA,EACNG,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,uBAAe,MAAM,EAClBC,EAAAC,EAAAP,EAAA,4SAHU,WAAU,6CAChB,IAAG,6DACK,OAAM,mCAOrB,sBACYG,EAAU,CAAA,eACVC,EAAI,CAAA,GAChBF,EAAM,GAAI,kBACT,CAAAA,EAAM,GAAI,+CAITI,uHAECD,EAAY,IAAK,QAAMG,EAAAC,CAAA,gIAQvBJ,EAAY,IAAK,SAAOG,EAAAE,CAAA,2BAtB/B"}
+{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-link',\n    props: {\n      inline: { reflect: true, type: 'Boolean', attribute: 'inline' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  /**\n   * A link is an interactive text element used to navigate between pages, sections, or external resources. It is typically underlined and styled to indicate its clickable nature. Links can be standalone or embedded within text, and they may include icons to reinforce their purpose. They are essential for navigation and content referencing in web and application interfaces.\n   *\n   * @slot default - Use this slot to insert the textual content of the Link.\n   * @slot icon - Use this slot to insert an icon for the Link.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Position of the icon relative to the text.\n     */\n    iconposition?: 'left' | 'right';\n    /**\n     * Allows to define the link appearance.\n     */\n    appearance?: 'secondary' | 'accent' | 'inverse' | 'standard';\n    /**\n     * Allows to define the link size.\n     */\n    size?: 's' | 'm';\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     * Specify wether the link is inline.\n     */\n    inline?: boolean;\n  }\n\n  let {\n    href,\n    target,\n    inline,\n    appearance = 'standard',\n    size = 's',\n    iconposition = 'left',\n    ...attrs\n  }: Props = $props();\n</script>\n\n<a\n  class={[\n    'mc-link',\n    `mc-link--${appearance}`,\n    `mc-link--${size}`,\n    inline && 'mc-link--inline',\n    !inline && 'mc-link--stand-alone',\n  ]}\n  {href}\n  {target}\n  {...attrs}\n>\n  {#if iconposition === 'left'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <span class=\"mc-link__label\">\n    <slot />\n  </span>\n  {#if iconposition === 'right'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n</a>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/link';\n\n  .mc-link__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["href","$.prop","$$props","target","inline","appearance","size","iconposition","attrs","$.rest_props","a","root","node","$.child","span","root_1","$$render","consequent","span_1","$.sibling","span_2","root_2","consequent_1","$.reset","$.append","$$anchor"],"mappings":";;+zDASA,oBAoCIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAMF,EAAAC,EAAA,SAAA,CAAA,EACNE,EAAMH,EAAAC,EAAA,SAAA,CAAA,EACNG,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,uBAAe,MAAM,EAClBC,EAAAC,EAAAP,EAAA,4SAHU,WAAU,6CAChB,IAAG,6DACK,OAAM,YAKxBQ,EAAAC,EAAA,IAAAD,eAEG,sBACYL,EAAU,CAAA,eACVC,EAAI,CAAA,GAChBF,EAAM,GAAI,kBACT,CAAAA,EAAM,GAAI,6BAEZJ,EAAI,SACJG,EAAM,KACHK,0CAVL,IAAAI,EAAAC,EAAAH,CAAA,iBAaII,EAAIC,EAAA,MAAJD,CAAI,0BAAJA,CAAI,MAAJA,CAAI,WADFP,EAAY,IAAK,QAAMS,EAAAC,CAAA,QAK3BC,EAAIC,EAAAP,EAAA,CAAA,MAAJM,CAAI,6BAAJA,CAAI,UAAJA,EAAI,CAAA,iBAIFE,EAAIC,EAAA,MAAJD,CAAI,0BAAJA,CAAI,MAAJA,CAAI,WADFb,EAAY,IAAK,SAAOS,EAAAM,CAAA,IApB9BC,OAAAA,EAAAb,CAAA,EAAAc,EAAAC,EAAAf,CAAA,MAFO"}

package/dist/components/link/Link.stories.d.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import './Link.svelte';
-import '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';
-import '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';
+import '@mozaic-ds/icons-svelte/components/ChevronRight24/ChevronRight24.svelte';
+import '@mozaic-ds/icons-svelte/components/ChevronLeft24/ChevronLeft24.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/link/Link.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,eAAe,CAAC;AACvB,OAAO,qEAAqE,CAAC;AAC7E,OAAO,mEAAmE,CAAC;AAE3E,QAAA,MAAM,IAAI,EAAE,IAqCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC"}
+{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,eAAe,CAAC;AACvB,OAAO,yEAAyE,CAAC;AACjF,OAAO,uEAAuE,CAAC;AAE/E,QAAA,MAAM,IAAI,EAAE,IAqCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC"}

package/dist/components/link/Link.stories.js

@@ -2,8 +2,8 @@ import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import './Link.svelte';
-import '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';
-import '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';
+import '@mozaic-ds/icons-svelte/components/ChevronRight24/ChevronRight24.svelte';
+import '@mozaic-ds/icons-svelte/components/ChevronLeft24/ChevronLeft24.svelte';
 const meta = {
     title: 'Navigation/Link',
     component: 'm-link',
@@ -36,7 +36,7 @@ const meta = {
       size=${ifDefined(args.size)}
       href=${ifDefined(args.href)}
       target=${ifDefined(args.target)}
-      inline=${ifDefined(args.inline)}
+      ?inline=${args.inline}
     >
       ${unsafeHTML(ifDefined(args.icon))} ${unsafeHTML(ifDefined(args.default))}
     </m-link>

package/dist/components/link/Link.svelte

@@ -1,4 +1,11 @@
-<svelte:options customElement={{ tag: 'm-link' }} />
+<svelte:options
+  customElement={{
+    tag: 'm-link',
+    props: {
+      inline: { reflect: true, type: 'Boolean', attribute: 'inline' },
+    },
+  }}
+/>
 
 <script lang="ts">
   /**
@@ -8,6 +15,7 @@
    * @slot icon - Use this slot to insert an icon for the Link.
    */
   interface Props {
+    [key: string]: any;
     /**
      * Position of the icon relative to the text.
      */

package/dist/components/link/Link.svelte.d.ts

@@ -5,6 +5,7 @@
  * @slot icon - Use this slot to insert an icon for the Link.
  */
 interface Props {
+    [key: string]: any;
     /**
      * Position of the icon relative to the text.
      */

package/dist/components/link/Link.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.svelte.ts"],"names":[],"mappings":"AAGE;;;;;GAKG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA2CH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,IAAI;;;;;;;;UAAqF,CAAC;AAC9E,KAAK,IAAI,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACxC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Link.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.svelte.ts"],"names":[],"mappings":"AAGE;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAgDH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,IAAI;;;;;;;;UAAqF,CAAC;AAC9E,KAAK,IAAI,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACxC,eAAe,IAAI,CAAC"}

package/dist/components/loader/Loader.js

@@ -1,4 +1,4 @@
-import{c as C,p as $,a as B,b as d,f as _,r as L,s as R,d as o,t as g,h,i as D,j as m,e as l,g as E}from"../../custom-element.js";import{i as S}from"../../if.js";import{a as V,s as p}from"../../attributes.js";var q=_('<span class="mc-loader__text svelte-g7kvnj"> </span>'),A=_('<div><span class="mc-loader__spinner svelte-g7kvnj"><svg class="mc-loader__icon svelte-g7kvnj" xmlns="http://www.w3.org/2000/svg"><circle class="mc-loader__path svelte-g7kvnj" cx="50%" cy="50%"></circle></svg></span> <!></div>');const F={hash:"svelte-g7kvnj",code:`/**
+import{c as C,p as $,a as B,b as d,s as L,t as g,f as h,g as R,h as _,i as D,d as o,j as m,r as l,e as E}from"../../custom-element.js";import{i as S}from"../../if.js";import{a as V,s as p}from"../../attributes.js";import"../../branches.js";var q=_('<span class="mc-loader__text svelte-g7kvnj"> </span>'),A=_('<div><span class="mc-loader__spinner svelte-g7kvnj"><svg class="mc-loader__icon svelte-g7kvnj" xmlns="http://www.w3.org/2000/svg"><circle class="mc-loader__path svelte-g7kvnj" cx="50%" cy="50%"></circle></svg></span> <!></div>');const F={hash:"svelte-g7kvnj",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-loader.svelte-g7kvnj .mc-loader__spinner:where(.svelte-g7kvnj) {height:2rem;width:2rem;}.mc-loader.svelte-g7kvnj .mc-loader__path:where(.svelte-g7kvnj) {stroke-width:4;}.mc-loader.svelte-g7kvnj {color:var(--loader-color-standard, #464e63);}.mc-loader.svelte-g7kvnj .mc-loader__path:where(.svelte-g7kvnj) {stroke:currentColor;}.mc-loader.svelte-g7kvnj {align-items:center;display:inline-flex;flex-direction:column;}.mc-loader__spinner.svelte-g7kvnj:not(:only-child) {margin-bottom:1rem;}.mc-loader__icon.svelte-g7kvnj {
   animation: svelte-g7kvnj-rotate-loader 2s linear infinite;transform-origin:center;}.mc-loader__path.svelte-g7kvnj {fill:none;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round;
@@ -25,5 +25,5 @@ import{c as C,p as $,a as B,b as d,f as _,r as L,s as R,d as o,t as g,h,i as D,j
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -124px;
   }
-}`};function G(k,t){$(t,!0),B(k,F);let r=d(t,"size",7,"m"),v=d(t,"appearance",7,"standard"),a=d(t,"text",7),f=L(t,["$$slots","$$events","$$legacy","$$host","size","appearance","text"]);const j=()=>{let e;switch(r()){case"xs":e="0 0 20 20";break;case"s":e="0 0 24 24";break;case"l":e="0 0 64 64";break;default:e="0 0 32 32"}return e},w=()=>{let e;switch(r()){case"xs":e=6;break;case"s":e=6;break;case"l":e=19;break;default:e=9}return e};var x={get size(){return r()},set size(e="m"){r(e),m()},get appearance(){return v()},set appearance(e="standard"){v(e),m()},get text(){return a()},set text(e){a(e),m()}},n=A();V(n,()=>({class:["mc-loader",`mc-loader--${r()}`,`mc-loader--${v()}`,a()&&"mc-loader--text-visible"],...f}),void 0,void 0,void 0,"svelte-g7kvnj");var c=o(n),i=o(c),u=o(i);l(i),l(c);var b=R(c,2);{var y=e=>{var s=q(),z=o(s,!0);l(s),g(()=>E(z,a())),h(e,s)};S(b,e=>{a()&&e(y)})}return l(n),g((e,s)=>{p(i,"viewBox",e),p(u,"r",s)},[j,w]),h(k,n),D(x)}customElements.define("m-loader",C(G,{size:{},appearance:{},text:{}},[],[],!0));export{G as L};
+}`};function G(k,t){$(t,!0),B(k,F);let r=d(t,"size",7,"m"),v=d(t,"appearance",7,"standard"),a=d(t,"text",7),f=D(t,["$$slots","$$events","$$legacy","$$host","size","appearance","text"]);const j=()=>{let e;switch(r()){case"xs":e="0 0 20 20";break;case"s":e="0 0 24 24";break;case"l":e="0 0 64 64";break;default:e="0 0 32 32"}return e},w=()=>{let e;switch(r()){case"xs":e=6;break;case"s":e=6;break;case"l":e=19;break;default:e=9}return e};var x={get size(){return r()},set size(e="m"){r(e),m()},get appearance(){return v()},set appearance(e="standard"){v(e),m()},get text(){return a()},set text(e){a(e),m()}},n=A();V(n,()=>({class:["mc-loader",`mc-loader--${r()}`,`mc-loader--${v()}`,a()&&"mc-loader--text-visible"],...f}),void 0,void 0,void 0,"svelte-g7kvnj");var c=o(n),i=o(c),u=o(i);l(i),l(c);var b=L(c,2);{var y=e=>{var s=q(),z=o(s,!0);l(s),g(()=>E(z,a())),h(e,s)};S(b,e=>{a()&&e(y)})}return l(n),g((e,s)=>{p(i,"viewBox",e),p(u,"r",s)},[j,w]),h(k,n),R(x)}customElements.define("m-loader",C(G,{size:{},appearance:{},text:{}},[],[],!0));export{G as L};
 //# sourceMappingURL=Loader.js.map

package/dist/components/loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../../src/components/loader/Loader.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-loader' }} />\n\n<script lang=\"ts\">\n  /**\n   * A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.\n   */\n  interface Props {\n    /**\n     * Specifies the visual appearance of the loader.\n     */\n    appearance?: 'standard' | 'accent' | 'inverse';\n\n    /**\n     * Defines the size of the loader.\n     */\n    size?: 'xs' | 's' | 'm' | 'l';\n\n    /**\n     * Text to display alongside the loader when using the loader inside an `Overlay`.\n     */\n    text?: string;\n  }\n\n  let { size = 'm', appearance = 'standard', text, ...attrs }: Props = $props();\n\n  const setViewBox = () => {\n    let viewBox: string;\n\n    switch (size) {\n      case 'xs':\n        viewBox = '0 0 20 20';\n        break;\n      case 's':\n        viewBox = '0 0 24 24';\n        break;\n      case 'l':\n        viewBox = '0 0 64 64';\n        break;\n      default:\n        viewBox = '0 0 32 32';\n    }\n\n    return viewBox;\n  };\n\n  const setCircleRadius = () => {\n    let circleRadius: number;\n\n    switch (size) {\n      case 'xs':\n        circleRadius = 6;\n        break;\n      case 's':\n        circleRadius = 6;\n        break;\n      case 'l':\n        circleRadius = 19;\n        break;\n      default:\n        circleRadius = 9;\n    }\n\n    return circleRadius;\n  };\n</script>\n\n<div\n  class={[\n    'mc-loader',\n    `mc-loader--${size}`,\n    `mc-loader--${appearance}`,\n    text && 'mc-loader--text-visible',\n  ]}\n  {...attrs}\n>\n  <span class=\"mc-loader__spinner\">\n    <svg class=\"mc-loader__icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox={setViewBox()}>\n      <circle class=\"mc-loader__path\" cx=\"50%\" cy=\"50%\" r={setCircleRadius()} />\n    </svg>\n  </span>\n\n  {#if text}\n    <span class=\"mc-loader__text\">\n      {text}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loader';\n</style>\n"],"names":["size","appearance","text","$.prop","$$props","attrs","$.rest_props","setViewBox","viewBox","setCircleRadius","circleRadius","$$render","consequent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAA,gBAuBQ,IAAAA,eAAO,GAAG,EAAEC,qBAAa,UAAU,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAKC,EAAKC,EAAAF,EAAA,uEAEnD,MAAAG,EAAU,IAAS,KACnBC,SAEIR,EAAI,EAAA,KACL,KACHQ,EAAU,sBAEP,IACHA,EAAU,sBAEP,IACHA,EAAU,0BAGVA,EAAU,mBAGPA,CACT,EAEMC,EAAe,IAAS,KACxBC,SAEIV,EAAI,EAAA,KACL,KACHU,EAAe,YAEZ,IACHA,EAAe,YAEZ,IACHA,EAAe,iBAGfA,EAAe,SAGZA,CACT,2CAxCa,IAAG,yDAAe,WAAU,gFA6CvC,0BACcV,EAAI,CAAA,iBACJC,EAAU,CAAA,GACxBC,KAAQ,8BAENG,wIAUCH,EAAI,CAAA,CAAA,kBAFJA,EAAI,GAAAS,EAAAC,CAAA,uDALkE,CAAAL,EAClBE,CAAe,cAb1E"}
+{"version":3,"file":"Loader.js","sources":["../../../src/components/loader/Loader.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-loader' }} />\n\n<script lang=\"ts\">\n  /**\n   * A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Specifies the visual appearance of the loader.\n     */\n    appearance?: 'standard' | 'accent' | 'inverse';\n\n    /**\n     * Defines the size of the loader.\n     */\n    size?: 'xs' | 's' | 'm' | 'l';\n\n    /**\n     * Text to display alongside the loader when using the loader inside an `Overlay`.\n     */\n    text?: string;\n  }\n\n  let { size = 'm', appearance = 'standard', text, ...attrs }: Props = $props();\n\n  const setViewBox = () => {\n    let viewBox: string;\n\n    switch (size) {\n      case 'xs':\n        viewBox = '0 0 20 20';\n        break;\n      case 's':\n        viewBox = '0 0 24 24';\n        break;\n      case 'l':\n        viewBox = '0 0 64 64';\n        break;\n      default:\n        viewBox = '0 0 32 32';\n    }\n\n    return viewBox;\n  };\n\n  const setCircleRadius = () => {\n    let circleRadius: number;\n\n    switch (size) {\n      case 'xs':\n        circleRadius = 6;\n        break;\n      case 's':\n        circleRadius = 6;\n        break;\n      case 'l':\n        circleRadius = 19;\n        break;\n      default:\n        circleRadius = 9;\n    }\n\n    return circleRadius;\n  };\n</script>\n\n<div\n  class={[\n    'mc-loader',\n    `mc-loader--${size}`,\n    `mc-loader--${appearance}`,\n    text && 'mc-loader--text-visible',\n  ]}\n  {...attrs}\n>\n  <span class=\"mc-loader__spinner\">\n    <svg class=\"mc-loader__icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox={setViewBox()}>\n      <circle class=\"mc-loader__path\" cx=\"50%\" cy=\"50%\" r={setCircleRadius()} />\n    </svg>\n  </span>\n\n  {#if text}\n    <span class=\"mc-loader__text\">\n      {text}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loader';\n</style>\n"],"names":["size","appearance","text","$.prop","$$props","attrs","$.rest_props","setViewBox","viewBox","setCircleRadius","circleRadius","div","root","span","$.child","svg","circle","span_1","root_1","$$render","consequent","$.reset","$0","$1","$.append","$$anchor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;mBAEA,gBAsBQ,IAAAA,eAAO,GAAG,EAAEC,qBAAa,UAAU,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAKC,EAAKC,EAAAF,EAAA,uEAEnD,MAAAG,EAAU,IAAS,KACnBC,SAEIR,EAAI,EAAA,KACL,KACHQ,EAAU,sBAEP,IACHA,EAAU,sBAEP,IACHA,EAAU,0BAGVA,EAAU,mBAGPA,CACT,EAEMC,EAAe,IAAS,KACxBC,SAEIV,EAAI,EAAA,KACL,KACHU,EAAe,YAEZ,IACHA,EAAe,YAEZ,IACHA,EAAe,iBAGfA,EAAe,SAGZA,CACT,2CAxCa,IAAG,yDAAe,WAAU,yDA2C1CC,EAAAC,EAAA,IAAAD,eAEG,0BACcX,EAAI,CAAA,iBACJC,EAAU,CAAA,GACxBC,KAAQ,8BAENG,0CAEH,IAAAQ,EAAIC,EATNH,CAAA,EAUII,IADFF,CAAI,EAEAG,IADFD,CAAG,IAAHA,CAAG,IADLF,CAAI,UAAJA,EAAI,CAAA,iBAOFI,EAAIC,EAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YACFf,EAAI,CAAA,CAAA,MADNe,CAAI,WADFf,EAAI,GAAAiB,EAAAC,CAAA,IAfVC,OAAAA,EAAAV,CAAA,cAUII,EAAG,UAAAO,CAAA,IACDN,EAAM,IAAAO,CAAA,GADgE,CAAAhB,EAClBE,CAAe,GAXzEe,EAAAC,EAAAd,CAAA,MAFO"}

package/dist/components/loader/Loader.svelte

@@ -5,6 +5,7 @@
    * A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.
    */
   interface Props {
+    [key: string]: any;
     /**
      * Specifies the visual appearance of the loader.
      */

package/dist/components/loader/Loader.svelte.d.ts

@@ -2,6 +2,7 @@
  * A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.
  */
 interface Props {
+    [key: string]: any;
     /**
      * Specifies the visual appearance of the loader.
      */

package/dist/components/loader/Loader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/loader/Loader.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IAE/C;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAE9B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAwEH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Loader.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/loader/Loader.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IAE/C;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAE9B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAwEH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/loadingoverlay/LoadingOverlay.js

@@ -1,4 +1,4 @@
-import{c as b,p as y,a as f,b as r,f as g,r as u,d as n,t as x,h as z,i as _,j as v,e as d,l as h,m as $}from"../../custom-element.js";import{a as L}from"../../attributes.js";import{L as j}from"../loader/Loader.js";import"../../if.js";var k=g("<div><div><!></div></div>");const w={hash:"svelte-111c1z1",code:`/**
+import{c as b,p as u,a as y,b as r,t as f,f as g,g as x,h as z,i as _,d as n,j as v,r as c,l as h,m as $}from"../../custom-element.js";import{a as L}from"../../attributes.js";import{L as j}from"../loader/Loader.js";import"../../if.js";import"../../branches.js";var k=z("<div><div><!></div></div>");const w={hash:"svelte-111c1z1",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-loading-loader.svelte-111c1z1 {background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:var(--overlay-z-index, 2);}.mc-loading-loader.is-visible.svelte-111c1z1 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}.mc-loading-loader.svelte-111c1z1 {align-items:center;display:flex;justify-content:center;}`};function D(o,e){y(e,!0),f(o,w);let s=r(e,"isvisible",7),t=r(e,"text",7),c=u(e,["$$slots","$$events","$$legacy","$$host","isvisible","text"]);var m={get isvisible(){return s()},set isvisible(l){s(l),v()},get text(){return t()},set text(l){t(l),v()}},i=k(),a=n(i);L(a,()=>({role:"dialog",tabindex:"-1","aria-label":t(),...c}),void 0,void 0,void 0,"svelte-111c1z1");var p=n(a);return j(p,{size:"l",appearance:"inverse",get text(){return t()}}),d(a),d(i),x(()=>h(i,1,$(["mc-loading-loader",s()&&"is-visible"]),"svelte-111c1z1")),z(o,i),_(m)}customElements.define("m-loading-overlay",b(D,{isvisible:{},text:{}},[],[],!0));
+ */.mc-loading-loader.svelte-111c1z1 {background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:var(--overlay-z-index, 2);}.mc-loading-loader.is-visible.svelte-111c1z1 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}.mc-loading-loader.svelte-111c1z1 {align-items:center;display:flex;justify-content:center;}`};function B(o,e){u(e,!0),y(o,w);let s=r(e,"isvisible",7),t=r(e,"text",7),d=_(e,["$$slots","$$events","$$legacy","$$host","isvisible","text"]);var m={get isvisible(){return s()},set isvisible(l){s(l),v()},get text(){return t()},set text(l){t(l),v()}},i=k(),a=n(i);L(a,()=>({role:"dialog",tabindex:"-1","aria-label":t(),...d}),void 0,void 0,void 0,"svelte-111c1z1");var p=n(a);return j(p,{size:"l",appearance:"inverse",get text(){return t()}}),c(a),c(i),f(()=>h(i,1,$(["mc-loading-loader",s()&&"is-visible"]),"svelte-111c1z1")),g(o,i),x(m)}customElements.define("m-loading-overlay",b(B,{isvisible:{attribute:"isvisible",reflect:!0,type:"Boolean"},text:{}},[],[],!0));
 //# sourceMappingURL=LoadingOverlay.js.map

package/dist/components/loadingoverlay/LoadingOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingOverlay.js","sources":["../../../src/components/loadingoverlay/LoadingOverlay.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-loading-overlay' }} />\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n  /**\n   * A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.\n   */\n  interface Props {\n    /**\n     * Controls the visibility of the loading overlay.\n     */\n    isvisible?: boolean;\n    /**\n     * Text of the loading overlay.\n     */\n    text?: string;\n  }\n\n  let { isvisible, text, ...attrs }: Props = $props();\n</script>\n\n<div class={['mc-loading-loader', isvisible && 'is-visible']}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-label={text} {...attrs}>\n    <Loader size=\"l\" appearance=\"inverse\" {text} />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loading-overlay';\n</style>\n"],"names":["isvisible","$.prop","$$props","text","attrs","$.rest_props"],"mappings":";;8eAAA,oBAkBQA,EAASC,EAAAC,EAAA,YAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAKE,EAAKC,EAAAH,EAAA,2OAIcC,EAAI,KAAMC,kJAD5C,oBAAqBJ,EAAS,GAAI,YAAY,CAAA,EAAA,gBAAA,CAAA,aAF3D"}
+{"version":3,"file":"LoadingOverlay.js","sources":["../../../src/components/loadingoverlay/LoadingOverlay.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-loading-overlay',\n    props: {\n      isvisible: { reflect: true, type: 'Boolean', attribute: 'isvisible' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n  /**\n   * A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Controls the visibility of the loading overlay.\n     */\n    isvisible?: boolean;\n    /**\n     * Text of the loading overlay.\n     */\n    text?: string;\n  }\n\n  let { isvisible, text, ...attrs }: Props = $props();\n</script>\n\n<div class={['mc-loading-loader', isvisible && 'is-visible']}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-label={text} {...attrs}>\n    <Loader size=\"l\" appearance=\"inverse\" {text} />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loading-overlay';\n</style>\n"],"names":["isvisible","$.prop","$$props","text","attrs","$.rest_props","div","root","div_1","Loader","node","$.template_effect","$.set_class","$.clsx"],"mappings":";;8eASA,oBAiBQA,EAASC,EAAAC,EAAA,YAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAKE,EAAKC,EAAAH,EAAA,2KAGhCI,EAAGC,EAAA,EACDC,IADFF,CAAG,IACDE,iDAA4CL,EAAI,KAAMC,mDAAtDI,CAAG,EACD,OAAAC,EAAMC,EAAA,iDAAgCP,EAAI,OAD5CK,CAAG,IADLF,CAAG,EAAHK,EAAA,IAAAC,EAAAN,EAAG,EAAAO,EAAA,CAAS,oBAAqBb,EAAS,GAAI,YAAY,CAAA,EAAA,gBAAA,CAAA,MAA1DM,CAAG,MAFI"}

package/dist/components/loadingoverlay/LoadingOverlay.stories.js

@@ -26,7 +26,7 @@ const meta = {
     },
     render: (args) => html `
     <m-loading-overlay
-      isvisible=${ifDefined(args.isvisible)}
+      ?isvisible=${args.isvisible}
       text=${ifDefined(args.text)}
     ></m-loading-overlay>
   `,

package/dist/components/loadingoverlay/LoadingOverlay.svelte

@@ -1,4 +1,11 @@
-<svelte:options customElement={{ tag: 'm-loading-overlay' }} />
+<svelte:options
+  customElement={{
+    tag: 'm-loading-overlay',
+    props: {
+      isvisible: { reflect: true, type: 'Boolean', attribute: 'isvisible' },
+    },
+  }}
+/>
 
 <script lang="ts">
   import Loader from '../loader/Loader.svelte';
@@ -6,6 +13,7 @@
    * A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.
    */
   interface Props {
+    [key: string]: any;
     /**
      * Controls the visibility of the loading overlay.
      */

package/dist/components/loadingoverlay/LoadingOverlay.svelte.d.ts

@@ -2,6 +2,7 @@
  * A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.
  */
 interface Props {
+    [key: string]: any;
     /**
      * Controls the visibility of the loading overlay.
      */

package/dist/components/loadingoverlay/LoadingOverlay.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingOverlay.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/loadingoverlay/LoadingOverlay.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAoBH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"LoadingOverlay.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/loadingoverlay/LoadingOverlay.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAyBH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/modal/Modal.js

@@ -1,4 +1,4 @@
-import{w as K,c as L,p as N,a as P,b,f as y,r as Q,d as e,s as n,t as E,h as x,i as R,j as u,e as r,g as O}from"../../custom-element.js";import{i as T}from"../../if.js";import{s}from"../../slot.js";import{a as U}from"../../attributes.js";import{b as V}from"../../this.js";import{C as W}from"../../Cross24.js";import{O as X}from"../overlay/Overlay.js";import"../../legacy.js";var Z=y('<button type="button" class="mc-modal__close mc-button mc-button--icon-button mc-button--ghost svelte-1tduk3b" aria-label="Close"><!></button>'),$=y('<p class="svelte-1tduk3b"> </p>'),oo=y('<section><div class="mc-modal__dialog svelte-1tduk3b" role="document"><header class="mc-modal__header svelte-1tduk3b"><span class="mc-modal__icon svelte-1tduk3b"><!></span> <h2 class="mc-modal__title svelte-1tduk3b" id="modalTitle"> </h2> <!></header> <main class="mc-modal__body svelte-1tduk3b"><!> <!></main> <footer class="mc-modal__footer svelte-1tduk3b"><span class="mc-modal__link svelte-1tduk3b"><!></span> <!></footer></div> <!></section>');const to={hash:"svelte-1tduk3b",code:`/**
+import{o as J,c as K,p as L,a as P,b,s as d,t as E,f as x,g as Q,h as y,i as R,d as e,j as u,r,e as B}from"../../custom-element.js";import{i as O}from"../../if.js";import{s}from"../../slot.js";import{a as U}from"../../attributes.js";import{b as V}from"../../this.js";import{n as W}from"../../Condition20.js";import{O as X}from"../overlay/Overlay.js";import"../../branches.js";var Z=y('<button type="button" class="mc-modal__close mc-button mc-button--icon-button mc-button--ghost svelte-1tduk3b" aria-label="Close"><!></button>'),$=y('<p class="svelte-1tduk3b"> </p>'),oo=y('<section><div class="mc-modal__dialog svelte-1tduk3b" role="document"><header class="mc-modal__header svelte-1tduk3b"><span class="mc-modal__icon svelte-1tduk3b"><!></span> <h2 class="mc-modal__title svelte-1tduk3b" id="modalTitle"> </h2> <!></header> <main class="mc-modal__body svelte-1tduk3b"><!> <!></main> <footer class="mc-modal__footer svelte-1tduk3b"><span class="mc-modal__link svelte-1tduk3b"><!></span> <!></footer></div> <!></section>');const to={hash:"svelte-1tduk3b",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-modal.svelte-1tduk3b {box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 3);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto;}
 @media (width >= 680px) {.mc-modal.svelte-1tduk3b {align-items:center;}
@@ -12,5 +12,5 @@ import{w as K,c as L,p as N,a as P,b,f as y,r as Q,d as e,s as n,t as E,h as x,i
 @media (width >= 680px) {.mc-modal__footer.svelte-1tduk3b {flex-direction:row;padding:0.5rem 1.5rem 1.5rem 1.5rem;}
 }.mc-modal__link.svelte-1tduk3b {order:1;}
 @media (width >= 680px) {.mc-modal__link.svelte-1tduk3b {margin-right:auto;order:0;}
-}.mc-modal-open.svelte-1tduk3b {overflow:hidden;}.mc-button.svelte-1tduk3b {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1tduk3b:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1tduk3b:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1tduk3b {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1tduk3b {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-1tduk3b {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-1tduk3b {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1tduk3b: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-button--s.svelte-1tduk3b {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-1tduk3b {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-1tduk3b {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-1tduk3b {padding:0.25rem;}.mc-button--outlined.svelte-1tduk3b {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-1tduk3b:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1tduk3b:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-1tduk3b {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-1tduk3b:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1tduk3b:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-1tduk3b {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-1tduk3b:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-1tduk3b:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-1tduk3b {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-1tduk3b:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-1tduk3b:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-1tduk3b {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-1tduk3b:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-1tduk3b:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-1tduk3b {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-1tduk3b {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-1tduk3b:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1tduk3b:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-1tduk3b {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-1tduk3b:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1tduk3b:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-1tduk3b {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-1tduk3b:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1tduk3b:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-1tduk3b {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-1tduk3b:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1tduk3b:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-1tduk3b {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-1tduk3b:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1tduk3b:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-1tduk3b {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-1tduk3b:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1tduk3b:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-1tduk3b {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-1tduk3b:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1tduk3b:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-1tduk3b {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-1tduk3b:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1tduk3b:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-modal__icon.svelte-1tduk3b:empty {display:none;}`};function eo(z,t){N(t,!0),P(z,to);let d=b(t,"open",7),i=b(t,"title",7),l=b(t,"description",7),v=b(t,"closable",7,!0),Y=Q(t,["$$slots","$$events","$$legacy","$$host","open","title","description","closable"]),m;function D(){d(!1);const o=new CustomEvent("update:open",{detail:d(),bubbles:!0,composed:!0});m.dispatchEvent(o)}var M={get open(){return d()},set open(o){d(o),u()},get title(){return i()},set title(o){i(o),u()},get description(){return l()},set description(o){l(o),u()},get closable(){return v()},set closable(o=!0){v(o),u()}},c=oo();U(c,()=>({class:["mc-modal",d()&&"is-open"],tabindex:"-1","aria-labelledby":"modalTitle","aria-hidden":!d(),...Y}),void 0,void 0,void 0,"svelte-1tduk3b");var g=e(c),k=e(g),f=e(k),S=e(f);s(S,t,"icon",{}),r(f);var h=n(f,2),q=e(h,!0);r(h);var A=n(h,2);{var B=o=>{var a=Z();a.__click=D;var w=e(a);W(w,{class:"mc-modal__close","aria-hidden":"true"}),r(a),x(o,a)};T(A,o=>{v()&&o(B)})}r(k);var p=n(k,2),C=e(p);{var F=o=>{var a=$(),w=e(a,!0);r(a),E(()=>O(w,l())),x(o,a)};T(C,o=>{l()&&o(F)})}var G=n(C,2);s(G,t,"default",{}),r(p);var j=n(p,2),_=e(j),H=e(_);s(H,t,"link",{}),r(_);var I=n(_,2);s(I,t,"footer",{}),r(j),r(g);var J=n(g,2);return X(J,{get isvisible(){return d()},dialoglabel:"modal"}),r(c),V(c,o=>m=o,()=>m),E(()=>O(q,i())),x(z,c),R(M)}K(["click"]);customElements.define("m-modal",L(eo,{open:{},title:{},description:{},closable:{}},["icon","default","link","footer"],[],!0));
+}.mc-modal-open.svelte-1tduk3b {overflow:hidden;}.mc-button.svelte-1tduk3b {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1tduk3b:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1tduk3b:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1tduk3b {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1tduk3b {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-1tduk3b {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-1tduk3b {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1tduk3b: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-button--s.svelte-1tduk3b {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-1tduk3b {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-1tduk3b {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-1tduk3b {padding:0.25rem;}.mc-button--outlined.svelte-1tduk3b {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-1tduk3b:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1tduk3b:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-1tduk3b {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-1tduk3b:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1tduk3b:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-1tduk3b {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-1tduk3b:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-1tduk3b:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-1tduk3b {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-1tduk3b:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-1tduk3b:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-1tduk3b {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-1tduk3b:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-1tduk3b:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-1tduk3b {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--loading.svelte-1tduk3b {pointer-events:none;}.mc-button--outlined.mc-button--standard.svelte-1tduk3b {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-1tduk3b:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1tduk3b:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-1tduk3b {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-1tduk3b:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1tduk3b:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-1tduk3b {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-1tduk3b:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1tduk3b:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-1tduk3b {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-1tduk3b:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1tduk3b:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-1tduk3b {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-1tduk3b:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1tduk3b:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-1tduk3b {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-1tduk3b:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1tduk3b:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-1tduk3b {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-1tduk3b:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1tduk3b:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-1tduk3b {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-1tduk3b:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1tduk3b:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-modal__icon.svelte-1tduk3b:empty {display:none;}`};function eo(z,t){L(t,!0),P(z,to);let n=b(t,"open",7),i=b(t,"title",7),c=b(t,"description",7),v=b(t,"closable",7,!0),T=R(t,["$$slots","$$events","$$legacy","$$host","open","title","description","closable"]),m;function Y(){n(!1);const o=new CustomEvent("update:open",{detail:n(),bubbles:!0,composed:!0});m.dispatchEvent(o)}var D={get open(){return n()},set open(o){n(o),u()},get title(){return i()},set title(o){i(o),u()},get description(){return c()},set description(o){c(o),u()},get closable(){return v()},set closable(o=!0){v(o),u()}},l=oo();U(l,()=>({class:["mc-modal",n()&&"is-open"],tabindex:"-1","aria-labelledby":"modalTitle","aria-hidden":!n(),...T}),void 0,void 0,void 0,"svelte-1tduk3b");var g=e(l),k=e(g),f=e(k),M=e(f);s(M,t,"icon",{},null),r(f);var h=d(f,2),N=e(h,!0);r(h);var S=d(h,2);{var q=o=>{var a=Z();a.__click=Y;var w=e(a);W(w,{className:"mc-modal__close"}),r(a),x(o,a)};O(S,o=>{v()&&o(q)})}r(k);var p=d(k,2),j=e(p);{var A=o=>{var a=$(),w=e(a,!0);r(a),E(()=>B(w,c())),x(o,a)};O(j,o=>{c()&&o(A)})}var F=d(j,2);s(F,t,"default",{},null),r(p);var C=d(p,2),_=e(C),G=e(_);s(G,t,"link",{},null),r(_);var H=d(_,2);s(H,t,"footer",{},null),r(C),r(g);var I=d(g,2);return X(I,{get isvisible(){return n()},dialoglabel:"modal"}),r(l),V(l,o=>m=o,()=>m),E(()=>B(N,i())),x(z,l),Q(D)}J(["click"]);customElements.define("m-modal",K(eo,{open:{attribute:"open",reflect:!0,type:"Boolean"},closable:{attribute:"closable",reflect:!0,type:"Boolean"},title:{},description:{}},["icon","default","link","footer"],[],!0));
 //# sourceMappingURL=Modal.js.map

package/dist/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-modal' }} />\n\n<script lang=\"ts\">\n  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n  /**\n   * A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.\n   *\n   * @slot icon - Use this slot to insert an icon next to the title of the modal.\n   * @slot default - Use this slot to insert the content of the modal.\n   * @slot link - Use this slot to insert a link in the footer.\n   * @slot footer - Use this slot to insert buttons in the footer.\n   * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.\n   */\n  interface Props {\n    /**\n     * if `true`, display the modal.\n     */\n    open?: boolean;\n    /**\n     * Title of the modal.\n     */\n    title: string;\n    /**\n     * Description of the modal.\n     */\n    description?: string;\n    /**\n     * if `true`, display the close button.\n     */\n    closable?: boolean;\n  }\n\n  let { open, title, description, closable = true, ...attrs }: Props = $props();\n  let element: HTMLElement;\n\n  function onClose() {\n    open = false;\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  }\n</script>\n\n<section\n  class={['mc-modal', open && 'is-open']}\n  tabindex=\"-1\"\n  aria-labelledby=\"modalTitle\"\n  aria-hidden={!open}\n  bind:this={element}\n  {...attrs}\n>\n  <div class=\"mc-modal__dialog\" role=\"document\">\n    <header class=\"mc-modal__header\">\n      <span class=\"mc-modal__icon\">\n        <slot name=\"icon\" />\n      </span>\n      <h2 class=\"mc-modal__title\" id=\"modalTitle\">{title}</h2>\n      {#if closable}\n        <button\n          type=\"button\"\n          class=\"mc-modal__close mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Close\"\n          onclick={onClose}\n        >\n          <Cross24 class=\"mc-modal__close\" aria-hidden=\"true\" />\n        </button>\n      {/if}\n    </header>\n\n    <main class=\"mc-modal__body\">\n      {#if description}\n        <p>{description}</p>\n      {/if}\n      <slot />\n    </main>\n\n    <footer class=\"mc-modal__footer\">\n      <span class=\"mc-modal__link\">\n        <slot name=\"link\" />\n      </span>\n      <slot name=\"footer\" />\n    </footer>\n  </div>\n\n  <MOverlay isvisible={open} dialoglabel=\"modal\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/modal';\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-modal__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["open","$.prop","$$props","title","description","closable","attrs","$.rest_props","element","onClose","event","$$render","consequent","consequent_1","$.bind_this","section","$$value"],"mappings":";;;;;;;;;;;;;;2yWAAA,qBAiCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EAAEG,mBAAW,EAAI,EAAKC,EAAKC,EAAAL,EAAA,oFACrDM,EAEK,SAAAC,GAAU,CACjBT,EAAO,EAAK,EAEN,MAAAU,EAAK,IAAO,YAAY,eAC5B,OAAQV,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBQ,EAAQ,cAAcE,CAAK,CAC7B,yMAZ2C,GAAI,oCAgBvC,WAAYV,EAAI,GAAI,SAAS,8DAGvBA,EAAI,KAEdM,yKAaaG,sFALRJ,EAAQ,GAAAM,EAAAC,CAAA,2EAcPR,EAAW,CAAA,CAAA,kBADZA,EAAW,GAAAO,EAAAE,CAAA,qLAcCb,EAAI,8BApCdc,EAAAC,EAAAC,GAAAR,QAAAA,CAAO,YAQ+BL,EAAK,CAAA,CAAA,aAfxD"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-modal',\n    props: {\n      open: { reflect: true, type: 'Boolean', attribute: 'open' },\n      closable: { reflect: true, type: 'Boolean', attribute: 'closable' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { Cross24 } from '@mozaic-ds/icons-svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n  /**\n   * A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.\n   *\n   * @slot icon - Use this slot to insert an icon next to the title of the modal.\n   * @slot default - Use this slot to insert the content of the modal.\n   * @slot link - Use this slot to insert a link in the footer.\n   * @slot footer - Use this slot to insert buttons in the footer.\n   * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * if `true`, display the modal.\n     */\n    open?: boolean;\n    /**\n     * Title of the modal.\n     */\n    title: string;\n    /**\n     * Description of the modal.\n     */\n    description?: string;\n    /**\n     * if `true`, display the close button.\n     */\n    closable?: boolean;\n  }\n\n  let { open, title, description, closable = true, ...attrs }: Props = $props();\n  let element: HTMLElement;\n\n  function onClose() {\n    open = false;\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  }\n</script>\n\n<section\n  class={['mc-modal', open && 'is-open']}\n  tabindex=\"-1\"\n  aria-labelledby=\"modalTitle\"\n  aria-hidden={!open}\n  bind:this={element}\n  {...attrs}\n>\n  <div class=\"mc-modal__dialog\" role=\"document\">\n    <header class=\"mc-modal__header\">\n      <span class=\"mc-modal__icon\">\n        <slot name=\"icon\" />\n      </span>\n      <h2 class=\"mc-modal__title\" id=\"modalTitle\">{title}</h2>\n      {#if closable}\n        <button\n          type=\"button\"\n          class=\"mc-modal__close mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Close\"\n          onclick={onClose}\n        >\n          <Cross24 className=\"mc-modal__close\" />\n        </button>\n      {/if}\n    </header>\n\n    <main class=\"mc-modal__body\">\n      {#if description}\n        <p>{description}</p>\n      {/if}\n      <slot />\n    </main>\n\n    <footer class=\"mc-modal__footer\">\n      <span class=\"mc-modal__link\">\n        <slot name=\"link\" />\n      </span>\n      <slot name=\"footer\" />\n    </footer>\n  </div>\n\n  <MOverlay isvisible={open} dialoglabel=\"modal\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/modal';\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-modal__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["open","$.prop","$$props","title","description","closable","attrs","$.rest_props","element","onClose","event","section","root","div","$.child","header","span","h2","button","root_1","node_2","Cross24","$.reset","$.append","$$anchor","$$render","consequent","main","p","root_2","consequent_1","footer","span_1","MOverlay","node_7","$$value"],"mappings":";;;;;;;;;;;;;;o2WAUA,qBAgCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EAAEG,mBAAW,EAAI,EAAKC,EAAKC,EAAAL,EAAA,oFACrDM,EAEK,SAAAC,GAAU,CACjBT,EAAO,EAAK,EAEN,MAAAU,EAAK,IAAO,YAAY,eAC5B,OAAQV,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBQ,EAAQ,cAAcE,CAAK,CAC7B,yMAZ2C,GAAI,YAehDC,EAAAC,GAAA,IAAAD,eACS,WAAYX,EAAI,GAAI,SAAS,8DAGvBA,EAAI,KAEdM,2CAEH,IAAAO,EAAGC,EARLH,CAAA,EASII,IADFF,CAAG,EAECG,IADFD,CAAM,MACJC,CAAI,0BAAJA,CAAI,EAGJ,IAAAC,IAHAD,EAAI,CAAA,MAGJC,EAAE,EAAA,IAAFA,CAAE,UAAFA,EAAE,CAAA,aAEA,IAAAC,EAAAC,EAAA,EAAAD,EAIC,QAAST,EAJV,IAAAW,EAAAN,EAAAI,CAAA,EAMEG,EAAOD,EAAA,CAAA,UAAA,iBAAA,CAAA,EANTE,EAAAJ,CAAA,EAAAK,EAAAC,EAAAN,CAAA,WADEb,EAAQ,GAAAoB,EAAAC,CAAA,MALdX,CAAM,EAiBN,IAAAY,IAjBAZ,EAAM,CAAA,MAiBNY,CAAI,iBAEAC,EAACC,EAAA,MAADD,EAAC,EAAA,IAADA,CAAC,YAAExB,EAAW,CAAA,CAAA,MAAdwB,CAAC,WADCxB,EAAW,GAAAqB,EAAAK,CAAA,4CADjBH,CAAI,EAOJ,IAAAI,IAPAJ,EAAI,CAAA,EAQFK,IADFD,CAAM,MACJC,CAAI,0BAAJA,CAAI,UAAJA,EAAI,CAAA,4BADND,CAAM,IAzBRlB,CAAG,UAAHA,EAAG,CAAA,EAiCHoB,OAAAA,EAAQC,EAAA,wBAAYlC,EAAI,yBAzC1BsB,EAAAX,CAAA,IAAAA,EAAAwB,GAKY3B,QAAAA,CAAO,YAQ+BL,EAAK,CAAA,CAAA,EAbvDoB,EAAAC,EAAAb,CAAA,MAFO"}

package/dist/components/modal/Modal.stories.d.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import '@mozaic-ds/icons-svelte/svelte/InfoCircle32/InfoCircle32.svelte';
-import '@mozaic-ds/icons-svelte/svelte/ExternalLink24/ExternalLink24.svelte';
+import '@mozaic-ds/icons-svelte/components/InfoCircle32/InfoCircle32.svelte';
+import '@mozaic-ds/icons-svelte/components/ExternalLink24/ExternalLink24.svelte';
 import './Modal.svelte';
 import '../button/Button.svelte';
 import '../link/Link.svelte';

package/dist/components/modal/Modal.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,iEAAiE,CAAC;AACzE,OAAO,qEAAqE,CAAC;AAC7E,OAAO,gBAAgB,CAAC;AACxB,OAAO,yBAAyB,CAAC;AACjC,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAgDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAQlB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;CAahB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAOlB,CAAC"}
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,qEAAqE,CAAC;AAC7E,OAAO,yEAAyE,CAAC;AACjF,OAAO,gBAAgB,CAAC;AACxB,OAAO,yBAAyB,CAAC;AACjC,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAgDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAQlB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;CAahB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAOlB,CAAC"}

package/dist/components/modal/Modal.stories.js

@@ -2,8 +2,8 @@ import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { action } from 'storybook/actions';
-import '@mozaic-ds/icons-svelte/svelte/InfoCircle32/InfoCircle32.svelte';
-import '@mozaic-ds/icons-svelte/svelte/ExternalLink24/ExternalLink24.svelte';
+import '@mozaic-ds/icons-svelte/components/InfoCircle32/InfoCircle32.svelte';
+import '@mozaic-ds/icons-svelte/components/ExternalLink24/ExternalLink24.svelte';
 import './Modal.svelte';
 import '../button/Button.svelte';
 import '../link/Link.svelte';
@@ -43,10 +43,10 @@ const meta = {
         const handleUpdateOpen = action('update:open');
         return html `
       <m-modal
-        open=${ifDefined(args.open)}
+        ?open=${args.open}
         title=${ifDefined(args.title)}
         description=${ifDefined(args.description)}
-        closable=${ifDefined(args.closable)}
+        ?closable=${args.closable}
         @update:open=${handleUpdateOpen}
       >
         ${unsafeHTML(ifDefined(args.icon))} ${unsafeHTML(ifDefined(args.default))}

package/dist/components/modal/Modal.svelte

@@ -1,7 +1,15 @@
-<svelte:options customElement={{ tag: 'm-modal' }} />
+<svelte:options
+  customElement={{
+    tag: 'm-modal',
+    props: {
+      open: { reflect: true, type: 'Boolean', attribute: 'open' },
+      closable: { reflect: true, type: 'Boolean', attribute: 'closable' },
+    },
+  }}
+/>
 
 <script lang="ts">
-  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';
+  import { Cross24 } from '@mozaic-ds/icons-svelte';
   import MOverlay from '../overlay/Overlay.svelte';
   /**
    * A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.
@@ -13,6 +21,7 @@
    * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.
    */
   interface Props {
+    [key: string]: any;
     /**
      * if `true`, display the modal.
      */
@@ -67,7 +76,7 @@
           aria-label="Close"
           onclick={onClose}
         >
-          <Cross24 class="mc-modal__close" aria-hidden="true" />
+          <Cross24 className="mc-modal__close" />
         </button>
       {/if}
     </header>
@@ -406,6 +415,9 @@
   border-radius: var(--border-radius-full, 100%);
   padding: 0;
 }
+.mc-button--loading {
+  pointer-events: none;
+}
 .mc-button--loading .mc-button__loader {
   position: absolute;
   color: currentcolor;

package/dist/components/modal/Modal.svelte.d.ts

@@ -8,6 +8,7 @@
  * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.
  */
 interface Props {
+    [key: string]: any;
     /**
      * if `true`, display the modal.
      */

package/dist/components/modal/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.svelte.ts"],"names":[],"mappings":"AAME;;;;;;;;GAQG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2DH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;;;;;;;UAAqF,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.svelte.ts"],"names":[],"mappings":"AAME;;;;;;;;GAQG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiEH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;;;;;;;UAAqF,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}

package/dist/components/numberbadge/NumberBadge.js

@@ -1,4 +1,4 @@
-import{c as m,p as f,a as g,b as o,f as u,r as v,t as p,h,i as x,j as d,d as z,e as k,g as _}from"../../custom-element.js";import{a as y}from"../../attributes.js";var w=u("<div> </div>");const $={hash:"svelte-sb883",code:`/**
+import{c as m,p as f,a as g,b as o,t as u,f as v,g as p,h,i as x,j as d,d as z,r as k,e as _}from"../../custom-element.js";import{a as y}from"../../attributes.js";var w=h("<div> </div>");const $={hash:"svelte-sb883",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-number-badge.svelte-sb883 {color:var(--number-badge-color-text-standard, #ffffff);background-color:var(--number-badge-color-background-standard, #464e63);height:1rem;min-width:1rem;padding-inline:0.125rem;font-size:var(--font-size-25, 0.625rem);border-radius:var(--border-radius-l, 1rem);font-weight:var(--font-weight-semi-bold, 600);display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;line-height:1;}.mc-number-badge--m.svelte-sb883 {height:1.5rem;min-width:1.5rem;padding-inline:0.25rem;font-size:var(--font-size-50, 0.75rem);}.mc-number-badge--accent.svelte-sb883 {color:var(--number-badge-color-text-accent, #ffffff);background-color:var(--number-badge-color-background-accent, #117f03);}.mc-number-badge--danger.svelte-sb883 {color:var(--number-badge-color-text-danger, #ffffff);background-color:var(--number-badge-color-background-danger, #c61112);}.mc-number-badge--inverse.svelte-sb883 {color:var(--number-badge-color-text-inverse, #464e63);background-color:var(--number-badge-color-background-inverse, #ffffff);}`};function j(b,e){f(e,!0),g(b,$);let t=o(e,"label",7),n=o(e,"appearance",7,"standard"),s=o(e,"size",7,"s"),c=v(e,["$$slots","$$events","$$legacy","$$host","label","appearance","size"]);var i={get label(){return t()},set label(r){t(r),d()},get appearance(){return n()},set appearance(r="standard"){n(r),d()},get size(){return s()},set size(r="s"){s(r),d()}},a=w();y(a,()=>({class:["mc-number-badge",`mc-number-badge--${n()}`,`mc-number-badge--${s()}`],...c}),void 0,void 0,void 0,"svelte-sb883");var l=z(a,!0);return k(a),p(()=>_(l,t())),h(b,a),x(i)}customElements.define("m-number-badge",m(j,{label:{},appearance:{},size:{}},[],[],!0));export{j as N};
+ */.mc-number-badge.svelte-sb883 {color:var(--number-badge-color-text-standard, #ffffff);background-color:var(--number-badge-color-background-standard, #464e63);height:1rem;min-width:1rem;padding-inline:0.125rem;font-size:var(--font-size-25, 0.625rem);border-radius:var(--border-radius-l, 1rem);font-weight:var(--font-weight-semi-bold, 600);display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;line-height:1;}.mc-number-badge--m.svelte-sb883 {height:1.5rem;min-width:1.5rem;padding-inline:0.25rem;font-size:var(--font-size-50, 0.75rem);}.mc-number-badge--accent.svelte-sb883 {color:var(--number-badge-color-text-accent, #ffffff);background-color:var(--number-badge-color-background-accent, #117f03);}.mc-number-badge--danger.svelte-sb883 {color:var(--number-badge-color-text-danger, #ffffff);background-color:var(--number-badge-color-background-danger, #c61112);}.mc-number-badge--inverse.svelte-sb883 {color:var(--number-badge-color-text-inverse, #464e63);background-color:var(--number-badge-color-background-inverse, #ffffff);}`};function j(b,e){f(e,!0),g(b,$);let t=o(e,"label",7),n=o(e,"appearance",7,"standard"),s=o(e,"size",7,"s"),c=x(e,["$$slots","$$events","$$legacy","$$host","label","appearance","size"]);var i={get label(){return t()},set label(r){t(r),d()},get appearance(){return n()},set appearance(r="standard"){n(r),d()},get size(){return s()},set size(r="s"){s(r),d()}},a=w();y(a,()=>({class:["mc-number-badge",`mc-number-badge--${n()}`,`mc-number-badge--${s()}`],...c}),void 0,void 0,void 0,"svelte-sb883");var l=z(a,!0);return k(a),u(()=>_(l,t())),v(b,a),p(i)}customElements.define("m-number-badge",m(j,{label:{},appearance:{},size:{}},[],[],!0));export{j as N};
 //# sourceMappingURL=NumberBadge.js.map