@mozaic-ds/web-components 1.2.0 → 1.4.0

package/dist/components/loadingoverlay/LoadingOverlay.js

@@ -1,4 +1,4 @@
-import{c as p,p as b,a as g,b as o,f as u,d as n,t as y,i as f,j as x,k as v,r as d,e as z,g as _}from"../../custom-element.js";import{s as h}from"../../attributes.js";import{L as k}from"../loader/Loader.js";import"../../if.js";var L=u('<div><div role="dialog" tabindex="-1"><!></div></div>');const j={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,n as h,o 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=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 w(l,t){b(t,!0),g(l,j);let s=o(t,"isvisible",7),e=o(t,"text",7);var c={get isvisible(){return s()},set isvisible(r){s(r),v()},get text(){return e()},set text(r){e(r),v()}},i=L(),a=n(i),m=n(a);return k(m,{size:"l",appearance:"inverse",get text(){return e()}}),d(a),d(i),y(()=>{z(i,1,_(["mc-loading-loader",s()&&"is-visible"]),"svelte-111c1z1"),h(a,"aria-label",e())}),f(l,i),x(c)}customElements.define("m-loading-overlay",p(w,{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(l,e){u(e,!0),y(l,w);let s=r(e,"isvisible",7),t=r(e,"text",7),d=_(e,["$$slots","$$events","$$legacy","$$host","isvisible","text"]);var p={get isvisible(){return s()},set isvisible(o){s(o),v()},get text(){return t()},set text(o){t(o),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 m=n(a);return j(m,{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(l,i),x(p)}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 }: Props = $props();\n</script>\n\n<div class={['mc-loading-loader', isvisible && 'is-visible']}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-label={text}>\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"],"mappings":";;8eAAA,oBAkBQA,EAASC,EAAAC,EAAA,YAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,+NAGV,oBAAqBF,KAAa,YAAY,CAAA,EAAA,gBAAA,mBACZG,GAAI,eAHnD"}
+{"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.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingOverlay.stories.d.ts","sourceRoot":"","sources":["../../../src/components/loadingoverlay/LoadingOverlay.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IA6BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC"}
+{"version":3,"file":"LoadingOverlay.stories.d.ts","sourceRoot":"","sources":["../../../src/components/loadingoverlay/LoadingOverlay.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,yBAAyB,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IA6BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC"}

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

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import './LoadingOverlay.svelte';
 const meta = {
     title: 'Overlay/Loading Overlay',
     component: 'm-loading-overlay',
@@ -25,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.
      */
@@ -16,11 +24,11 @@
     text?: string;
   }
 
-  let { isvisible, text }: Props = $props();
+  let { isvisible, text, ...attrs }: Props = $props();
 </script>
 
 <div class={['mc-loading-loader', isvisible && 'is-visible']}>
-  <div role="dialog" tabindex="-1" aria-label={text}>
+  <div role="dialog" tabindex="-1" aria-label={text} {...attrs}>
     <Loader size="l" appearance="inverse" {text} />
   </div>
 </div>

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{v as J,c as K,p as L,a as N,b as s,f as w,d as t,s as l,t as E,i as y,j as P,k as c,r as o,h as O,e as Q,g as R}from"../../custom-element.js";import{i as T}from"../../if.js";import{s as m}from"../../slot.js";import{s 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=w('<button type="button" class="mc-modal__close mc-button mc-button--icon-button mc-button--ghost svelte-1tduk3b" aria-label="Close"><!></button>'),$=w('<p class="svelte-1tduk3b"> </p>'),ee=w('<section tabindex="-1" aria-labelledby="modalTitle"><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 te={hash:"svelte-1tduk3b",code:`/**
+import{u as ro,c as ao,p as no,a as lo,b as l,s as i,t as S,f as a,g as co,h as Y,i as bo,d as n,j as c,k as b,l as u,r as d,e as q}from"../../custom-element.js";import{s as p}from"../../snippet.js";import{i as v}from"../../if.js";import{s as w}from"../../slot.js";import{a as uo}from"../../attributes.js";import{b as so}from"../../this.js";import{n as io}from"../../Condition20.js";import{O as vo}from"../overlay/Overlay.js";var mo=Y('<button type="button" class="mc-modal__close mc-button mc-button--icon-button mc-button--ghost svelte-1tduk3b" aria-label="Close"><!></button>'),go=Y('<p class="svelte-1tduk3b"> </p>'),fo=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 ko={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{v as J,c as K,p as L,a as N,b as s,f as w,d as t,s as l,t as E,i as y,j a
 @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-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.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(--border-radius-full, 100%);padding:0;}.mc-modal__icon.svelte-1tduk3b:empty {display:none;}`};function oe(z,r){L(r,!0),N(z,te);let d=s(r,"open",7),b=s(r,"title",7),n=s(r,"description",7),u=s(r,"closable",7,!0),v;function Y(){d(!1);const e=new CustomEvent("update:open",{detail:d(),bubbles:!0,composed:!0});v.dispatchEvent(e)}var D={get open(){return d()},set open(e){d(e),c()},get title(){return b()},set title(e){b(e),c()},get description(){return n()},set description(e){n(e),c()},get closable(){return u()},set closable(e=!0){u(e),c()}},i=ee(),f=t(i),g=t(f),p=t(g),M=t(p);m(M,r,"icon",{}),o(p);var k=l(p,2),S=t(k,!0);o(k);var q=l(k,2);{var A=e=>{var a=Z();a.__click=Y;var x=t(a);W(x,{class:"mc-modal__close","aria-hidden":"true"}),o(a),y(e,a)};T(q,e=>{u()&&e(A)})}o(g);var _=l(g,2),C=t(_);{var B=e=>{var a=$(),x=t(a,!0);o(a),E(()=>O(x,n())),y(e,a)};T(C,e=>{n()&&e(B)})}var F=l(C,2);m(F,r,"default",{}),o(_);var j=l(_,2),h=t(j),G=t(h);m(G,r,"link",{}),o(h);var H=l(h,2);m(H,r,"footer",{}),o(j),o(f);var I=l(f,2);return X(I,{get isvisible(){return d()},dialoglabel:"modal"}),o(i),V(i,e=>v=e,()=>v),E(()=>{Q(i,1,R(["mc-modal",d()&&"is-open"]),"svelte-1tduk3b"),U(i,"aria-hidden",!d()),O(S,b())}),y(z,i),P(D)}J(["click"]);customElements.define("m-modal",K(oe,{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--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 ho(D,r){no(r,!0),lo(D,ko);let s=l(r,"open",7),x=l(r,"title",7),g=l(r,"description",7),y=l(r,"closable",7,!0),f=l(r,"icon",7),k=l(r,"children",7),h=l(r,"link",7),_=l(r,"footer",7),A=bo(r,["$$slots","$$events","$$legacy","$$host","open","title","description","closable","icon","children","link","footer"]),z;function F(){s(!1);const o=new CustomEvent("update:open",{detail:s(),bubbles:!0,composed:!0});z.dispatchEvent(o)}var G={get open(){return s()},set open(o){s(o),c()},get title(){return x()},set title(o){x(o),c()},get description(){return g()},set description(o){g(o),c()},get closable(){return y()},set closable(o=!0){y(o),c()},get icon(){return f()},set icon(o){f(o),c()},get children(){return k()},set children(o){k(o),c()},get link(){return h()},set link(o){h(o),c()},get footer(){return _()},set footer(o){_(o),c()}},m=fo();uo(m,()=>({class:["mc-modal",s()&&"is-open"],tabindex:"-1","aria-labelledby":"modalTitle","aria-hidden":!s(),...A}),void 0,void 0,void 0,"svelte-1tduk3b");var j=n(m),C=n(j),E=n(C),H=n(E);{var I=o=>{var t=b(),e=u(t);p(e,f),a(o,t)},J=o=>{var t=b(),e=u(t);w(e,r,"icon",{},null),a(o,t)};v(H,o=>{f()?o(I):o(J,!1)})}d(E);var B=i(E,2),K=n(B,!0);d(B);var L=i(B,2);{var P=o=>{var t=mo();t.__click=F;var e=n(t);io(e,{className:"mc-modal__close"}),d(t),a(o,t)};v(L,o=>{y()&&o(P)})}d(C);var O=i(C,2),M=n(O);{var Q=o=>{var t=go(),e=n(t,!0);d(t),S(()=>q(e,g())),a(o,t)};v(M,o=>{g()&&o(Q)})}var R=i(M,2);{var U=o=>{var t=b(),e=u(t);p(e,k),a(o,t)},V=o=>{var t=b(),e=u(t);w(e,r,"default",{},null),a(o,t)};v(R,o=>{k()?o(U):o(V,!1)})}d(O);var N=i(O,2),T=n(N),W=n(T);{var X=o=>{var t=b(),e=u(t);p(e,h),a(o,t)},Z=o=>{var t=b(),e=u(t);w(e,r,"link",{},null),a(o,t)};v(W,o=>{h()?o(X):o(Z,!1)})}d(T);var $=i(T,2);{var oo=o=>{var t=b(),e=u(t);p(e,_),a(o,t)},to=o=>{var t=b(),e=u(t);w(e,r,"footer",{},null),a(o,t)};v($,o=>{_()?o(oo):o(to,!1)})}d(N),d(j);var eo=i(j,2);return vo(eo,{get isvisible(){return s()},dialoglabel:"modal"}),d(m),so(m,o=>z=o,()=>z),S(()=>q(K,x())),a(D,m),co(G)}ro(["click"]);customElements.define("m-modal",ao(ho,{open:{attribute:"open",reflect:!0,type:"Boolean"},closable:{attribute:"closable",reflect:!0,type:"Boolean"},title:{},description:{},icon:{},children:{},link:{},footer:{}},["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 }: 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>\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","element","onClose","event","$$render","consequent","consequent_1","$.bind_this","section","$$value"],"mappings":";;;;;;;;;;;;;;i0EAAA,qBAiCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EAAEG,mBAAW,EAAI,EAC3CC,EAEK,SAAAC,GAAU,CACjBP,EAAO,EAAK,EAEN,MAAAQ,EAAK,IAAO,YAAY,eAC5B,OAAQR,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBM,EAAQ,cAAcE,CAAK,CAC7B,yMAZ2C,GAAI,6IAiC9BD,sFALRF,EAAQ,GAAAI,EAAAC,CAAA,2EAcPN,EAAW,CAAA,CAAA,kBADZA,EAAW,GAAAK,EAAAE,CAAA,qLAcCX,EAAI,8BAnCdY,EAAAC,EAAAC,GAAAR,QAAAA,CAAO,kBAJV,WAAYN,KAAQ,SAAS,CAAA,EAAA,gBAAA,qBAGvBA,EAAI,CAAA,MAQ+BG,GAAK,eAdxD"}
+{"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 type { Snippet } from 'svelte';\n  import { Cross24 } from '@mozaic-ds/icons-svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n\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    /**\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     * Use this snippet to insert an icon next to the title of the modal.\n     */\n    icon?: Snippet;\n    /**\n     * Use this snippet to insert the content of the modal.\n     */\n    children?: Snippet;\n    /**\n     *  Use this snippet to insert a link in the footer.\n     */\n    link?: Snippet;\n    /**\n     * Use this snippet to insert buttons in the footer.\n     */\n    footer?: Snippet;\n  }\n\n  let {\n    open,\n    title,\n    description,\n    closable = true,\n    icon,\n    children,\n    link,\n    footer,\n    ...attrs\n  }: 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        {#if icon}\n          {@render icon()}\n        {:else}\n          <slot name=\"icon\" />\n        {/if}\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      {#if children}\n        {@render children()}\n      {:else}\n        <slot />\n      {/if}\n    </main>\n\n    <footer class=\"mc-modal__footer\">\n      <span class=\"mc-modal__link\">\n        {#if link}\n          {@render link()}\n        {:else}\n          <slot name=\"link\" />\n        {/if}\n      </span>\n      {#if footer}\n        {@render footer()}\n      {:else}\n        <slot name=\"footer\" />\n      {/if}\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","icon","children","link","footer","attrs","$.rest_props","element","onClose","event","section","root","div","$.child","header","span","$$render","consequent","alternate","h2","button","root_3","node_4","Cross24","$.reset","$.append","$$anchor","consequent_1","main","p","root_4","consequent_2","consequent_3","alternate_1","footer_1","span_1","consequent_4","alternate_2","consequent_5","alternate_3","MOverlay","node_15","$$value"],"mappings":";;;;;;;;;;;;;;2yWAUA,uBAoDIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,mBAAW,EAAI,EACfC,EAAIL,EAAAC,EAAA,OAAA,CAAA,EACJK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAIP,EAAAC,EAAA,OAAA,CAAA,EACJO,EAAMR,EAAAC,EAAA,SAAA,CAAA,EACHQ,EAAAC,GAAAT,EAAA,sHAEDU,EAEK,SAAAC,GAAU,CACjBb,EAAO,EAAK,EAEN,MAAAc,EAAK,IAAO,YAAY,eAC5B,OAAQd,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBY,EAAQ,cAAcE,CAAK,CAC7B,yMAlBa,GAAI,4MAqBlBC,EAAAC,GAAA,KAAAD,eACS,WAAYf,EAAI,GAAI,SAAS,8DAGvBA,EAAI,KAEdU,2CAEH,IAAAO,EAAGC,EARLH,CAAA,EASII,IADFF,CAAG,EAECG,IADFD,CAAM,MACJC,CAAI,kCAEQd,CAAI,uEADVA,EAAI,EAAAe,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,MADVH,CAAI,EAOJ,IAAAI,IAPAJ,EAAI,CAAA,MAOJI,EAAE,EAAA,IAAFA,CAAE,UAAFA,EAAE,CAAA,aAEA,IAAAC,EAAAC,GAAA,EAAAD,EAIC,QAASZ,EAJV,IAAAc,EAAAT,EAAAO,CAAA,EAMEG,GAAOD,EAAA,CAAA,UAAA,iBAAA,CAAA,EANTE,EAAAJ,CAAA,EAAAK,EAAAC,EAAAN,CAAA,WADEpB,EAAQ,GAAAgB,EAAAW,CAAA,MATdb,CAAM,EAqBN,IAAAc,IArBAd,EAAM,CAAA,MAqBNc,CAAI,iBAEAC,EAACC,GAAA,MAADD,EAAC,EAAA,IAADA,CAAC,YAAE9B,EAAW,CAAA,CAAA,MAAd8B,CAAC,WADC9B,EAAW,GAAAiB,EAAAe,CAAA,iDAIL7B,CAAQ,0EADdA,EAAQ,EAAAc,EAAAgB,CAAA,EAAAhB,EAAAiB,EAAA,EAAA,MAJdL,CAAI,EAWJ,IAAAM,IAXAN,EAAI,CAAA,EAYFO,IADFD,CAAM,MACJC,CAAI,kCAEQhC,CAAI,uEADVA,EAAI,EAAAa,EAAAoB,CAAA,EAAApB,EAAAqB,EAAA,EAAA,MADVF,CAAI,UAAJA,EAAI,CAAA,mCAQM/B,CAAM,0EADZA,EAAM,EAAAY,EAAAsB,EAAA,EAAAtB,EAAAuB,GAAA,EAAA,MARZL,CAAM,IAjCRtB,CAAG,WAAHA,EAAG,CAAA,EAiDH4B,OAAAA,GAAQC,GAAA,wBAAY9C,EAAI,yBAzD1B6B,EAAAd,CAAA,KAAAA,EAAAgC,GAKYnC,QAAAA,CAAO,YAY+BT,EAAK,CAAA,CAAA,EAjBvD2B,EAAAC,EAAAhB,CAAA,OAFO"}

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

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import '@mozaic-ds/icons-svelte/custom-elements/InfoCircle32/InfoCircle32.js';
-import '@mozaic-ds/icons-svelte/custom-elements/ExternalLink24/ExternalLink24.js';
+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';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

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,sEAAsE,CAAC;AAC9E,OAAO,0EAA0E,CAAC;AAElF,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,11 @@ 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/custom-elements/InfoCircle32/InfoCircle32.js';
-import '@mozaic-ds/icons-svelte/custom-elements/ExternalLink24/ExternalLink24.js';
+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';
 const meta = {
     title: 'Overlay/Modal',
     component: 'm-modal',
@@ -40,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,8 +1,18 @@
-<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 type { Snippet } from '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 +23,8 @@
    * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.
    */
   interface Props {
+    [key: string]: any;
+
     /**
      * if `true`, display the modal.
      */
@@ -29,9 +41,35 @@
      * if `true`, display the close button.
      */
     closable?: boolean;
+    /**
+     * Use this snippet to insert an icon next to the title of the modal.
+     */
+    icon?: Snippet;
+    /**
+     * Use this snippet to insert the content of the modal.
+     */
+    children?: Snippet;
+    /**
+     *  Use this snippet to insert a link in the footer.
+     */
+    link?: Snippet;
+    /**
+     * Use this snippet to insert buttons in the footer.
+     */
+    footer?: Snippet;
   }
 
-  let { open, title, description, closable = true }: Props = $props();
+  let {
+    open,
+    title,
+    description,
+    closable = true,
+    icon,
+    children,
+    link,
+    footer,
+    ...attrs
+  }: Props = $props();
   let element: HTMLElement;
 
   function onClose() {
@@ -52,11 +90,16 @@
   aria-labelledby="modalTitle"
   aria-hidden={!open}
   bind:this={element}
+  {...attrs}
 >
   <div class="mc-modal__dialog" role="document">
     <header class="mc-modal__header">
       <span class="mc-modal__icon">
-        <slot name="icon" />
+        {#if icon}
+          {@render icon()}
+        {:else}
+          <slot name="icon" />
+        {/if}
       </span>
       <h2 class="mc-modal__title" id="modalTitle">{title}</h2>
       {#if closable}
@@ -66,7 +109,7 @@
           aria-label="Close"
           onclick={onClose}
         >
-          <Cross24 class="mc-modal__close" aria-hidden="true" />
+          <Cross24 className="mc-modal__close" />
         </button>
       {/if}
     </header>
@@ -75,14 +118,26 @@
       {#if description}
         <p>{description}</p>
       {/if}
-      <slot />
+      {#if children}
+        {@render children()}
+      {:else}
+        <slot />
+      {/if}
     </main>
 
     <footer class="mc-modal__footer">
       <span class="mc-modal__link">
-        <slot name="link" />
+        {#if link}
+          {@render link()}
+        {:else}
+          <slot name="link" />
+        {/if}
       </span>
-      <slot name="footer" />
+      {#if footer}
+        {@render footer()}
+      {:else}
+        <slot name="footer" />
+      {/if}
     </footer>
   </div>
 

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

@@ -1,3 +1,4 @@
+import type { Snippet } from '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.
  *
@@ -8,6 +9,7 @@
  * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.
  */
 interface Props {
+    [key: string]: any;
     /**
      * if `true`, display the modal.
      */
@@ -24,6 +26,22 @@ interface Props {
      * if `true`, display the close button.
      */
     closable?: boolean;
+    /**
+     * Use this snippet to insert an icon next to the title of the modal.
+     */
+    icon?: Snippet;
+    /**
+     * Use this snippet to insert the content of the modal.
+     */
+    children?: Snippet;
+    /**
+     *  Use this snippet to insert a link in the footer.
+     */
+    link?: Snippet;
+    /**
+     * Use this snippet to insert buttons in the footer.
+     */
+    footer?: Snippet;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

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":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC;;;;;;;;GAQG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IAEnB;;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;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA4FH,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/modal/README.md

@@ -10,6 +10,10 @@ A modal is a dialog window that appears on top of the main content, requiring us
 | `title*` | Title of the modal. | `string` |   |
 | `description` | Description of the modal. | `string` |   |
 | `closable` | if `true`, display the close button. | `boolean` | `true` |
+| `icon` | Use this snippet to insert an icon next to the title of the modal. | `Snippet` |   |
+| `children` | Use this snippet to insert the content of the modal. | `Snippet` |   |
+| `link` | Use this snippet to insert a link in the footer. | `Snippet` |   |
+| `footer` | Use this snippet to insert buttons in the footer. | `Snippet` |   |
 
 ## Slots
 

package/dist/components/numberbadge/NumberBadge.js

@@ -1,4 +1,4 @@
-import{c as i,p as m,a as g,b as o,f,t as u,i as v,j as p,k as b,d as h,r as x,e as z,g as k,h as _}from"../../custom-element.js";var w=f("<div> </div>");const y={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(d,r){m(r,!0),g(d,y);let t=o(r,"label",7),n=o(r,"appearance",7,"standard"),s=o(r,"size",7,"s");var c={get label(){return t()},set label(e){t(e),b()},get appearance(){return n()},set appearance(e="standard"){n(e),b()},get size(){return s()},set size(e="s"){s(e),b()}},a=w(),l=h(a,!0);return x(a),u(()=>{z(a,1,k(["mc-number-badge",`mc-number-badge--${n()}`,`mc-number-badge--${s()}`]),"svelte-sb883"),_(l,t())}),v(d,a),p(c)}customElements.define("m-number-badge",i(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

package/dist/components/numberbadge/NumberBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberBadge.js","sources":["../../../src/components/numberbadge/NumberBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-number-badge' }} />\n\n<script lang=\"ts\">\n  /**\n   * A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.\n   */\n  interface Props {\n    /**\n     * Content of the badge.\n     */\n    label: number;\n    /**\n     * Allows to define the badge appearance.\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n\n    /**\n     * Allows to define the badge size.\n     */\n    size?: 's' | 'm';\n  }\n\n  let { label, appearance = 'standard', size = 's' }: Props = $props();\n</script>\n\n<div class={['mc-number-badge', `mc-number-badge--${appearance}`, `mc-number-badge--${size}`]}>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/number-badge';\n</style>\n"],"names":["label","$.prop","$$props","appearance","size"],"mappings":";;sjCAAA,oBAsBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,sGAAtB,WAAU,6CAAS,IAAG,wDAGrC,sCAAuCD,EAAU,CAAA,uBAAwBC,GAAI,yBACvFJ,GAAK,eAHR"}
+{"version":3,"file":"NumberBadge.js","sources":["../../../src/components/numberbadge/NumberBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-number-badge' }} />\n\n<script lang=\"ts\">\n  /**\n   * A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Content of the badge.\n     */\n    label: number;\n    /**\n     * Allows to define the badge appearance.\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n\n    /**\n     * Allows to define the badge size.\n     */\n    size?: 's' | 'm';\n  }\n\n  let { label, appearance = 'standard', size = 's', ...attrs }: Props = $props();\n</script>\n\n<div\n  class={['mc-number-badge', `mc-number-badge--${appearance}`, `mc-number-badge--${size}`]}\n  {...attrs}\n>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/number-badge';\n</style>\n"],"names":["label","$.prop","$$props","appearance","size","attrs","$.rest_props","div","root","text","$.child","$.reset","$.append","$$anchor"],"mappings":";;sjCAEA,oBAqBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,EAAKC,EAAKC,EAAAJ,EAAA,4KAAhC,WAAU,6CAAS,IAAG,YAGjDK,EAAAC,EAAA,IAAAD,eACS,sCAAuCJ,EAAU,CAAA,uBAAwBC,GAAI,OACjFC,yCAFL,IAAAI,EAAAC,EAAAH,EAAA,EAAA,EAAAI,OAAAA,EAAAJ,CAAA,YAIEP,EAAK,CAAA,CAAA,EAJPY,EAAAC,EAAAN,CAAA,MAFO"}

package/dist/components/numberbadge/NumberBadge.stories.d.ts

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

package/dist/components/numberbadge/NumberBadge.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberBadge.stories.d.ts","sourceRoot":"","sources":["../../../src/components/numberbadge/NumberBadge.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAqBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}
+{"version":3,"file":"NumberBadge.stories.d.ts","sourceRoot":"","sources":["../../../src/components/numberbadge/NumberBadge.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,sBAAsB,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAqBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}

package/dist/components/numberbadge/NumberBadge.stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import './NumberBadge.svelte';
 const meta = {
     title: 'Indicators/Number Badge',
     component: 'm-number-badge',

package/dist/components/numberbadge/NumberBadge.svelte

@@ -5,6 +5,7 @@
    * A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.
    */
   interface Props {
+    [key: string]: any;
     /**
      * Content of the badge.
      */
@@ -20,10 +21,13 @@
     size?: 's' | 'm';
   }
 
-  let { label, appearance = 'standard', size = 's' }: Props = $props();
+  let { label, appearance = 'standard', size = 's', ...attrs }: Props = $props();
 </script>
 
-<div class={['mc-number-badge', `mc-number-badge--${appearance}`, `mc-number-badge--${size}`]}>
+<div
+  class={['mc-number-badge', `mc-number-badge--${appearance}`, `mc-number-badge--${size}`]}
+  {...attrs}
+>
   {label}
 </div>
 

package/dist/components/numberbadge/NumberBadge.svelte.d.ts

@@ -2,6 +2,7 @@
  * A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.
  */
 interface Props {
+    [key: string]: any;
     /**
      * Content of the badge.
      */

package/dist/components/numberbadge/NumberBadge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/numberbadge/NumberBadge.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAE1D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAiBH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"NumberBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/numberbadge/NumberBadge.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAE1D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAiBH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/overlay/Overlay.js

@@ -1,4 +1,4 @@
-import{c as m,p,a as y,b as r,f as u,d as v,t as f,i as g,j as _,k as n,r as d,e as x,g as h}from"../../custom-element.js";import{s as k}from"../../slot.js";import{s as z}from"../../attributes.js";var O=u('<div><div role="dialog" tabindex="-1"><!></div></div>');const j={hash:"svelte-smp867",code:`/**
+import{c as x,p as k,a as z,b as v,t as O,f as d,g as j,h as w,d as b,j as c,k as p,l as f,r as u,n as B,o as D}from"../../custom-element.js";import{s as E}from"../../snippet.js";import{i as S}from"../../if.js";import{s as q}from"../../slot.js";import{s as A}from"../../attributes.js";var C=w('<div><div role="dialog" tabindex="-1"><!></div></div>');const F={hash:"svelte-smp867",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-overlay.svelte-smp867 {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-overlay.is-visible.svelte-smp867 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function w(o,e){p(e,!0),y(o,j);let s=r(e,"isvisible",7),a=r(e,"dialoglabel",7);var b={get isvisible(){return s()},set isvisible(l){s(l),n()},get dialoglabel(){return a()},set dialoglabel(l){a(l),n()}},i=O(),t=v(i),c=v(t);return k(c,e,"default",{}),d(t),d(i),f(()=>{x(i,1,h(["mc-overlay",s()&&"is-visible"]),"svelte-smp867"),z(t,"aria-labelledby",a())}),g(o,i),_(b)}customElements.define("m-overlay",m(w,{isvisible:{},dialoglabel:{}},["default"],[],!0));export{w as O};
+ */.mc-overlay.svelte-smp867 {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-overlay.is-visible.svelte-smp867 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function G(m,i){k(i,!0),z(m,F);let l=v(i,"isvisible",7),r=v(i,"dialoglabel",7),a=v(i,"children",7);var y={get isvisible(){return l()},set isvisible(e){l(e),c()},get dialoglabel(){return r()},set dialoglabel(e){r(e),c()},get children(){return a()},set children(e){a(e),c()}},t=C(),o=b(t),g=b(o);{var h=e=>{var s=p(),n=f(s);E(n,a),d(e,s)},_=e=>{var s=p(),n=f(s);q(n,i,"default",{},null),d(e,s)};S(g,e=>{a()?e(h):e(_,!1)})}return u(o),u(t),O(()=>{B(t,1,D(["mc-overlay",l()&&"is-visible"]),"svelte-smp867"),A(o,"aria-labelledby",r())}),d(m,t),j(y)}customElements.define("m-overlay",x(G,{isvisible:{attribute:"isvisible",reflect:!0,type:"Boolean"},dialoglabel:{},children:{}},["default"],[],!0));export{G as O};
 //# sourceMappingURL=Overlay.js.map

package/dist/components/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-overlay' }} />\n\n<script lang=\"ts\">\n  /**\n   * An overlay is a semi-transparent layer that appears on top of the main content, typically used to dim the background and focus user attention on a specific element. It is often combined with modals, popovers, or loading states to create a visual separation between the foreground and background. Overlays help prevent unintended interactions while keeping the primary content accessible.\n   *\n   * @slot default - Use this slot to insert a centered content inside the overlay.\n   */\n  interface Props {\n    /**\n     * Controls the visibility of the overlay.\n     */\n    isvisible?: boolean;\n    /**\n     * Accessible label for the overlay dialog.\n     */\n    dialoglabel: string;\n  }\n\n  let { isvisible, dialoglabel }: Props = $props();\n</script>\n\n<div class={['mc-overlay', isvisible && 'is-visible']}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-labelledby={dialoglabel}>\n    <slot />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/overlay';\n</style>\n"],"names":["isvisible","$.prop","$$props","dialoglabel"],"mappings":";;mYAAA,oBAmBQA,EAASC,EAAAC,EAAA,YAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,qMAGjB,aAAcF,KAAa,YAAY,CAAA,EAAA,eAAA,wBACAG,GAAW,eAH/D"}
+{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-overlay',\n    props: {\n      isvisible: { reflect: true, type: 'Boolean', attribute: 'isvisible' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  /**\n   * An overlay is a semi-transparent layer that appears on top of the main content, typically used to dim the background and focus user attention on a specific element. It is often combined with modals, popovers, or loading states to create a visual separation between the foreground and background. Overlays help prevent unintended interactions while keeping the primary content accessible.\n   *\n   * @slot default - Use this slot to insert a centered content inside the overlay.\n   */\n  interface Props {\n    /**\n     * Controls the visibility of the overlay.\n     */\n    isvisible?: boolean;\n    /**\n     * Accessible label for the overlay dialog.\n     */\n    dialoglabel: string;\n    /**\n     * Use this snippet to insert a centered content inside the overlay.\n     */\n    children?: Snippet;\n  }\n\n  let { isvisible, dialoglabel, children }: Props = $props();\n</script>\n\n<div class={['mc-overlay', isvisible && 'is-visible']}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-labelledby={dialoglabel}>\n    {#if children}\n      {@render children()}\n    {:else}\n      <slot />\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/overlay';\n</style>\n"],"names":["isvisible","$.prop","$$props","dialoglabel","children","div","root","div_1","$$render","consequent","alternate","$.set_class","$.clsx","$.set_attribute"],"mappings":";;mYASA,oBAsBQA,EAASC,EAAAC,EAAA,YAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAAEE,EAAQH,EAAAC,EAAA,WAAA,CAAA,iLAGvCG,EAAGC,EAAA,EACDC,IADFF,CAAG,MACDE,CAAG,kCAESH,CAAQ,0EADdA,EAAQ,EAAAI,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,aADdH,CAAG,IADLF,CAAG,SAAHM,EAAAN,EAAG,EAAAO,EAAA,CAAS,aAAcZ,KAAa,YAAY,CAAA,EAAA,eAAA,EACjDa,EAAAN,oBAAiDJ,GAAW,QAD9DE,CAAG,MAFI"}

package/dist/components/overlay/Overlay.stories.d.ts

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

package/dist/components/overlay/Overlay.stories.d.ts.map

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

package/dist/components/overlay/Overlay.stories.js

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './Overlay.svelte';
 const meta = {
     title: 'Overlay/Overlay',
     component: 'm-overlay',
@@ -25,7 +26,7 @@ const meta = {
         },
     },
     render: (args) => html `
-    <m-overlay isvisible=${ifDefined(args.isvisible)} dialoglabel=${ifDefined(args.dialoglabel)}>
+    <m-overlay ?isvisible=${args.isvisible} dialoglabel=${ifDefined(args.dialoglabel)}>
       ${unsafeHTML(ifDefined(args.default))}
     </m-overlay>
   `,