@mozaic-ds/web-components 1.0.0 → 1.2.0

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 {\n    tag = 'button',\n    selected = false,\n    href,\n    disabled,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<li class=\"mc-tabs__item\" role=\"presentation\">\n  {#if tag === 'button'}\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={selected}\n      class={[\n        'mc-tabs__tab',\n        selected && 'mc-tabs__tab--selected',\n        disabled && 'mc-tabs__tab--disabled',\n      ]}\n      {...attrs}\n    >\n      <span class=\"mc-tabs__icon\">\n        <slot name=\"icon\" />\n      </span>\n\n      <span class=\"mc-tabs__label\">\n        <slot />\n      </span>\n    </button>\n  {:else}\n    <a\n      {href}\n      role=\"tab\"\n      aria-selected={selected}\n      class={[\n        'mc-tabs__tab',\n        selected && 'mc-tabs__tab--selected',\n        disabled && 'mc-tabs__tab--disabled',\n      ]}\n      {...attrs}\n    >\n      <span class=\"mc-tabs__icon\">\n        <slot name=\"icon\" />\n      </span>\n      <span class=\"mc-tabs__label\">\n        <slot />\n      </span>\n    </a>\n  {/if}\n</li>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tabs';\n\n  .mc-tabs__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["tag","selected","href","$.prop","$$props","disabled","attrs","$.rest_props","$$render","consequent","alternate"],"mappings":";;4qDAAA,gBA8BI,IAAAA,cAAM,QAAQ,EACdC,mBAAW,EAAK,EAChBC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACLE,EAAAC,EAAAH,EAAA,sHAJG,SAAQ,qDACH,GAAK,mMAYCH,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,mMAcWL,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,6IA9BHN,EAAG,IAAK,SAAQQ,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,2BAHvB"}
+{"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

@@ -27,13 +27,7 @@
     disabled?: boolean;
   }
 
-  let {
-    tag = 'button',
-    selected = false,
-    href,
-    disabled,
-    ...attrs
-  }: Props = $props();
+  let { tag = 'button', selected = false, href, disabled, ...attrs }: Props = $props();
 </script>
 
 <li class="mc-tabs__item" role="presentation">
@@ -102,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/tab/Tab.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tab/Tab.svelte.ts"],"names":[],"mappings":"AAGE;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;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"}
+{"version":3,"file":"Tab.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tab/Tab.svelte.ts"],"names":[],"mappings":"AAGE;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA4CH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,GAAG;;;;;;;;UAAqF,CAAC;AAC7E,KAAK,GAAG,GAAG,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC;AACtC,eAAe,GAAG,CAAC"}

package/dist/components/tabs/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"}

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

@@ -0,0 +1,70 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { action } from 'storybook/actions';
+const meta = {
+    title: 'Indicators/Tag',
+    component: 'm-tag',
+    args: {
+        label: 'Tag label',
+    },
+    argTypes: {
+        size: {
+            control: 'inline-radio',
+            options: ['s', 'm', 'l'],
+        },
+        type: {
+            control: 'radio',
+            options: ['informative', 'interactive', 'contextualised', 'removable', 'selectable'],
+        },
+        'remove-tag': {
+            control: false,
+        },
+    },
+    render: (args) => html ` <m-tag
+      type=${ifDefined(args.type)}
+      size=${ifDefined(args.size)}
+      id=${ifDefined(args.id)}
+      name=${ifDefined(args.name)}
+      label=${ifDefined(args.label)}
+      checked=${ifDefined(args.checked)}
+      disabled=${ifDefined(args.disabled)}
+      contextualisednumber=${ifDefined(args.contextualisednumber)}
+      removablelabel=${ifDefined(args.removablelabel)}
+      @remove-tag=${action('remove-tag')}
+    >
+      ${unsafeHTML(ifDefined(args.icon))}
+    </m-tag>`,
+};
+export default meta;
+export const Default = {};
+export const Size = {
+    args: { size: 's' },
+};
+export const Interactive = {
+    args: { type: 'interactive' },
+};
+export const Disabled = {
+    args: {
+        type: 'interactive',
+        disabled: true,
+    },
+};
+export const Contextualised = {
+    args: {
+        type: 'contextualised',
+        contextualisednumber: 99,
+    },
+};
+export const Removable = {
+    args: {
+        type: 'removable',
+        id: 'tagId',
+    },
+};
+export const Selectable = {
+    args: {
+        type: 'selectable',
+        checked: true,
+    },
+};

package/dist/components/{tags/TagRemovable.svelte → tag/Tag.svelte}

@@ -1,47 +1,118 @@
-<svelte:options customElement={{ tag: 'mc-tag-removable' }} />
+<svelte:options customElement={{ tag: 'm-tag' }} />
 
 <script lang="ts">
   import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';
   import CrossCircleFilled20 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled20/CrossCircleFilled20.svelte';
