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

package/dist/components/loader/Loader.svelte

@@ -1,34 +1,35 @@
 <svelte:options customElement={{ tag: 'm-loader' }} />
 
 <script lang="ts">
-  import type { LoaderSize, LoaderTheme } from './loader.types';
-
+  /**
+   * A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.
+   */
   interface Props {
-    size: LoaderSize;
-    theme: LoaderTheme;
+    /**
+     * Specifies the visual appearance of the loader.
+     */
+    appearance?: 'standard' | 'accent' | 'inverse';
+
+    /**
+     * Defines the size of the loader.
+     */
+    size?: 'xs' | 's' | 'm' | 'l';
+
+    /**
+     * Text to display alongside the loader when using the loader inside an `Overlay`.
+     */
     text?: string;
   }
 
-  let { size, theme, text }: Props = $props();
-
-  function setClasses(size: LoaderSize, theme: LoaderTheme) {
-    const classes = ['mc-loader'];
-
-    if (size) {
-      classes.push(`mc-loader--${size}`);
-    }
+  let { size = 'm', appearance = 'standard', text }: Props = $props();
 
-    if (theme) {
-      classes.push(`mc-loader--${theme}`);
-    }
-
-    return classes.join(' ');
-  }
-
-  function setViewBox(size: LoaderSize) {
+  const setViewBox = () => {
     let viewBox: string;
 
     switch (size) {
+      case 'xs':
+        viewBox = '0 0 20 20';
+        break;
       case 's':
         viewBox = '0 0 24 24';
         break;
@@ -40,12 +41,15 @@
     }
 
     return viewBox;
-  }
+  };
 
-  function setCircleRadius(size: LoaderSize) {
+  const setCircleRadius = () => {
     let circleRadius: number;
 
     switch (size) {
+      case 'xs':
+        circleRadius = 6;
+        break;
       case 's':
         circleRadius = 6;
         break;
@@ -57,22 +61,20 @@
     }
 
     return circleRadius;
-  }
+  };
 </script>
 
-<div class={setClasses(size, theme)}>
+<div
+  class={[
+    'mc-loader',
+    `mc-loader--${size}`,
+    `mc-loader--${appearance}`,
+    text && 'mc-loader--text-visible',
+  ]}
+>
   <span class="mc-loader__spinner">
-    <svg
-      class="mc-loader__icon"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox={setViewBox(size)}
-    >
-      <circle
-        class="mc-loader__path"
-        cx="50%"
-        cy="50%"
-        r={setCircleRadius(size)}
-      />
+    <svg class="mc-loader__icon" xmlns="http://www.w3.org/2000/svg" viewBox={setViewBox()}>
+      <circle class="mc-loader__path" cx="50%" cy="50%" r={setCircleRadius()} />
     </svg>
   </span>
 

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

@@ -1,7 +1,18 @@
-import type { LoaderSize, LoaderTheme } from './loader.types';
+/**
+ * A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.
+ */
 interface Props {
-    size: LoaderSize;
-    theme: LoaderTheme;
+    /**
+     * Specifies the visual appearance of the loader.
+     */
+    appearance?: 'standard' | 'accent' | 'inverse';
+    /**
+     * Defines the size of the loader.
+     */
+    size?: 'xs' | 's' | 'm' | 'l';
+    /**
+     * Text to display alongside the loader when using the loader inside an `Overlay`.
+     */
     text?: string;
 }
 declare const Loader: import("svelte").Component<Props, {}, "">;

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

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

package/dist/components/loader/README.md

@@ -0,0 +1,12 @@
+# `m-loader`
+
+A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `appearance` | Specifies the visual appearance of the loader. | `'standard'` `'accent'` `'inverse'` | `standard` |
+| `size` | Defines the size of the loader. | `'xs'` `'s'` `'m'` `'l'` | `m` |
+| `text` | Text to display alongside the loader when using the loader inside an `Overlay`. | `string` |   |
+

