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

package/dist/components/statusnotification/StatusNotification.stories.js

@@ -1,101 +1,68 @@
-import { within, expect } from 'storybook/test';
+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';
-/**
- * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged.
- * It often provides feedback on a process, highlights a status update, or alerts users about an issue.
- * Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.
- * The `StatusNotification` component is the **Svelte / WebComponent** implementation of the **Status Notification** component of Mozaic Design System.
- */
-export default {
+const meta = {
     title: 'Status/Status Notification',
-    tags: ['autodocs', 'new'],
+    component: 'm-status-notification',
     argTypes: {
-        title: {
-            description: 'Specify the notification title',
-            control: 'text',
-        },
-        closable: {
-            description: 'Specify if the notification is closable',
-            control: 'boolean',
-        },
-        hasfooter: {
-            description: 'Specify if the notification has a footer',
-            control: 'boolean',
-        },
         status: {
-            description: 'Specify the notification type',
-            control: { type: 'radio' },
-            options: ['warning', 'error', 'success', 'info'],
+            control: 'radio',
+            options: ['info', 'success', 'warning', 'error'],
         },
-        onclose: {
-            name: 'onclose',
-            description: 'On close button clicked',
-            action: 'click',
-            table: {
-                category: 'Events',
-            },
+        close: {
+            control: false,
         },
     },
+    args: {
+        title: 'This is a title, be concise and use the description message to give details.',
+        description: 'Description message.',
+    },
+    render: (args) => html ` <m-status-notification
+      title=${ifDefined(args.title)}
+      description=${ifDefined(args.description)}
+      status=${ifDefined(args.status)}
+      closable=${ifDefined(args.closable)}
+      @close=${action('close')}
+    >
+      ${unsafeHTML(ifDefined(args.footer))}
+    </m-status-notification>`,
 };
-const Template = (args) => {
-    const notification = document.createElement('m-status-notification');
-    notification.setAttribute('title', 'This is a title');
-    if (args.closable)
-        notification.setAttribute('closable', args.closable);
-    if (args.hasfooter)
-        notification.setAttribute('hasfooter', args.hasfooter);
-    notification.innerText = 'This is a description, be concise and use the description message to give details.';
-    const Slot = document.createElement('div');
-    Slot.setAttribute('slot', 'footer');
-    Slot.classList.add('content-slot');
-    Slot.innerHTML = 'Insert footer slot (Action element)';
-    notification.appendChild(Slot);
-    if (args.title)
-        notification.setAttribute('title', args.title);
-    if (args.description)
-        notification.setAttribute('description', args.description);
-    if (args.status)
-        notification.setAttribute('status', args.status);
-    notification.onclose = action('onclose');
-    return notification;
+export default meta;
+export const Info = {};
+export const Success = {
+    args: { status: 'success' },
 };
-export const Default = Template.bind({});
-Default.args = {};
-Default.play = async ({ canvasElement }) => {
-    const notification = canvasElement.querySelector('m-status-notification');
-    expect(notification?.getAttribute('title')).toBe('This is a title');
+export const Warning = {
+    args: { status: 'warning' },
 };
-export const Warning = Template.bind({});
-Warning.args = { title: 'Warning Notification', status: 'warning' };
-Warning.play = async ({ canvasElement }) => {
-    const notification = canvasElement.querySelector('m-status-notification');
-    expect(notification).toHaveAttribute('status', 'warning');
-    expect(notification?.getAttribute('title')).toBe('Warning Notification');
+export const Error = {
+    args: { status: 'error' },
 };
-export const Danger = Template.bind({});
-Danger.args = { title: 'Danger Notification', status: 'error' };
-Danger.play = async ({ canvasElement }) => {
-    const notification = canvasElement.querySelector('m-status-notification');
-    expect(notification).toHaveAttribute('status', 'error');
-    expect(notification?.getAttribute('title')).toBe('Danger Notification');
+export const Closable = {
+    args: { closable: true },
 };
-export const Success = Template.bind({});
-Success.args = { title: 'Success Notification', status: 'success' };
-Success.play = async ({ canvasElement }) => {
-    const notification = canvasElement.querySelector('m-status-notification');
-    expect(notification).toHaveAttribute('status', 'success');
-    expect(notification?.getAttribute('title')).toBe('Success Notification');
+export const WithButton = {
+    args: {
+        footer: `<m-button outlined slot="footer">Button Label</m-button>`,
+    },
 };
-export const WithFooter = Template.bind({});
-WithFooter.args = {
-    title: 'Success Notification',
-    status: 'success',
-    hasfooter: 'true',
+export const WithButtons = {
+    args: {
+        footer: `
+      <m-button slot="footer">Button Label</m-button>
+      <m-button slot="footer" outlined="true">Button Label</m-button>
+    `,
+    },
 };
-WithFooter.play = async ({ canvasElement }) => {
-    const notification = canvasElement.querySelector('m-status-notification');
-    const footerSlot = notification?.querySelector('[slot="footer"]');
-    expect(notification).toHaveAttribute('hasfooter', 'true');
-    expect(footerSlot).toBeTruthy();
-    expect(footerSlot?.textContent).toContain('Insert footer slot');
+export const WithLink = {
+    args: {
+        footer: `
+      <m-link href="#" iconPosition="right" slot="footer">
+        Stand-alone link
+
+        <arrow-next-20 slot="icon"></arrow-next-20>
+      </m-link>
+    `,
+    },
 };

package/dist/components/statusnotification/StatusNotification.svelte

@@ -1,39 +1,41 @@
 <svelte:options customElement={{ tag: 'm-status-notification' }} />
 
 <script lang="ts">
-  import type { Snippet } from 'svelte';
   import Cross20 from '@mozaic-ds/icons-svelte/svelte/Cross20/Cross20.svelte';
-  import InfoCircle32 from '@mozaic-ds/icons-svelte/svelte/InfoCircle32/InfoCircle32.svelte';
-  import WarningCircle32 from '@mozaic-ds/icons-svelte/svelte/WarningCircle32/WarningCircle32.svelte';
-  import CrossCircle32 from '@mozaic-ds/icons-svelte/svelte/CrossCircle32/CrossCircle32.svelte';
-  import CheckCircle32 from '@mozaic-ds/icons-svelte/svelte/CheckCircle32/CheckCircle32.svelte';
-
+  import InfoCircle32 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled32/InfoCircleFilled32.svelte';
+  import WarningCircle32 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled32/WarningCircleFilled32.svelte';
+  import CrossCircle32 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled32/CrossCircleFilled32.svelte';
+  import CheckCircle32 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled32/CheckCircleFilled32.svelte';
+  /**
+   * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.
+   *
+   * @slot footer - Use this slot to insert a button or a link in the footer
+   * @event close {CustomEvent<void>} - Emits when closing the notification.
+   */
   interface Props {
+    /**
+     * Title of the status notification.
+     */
     title: string;
-    children?: Snippet;
-    status?: 'information' | 'success' | 'warning' | 'error';
+    /**
+     * Description of the status notification.
+     */
+    description: string;
+    /**
+     * Allows to define the status notification type.
+     */
+    status?: 'info' | 'success' | 'warning' | 'error';
+    /**
+     * if `true`, display the close button.
+     */
     closable?: boolean;
-    hasfooter?: boolean;
-    footer?: Snippet;
-    closelabel?: string;
-    titletag?: string;
-    onclose?: (event: MouseEvent) => void;
   }
 
-  let {
-    title,
-    children,
-    status = 'information',
-    closable = false,
-    hasfooter = false,
-    footer,
-    closelabel = 'Close',
-    titletag = 'h2',
-    onclose,
-  }: Props = $props();
+  let { title, description, status = 'info', closable }: Props = $props();
+  let element: HTMLElement;
 
   const iconMap = [
-    { status: 'information', component: InfoCircle32 },
+    { status: 'info', component: InfoCircle32 },
     { status: 'success', component: CheckCircle32 },
     { status: 'warning', component: WarningCircle32 },
     { status: 'error', component: CrossCircle32 },
@@ -44,57 +46,43 @@
   }
 
   let selected = $state(getSelected(status));
+
+  const onClose = () => {
+    const event = new CustomEvent('close', {
+      bubbles: true,
+      composed: true,
+    });
+    element.dispatchEvent(event);
+  };
 </script>
 
 <section
-  class="mc-status-notification"
+  class={['mc-status-notification', `mc-status-notification--${status}`]}
   role="status"
-  class:mc-status-notification--success={status === 'success'}
-  class:mc-status-notification--warning={status === 'warning'}
-  class:mc-status-notification--error={status === 'error'}
+  bind:this={element}
 >
   <span class="mc-status-notification__icon" aria-hidden="true">
-    <selected.component
-      class="mc-status-notification__icon"
-      aria-hidden="true"
-    />
+    <selected.component class="mc-status-notification__icon" aria-hidden="true" />
   </span>
 
   <div class="mc-status-notification__content">
-    {#if title}
-      <svelte:element this={titletag} class="mc-status-notification__title"
-      >{title}</svelte:element
-      >
-    {/if}
+    <h2 class="mc-status-notification__title">{title}</h2>
     <p class="mc-status-notification__message">
-      {#if children}
-        {@render children()}
-      {:else}
-        <slot />
-      {/if}
+      {description}
     </p>
 
-    {#if hasfooter}
-      <div class="mc-status-notification__footer">
-        {#if footer}
-          {@render footer()}
-        {:else}
-          <slot name="footer" />
-        {/if}
-      </div>
-    {/if}
+    <div class="mc-status-notification__footer">
+      <slot name="footer" />
+    </div>
   </div>
 
   {#if closable}
-    <button 
-      class="mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost" 
+    <button
+      class="mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost"
       aria-label="Close"
-      onclick={onclose}
+      onclick={onClose}
     >
-      <Cross20
-        class="mc-status-notification-closable__icon"
-        aria-hidden="true"
-      />
+      <Cross20 class="mc-status-notification-closable__icon" aria-hidden="true" />
     </button>
   {/if}
 </section>
@@ -441,16 +429,13 @@
   cursor: not-allowed;
 }
 
-/* create columns */
-/* create columns */
-/* create custom named columns with custom content */
 .mc-status-notification {
   border-radius: var(--radius-m, 0.5rem);
+  background: var(--status-notification-color-background-information, #e1f3f9);
+  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-information, #3facd7);
   display: flex;
   flex-flow: row wrap;
   align-items: flex-start;
-  background: var(--status-notification-color-background-information, #e1f3f9);
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-information, #3facd7);
   position: relative;
   box-sizing: border-box;
   color: var(--status-notification-color-text, #000000);
@@ -515,4 +500,8 @@
 }
 .mc-status-notification-closable__close {
   margin: 0.25rem;
+}
+
+.mc-status-notification__footer:empty {
+  display: none;
 }</style>

package/dist/components/statusnotification/StatusNotification.svelte.d.ts

@@ -1,14 +1,26 @@
-import type { Snippet } from 'svelte';
+/**
+ * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.
+ *
+ * @slot footer - Use this slot to insert a button or a link in the footer
+ * @event close {CustomEvent<void>} - Emits when closing the notification.
+ */
 interface Props {
+    /**
+     * Title of the status notification.
+     */
     title: string;
-    children?: Snippet;
-    status?: 'information' | 'success' | 'warning' | 'error';
+    /**
+     * Description of the status notification.
+     */
+    description: string;
+    /**
+     * Allows to define the status notification type.
+     */
+    status?: 'info' | 'success' | 'warning' | 'error';
+    /**
+     * if `true`, display the close button.
+     */
     closable?: boolean;
-    hasfooter?: boolean;
-    footer?: Snippet;
-    closelabel?: string;
-    titletag?: string;
-    onclose?: (event: MouseEvent) => void;
 }
 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> & {
@@ -23,18 +35,9 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const StatusNotification: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
-    default: {};
-    footer: {};
-}>, {
+declare const StatusNotification: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {
-    default: {};
     footer: {};
 }, {}, "">;
 type StatusNotification = InstanceType<typeof StatusNotification>;

package/dist/components/statusnotification/StatusNotification.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusNotification.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusnotification/StatusNotification.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAQpC,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AA6EH,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,kBAAkB;;;;;;;;UAAqF,CAAC;AAC5F,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACpE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"StatusNotification.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusnotification/StatusNotification.svelte.ts"],"names":[],"mappings":"AASE;;;;;GAKG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA+DH,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;AAUD,QAAA,MAAM,kBAAkB;;;;UAAqF,CAAC;AAC5F,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACpE,eAAe,kBAAkB,CAAC"}

package/dist/components/tab/README.md

@@ -0,0 +1,20 @@
+# `m-tab`
+
+Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `tag` | The HTML tag used for the tab. | `'a'` `'button'` | `button` |
+| `selected` | If `true`, the tab will be selected. | `boolean` | `false` |
+| `href` | URL for the tab link. | `string` |   |
+| `disabled` | If `true`, the tab will be disabled. | `boolean` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `icon` | Use this slot to insert an icon for the tab. |
+| `default` | The content displayed in the tab. |
+

package/dist/components/tab/Tab.js

@@ -0,0 +1,4 @@
+import{c as E,p as S,a as T,b as f,f as h,d as o,i as u,j as q,k as i,z as A,r,s as y}from"../../custom-element.js";import{i as B}from"../../if.js";import{s as b}from"../../slot.js";import{b as x}from"../../attributes.js";var C=h('<button><span class="mc-tabs__icon svelte-g14hff"><!></span> <span class="mc-tabs__label svelte-g14hff"><!></span></button>'),F=h('<a><span class="mc-tabs__icon svelte-g14hff"><!></span> <span class="mc-tabs__label svelte-g14hff"><!></span></a>'),G=h('<li class="mc-tabs__item" role="presentation"><!></li>');const H={hash:"svelte-g14hff",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-tabs.svelte-g14hff {background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem;}.mc-tabs__list.svelte-g14hff {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:0.5rem;padding:0.5rem 0.25rem;}.mc-tabs__tab.svelte-g14hff {font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-semi-bold, 600);align-items:center;background:none;border:none;border-radius:var(--radius-s, 0.25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:0.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:0.75rem;padding-right:0.75rem;position:relative;text-decoration:none;}.mc-tabs__tab.svelte-g14hff:hover {background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-tabs__tab.svelte-g14hff: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-tabs__tab--selected.svelte-g14hff {color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de);}.mc-tabs__tab--selected.svelte-g14hff:hover {background-color:var(--tabs-color-background-selected-hover, #c5e39e);}.mc-tabs__tab--disabled.svelte-g14hff {color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed;}.mc-tabs__tab--disabled.svelte-g14hff:hover {background:none;}.mc-tabs__label.svelte-g14hff {pointer-events:none;}.mc-tabs__icon.svelte-g14hff {fill:currentcolor;height:1.5rem;width:1.5rem;}.mc-tabs__icon.svelte-g14hff:empty {display:none;}`};function I(p,t){S(t,!0),T(p,H);let d=f(t,"tag",7,"button"),l=f(t,"selected",7,!1),v=f(t,"href",7),n=f(t,"disabled",7),k=A(t,["$$slots","$$events","$$legacy","$$host","tag","selected","href","disabled"]);var w={get tag(){return d()},set tag(e="button"){d(e),i()},get selected(){return l()},set selected(e=!1){l(e),i()},get href(){return v()},set href(e){v(e),i()},get disabled(){return n()},set disabled(e){n(e),i()}},m=G(),z=o(m);{var j=e=>{var a=C();x(a,()=>({type:"button",role:"tab","aria-selected":l(),class:["mc-tabs__tab",l()&&"mc-tabs__tab--selected",n()&&"mc-tabs__tab--disabled"],...k}),void 0,void 0,"svelte-g14hff");var s=o(a),_=o(s);b(_,t,"icon",{}),r(s);var c=y(s,2),g=o(c);b(g,t,"default",{}),r(c),r(a),u(e,a)},D=e=>{var a=F();x(a,()=>({href:v(),role:"tab","aria-selected":l(),class:["mc-tabs__tab",l()&&"mc-tabs__tab--selected",n()&&"mc-tabs__tab--disabled"],...k}),void 0,void 0,"svelte-g14hff");var s=o(a),_=o(s);b(_,t,"icon",{}),r(s);var c=y(s,2),g=o(c);b(g,t,"default",{}),r(c),r(a),u(e,a)};B(z,e=>{d()==="button"?e(j):e(D,!1)})}return r(m),u(p,m),q(w)}customElements.define("m-tab",E(I,{tag:{},selected:{},href:{},disabled:{}},["icon","default"],[],!0));
+//# sourceMappingURL=Tab.js.map

package/dist/components/tab/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sources":["../../../src/components/tab/Tab.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-tab' }} />\n\n<script lang=\"ts\">\n  /**\n   * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.\n   *\n   * @slot default - The content displayed in the tab.\n   * @slot icon - Use this slot to insert an icon for the tab.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * The HTML tag used for the tab.\n     */\n    tag?: 'a' | 'button';\n    /**\n     * If `true`, the tab will be selected.\n     */\n    selected?: boolean;\n    /**\n     * URL for the tab link.\n     */\n    href?: string;\n    /**\n     * If `true`, the tab will be disabled.\n     */\n    disabled?: boolean;\n  }\n\n  let { tag = 'button', selected = false, href, disabled, ...attrs }: Props = $props();\n</script>\n\n<li class=\"mc-tabs__item\" role=\"presentation\">\n  {#if tag === 'button'}\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={selected}\n      class={[\n        'mc-tabs__tab',\n        selected && 'mc-tabs__tab--selected',\n        disabled && 'mc-tabs__tab--disabled',\n      ]}\n      {...attrs}\n    >\n      <span class=\"mc-tabs__icon\">\n        <slot name=\"icon\" />\n      </span>\n\n      <span class=\"mc-tabs__label\">\n        <slot />\n      </span>\n    </button>\n  {:else}\n    <a\n      {href}\n      role=\"tab\"\n      aria-selected={selected}\n      class={[\n        'mc-tabs__tab',\n        selected && 'mc-tabs__tab--selected',\n        disabled && 'mc-tabs__tab--disabled',\n      ]}\n      {...attrs}\n    >\n      <span class=\"mc-tabs__icon\">\n        <slot name=\"icon\" />\n      </span>\n      <span class=\"mc-tabs__label\">\n        <slot />\n      </span>\n    </a>\n  {/if}\n</li>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tabs';\n\n  .mc-tabs__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["tag","selected","href","$.prop","$$props","disabled","attrs","$.rest_props","$$render","consequent","alternate"],"mappings":";;4qDAAA,gBA6BQ,IAAAA,cAAM,QAAQ,EAAEC,mBAAW,EAAK,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EAAKE,EAAKC,EAAAH,EAAA,sHAApD,SAAQ,qDAAa,GAAK,mMAQnBH,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,mMAcWL,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,6IA9BHN,EAAG,IAAK,SAAQQ,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,2BAHvB"}

package/dist/components/tab/Tab.spec.js

@@ -0,0 +1,58 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Tab from './Tab.svelte';
+describe('mc-tab component', () => {
+    it('renders as a <button> by default', () => {
+        const { container } = render(Tab);
+        const button = container.querySelector('button');
+        expect(button).toBeTruthy();
+        expect(button?.getAttribute('role')).toBe('tab');
+        expect(button?.classList.contains('mc-tabs__tab')).toBe(true);
+    });
+    it('renders as an <a> when tag="a" is passed', () => {
+        const { container } = render(Tab, {
+            props: { tag: 'a', href: '/example' },
+        });
+        const anchor = container.querySelector('a');
+        expect(anchor).toBeTruthy();
+        expect(anchor?.getAttribute('role')).toBe('tab');
+        expect(anchor?.getAttribute('href')).toBe('/example');
+        expect(anchor?.classList.contains('mc-tabs__tab')).toBe(true);
+    });
+    it('applies selected class when selected=true', () => {
+        const { container } = render(Tab, {
+            props: { selected: true },
+        });
+        const button = container.querySelector('button');
+        expect(button?.getAttribute('aria-selected')).toBe('true');
+        expect(button?.classList.contains('mc-tabs__tab--selected')).toBe(true);
+    });
+    it('applies disabled class when disabled=true', () => {
+        const { container } = render(Tab, {
+            props: { disabled: true },
+        });
+        const button = container.querySelector('button');
+        expect(button?.classList.contains('mc-tabs__tab--disabled')).toBe(true);
+    });
+    it('fires click event when clicked', async () => {
+        const { container } = render(Tab);
+        const button = container.querySelector('button');
+        const clickHandler = vi.fn();
+        button.addEventListener('click', clickHandler);
+        await fireEvent.click(button);
+        expect(clickHandler).toHaveBeenCalledOnce();
+    });
+    it('passes arbitrary attributes to the button element', () => {
+        const { container } = render(Tab, {
+            props: {
+                'aria-label': 'My tab',
+                name: 'custom-tab',
+                id: 'tab-1',
+            },
+        });
+        const button = container.querySelector('button');
+        expect(button.getAttribute('aria-label')).toBe('My tab');
+        expect(button.getAttribute('name')).toBe('custom-tab');
+        expect(button.getAttribute('id')).toBe('tab-1');
+    });
+});

package/dist/components/{tabs → tab}/Tab.svelte

@@ -1,23 +1,33 @@
-<svelte:options customElement={{ tag: 'mc-tab' }} />
+<svelte:options customElement={{ tag: 'm-tab' }} />
 
 <script lang="ts">
+  /**
+   * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.
+   *
+   * @slot default - The content displayed in the tab.
+   * @slot icon - Use this slot to insert an icon for the tab.
+   */
   interface Props {
+    [key: string]: any;
+    /**
+     * The HTML tag used for the tab.
+     */
+    tag?: 'a' | 'button';
+    /**
+     * If `true`, the tab will be selected.
+     */
     selected?: boolean;
+    /**
+     * URL for the tab link.
+     */
     href?: string;
-    tag?: 'a' | 'button';
+    /**
+     * If `true`, the tab will be disabled.
+     */
     disabled?: boolean;
-    hasiconslot?: boolean;
-    [key: string]: any; // pour on:click etc.
   }
 
-  let {
-    selected = false,
-    href,
-    tag = 'button',
-    disabled = false,
-    hasiconslot = false,
-    ...events
-  }: Props = $props();
+  let { tag = 'button', selected = false, href, disabled, ...attrs }: Props = $props();
 </script>
 
 <li class="mc-tabs__item" role="presentation">
@@ -26,16 +36,16 @@
       type="button"
       role="tab"
       aria-selected={selected}
-      class="mc-tabs__tab"
-      class:mc-tabs__tab--selected={selected}
-      class:mc-tabs__tab--disabled={disabled}
-      {...events}
+      class={[
+        'mc-tabs__tab',
+        selected && 'mc-tabs__tab--selected',
+        disabled && 'mc-tabs__tab--disabled',
+      ]}
+      {...attrs}
     >
-      {#if hasiconslot}
-        <span class="mc-tabs__icon">
-          <slot name="icon" />
-        </span>
-      {/if}
+      <span class="mc-tabs__icon">
+        <slot name="icon" />
+      </span>
 
       <span class="mc-tabs__label">
         <slot />
@@ -46,16 +56,16 @@
       {href}
       role="tab"
       aria-selected={selected}
-      class="mc-tabs__tab"
-      class:mc-tabs__tab--selected={selected}
-      class:mc-tabs__tab--disabled={disabled}
-      {...events}
+      class={[
+        'mc-tabs__tab',
+        selected && 'mc-tabs__tab--selected',
+        disabled && 'mc-tabs__tab--disabled',
+      ]}
+      {...attrs}
     >
-      {#if hasiconslot}
-        <span class="mc-tabs__icon">
-          <slot name="icon" />
-        </span>
-      {/if}
+      <span class="mc-tabs__icon">
+        <slot name="icon" />
+      </span>
       <span class="mc-tabs__label">
         <slot />
       </span>
@@ -131,4 +141,8 @@
 }
 .mc-tabs--centered .mc-tabs__list {
   justify-content: center;
+}
+
+.mc-tabs__icon:empty {
+  display: none;
 }</style>

package/dist/components/{tabs → tab}/Tab.svelte.d.ts

@@ -1,10 +1,27 @@
+/**
+ * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.
+ *
+ * @slot default - The content displayed in the tab.
+ * @slot icon - Use this slot to insert an icon for the tab.
+ */
 interface Props {
+    [key: string]: any;
+    /**
+     * The HTML tag used for the tab.
+     */
+    tag?: 'a' | 'button';
+    /**
+     * If `true`, the tab will be selected.
+     */
     selected?: boolean;
+    /**
+     * URL for the tab link.
+     */
     href?: string;
-    tag?: 'a' | 'button';
+    /**
+     * If `true`, the tab will be disabled.
+     */
     disabled?: boolean;
-    hasiconslot?: boolean;
-    [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/tab/Tab.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tab/Tab.svelte.ts"],"names":[],"mappings":"AAGE;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA4CH,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,GAAG;;;;;;;;UAAqF,CAAC;AAC7E,KAAK,GAAG,GAAG,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC;AACtC,eAAe,GAAG,CAAC"}

package/dist/components/tabs/README.md

@@ -0,0 +1,18 @@
+# `m-tabs`
+
+Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `description` | A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component. | `string` |   |
+| `divider` | If `true`, the divider will appear. | `boolean` | `true` |
+| `centered` | If `true`, the tabs of the component will be centered. | `boolean` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `tab` | use this slot to insert `m-tab` components. |
+