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

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

@@ -1,138 +1,107 @@
+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 HelpCircle32 from '@mozaic-ds/icons-svelte/custom-elements/HelpCircle32/HelpCircle32.js';
-export default {
+import '@mozaic-ds/icons-svelte/custom-elements/InfoCircle32/InfoCircle32.js';
+import '@mozaic-ds/icons-svelte/custom-elements/ExternalLink24/ExternalLink24.js';
+const meta = {
     title: 'Overlay/Modal',
-    tags: ['autodocs', 'beta'],
+    component: 'm-modal',
     parameters: {
         layout: 'fullscreen',
         docs: {
             story: { height: '400px' },
-            description: {
-                component: '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.',
-            },
         },
     },
     args: {
         open: true,
         title: 'Modal title',
-        description: 'A short description',
+        description: `A modal is a dialog window allowing you to focus the user's attention on a specific task, a piece of information or a mandatory action. It must be used for single action only and must have a call to action button in the bottom.`,
         footer: `
-      <m-button ghost="true">Cancel</m-button>
-      <m-button>Primary action</m-button>
+      <m-button ghost="true" slot="footer">Cancel</m-button>
+      <m-button slot="footer">Primary action</m-button>
     `,
     },
     argTypes: {
-        $slots: { table: { disable: true } },
+        'update:open': {
+            control: false,
+        },
+        '--modal-z-index': {
+            description: 'Customise the z-index of the modal',
+            control: false,
+            table: {
+                category: 'Custom Properties',
+                type: { summary: 'number' },
+                defaultValue: { summary: '3' },
+            },
+        },
+    },
+    render: (args) => {
+        const handleUpdateOpen = action('update:open');
+        return html `
+      <m-modal
+        open=${ifDefined(args.open)}
+        title=${ifDefined(args.title)}
+        description=${ifDefined(args.description)}
+        closable=${ifDefined(args.closable)}
+        @update:open=${handleUpdateOpen}
+      >
+        ${unsafeHTML(ifDefined(args.icon))} ${unsafeHTML(ifDefined(args.default))}
+        ${unsafeHTML(ifDefined(args.link))} ${unsafeHTML(ifDefined(args.footer))}
+      </m-modal>
+    `;
     },
 };
-const createModalTemplate = (args) => {
-    const wrapper = document.createElement('div');
-    const button = document.createElement('m-button');
-    button.textContent = 'Open Modal';
-    const modal = document.createElement('m-modal');
-    modal.setAttribute('title', args.title);
-    modal.setAttribute('description', args.description);
-    modal.setAttribute('open', 'true');
-    modal.addEventListener('update:open', (e) => {
-        if (!e.detail)
-            modal.removeAttribute('open');
-        action('update:open')(e.detail);
-    });
-    // Inject default slot content
-    const contentSlot = document.createElement('div');
-    contentSlot.innerHTML =
-        args.default ??
-            '<p>A modal is a dialog window allowing you to focus the users attention on a specific task, a piece of information or a mandatory action. It must be used for single action only and must have a call to action button in the bottom.</p>';
-    modal.appendChild(contentSlot);
-    // Inject icon
-    if (args.icon) {
-        const iconSlot = document.createElement('div');
-        iconSlot.slot = 'icon';
-        iconSlot.innerHTML = args.icon;
-        modal.appendChild(iconSlot);
-    }
-    // Inject footer
-    if (args.footer) {
-        modal.setAttribute('footer', 'true');
-        const footerSlot = document.createElement('div');
-        footerSlot.setAttribute('slot', 'footer');
-        footerSlot.innerHTML = args.footer;
-        modal.appendChild(footerSlot);
-    }
-    // Inject link
-    if (args.link) {
-        const linkSlot = document.createElement('div');
-        modal.setAttribute('link', 'true');
-        linkSlot.setAttribute('slot', 'link');
-        linkSlot.innerHTML = args.link;
-        modal.appendChild(linkSlot);
-    }
-    // Inject icon
-    if (args.icon) {
-        modal.setAttribute('icon', 'true');
-    }
-    // Open modal on button click
-    button.onclick = () => modal.setAttribute('open', 'true');
-    wrapper.appendChild(button);
-    wrapper.appendChild(modal);
-    return wrapper;
-};
-export const Default = {
-    render: (args) => createModalTemplate(args),
-};
+export default meta;
+export const Default = {};
 export const Icon = {
     args: {
-        icon: '<help-circle-32 />',
+        icon: '<info-circle-32 slot="icon"/>',
     },
-    render: (args) => createModalTemplate(args),
 };
 export const ValidationOnly = {
     args: {
         footer: `
-      <m-button>Primary action</m-button>
+      <m-button slot="footer">Primary action</m-button>
     `,
     },
-    render: (args) => createModalTemplate(args),
 };
 export const TwoOptions = {
     args: {
         footer: `
-      <m-button outlined="true">Secondary action</m-button>
-      <m-button>Primary action</m-button>
+      <m-button outlined="true" slot="footer">Secondary action</m-button>
+      <m-button slot="footer">Primary action</m-button>
     `,
     },
-    render: (args) => createModalTemplate(args),
 };
 export const Cancel = {
     args: {
         footer: `
-      <m-button ghost="true">Cancel</m-button>
-      <m-button outlined="true">Secondary action</m-button>
-      <m-button>Primary action</m-button>
+      <m-button ghost="true" slot="footer">Cancel</m-button>
+      <m-button outlined="true" slot="footer">Secondary action</m-button>
+      <m-button slot="footer">Primary action</m-button>
     `,
     },
-    render: (args) => createModalTemplate(args),
 };
 export const Link = {
     args: {
         link: `
-      <m-link href="#" size="m">
+      <m-link href="#" size="m" iconPosition="right" slot="link">
         Learn more
+        <external-link-24 slot="icon"></external-link-24>
       </m-link>
     `,
         footer: `
-      <m-button ghost="true">Cancel</m-button>
-      <m-button>Primary action</m-button>
+      <m-button ghost="true" slot="footer">Cancel</m-button>
+      <m-button slot="footer">Primary action</m-button>
     `,
     },
-    render: (args) => createModalTemplate(args),
 };
 export const Danger = {
     args: {
         footer: `
-      <m-button ghost="true">Cancel</m-button>
-      <m-button appearance="danger">Primary action</m-button>
+      <m-button ghost="true" slot="footer">Cancel</m-button>
+      <m-button appearance="danger" slot="footer">Primary action</m-button>
     `,
     },
-    render: (args) => createModalTemplate(args),
 };

package/dist/components/modal/Modal.svelte

@@ -3,58 +3,61 @@
 <script lang="ts">
   import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.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.
+   *
+   * @slot icon - Use this slot to insert an icon next to the title of the modal.
+   * @slot default - Use this slot to insert the content of the modal.
+   * @slot link - Use this slot to insert a link in the footer.
+   * @slot footer - Use this slot to insert buttons in the footer.
+   * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.
+   */
   interface Props {
+    /**
+     * if `true`, display the modal.
+     */
     open?: boolean;
-    title?: string;
+    /**
+     * Title of the modal.
+     */
+    title: string;
+    /**
+     * Description of the modal.
+     */
     description?: string;
+    /**
+     * if `true`, display the close button.
+     */
     closable?: boolean;
-    icon?: any;
-    footer?: any;
-    link?: any;
-    [key: string]: any;
   }
 
-  let {
-    open = false,
-    title = '',
-    description = '',
-    closable = true,
-    icon = undefined,
-    footer = undefined,
-    link = undefined,
-  }: Props = $props();
+  let { open, title, description, closable = true }: Props = $props();
+  let element: HTMLElement;
 
   function onClose() {
     open = false;
-    // Manually emit event from the custom element
+
     const event = new CustomEvent('update:open', {
       detail: open,
       bubbles: true,
       composed: true,
     });
-    // @ts-ignore: `this` is the custom element instance
-    this.dispatchEvent(event);
+    element.dispatchEvent(event);
   }
-  //   afterUpdate(() => {
-  //     dispatch('update:open', open);
-  //   });
 </script>
 
 <section
-  class="mc-modal"
-  class:is-open={open}
+  class={['mc-modal', open && 'is-open']}
   tabindex="-1"
   aria-labelledby="modalTitle"
   aria-hidden={!open}
+  bind:this={element}
 >
   <div class="mc-modal__dialog" role="document">
     <header class="mc-modal__header">
-      {#if icon}
-        <span class="mc-modal__icon">
-          <slot name="icon" />
-        </span>
-      {/if}
+      <span class="mc-modal__icon">
+        <slot name="icon" />
+      </span>
       <h2 class="mc-modal__title" id="modalTitle">{title}</h2>
       {#if closable}
         <button
@@ -63,9 +66,7 @@
           aria-label="Close"
           onclick={onClose}
         >
-          <span class="mc-modal__icon">
-            <Cross24 aria-hidden="true" />
-          </span>
+          <Cross24 class="mc-modal__close" aria-hidden="true" />
         </button>
       {/if}
     </header>
@@ -77,16 +78,12 @@
       <slot />
     </main>
 
-    {#if footer}
-      <footer class="mc-modal__footer">
-        {#if link}
-          <span class="mc-modal__link">
-            <slot name="link" />
-          </span>
-        {/if}
-        <slot name="footer" />
-      </footer>
-    {/if}
+    <footer class="mc-modal__footer">
+      <span class="mc-modal__link">
+        <slot name="link" />
+      </span>
+      <slot name="footer" />
+    </footer>
   </div>
 
   <MOverlay isvisible={open} dialoglabel="modal" />
@@ -547,4 +544,8 @@
   border-color: transparent;
   color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
+}
+
+.mc-modal__icon:empty {
+  display: none;
 }</style>

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

@@ -1,12 +1,29 @@
+/**
+ * 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.
+ *
+ * @slot icon - Use this slot to insert an icon next to the title of the modal.
+ * @slot default - Use this slot to insert the content of the modal.
+ * @slot link - Use this slot to insert a link in the footer.
+ * @slot footer - Use this slot to insert buttons in the footer.
+ * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.
+ */
 interface Props {
+    /**
+     * if `true`, display the modal.
+     */
     open?: boolean;
-    title?: string;
+    /**
+     * Title of the modal.
+     */
+    title: string;
+    /**
+     * Description of the modal.
+     */
     description?: string;
+    /**
+     * if `true`, display the close button.
+     */
     closable?: boolean;
-    icon?: any;
-    footer?: any;
-    link?: any;
-    [key: string]: any;
 }
 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":"AAOE,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA8EH,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":"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"}

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,4 +1,4 @@
-import{c as u,p as f,a as g,b as c,f as v,t as p,u as h,e as x,g as z,h as k,i as _,d as y,j as b,r as w}from"../../custom-element.js";var j=v("<div> </div>");const N={hash:"svelte-sb883",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.
- */.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 B(d,a){f(a,!0),g(d,N);let s=c(a,"label",7,""),r=c(a,"appearance",7,"standard"),t=c(a,"size",7,"s");function l(e){const o=["mc-number-badge"];return r()&&o.push(`mc-number-badge--${r()}`),t()&&o.push(`mc-number-badge--${t()}`),o.join(" ")}var i={get label(){return s()},set label(e=""){s(e),b()},get appearance(){return r()},set appearance(e="standard"){r(e),b()},get size(){return t()},set size(e="s"){t(e),b()}},n=j(),m=y(n,!0);return w(n),p(e=>{x(n,1,e,"svelte-sb883"),z(m,s())},[()=>h(l(r()))]),k(d,n),_(i)}customElements.define("m-number-badge",u(B,{label:{},appearance:{},size:{}},[],[],!0));export{B 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":";;+iCAAA,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,4CAdc,GAAE,yDAAe,WAAU,6CAAS,IAAG,0EAkBpDL,GAAK,GADI,CAAA,IAAAM,EAAAH,EAAWF,EAAU,CAAA,CAAA,CAAA,cAFjC"}
+{"version":3,"file":"NumberBadge.js","sources":["../../../src/components/numberbadge/NumberBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-number-badge' }} />\n\n<script lang=\"ts\">\n  /**\n   * A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.\n   */\n  interface Props {\n    /**\n     * Content of the badge.\n     */\n    label: number;\n    /**\n     * Allows to define the badge appearance.\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n\n    /**\n     * Allows to define the badge size.\n     */\n    size?: 's' | 'm';\n  }\n\n  let { label, appearance = 'standard', size = 's' }: Props = $props();\n</script>\n\n<div class={['mc-number-badge', `mc-number-badge--${appearance}`, `mc-number-badge--${size}`]}>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/number-badge';\n</style>\n"],"names":["label","$.prop","$$props","appearance","size"],"mappings":";;+iCAAA,oBAsBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,sGAAtB,WAAU,6CAAS,IAAG,wDAGrC,sCAAuCD,EAAU,CAAA,uBAAwBC,GAAI,yBACvFJ,GAAK,eAHR"}

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,31 +1,29 @@
 <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'];
+    /**
+     * Content of the badge.
+     */
+    label: number;
+    /**
+     * Allows to define the badge appearance.
+     */
+    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
 
-    if (appearance) {
-      classes.push(`mc-number-badge--${appearance}`);
-    }
-
-    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>