package/dist/components/loadingoverlay/LoadingOverlay.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingOverlay.js","sources":["../../../src/components/loadingoverlay/LoadingOverlay.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-loading-overlay' }} />\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n  /**\n   * A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.\n   */\n  interface Props {\n    /**\n     * Controls the visibility of the loading overlay.\n     */\n    isvisible?: boolean;\n    /**\n     * Text of the loading overlay.\n     */\n    text?: string;\n  }\n\n  let { isvisible, text }: Props = $props();\n</script>\n\n<div class={['mc-loading-loader', isvisible && 'is-visible']}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-label={text}>\n    <Loader size=\"l\" appearance=\"inverse\" {text} />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loading-overlay';\n</style>\n"],"names":["isvisible","$.prop","$$props","text"],"mappings":";;8eAAA,oBAkBQA,EAASC,EAAAC,EAAA,YAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,+NAGV,oBAAqBF,KAAa,YAAY,CAAA,EAAA,gBAAA,mBACZG,GAAI,eAHnD"}

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

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import LoadingOverlay from './LoadingOverlay.svelte';
+describe('m-loading-overlay component', () => {
+    it('does not have visible class by default', () => {
+        const { container } = render(LoadingOverlay);
+        const overlay = container.querySelector('.mc-loading-loader');
+        expect(overlay).toBeTruthy();
+        expect(overlay?.classList).not.toContain('is-visible');
+    });
+    it('adds visible class when isvisible is true', () => {
+        const { container } = render(LoadingOverlay, {
+            props: { isvisible: true },
+        });
+        const overlay = container.querySelector('.mc-loading-loader');
+        expect(overlay?.classList).toContain('is-visible');
+    });
+    it('renders with provided text and sets aria-label', () => {
+        const text = 'Loading data...';
+        const { container, getByRole } = render(LoadingOverlay, {
+            props: { isvisible: true, text },
+        });
+        const dialog = getByRole('dialog');
+        expect(dialog).toBeTruthy();
+        expect(dialog.getAttribute('aria-label')).toBe(text);
+        const loader = container.querySelector('.mc-loader');
+        expect(loader).toBeTruthy();
+        const loaderText = container.querySelector('.mc-loader__text');
+        expect(loaderText?.textContent).toBe(text);
+    });
+    it('does not render aria-label when no text is provided', () => {
+        const { getByRole } = render(LoadingOverlay, {
+            props: { isvisible: true },
+        });
+        const dialog = getByRole('dialog');
+        expect(dialog.getAttribute('aria-label')).toBe(null);
+    });
+});

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Text: Story;
+//# sourceMappingURL=LoadingOverlay.stories.d.ts.map

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

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

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

