@mozaic-ds/web-components 1.3.0 → 1.5.0

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 $,k as L,f as a,g as N,h as l,i as O,d as i,j as C,r as s,n as t,s as j,t as M,l as g,m as x,e as P,v as y}from"../../custom-element.js";import{i as D}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";import"../../branches.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([])),E=O(p,["$$slots","$$events","$$legacy","$$host","step","steps"]);const w=y(()=>()=>Math.min(Math.max(f()??1,1),o().length??1)),I=y(()=>()=>o().map((n,m)=>({completed:m+1<t(w)(),current:m+1===t(w)()})));var R={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",...E}),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(I)()[_]);var v=ee(),S=i(v);{var q=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)};D(S,r=>{t(d).completed?r(q):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)};D(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(R)}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/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,h as u,i as q,j as i,r as A,e as r,s as y}from"../../custom-element.js";import{i as B}from"../../if.js";import{s as f}from"../../slot.js";import{a 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 D,p as E,a as S,b as i,f as g,g as T,h,d as r,j as d,r as o,s as k,i as q}from"../../custom-element.js";import{i as A}from"../../if.js";import{s as b}from"../../slot.js";import{a as x}from"../../attributes.js";import"../../branches.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(--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 I(p,t){E(t,!0),S(p,H);let f=i(t,"tag",7,"button"),l=i(t,"selected",7,!1),v=i(t,"href",7),c=i(t,"disabled",7),y=q(t,["$$slots","$$events","$$legacy","$$host","tag","selected","href","disabled"]);var w={get tag(){return f()},set tag(e="button"){f(e),d()},get selected(){return l()},set selected(e=!1){l(e),d()},get href(){return v()},set href(e){v(e),d()},get disabled(){return c()},set disabled(e){c(e),d()}},m=G(),j=r(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",c()&&"mc-tabs__tab--disabled"],...y}),void 0,void 0,void 0,"svelte-g14hff");var s=r(a),u=r(s);b(u,t,"icon",{},null),o(s);var n=k(s,2),_=r(n);b(_,t,"default",{},null),o(n),o(a),g(e,a)},B=e=>{var a=F();x(a,()=>({href:v(),role:"tab","aria-selected":l(),class:["mc-tabs__tab",l()&&"mc-tabs__tab--selected",c()&&"mc-tabs__tab--disabled"],...y}),void 0,void 0,void 0,"svelte-g14hff");var s=r(a),u=r(s);b(u,t,"icon",{},null),o(s);var n=k(s,2),_=r(n);b(_,t,"default",{},null),o(n),o(a),g(e,a)};A(j,e=>{f()==="button"?e(z):e(B,!1)})}return o(m),g(p,m),T(w)}customElements.define("m-tab",D(I,{selected:{attribute:"selected",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},tag:{},href:{}},["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    /**\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,gBA4BQ,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  /**\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","li","root","button","root_1","span","$.child","span_1","$.reset","$.append","$$anchor","root_2","span_2","span_3","$$render","consequent","alternate"],"mappings":";;6sDAUA,gBA2BQ,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,8GAGvCI,EAAEC,EAAA,MAAFD,CAAE,aAEE,IAAAE,EAAAC,EAAA,IAAAD,iDAGgBT,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,0CAEH,IAAAM,EAAIC,EAXNH,CAAA,MAWEE,CAAI,0BAAJA,CAAI,EAIJ,IAAAE,IAJAF,EAAI,CAAA,MAIJE,CAAI,6BAAJA,CAAI,EAfNC,EAAAL,CAAA,EAAAM,EAAAC,EAAAP,CAAA,SAoBA,IAAA,EAAAQ,EAAA,IAAA,aACEhB,EAAI,6BAEUD,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,0CAEH,IAAAa,EAAIN,EAXN,CAAA,MAWEM,CAAI,0BAAJA,CAAI,EAGJ,IAAAC,IAHAD,EAAI,CAAA,MAGJC,CAAI,6BAAJA,CAAI,EAdNL,EAAA,CAAA,EAAAC,EAAAC,EAAA,CAAA,WArBEjB,EAAG,IAAK,SAAQqB,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,aADtBf,CAAE,MAAFA,CAAE,MAFK"}

package/dist/components/tab/Tab.svelte

@@ -1,4 +1,12 @@
-<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">
   /**
@@ -8,6 +16,7 @@
    * @slot icon - Use this slot to insert an icon for the tab.
    */
   interface Props {
+    [key: string]: any;
     /**
      * The HTML tag used for the tab.
      */
@@ -87,7 +96,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

@@ -5,6 +5,7 @@
  * @slot icon - Use this slot to insert an icon for the tab.
  */
 interface Props {
+    [key: string]: any;
     /**
      * The HTML tag used for the tab.
      */

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;;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":"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/Tabs.js

@@ -1,4 +1,4 @@
-import{c as g,p as q,a as y,b as l,f as p,d as o,s as k,t as w,h as v,i as x,j as d,e as m,l as j,m 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 h,p as y,a as q,b as c,s as k,t as w,f as o,g as x,h as p,d as v,j as d,r as m,l as j,m as z}from"../../custom-element.js";import{i as B}from"../../if.js";import{s as D}from"../../slot.js";import{s as E}from"../../attributes.js";import"../../branches.js";var S=p('<div class="mc-divider-horizontal svelte-qelc5p"></div>'),T=p('<nav><ul class="mc-tabs__list svelte-qelc5p" role="tablist"><!></ul> <!></nav>');const A={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()}},s=A(),r=o(s),u=o(r);E(u,t,"tab",{}),m(r);var b=k(r,2);{var _=e=>{var h=T();v(e,h)};D(b,e=>{i()&&e(_)})}return m(s),w(()=>{j(s,1,z(["mc-tabs",c()&&"mc-tabs--centered"]),"svelte-qelc5p"),S(r,"aria-label",a())}),v(n,s),x(f)}customElements.define("m-tabs",g(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 C(n,t){y(t,!0),q(n,A);let a=c(t,"description",7),i=c(t,"divider",7,!0),l=c(t,"centered",7);var u={get description(){return a()},set description(e){a(e),d()},get divider(){return i()},set divider(e=!0){i(e),d()},get centered(){return l()},set centered(e){l(e),d()}},r=T(),s=v(r),b=v(s);D(b,t,"tab",{},null),m(s);var f=k(s,2);{var g=e=>{var _=S();o(e,_)};B(f,e=>{i()&&e(g)})}return m(r),w(()=>{j(r,1,z(["mc-tabs",l()&&"mc-tabs--centered"]),"svelte-qelc5p"),E(s,"aria-label",a())}),o(n,r),x(u)}customElements.define("m-tabs",h(C,{divider:{attribute:"divider",reflect:!0,type:"Boolean"},centered:{attribute:"centered",reflect:!0,type:"Boolean"},description:{}},["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: '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"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-tabs',\n    props: {\n      divider: { reflect: true, type: 'Boolean', attribute: 'divider' },\n      centered: { reflect: true, type: 'Boolean', attribute: 'centered' },\n    },\n  }}\n/>\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","nav","root","ul","div","root_1","$$render","consequent","$.set_class","$.clsx","$.set_attribute"],"mappings":";;mgBAUA,oBAqBQA,EAAWC,EAAAC,EAAA,cAAA,CAAA,EAAEC,kBAAU,EAAI,EAAEC,EAAQH,EAAAC,EAAA,WAAA,CAAA,4GAAd,GAAI,iEAGlCG,EAAGC,EAAA,EACDC,IADFF,CAAG,MACDE,CAAE,yBAAFA,CAAE,UAAFA,EAAE,CAAA,iBAIAC,EAAGC,EAAA,MAAHD,CAAG,WADDL,EAAO,GAAAO,EAAAC,CAAA,aAJbN,CAAG,SAAHO,EAAAP,EAAG,EAAAQ,EAAA,CAAS,UAAWT,KAAY,mBAAmB,CAAA,EAAA,eAAA,EACpDU,EAAAP,eAAoDP,GAAW,QADjEK,CAAG,MAFI"}

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import './Tabs.svelte';
 import '../tab/Tab.svelte';
-import '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';
+import '@mozaic-ds/icons-svelte/components/ChevronRight24/ChevronRight24.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

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,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,eAAe,CAAC;AACvB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,qEAAqE,CAAC;AAE7E,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"}
+{"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;AAIrE,OAAO,eAAe,CAAC;AACvB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,yEAAyE,CAAC;AAEjF,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"}

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

@@ -3,11 +3,11 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import './Tabs.svelte';
 import '../tab/Tab.svelte';
-import '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';
+import '@mozaic-ds/icons-svelte/components/ChevronRight24/ChevronRight24.svelte';
 const meta = {
     title: 'Navigation/Tabs',
     component: 'm-tabs',
-    subcomponents: { 'm-tab': 'm-tab' },
+    subcomponents: { 'Tab': 'm-tab' },
     args: {
         tab: `
       <m-tab slot="tab" selected="true">label</m-tab>
@@ -19,8 +19,8 @@ const meta = {
     render: (args) => html `
     <m-tabs
       description=${ifDefined(args.description)}
-      centered=${ifDefined(args.centered)}
-      divider=${ifDefined(args.divider)}
+      ?centered=${args.centered}
+      ?divider=${args.divider}
       value=${ifDefined(args.value)}
     >
       ${unsafeHTML(ifDefined(args.tab))}

package/dist/components/tabs/Tabs.svelte

@@ -1,4 +1,12 @@
-<svelte:options customElement={{ tag: 'm-tabs' }} />
+<svelte:options
+  customElement={{
+    tag: 'm-tabs',
+    props: {
+      divider: { reflect: true, type: 'Boolean', attribute: 'divider' },
+      centered: { reflect: true, type: 'Boolean', attribute: 'centered' },
+    },
+  }}
+/>
 
 <script lang="ts">
   /**
@@ -48,7 +56,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/tabs/Tabs.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsBH,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,IAAI;;;;UAAqF,CAAC;AAC9E,KAAK,IAAI,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACxC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA4BH,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,IAAI;;;;UAAqF,CAAC;AAC9E,KAAK,IAAI,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACxC,eAAe,IAAI,CAAC"}