@mozaic-ds/web-components 1.0.0-beta.6 → 1.0.0-beta.7

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte

@@ -29,22 +29,19 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-linear-progressbar-percentage {
   --progress-value: 40;
-  font-family: LeroyMerlin, sans-serif;
-  background-color: #c9d0de;
+  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: 1rem;
+  border-radius: var(--radius-l, 1rem);
   box-sizing: border-box;
 }
 .mc-linear-progressbar-percentage__indicator {
-  border-radius: 1rem;
-  background-color: #464e63;
+  border-radius: var(--radius-l, 1rem);
+  background-color: var(--progressbar-color-indicator, #464e63);
   min-width: 40px;
   height: 100%;
   top: 0;
@@ -58,24 +55,24 @@
 }
 .mc-linear-progressbar-percentage__label {
   box-sizing: border-box;
-  border-radius: 1rem;
-  background-color: #ffffff;
-  color: #171b26;
+  border-radius: var(--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 #464e63;
+  border: 0.125rem solid var(--progressbar-color-indicator, #464e63);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .mc-linear-progressbar-percentage__value {
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: var(--font-size-50, 0.75rem);
+  font-weight: var(--font-weight-semi-bold, 600);
   margin: 0;
 }
 .mc-linear-progressbar-percentage__unit {
-  font-size: 0.625rem;
-  font-weight: 600;
+  font-size: var(--font-size-25, 0.625rem);
+  font-weight: var(--font-weight-semi-bold, 600);
   margin: 0;
   position: relative;
   bottom: 1px;

package/dist/components/link/Link.js

@@ -1,7 +1,4 @@
-import{c as q,p as A,a as B,b as i,f as g,D as F,s as y,d as c,h as x,i as G,j as l,r as f}from"../../custom-element.js";import{i as z}from"../../if.js";import{s as _}from"../../slot.js";import{b as H}from"../../attributes.js";var I=g('<span class="mc-link__icon svelte-bxn02o"><!></span>'),J=g('<span class="mc-link__icon svelte-bxn02o"><!></span>'),K=g('<a><!> <span class="mc-link__label svelte-bxn02o"><!></span> <!></a>');const M={hash:"svelte-bxn02o",code:`/**
+import{c as A,p as B,a as F,b as i,f as g,D as G,s as y,d as c,h as _,i as H,j as a,r as f}from"../../custom-element.js";import{i as z}from"../../if.js";import{s as p}from"../../slot.js";import{b as I}from"../../attributes.js";var J=g('<span class="mc-link__icon svelte-5kacnx"><!></span>'),K=g('<span class="mc-link__icon svelte-5kacnx"><!></span>'),M=g('<a><!> <span class="mc-link__label svelte-5kacnx"><!></span> <!></a>');const N={hash:"svelte-5kacnx",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-link.svelte-bxn02o {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:#000000;font-size:0.875rem;}.mc-link__label.svelte-bxn02o {line-height:1.3;}.mc-link__icon.svelte-bxn02o {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-bxn02o:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-bxn02o) {text-decoration:underline;}.mc-link.svelte-bxn02o:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-link--m.svelte-bxn02o {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-bxn02o {color:#666666;}.mc-link--accent.svelte-bxn02o {color:#117f03;}.mc-link--inverse.svelte-bxn02o {--focus-color-mid: #000000;--focus-color-outer: #ffffff;color:#ffffff;}.mc-link--stand-alone.svelte-bxn02o {min-height:2rem;font-weight:600;}.mc-link--stand-alone.svelte-bxn02o .mc-link__label:where(.svelte-bxn02o) {border-bottom:1px solid currentColor;}.mc-link--stand-alone.svelte-bxn02o:hover .mc-link__label:where(.svelte-bxn02o) {border-color:transparent;}.mc-link--inline.svelte-bxn02o {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-bxn02o .mc-link__label:where(.svelte-bxn02o) {line-height:1;}.mc-link--inline.svelte-bxn02o:hover {text-decoration:none;}`};function N(p,n){A(n,!0),B(p,M);let m=i(n,"href",7),d=i(n,"target",7),b=i(n,"appearance",7,void 0),h=i(n,"disabled",7,!1),v=i(n,"size",7,"m"),u=i(n,"inline",7,!1),a=i(n,"iconposition",7,void 0),j=F(n,["$$slots","$$events","$$legacy","$$host","href","target","appearance","disabled","size","inline","iconposition"]);function D(e,t,o){const s=["mc-link"];return e&&s.push(`mc-link--${e}`),t&&s.push(`mc-link--${t}`),o?s.push("mc-link--inline"):s.push("mc-link--stand-alone"),s.join(" ")}var r=K();H(r,e=>({href:m(),target:d(),class:`${e??""} ${h()?"is-disabled":""} `,...j}),[()=>D(b(),v(),u())],void 0,"svelte-bxn02o");var w=c(r);{var C=e=>{var t=I(),o=c(t);_(o,n,"icon",{}),f(t),x(e,t)};z(w,e=>{a()==="left"&&e(C)})}var k=y(w,2),E=c(k);_(E,n,"default",{}),f(k);var L=y(k,2);{var S=e=>{var t=J(),o=c(t);_(o,n,"icon",{}),f(t),x(e,t)};z(L,e=>{a()==="right"&&e(S)})}return f(r),x(p,r),G({get href(){return m()},set href(e){m(e),l()},get target(){return d()},set target(e){d(e),l()},get appearance(){return b()},set appearance(e=void 0){b(e),l()},get disabled(){return h()},set disabled(e=!1){h(e),l()},get size(){return v()},set size(e="m"){v(e),l()},get inline(){return u()},set inline(e=!1){u(e),l()},get iconposition(){return a()},set iconposition(e=void 0){a(e),l()}})}customElements.define("m-link",q(N,{href:{},target:{},appearance:{},disabled:{},size:{},inline:{},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-s, 1px) 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;}`};function O(b,n){B(n,!0),F(b,N);let m=i(n,"href",7),d=i(n,"target",7),k=i(n,"appearance",7,void 0),v=i(n,"disabled",7,!1),u=i(n,"size",7,"m"),h=i(n,"inline",7,!1),r=i(n,"iconposition",7,void 0),j=G(n,["$$slots","$$events","$$legacy","$$host","href","target","appearance","disabled","size","inline","iconposition"]);function C(e,t,l){const o=["mc-link"];return e&&o.push(`mc-link--${e}`),t&&o.push(`mc-link--${t}`),l?o.push("mc-link--inline"):o.push("mc-link--stand-alone"),o.join(" ")}var D={get href(){return m()},set href(e){m(e),a()},get target(){return d()},set target(e){d(e),a()},get appearance(){return k()},set appearance(e=void 0){k(e),a()},get disabled(){return v()},set disabled(e=!1){v(e),a()},get size(){return u()},set size(e="m"){u(e),a()},get inline(){return h()},set inline(e=!1){h(e),a()},get iconposition(){return r()},set iconposition(e=void 0){r(e),a()}},s=M();I(s,e=>({href:m(),target:d(),class:`${e??""} ${v()?"is-disabled":""} `,...j}),[()=>C(k(),u(),h())],void 0,"svelte-5kacnx");var w=c(s);{var E=e=>{var t=J(),l=c(t);p(l,n,"icon",{}),f(t),_(e,t)};z(w,e=>{r()==="left"&&e(E)})}var x=y(w,2),L=c(x);p(L,n,"default",{}),f(x);var S=y(x,2);{var q=e=>{var t=K(),l=c(t);p(l,n,"icon",{}),f(t),_(e,t)};z(S,e=>{r()==="right"&&e(q)})}return f(s),_(b,s),H(D)}customElements.define("m-link",A(O,{href:{},target:{},appearance:{},disabled:{},size:{},inline:{},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=\"m-link\" />\n\n<script lang=\"ts\">\n  import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';\n  interface Props {\n    href: string;\n    target: string;\n    appearance?: LinkStyle;\n    disabled?: boolean;\n    size?: LinkSize;\n    inline?: boolean;\n    iconposition?: LinkIconPosition | undefined;\n    [key: string]: any;\n  }\n\n  let {\n    href,\n    target,\n    appearance = undefined,\n    disabled = false,\n    size = 'm',\n    inline = false,\n    iconposition = undefined,\n    ...events\n  }: Props = $props();\n\n  function setClasses(\n    appearance: LinkStyle,\n    size: LinkSize,\n    inline: boolean,\n  ): string {\n    const classes = ['mc-link'];\n\n    if (appearance) {\n      classes.push(`mc-link--${appearance}`);\n    }\n    if (size) {\n      classes.push(`mc-link--${size}`);\n    }\n    if (inline) {\n      classes.push('mc-link--inline');\n    } else {\n      classes.push('mc-link--stand-alone');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<a\n  {href}\n  {target}\n  class=\"{setClasses(appearance, size, inline)} {disabled\n    ? 'is-disabled'\n    : ''} \"\n  {...events}\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</style>\n"],"names":["href","$.prop","$$props","target","appearance","disabled","size","inline","iconposition","events","$.rest_props","setClasses","classes","$$render","consequent","consequent_1"],"mappings":";;;;;k9CAAA,oBAgBIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAMF,EAAAC,EAAA,SAAA,CAAA,EACNE,qBAAa,MAAS,EACtBC,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,iBAAS,EAAK,EACdC,uBAAe,MAAS,EACrBC,EAAAC,EAAAR,EAAA,mHAGI,SAAAS,EACPP,EACAE,EACAC,EACQ,CACF,MAAAK,GAAW,SAAS,EAEtB,OAAAR,GACFQ,EAAQ,KAAI,YAAaR,CAAU,EAAA,EAEjCE,GACFM,EAAQ,KAAI,YAAaN,CAAI,EAAA,EAE3BC,EACFK,EAAQ,KAAK,iBAAiB,EAE9BA,EAAQ,KAAK,sBAAsB,EAE9BA,EAAQ,KAAK,GAAG,CACzB,0DAM+CP,IAC3C,cACA,EAAE,OACFI,IAHI,CAAA,IAAAE,EAAWP,EAAU,EAAEE,IAAMC,EAAM,CAAA,CAAA,uGAKtCC,MAAiB,QAAMK,EAAAC,CAAA,gIAQvBN,MAAiB,SAAOK,EAAAE,CAAA,sKA9Cd,OAAS,qDACX,GAAK,6CACT,IAAG,iDACD,GAAK,6DACC,OAAS,YAwB5B"}
+{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.svelte"],"sourcesContent":["<svelte:options customElement=\"m-link\" />\n\n<script lang=\"ts\">\n  import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';\n  interface Props {\n    href: string;\n    target: string;\n    appearance?: LinkStyle;\n    disabled?: boolean;\n    size?: LinkSize;\n    inline?: boolean;\n    iconposition?: LinkIconPosition | undefined;\n    [key: string]: any;\n  }\n\n  let {\n    href,\n    target,\n    appearance = undefined,\n    disabled = false,\n    size = 'm',\n    inline = false,\n    iconposition = undefined,\n    ...events\n  }: Props = $props();\n\n  function setClasses(\n    appearance: LinkStyle,\n    size: LinkSize,\n    inline: boolean,\n  ): string {\n    const classes = ['mc-link'];\n\n    if (appearance) {\n      classes.push(`mc-link--${appearance}`);\n    }\n    if (size) {\n      classes.push(`mc-link--${size}`);\n    }\n    if (inline) {\n      classes.push('mc-link--inline');\n    } else {\n      classes.push('mc-link--stand-alone');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<a\n  {href}\n  {target}\n  class=\"{setClasses(appearance, size, inline)} {disabled\n    ? 'is-disabled'\n    : ''} \"\n  {...events}\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</style>\n"],"names":["href","$.prop","$$props","target","appearance","disabled","size","inline","iconposition","events","$.rest_props","setClasses","classes","$$render","consequent","consequent_1"],"mappings":";;iwDAAA,oBAgBIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAMF,EAAAC,EAAA,SAAA,CAAA,EACNE,qBAAa,MAAS,EACtBC,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,iBAAS,EAAK,EACdC,uBAAe,MAAS,EACrBC,EAAAC,EAAAR,EAAA,mHAGI,SAAAS,EACPP,EACAE,EACAC,EACQ,CACF,MAAAK,GAAW,SAAS,EAEtB,OAAAR,GACFQ,EAAQ,KAAI,YAAaR,CAAU,EAAA,EAEjCE,GACFM,EAAQ,KAAI,YAAaN,CAAI,EAAA,EAE3BC,EACFK,EAAQ,KAAK,iBAAiB,EAE9BA,EAAQ,KAAK,sBAAsB,EAE9BA,EAAQ,KAAK,GAAG,CACzB,oJA3Be,OAAS,qDACX,GAAK,6CACT,IAAG,iDACD,GAAK,6DACC,OAAS,iEA6BqBP,IAC3C,cACA,EAAE,OACFI,IAHI,CAAA,IAAAE,EAAWP,EAAU,EAAEE,EAAI,EAAEC,EAAM,CAAA,CAAA,uGAKtCC,EAAY,IAAK,QAAMK,EAAAC,CAAA,gIAQvBN,EAAY,IAAK,SAAOK,EAAAE,CAAA,2BAlB/B"}

package/dist/components/link/Link.svelte

@@ -72,9 +72,6 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-link {
   transition: box-shadow 200ms ease;
   display: inline-flex;
@@ -83,7 +80,7 @@
   gap: 0.25rem;
   min-height: 1.5rem;
   text-decoration: none;
-  color: #000000;
+  color: var(--link-color-text-primary, #000000);
   font-size: 0.875rem;
 }
 .mc-link__label {
@@ -100,7 +97,7 @@
   text-decoration: underline;
 }
 .mc-link:focus {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  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;
 }
@@ -109,22 +106,22 @@
   font-size: 1rem;
 }
 .mc-link--secondary {
-  color: #666666;
+  color: var(--link-color-text-secondary, #666666);
 }
 .mc-link--accent {
-  color: #117f03;
+  color: var(--link-color-text-accent, #117f03);
 }
 .mc-link--inverse {
-  --focus-color-mid: #000000;
-  --focus-color-outer: #ffffff;
-  color: #ffffff;
+  --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 {
   min-height: 2rem;
-  font-weight: 600;
+  font-weight: var(--link-font-weight, 600);
 }
 .mc-link--stand-alone .mc-link__label {
-  border-bottom: 1px solid currentColor;
+  border-bottom: var(--border-s, 1px) solid currentColor;
 }
 .mc-link--stand-alone:hover .mc-link__label {
   border-color: transparent;

package/dist/components/loader/Loader.js

@@ -1,13 +1,10 @@
-import{c as C,p as B,a as j,b as h,f as u,s as D,d as n,t as _,u as L,e as R,h as p,i as E,j as k,r as i,g as S}from"../../custom-element.js";import{i as V}from"../../if.js";import{s as f}from"../../attributes.js";var q=u('<span class="mc-loader__text svelte-ekl442"> </span>'),A=u('<div><span class="mc-loader__spinner svelte-ekl442"><svg class="mc-loader__icon svelte-ekl442" xmlns="http://www.w3.org/2000/svg"><circle class="mc-loader__path svelte-ekl442" cx="50%" cy="50%"></circle></svg></span> <!></div>');const F={hash:"svelte-ekl442",code:`/**
+import{c as C,p as B,a as L,b as m,f,s as R,d as o,t as g,u as D,e as E,h as _,i as S,j as h,r as v,g as V}from"../../custom-element.js";import{i as q}from"../../if.js";import{s as p}from"../../attributes.js";var A=f('<span class="mc-loader__text svelte-g7kvnj"> </span>'),F=f('<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 G={hash:"svelte-g7kvnj",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-loader.svelte-ekl442 {color:#464e63;align-items:center;display:inline-flex;flex-direction:column;}.mc-loader.svelte-ekl442 .mc-loader__spinner:where(.svelte-ekl442) {height:2rem;width:2rem;}.mc-loader.svelte-ekl442 .mc-loader__path:where(.svelte-ekl442) {stroke-width:4;}.mc-loader.svelte-ekl442 .mc-loader__path:where(.svelte-ekl442) {stroke:currentColor;}.mc-loader__spinner.svelte-ekl442:not(:only-child) {margin-bottom:1rem;}.mc-loader__icon.svelte-ekl442 {
-  animation: svelte-ekl442-rotate-loader 2s linear infinite;transform-origin:center;}.mc-loader__path.svelte-ekl442 {fill:none;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round;
-  animation: svelte-ekl442-animate-dash-loader 2s ease-in-out infinite;}.mc-loader__text.svelte-ekl442 {font-size:1rem;color:currentcolor;}.mc-loader.svelte-ekl442:not(.mc-loader--text-visible) .mc-loader__text:where(.svelte-ekl442) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-loader--xs.svelte-ekl442 .mc-loader__spinner:where(.svelte-ekl442) {height:1.25rem;width:1.25rem;}.mc-loader--xs.svelte-ekl442 .mc-loader__path:where(.svelte-ekl442) {stroke-width:2;}.mc-loader--s.svelte-ekl442 .mc-loader__spinner:where(.svelte-ekl442) {height:1.5rem;width:1.5rem;}.mc-loader--s.svelte-ekl442 .mc-loader__path:where(.svelte-ekl442) {stroke-width:4;}.mc-loader--l.svelte-ekl442 .mc-loader__spinner:where(.svelte-ekl442) {height:4rem;width:4rem;}.mc-loader--l.svelte-ekl442 .mc-loader__path:where(.svelte-ekl442) {stroke-width:8;}.mc-loader--accent.svelte-ekl442 {color:#117f03;}.mc-loader--accent.svelte-ekl442 .mc-loader__path:where(.svelte-ekl442) {stroke:currentColor;}.mc-loader--inverse.svelte-ekl442 {color:#ffffff;}.mc-loader--inverse.svelte-ekl442 .mc-loader__path:where(.svelte-ekl442) {stroke:currentColor;}
+ */.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;
+  animation: svelte-g7kvnj-animate-dash-loader 2s ease-in-out infinite;}.mc-loader__text.svelte-g7kvnj {font-size:var(--font-size-150, 1rem);color:currentcolor;}.mc-loader.svelte-g7kvnj:not(.mc-loader--text-visible) .mc-loader__text:where(.svelte-g7kvnj) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-loader--xs.svelte-g7kvnj .mc-loader__spinner:where(.svelte-g7kvnj) {height:1.25rem;width:1.25rem;}.mc-loader--xs.svelte-g7kvnj .mc-loader__path:where(.svelte-g7kvnj) {stroke-width:2;}.mc-loader--s.svelte-g7kvnj .mc-loader__spinner:where(.svelte-g7kvnj) {height:1.5rem;width:1.5rem;}.mc-loader--s.svelte-g7kvnj .mc-loader__path:where(.svelte-g7kvnj) {stroke-width:4;}.mc-loader--l.svelte-g7kvnj .mc-loader__spinner:where(.svelte-g7kvnj) {height:4rem;width:4rem;}.mc-loader--l.svelte-g7kvnj .mc-loader__path:where(.svelte-g7kvnj) {stroke-width:8;}.mc-loader--accent.svelte-g7kvnj {color:var(--loader-color-accent, #117f03);}.mc-loader--accent.svelte-g7kvnj .mc-loader__path:where(.svelte-g7kvnj) {stroke:currentColor;}.mc-loader--inverse.svelte-g7kvnj {color:var(--loader-color-inverse, #ffffff);}.mc-loader--inverse.svelte-g7kvnj .mc-loader__path:where(.svelte-g7kvnj) {stroke:currentColor;}
 
-@keyframes svelte-ekl442-rotate-loader {
+@keyframes svelte-g7kvnj-rotate-loader {
   0% {
     transform: rotate(0deg);
   }
@@ -15,7 +12,7 @@ import{c as C,p as B,a as j,b as h,f as u,s as D,d as n,t as _,u as L,e as R,h a
     transform: rotate(270deg);
   }
 }
-@keyframes svelte-ekl442-animate-dash-loader {
+@keyframes svelte-g7kvnj-animate-dash-loader {
   0% {
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
@@ -28,5 +25,5 @@ import{c as C,p as B,a as j,b as h,f as u,s as D,d as n,t as _,u as L,e as R,h a
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -124px;
   }
-}`};function G(v,s){B(s,!0),j(v,F);let l=h(s,"size",7),c=h(s,"theme",7),a=h(s,"text",7);function w(e,t){const r=["mc-loader"];return e&&r.push(`mc-loader--${e}`),t&&r.push(`mc-loader--${t}`),r.join(" ")}function x(e){let t;switch(e){case"s":t="0 0 24 24";break;case"l":t="0 0 64 64";break;default:t="0 0 32 32"}return t}function g(e){let t;switch(e){case"s":t=6;break;case"l":t=19;break;default:t=9}return t}var o=A(),d=n(o),m=n(d),y=n(m);i(m),i(d);var b=D(d,2);{var z=e=>{var t=q(),r=n(t,!0);i(t),_(()=>S(r,a())),p(e,t)};V(b,e=>{a()&&e(z)})}return i(o),_((e,t,r)=>{R(o,1,e,"svelte-ekl442"),f(m,"viewBox",t),f(y,"r",r)},[()=>L(w(l(),c())),()=>x(l()),()=>g(l())]),p(v,o),E({get size(){return l()},set size(e){l(e),k()},get theme(){return c()},set theme(e){c(e),k()},get text(){return a()},set text(e){a(e),k()}})}customElements.define("m-loader",C(G,{size:{},theme:{},text:{}},[],[],!0));export{G as L};
+}`};function H(k,a){B(a,!0),L(k,G);let s=m(a,"size",7),c=m(a,"theme",7),n=m(a,"text",7);function j(e,t){const r=["mc-loader"];return e&&r.push(`mc-loader--${e}`),t&&r.push(`mc-loader--${t}`),r.join(" ")}function u(e){let t;switch(e){case"s":t="0 0 24 24";break;case"l":t="0 0 64 64";break;default:t="0 0 32 32"}return t}function w(e){let t;switch(e){case"s":t=6;break;case"l":t=19;break;default:t=9}return t}var x={get size(){return s()},set size(e){s(e),h()},get theme(){return c()},set theme(e){c(e),h()},get text(){return n()},set text(e){n(e),h()}},l=F(),i=o(l),d=o(i),y=o(d);v(d),v(i);var b=R(i,2);{var z=e=>{var t=A(),r=o(t,!0);v(t),g(()=>V(r,n())),_(e,t)};q(b,e=>{n()&&e(z)})}return v(l),g((e,t,r)=>{E(l,1,e,"svelte-g7kvnj"),p(d,"viewBox",t),p(y,"r",r)},[()=>D(j(s(),c())),()=>u(s()),()=>w(s())]),_(k,l),S(x)}customElements.define("m-loader",C(H,{size:{},theme:{},text:{}},[],[],!0));export{H 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  import type { LoaderSize, LoaderTheme } from './loader.types';\n\n  interface Props {\n    size: LoaderSize;\n    theme: LoaderTheme;\n    text?: string;\n  }\n\n  let { size, theme, text }: Props = $props();\n\n  function setClasses(size: LoaderSize, theme: LoaderTheme) {\n    const classes = ['mc-loader'];\n\n    if (size) {\n      classes.push(`mc-loader--${size}`);\n    }\n\n    if (theme) {\n      classes.push(`mc-loader--${theme}`);\n    }\n\n    return classes.join(' ');\n  }\n\n  function setViewBox(size: LoaderSize) {\n    let viewBox: string;\n\n    switch (size) {\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  function setCircleRadius(size: LoaderSize) {\n    let circleRadius: number;\n\n    switch (size) {\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 class={setClasses(size, theme)}>\n  <span class=\"mc-loader__spinner\">\n    <svg\n      class=\"mc-loader__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={setViewBox(size)}\n    >\n      <circle\n        class=\"mc-loader__path\"\n        cx=\"50%\"\n        cy=\"50%\"\n        r={setCircleRadius(size)}\n      />\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","$.prop","$$props","theme","text","setClasses","classes","setViewBox","viewBox","setCircleRadius","circleRadius","$$render","consequent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAA,oBAWQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAIH,EAAAC,EAAA,OAAA,CAAA,EAEd,SAAAG,EAAWL,EAAkBG,EAAoB,CAClD,MAAAG,GAAW,WAAW,EAExB,OAAAN,GACFM,EAAQ,KAAI,cAAeN,CAAI,EAAA,EAG7BG,GACFG,EAAQ,KAAI,cAAeH,CAAK,EAAA,EAG3BG,EAAQ,KAAK,GAAG,CACzB,UAESC,EAAWP,EAAkB,KAChCQ,SAEIR,EAAI,KACL,IACHQ,EAAU,sBAEP,IACHA,EAAU,0BAGVA,EAAU,mBAGPA,CACT,UAESC,EAAgBT,EAAkB,KACrCU,SAEIV,EAAI,KACL,IACHU,EAAe,YAEZ,IACHA,EAAe,iBAGfA,EAAe,SAGZA,CACT,qGAqBKN,EAAI,CAAA,CAAA,kBAFJA,EAAI,GAAAO,EAAAC,CAAA,yFAhBCP,EAAWL,EAAI,EAAEG,EAAK,CAAA,CAAA,EAKnB,IAAAI,EAAWP,GAAI,EAMnB,IAAAS,EAAgBT,EAAI,CAAA,wJAb/B"}
+{"version":3,"file":"Loader.js","sources":["../../../src/components/loader/Loader.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-loader' }} />\n\n<script lang=\"ts\">\n  import type { LoaderSize, LoaderTheme } from './loader.types';\n\n  interface Props {\n    size: LoaderSize;\n    theme: LoaderTheme;\n    text?: string;\n  }\n\n  let { size, theme, text }: Props = $props();\n\n  function setClasses(size: LoaderSize, theme: LoaderTheme) {\n    const classes = ['mc-loader'];\n\n    if (size) {\n      classes.push(`mc-loader--${size}`);\n    }\n\n    if (theme) {\n      classes.push(`mc-loader--${theme}`);\n    }\n\n    return classes.join(' ');\n  }\n\n  function setViewBox(size: LoaderSize) {\n    let viewBox: string;\n\n    switch (size) {\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  function setCircleRadius(size: LoaderSize) {\n    let circleRadius: number;\n\n    switch (size) {\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 class={setClasses(size, theme)}>\n  <span class=\"mc-loader__spinner\">\n    <svg\n      class=\"mc-loader__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={setViewBox(size)}\n    >\n      <circle\n        class=\"mc-loader__path\"\n        cx=\"50%\"\n        cy=\"50%\"\n        r={setCircleRadius(size)}\n      />\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","$.prop","$$props","theme","text","setClasses","classes","setViewBox","viewBox","setCircleRadius","circleRadius","$$render","consequent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAA,oBAWQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAIH,EAAAC,EAAA,OAAA,CAAA,EAEd,SAAAG,EAAWL,EAAkBG,EAAoB,CAClD,MAAAG,GAAW,WAAW,EAExB,OAAAN,GACFM,EAAQ,KAAI,cAAeN,CAAI,EAAA,EAG7BG,GACFG,EAAQ,KAAI,cAAeH,CAAK,EAAA,EAG3BG,EAAQ,KAAK,GAAG,CACzB,UAESC,EAAWP,EAAkB,KAChCQ,SAEIR,EAAI,KACL,IACHQ,EAAU,sBAEP,IACHA,EAAU,0BAGVA,EAAU,mBAGPA,CACT,UAESC,EAAgBT,EAAkB,KACrCU,SAEIV,EAAI,KACL,IACHU,EAAe,YAEZ,IACHA,EAAe,iBAGfA,EAAe,SAGZA,CACT,kPAqBKN,EAAI,CAAA,CAAA,kBAFJA,EAAI,GAAAO,EAAAC,CAAA,yFAhBCP,EAAWL,EAAI,EAAEG,EAAK,CAAA,CAAA,EAKnB,IAAAI,EAAWP,GAAI,EAMnB,IAAAS,EAAgBT,EAAI,CAAA,eAb/B"}

package/dist/components/loader/Loader.svelte

@@ -86,15 +86,6 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
-.mc-loader {
-  color: #464e63;
-  align-items: center;
-  display: inline-flex;
-  flex-direction: column;
-}
 .mc-loader .mc-loader__spinner {
   height: 2rem;
   width: 2rem;
@@ -102,9 +93,17 @@
 .mc-loader .mc-loader__path {
   stroke-width: 4;
 }
+.mc-loader {
+  color: var(--loader-color-standard, #464e63);
+}
 .mc-loader .mc-loader__path {
   stroke: currentColor;
 }
+.mc-loader {
+  align-items: center;
+  display: inline-flex;
+  flex-direction: column;
+}
 .mc-loader__spinner:not(:only-child) {
   margin-bottom: 1rem;
 }
@@ -120,7 +119,7 @@
   animation: animate-dash-loader 2s ease-in-out infinite;
 }
 .mc-loader__text {
-  font-size: 1rem;
+  font-size: var(--font-size-150, 1rem);
   color: currentcolor;
 }
 .mc-loader:not(.mc-loader--text-visible) .mc-loader__text {
@@ -155,13 +154,13 @@
   stroke-width: 8;
 }
 .mc-loader--accent {
-  color: #117f03;
+  color: var(--loader-color-accent, #117f03);
 }
 .mc-loader--accent .mc-loader__path {
   stroke: currentColor;
 }
 .mc-loader--inverse {
-  color: #ffffff;
+  color: var(--loader-color-inverse, #ffffff);
 }
 .mc-loader--inverse .mc-loader__path {
   stroke: currentColor;

package/dist/components/modal/Modal.js

@@ -1,19 +1,16 @@
-import{n as P,c as Q,p as R,a as U,b as l,f as c,s,d as r,t as M,e as V,g as S,h as m,i as W,j as d,r as a}from"../../custom-element.js";import{i as f}from"../../if.js";import{s as b}from"../../slot.js";import{s as X}from"../../attributes.js";import{C as Z}from"../../Cross24.js";import{O as $}from"../overlay/Overlay.js";import"../../legacy.js";function ee(_,o){o(!1);const n=new CustomEvent("update:open",{detail:o(),bubbles:!0,composed:!0});this.dispatchEvent(n)}var te=c('<span class="mc-modal__icon svelte-19ke250"><!></span>'),oe=c('<button type="button" class="mc-modal__close mc-button mc-button--icon-button mc-button--ghost svelte-19ke250" aria-label="Close"><span class="mc-modal__icon svelte-19ke250"><!></span></button>'),re=c('<p class="svelte-19ke250"> </p>'),ae=c('<span class="mc-modal__link svelte-19ke250"><!></span>'),ie=c('<footer class="mc-modal__footer svelte-19ke250"><!> <!></footer>'),ne=c('<section tabindex="-1" aria-labelledby="modalTitle"><div class="mc-modal__dialog svelte-19ke250" role="document"><header class="mc-modal__header svelte-19ke250"><!> <h2 class="mc-modal__title svelte-19ke250" id="modalTitle"> </h2> <!></header> <main class="mc-modal__body svelte-19ke250"><!> <!></main> <!></div> <!></section>');const le={hash:"svelte-19ke250",code:`/**
+import{n as Q,c as R,p as U,a as V,b as l,f as m,s as i,d as r,t as M,e as W,g as S,h as c,i as X,j as s,r as a}from"../../custom-element.js";import{i as b}from"../../if.js";import{s as f}from"../../slot.js";import{s as Z}from"../../attributes.js";import{C as $}from"../../Cross24.js";import{O as ee}from"../overlay/Overlay.js";import"../../legacy.js";function te(g,o){o(!1);const n=new CustomEvent("update:open",{detail:o(),bubbles:!0,composed:!0});this.dispatchEvent(n)}var oe=m('<span class="mc-modal__icon svelte-1tduk3b"><!></span>'),re=m('<button type="button" class="mc-modal__close mc-button mc-button--icon-button mc-button--ghost svelte-1tduk3b" aria-label="Close"><span class="mc-modal__icon svelte-1tduk3b"><!></span></button>'),ae=m('<p class="svelte-1tduk3b"> </p>'),de=m('<span class="mc-modal__link svelte-1tduk3b"><!></span>'),ne=m('<footer class="mc-modal__footer svelte-1tduk3b"><!> <!></footer>'),le=m('<section tabindex="-1" aria-labelledby="modalTitle"><div class="mc-modal__dialog svelte-1tduk3b" role="document"><header class="mc-modal__header svelte-1tduk3b"><!> <h2 class="mc-modal__title svelte-1tduk3b" id="modalTitle"> </h2> <!></header> <main class="mc-modal__body svelte-1tduk3b"><!> <!></main> <!></div> <!></section>');const ie={hash:"svelte-1tduk3b",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-modal.svelte-19ke250 {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-19ke250 {align-items:center;}
-}.mc-modal__dialog.svelte-19ke250 {background:#ffffff;display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease;visibility:hidden;width:100%;border-radius:1rem 1rem 0 0;z-index:3;box-shadow:0px 10px 20px -4px rgba(36, 41, 56, 0.2);}
-@media (width >= 680px) {.mc-modal__dialog.svelte-19ke250 {width:38rem;border-radius:1rem;}
-}.mc-modal.is-open.svelte-19ke250 .mc-modal__dialog:where(.svelte-19ke250) {opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s, transform 0.4s ease, opacity 0.4s ease;visibility:visible;}.mc-modal__header.svelte-19ke250 {align-items:center;display:flex;gap:0.5rem;min-height:3rem;padding:1rem;position:relative;}
-@media (width >= 680px) {.mc-modal__header.svelte-19ke250 {padding:1.5rem 1.5rem 1rem 1.5rem;}
-}.mc-modal__icon.svelte-19ke250 {width:2rem;height:2rem;}.mc-modal__title.svelte-19ke250 {font-size:1.5rem;font-weight:600;color:#000000;margin-bottom:0.5rem;margin-top:0.5rem;padding-right:3rem;}.mc-modal__close.svelte-19ke250 {position:absolute;top:0.75rem;right:0.75rem;}.mc-modal__body.svelte-19ke250 {font-size:1rem;color:#404040;padding:0 1rem;margin-bottom:1rem;}
-@media (width >= 680px) {.mc-modal__body.svelte-19ke250 {padding:0 1.5rem;}
-}.mc-modal__body.svelte-19ke250 p:where(.svelte-19ke250) {margin:0;line-height:1.3;}.mc-modal__footer.svelte-19ke250 {align-items:stretch;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:1rem;padding:0.5rem 1rem 1rem 1rem;}
-@media (width >= 680px) {.mc-modal__footer.svelte-19ke250 {flex-direction:row;padding:0.5rem 1.5rem 1.5rem 1.5rem;}
-}.mc-modal__link.svelte-19ke250 {order:1;}
-@media (width >= 680px) {.mc-modal__link.svelte-19ke250 {margin-right:auto;order:0;}
-}.mc-button.svelte-19ke250 {color:#ffffff;background-color:#464e63;font-weight:600;padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius: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.svelte-19ke250:hover {background-color:#343b4c;}.mc-button.svelte-19ke250:active {background-color:#242938;}.mc-button.svelte-19ke250:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button.svelte-19ke250:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button.svelte-19ke250:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-button--ghost.svelte-19ke250 {color:#242938;background-color:rgba(255, 255, 255, 0.01);}.mc-button--ghost.svelte-19ke250:hover {background-color:rgba(70, 78, 99, 0.1);}.mc-button--ghost.svelte-19ke250:active {background-color:rgba(70, 78, 99, 0.2);}.mc-button--ghost.svelte-19ke250:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--icon-button.svelte-19ke250 {border-radius:100%;padding:0;}`};function se(_,o){R(o,!0),U(_,le);let n=l(o,"open",7,!1),g=l(o,"title",7,""),u=l(o,"description",7,""),p=l(o,"closable",7,!0),k=l(o,"icon",7,void 0),h=l(o,"footer",7,void 0),x=l(o,"link",7,void 0);var v=ne();let O;var y=r(v),w=r(y),T=r(w);{var q=e=>{var t=te(),i=r(t);b(i,o,"icon",{}),a(t),m(e,t)};f(T,e=>{k()&&e(q)})}var z=s(T,2),A=r(z,!0);a(z);var B=s(z,2);{var F=e=>{var t=oe();t.__click=[ee,n];var i=r(t),j=r(i);Z(j,{"aria-hidden":"true"}),a(i),a(t),m(e,t)};f(B,e=>{p()&&e(F)})}a(w);var C=s(w,2),Y=r(C);{var G=e=>{var t=re(),i=r(t,!0);a(t),M(()=>S(i,u())),m(e,t)};f(Y,e=>{u()&&e(G)})}var H=s(Y,2);b(H,o,"default",{}),a(C);var I=s(C,2);{var J=e=>{var t=ie(),i=r(t);{var j=E=>{var D=ae(),N=r(D);b(N,o,"link",{}),a(D),m(E,D)};f(i,E=>{x()&&E(j)})}var L=s(i,2);b(L,o,"footer",{}),a(t),m(e,t)};f(I,e=>{h()&&e(J)})}a(y);var K=s(y,2);return $(K,{get isvisible(){return n()},dialoglabel:"modal"}),a(v),M(e=>{O=V(v,1,"mc-modal svelte-19ke250",null,O,e),X(v,"aria-hidden",!n()),S(A,g())},[()=>({"is-open":n()})]),m(_,v),W({get open(){return n()},set open(e=!1){n(e),d()},get title(){return g()},set title(e=""){g(e),d()},get description(){return u()},set description(e=""){u(e),d()},get closable(){return p()},set closable(e=!0){p(e),d()},get icon(){return k()},set icon(e=void 0){k(e),d()},get footer(){return h()},set footer(e=void 0){h(e),d()},get link(){return x()},set link(e=void 0){x(e),d()}})}P(["click"]);customElements.define("m-modal",Q(se,{open:{},title:{},description:{},closable:{},icon:{},footer:{},link:{}},["icon","default","link","footer"],[],!0));
+ */.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;}
+}.mc-modal__dialog.svelte-1tduk3b {background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease;visibility:hidden;width:100%;border-radius:var(--radius-l, 1rem) var(--radius-l, 1rem) 0 0;z-index:3;}
+@media (width >= 680px) {.mc-modal__dialog.svelte-1tduk3b {width:38rem;border-radius:var(--radius-l, 1rem);}
+}.mc-modal.is-open.svelte-1tduk3b .mc-modal__dialog:where(.svelte-1tduk3b) {opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s, transform 0.4s ease, opacity 0.4s ease;visibility:visible;}.mc-modal__header.svelte-1tduk3b {align-items:center;display:flex;gap:0.5rem;min-height:3rem;padding:1rem;position:relative;}
+@media (width >= 680px) {.mc-modal__header.svelte-1tduk3b {padding:1.5rem 1.5rem 1rem 1.5rem;}
+}.mc-modal__icon.svelte-1tduk3b {width:2rem;height:2rem;}.mc-modal__title.svelte-1tduk3b {font-size:var(--font-title-m, 1.5rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--modal-color-title, #000000);margin-bottom:0.5rem;margin-top:0.5rem;padding-right:3rem;}.mc-modal__close.svelte-1tduk3b {position:absolute;top:0.75rem;right:0.75rem;}.mc-modal__body.svelte-1tduk3b {font-size:var(--font-size-150, 1rem);color:var(--modal-color-paragraph, #404040);padding:0 1rem;margin-bottom:1rem;}
+@media (width >= 680px) {.mc-modal__body.svelte-1tduk3b {padding:0 1.5rem;}
+}.mc-modal__body.svelte-1tduk3b p:where(.svelte-1tduk3b) {margin:0;line-height:var(--line-height-s, 1.3);}.mc-modal__footer.svelte-1tduk3b {align-items:stretch;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:1rem;padding:0.5rem 1rem 1rem 1rem;}
+@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-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-radius, 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.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--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--icon-button.svelte-1tduk3b {border-radius:var(--radius-full, 100%);padding:0;}`};function se(g,o){U(o,!0),V(g,ie);let n=l(o,"open",7,!1),_=l(o,"title",7,""),v=l(o,"description",7,""),k=l(o,"closable",7,!0),p=l(o,"icon",7,void 0),h=l(o,"footer",7,void 0),x=l(o,"link",7,void 0);var q={get open(){return n()},set open(e=!1){n(e),s()},get title(){return _()},set title(e=""){_(e),s()},get description(){return v()},set description(e=""){v(e),s()},get closable(){return k()},set closable(e=!0){k(e),s()},get icon(){return p()},set icon(e=void 0){p(e),s()},get footer(){return h()},set footer(e=void 0){h(e),s()},get link(){return x()},set link(e=void 0){x(e),s()}},u=le();let T;var y=r(u),w=r(y),Y=r(w);{var A=e=>{var t=oe(),d=r(t);f(d,o,"icon",{}),a(t),c(e,t)};b(Y,e=>{p()&&e(A)})}var z=i(Y,2),B=r(z,!0);a(z);var F=i(z,2);{var G=e=>{var t=re();t.__click=[te,n];var d=r(t),j=r(d);$(j,{"aria-hidden":"true"}),a(d),a(t),c(e,t)};b(F,e=>{k()&&e(G)})}a(w);var C=i(w,2),D=r(C);{var H=e=>{var t=ae(),d=r(t,!0);a(t),M(()=>S(d,v())),c(e,t)};b(D,e=>{v()&&e(H)})}var I=i(D,2);f(I,o,"default",{}),a(C);var J=i(C,2);{var K=e=>{var t=ne(),d=r(t);{var j=E=>{var O=de(),P=r(O);f(P,o,"link",{}),a(O),c(E,O)};b(d,E=>{x()&&E(j)})}var N=i(d,2);f(N,o,"footer",{}),a(t),c(e,t)};b(J,e=>{h()&&e(K)})}a(y);var L=i(y,2);return ee(L,{get isvisible(){return n()},dialoglabel:"modal"}),a(u),M(e=>{T=W(u,1,"mc-modal svelte-1tduk3b",null,T,e),Z(u,"aria-hidden",!n()),S(B,_())},[()=>({"is-open":n()})]),c(g,u),X(q)}Q(["click"]);customElements.define("m-modal",R(se,{open:{},title:{},description:{},closable:{},icon:{},footer:{},link:{}},["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  interface Props {\n    open?: boolean;\n    title?: string;\n    description?: string;\n    closable?: boolean;\n    icon?: any;\n    footer?: any;\n    link?: any;\n    [key: string]: any;\n  }\n\n  let {\n    open = false,\n    title = '',\n    description = '',\n    closable = true,\n    icon = undefined,\n    footer = undefined,\n    link = undefined,\n  }: Props = $props();\n\n  function onClose() {\n    open = false;\n    // Manually emit event from the custom element\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    // @ts-ignore: `this` is the custom element instance\n    this.dispatchEvent(event);\n  }\n  //   afterUpdate(() => {\n  //     dispatch('update:open', open);\n  //   });\n</script>\n\n<section\n  class=\"mc-modal\"\n  class:is-open={open}\n  tabindex=\"-1\"\n  aria-labelledby=\"modalTitle\"\n  aria-hidden={!open}\n>\n  <div class=\"mc-modal__dialog\" role=\"document\">\n    <header class=\"mc-modal__header\">\n      {#if icon}\n        <span class=\"mc-modal__icon\">\n          <slot name=\"icon\" />\n        </span>\n      {/if}\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          <span class=\"mc-modal__icon\">\n            <Cross24 aria-hidden=\"true\" />\n          </span>\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    {#if footer}\n      <footer class=\"mc-modal__footer\">\n        {#if link}\n          <span class=\"mc-modal__link\">\n            <slot name=\"link\" />\n          </span>\n        {/if}\n        <slot name=\"footer\" />\n      </footer>\n    {/if}\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</style>\n"],"names":["onClose","open","event","title","description","closable","icon","footer","link","$$render","consequent","consequent_1","consequent_2","consequent_3","consequent_4"],"mappings":"0VA2BW,SAAAA,GAAU,EAAAC,EAAA,CACjBA,EAAO,EAAK,EAEN,MAAAC,EAAY,IAAA,YAAY,eAC5B,OAAQD,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAGhB,KAAK,cAAcC,CAAK,CAC1B;;;;;;;;;;;;;;;;;08CArCF,iBAkBI,IAAAD,eAAO,EAAK,EACZE,gBAAQ,EAAE,EACVC,sBAAc,EAAE,EAChBC,mBAAW,EAAI,EACfC,eAAO,MAAS,EAChBC,iBAAS,MAAS,EAClBC,eAAO,MAAS,+GA4BTF,EAAI,GAAAG,EAAAC,CAAA,8EAWIV,GAAOC,CAAA,0EALfI,EAAQ,GAAAI,EAAAE,CAAA,4EAgBPP,EAAW,CAAA,CAAA,kBADZA,EAAW,GAAAK,EAAAG,CAAA,uJAQTJ,EAAI,GAAAC,EAAAI,CAAA,yDAFRN,EAAM,GAAAE,EAAAK,CAAA,yDAYQb,EAAI,mGA3CXA,EAAI,CAAA,MAS+BE,GAAK,oBAZvCF,EAAI,GAAA,+CA3BV,GAAK,+CACJ,GAAE,2DACI,GAAE,qDACL,GAAI,6CACR,OAAS,iDACP,OAAS,6CACX,OAAS,YAiBpB"}
+{"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  interface Props {\n    open?: boolean;\n    title?: string;\n    description?: string;\n    closable?: boolean;\n    icon?: any;\n    footer?: any;\n    link?: any;\n    [key: string]: any;\n  }\n\n  let {\n    open = false,\n    title = '',\n    description = '',\n    closable = true,\n    icon = undefined,\n    footer = undefined,\n    link = undefined,\n  }: Props = $props();\n\n  function onClose() {\n    open = false;\n    // Manually emit event from the custom element\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    // @ts-ignore: `this` is the custom element instance\n    this.dispatchEvent(event);\n  }\n  //   afterUpdate(() => {\n  //     dispatch('update:open', open);\n  //   });\n</script>\n\n<section\n  class=\"mc-modal\"\n  class:is-open={open}\n  tabindex=\"-1\"\n  aria-labelledby=\"modalTitle\"\n  aria-hidden={!open}\n>\n  <div class=\"mc-modal__dialog\" role=\"document\">\n    <header class=\"mc-modal__header\">\n      {#if icon}\n        <span class=\"mc-modal__icon\">\n          <slot name=\"icon\" />\n        </span>\n      {/if}\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          <span class=\"mc-modal__icon\">\n            <Cross24 aria-hidden=\"true\" />\n          </span>\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    {#if footer}\n      <footer class=\"mc-modal__footer\">\n        {#if link}\n          <span class=\"mc-modal__link\">\n            <slot name=\"link\" />\n          </span>\n        {/if}\n        <slot name=\"footer\" />\n      </footer>\n    {/if}\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</style>\n"],"names":["onClose","_","open","event","title","description","closable","icon","footer","link","$$render","consequent","consequent_1","consequent_2","consequent_3","consequent_4"],"mappings":"gWA2BW,SAAAA,GAAOC,EAAAC,EAAG,CACjBA,EAAO,EAAK,EAEN,MAAAC,EAAK,IAAO,YAAY,eAC5B,OAAQD,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAGhB,KAAK,cAAcC,CAAK,CAC1B;;;;;;;;;;;;;;6vEArCF,iBAkBI,IAAAD,eAAO,EAAK,EACZE,gBAAQ,EAAE,EACVC,sBAAc,EAAE,EAChBC,mBAAW,EAAI,EACfC,eAAO,MAAS,EAChBC,iBAAS,MAAS,EAClBC,eAAO,MAAS,2CANT,GAAK,+CACJ,GAAE,2DACI,GAAE,qDACL,GAAI,6CACR,OAAS,iDACP,OAAS,6CACX,OAAS,qHA4BTF,EAAI,GAAAG,EAAAC,CAAA,8EAWIX,GAAOE,CAAA,0EALfI,EAAQ,GAAAI,EAAAE,CAAA,4EAgBPP,EAAW,CAAA,CAAA,kBADZA,EAAW,GAAAK,EAAAG,CAAA,uJAQTJ,EAAI,GAAAC,EAAAI,CAAA,yDAFRN,EAAM,GAAAE,EAAAK,CAAA,0DAYQb,EAAI,mGA3CXA,EAAI,CAAA,MAS+BE,GAAK,oBAZvCF,EAAI,GAAA,cAJrB"}