@mozaic-ds/web-components 1.1.0 → 1.2.0

package/dist/components/statusnotification/StatusNotification.svelte

@@ -121,7 +121,7 @@
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: var(--button-radius, 0.25rem);
+  border-radius: var(--button-border-radius-s, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -285,7 +285,7 @@
   cursor: not-allowed;
 }
 .mc-button--icon-button {
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   padding: 0;
 }
 .mc-button--loading .mc-button__loader {
@@ -430,9 +430,9 @@
 }
 
 .mc-status-notification {
-  border-radius: var(--radius-m, 0.5rem);
-  background: var(--status-notification-color-background-information, #e1f3f9);
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-information, #3facd7);
+  border-radius: var(--border-radius-m, 0.5rem);
+  background: var(--status-notification-color-background-info, #e1f3f9);
+  box-shadow: inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-info, #3facd7);
   display: flex;
   flex-flow: row wrap;
   align-items: flex-start;
@@ -444,7 +444,7 @@
   width: 2rem;
   height: 2rem;
   margin: 0.75rem;
-  fill: var(--status-notification-color-icon-information, #0b96cc);
+  fill: var(--status-notification-color-icon-info, #0b96cc);
 }
 .mc-status-notification__content {
   flex: 1 1 0;
@@ -471,29 +471,29 @@
   margin-bottom: 0.5rem;
 }
 .mc-status-notification--information {
-  background: var(--status-notification-color-background-information, #e1f3f9);
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-information, #3facd7);
+  background: var(--status-notification-color-background-info, #e1f3f9);
+  box-shadow: inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-info, #3facd7);
 }
 .mc-status-notification--information .mc-status-notification__icon {
-  fill: var(--status-notification-color-icon-information, #0b96cc);
+  fill: var(--status-notification-color-icon-info, #0b96cc);
 }
 .mc-status-notification--success {
   background: var(--status-notification-color-background-success, #ebf5de);
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-success, #78be20);
+  box-shadow: inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-success, #78be20);
 }
 .mc-status-notification--success .mc-status-notification__icon {
   fill: var(--status-notification-color-icon-success, #3f9e10);
 }
 .mc-status-notification--warning {
   background: var(--status-notification-color-background-warning, #fdf1e8);
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-warning, #ef934a);
+  box-shadow: inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-warning, #ef934a);
 }
 .mc-status-notification--warning .mc-status-notification__icon {
   fill: var(--status-notification-color-icon-warning, #ea7315);
 }
 .mc-status-notification--error {
   background: var(--status-notification-color-background-error, #fdeaea);
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-error, #ef5f5c);
+  box-shadow: inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-error, #ef5f5c);
 }
 .mc-status-notification--error .mc-status-notification__icon {
   fill: var(--status-notification-color-icon-error, #ea302d);

package/dist/components/steppercompact/README.md

@@ -0,0 +1,13 @@
+# `m-stepper-compact`
+
+A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `value` | Current step of the stepper compact. | `number` | `$bindable(1)` |
+| `maxsteps` | Maximum number of steps for the stepper compact. | `number` | `$bindable(4)` |
+| `label*` | Label of the stepper compact. | `string` |   |
+| `description` | Description displayed below the label of the stepper compact. | `string` |   |
+

package/dist/components/steppercompact/StepperCompact.js

@@ -0,0 +1,4 @@
+import{c as E,p as M,a as q,b as p,f as w,m as l,C as m,d as s,s as b,t as f,i as x,j as A,k as n,r as a,h as y}from"../../custom-element.js";import{i as B}from"../../if.js";import{C as F}from"../circularprogressbar/CircularProgressbar.js";import"../../attributes.js";var G=w('<p class="mc-stepper-compact__description svelte-1o3m5eh"> </p>'),H=w('<div class="mc-stepper-compact svelte-1o3m5eh"><div class="mc-circular-progressbar mc-stepper-compact__progress svelte-1o3m5eh"><!></div> <div class="mc-stepper-compact__label-container"><p class="mc-stepper-compact__label svelte-1o3m5eh"> </p> <!></div></div>');const I={hash:"svelte-1o3m5eh",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-stepper-compact.svelte-1o3m5eh {display:inline-flex;justify-content:start;align-items:center;}.mc-stepper-compact__progress.svelte-1o3m5eh {width:3rem;height:3rem;}.mc-stepper-compact__label.svelte-1o3m5eh, .mc-stepper-compact__description.svelte-1o3m5eh {padding-left:0.5rem;}.mc-stepper-compact__label.svelte-1o3m5eh {margin:0;font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, 0.875rem);color:var(--progressbar-color-text, #000000);line-height:var(--line-height-s, 1.3);}.mc-stepper-compact__description.svelte-1o3m5eh {margin:0.25rem 0 0;font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, 0.75rem);color:var(--stepper-color-information, #666666);line-height:var(--line-height-s, 1.3);}.mc-stepper-compact__progress.svelte-1o3m5eh {width:3rem;height:3rem;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__content {display:block !important;visibility:visible;font-weight:600;font-size:0.875rem;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__number {display:block;visibility:visible;opacity:1;color:inherit;font-size:inherit;line-height:inherit;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__indicator {stroke-width:calc(4 / (48 / 100));stroke:var(--stepper-color-progress-bar-indicator, #117f03);fill:none;stroke-linecap:round;}`};function J(g,r){M(r,!0),q(g,I);let o=p(r,"value",15,1),c=p(r,"maxsteps",15,4),v=p(r,"label",7),i=p(r,"description",7);const k=m(()=>()=>{const e=o()??0,t=c()??1;return Math.round(e/t*100)}),z=m(()=>()=>`${o()} / ${c()}`);var C={get value(){return o()},set value(e=1){o(e),n()},get maxsteps(){return c()},set maxsteps(e=4){c(e),n()},get label(){return v()},set label(e){v(e),n()},get description(){return i()},set description(e){i(e),n()}},_=H(),h=s(_),j=s(h);{let e=m(()=>l(z)()),t=m(()=>l(k)());F(j,{"aria-label":"Progress bar",type:"content",size:"m",get contentvalue(){return l(e)},get value(){return l(t)},class:"mc-circular-progressbar mc-circular-progressbar--m mc-stepper-compact__indicator mc-stepper-compact__number"})}a(h);var u=b(h,2),d=s(u),P=s(d,!0);a(d);var S=b(d,2);{var V=e=>{var t=G(),D=s(t,!0);a(t),f(()=>y(D,i())),x(e,t)};B(S,e=>{i()&&e(V)})}return a(u),a(_),f(()=>y(P,v())),x(g,_),A(C)}customElements.define("m-stepper-compact",E(J,{value:{},maxsteps:{},label:{},description:{}},[],[],!0));
+//# sourceMappingURL=StepperCompact.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepperCompact.js","sources":["../../../src/components/steppercompact/StepperCompact.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-stepper-compact' }} />\n\n<script lang=\"ts\">\n  import CircularProgressbar from '../circularprogressbar/CircularProgressbar.svelte';\n  /**\n   * A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.\n   */\n  interface Props {\n    /**\n     * Current step of the stepper compact.\n     */\n    value?: number;\n    /**\n     * Maximum number of steps for the stepper compact.\n     */\n    maxsteps?: number;\n    /**\n     * Label of the stepper compact.\n     */\n    label: string;\n    /**\n     * Description displayed below the label of the stepper compact.\n     */\n    description?: string;\n  }\n\n  let { value = $bindable(1), maxsteps = $bindable(4), label, description }: Props = $props();\n\n  const progressValue = $derived(() => {\n    const v = value ?? 0;\n    const m = maxsteps ?? 1;\n    return Math.round((v / m) * 100);\n  });\n\n  const contentValue = $derived(() => {\n    return `${value} / ${maxsteps}`;\n  });\n</script>\n\n<div class=\"mc-stepper-compact\">\n  <div class=\"mc-circular-progressbar mc-stepper-compact__progress\">\n    <CircularProgressbar\n      aria-label=\"Progress bar\"\n      type=\"content\"\n      size=\"m\"\n      contentvalue={contentValue()}\n      value={progressValue()}\n      class=\"mc-circular-progressbar mc-circular-progressbar--m mc-stepper-compact__indicator mc-stepper-compact__number\"\n    />\n  </div>\n  <div class=\"mc-stepper-compact__label-container\">\n    <p class=\"mc-stepper-compact__label\">{label}</p>\n    {#if description}\n      <p class=\"mc-stepper-compact__description\">{description}</p>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/stepper-compact';\n  @use '@mozaic-ds/styles/components/circular-progressbar/_t.circular-progressbar' as *;\n\n  .mc-stepper-compact__progress {\n    width: $spacing-600;\n    height: $spacing-600;\n\n    :global(.mc-circular-progressbar__content) {\n      display: block !important;\n      visibility: visible;\n      font-weight: 600;\n      font-size: 0.875rem;\n    }\n\n    :global(.mc-circular-progressbar__number) {\n      display: block;\n      visibility: visible;\n      opacity: 1;\n      color: inherit;\n      font-size: inherit;\n      line-height: inherit;\n    }\n\n    :global(.mc-circular-progressbar__indicator) {\n      @include calculate-border-width(4, 48, 100);\n      stroke: $stepper-color-progress-bar-indicator;\n      fill: none;\n      stroke-linecap: round;\n    }\n  }\n</style>\n"],"names":["value","maxsteps","label","$.prop","$$props","description","progressValue","$.derived","v","m","contentValue","$$render","consequent"],"mappings":";;g2CAAA,gBA0BQ,IAAAA,iBAAkB,CAAC,EAAGC,oBAAqB,CAAC,EAAGC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAEjE,MAAAE,EAAaC,EAAA,IAAA,IAAkB,OAC7BC,EAAIR,EAAK,GAAI,EACbS,EAAIR,EAAQ,GAAI,EACf,OAAA,KAAK,MAAOO,EAAIC,EAAK,GAAG,CACjC,CAAC,EAEKC,EAAYH,EAAA,IAAA,IACN,GAAAP,EAAK,OAAMC,EAAQ,CAAA,EAC9B,6CAVuB,EAAC,qDAAwB,EAAC,yJAmBhCS,CAAY,EAAA,CAAA,YACnBJ,CAAa,EAAA,CAAA,6UAOwBD,EAAW,CAAA,CAAA,kBADpDA,EAAW,GAAAM,EAAAC,CAAA,+BADsBV,EAAK,CAAA,CAAA,aAd/C"}

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

@@ -0,0 +1,119 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import StepperCompact from './StepperCompact.svelte';
+describe('StepperCompact component', () => {
+    it('renders with a label by default', () => {
+        const { container } = render(StepperCompact, { props: { label: 'My label' } });
+        expect(container.querySelector('.mc-stepper-compact')).toBeTruthy();
+        expect(container.querySelector('.mc-stepper-compact__label')?.textContent).toBe('My label');
+        expect(container.querySelector('.mc-stepper-compact__description')).toBeFalsy();
+    });
+    it('calculates progress value correctly', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'Étape 2',
+                value: 2,
+                maxsteps: 5,
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__progress')).toBeTruthy();
+    });
+    it('displays current step and max steps in progress bar', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'Step 3',
+                value: 3,
+                maxsteps: 7,
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__progress')).toBeTruthy();
+    });
+    it('renders with custom size', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'Taille m',
+                size: 'm',
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__progress')).toBeTruthy();
+    });
+    it('handles edge cases for progress calculation with value 0', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'Zero',
+                value: 0,
+                maxsteps: 1,
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__progress')).toBeTruthy();
+    });
+    it('handles maximum progress correctly', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'Maximum',
+                value: 5,
+                maxsteps: 5,
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__progress')).toBeTruthy();
+    });
+    it('shows description when additionalInfo is true and description is provided', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'Test step',
+                description: 'Description visible',
+                additionalInfo: true,
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__description')?.textContent).toBe('Description visible');
+    });
+    it('hides description when additionalInfo is true and description is empty', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'Test step',
+                description: '',
+                additionalInfo: true,
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__description')).toBeFalsy();
+    });
+    it('renders with custom label', () => {
+        const customLabel = 'Step 2 of 5';
+        const { container } = render(StepperCompact, {
+            props: {
+                label: customLabel,
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__label')?.textContent).toBe(customLabel);
+    });
+    it('handles null/undefined values gracefully', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'Undefined steps',
+                value: undefined,
+                maxsteps: undefined,
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__progress')).toBeTruthy();
+    });
+    it('has proper ARIA label on progress bar', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'ARIA',
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__progress')).toBeTruthy();
+    });
+    it('applies correct CSS classes', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'Classes',
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact')).toBeTruthy();
+        expect(container.querySelector('.mc-circular-progressbar')).toBeTruthy();
+        expect(container.querySelector('.mc-stepper-compact__progress')).toBeTruthy();
+        expect(container.querySelector('.mc-stepper-compact__label-container')).toBeTruthy();
+        expect(container.querySelector('.mc-stepper-compact__label')).toBeTruthy();
+    });
+});

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,28 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+const meta = {
+    title: 'Indicators/Stepper Compact',
+    component: 'm-stepper-compact',
+    argTypes: {
+        value: {
+            control: { type: 'number', min: 1, max: 10 },
+        },
+        maxsteps: {
+            control: { type: 'number', min: 2, max: 10 },
+        },
+    },
+    args: {
+        value: 1,
+        maxsteps: 4,
+        label: 'Current Step',
+        description: 'Next: Step label',
+    },
+    render: (args) => html `<m-stepper-compact
+      value="${ifDefined(args.value)}"
+      maxsteps="${ifDefined(args.maxsteps)}"
+      label="${ifDefined(args.label)}"
+      description="${ifDefined(args.description)}"
+    ></m-stepper-compact>`,
+};
+export default meta;
+export const Default = {};

package/dist/components/steppercompact/StepperCompact.svelte

@@ -0,0 +1,123 @@
+<svelte:options customElement={{ tag: 'm-stepper-compact' }} />
+
+<script lang="ts">
+  import CircularProgressbar from '../circularprogressbar/CircularProgressbar.svelte';
+  /**
+   * A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.
+   */
+  interface Props {
+    /**
+     * Current step of the stepper compact.
+     */
+    value?: number;
+    /**
+     * Maximum number of steps for the stepper compact.
+     */
+    maxsteps?: number;
+    /**
+     * Label of the stepper compact.
+     */
+    label: string;
+    /**
+     * Description displayed below the label of the stepper compact.
+     */
+    description?: string;
+  }
+
+  let { value = $bindable(1), maxsteps = $bindable(4), label, description }: Props = $props();
+
+  const progressValue = $derived(() => {
+    const v = value ?? 0;
+    const m = maxsteps ?? 1;
+    return Math.round((v / m) * 100);
+  });
+
+  const contentValue = $derived(() => {
+    return `${value} / ${maxsteps}`;
+  });
+</script>
+
+<div class="mc-stepper-compact">
+  <div class="mc-circular-progressbar mc-stepper-compact__progress">
+    <CircularProgressbar
+      aria-label="Progress bar"
+      type="content"
+      size="m"
+      contentvalue={contentValue()}
+      value={progressValue()}
+      class="mc-circular-progressbar mc-circular-progressbar--m mc-stepper-compact__indicator mc-stepper-compact__number"
+    />
+  </div>
+  <div class="mc-stepper-compact__label-container">
+    <p class="mc-stepper-compact__label">{label}</p>
+    {#if description}
+      <p class="mc-stepper-compact__description">{description}</p>
+    {/if}
+  </div>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-stepper-compact {
+  display: inline-flex;
+  justify-content: start;
+  align-items: center;
+}
+.mc-stepper-compact__progress {
+  width: 3rem;
+  height: 3rem;
+}
+.mc-stepper-compact__indicator {
+  stroke-width: calc(4 / (48 / 100));
+  stroke: var(--stepper-color-progress-bar-indicator, #117f03);
+  fill: none;
+  stroke-linecap: round;
+}
+.mc-stepper-compact__number {
+  font-size: var(--font-size-100, 0.875rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  color: var(--progressbar-color-text, #000000);
+}
+.mc-stepper-compact__label, .mc-stepper-compact__description {
+  padding-left: 0.5rem;
+}
+.mc-stepper-compact__label {
+  margin: 0;
+  font-weight: var(--font-weight-semi-bold, 600);
+  font-size: var(--font-size-100, 0.875rem);
+  color: var(--progressbar-color-text, #000000);
+  line-height: var(--line-height-s, 1.3);
+}
+.mc-stepper-compact__description {
+  margin: 0.25rem 0 0;
+  font-weight: var(--font-weight-regular, 400);
+  font-size: var(--font-size-50, 0.75rem);
+  color: var(--stepper-color-information, #666666);
+  line-height: var(--line-height-s, 1.3);
+}
+
+.mc-stepper-compact__progress {
+  width: 3rem;
+  height: 3rem;
+}
+.mc-stepper-compact__progress :global(.mc-circular-progressbar__content) {
+  display: block !important;
+  visibility: visible;
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+.mc-stepper-compact__progress :global(.mc-circular-progressbar__number) {
+  display: block;
+  visibility: visible;
+  opacity: 1;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+.mc-stepper-compact__progress :global(.mc-circular-progressbar__indicator) {
+  stroke-width: calc(4 / (48 / 100));
+  stroke: var(--stepper-color-progress-bar-indicator, #117f03);
+  fill: none;
+  stroke-linecap: round;
+}</style>

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

@@ -0,0 +1,25 @@
+/**
+ * A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.
+ */
+interface Props {
+    /**
+     * Current step of the stepper compact.
+     */
+    value?: number;
+    /**
+     * Maximum number of steps for the stepper compact.
+     */
+    maxsteps?: number;
+    /**
+     * Label of the stepper compact.
+     */
+    label: string;
+    /**
+     * Description displayed below the label of the stepper compact.
+     */
+    description?: string;
+}
+declare const StepperCompact: import("svelte").Component<Props, {}, "value" | "maxsteps">;
+type StepperCompact = ReturnType<typeof StepperCompact>;
+export default StepperCompact;
+//# sourceMappingURL=StepperCompact.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepperCompact.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/steppercompact/StepperCompact.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAoCH,QAAA,MAAM,cAAc,6DAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/tab/Tab.js

@@ -1,4 +1,4 @@
-import{c as E,p as S,a as T,b as f,f as h,d as o,i as u,j as q,k as i,z as A,r,s as y}from"../../custom-element.js";import{i as B}from"../../if.js";import{s as b}from"../../slot.js";import{b as x}from"../../attributes.js";var C=h('<button><span class="mc-tabs__icon svelte-g14hff"><!></span> <span class="mc-tabs__label svelte-g14hff"><!></span></button>'),F=h('<a><span class="mc-tabs__icon svelte-g14hff"><!></span> <span class="mc-tabs__label svelte-g14hff"><!></span></a>'),G=h('<li class="mc-tabs__item" role="presentation"><!></li>');const H={hash:"svelte-g14hff",code:`/**
+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:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-tabs.svelte-g14hff {background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem;}.mc-tabs__list.svelte-g14hff {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:0.5rem;padding:0.5rem 0.25rem;}.mc-tabs__tab.svelte-g14hff {font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-semi-bold, 600);align-items:center;background:none;border:none;border-radius:var(--radius-s, 0.25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:0.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:0.75rem;padding-right:0.75rem;position:relative;text-decoration:none;}.mc-tabs__tab.svelte-g14hff:hover {background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-tabs__tab.svelte-g14hff:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-tabs__tab--selected.svelte-g14hff {color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de);}.mc-tabs__tab--selected.svelte-g14hff:hover {background-color:var(--tabs-color-background-selected-hover, #c5e39e);}.mc-tabs__tab--disabled.svelte-g14hff {color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed;}.mc-tabs__tab--disabled.svelte-g14hff:hover {background:none;}.mc-tabs__label.svelte-g14hff {pointer-events:none;}.mc-tabs__icon.svelte-g14hff {fill:currentcolor;height:1.5rem;width:1.5rem;}.mc-tabs__icon.svelte-g14hff:empty {display:none;}`};function I(p,t){S(t,!0),T(p,H);let d=f(t,"tag",7,"button"),l=f(t,"selected",7,!1),v=f(t,"href",7),n=f(t,"disabled",7),k=A(t,["$$slots","$$events","$$legacy","$$host","tag","selected","href","disabled"]);var w={get tag(){return d()},set tag(e="button"){d(e),i()},get selected(){return l()},set selected(e=!1){l(e),i()},get href(){return v()},set href(e){v(e),i()},get disabled(){return n()},set disabled(e){n(e),i()}},m=G(),z=o(m);{var j=e=>{var a=C();x(a,()=>({type:"button",role:"tab","aria-selected":l(),class:["mc-tabs__tab",l()&&"mc-tabs__tab--selected",n()&&"mc-tabs__tab--disabled"],...k}),void 0,void 0,"svelte-g14hff");var s=o(a),_=o(s);b(_,t,"icon",{}),r(s);var c=y(s,2),g=o(c);b(g,t,"default",{}),r(c),r(a),u(e,a)},D=e=>{var a=F();x(a,()=>({href:v(),role:"tab","aria-selected":l(),class:["mc-tabs__tab",l()&&"mc-tabs__tab--selected",n()&&"mc-tabs__tab--disabled"],...k}),void 0,void 0,"svelte-g14hff");var s=o(a),_=o(s);b(_,t,"icon",{}),r(s);var c=y(s,2),g=o(c);b(g,t,"default",{}),r(c),r(a),u(e,a)};B(z,e=>{d()==="button"?e(j):e(D,!1)})}return r(m),u(p,m),q(w)}customElements.define("m-tab",E(I,{tag:{},selected:{},href:{},disabled:{}},["icon","default"],[],!0));
+ */.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));
 //# 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":";;4qDAAA,gBA6BQ,IAAAA,cAAM,QAAQ,EAAEC,mBAAW,EAAK,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EAAKE,EAAKC,EAAAH,EAAA,sHAApD,SAAQ,qDAAa,GAAK,mMAQnBH,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,mMAcWL,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,6IA9BHN,EAAG,IAAK,SAAQQ,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,2BAHvB"}
+{"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"}

package/dist/components/tab/Tab.svelte

@@ -96,7 +96,7 @@
   align-items: center;
   background: none;
   border: none;
-  border-radius: var(--radius-s, 0.25rem);
+  border-radius: var(--border-radius-s, 0.25rem);
   color: var(--tabs-color-text-default, #404040);
   cursor: pointer;
   display: flex;

package/dist/components/tabs/Tabs.svelte

@@ -56,7 +56,7 @@
   align-items: center;
   background: none;
   border: none;
-  border-radius: var(--radius-s, 0.25rem);
+  border-radius: var(--border-radius-s, 0.25rem);
   color: var(--tabs-color-text-default, #404040);
   cursor: pointer;
   display: flex;

package/dist/components/tag/README.md

@@ -0,0 +1,30 @@
+# `m-tag`
+
+A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `type` | Defines the behavior and layout of the tag. | `'informative'` `'interactive'` `'contextualised'` `'removable'` `'selectable'` | `informative` |
+| `size` | Determines the size of the tag. | `'s'` `'m'` `'l'` | `m` |
+| `id` | A unique identifier for the tag, used to associate the label with the form element. **Required** when type is 'selectable' or 'removable'. | `string` |   |
+| `name` | The name attribute for the tag element, typically used for form submission. (only relevant for type: 'selectable'). | `string` |   |
+| `label*` | The text label displayed next to the tag. | `string` |   |
+| `checked` | The tag's checked state. Used only for type: 'selectable'. | `boolean` | `$bindable()` |
+| `disabled` | If `true`, disables the tag, making it non-interactive. Applicable to selectable, interactive, and contextualised types. | `boolean` |   |
+| `contextualisednumber` | A number displayed in the badge when the tag is contextualised. | `number` | `99` |
+| `removablelabel` | Accessible label text for the remove button in removable tags. | `string` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `icon` | Use this slot to insert an icon in the tag. |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `remove-tag` | Emits when the remove button of a tag is clicked, passing the tag's ID. | `CustomEvent<string>` |
+

package/dist/components/tag/Tag.js

@@ -0,0 +1,4 @@
+import{c as Z,p as $,b as r,z as ce,t as L,i as v,j as ee,k as l,e as P,g as F,v as me,a as fe,A as j,B as A,f as R,d,s as N,r as i,h as M,m as ge,C as ue}from"../../custom-element.js";import{i as B}from"../../if.js";import{s as Y}from"../../slot.js";import{s as D,a as be,r as he}from"../../attributes.js";import{a as pe}from"../../input.js";import{b as _e}from"../../this.js";import{C as we}from"../../CrossCircleFilled24.js";import"../../legacy.js";import{N as xe}from"../numberbadge/NumberBadge.js";var ke=ce('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06"></path></svg>');function te(S,t){$(t,!1);let a=r(t,"id",12,void 0),o=r(t,"style",12,void 0),g=r(t,"className",12,void 0),k=r(t,"fill",12,void 0),c=r(t,"size",12,"1.25rem");var E={get id(){return a()},set id(s){a(s),l()},get style(){return o()},set style(s){o(s),l()},get className(){return g()},set className(s){g(s),l()},get fill(){return k()},set fill(s){k(s),l()},get size(){return c()},set size(s){c(s),l()}},n=ke();return L(()=>{D(n,"id",a()),be(n,o()),P(n,0,F(g())),D(n,"fill",k())}),v(S,n),ee(E)}customElements.define("cross-circle-filled-20",Z(te,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Ce=R('<label><!> <input type="checkbox" class="mc-tag__input svelte-1f9dt2v"/> <span class="mc-tag__label svelte-1f9dt2v"> </span></label>'),Ee=R('<button type="button"><!> <span class="mc-tag__label svelte-1f9dt2v"> </span></button>'),ze=R('<button type="button"><!> <span class="mc-tag__label svelte-1f9dt2v"> </span></button>'),ye=R('<span><span class="mc-tag__label svelte-1f9dt2v"> </span> <button class="mc-tag-removable__remove svelte-1f9dt2v" type="button"><span class="mc-tag-removable__icon svelte-1f9dt2v"><!></span> <span class="mc-tag-removable__text svelte-1f9dt2v"> </span></button></span>'),Ne=R('<span><span class="mc-tag__label svelte-1f9dt2v"> </span></span>');const Me={hash:"svelte-1f9dt2v",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-tag.svelte-1f9dt2v {font-size:var(--font-size-100, 0.875rem);border-radius:2rem;height:2rem;padding-inline:0.75rem;box-sizing:border-box;display:inline-flex;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-width-s, 0.0625rem) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-1f9dt2v {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-1f9dt2v {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-1f9dt2v, .mc-tag.svelte-1f9dt2v:disabled {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-interactive.svelte-1f9dt2v {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-1f9dt2v:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-1f9dt2v: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-tag-contextualised.svelte-1f9dt2v {gap:0.25rem;text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:0.5rem;}.mc-tag-contextualised.svelte-1f9dt2v:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-1f9dt2v: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-tag-contextualised.mc-tag--s.svelte-1f9dt2v {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-1f9dt2v {padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-removable__remove.svelte-1f9dt2v {width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 0.125rem;padding:0.25rem;display:block;cursor:pointer;border-radius:var(--border-radius-full, 100%);}.mc-tag-removable__remove.svelte-1f9dt2v:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-1f9dt2v: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-tag-removable__icon.svelte-1f9dt2v {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-1f9dt2v {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-removable.mc-tag--s.svelte-1f9dt2v {padding:0 0 0 0.5rem;}.mc-tag-removable.mc-tag--s.svelte-1f9dt2v .mc-tag-removable__remove:where(.svelte-1f9dt2v) {width:1.5rem;height:1.5rem;padding:0.125rem;}.mc-tag-removable.mc-tag--s.svelte-1f9dt2v .mc-tag-removable__icon:where(.svelte-1f9dt2v) {width:1.25rem;height:1.25rem;}.mc-tag-removable.mc-tag--l.svelte-1f9dt2v .mc-tag-removable__remove:where(.svelte-1f9dt2v) {width:2.5rem;height:2.5rem;}.mc-tag-removable.mc-tag--l.svelte-1f9dt2v .mc-tag-removable__icon:where(.svelte-1f9dt2v) {width:2rem;height:2rem;}.mc-tag-selectable.svelte-1f9dt2v {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-selectable.svelte-1f9dt2v:hover {box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-1f9dt2v:has(:where(.svelte-1f9dt2v):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-tag-selectable.svelte-1f9dt2v:has(:where(.svelte-1f9dt2v):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-1f9dt2v:has(:where(.svelte-1f9dt2v):checked)::before {display:inline-block;content:"";height:1.25rem;width:1.25rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--tag-color-text-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-tag-selectable.svelte-1f9dt2v:has(:where(.svelte-1f9dt2v):checked):not(:has(:disabled)):hover {background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none;}.mc-tag-selectable.svelte-1f9dt2v:has(:where(.svelte-1f9dt2v):disabled) {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-selectable.svelte-1f9dt2v:has(:where(.svelte-1f9dt2v):disabled)::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--color-text-disabled, %23737373)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-tag-selectable.svelte-1f9dt2v .mc-tag__input:where(.svelte-1f9dt2v) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-selectable.svelte-1f9dt2v .mc-tag__label:where(.svelte-1f9dt2v) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-1f9dt2v {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-1f9dt2v {padding-inline-start:0.75rem;}.mc-tag-interactive.svelte-1f9dt2v {gap:0.25rem;}`};function Be(S,t){$(t,!0),fe(S,Me);let a=r(t,"type",7,"informative"),o=r(t,"size",7,"m"),g=r(t,"id",7),k=r(t,"name",7),c=r(t,"label",7),E=r(t,"checked",15),n=r(t,"disabled",7),s=r(t,"contextualisednumber",7,99),I=r(t,"removablelabel",7),J;const ae=()=>{const e=new CustomEvent("remove-tag",{detail:g(),bubbles:!0,composed:!0});J.dispatchEvent(e)};var re={get type(){return a()},set type(e="informative"){a(e),l()},get size(){return o()},set size(e="m"){o(e),l()},get id(){return g()},set id(e){g(e),l()},get name(){return k()},set name(e){k(e),l()},get label(){return c()},set label(e){c(e),l()},get checked(){return E()},set checked(e){E(e),l()},get disabled(){return n()},set disabled(e){n(e),l()},get contextualisednumber(){return s()},set contextualisednumber(e=99){s(e),l()},get removablelabel(){return I()},set removablelabel(e){I(e),l()}},W=j(),le=A(W);{var oe=e=>{var b=Ce(),T=d(b);{var K=p=>{var C=j(),H=A(C);Y(H,t,"icon",{}),v(p,C)};B(T,p=>{E()||p(K)})}var h=N(T,2);he(h);var u=N(h,2),m=d(u,!0);i(u),i(b),L(()=>{D(b,"for",g()),P(b,1,F(["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`]),"svelte-1f9dt2v"),D(h,"id",g()),D(h,"name",k()),h.disabled=n(),M(m,c())}),pe(h,E),v(e,b)},se=e=>{var b=j(),T=A(b);{var K=u=>{var m=Ee(),p=d(m);Y(p,t,"icon",{});var C=N(p,2),H=d(C,!0);i(C),i(m),L(()=>{P(m,1,F(["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`]),"svelte-1f9dt2v"),m.disabled=n(),M(H,c())}),v(u,m)},h=u=>{var m=j(),p=A(m);{var C=z=>{var _=ze(),q=d(_);{let w=ue(()=>o()==="l"?"m":void 0);xe(q,{appearance:"inverse",get label(){return s()},get size(){return ge(w)}})}var G=N(q,2),O=d(G,!0);i(G),i(_),L(()=>{P(_,1,F(["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`]),"svelte-1f9dt2v"),_.disabled=n(),M(O,c())}),v(z,_)},H=z=>{var _=j(),q=A(_);{var G=w=>{var f=ye(),y=d(f),Q=d(y,!0);i(y);var U=N(y,2);U.__click=ae;var V=d(U),de=d(V);{var ie=x=>{te(x,{"aria-hidden":"true"})},ne=x=>{we(x,{"aria-hidden":"true"})};B(de,x=>{o()==="s"?x(ie):x(ne,!1)})}i(V);var X=N(V,2),ve=d(X,!0);i(X),i(U),i(f),_e(f,x=>J=x,()=>J),L(()=>{P(f,1,F(["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`]),"svelte-1f9dt2v"),M(Q,c()),M(ve,I())}),v(w,f)},O=w=>{var f=Ne(),y=d(f),Q=d(y,!0);i(y),i(f),L(()=>{P(f,1,F(["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`]),"svelte-1f9dt2v"),M(Q,c())}),v(w,f)};B(q,w=>{a()==="removable"?w(G):w(O,!1)},!0)}v(z,_)};B(p,z=>{a()==="contextualised"?z(C):z(H,!1)},!0)}v(u,m)};B(T,u=>{a()==="interactive"?u(K):u(h,!1)},!0)}v(e,b)};B(le,e=>{a()==="selectable"?e(oe):e(se,!1)})}return v(S,W),ee(re)}me(["click"]);customElements.define("m-tag",Z(Be,{type:{},size:{},id:{},name:{},label:{},checked:{},disabled:{},contextualisednumber:{},removablelabel:{}},["icon"],[],!0));
+//# sourceMappingURL=Tag.js.map

package/dist/components/tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/CrossCircleFilled20/CrossCircleFilled20.svelte","../../../src/components/tag/Tag.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'cross-circle-filled-20', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.25rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" width=\"20px\" height=\"20px\"><path fill-rule=\"evenodd\" d=\"M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06\"/></svg>","<svelte:options customElement={{ tag: 'm-tag' }} />\n\n<script lang=\"ts\">\n  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';\n  import CrossCircleFilled20 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled20/CrossCircleFilled20.svelte';\n  import NumberBadge from '../numberbadge/NumberBadge.svelte';\n  /**\n   * A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).\n   *\n   * @event remove-tag {CustomEvent<string>} - Emits when the remove button of a tag is clicked, passing the tag's ID.\n   * @slot icon - Use this slot to insert an icon in the tag.\n   */\n  interface Props {\n    /**\n     * Defines the behavior and layout of the tag.\n     */\n    type?: 'informative' | 'interactive' | 'contextualised' | 'removable' | 'selectable';\n    /**\n     * Determines the size of the tag.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * A unique identifier for the tag, used to associate the label with the form element. **Required** when type is 'selectable' or 'removable'.\n     */\n    id?: string;\n    /**\n     * The name attribute for the tag element, typically used for form submission. (only relevant for type: 'selectable').\n     */\n    name?: string;\n    /**\n     * The text label displayed next to the tag.\n     */\n    label: string;\n    /**\n     * The tag's checked state. Used only for type: 'selectable'.\n     */\n    checked?: boolean;\n    /**\n     * If `true`, disables the tag, making it non-interactive. Applicable to selectable, interactive, and contextualised types.\n     */\n    disabled?: boolean;\n    /**\n     * A number displayed in the badge when the tag is contextualised.\n     */\n    contextualisednumber?: number;\n    /**\n     * Accessible label text for the remove button in removable tags.\n     */\n    removablelabel?: string;\n  }\n\n  let {\n    type = 'informative',\n    size = 'm',\n    id,\n    name,\n    label,\n    checked = $bindable(),\n    disabled,\n    contextualisednumber = 99,\n    removablelabel,\n  }: Props = $props();\n  let element: HTMLElement;\n\n  const onRemove = () => {\n    const event = new CustomEvent('remove-tag', {\n      detail: id,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n</script>\n\n{#if type === 'selectable'}\n  <label for={id} class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]}>\n    {#if !checked}\n      <slot name=\"icon\" />\n    {/if}\n    <input type=\"checkbox\" class=\"mc-tag__input\" {id} {name} {disabled} bind:checked />\n    <span class=\"mc-tag__label\">{label}</span>\n  </label>\n{:else if type === 'interactive'}\n  <button class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]} type=\"button\" {disabled}>\n    <slot name=\"icon\" />\n    <span class=\"mc-tag__label\">{label}</span>\n  </button>\n{:else if type === 'contextualised'}\n  <button class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]} type=\"button\" {disabled}>\n    <NumberBadge\n      appearance=\"inverse\"\n      label={contextualisednumber}\n      size={size === 'l' ? 'm' : undefined}\n    />\n    <span class=\"mc-tag__label\">{label}</span>\n  </button>\n{:else if type === 'removable'}\n  <span class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]} bind:this={element}>\n    <span class=\"mc-tag__label\">{label}</span>\n    <button class=\"mc-tag-removable__remove\" type=\"button\" onclick={onRemove}>\n      <span class=\"mc-tag-removable__icon\">\n        {#if size === 's'}\n          <CrossCircleFilled20 aria-hidden=\"true\" />\n        {:else}\n          <CrossCircleFilled24 aria-hidden=\"true\" />\n        {/if}\n      </span>\n      <span class=\"mc-tag-removable__text\">{removablelabel}</span>\n    </button>\n  </span>\n{:else}\n  <span class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]}>\n    <span class=\"mc-tag__label\">{label}</span>\n  </span>\n{/if}\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n\n  .mc-tag-interactive {\n    gap: 0.25rem;\n  }\n</style>\n"],"names":["id","style","className","fill","size","type","$.prop","$$props","name","label","checked","disabled","contextualisednumber","removablelabel","element","onRemove","event","$$render","consequent","$0","$.derived","consequent_4","alternate","$.bind_this","span_3","$$value","consequent_5","alternate_1","consequent_3","alternate_2","consequent_2","alternate_3","consequent_1","alternate_4"],"mappings":"m6BAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,SAAS,iRAGDJ,GAAE,OAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,gBAF3E;;u2NCPA,kBAoDI,IAAAE,eAAO,aAAa,EACpBD,eAAO,GAAG,EACVJ,EAAEM,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,EAAOJ,EAAAC,EAAA,UAAA,EAAA,EACPI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,+BAAuB,EAAE,EACzBC,EAAcP,EAAAC,EAAA,iBAAA,CAAA,EAEZO,EAEE,MAAAC,GAAQ,IAAS,CACf,MAAAC,EAAK,IAAO,YAAY,cAC5B,OAAQhB,EAAE,EACV,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBc,EAAQ,cAAcE,CAAK,CAC7B,4CAnBS,cAAa,6CACb,IAAG,0TAMa,GAAE,sLAiBnBN,EAAO,GAAAO,EAAAC,CAAA,yEADHlB,GAAE,WAAU,SAAQ,UAAYK,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,CAAA,EAAA,gBAAA,mDAKpCK,GAAK,2IAGpB,SAAQ,UAAYJ,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,CAAA,EAAA,gBAAA,qBAE5BK,GAAK,iEAO1B,IAAAU,EAAAC,GAAA,IAAAhB,EAAI,IAAK,IAAM,IAAM,MAAS,gDAD7BQ,EAAoB,+EAHf,SAAQ,UAAYP,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,CAAA,EAAA,gBAAA,qBAM5BK,GAAK,sGAK8BM,8GAEvDX,EAAI,IAAK,IAAGa,EAAAI,EAAA,EAAAJ,EAAAK,GAAA,EAAA,gDAJkDC,GAAAC,EAAAC,GAAAX,QAAAA,CAAO,kBAAlE,SAAQ,UAAYT,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,CAAA,EAAA,gBAAA,MAC1BK,GAAK,OASMI,GAAc,wEAI1C,SAAQ,UAAYR,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,CAAA,EAAA,gBAAA,MAC1BK,GAAK,oBAhB5BJ,EAAI,IAAK,YAAWY,EAAAS,CAAA,EAAAT,EAAAU,EAAA,EAAA,uBATpBtB,EAAI,IAAK,iBAAgBY,EAAAW,CAAA,EAAAX,EAAAY,EAAA,EAAA,uBALzBxB,EAAI,IAAK,cAAaY,EAAAa,CAAA,EAAAb,EAAAc,EAAA,EAAA,wBAR3B1B,EAAI,IAAK,aAAYY,EAAAe,EAAA,EAAAf,EAAAgB,GAAA,EAAA,wBAF1B","x_google_ignoreList":[0]}

package/dist/components/tag/Tag.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Size: Story;
+export declare const Interactive: Story;
+export declare const Disabled: Story;
+export declare const Contextualised: Story;
+export declare const Removable: Story;
+export declare const Selectable: Story;
+//# sourceMappingURL=Tag.stories.d.ts.map

package/dist/components/tag/Tag.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAMrE,QAAA,MAAM,IAAI,EAAE,IAkCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC"}