@mozaic-ds/web-components 1.3.0 → 1.4.0

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-modal' }} />\n\n<script lang=\"ts\">\n  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n  /**\n   * A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.\n   *\n   * @slot icon - Use this slot to insert an icon next to the title of the modal.\n   * @slot default - Use this slot to insert the content of the modal.\n   * @slot link - Use this slot to insert a link in the footer.\n   * @slot footer - Use this slot to insert buttons in the footer.\n   * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.\n   */\n  interface Props {\n    /**\n     * if `true`, display the modal.\n     */\n    open?: boolean;\n    /**\n     * Title of the modal.\n     */\n    title: string;\n    /**\n     * Description of the modal.\n     */\n    description?: string;\n    /**\n     * if `true`, display the close button.\n     */\n    closable?: boolean;\n  }\n\n  let { open, title, description, closable = true, ...attrs }: Props = $props();\n  let element: HTMLElement;\n\n  function onClose() {\n    open = false;\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  }\n</script>\n\n<section\n  class={['mc-modal', open && 'is-open']}\n  tabindex=\"-1\"\n  aria-labelledby=\"modalTitle\"\n  aria-hidden={!open}\n  bind:this={element}\n  {...attrs}\n>\n  <div class=\"mc-modal__dialog\" role=\"document\">\n    <header class=\"mc-modal__header\">\n      <span class=\"mc-modal__icon\">\n        <slot name=\"icon\" />\n      </span>\n      <h2 class=\"mc-modal__title\" id=\"modalTitle\">{title}</h2>\n      {#if closable}\n        <button\n          type=\"button\"\n          class=\"mc-modal__close mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Close\"\n          onclick={onClose}\n        >\n          <Cross24 class=\"mc-modal__close\" aria-hidden=\"true\" />\n        </button>\n      {/if}\n    </header>\n\n    <main class=\"mc-modal__body\">\n      {#if description}\n        <p>{description}</p>\n      {/if}\n      <slot />\n    </main>\n\n    <footer class=\"mc-modal__footer\">\n      <span class=\"mc-modal__link\">\n        <slot name=\"link\" />\n      </span>\n      <slot name=\"footer\" />\n    </footer>\n  </div>\n\n  <MOverlay isvisible={open} dialoglabel=\"modal\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/modal';\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-modal__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["open","$.prop","$$props","title","description","closable","attrs","$.rest_props","element","onClose","event","$$render","consequent","consequent_1","$.bind_this","section","$$value"],"mappings":";;;;;;;;;;;;;;2yWAAA,qBAiCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EAAEG,mBAAW,EAAI,EAAKC,EAAKC,EAAAL,EAAA,oFACrDM,EAEK,SAAAC,GAAU,CACjBT,EAAO,EAAK,EAEN,MAAAU,EAAK,IAAO,YAAY,eAC5B,OAAQV,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBQ,EAAQ,cAAcE,CAAK,CAC7B,yMAZ2C,GAAI,oCAgBvC,WAAYV,EAAI,GAAI,SAAS,8DAGvBA,EAAI,KAEdM,yKAaaG,sFALRJ,EAAQ,GAAAM,EAAAC,CAAA,2EAcPR,EAAW,CAAA,CAAA,kBADZA,EAAW,GAAAO,EAAAE,CAAA,qLAcCb,EAAI,8BApCdc,EAAAC,EAAAC,GAAAR,QAAAA,CAAO,YAQ+BL,EAAK,CAAA,CAAA,aAfxD"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-modal',\n    props: {\n      open: { reflect: true, type: 'Boolean', attribute: 'open' },\n      closable: { reflect: true, type: 'Boolean', attribute: 'closable' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import 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,6 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import '@mozaic-ds/icons-svelte/svelte/InfoCircle32/InfoCircle32.svelte';
-import '@mozaic-ds/icons-svelte/svelte/ExternalLink24/ExternalLink24.svelte';
+import '@mozaic-ds/icons-svelte/components/InfoCircle32/InfoCircle32.svelte';
+import '@mozaic-ds/icons-svelte/components/ExternalLink24/ExternalLink24.svelte';
 import './Modal.svelte';
 import '../button/Button.svelte';
 import '../link/Link.svelte';

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

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

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

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