-
+  import NumberBadge from '../numberbadge/NumberBadge.svelte';
+  /**
+   * 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).
+   *
+   * @event remove-tag {CustomEvent<string>} - Emits when the remove button of a tag is clicked, passing the tag's ID.
+   * @slot icon - Use this slot to insert an icon in the tag.
+   */
   interface Props {
-    id: string;
-    label: string;
-    removableLabel?: string;
+    /**
+     * Defines the behavior and layout of the tag.
+     */
+    type?: 'informative' | 'interactive' | 'contextualised' | 'removable' | 'selectable';
+    /**
+     * Determines the size of the tag.
+     */
     size?: 's' | 'm' | 'l';
-    [key: string]: any;
+    /**
+     * A unique identifier for the tag, used to associate the label with the form element. **Required** when type is 'selectable' or 'removable'.
+     */
+    id?: string;
+    /**
+     * The name attribute for the tag element, typically used for form submission. (only relevant for type: 'selectable').
+     */
+    name?: string;
+    /**
+     * The text label displayed next to the tag.
+     */
+    label: string;
+    /**
+     * The tag's checked state. Used only for type: 'selectable'.
+     */
+    checked?: boolean;
+    /**
+     * If `true`, disables the tag, making it non-interactive. Applicable to selectable, interactive, and contextualised types.
+     */
+    disabled?: boolean;
+    /**
+     * A number displayed in the badge when the tag is contextualised.
+     */
+    contextualisednumber?: number;
+    /**
+     * Accessible label text for the remove button in removable tags.
+     */
+    removablelabel?: string;
   }
 
   let {
+    type = 'informative',
+    size = 'm',
     id,
+    name,
     label,
-    removableLabel = 'Remove',
-    size = 'm',
-    ...attrs
+    checked = $bindable(),
+    disabled,
+    contextualisednumber = 99,
+    removablelabel,
   }: Props = $props();
+  let element: HTMLElement;
 
-  function handleRemove() {
-    dispatchEvent(new CustomEvent('remove-tag', { detail: id }));
-  }
+  const onRemove = () => {
+    const event = new CustomEvent('remove-tag', {
+      detail: id,
+      bubbles: true,
+      composed: true,
+    });
+    element.dispatchEvent(event);
+  };
 </script>
 
-<span
-  class={`mc-tag mc-tag-removable  ${size !== 'm' ? `mc-tag--${size}` : ''}`}
-  {id}
-  {...attrs}
->
-  <span class="mc-tag__label">{label}</span>
-  <button class="mc-tag-removable__remove" type="button" onclick={handleRemove}>
-    <span class="mc-tag-removable__icon">
-      {#if size === 's'}
-        <CrossCircleFilled20 aria-hidden="true" />
-      {:else}
-        <CrossCircleFilled24 aria-hidden="true" />
-      {/if}
-    </span>
-    <span class="mc-tag-removable__text">{removableLabel}</span>
+{#if type === 'selectable'}
+  <label for={id} class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]}>
+    {#if !checked}
+      <slot name="icon" />
+    {/if}
+    <input type="checkbox" class="mc-tag__input" {id} {name} {disabled} bind:checked />
+    <span class="mc-tag__label">{label}</span>
+  </label>
+{:else if type === 'interactive'}
+  <button class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]} type="button" {disabled}>
+    <slot name="icon" />
+    <span class="mc-tag__label">{label}</span>
   </button>
-</span>
+{:else if type === 'contextualised'}
+  <button class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]} type="button" {disabled}>
+    <NumberBadge
+      appearance="inverse"
+      label={contextualisednumber}
+      size={size === 'l' ? 'm' : undefined}
+    />
+    <span class="mc-tag__label">{label}</span>
+  </button>
+{:else if type === 'removable'}
+  <span class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]} bind:this={element}>
+    <span class="mc-tag__label">{label}</span>
+    <button class="mc-tag-removable__remove" type="button" onclick={onRemove}>
+      <span class="mc-tag-removable__icon">
+        {#if size === 's'}
+          <CrossCircleFilled20 aria-hidden="true" />
+        {:else}
+          <CrossCircleFilled24 aria-hidden="true" />
+        {/if}
+      </span>
+      <span class="mc-tag-removable__text">{removablelabel}</span>
+    </button>
+  </span>
+{:else}
+  <span class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]}>
+    <span class="mc-tag__label">{label}</span>
+  </span>
+{/if}
 
 <style>/**
  * Do not edit directly, this file was auto-generated.
@@ -56,7 +127,7 @@
   align-items: center;
   background: var(--tag-color-background-standard, #ffffff);
   color: var(--tag-color-text-standard, #242938);
-  border: var(--border-s, 1px) solid var(--tag-color-border, #999999);
+  border: var(--border-width-s, 0.0625rem) solid var(--tag-color-border, #999999);
 }
 .mc-tag--s {
   font-size: var(--font-size-50, 0.75rem);
@@ -88,7 +159,7 @@
   font-weight: var(--font-weight-semi-bold, 600);
 }
 .mc-tag-interactive:not(:disabled):hover {
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);
+  box-shadow: inset 0 0 0 var(--border-width-s, 0.0625rem) var(--tag-color-border, #999999);
 }
 .mc-tag-interactive: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));
@@ -137,7 +208,7 @@
   padding: 0.25rem;
   display: block;
   cursor: pointer;
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
 }
 .mc-tag-removable__remove:hover {
   background: var(--tag-color-background-inverse-hover, #343b4c);
@@ -191,7 +262,7 @@
   font-weight: var(--font-weight-semi-bold, 600);
 }
 .mc-tag-selectable:hover {
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);
+  box-shadow: inset 0 0 0 var(--border-width-s, 0.0625rem) var(--tag-color-border, #999999);
 }
 .mc-tag-selectable:has(: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));
@@ -244,4 +315,8 @@
 }
 .mc-tag-selectable.mc-tag--l {
   padding-inline-start: 0.75rem;
+}
+
+.mc-tag-interactive {
+  gap: 0.25rem;
 }</style>