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

package/dist/components/modal/README.md

@@ -0,0 +1,28 @@
+# `m-modal`
+
+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.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `open` | if `true`, display the modal. | `boolean` |   |
+| `title*` | Title of the modal. | `string` |   |
+| `description` | Description of the modal. | `string` |   |
+| `closable` | if `true`, display the close button. | `boolean` | `true` |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `icon` | Use this slot to insert an icon next to the title of the modal. |
+| `default` | Use this slot to insert the content of the modal. |
+| `link` | Use this slot to insert a link in the footer. |
+| `footer` | Use this slot to insert buttons in the footer. |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `update:open` | Fired when the open state changes. | `CustomEvent<boolean>` |
+

package/dist/components/numberbadge/NumberBadge.js

@@ -1,7 +1,4 @@
-import{c as u,p as m,a as b,b as o,f as g,t as p,u as v,e as h,g as j,h as z,i as x,j as i,d as y,r as _}from"../../custom-element.js";var w=g("<div> </div>");const k={hash:"svelte-1o1cjvu",code:`/**
+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:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-number-badge.svelte-1o1cjvu {color:#ffffff;background-color:#464e63;height:1rem;min-width:1rem;padding-inline:0.125rem;font-size:0.625rem;border-radius:1rem;font-weight:600;display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;line-height:1;}.mc-number-badge--m.svelte-1o1cjvu {height:1.5rem;min-width:1.5rem;padding-inline:0.25rem;font-size:0.75rem;}.mc-number-badge--accent.svelte-1o1cjvu {color:#ffffff;background-color:#117f03;}.mc-number-badge--danger.svelte-1o1cjvu {color:#ffffff;background-color:#c61112;}.mc-number-badge--inverse.svelte-1o1cjvu {color:#464e63;background-color:#ffffff;}`};function D(l,a){m(a,!0),b(l,k);let n=o(a,"label",7,""),t=o(a,"appearance",7,"standard"),r=o(a,"size",7,"s");function d(e){const c=["mc-number-badge"];return t()&&c.push(`mc-number-badge--${t()}`),r()&&c.push(`mc-number-badge--${r()}`),c.join(" ")}var s=w(),f=y(s,!0);return _(s),p(e=>{h(s,1,e,"svelte-1o1cjvu"),j(f,n())},[()=>v(d(t()))]),z(l,s),x({get label(){return n()},set label(e=""){n(e),i()},get appearance(){return t()},set appearance(e="standard"){t(e),i()},get size(){return r()},set size(e="s"){r(e),i()}})}customElements.define("m-number-badge",u(D,{label:{},appearance:{},size:{}},[],[],!0));export{D 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(--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};
 //# 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  import type { BadgeStyle, BadgeSize } from './NumberBadge.types';\n  interface Props {\n    label: string;\n    appearance: BadgeStyle;\n    size: BadgeSize;\n  }\n\n  let { label = '', appearance = 'standard', size = 's' }: Props = $props();\n\n  function setClasses(style: BadgeStyle) {\n    const classes = ['mc-number-badge'];\n\n    if (appearance) {\n      classes.push(`mc-number-badge--${appearance}`);\n    }\n\n    if (size) {\n      classes.push(`mc-number-badge--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div class={setClasses(appearance)}>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/number-badge';\n</style>\n"],"names":["label","appearance","size","setClasses","style","classes","$.clsx"],"mappings":";;;;;0oBAAA,gBAUQ,IAAAA,gBAAQ,EAAE,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,WAE5CC,EAAWC,EAAmB,CAC/B,MAAAC,GAAW,iBAAiB,EAE9B,OAAAJ,EAAU,GACZI,EAAQ,KAAI,oBAAqBJ,EAAU,CAAA,EAAA,EAGzCC,EAAI,GACNG,EAAQ,KAAI,oBAAqBH,EAAI,CAAA,EAAA,EAGhCG,EAAQ,KAAK,GAAG,CACzB,qEAICL,GAAK,GADI,CAAA,IAAAM,EAAAH,EAAWF,EAAU,CAAA,CAAA,CAAA,iDAjBjB,GAAE,yDAAe,WAAU,6CAAS,IAAG,YAevD"}
+{"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\n  class={[\n    'mc-number-badge',\n    `mc-number-badge--${appearance}`,\n    `mc-number-badge--${size}`,\n  ]}\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"],"mappings":";;+iCAAA,oBAsBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,sGAAtB,WAAU,6CAAS,IAAG,wDAK9C,sCACoBD,EAAU,CAAA,uBACVC,GAAI,yBAGzBJ,GAAK,eATR"}

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

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import NumberBadge from './NumberBadge.svelte';
+describe('m-number-badge component', () => {
+    it('renders the label correctly', () => {
+        const { container } = render(NumberBadge, { props: { label: 42 } });
+        expect(container.textContent).toContain('42');
+    });
+    it('applies the default appearance and size classes', () => {
+        const { container } = render(NumberBadge, { props: { label: 1 } });
+        const badge = container.querySelector('.mc-number-badge');
+        expect(badge).toHaveClass('mc-number-badge--standard');
+        expect(badge).toHaveClass('mc-number-badge--s');
+    });
+    it('applies custom appearance and size classes', () => {
+        const { container } = render(NumberBadge, {
+            props: { label: 99, appearance: 'danger', size: 'm' },
+        });
+        const badge = container.querySelector('.mc-number-badge');
+        expect(badge).toHaveClass('mc-number-badge--danger');
+        expect(badge).toHaveClass('mc-number-badge--m');
+    });
+    it('renders numeric label as text content', () => {
+        const { container } = render(NumberBadge, { props: { label: 0 } });
+        const badge = container.querySelector('.mc-number-badge');
+        expect(badge?.textContent).toBe('0');
+    });
+});

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