package/dist/components/modal/Modal.svelte

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

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', ...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"],"mappings":";;sjCAAA,oBAsBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,EAAKC,EAAKC,EAAAJ,EAAA,4KAAhC,WAAU,6CAAS,IAAG,mCAIxC,sCAAuCC,EAAU,CAAA,uBAAwBC,GAAI,OACjFC,6EAEHL,EAAK,CAAA,CAAA,aANR"}
+{"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.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.
      */

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,h as g,i as _,j as n,e as d,l as h,m as x}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(()=>{h(i,1,x(["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.js

@@ -26,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>
   `,

package/dist/components/overlay/Overlay.svelte

@@ -1,6 +1,14 @@
-<svelte:options customElement={{ tag: 'm-overlay' }} />
+<svelte:options
+  customElement={{
+    tag: 'm-overlay',
+    props: {
+      isvisible: { reflect: true, type: 'Boolean', attribute: 'isvisible' },
+    },
+  }}
+/>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   /**
    * 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.
    *
@@ -15,14 +23,22 @@
      * Accessible label for the overlay dialog.
      */
     dialoglabel: string;
+    /**
+     * Use this snippet to insert a centered content inside the overlay.
+     */
+    children?: Snippet;
   }
 
-  let { isvisible, dialoglabel }: Props = $props();
+  let { isvisible, dialoglabel, children }: Props = $props();
 </script>
 
 <div class={['mc-overlay', isvisible && 'is-visible']}>
   <div role="dialog" tabindex="-1" aria-labelledby={dialoglabel}>
-    <slot />
+    {#if children}
+      {@render children()}
+    {:else}
+      <slot />
+    {/if}
   </div>
 </div>
 

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

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 /**
  * 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.
  *
@@ -12,6 +13,10 @@ interface Props {
      * Accessible label for the overlay dialog.
      */
     dialoglabel: string;
+    /**
+     * Use this snippet to insert a centered content inside the overlay.
+     */
+    children?: 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/overlay/Overlay.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/Overlay.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;CACrB;AAmBH,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,OAAO;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Overlay.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/Overlay.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEpC;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6BH,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,OAAO;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/components/overlay/README.md

@@ -8,6 +8,7 @@ An overlay is a semi-transparent layer that appears on top of the main content,
 |------|-------------|------|---------|
 | `isvisible` | Controls the visibility of the overlay. | `boolean` |   |
 | `dialoglabel*` | Accessible label for the overlay dialog. | `string` |   |
+| `children` | Use this snippet to insert a centered content inside the overlay. | `Snippet` |   |
 
 ## Slots
 

package/dist/components/pagination/Pagination.js

@@ -1,14 +1,14 @@
-import{c as D,p as I,b as i,A as U,t as _,h,i as S,j as o,l as V,m as W,w as ce,a as de,x as y,k as ue,f as z,d as N,s as K,n as l,D as k,e as w,y as B,g as O}from"../../custom-element.js";import{i as M}from"../../if.js";import{e as fe,i as ve}from"../../each.js";import{s as x,b as X,c as me,e as ge}from"../../attributes.js";import"../../legacy.js";import{B as Q}from"../button/Button.js";import{I as T}from"../iconbutton/IconButton.js";import"../../slot.js";import"../loader/Loader.js";var be=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function j(b,a){I(a,!1);let f=i(a,"id",12,void 0),d=i(a,"style",12,void 0),c=i(a,"className",12,void 0),u=i(a,"fill",12,void 0),v=i(a,"size",12,"1.5rem");var m={get id(){return f()},set id(t){f(t),o()},get style(){return d()},set style(t){d(t),o()},get className(){return c()},set className(t){c(t),o()},get fill(){return u()},set fill(t){u(t),o()},get size(){return v()},set size(t){v(t),o()}},n=be();return _(()=>{x(n,"id",f()),X(n,d()),V(n,0,W(c())),x(n,"fill",u())}),h(b,n),S(m)}customElements.define("chevron-left-24",D(j,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var pe=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414"></path></svg>');function A(b,a){I(a,!1);let f=i(a,"id",12,void 0),d=i(a,"style",12,void 0),c=i(a,"className",12,void 0),u=i(a,"fill",12,void 0),v=i(a,"size",12,"1.5rem");var m={get id(){return f()},set id(t){f(t),o()},get style(){return d()},set style(t){d(t),o()},get className(){return c()},set className(t){c(t),o()},get fill(){return u()},set fill(t){u(t),o()},get size(){return v()},set size(t){v(t),o()}},n=pe();return _(()=>{x(n,"id",f()),X(n,d()),V(n,0,W(c())),x(n,"fill",u())}),h(b,n),S(m)}customElements.define("chevron-right-24",D(A,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var he=z("<option> </option>"),xe=z('<div class="mc-pagination__field"><select class="mc-select mc-pagination__select svelte-19eta05"></select></div>'),we=z('<span class="mc-pagination__label svelte-19eta05" aria-current="page"> </span>'),_e=z('<nav class="mc-pagination svelte-19eta05" aria-label="pagination"><!> <!> <!></nav>');const ye={hash:"svelte-19eta05",code:`/**
+import{u as ae,c as re,p as oe,a as le,b as n,w as p,m as se,s as D,f as b,g as ie,h as _,d as h,j as c,q as t,r as v,t as P,v as E,e as F,x}from"../../custom-element.js";import{i as B}from"../../if.js";import{e as ne,i as ce}from"../../each.js";import{s as R,c as de,e as me}from"../../attributes.js";import{m as $,f as G}from"../../Condition20.js";import{B as H}from"../button/Button.js";import{I as J}from"../iconbutton/IconButton.js";import"../../snippet.js";import"../../slot.js";import"../loader/Loader.js";var ue=_("<option> </option>"),ve=_('<div class="mc-pagination__field"><select class="mc-select mc-pagination__select svelte-19eta05"></select></div>'),ge=_('<span class="mc-pagination__label svelte-19eta05" aria-current="page"> </span>'),fe=_('<nav class="mc-pagination svelte-19eta05" aria-label="pagination"><!> <!> <!></nav>');const pe={hash:"svelte-19eta05",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-pagination.svelte-19eta05 {align-items:center;display:flex;justify-content:center;gap:0.5rem;}.mc-pagination__label.svelte-19eta05 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}
 
 /* stylelint-disable string-no-newline */.mc-select.svelte-19eta05 {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);height:3rem;padding:0 3rem 0 0.75rem;background-position:right 1rem center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;background-repeat:no-repeat;background-size:1rem;border-radius:var(--border-radius-s, 0.25rem);}.mc-select.svelte-19eta05:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-select.svelte-19eta05:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-select.svelte-19eta05:disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}
 
-/* stylelint-enable string-no-newline */`};function Ne(b,a){I(a,!0),de(b,ye);let f=i(a,"id",7),d=i(a,"value",15,1),c=i(a,"total",7,10),u=i(a,"compact",7),v=i(a,"selectLabel",7,"Page selector"),m=i(a,"prefixlabel",7,"Page"),n=i(a,"pagelabel",7,"of"),t=y(ue(Number(d())));const P=y(()=>l(t)<=1),L=y(()=>l(t)>=c()),Y=y(()=>Array.from({length:c()},(e,s)=>s+1));function F(){l(P)()||B(t,Number(l(t))-1)}function R(){l(L)()||B(t,Number(l(t))+1)}function Z(e){const s=Number(e.target.value);d(s)}var $={get id(){return f()},set id(e){f(e),o()},get value(){return d()},set value(e=1){d(e),o()},get total(){return c()},set total(e=10){c(e),o()},get compact(){return u()},set compact(e){u(e),o()},get selectLabel(){return v()},set selectLabel(e="Page selector"){v(e),o()},get prefixlabel(){return m()},set prefixlabel(e="Page"){m(e),o()},get pagelabel(){return n()},set pagelabel(e="of"){n(e),o()}},C=_e(),q=N(C);{var ee=e=>{{let s=k(()=>l(P)());Q(e,{iconposition:"only","aria-label":"Previous page",get disabled(){return l(s)},onclick:F,$$slots:{icon:(r,g)=>{j(r,{slot:"icon"})}}})}},te=e=>{{let s=k(()=>l(P)());T(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:F,$$slots:{icon:(r,g)=>{j(r,{slot:"icon"})}}})}};M(q,e=>{u()?e(te,!1):e(ee)})}var G=K(q,2);{var ae=e=>{var s=xe(),r=N(s);r.__change=Z,fe(r,21,()=>l(Y)(),ve,(g,E)=>{var p=he(),oe=N(p);w(p);var H={};_((ne,J)=>{ge(p,ne),O(oe,`${m()??""}
-            ${l(E)??""}
-            ${n()??""}
-            ${c()??""}`),H!==(H=J)&&(p.value=(p.__value=J)??"")},[()=>Number(l(E))==Number(l(t)),()=>Number(l(E))]),h(g,p)}),w(r),w(s),_(()=>{x(r,"id",f()),x(r,"aria-label",v()),r.disabled=c()<=1}),me(r,()=>l(t),g=>B(t,g)),h(e,s)},le=e=>{var s=we(),r=N(s);w(s),_(()=>O(r,`${m()??""}
-      ${d()??""}
-      ${n()??""}
-      ${c()??""}`)),h(e,s)};M(G,e=>{u()?e(le,!1):e(ae)})}var se=K(G,2);{var re=e=>{{let s=k(()=>l(L)());Q(e,{iconposition:"only","aria-label":"Next page",get disabled(){return l(s)},onclick:R,$$slots:{icon:(r,g)=>{A(r,{slot:"icon"})}}})}},ie=e=>{{let s=k(()=>l(L)());T(e,{outlined:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:R,$$slots:{icon:(r,g)=>{A(r,{slot:"icon"})}}})}};M(se,e=>{u()?e(ie,!1):e(re)})}return w(C),h(b,C),S($)}ce(["change"]);customElements.define("m-pagination",D(Ne,{id:{},value:{},total:{},compact:{},selectLabel:{},prefixlabel:{},pagelabel:{}},[],[],!0));
+/* stylelint-enable string-no-newline */`};function be(z,s){oe(s,!0),le(z,pe);let w=n(s,"id",7),m=n(s,"value",15,1),i=n(s,"total",7,10),u=n(s,"compact",7),k=n(s,"selectLabel",7,"Page selector"),g=n(s,"prefixlabel",7,"Page"),f=n(s,"pagelabel",7,"of"),l=p(se(Number(m())));const y=p(()=>t(l)<=1),C=p(()=>t(l)>=i()),K=p(()=>Array.from({length:i()},(e,a)=>a+1));function j(){t(y)()||E(l,Number(t(l))-1)}function I(){t(C)()||E(l,Number(t(l))+1)}function O(e){const a=Number(e.target.value);m(a)}var Q={get id(){return w()},set id(e){w(e),c()},get value(){return m()},set value(e=1){m(e),c()},get total(){return i()},set total(e=10){i(e),c()},get compact(){return u()},set compact(e){u(e),c()},get selectLabel(){return k()},set selectLabel(e="Page selector"){k(e),c()},get prefixlabel(){return g()},set prefixlabel(e="Page"){g(e),c()},get pagelabel(){return f()},set pagelabel(e="of"){f(e),c()}},L=fe(),M=h(L);{var T=e=>{{const a=o=>{$(o,{})};let r=x(()=>t(y)());H(e,{iconposition:"only","aria-label":"Previous page",get disabled(){return t(r)},onclick:j,icon:a,$$slots:{icon:!0}})}},U=e=>{{const a=o=>{$(o,{})};let r=x(()=>t(y)());J(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return t(r)},onclick:j,icon:a,$$slots:{icon:!0}})}};B(M,e=>{u()?e(U,!1):e(T)})}var S=D(M,2);{var V=e=>{var a=ve(),r=h(a);r.__change=O,ne(r,21,()=>t(K)(),ce,(o,N)=>{var d=ue(),ee=h(d);v(d);var q={};P((te,A)=>{me(d,te),F(ee,`${g()??""}
+            ${t(N)??""}
+            ${f()??""}
+            ${i()??""}`),q!==(q=A)&&(d.value=(d.__value=A)??"")},[()=>Number(t(N))==Number(t(l)),()=>Number(t(N))]),b(o,d)}),v(r),v(a),P(()=>{R(r,"id",w()),R(r,"aria-label",k()),r.disabled=i()<=1}),de(r,()=>t(l),o=>E(l,o)),b(e,a)},W=e=>{var a=ge(),r=h(a);v(a),P(()=>F(r,`${g()??""}
+      ${m()??""}
+      ${f()??""}
+      ${i()??""}`)),b(e,a)};B(S,e=>{u()?e(W,!1):e(V)})}var X=D(S,2);{var Y=e=>{{const a=o=>{G(o,{})};let r=x(()=>t(C)());H(e,{iconposition:"only","aria-label":"Next page",get disabled(){return t(r)},onclick:I,icon:a,$$slots:{icon:!0}})}},Z=e=>{{const a=o=>{G(o,{})};let r=x(()=>t(C)());J(e,{outlined:!0,"aria-label":"Next page",get disabled(){return t(r)},onclick:I,icon:a,$$slots:{icon:!0}})}};B(X,e=>{u()?e(Z,!1):e(Y)})}return v(L),b(z,L),ie(Q)}ae(["change"]);customElements.define("m-pagination",re(be,{compact:{attribute:"compact",reflect:!0,type:"Boolean"},id:{},value:{},total:{},selectLabel:{},prefixlabel:{},pagelabel:{}},[],[],!0));
 //# sourceMappingURL=Pagination.js.map