@@ -0,0 +1,39 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+const meta = {
+    title: 'Overlay/Loading Overlay',
+    component: 'm-loading-overlay',
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            story: { height: '400px' },
+        },
+    },
+    args: {
+        isvisible: true,
+    },
+    argTypes: {
+        '--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-loading-overlay
+      isvisible=${ifDefined(args.isvisible)}
+      text=${ifDefined(args.text)}
+    ></m-loading-overlay>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Text = {
+    args: {
+        text: 'Insert your text here',
+    },
+};

package/dist/components/loadingoverlay/LoadingOverlay.svelte

@@ -0,0 +1,50 @@
+<svelte:options customElement={{ tag: 'm-loading-overlay' }} />
+
+<script lang="ts">
+  import Loader from '../loader/Loader.svelte';
+  /**
+   * A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.
+   */
+  interface Props {
+    /**
+     * Controls the visibility of the loading overlay.
+     */
+    isvisible?: boolean;
+    /**
+     * Text of the loading overlay.
+     */
+    text?: string;
+  }
+
+  let { isvisible, text }: Props = $props();
+</script>
+
+<div class={['mc-loading-loader', isvisible && 'is-visible']}>
+  <div role="dialog" tabindex="-1" aria-label={text}>
+    <Loader size="l" appearance="inverse" {text} />
+  </div>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-loading-loader {
+  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
+  inset: 0;
+  opacity: 0;
+  position: fixed;
+  pointer-events: none;
+  transition: opacity 0.4s ease, visibility 0ms 0.4s;
+  z-index: var(--overlay-z-index, 2);
+}
+.mc-loading-loader.is-visible {
+  opacity: 1;
+  pointer-events: all;
+  transition: opacity 0.4s ease, visibility 0ms;
+  visibility: visible;
+}
+.mc-loading-loader {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}</style>

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

@@ -0,0 +1,17 @@
+/**
+ * A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.
+ */
+interface Props {
+    /**
+     * Controls the visibility of the loading overlay.
+     */
+    isvisible?: boolean;
+    /**
+     * Text of the loading overlay.
+     */
+    text?: string;
+}
+declare const LoadingOverlay: import("svelte").Component<Props, {}, "">;
+type LoadingOverlay = ReturnType<typeof LoadingOverlay>;
+export default LoadingOverlay;
+//# sourceMappingURL=LoadingOverlay.svelte.d.ts.map

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

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

package/dist/components/loadingoverlay/README.md

@@ -0,0 +1,11 @@
+# `m-loading-overlay`
+
+A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `isvisible` | Controls the visibility of the loading overlay. | `boolean` |   |
+| `text` | Text of the loading overlay. | `string` |   |
+

package/dist/components/modal/Modal.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-modal' }} />\n\n<script lang=\"ts\">\n  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n\n  interface Props {\n    open?: boolean;\n    title?: string;\n    description?: string;\n    closable?: boolean;\n    icon?: any;\n    footer?: any;\n    link?: any;\n    [key: string]: any;\n  }\n\n  let {\n    open = false,\n    title = '',\n    description = '',\n    closable = true,\n    icon = undefined,\n    footer = undefined,\n    link = undefined,\n  }: Props = $props();\n\n  function onClose() {\n    open = false;\n    // Manually emit event from the custom element\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    // @ts-ignore: `this` is the custom element instance\n    this.dispatchEvent(event);\n  }\n  //   afterUpdate(() => {\n  //     dispatch('update:open', open);\n  //   });\n</script>\n\n<section\n  class=\"mc-modal\"\n  class:is-open={open}\n  tabindex=\"-1\"\n  aria-labelledby=\"modalTitle\"\n  aria-hidden={!open}\n>\n  <div class=\"mc-modal__dialog\" role=\"document\">\n    <header class=\"mc-modal__header\">\n      {#if icon}\n        <span class=\"mc-modal__icon\">\n          <slot name=\"icon\" />\n        </span>\n      {/if}\n      <h2 class=\"mc-modal__title\" id=\"modalTitle\">{title}</h2>\n      {#if closable}\n        <button\n          type=\"button\"\n          class=\"mc-modal__close mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Close\"\n          onclick={onClose}\n        >\n          <span class=\"mc-modal__icon\">\n            <Cross24 aria-hidden=\"true\" />\n          </span>\n        </button>\n      {/if}\n    </header>\n\n    <main class=\"mc-modal__body\">\n      {#if description}\n        <p>{description}</p>\n      {/if}\n      <slot />\n    </main>\n\n    {#if footer}\n      <footer class=\"mc-modal__footer\">\n        {#if link}\n          <span class=\"mc-modal__link\">\n            <slot name=\"link\" />\n          </span>\n        {/if}\n        <slot name=\"footer\" />\n      </footer>\n    {/if}\n  </div>\n\n  <MOverlay isvisible={open} dialoglabel=\"modal\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/modal';\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["onClose","_","open","event","title","description","closable","icon","footer","link","$$render","consequent","consequent_1","consequent_2","consequent_3","consequent_4"],"mappings":"gWA2BW,SAAAA,GAAOC,EAAAC,EAAG,CACjBA,EAAO,EAAK,EAEN,MAAAC,EAAK,IAAO,YAAY,eAC5B,OAAQD,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAGhB,KAAK,cAAcC,CAAK,CAC1B;;;;;;;;;;;;;;6vEArCF,iBAkBI,IAAAD,eAAO,EAAK,EACZE,gBAAQ,EAAE,EACVC,sBAAc,EAAE,EAChBC,mBAAW,EAAI,EACfC,eAAO,MAAS,EAChBC,iBAAS,MAAS,EAClBC,eAAO,MAAS,2CANT,GAAK,+CACJ,GAAE,2DACI,GAAE,qDACL,GAAI,6CACR,OAAS,iDACP,OAAS,6CACX,OAAS,qHA4BTF,EAAI,GAAAG,EAAAC,CAAA,8EAWIX,GAAOE,CAAA,0EALfI,EAAQ,GAAAI,EAAAE,CAAA,4EAgBPP,EAAW,CAAA,CAAA,kBADZA,EAAW,GAAAK,EAAAG,CAAA,uJAQTJ,EAAI,GAAAC,EAAAI,CAAA,yDAFRN,EAAM,GAAAE,EAAAK,CAAA,0DAYQb,EAAI,mGA3CXA,EAAI,CAAA,MAS+BE,GAAK,oBAZvCF,EAAI,GAAA,cAJrB"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-modal' }} />\n\n<script lang=\"ts\">\n  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n  /**\n   * A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.\n   *\n   * @slot icon - Use this slot to insert an icon next to the title of the modal.\n   * @slot default - Use this slot to insert the content of the modal.\n   * @slot link - Use this slot to insert a link in the footer.\n   * @slot footer - Use this slot to insert buttons in the footer.\n   * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.\n   */\n  interface Props {\n    /**\n     * if `true`, display the modal.\n     */\n    open?: boolean;\n    /**\n     * Title of the modal.\n     */\n    title: string;\n    /**\n     * Description of the modal.\n     */\n    description?: string;\n    /**\n     * if `true`, display the close button.\n     */\n    closable?: boolean;\n  }\n\n  let { open, title, description, closable = true }: Props = $props();\n  let element: HTMLElement;\n\n  function onClose() {\n    open = false;\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  }\n</script>\n\n<section\n  class={['mc-modal', open && 'is-open']}\n  tabindex=\"-1\"\n  aria-labelledby=\"modalTitle\"\n  aria-hidden={!open}\n  bind:this={element}\n>\n  <div class=\"mc-modal__dialog\" role=\"document\">\n    <header class=\"mc-modal__header\">\n      <span class=\"mc-modal__icon\">\n        <slot name=\"icon\" />\n      </span>\n      <h2 class=\"mc-modal__title\" id=\"modalTitle\">{title}</h2>\n      {#if closable}\n        <button\n          type=\"button\"\n          class=\"mc-modal__close mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Close\"\n          onclick={onClose}\n        >\n          <Cross24 class=\"mc-modal__close\" aria-hidden=\"true\" />\n        </button>\n      {/if}\n    </header>\n\n    <main class=\"mc-modal__body\">\n      {#if description}\n        <p>{description}</p>\n      {/if}\n      <slot />\n    </main>\n\n    <footer class=\"mc-modal__footer\">\n      <span class=\"mc-modal__link\">\n        <slot name=\"link\" />\n      </span>\n      <slot name=\"footer\" />\n    </footer>\n  </div>\n\n  <MOverlay isvisible={open} dialoglabel=\"modal\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/modal';\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-modal__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["open","$.prop","$$props","title","description","closable","element","onClose","event","$$render","consequent","consequent_1","$.bind_this","section","$$value"],"mappings":";;;;;;;;;;;;;;izEAAA,qBAiCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EAAEG,mBAAW,EAAI,EAC3CC,EAEK,SAAAC,GAAU,CACjBP,EAAO,EAAK,EAEN,MAAAQ,EAAK,IAAO,YAAY,eAC5B,OAAQR,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBM,EAAQ,cAAcE,CAAK,CAC7B,yMAZ2C,GAAI,6IAiC9BD,sFALRF,EAAQ,GAAAI,EAAAC,CAAA,2EAcPN,EAAW,CAAA,CAAA,kBADZA,EAAW,GAAAK,EAAAE,CAAA,qLAcCX,EAAI,8BAnCdY,EAAAC,EAAAC,GAAAR,QAAAA,CAAO,kBAJV,WAAYN,KAAQ,SAAS,CAAA,EAAA,gBAAA,qBAGvBA,EAAI,CAAA,MAQ+BG,GAAK,eAdxD"}

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