@@ -1,14 +1,10 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * A Number badge indicates the status of an entity and can evolve at any time.
- *
- * The `NumberBadge` component is the **Svelte / WebComponent** implementation of the **Number Badge** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/badge/).
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const CustomLabel: any;
-export declare const AccentStyle: any;
-export declare const SmallSize: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Standard: Story;
+export declare const Accent: Story;
+export declare const Danger: Story;
+export declare const Inverse: Story;
+export declare const Size: Story;
 //# sourceMappingURL=NumberBadge.stories.d.ts.map

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":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBA6BE,IAAI;AA3BT,wBA2BU;AAWV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAOzC,eAAO,MAAM,WAAW,KAAoB,CAAC;AAO7C,eAAO,MAAM,WAAW,KAAoB,CAAC;AAO7C,eAAO,MAAM,SAAS,KAAoB,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;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"}

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

@@ -1,69 +1,41 @@
-import { action } from 'storybook/actions';
-import { userEvent, within, expect } from 'storybook/test';
-/**
- * A Number badge indicates the status of an entity and can evolve at any time.
- *
- * The `NumberBadge` component is the **Svelte / WebComponent** implementation of the **Number Badge** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/badge/).
- */
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+const meta = {
     title: 'Indicators/Number Badge',
-    tags: ['autodocs', 'new', 'rc', 'version:1.0.0-beta4'],
+    component: 'm-number-badge',
     argTypes: {
-        label: {
-            description: 'Specify the badge label',
-            control: 'text',
-        },
         appearance: {
-            description: 'Specify the badge type',
-            control: { type: 'radio' },
-            options: ['standard', 'accent', 'danger', 'inverse'],
+            control: 'radio',
+            options: ['danger', 'accent', 'inverse', 'standard'],
         },
         size: {
-            description: 'Specify the size of the badge, available sizes are `s`, `m`',
-            control: { type: 'radio' },
+            control: 'radio',
             options: ['s', 'm'],
         },
-        change: {
-            name: 'click',
-            action: 'click',
-            table: {
-                category: 'Events',
-            },
-        },
     },
+    args: { label: 99 },
+    render: (args) => html `
+    <m-number-badge
+      label=${ifDefined(args.label)}
+      appearance=${ifDefined(args.appearance)}
+      size=${ifDefined(args.size)}
+    ></m-number-badge>
+  `,
 };