package/dist/components/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronLeft24/ChevronLeft24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronRight24/ChevronRight24.svelte","../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'chevron-left-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'chevron-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-pagination',\n  }}\n/>\n\n<script lang=\"ts\">\n  import ChevronLeft24 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';\n  import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  /**\n   * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pagination.\n     */\n    id: string;\n    /**\n     * The current value of the selected page.\n     */\n    value: number;\n    /**\n     * If `true`, display a compact version without the select.\n     */\n    compact?: boolean;\n    /**\n     * Total number of pages.\n     */\n    total?: number;\n    /**\n     * Accessible label for the select of the pagination.\n     */\n    selectLabel?: string;\n    /**\n     * Word displayed before the current page number.\n     */\n    prefixlabel?: string;\n    /**\n     * Word displayed between the current page number and total page number.\n     */\n    pagelabel?: string;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    total = 10,\n    compact,\n    selectLabel = 'Page selector',\n    prefixlabel = 'Page',\n    pagelabel = 'of',\n  }: Props = $props();\n\n  let selected = $state(Number(value));\n\n  const isFirstPage = $state(() => selected <= 1);\n  const isLastPage = $state(() => selected >= total);\n\n  const pages = $state(() => Array.from({ length: total }, (_, i) => i + 1));\n\n  function previous() {\n    if (!isFirstPage()) {\n      selected = Number(selected) - 1;\n    }\n  }\n\n  function next() {\n    if (!isLastPage()) {\n      selected = Number(selected) + 1;\n    }\n  }\n\n  function onSelectChange(event: Event) {\n    const selected = Number((event.target as HTMLSelectElement).value);\n    value = selected;\n  }\n</script>\n\n<nav class=\"mc-pagination\" aria-label=\"pagination\">\n  {#if !compact}\n    <Button\n      iconposition=\"only\"\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 slot=\"icon\" />\n    </Button>\n  {:else}\n    <IconButton outlined aria-label=\"Previous page\" disabled={isFirstPage()} onclick={previous}>\n      <ChevronLeft24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n\n  {#if !compact}\n    <div class=\"mc-pagination__field\">\n      <select\n        {id}\n        class=\"mc-select mc-pagination__select\"\n        aria-label={selectLabel}\n        disabled={total <= 1}\n        bind:value={selected}\n        onchange={onSelectChange}\n      >\n        {#each pages() as page, index (index)}\n          <option value={Number(page)} selected={Number(page) == Number(selected)}>\n            {prefixlabel}\n            {page}\n            {pagelabel}\n            {total}\n          </option>\n        {/each}\n      </select>\n    </div>\n  {:else}\n    <span class=\"mc-pagination__label\" aria-current=\"page\">\n      {prefixlabel}\n      {value}\n      {pagelabel}\n      {total}\n    </span>\n  {/if}\n\n  {#if !compact}\n    <Button iconposition=\"only\" aria-label=\"Next page\" disabled={isLastPage()} onclick={next}>\n      <ChevronRight24 slot=\"icon\" />\n    </Button>\n  {:else}\n    <IconButton outlined aria-label=\"Next page\" disabled={isLastPage()} onclick={next}>\n      <ChevronRight24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pagination';\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","style","className","fill","size","$.prop","$$props","value","total","compact","selectLabel","prefixlabel","pagelabel","selected","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","onSelectChange","event","$$render","alternate","consequent","$.each","select","page","$.bind_select_value","$$value","alternate_1","consequent_1","alternate_2","consequent_2"],"mappings":"kxBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,+YCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E;;;;;;2DCPA,sBA8CIH,EAAEK,EAAAC,EAAA,KAAA,CAAA,EACFC,iBAAkB,CAAC,EACnBC,gBAAQ,EAAE,EACVC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EACPI,sBAAc,eAAe,EAC7BC,sBAAc,MAAM,EACpBC,oBAAY,IAAI,EAGdC,EAAQC,EAAAC,GAAU,OAAOR,EAAK,CAAA,CAAA,CAAA,QAE5BS,EAAWF,EAAA,IAAAG,EAAgBJ,CAAQ,GAAI,CAAC,EACxCK,EAAUJ,EAAA,IAAAG,EAAgBJ,CAAQ,GAAIL,GAAK,EAE3CW,EAAKL,EAAA,IAAgB,MAAM,MAAO,OAAQN,EAAK,CAAA,EAAA,CAAKY,EAAGC,IAAMA,EAAI,CAAC,CAAA,EAE/D,SAAAC,GAAW,CACbL,EAAAD,CAAW,KACdO,EAAAV,EAAW,OAAMI,EAACJ,CAAQ,GAAI,CAAC,CAEnC,CAES,SAAAW,GAAO,CACTP,EAAAC,CAAU,KACbK,EAAAV,EAAW,OAAMI,EAACJ,CAAQ,GAAI,CAAC,CAEnC,UAESY,EAAeC,EAAc,CAC9B,MAAAb,EAAW,OAAQa,EAAM,OAA6B,KAAK,EACjEnB,EAAQM,CAAQ,CAClB,qFA9BoB,EAAC,+CACX,GAAE,8GAEI,gBAAe,2DACf,OAAM,uDACR,KAAI,qDAiCJG,CAAW,EAAA,CAAA,4FACZM,uEAK+CN,CAAW,EAAA,CAAA,oFAAaM,yDAV9Eb,EAAO,EAAAkB,EAAAC,GAAA,EAAA,EAAAD,EAAAE,EAAA,0DAuBGJ,EAEHK,GAAAC,EAAA,GAAA,IAAAd,EAAAE,CAAK,UAAMa,IAAI,8DAEjBrB,EAAW,GAAA,EAAA;AAAA,gBACXqB,CAAI,GAAA,EAAA;AAAA,cACJpB,EAAS,GAAA,EAAA;AAAA,cACTJ,EAAK,GAAA,EAAA,EAAA,2CAJ+B,IAAA,OAAMS,EAACe,CAAI,CAAA,GAAK,SAAOnB,CAAQ,CAAA,EAAvD,IAAA,SAAOmB,CAAI,CAAA,6DANhBtB,GAAW,EACbqB,EAAA,SAAAvB,EAAK,GAAI,IACPyB,GAAAF,EAAA,IAAAd,EAAAJ,CAAQ,OAARA,EAAQqB,CAAA,CAAA,qDAerBvB,EAAW,GAAA,EAAA;AAAA,QACXJ,EAAK,GAAA,EAAA;AAAA,QACLK,EAAS,GAAA,EAAA;AAAA,QACTJ,EAAK,GAAA,EAAA,EAAA,CAAA,kBAzBJC,EAAO,EAAAkB,EAAAQ,GAAA,EAAA,EAAAR,EAAAS,EAAA,6CA8BkDlB,CAAU,EAAA,CAAA,wFAAaM,uEAI9BN,CAAU,EAAA,CAAA,gFAAaM,0DALzEf,EAAO,EAAAkB,EAAAU,GAAA,EAAA,EAAAV,EAAAW,EAAA,2BA/Cf","x_google_ignoreList":[0,1]}
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-pagination',\n    props: {\n      compact: { reflect: true, type: 'Boolean', attribute: 'compact' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { ChevronLeft24, ChevronRight24 } from '@mozaic-ds/icons-svelte';\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  /**\n   * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pagination.\n     */\n    id: string;\n    /**\n     * The current value of the selected page.\n     */\n    value: number;\n    /**\n     * If `true`, display a compact version without the select.\n     */\n    compact?: boolean;\n    /**\n     * Total number of pages.\n     */\n    total?: number;\n    /**\n     * Accessible label for the select of the pagination.\n     */\n    selectLabel?: string;\n    /**\n     * Word displayed before the current page number.\n     */\n    prefixlabel?: string;\n    /**\n     * Word displayed between the current page number and total page number.\n     */\n    pagelabel?: string;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    total = 10,\n    compact,\n    selectLabel = 'Page selector',\n    prefixlabel = 'Page',\n    pagelabel = 'of',\n  }: Props = $props();\n\n  let selected = $state(Number(value));\n\n  const isFirstPage = $state(() => selected <= 1);\n  const isLastPage = $state(() => selected >= total);\n\n  const pages = $state(() => Array.from({ length: total }, (_, i) => i + 1));\n\n  function previous() {\n    if (!isFirstPage()) {\n      selected = Number(selected) - 1;\n    }\n  }\n\n  function next() {\n    if (!isLastPage()) {\n      selected = Number(selected) + 1;\n    }\n  }\n\n  function onSelectChange(event: Event) {\n    const selected = Number((event.target as HTMLSelectElement).value);\n    value = selected;\n  }\n</script>\n\n<nav class=\"mc-pagination\" aria-label=\"pagination\">\n  {#if !compact}\n    <Button\n      iconposition=\"only\"\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      {#snippet icon()}\n        <ChevronLeft24 />\n      {/snippet}\n    </Button>\n  {:else}\n    <IconButton outlined aria-label=\"Previous page\" disabled={isFirstPage()} onclick={previous}>\n      {#snippet icon()}\n        <ChevronLeft24 />\n      {/snippet}\n    </IconButton>\n  {/if}\n\n  {#if !compact}\n    <div class=\"mc-pagination__field\">\n      <select\n        {id}\n        class=\"mc-select mc-pagination__select\"\n        aria-label={selectLabel}\n        disabled={total <= 1}\n        bind:value={selected}\n        onchange={onSelectChange}\n      >\n        {#each pages() as page, index (index)}\n          <option value={Number(page)} selected={Number(page) == Number(selected)}>\n            {prefixlabel}\n            {page}\n            {pagelabel}\n            {total}\n          </option>\n        {/each}\n      </select>\n    </div>\n  {:else}\n    <span class=\"mc-pagination__label\" aria-current=\"page\">\n      {prefixlabel}\n      {value}\n      {pagelabel}\n      {total}\n    </span>\n  {/if}\n\n  {#if !compact}\n    <Button iconposition=\"only\" aria-label=\"Next page\" disabled={isLastPage()} onclick={next}>\n      {#snippet icon()}\n        <ChevronRight24 />\n      {/snippet}\n    </Button>\n  {:else}\n    <IconButton outlined aria-label=\"Next page\" disabled={isLastPage()} onclick={next}>\n      {#snippet icon()}\n        <ChevronRight24 />\n      {/snippet}\n    </IconButton>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pagination';\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","$.prop","$$props","value","total","compact","selectLabel","prefixlabel","pagelabel","selected","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","onSelectChange","event","nav","root","icon","$$anchor","ChevronLeft24","Button","IconButton","$$render","alternate","consequent","div","root_5","select","$.child","page","option","root_6","$0","$1","$.reset","$.set_attribute","$$value","span","root_7","alternate_1","consequent_1","ChevronRight24","alternate_2","consequent_2"],"mappings":";;;;;;2DASA,uBAuCIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,iBAAkB,CAAC,EACnBC,gBAAQ,EAAE,EACVC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EACPI,sBAAc,eAAe,EAC7BC,sBAAc,MAAM,EACpBC,oBAAY,IAAI,EAGdC,EAAWC,EAAMC,GAAC,OAAOR,EAAK,CAAA,CAAA,CAAA,EAE5B,MAAAS,EAAcF,EAAM,IAAAG,EAAOJ,CAAQ,GAAI,CAAC,EACxCK,EAAaJ,EAAM,IAAAG,EAAOJ,CAAQ,GAAIL,GAAK,EAE3CW,EAAQL,EAAM,IAAO,MAAM,KAAI,CAAG,OAAQN,EAAK,IAAKY,EAAGC,IAAMA,EAAI,CAAC,CAAA,EAE/D,SAAAC,GAAW,CACbL,EAAAD,CAAW,KACdO,EAAAV,EAAW,OAAMI,EAACJ,CAAQ,GAAI,CAAC,CAEnC,CAES,SAAAW,GAAO,CACTP,EAAAC,CAAU,KACbK,EAAAV,EAAW,OAAMI,EAACJ,CAAQ,GAAI,CAAC,CAEnC,UAESY,EAAeC,EAAc,CAC9B,MAAAb,EAAW,OAAQa,EAAM,OAA6B,KAAK,EACjEnB,EAAQM,CAAQ,CAClB,qFA9BoB,EAAC,+CACX,GAAE,8GAEI,gBAAe,2DACf,OAAM,uDACR,KAAI,YA4BnBc,EAAGC,GAAA,MAAHD,CAAG,oBAQYE,EAAIC,GAAA,CACXC,EAAaD,EAAA,EAAA,iBAJNd,CAAW,EAAA,CAAA,EAHtBgB,EAAAF,EAAA,sFAIUR,EAEC,KAAAO,qCAMAA,EAAIC,GAAA,CACXC,EAAaD,EAAA,EAAA,iBAFwCd,CAAW,EAAA,CAAA,EAApEiB,EAAUH,EAAA,8EAAuER,EACtE,KAAAO,gCAbRpB,EAAO,EAAAyB,EAAAC,EAAA,EAAA,EAAAD,EAAAE,CAAA,gCAoBVC,EAAGC,GAAA,EACDC,EAAAC,EADFH,CAAG,EACDE,EAMC,SAAUd,KANXc,EAAA,GAAA,IAAAtB,EAQQE,CAAK,UAAMsB,IAAI,KACnBC,EAAMC,GAAA,OAAND,CAAM,IAANA,CAAM,yBAANA,EAAME,EAAA,UACJjC,EAAW,GAAA,EAAA;AAAA,gBACX8B,CAAI,GAAA,EAAA;AAAA,cACJ7B,EAAS,GAAA,EAAA;AAAA,cACTJ,EAAK,GAAA,EAAA,EAAA,cAJPkC,SAAAA,EAAM,QAAAG,IAAA,MAAgC,IAAA,OAAM5B,EAACwB,CAAI,CAAA,GAAK,SAAO5B,CAAQ,CAAA,EAAvD,IAAA,SAAO4B,CAAI,CAAA,QAAzBC,CAAM,IATVI,EAAAP,CAAA,IADFF,CAAG,SACDU,EAAAR,EAAA,KACEnC,GAAE,EADJ2C,EAAAR,EAAA,aAGa7B,GAAW,EAHxB6B,EAAA,SAIW/B,EAAK,GAAI,OAJpB+B,EAAA,IAAAtB,EAKaJ,CAAQ,OAARA,EAAQmC,CAAA,CAAA,MANvBX,CAAG,aAoBHY,EAAIC,GAAA,MAAJD,CAAI,IAAJA,CAAI,eACFtC,EAAW,GAAA,EAAA;AAAA,QACXJ,EAAK,GAAA,EAAA;AAAA,QACLK,EAAS,GAAA,EAAA;AAAA,QACTJ,EAAK,GAAA,EAAA,EAAA,CAAA,MAJPyC,CAAI,WArBDxC,EAAO,EAAAyB,EAAAiB,EAAA,EAAA,EAAAjB,EAAAkB,CAAA,mCA+BCvB,EAAIC,GAAA,CACXuB,EAAcvB,EAAA,EAAA,iBAF0CZ,CAAU,EAAA,CAAA,EAAtEc,EAAMF,EAAA,kFAA6EN,EACxE,KAAAK,qCAMAA,EAAIC,GAAA,CACXuB,EAAcvB,EAAA,EAAA,iBAFmCZ,CAAU,EAAA,CAAA,EAA/De,EAAUH,EAAA,0EAAkEN,EACjE,KAAAK,gCARRpB,EAAO,EAAAyB,EAAAoB,EAAA,EAAA,EAAApB,EAAAqB,CAAA,aAjDd5B,CAAG,MAAHA,CAAG,OAFI"}

