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

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 {\n    tag = 'button',\n    selected = false,\n    href,\n    disabled,\n    ...attrs\n  }: 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,gBA8BI,IAAAA,cAAM,QAAQ,EACdC,mBAAW,EAAK,EAChBC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACLE,EAAAC,EAAAH,EAAA,sHAJG,SAAQ,qDACH,GAAK,mMAYCH,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/tab/Tab.svelte

@@ -0,0 +1,154 @@
+<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;
+    /**
+     * If `true`, the tab will be disabled.
+     */
+    disabled?: boolean;
+  }
+
+  let {
+    tag = 'button',
+    selected = false,
+    href,
+    disabled,
+    ...attrs
+  }: Props = $props();
+</script>
+
+<li class="mc-tabs__item" role="presentation">
+  {#if tag === 'button'}
+    <button
+      type="button"
+      role="tab"
+      aria-selected={selected}
+      class={[
+        'mc-tabs__tab',
+        selected && 'mc-tabs__tab--selected',
+        disabled && 'mc-tabs__tab--disabled',
+      ]}
+      {...attrs}
+    >
+      <span class="mc-tabs__icon">
+        <slot name="icon" />
+      </span>
+
+      <span class="mc-tabs__label">
+        <slot />
+      </span>
+    </button>
+  {:else}
+    <a
+      {href}
+      role="tab"
+      aria-selected={selected}
+      class={[
+        'mc-tabs__tab',
+        selected && 'mc-tabs__tab--selected',
+        disabled && 'mc-tabs__tab--disabled',
+      ]}
+      {...attrs}
+    >
+      <span class="mc-tabs__icon">
+        <slot name="icon" />
+      </span>
+      <span class="mc-tabs__label">
+        <slot />
+      </span>
+    </a>
+  {/if}
+</li>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-tabs {
+  background-color: var(--tabs-color-background-default, #ffffff);
+  position: relative;
+  width: 100%;
+  height: 3.5rem;
+}
+.mc-tabs__list {
+  list-style-type: none;
+  padding-inline-start: 0;
+  margin-block: 0;
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 0.25rem;
+}
+.mc-tabs__tab {
+  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:hover {
+  background-color: var(--tabs-color-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-tabs__tab: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 {
+  color: var(--tabs-color-text-selected, #006902);
+  background-color: var(--tabs-color-background-selected, #ebf5de);
+}
+.mc-tabs__tab--selected:hover {
+  background-color: var(--tabs-color-background-selected-hover, #c5e39e);
+}
+.mc-tabs__tab--disabled {
+  color: var(--tabs-color-text-disabled, #b3b3b3);
+  cursor: not-allowed;
+}
+.mc-tabs__tab--disabled:hover {
+  background: none;
+}
+.mc-tabs__label {
+  pointer-events: none;
+}
+.mc-tabs__icon {
+  fill: currentcolor;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.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;AAkDH,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. |
+

package/dist/components/tabs/Tabs.js

@@ -1,7 +1,4 @@
-import{c as b,p as u,a as h,b as r,v as g,l as p,f as _,m as y,d as o,t as x,e as w,h as k,i as j,j as d,r as f,E as z}from"../../custom-element.js";import{s as D}from"../../slot.js";var E=_('<nav><ul class="mc-tabs__list svelte-8f33ob" role="tablist" aria-label="Tabs default"><!></ul> <div class="mc-divider-horizontal svelte-8f33ob"></div></nav>');const T={hash:"svelte-8f33ob",code:`/**
+import{c as h,p as q,a as y,b as l,f as p,d as o,s as k,t as w,i as v,j as x,k as d,r as m,e as j,g as z}from"../../custom-element.js";import{i as D}from"../../if.js";import{s as E}from"../../slot.js";import{s as S}from"../../attributes.js";var T=p('<div class="mc-divider-horizontal svelte-qelc5p"></div>'),A=p('<nav><ul class="mc-tabs__list svelte-qelc5p" role="tablist"><!></ul> <!></nav>');const B={hash:"svelte-qelc5p",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-tabs.svelte-8f33ob {background-color:#ffffff;position:relative;width:100%;height:3.5rem;}.mc-tabs__list.svelte-8f33ob {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:0.5rem;padding:0.5rem 0.25rem;}.mc-tabs--centered.svelte-8f33ob .mc-tabs__list:where(.svelte-8f33ob) {justify-content:center;}.mc-divider-horizontal.svelte-8f33ob {background:#cccccc;height:0.0625rem;}`};function S(i,t){u(t,!0),h(i,T);let s=r(t,"activeindex",7),n=r(t,"centered",7),v=g(p(s()??0));var a=E();let c;var l=o(a),m=o(l);return D(m,t,"tab",{get active(){return y(v)}}),f(l),z(2),f(a),x(e=>c=w(a,1,"mc-tabs svelte-8f33ob",null,c,e),[()=>({"mc-tabs--centered":n()})]),k(i,a),j({get activeindex(){return s()},set activeindex(e){s(e),d()},get centered(){return n()},set centered(e){n(e),d()}})}customElements.define("mc-tabs",b(S,{activeindex:{},centered:{}},["tab"],[],!0));
+ */.mc-tabs.svelte-qelc5p {background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem;}.mc-tabs__list.svelte-qelc5p {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:0.5rem;padding:0.5rem 0.25rem;}.mc-tabs--centered.svelte-qelc5p .mc-tabs__list:where(.svelte-qelc5p) {justify-content:center;}.mc-divider-horizontal.svelte-qelc5p {background:var(--divider-color-primary, #cccccc);height:0.0625rem;}`};function C(n,t){q(t,!0),y(n,B);let a=l(t,"description",7),i=l(t,"divider",7,!0),c=l(t,"centered",7);var f={get description(){return a()},set description(e){a(e),d()},get divider(){return i()},set divider(e=!0){i(e),d()},get centered(){return c()},set centered(e){c(e),d()}},r=A(),s=o(r),u=o(s);E(u,t,"tab",{}),m(s);var b=k(s,2);{var _=e=>{var g=T();v(e,g)};D(b,e=>{i()&&e(_)})}return m(r),w(()=>{j(r,1,z(["mc-tabs",c()&&"mc-tabs--centered"]),"svelte-qelc5p"),S(s,"aria-label",a())}),v(n,r),x(f)}customElements.define("m-tabs",h(C,{description:{},divider:{},centered:{}},["tab"],[],!0));
 //# sourceMappingURL=Tabs.js.map

package/dist/components/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tabs' }} />\n\n<script lang=\"ts\">\n  let { activeindex, centered } = $props();\n\n  let active = $state(activeindex ?? 0);\n</script>\n\n<nav class=\"mc-tabs\" class:mc-tabs--centered={centered}>\n  <ul class=\"mc-tabs__list\" role=\"tablist\" aria-label=\"Tabs default\">\n    <slot name=\"tab\" {active} />\n  </ul>\n  <div class=\"mc-divider-horizontal\"></div>\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tabs';\n  @use '@mozaic-ds/styles/components/divider';\n</style>\n"],"names":["activeindex","$.prop","$$props","centered","active","$.state","$.proxy"],"mappings":";;;;;qaAAA,oBAGQA,EAAWC,EAAAC,EAAA,cAAA,CAAA,EAAEC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EAEvBE,EAAMC,EAAAC,EAAUN,EAAW,GAAI,CAAC,CAAA,6KAGQG,EAAQ,CAAA,EAAA,CAAA,6HAFtD"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-tabs' }} />\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 tab - use this slot to insert `m-tab` components.\n   */\n  interface Props {\n    /**\n     * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.\n     */\n    description?: string;\n    /**\n     * If `true`, the divider will appear.\n     */\n    divider?: boolean;\n    /**\n     * If `true`, the tabs of the component will be centered.\n     */\n    centered?: boolean;\n  }\n\n  let { description, divider = true, centered }: Props = $props();\n</script>\n\n<nav class={['mc-tabs', centered && 'mc-tabs--centered']}>\n  <ul class=\"mc-tabs__list\" role=\"tablist\" aria-label={description}>\n    <slot name=\"tab\" />\n  </ul>\n  {#if divider}\n    <div class=\"mc-divider-horizontal\"></div>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tabs';\n  @use '@mozaic-ds/styles/components/divider';\n</style>\n"],"names":["description","$.prop","$$props","divider","centered","$$render","consequent"],"mappings":";;yeAAA,oBAuBQA,EAAWC,EAAAC,EAAA,cAAA,CAAA,EAAEC,kBAAU,EAAI,EAAEC,EAAQH,EAAAC,EAAA,WAAA,CAAA,4GAAd,GAAI,4JAO5BC,EAAO,GAAAE,EAAAC,CAAA,gCAJD,UAAWF,KAAY,mBAAmB,CAAA,EAAA,eAAA,mBACAJ,GAAW,eAHlE"}

package/dist/components/tabs/Tabs.spec.js

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Tabs from './Tabs.svelte';
+describe('mc-tabs component', () => {
+    it('renders <nav> with the base class', () => {
+        const { container } = render(Tabs);
+        const nav = container.querySelector('nav');
+        expect(nav).toBeTruthy();
+        expect(nav?.classList.contains('mc-tabs')).toBe(true);
+    });
+    it('adds the "mc-tabs--centered" class when centered is true', () => {
+        const { container } = render(Tabs, {
+            props: { centered: true },
+        });
+        const nav = container.querySelector('nav');
+        expect(nav?.classList.contains('mc-tabs--centered')).toBe(true);
+    });
+    it('renders a <ul> with role="tablist"', () => {
+        const { container } = render(Tabs);
+        const ul = container.querySelector('ul.mc-tabs__list');
+        expect(ul).toBeTruthy();
+        expect(ul?.getAttribute('role')).toBe('tablist');
+    });
+    it('sets aria-label on the tablist when description is provided', () => {
+        const description = 'My tab description';
+        const { container } = render(Tabs, {
+            props: { description },
+        });
+        const ul = container.querySelector('ul.mc-tabs__list');
+        expect(ul?.getAttribute('aria-label')).toBe(description);
+    });
+    it('renders a divider by default', () => {
+        const { container } = render(Tabs);
+        const divider = container.querySelector('.mc-divider-horizontal');
+        expect(divider).toBeTruthy();
+    });
+    it('does not render divider when divider is false', () => {
+        const { container } = render(Tabs, {
+            props: { divider: false },
+        });
+        const divider = container.querySelector('.mc-divider-horizontal');
+        expect(divider).toBeNull();
+    });
+    it('renders without crashing when value prop is provided', () => {
+        const { container } = render(Tabs, {
+            props: { value: 2 },
+        });
+        const nav = container.querySelector('nav');
+        expect(nav).toBeTruthy();
+    });
+});

package/dist/components/tabs/Tabs.stories.d.ts

@@ -1,7 +1,10 @@
-import type { Meta } from '@storybook/html-vite';
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const Centered: any;
-export declare const WithIcons: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Icons: Story;
+export declare const Centered: Story;
+export declare const NoDivider: Story;
+export declare const Disabled: Story;
 //# sourceMappingURL=Tabs.stories.d.ts.map

package/dist/components/tabs/Tabs.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,sBAAsB,CAAC;wBAyBrD,IAAI;AArBT,wBAqBU;AAsCV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAoBzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAoD1C,eAAO,MAAM,SAAS,KAAwB,CAAC"}
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAsBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAqBnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC"}