-const Template = (args) => {
-    const primary = document.createElement('m-number-badge');
-    primary.setAttribute('label', args.label || '99');
-    if (args.appearance)
-        primary.setAttribute('appearance', args.appearance);
-    if (args.size)
-        primary.setAttribute('size', args.size || 'm');
-    primary.addEventListener('click', action('click'));
-    return primary;
+export default meta;
+export const Standard = {};
+export const Accent = {
+    args: { appearance: 'accent' },
 };
-export const Default = Template.bind({});
-Default.args = {};
-Default.play = async ({ canvasElement }) => {
-    const badge = canvasElement.querySelector('m-number-badge');
-    expect(badge).toHaveAttribute('label', '99');
+export const Danger = {
+    args: { appearance: 'danger' },
 };
-export const CustomLabel = Template.bind({});
-CustomLabel.args = { label: 'X' };
-CustomLabel.play = async ({ canvasElement }) => {
-    const badge = canvasElement.querySelector('m-number-badge');
-    expect(badge).toHaveAttribute('label', 'X');
-};
-export const AccentStyle = Template.bind({});
-AccentStyle.args = { appearance: 'accent' };
-AccentStyle.play = async ({ canvasElement }) => {
-    const badge = canvasElement.querySelector('m-number-badge');
-    expect(badge).toHaveAttribute('appearance', 'accent');
+export const Inverse = {
+    globals: {
+        backgrounds: { value: 'inverse' },
+    },
+    args: { appearance: 'inverse' },
 };
-export const SmallSize = Template.bind({});
-SmallSize.args = { size: 's' };
-SmallSize.play = async ({ canvasElement }) => {
-    const badge = canvasElement.querySelector('m-number-badge');
-    expect(badge).toHaveAttribute('size', 's');
+export const Size = {
+    args: { size: 'm' },
 };

package/dist/components/numberbadge/NumberBadge.svelte

@@ -1,49 +1,50 @@
 <svelte:options customElement={{ tag: 'm-number-badge' }} />
 
 <script lang="ts">
-  import type { BadgeStyle, BadgeSize } from './NumberBadge.types';
+  /**
+   * 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 {
-    label: string;
-    appearance: BadgeStyle;
-    size: BadgeSize;
-  }
-
-  let { label = '', appearance = 'standard', size = 's' }: Props = $props();
-
-  function setClasses(style: BadgeStyle) {
-    const classes = ['mc-number-badge'];
-
-    if (appearance) {
-      classes.push(`mc-number-badge--${appearance}`);
-    }
+    /**
+     * Content of the badge.
+     */
+    label: number;
+    /**
+     * Allows to define the badge appearance.
+     */
+    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
 
-    if (size) {
-      classes.push(`mc-number-badge--${size}`);
-    }
-
-    return classes.join(' ');
+    /**
+     * Allows to define the badge size.
+     */
+    size?: 's' | 'm';
   }
+
+  let { label, appearance = 'standard', size = 's' }: Props = $props();
 </script>
 
-<div class={setClasses(appearance)}>
+<div
+  class={[
+    'mc-number-badge',
+    `mc-number-badge--${appearance}`,
+    `mc-number-badge--${size}`,
+  ]}
+>
   {label}
 </div>
 
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-number-badge {
-  color: #ffffff;
-  background-color: #464e63;
+  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: 0.625rem;
-  border-radius: 1rem;
-  font-weight: 600;
+  font-size: var(--font-size-25, 0.625rem);
+  border-radius: var(--radius-l, 1rem);
+  font-weight: var(--font-weight-semi-bold, 600);
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
@@ -54,17 +55,17 @@
   height: 1.5rem;
   min-width: 1.5rem;
   padding-inline: 0.25rem;
-  font-size: 0.75rem;
+  font-size: var(--font-size-50, 0.75rem);
 }
 .mc-number-badge--accent {
-  color: #ffffff;
-  background-color: #117f03;
+  color: var(--number-badge-color-text-accent, #ffffff);
+  background-color: var(--number-badge-color-background-accent, #117f03);
 }
 .mc-number-badge--danger {
-  color: #ffffff;
-  background-color: #c61112;
+  color: var(--number-badge-color-text-danger, #ffffff);
+  background-color: var(--number-badge-color-background-danger, #c61112);
 }
 .mc-number-badge--inverse {
-  color: #464e63;
-  background-color: #ffffff;
+  color: var(--number-badge-color-text-inverse, #464e63);
+  background-color: var(--number-badge-color-background-inverse, #ffffff);
 }</style>

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

@@ -1,8 +1,19 @@
-import type { BadgeStyle, BadgeSize } from './NumberBadge.types';
+/**
+ * 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 {
-    label: string;
-    appearance: BadgeStyle;
-    size: BadgeSize;
+    /**
+     * Content of the badge.
+     */
+    label: number;
+    /**
+     * Allows to define the badge appearance.
+     */
+    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
+    /**
+     * Allows to define the badge size.
+     */
+    size?: 's' | 'm';
 }
 declare const NumberBadge: import("svelte").Component<Props, {}, "">;
 type NumberBadge = ReturnType<typeof NumberBadge>;

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":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE/D,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,UAAU,CAAC;IACvB,IAAI,EAAE,SAAS,CAAC;CACjB;AAgCH,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;;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;AAqBH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/numberbadge/README.md

@@ -0,0 +1,12 @@
+# `m-number-badge`
+
+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.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `label*` | Content of the badge. | `number` |   |
+| `appearance` | Allows to define the badge appearance. | `'danger'` `'accent'` `'inverse'` `'standard'` | `standard` |
+| `size` | Allows to define the badge size. | `'s'` `'m'` | `s` |
+

package/dist/components/overlay/Overlay.js

@@ -1,7 +1,4 @@
-import{c as y,p as m,a as f,b as n,f as u,d as v,t as p,e as g,h,i as _,j as d,r as b}from"../../custom-element.js";import{s as x}from"../../slot.js";import{s as w}from"../../attributes.js";var z=u('<div><div role="dialog" tabindex="-1"><!></div></div>');const D={hash:"svelte-178bhy7",code:`/**
+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:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-overlay.svelte-178bhy7 {background-color: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-178bhy7 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function O(o,i){m(i,!0),f(o,D);let t=n(i,"isvisible",7,!1),a=n(i,"dialoglabel",7);var s=z();let r;var l=v(s),c=v(l);return x(c,i,"default",{}),b(l),b(s),p(e=>{r=g(s,1,"mc-overlay svelte-178bhy7",null,r,e),w(l,"aria-labelledby",a())},[()=>({"is-visible":t()})]),h(o,s),_({get isvisible(){return t()},set isvisible(e=!1){t(e),d()},get dialoglabel(){return a()},set dialoglabel(e){a(e),d()}})}customElements.define("m-overlay",y(O,{isvisible:{},dialoglabel:{}},["default"],[],!0));export{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 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};
 //# 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=\"m-overlay\" />\n\n<script lang=\"ts\">\n  interface Props {\n    isvisible?: boolean;\n    dialoglabel: string;\n  }\n\n  let { isvisible = false, dialoglabel }: Props = $props();\n</script>\n\n<div class=\"mc-overlay\" class:is-visible={isvisible}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-labelledby={dialoglabel}>\n    <!-- @slot Use this slot to insert a centered content inside the overlay -->\n    <slot />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/overlay';\n</style>\n"],"names":["isvisible","dialoglabel","$.prop","$$props"],"mappings":";;;;;oWAAA,gBAQQ,IAAAA,oBAAY,EAAK,EAAEC,EAAWC,EAAAC,EAAA,cAAA,CAAA,mJAIcF,GAAW,uBADrBD,EAAS,GAAA,yDAH/B,GAAK,uEACzB"}
+{"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"}

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

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Overlay from './Overlay.svelte';
+describe('m-overlay component', () => {
+    it('applies is-visible class when isvisible is true', () => {
+        const { container } = render(Overlay, {
+            props: {
+                isvisible: true,
+                dialoglabel: 'test-dialog-label',
+            },
+        });
+        const overlay = container.querySelector('.mc-overlay');
+        expect(overlay).toBeTruthy();
+        expect(overlay).toHaveClass('is-visible');
+        const dialog = container.querySelector('[role="dialog"]');
+        expect(dialog).toBeTruthy();
+        expect(dialog).toHaveAttribute('aria-labelledby', 'test-dialog-label');
+    });
+    it('does not apply is-visible class when isvisible is false or undefined', () => {
+        const { container } = render(Overlay, {
+            props: {
+                dialoglabel: 'test-dialog-label',
+            },
+        });
+        const overlay = container.querySelector('.mc-overlay');
+        expect(overlay).toBeTruthy();
+        expect(overlay).not.toHaveClass('is-visible');
+    });
+});

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

@@ -1,8 +1,6 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * The `MOverlay` component is the **Svelte / WebComponent** implementation of the **Overlay** component of Mozaic Design System.
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
 //# sourceMappingURL=Overlay.stories.d.ts.map

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":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;GAEG;wBAWE,IAAI;AATT,wBASU;AA2BV,eAAO,MAAM,OAAO,KAAoB,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;AAKrE,QAAA,MAAM,IAAI,EAAE,IA+BX,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,45 +1,37 @@
-import { action } from 'storybook/actions';
-import { userEvent, within, expect } from 'storybook/test';
-/**
- * The `MOverlay` component is the **Svelte / WebComponent** implementation of the **Overlay** component of Mozaic Design System.
- */
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+const meta = {
     title: 'Overlay/Overlay',
-    tags: ['autodocs', 'code-only'],
+    component: 'm-overlay',
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            story: { height: '400px' },
+        },
+    },
+    args: {
+        isvisible: true,
+    },
     argTypes: {
-        isvisible: {
-            description: 'Define if the overlay is visible or not',
-            control: 'boolean',
+        '--overlay-z-index': {
+            description: 'Customise the z-index of the overlay',
+            control: false,
+            table: {
+                category: 'Custom Properties',
+                type: { summary: 'number' },
+                defaultValue: { summary: '2' },
+            },
         },
     },
+    render: (args) => html `
+    <m-overlay
+      isvisible=${ifDefined(args.isvisible)}
+      dialoglabel=${ifDefined(args.dialoglabel)}
+    >
+      ${unsafeHTML(ifDefined(args.default))}
+    </m-overlay>
+  `,
 };
-const Template = (args) => {
-    const wrapper = document.createElement('div');
-    const MOverlay = document.createElement('m-overlay');
-    const trigger = document.createElement('m-button');
-    const label = document.createElement('span');
-    label.innerText = 'Launch Overlay';
-    trigger.appendChild(label);
-    trigger.addEventListener('click', () => {
-        MOverlay.setAttribute('isvisible', 'true');
-        setTimeout(() => {
-            MOverlay.removeAttribute('isvisible');
-        }, 5000);
-    });
-    if (args.isvisible) {
-        MOverlay.setAttribute('isvisible', 'true');
-    }
-    wrapper.appendChild(trigger);
-    wrapper.appendChild(MOverlay);
-    return wrapper;
-};
-export const Default = Template.bind({});
-Default.args = {};
-Default.play = async ({ canvasElement }) => {
-    const MButton = canvasElement.querySelector('m-button');
-    const trigger = MButton?.shadowRoot.querySelector('button');
-    expect(trigger).not.toBeNull();
-    await userEvent.click(MButton);
-    const overlay = canvasElement.querySelector('m-overlay');
-    expect(overlay).toHaveAttribute('isvisible', 'true');
-};
+export default meta;
+export const Default = {};

package/dist/components/overlay/Overlay.svelte

@@ -1,17 +1,27 @@
-<svelte:options customElement="m-overlay" />
+<svelte:options customElement={{ tag: 'm-overlay' }} />
 
 <script lang="ts">
+  /**
+   * 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.
+   *
+   * @slot default - Use this slot to insert a centered content inside the overlay.
+   */
   interface Props {
+    /**
+     * Controls the visibility of the overlay.
+     */
     isvisible?: boolean;
+    /**
+     * Accessible label for the overlay dialog.
+     */
     dialoglabel: string;
   }
 
-  let { isvisible = false, dialoglabel }: Props = $props();
+  let { isvisible, dialoglabel }: Props = $props();
 </script>
 
-<div class="mc-overlay" class:is-visible={isvisible}>
+<div class={['mc-overlay', isvisible && 'is-visible']}>
   <div role="dialog" tabindex="-1" aria-labelledby={dialoglabel}>
-    <!-- @slot Use this slot to insert a centered content inside the overlay -->
     <slot />
   </div>
 </div>
@@ -19,11 +29,8 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-overlay {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
   inset: 0;
   opacity: 0;
   position: fixed;
@@ -39,20 +46,22 @@
 }
 
 .mc-overlay-loader {
-  background-color: rgba(0, 0, 0, 0.5);
+  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);
-  align-items: center;
-  display: flex;
-  justify-content: center;
 }
 .mc-overlay-loader.is-visible {
   opacity: 1;
   pointer-events: all;
   transition: opacity 0.4s ease, visibility 0ms;
   visibility: visible;
+}
+.mc-overlay-loader {
+  align-items: center;
+  display: flex;
+  justify-content: center;
 }</style>

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

@@ -1,5 +1,16 @@
+/**
+ * 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.
+ *
+ * @slot default - Use this slot to insert a centered content inside the overlay.
+ */
 interface Props {
+    /**
+     * Controls the visibility of the overlay.
+     */
     isvisible?: boolean;
+    /**
+     * Accessible label for the overlay dialog.
+     */
     dialoglabel: string;
 }
 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> {

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,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAoBH,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":"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"}

package/dist/components/overlay/README.md

@@ -0,0 +1,17 @@
+# `m-overlay`
+
+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.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `isvisible` | Controls the visibility of the overlay. | `boolean` |   |
+| `dialoglabel*` | Accessible label for the overlay dialog. | `string` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `default` | Use this slot to insert a centered content inside the overlay. |
+