package/dist/components/pagination/Pagination.stories.js

@@ -14,7 +14,7 @@ const meta = {
     <m-pagination
       id=${ifDefined(args.id)}
       value=${ifDefined(args.value)}
-      compact=${ifDefined(args.compact)}
+      ?compact=${args.compact}
       total=${ifDefined(args.total)}
       selectLabel=${ifDefined(args.selectLabel)}
       prefixlabel=${ifDefined(args.prefixlabel)}

package/dist/components/pagination/Pagination.svelte

@@ -1,12 +1,14 @@
 <svelte:options
   customElement={{
     tag: 'm-pagination',
+    props: {
+      compact: { reflect: true, type: 'Boolean', attribute: 'compact' },
+    },
   }}
 />
 
 <script lang="ts">
-  import ChevronLeft24 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';
-  import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';
+  import { ChevronLeft24, ChevronRight24 } from '@mozaic-ds/icons-svelte';
   import Button from '../button/Button.svelte';
   import IconButton from '../iconbutton/IconButton.svelte';
   /**
@@ -86,11 +88,15 @@
       disabled={isFirstPage()}
       onclick={previous}
     >
-      <ChevronLeft24 slot="icon" />
+      {#snippet icon()}
+        <ChevronLeft24 />
+      {/snippet}
     </Button>
   {:else}
     <IconButton outlined aria-label="Previous page" disabled={isFirstPage()} onclick={previous}>
-      <ChevronLeft24 slot="icon" />
+      {#snippet icon()}
+        <ChevronLeft24 />
+      {/snippet}
     </IconButton>
   {/if}
 
@@ -125,11 +131,15 @@
 
   {#if !compact}
     <Button iconposition="only" aria-label="Next page" disabled={isLastPage()} onclick={next}>
-      <ChevronRight24 slot="icon" />
+      {#snippet icon()}
+        <ChevronRight24 />
+      {/snippet}
     </Button>
   {:else}
     <IconButton outlined aria-label="Next page" disabled={isLastPage()} onclick={next}>
-      <ChevronRight24 slot="icon" />
+      {#snippet icon()}
+        <ChevronRight24 />
+      {/snippet}
     </IconButton>
   {/if}
 </nav>

package/dist/components/pagination/Pagination.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAQE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+FH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAOE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyGH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}