@@ -0,0 +1,50 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Modal from './Modal.svelte';
+describe('m-modal component', () => {
+    const title = 'Test Modal';
+    const description = 'Modal description';
+    it('renders the title and description', () => {
+        const { getByText } = render(Modal, {
+            props: {
+                open: true,
+                title,
+                description,
+            },
+        });
+        expect(getByText(title)).toBeTruthy();
+        expect(getByText(description)).toBeTruthy();
+    });
+    it('applies is-open class when open is true', () => {
+        const { container } = render(Modal, {
+            props: { open: true, title },
+        });
+        expect(container.querySelector('.mc-modal')).toHaveClass('is-open');
+    });
+    it('does not show close button if closable is false', () => {
+        const { queryByRole } = render(Modal, {
+            props: { open: true, title, closable: false },
+        });
+        expect(queryByRole('button', { name: 'Close' })).toBeNull();
+    });
+    it('emits update:open event with false when close button is clicked', async () => {
+        const { container } = render(Modal, {
+            props: { open: true, title },
+        });
+        const closeButton = container.querySelector('button[aria-label="Close"]');
+        const handler = vi.fn();
+        container.addEventListener('update:open', handler);
+        await fireEvent.click(closeButton);
+        expect(handler).toHaveBeenCalledTimes(1);
+        expect(handler.mock.calls[0][0].detail).toBe(false);
+    });
+    it('sets aria-hidden to false when open and true when closed', async () => {
+        const { container, rerender } = render(Modal, {
+            props: { open: false, title },
+        });
+        const modal = container.querySelector('.mc-modal');
+        expect(modal.getAttribute('aria-hidden')).toBe('true');
+        await rerender({ open: true, title });
+        expect(modal.getAttribute('aria-hidden')).toBe('false');
+    });
+});

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

