@mozaic-ds/web-components 1.2.0 → 1.4.0

package/dist/components/steppercompact/StepperCompact.stories.d.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './StepperCompact.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/steppercompact/StepperCompact.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepperCompact.stories.d.ts","sourceRoot":"","sources":["../../../src/components/steppercompact/StepperCompact.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAwBX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
+{"version":3,"file":"StepperCompact.stories.d.ts","sourceRoot":"","sources":["../../../src/components/steppercompact/StepperCompact.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,yBAAyB,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IAwBX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/components/steppercompact/StepperCompact.stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import './StepperCompact.svelte';
 const meta = {
     title: 'Indicators/Stepper Compact',
     component: 'm-stepper-compact',

package/dist/components/stepperinline/README.md

@@ -0,0 +1,11 @@
+# `m-stepper-inline`
+
+An inline stepper is a horizontal navigation component that displays a sequence of steps in a linear fashion. It helps users understand their progress through a multi-step process by visually indicating the current step, completed steps, and upcoming steps. Inline steppers are typically used in forms, onboarding flows, and checkout processes to enhance user experience and provide clarity on the workflow.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `step` | Current step of the stepper compact. | `number` | `$bindable(1)` |
+| `steps` | Steps of the stepper inline. | `Array<{ label: string; additionalinfo?: string; }>` | `$bindable([])` |
+

package/dist/components/stepperinline/StepperInline.js

@@ -0,0 +1,16 @@
+import{c as H,p as J,a as K,b as $,m as L,f as a,g as N,h as l,i as O,d as i,j as C,r as s,q as t,s as j,t as M,n as g,o as x,e as P,x as y}from"../../custom-element.js";import{i as q}from"../../if.js";import{e as Q,i as T}from"../../each.js";import{a as U}from"../../attributes.js";import{e as V,f as W}from"../../Condition20.js";var X=l('<span class="mc-stepper-inline__icon mc-stepper-inline__icon--check svelte-s80odb" aria-hidden="true"><!></span>'),Y=l("<span></span>"),Z=l('<span class="mc-stepper-inline__icon mc-stepper-inline__icon--chevron svelte-s80odb" aria-hidden="true"><!></span>'),ee=l('<li><!> <div class="mc-stepper-inline__content svelte-s80odb"><span> </span></div> <!></li>'),re=l('<nav><ol class="mc-stepper-inline__container svelte-s80odb"></ol></nav>');const te={hash:"svelte-s80odb",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-stepper-inline__container.svelte-s80odb {display:flex;align-items:center;gap:1rem;list-style:none;padding:0;margin:0;}.mc-stepper-inline__label.svelte-s80odb {font-size:var(--font-size-100, 0.875rem);transition:color 200ms ease;}.mc-stepper-inline__label.is-current.svelte-s80odb {font-weight:var(--font-weight-medium, 600);color:var(--stepper-color-step-label-active, #000000);}.mc-stepper-inline__item.svelte-s80odb {display:inline-flex;align-items:center;gap:0.5rem;color:var(--stepper-color-step-label-default, #666666);}.mc-stepper-inline__item.is-completed.svelte-s80odb: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;border-radius:var(--border-radius-s, 0.25rem);}.mc-stepper-inline__item.is-completed.svelte-s80odb:hover {cursor:pointer;}.mc-stepper-inline__item.is-completed.svelte-s80odb:hover .mc-stepper-inline__label:where(.svelte-s80odb) {text-decoration:underline;}.mc-stepper-inline__icon.svelte-s80odb {fill:var(--stepper-color-information, #666666);display:flex;flex-shrink:0;}.mc-stepper-inline__icon--check.svelte-s80odb {box-sizing:border-box;width:1.5rem;height:1.5rem;background-color:transparent;border:0.125rem solid var(--stepper-color-information, #666666);border-radius:1rem;}.mc-stepper-inline__icon--chevron.svelte-s80odb {width:1.25rem;height:1.25rem;}.mc-stepper-inline__circle.svelte-s80odb {box-sizing:border-box;width:1.5rem;height:1.5rem;border-radius:50%;border:0.125rem solid var(--stepper-color-information, #666666);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-medium, 600);color:var(--stepper-color-information, #666666);background-color:var(--stepper-color-step-item-default-background, #ffffff);flex-shrink:0;transition:background-color 200ms ease, color 200ms ease, border-color 200ms ease;}.mc-stepper-inline__circle.is-current.svelte-s80odb {background-color:var(--stepper-color-step-item-active-background, #117f03);color:var(--stepper-color-step-item-active-text, #ffffff);border-color:transparent;
+  animation: svelte-s80odb-pop-in 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;}.mc-stepper-inline__content.svelte-s80odb {display:flex;flex-direction:column;margin-right:0.5rem;}.mc-stepper-inline__additional.svelte-s80odb {font-size:var(--font-size-50, 0.75rem);color:var(--stepper-color-information, #666666);}.mc-stepper-inline__separator.svelte-s80odb {color:var(--stepper-color-information, #666666);margin-left:1rem;}
+
+@keyframes svelte-s80odb-pop-in {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}.mc-stepper-inline__icon {align-items:center;}`};function se(k,p){J(p,!0),K(k,te);let f=$(p,"step",15,1),o=$(p,"steps",31,()=>L([])),D=O(p,["$$slots","$$events","$$legacy","$$host","step","steps"]);const w=y(()=>()=>Math.min(Math.max(f()??1,1),o().length??1)),E=y(()=>()=>o().map((n,m)=>({completed:m+1<t(w)(),current:m+1===t(w)()})));var I={get step(){return f()},set step(n=1){f(n),C()},get steps(){return o()},set steps(n=[]){o(n),C()}},c=re();U(c,()=>({class:"mc-stepper-inline","aria-label":"Stepper",...D}),void 0,void 0,void 0,"svelte-s80odb");var z=i(c);return Q(z,21,o,T,(n,m,_,oe)=>{const d=y(()=>t(E)()[_]);var v=ee(),S=i(v);{var R=r=>{var e=X(),h=i(e);V(h,{}),s(e),a(r,e)},A=r=>{var e=Y();e.textContent=_+1,M(()=>g(e,1,x(["mc-stepper-inline__circle",t(d).current?"is-current":""]),"svelte-s80odb")),a(r,e)};q(S,r=>{t(d).completed?r(R):r(A,!1)})}var b=j(S,2),u=i(b),B=i(u,!0);s(u),s(b);var F=j(b,2);{var G=r=>{var e=Z(),h=i(e);W(h,{}),s(e),a(r,e)};q(F,r=>{_<o().length-1&&r(G)})}s(v),M(()=>{g(v,1,x(["mc-stepper-inline__item",t(d).completed?"is-completed":""]),"svelte-s80odb"),g(u,1,x(["mc-stepper-inline__label",t(d).current?"is-current":""]),"svelte-s80odb"),P(B,t(m).label)}),a(n,v)}),s(z),s(c),a(k,c),N(I)}customElements.define("m-stepper-inline",H(se,{step:{},steps:{}},[],[],!0));
+//# sourceMappingURL=StepperInline.js.map

package/dist/components/stepperinline/StepperInline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperInline.js","sources":["../../../src/components/stepperinline/StepperInline.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-stepper-inline' }} />\n\n<script lang=\"ts\">\n  import { Check24 } from '@mozaic-ds/icons-svelte';\n  import { ChevronRight24 } from '@mozaic-ds/icons-svelte';\n  /**\n   * An inline stepper is a horizontal navigation component that displays a sequence of steps in a linear fashion. It helps users understand their progress through a multi-step process by visually indicating the current step, completed steps, and upcoming steps. Inline steppers are typically used in forms, onboarding flows, and checkout processes to enhance user experience and provide clarity on the workflow.\n   */\n\n  interface Props {\n    [key: string]: any;\n    /**\n     * Current step of the stepper compact.\n     */\n    step?: number;\n\n    /**\n     * Steps of the stepper inline.\n     */\n    steps?: Array<{\n      /**\n       * Label of the step.\n       */\n      label: string;\n\n      /**\n       * Optional additional information under the label.\n       */\n      additionalinfo?: string;\n    }>;\n  }\n\n  let { step = $bindable(1), steps = $bindable([]), ...attrs }: Props = $props();\n\n  const safeStep = $derived(() => Math.min(Math.max(step ?? 1, 1), steps.length ?? 1));\n\n  const stepStates = $derived(() =>\n    steps.map((_, i) => ({\n      completed: i + 1 < safeStep(),\n      current: i + 1 === safeStep(),\n    })),\n  );\n</script>\n\n<nav class=\"mc-stepper-inline\" aria-label=\"Stepper\" {...attrs}>\n  <ol class=\"mc-stepper-inline__container\">\n    {#each steps as step, i (i)}\n      {@const state = stepStates()[i]}\n      <li class={['mc-stepper-inline__item', state.completed ? 'is-completed' : '']}>\n        {#if state.completed}\n          <span class=\"mc-stepper-inline__icon mc-stepper-inline__icon--check\" aria-hidden=\"true\">\n            <Check24 />\n          </span>\n        {:else}\n          <span class={['mc-stepper-inline__circle', state.current ? 'is-current' : '']}>\n            {i + 1}\n          </span>\n        {/if}\n        <div class=\"mc-stepper-inline__content\">\n          <span class={['mc-stepper-inline__label', state.current ? 'is-current' : '']}>\n            {step.label}\n          </span>\n        </div>\n        {#if i < steps.length - 1}\n          <span class=\"mc-stepper-inline__icon mc-stepper-inline__icon--chevron\" aria-hidden=\"true\">\n            <ChevronRight24 />\n          </span>\n        {/if}\n      </li>\n    {/each}\n  </ol>\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/stepper-inline';\n\n  :global(.mc-stepper-inline__icon) {\n    align-items: center;\n  }\n</style>\n"],"names":["step","steps","$.prop","$$props","$.proxy","attrs","$.rest_props","safeStep","stepStates","_","i","nav","root","ol","$.index","$$anchor","$$array","state","$.derived","$.get","li","root_1","span","root_2","Check24","node_1","span_1","root_3","$$render","consequent","alternate","div","$.sibling","node","span_2","span_3","root_4","ChevronRight24","node_3","consequent_1","$.set_text","text"],"mappings":";;;;;;;;;;;;;;kEAEA,iBA8BQ,IAAAA,gBAAiB,CAAC,EAAGC,EAAKC,EAAAC,EAAA,QAAA,GAAA,IAAAC,EAAA,CAAA,CAAA,CAAA,EAAqBC,EAAKC,EAAAH,EAAA,CAAA,UAAA,WAAA,WAAA,SAAA,OAAA,OAAA,CAAA,EAEpD,MAAAI,YAA0B,KAAK,IAAI,KAAK,IAAIP,EAAI,GAAI,EAAG,CAAC,EAAGC,EAAK,EAAC,QAAU,CAAC,CAAA,EAE5EO,YACJP,EAAK,EAAC,IAAG,CAAEQ,EAAGC,KAAC,CACb,UAAWA,EAAI,IAAIH,CAAQ,EAAA,EAC3B,QAASG,EAAI,MAAMH,CAAQ,EAAA,+CAPR,EAAC,8DAYzBI,EAAGC,GAAA,IAAHD,4DAAuDN,0CACrD,IAAAQ,IADFF,CAAG,WACDE,EAAE,GACMZ,EAAKa,EAAA,CAAAC,EAAIf,EAAIU,EAAAM,KAAA,OACVC,EAAKC,EAAA,IAAAC,EAAGX,CAAU,EAAA,EAAGE,CAAC,CAAA,MAC7BU,EAAEC,GAAA,MAAFD,CAAE,iBAEEE,EAAIC,EAAA,MAAJD,CAAI,EACFE,EAAOC,EAAA,EAAA,IADTH,CAAI,MAAJA,CAAI,aAIJI,EAAIC,EAAA,EAAJD,EAAI,YACFhB,EAAI,UADNgB,OAAa,4BAA6BP,EAAAF,CAAK,EAAC,QAAU,aAAe,2BAAzES,CAAI,WALFP,EAAAF,CAAK,EAAC,UAASW,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,QASnBC,EAAGC,EAAAC,EAAA,CAAA,EACDC,IADFH,CAAG,MACDG,EAAI,EAAA,IAAJA,CAAI,IADNH,CAAG,UAAHA,EAAG,CAAA,iBAMDI,EAAIC,EAAA,MAAJD,CAAI,EACFE,EAAcC,EAAA,EAAA,IADhBH,CAAI,MAAJA,CAAI,WADFzB,EAAIT,EAAK,EAAC,OAAS,GAAC2B,EAAAW,CAAA,MAf1BnB,CAAE,WAAFA,OAAW,0BAA2BD,EAAAF,CAAK,EAAC,UAAY,eAAiB,wBAWrEiB,OAAa,2BAA4Bf,EAAAF,CAAK,EAAC,QAAU,aAAe,sBACtEuB,EAAAC,EAAAtB,EAAAnB,CAAI,EAAC,KAAK,QAZhBoB,CAAE,MAHNP,CAAE,IADJF,CAAG,MAAHA,CAAG,MAFI"}

package/dist/components/stepperinline/StepperInline.spec.js

@@ -0,0 +1,83 @@
+import { render } from '@testing-library/svelte';
+import StepperInline from './StepperInline.svelte';
+import { describe, it, expect } from 'vitest';
+describe('StepperInline', () => {
+    const defaultSteps = [{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }];
+    it('renders correctly with default props', () => {
+        const { getAllByRole, getByText } = render(StepperInline, {
+            props: {
+                step: 1,
+                steps: defaultSteps,
+            },
+        });
+        expect(getAllByRole('listitem').length).toBe(defaultSteps.length);
+        expect(getByText('Step 1')).toBeTruthy();
+    });
+    it('marks the correct step as active', async () => {
+        const { container, rerender } = render(StepperInline, {
+            props: {
+                step: 2,
+                steps: defaultSteps,
+            },
+        });
+        let labels = container.querySelectorAll('.mc-stepper-inline__label');
+        expect(labels[1].classList.contains('is-current')).toBe(true);
+        expect(labels[0].classList.contains('is-current')).toBe(false);
+        await rerender({ step: 3, steps: defaultSteps });
+        labels = container.querySelectorAll('.mc-stepper-inline__label');
+        expect(labels[2].classList.contains('is-current')).toBe(true);
+    });
+    it('marks completed steps', () => {
+        const { container } = render(StepperInline, {
+            props: {
+                step: 3,
+                steps: defaultSteps,
+            },
+        });
+        const items = container.querySelectorAll('.mc-stepper-inline__item');
+        expect(items[0].classList.contains('is-completed')).toBe(true);
+        expect(items[1].classList.contains('is-completed')).toBe(true);
+        expect(items[2].classList.contains('is-completed')).toBe(false);
+    });
+    it('renders no steps when steps prop is empty', () => {
+        const { queryAllByRole } = render(StepperInline, {
+            props: {
+                step: 1,
+                steps: [],
+            },
+        });
+        expect(queryAllByRole('listitem').length).toBe(0);
+    });
+    it('renders correct step numbers', () => {
+        const { container } = render(StepperInline, {
+            props: {
+                step: 1,
+                steps: defaultSteps,
+            },
+        });
+        const circles = container.querySelectorAll('.mc-stepper-inline__circle');
+        circles.forEach((circle, i) => {
+            expect(circle.textContent).toBe(String(i + 1));
+        });
+    });
+    it('renders chevron icon between steps except last', () => {
+        const { container } = render(StepperInline, {
+            props: {
+                step: 1,
+                steps: defaultSteps,
+            },
+        });
+        const chevrons = container.querySelectorAll('.mc-stepper-inline__icon--chevron');
+        expect(chevrons.length).toBe(defaultSteps.length - 1);
+    });
+    it('renders check icon for completed steps', () => {
+        const { container } = render(StepperInline, {
+            props: {
+                step: 3,
+                steps: defaultSteps,
+            },
+        });
+        const checkIcons = container.querySelectorAll('.mc-stepper-inline__icon--check');
+        expect(checkIcons.length).toBe(2);
+    });
+});

package/dist/components/stepperinline/StepperInline.stories.d.ts

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

package/dist/components/stepperinline/StepperInline.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperInline.stories.d.ts","sourceRoot":"","sources":["../../../src/components/stepperinline/StepperInline.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,wBAAwB,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAmBX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/components/stepperinline/StepperInline.stories.js

@@ -0,0 +1,23 @@
+import { html } from 'lit';
+import './StepperInline.svelte';
+const meta = {
+    title: 'Indicators/Stepper Inline',
+    component: 'm-stepper-inline',
+    argTypes: {
+        step: {
+            control: { type: 'number', min: 1, max: 10 },
+        },
+    },
+    args: {
+        currentStep: 2,
+        steps: [
+            { label: 'Cart' },
+            { label: 'Delivery address' },
+            { label: 'Payment' },
+            { label: 'Order confirmation' },
+        ],
+    },
+    render: (args) => html `<m-stepper-inline step="${args.currentStep}" .steps="${args.steps}"></m-stepper-inline>`,
+};
+export default meta;
+export const Default = {};

package/dist/components/stepperinline/StepperInline.svelte

@@ -0,0 +1,176 @@
+<svelte:options customElement={{ tag: 'm-stepper-inline' }} />
+
+<script lang="ts">
+  import { Check24 } from '@mozaic-ds/icons-svelte';
+  import { ChevronRight24 } from '@mozaic-ds/icons-svelte';
+  /**
+   * An inline stepper is a horizontal navigation component that displays a sequence of steps in a linear fashion. It helps users understand their progress through a multi-step process by visually indicating the current step, completed steps, and upcoming steps. Inline steppers are typically used in forms, onboarding flows, and checkout processes to enhance user experience and provide clarity on the workflow.
+   */
+
+  interface Props {
+    [key: string]: any;
+    /**
+     * Current step of the stepper compact.
+     */
+    step?: number;
+
+    /**
+     * Steps of the stepper inline.
+     */
+    steps?: Array<{
+      /**
+       * Label of the step.
+       */
+      label: string;
+
+      /**
+       * Optional additional information under the label.
+       */
+      additionalinfo?: string;
+    }>;
+  }
+
+  let { step = $bindable(1), steps = $bindable([]), ...attrs }: Props = $props();
+
+  const safeStep = $derived(() => Math.min(Math.max(step ?? 1, 1), steps.length ?? 1));
+
+  const stepStates = $derived(() =>
+    steps.map((_, i) => ({
+      completed: i + 1 < safeStep(),
+      current: i + 1 === safeStep(),
+    })),
+  );
+</script>
+
+<nav class="mc-stepper-inline" aria-label="Stepper" {...attrs}>
+  <ol class="mc-stepper-inline__container">
+    {#each steps as step, i (i)}
+      {@const state = stepStates()[i]}
+      <li class={['mc-stepper-inline__item', state.completed ? 'is-completed' : '']}>
+        {#if state.completed}
+          <span class="mc-stepper-inline__icon mc-stepper-inline__icon--check" aria-hidden="true">
+            <Check24 />
+          </span>
+        {:else}
+          <span class={['mc-stepper-inline__circle', state.current ? 'is-current' : '']}>
+            {i + 1}
+          </span>
+        {/if}
+        <div class="mc-stepper-inline__content">
+          <span class={['mc-stepper-inline__label', state.current ? 'is-current' : '']}>
+            {step.label}
+          </span>
+        </div>
+        {#if i < steps.length - 1}
+          <span class="mc-stepper-inline__icon mc-stepper-inline__icon--chevron" aria-hidden="true">
+            <ChevronRight24 />
+          </span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-stepper-inline__container {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.mc-stepper-inline__label {
+  font-size: var(--font-size-100, 0.875rem);
+  transition: color 200ms ease;
+}
+.mc-stepper-inline__label.is-current {
+  font-weight: var(--font-weight-medium, 600);
+  color: var(--stepper-color-step-label-active, #000000);
+}
+.mc-stepper-inline__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--stepper-color-step-label-default, #666666);
+}
+.mc-stepper-inline__item.is-completed: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;
+  border-radius: var(--border-radius-s, 0.25rem);
+}
+.mc-stepper-inline__item.is-completed:hover {
+  cursor: pointer;
+}
+.mc-stepper-inline__item.is-completed:hover .mc-stepper-inline__label {
+  text-decoration: underline;
+}
+.mc-stepper-inline__icon {
+  fill: var(--stepper-color-information, #666666);
+  display: flex;
+  flex-shrink: 0;
+}
+.mc-stepper-inline__icon--check {
+  box-sizing: border-box;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-color: transparent;
+  border: 0.125rem solid var(--stepper-color-information, #666666);
+  border-radius: 1rem;
+}
+.mc-stepper-inline__icon--chevron {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-stepper-inline__circle {
+  box-sizing: border-box;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  border: 0.125rem solid var(--stepper-color-information, #666666);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-100, 0.875rem);
+  font-weight: var(--font-weight-medium, 600);
+  color: var(--stepper-color-information, #666666);
+  background-color: var(--stepper-color-step-item-default-background, #ffffff);
+  flex-shrink: 0;
+  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
+}
+.mc-stepper-inline__circle.is-current {
+  background-color: var(--stepper-color-step-item-active-background, #117f03);
+  color: var(--stepper-color-step-item-active-text, #ffffff);
+  border-color: transparent;
+  animation: pop-in 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+.mc-stepper-inline__content {
+  display: flex;
+  flex-direction: column;
+  margin-right: 0.5rem;
+}
+.mc-stepper-inline__additional {
+  font-size: var(--font-size-50, 0.75rem);
+  color: var(--stepper-color-information, #666666);
+}
+.mc-stepper-inline__separator {
+  color: var(--stepper-color-information, #666666);
+  margin-left: 1rem;
+}
+
+@keyframes pop-in {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+:global(.mc-stepper-inline__icon) {
+  align-items: center;
+}</style>

package/dist/components/stepperinline/StepperInline.svelte.d.ts

@@ -0,0 +1,27 @@
+/**
+ * An inline stepper is a horizontal navigation component that displays a sequence of steps in a linear fashion. It helps users understand their progress through a multi-step process by visually indicating the current step, completed steps, and upcoming steps. Inline steppers are typically used in forms, onboarding flows, and checkout processes to enhance user experience and provide clarity on the workflow.
+ */
+interface Props {
+    [key: string]: any;
+    /**
+     * Current step of the stepper compact.
+     */
+    step?: number;
+    /**
+     * Steps of the stepper inline.
+     */
+    steps?: Array<{
+        /**
+         * Label of the step.
+         */
+        label: string;
+        /**
+         * Optional additional information under the label.
+         */
+        additionalinfo?: string;
+    }>;
+}
+declare const StepperInline: import("svelte").Component<Props, {}, "step" | "steps">;
+type StepperInline = ReturnType<typeof StepperInline>;
+export default StepperInline;
+//# sourceMappingURL=StepperInline.svelte.d.ts.map

package/dist/components/stepperinline/StepperInline.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperInline.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/stepperinline/StepperInline.svelte.ts"],"names":[],"mappings":"AAME;;GAEG;AAEH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;QACZ;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;QAEd;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC,CAAC;CACJ;AAqDH,QAAA,MAAM,aAAa,yDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/tab/README.md

@@ -10,11 +10,13 @@ Tabs are a navigation component that allows users to switch between different se
 | `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` |   |
+| `children` | The content displayed in the tab. | `Snippet` |   |
+| `icon` | Use this snippet to insert an icon for the tab. | `Snippet` |   |
 
 ## Slots
 
 | Name | Description |
 |------|-------------|
-| `icon` | Use this slot to insert an icon for the tab. |
 | `default` | The content displayed in the tab. |
+| `icon` | Use this slot to insert an icon for the tab. |
 

package/dist/components/tab/Tab.js

@@ -1,4 +1,4 @@
-import{c as E,p as S,a as T,b as d,f as h,d as o,i as u,j as q,k as i,D as A,r,s as y}from"../../custom-element.js";import{i as B}from"../../if.js";import{s as f}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:`/**
+import{c as L,p as M,a as N,b as i,f as o,g as O,h,d as f,j as d,r as b,i as P,l as v,s as Q,k as u}from"../../custom-element.js";import{s as C}from"../../snippet.js";import{i as x}from"../../if.js";import{s as D}from"../../slot.js";import{a as E}from"../../attributes.js";var R=h('<span class="mc-tabs__icon svelte-g14hff"><!></span> <span class="mc-tabs__label svelte-g14hff"><!></span>',1),U=h("<button><!></button>"),V=h("<a><!></a>"),W=h('<li class="mc-tabs__item" role="presentation"><!></li>');const X={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(--border-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 b=d(t,"tag",7,"button"),l=d(t,"selected",7,!1),v=d(t,"href",7),n=d(t,"disabled",7),k=A(t,["$$slots","$$events","$$legacy","$$host","tag","selected","href","disabled"]);var w={get tag(){return b()},set tag(e="button"){b(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(),j=o(m);{var z=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,void 0,"svelte-g14hff");var s=o(a),_=o(s);f(_,t,"icon",{}),r(s);var c=y(s,2),g=o(c);f(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,void 0,"svelte-g14hff");var s=o(a),_=o(s);f(_,t,"icon",{}),r(s);var c=y(s,2),g=o(c);f(g,t,"default",{}),r(c),r(a),u(e,a)};B(j,e=>{b()==="button"?e(z):e(D,!1)})}return r(m),u(p,m),q(w)}customElements.define("m-tab",E(I,{tag:{},selected:{},href:{},disabled:{}},["icon","default"],[],!0));
+ */.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:var(--tabs-list-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(--border-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 Y(w,s){M(s,!0),N(w,X);const j=e=>{var a=R(),l=v(a),F=f(l);{var G=t=>{var r=u(),n=v(r);C(n,_),o(t,r)},H=t=>{var r=u(),n=v(r);D(n,s,"icon",{},null),o(t,r)};x(F,t=>{_()?t(G):t(H,!1)})}b(l);var B=Q(l,2),I=f(B);{var J=t=>{var r=u(),n=v(r);C(n,g),o(t,r)},K=t=>{var r=u(),n=v(r);D(n,s,"default",{},null),o(t,r)};x(I,t=>{g()?t(J):t(K,!1)})}b(B),o(e,a)};let p=i(s,"tag",7,"button"),c=i(s,"selected",7,!1),y=i(s,"href",7),m=i(s,"disabled",7),g=i(s,"children",7),_=i(s,"icon",7),z=P(s,["$$slots","$$events","$$legacy","$$host","tag","selected","href","disabled","children","icon"]);var S={get tag(){return p()},set tag(e="button"){p(e),d()},get selected(){return c()},set selected(e=!1){c(e),d()},get href(){return y()},set href(e){y(e),d()},get disabled(){return m()},set disabled(e){m(e),d()},get children(){return g()},set children(e){g(e),d()},get icon(){return _()},set icon(e){_(e),d()}},k=W(),T=f(k);{var q=e=>{var a=U();E(a,()=>({type:"button",role:"tab","aria-selected":c(),class:["mc-tabs__tab",c()&&"mc-tabs__tab--selected",m()&&"mc-tabs__tab--disabled"],...z}),void 0,void 0,void 0,"svelte-g14hff");var l=f(a);j(l),b(a),o(e,a)},A=e=>{var a=V();E(a,()=>({href:y(),role:"tab","aria-selected":c(),class:["mc-tabs__tab",c()&&"mc-tabs__tab--selected",m()&&"mc-tabs__tab--disabled"],...z}),void 0,void 0,void 0,"svelte-g14hff");var l=f(a);j(l),b(a),o(e,a)};x(T,e=>{p()==="button"?e(q):e(A,!1)})}return b(k),o(w,k),O(S)}customElements.define("m-tab",L(Y,{selected:{attribute:"selected",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},tag:{},href:{},children:{},icon:{}},["icon","default"],[],!0));
 //# sourceMappingURL=Tab.js.map

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

@@ -1 +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":";;mrDAAA,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,0MAcWL,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,oJA9BHN,EAAG,IAAK,SAAQQ,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,2BAHvB"}
+{"version":3,"file":"Tab.js","sources":["../../../src/components/tab/Tab.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-tab',\n    props: {\n      selected: { reflect: true, type: 'Boolean', attribute: 'selected' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\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    /**\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     * The content displayed in the tab.\n     */\n    children?: Snippet;\n    /**\n     * Use this snippet to insert an icon for the tab.\n     */\n    icon?: Snippet;\n  }\n\n  let {\n    tag = 'button',\n    selected = false,\n    href,\n    disabled,\n    children,\n    icon,\n    ...attrs\n  }: Props = $props();\n</script>\n\n{#snippet displayContent()}\n  <span class=\"mc-tabs__icon\">\n    {#if icon}\n      {@render icon()}\n    {:else}\n      <slot name=\"icon\" />\n    {/if}\n  </span>\n  <span class=\"mc-tabs__label\">\n    {#if children}\n      {@render children()}\n    {:else}\n      <slot />\n    {/if}\n  </span>\n{/snippet}\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      {@render displayContent()}\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      {@render displayContent()}\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":["displayContent","$$anchor","span","$.first_child","fragment","icon","$$render","consequent","alternate","span_1","children","consequent_1","alternate_1","tag","selected","href","$.prop","$$props","disabled","attrs","$.rest_props","li","root","button","root_6","node_7","$.child","$.reset","$.append","root_7","node_8","consequent_2","alternate_2"],"mappings":";;6sDAUA,sBAgDUA,EAAcC,GAAA,WACrBC,EAAIC,EAAAC,CAAA,MAAJF,CAAI,kCAEQG,CAAI,uEADVA,EAAI,EAAAC,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,MADVN,CAAI,EAOJ,IAAAO,IAPAP,EAAI,CAAA,MAOJO,CAAI,kCAEQC,CAAQ,0EADdA,EAAQ,EAAAJ,EAAAK,CAAA,EAAAL,EAAAM,EAAA,EAAA,MADdH,CAAI,UAlBH,IAAAI,cAAM,QAAQ,EACdC,mBAAW,EAAK,EAChBC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRP,EAAQM,EAAAC,EAAA,WAAA,CAAA,EACRZ,EAAIW,EAAAC,EAAA,OAAA,CAAA,EACDE,EAAAC,EAAAH,EAAA,wIANG,SAAQ,qDACH,GAAK,gNA0BnBI,EAAEC,EAAA,MAAFD,CAAE,aAEE,IAAAE,EAAAC,EAAA,IAAAD,iDAGgBT,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,0CATL,IAAAM,EAAAC,EAAAH,CAAA,EAWUvB,EAAcyB,CAAA,EAXxBE,EAAAJ,CAAA,EAAAK,EAAA3B,EAAAsB,CAAA,SAcA,IAAA,EAAAM,EAAA,IAAA,aACEd,EAAI,6BAEUD,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,0CATL,IAAAW,EAAAJ,EAAA,CAAA,EAWU1B,EAAc8B,CAAA,EAXxBH,EAAA,CAAA,EAAAC,EAAA3B,EAAA,CAAA,WAfEY,EAAG,IAAK,SAAQP,EAAAyB,CAAA,EAAAzB,EAAA0B,EAAA,EAAA,aADtBX,CAAE,MAAFA,CAAE,MAnBK"}

package/dist/components/tab/Tab.svelte

@@ -1,6 +1,15 @@
-<svelte:options customElement={{ tag: 'm-tab' }} />
+<svelte:options
+  customElement={{
+    tag: 'm-tab',
+    props: {
+      selected: { reflect: true, type: 'Boolean', attribute: 'selected' },
+      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
+    },
+  }}
+/>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   /**
    * 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.
    *
@@ -9,6 +18,7 @@
    */
   interface Props {
     [key: string]: any;
+
     /**
      * The HTML tag used for the tab.
      */
@@ -25,11 +35,44 @@
      * If `true`, the tab will be disabled.
      */
     disabled?: boolean;
+    /**
+     * The content displayed in the tab.
+     */
+    children?: Snippet;
+    /**
+     * Use this snippet to insert an icon for the tab.
+     */
+    icon?: Snippet;
   }
 
-  let { tag = 'button', selected = false, href, disabled, ...attrs }: Props = $props();
+  let {
+    tag = 'button',
+    selected = false,
+    href,
+    disabled,
+    children,
+    icon,
+    ...attrs
+  }: Props = $props();
 </script>
 
+{#snippet displayContent()}
+  <span class="mc-tabs__icon">
+    {#if icon}
+      {@render icon()}
+    {:else}
+      <slot name="icon" />
+    {/if}
+  </span>
+  <span class="mc-tabs__label">
+    {#if children}
+      {@render children()}
+    {:else}
+      <slot />
+    {/if}
+  </span>
+{/snippet}
+
 <li class="mc-tabs__item" role="presentation">
   {#if tag === 'button'}
     <button
@@ -43,13 +86,7 @@
       ]}
       {...attrs}
     >
-      <span class="mc-tabs__icon">
-        <slot name="icon" />
-      </span>
-
-      <span class="mc-tabs__label">
-        <slot />
-      </span>
+      {@render displayContent()}
     </button>
   {:else}
     <a
@@ -63,12 +100,7 @@
       ]}
       {...attrs}
     >
-      <span class="mc-tabs__icon">
-        <slot name="icon" />
-      </span>
-      <span class="mc-tabs__label">
-        <slot />
-      </span>
+      {@render displayContent()}
     </a>
   {/if}
 </li>
@@ -88,7 +120,7 @@
   margin-block: 0;
   display: flex;
   gap: 0.5rem;
-  padding: 0.5rem 0.25rem;
+  padding: var(--tabs-list-padding, 0.5rem 0.25rem);
 }
 .mc-tabs__tab {
   font-size: var(--font-size-100, 0.875rem);

package/dist/components/tab/Tab.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 /**
  * 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.
  *
@@ -22,6 +23,14 @@ interface Props {
      * If `true`, the tab will be disabled.
      */
     disabled?: boolean;
+    /**
+     * The content displayed in the tab.
+     */
+    children?: Snippet;
+    /**
+     * Use this snippet to insert an icon for the tab.
+     */
+    icon?: Snippet;
 }
 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

@@ -1 +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"}
+{"version":3,"file":"Tab.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tab/Tab.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEpC;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IAEnB;;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;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAiEH,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

@@ -9,6 +9,7 @@ Tabs are a navigation component that allows users to switch between different se
 | `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` |   |
+| `children` | use this snippet to insert `m-tab` components. | `Snippet` |   |
 
 ## Slots
 

package/dist/components/tabs/Tabs.js

@@ -1,4 +1,4 @@
-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:`/**
+import{c as z,p as B,a as D,b as l,s as E,t as S,f as c,g as T,h as g,d as f,j as n,k as u,l as b,r as h,n as A,o as C}from"../../custom-element.js";import{s as F}from"../../snippet.js";import{i as _}from"../../if.js";import{s as G}from"../../slot.js";import{s as H}from"../../attributes.js";var I=g('<div class="mc-divider-horizontal svelte-qelc5p"></div>'),J=g('<nav><ul class="mc-tabs__list svelte-qelc5p" role="tablist"><!></ul> <!></nav>');const K={hash:"svelte-qelc5p",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.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));
+ */.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:var(--tabs-list-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 L(p,r){B(r,!0),D(p,K);let d=l(r,"description",7),o=l(r,"divider",7,!0),v=l(r,"centered",7),a=l(r,"children",7);var y={get description(){return d()},set description(e){d(e),n()},get divider(){return o()},set divider(e=!0){o(e),n()},get centered(){return v()},set centered(e){v(e),n()},get children(){return a()},set children(e){a(e),n()}},s=J(),i=f(s),q=f(i);{var k=e=>{var t=u(),m=b(t);F(m,a),c(e,t)},w=e=>{var t=u(),m=b(t);G(m,r,"tab",{},null),c(e,t)};_(q,e=>{a()?e(k):e(w,!1)})}h(i);var x=E(i,2);{var j=e=>{var t=I();c(e,t)};_(x,e=>{o()&&e(j)})}return h(s),S(()=>{A(s,1,C(["mc-tabs",v()&&"mc-tabs--centered"]),"svelte-qelc5p"),H(i,"aria-label",d())}),c(p,s),T(y)}customElements.define("m-tabs",z(L,{divider:{attribute:"divider",reflect:!0,type:"Boolean"},centered:{attribute:"centered",reflect:!0,type:"Boolean"},description:{},children:{}},["tab"],[],!0));
 //# sourceMappingURL=Tabs.js.map