@@ -1,12 +1,39 @@
-import type { Meta, StoryObj } from '@storybook/html-vite';
-declare const _default: Meta;
-export default _default;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '@mozaic-ds/icons-svelte/custom-elements/InfoCircle32/InfoCircle32.js';
+import '@mozaic-ds/icons-svelte/custom-elements/ExternalLink24/ExternalLink24.js';
+declare const meta: Meta;
+export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
-export declare const Icon: Story;
-export declare const ValidationOnly: Story;
-export declare const TwoOptions: Story;
-export declare const Cancel: Story;
-export declare const Link: Story;
-export declare const Danger: Story;
+export declare const Icon: {
+    args: {
+        icon: string;
+    };
+};
+export declare const ValidationOnly: {
+    args: {
+        footer: string;
+    };
+};
+export declare const TwoOptions: {
+    args: {
+        footer: string;
+    };
+};
+export declare const Cancel: {
+    args: {
+        footer: string;
+    };
+};
+export declare const Link: {
+    args: {
+        link: string;
+        footer: string;
+    };
+};
+export declare const Danger: {
+    args: {
+        footer: string;
+    };
+};
 //# sourceMappingURL=Modal.stories.d.ts.map

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,sBAAsB,CAAC;wBA6BtD,IAAI;AAzBT,wBAyBU;AAEV,KAAK,KAAK,GAAG,QAAQ,CAAC;AAiEtB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAalB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAQpB,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,sEAAsE,CAAC;AAC9E,OAAO,0EAA0E,CAAC;AAElF,QAAA,MAAM,IAAI,EAAE,IAgDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAQlB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;CAahB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAOlB,CAAC"}