@mozaic-ds/web-components 1.1.0 → 1.3.0

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,h as u,i as q,j as i,r as A,e as r,s as y}from"../../custom-element.js";import{i as B}from"../../if.js";import{s as f}from"../../slot.js";import{a as x}from"../../attributes.js";var C=h('<button><span class="mc-tabs__icon svelte-g14hff"><!></span> <span class="mc-tabs__label svelte-g14hff"><!></span></button>'),F=h('<a><span class="mc-tabs__icon svelte-g14hff"><!></span> <span class="mc-tabs__label svelte-g14hff"><!></span></a>'),G=h('<li class="mc-tabs__item" role="presentation"><!></li>');const H={hash:"svelte-g14hff",code:`/**
  * 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    /**\n     * The HTML tag used for the tab.\n     */\n    tag?: 'a' | 'button';\n    /**\n     * If `true`, the tab will be selected.\n     */\n    selected?: boolean;\n    /**\n     * URL for the tab link.\n     */\n    href?: string;\n    /**\n     * If `true`, the tab will be disabled.\n     */\n    disabled?: boolean;\n  }\n\n  let { tag = 'button', selected = false, href, disabled, ...attrs }: Props = $props();\n</script>\n\n<li class=\"mc-tabs__item\" role=\"presentation\">\n  {#if tag === 'button'}\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={selected}\n      class={[\n        'mc-tabs__tab',\n        selected && 'mc-tabs__tab--selected',\n        disabled && 'mc-tabs__tab--disabled',\n      ]}\n      {...attrs}\n    >\n      <span class=\"mc-tabs__icon\">\n        <slot name=\"icon\" />\n      </span>\n\n      <span class=\"mc-tabs__label\">\n        <slot />\n      </span>\n    </button>\n  {:else}\n    <a\n      {href}\n      role=\"tab\"\n      aria-selected={selected}\n      class={[\n        'mc-tabs__tab',\n        selected && 'mc-tabs__tab--selected',\n        disabled && 'mc-tabs__tab--disabled',\n      ]}\n      {...attrs}\n    >\n      <span class=\"mc-tabs__icon\">\n        <slot name=\"icon\" />\n      </span>\n      <span class=\"mc-tabs__label\">\n        <slot />\n      </span>\n    </a>\n  {/if}\n</li>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tabs';\n\n  .mc-tabs__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["tag","selected","href","$.prop","$$props","disabled","attrs","$.rest_props","$$render","consequent","alternate"],"mappings":";;mrDAAA,gBA4BQ,IAAAA,cAAM,QAAQ,EAAEC,mBAAW,EAAK,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EAAKE,EAAKC,EAAAH,EAAA,sHAApD,SAAQ,qDAAa,GAAK,mMAQnBH,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,0MAcWL,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,oJA9BHN,EAAG,IAAK,SAAQQ,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,2BAHvB"}

package/dist/components/tab/Tab.svelte

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

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

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

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

package/dist/components/tabs/Tabs.js

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAsBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAqBnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC"}
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,eAAe,CAAC;AACvB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,qEAAqE,CAAC;AAE7E,QAAA,MAAM,IAAI,EAAE,IAsBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAqBnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC"}

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

@@ -1,6 +1,9 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './Tabs.svelte';
+import '../tab/Tab.svelte';
+import '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';
 const meta = {
     title: 'Navigation/Tabs',
     component: 'm-tabs',

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,A as fe,t as L,h as n,i as ee,j as l,l as te,m as ae,w as ge,a as be,B as D,C as F,f as H,r as ue,d,s as N,e as i,g as M,n as he,D as pe}from"../../custom-element.js";import{i as B}from"../../if.js";import{s as Y}from"../../slot.js";import{s as G,b as _e,a as q,r as we}from"../../attributes.js";import{a as xe}from"../../input.js";import{b as ke}from"../../this.js";import{C as Ce}from"../../CrossCircleFilled24.js";import"../../legacy.js";import{N as Ee}from"../numberbadge/NumberBadge.js";var ye=fe('<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 re(j,t){$(t,!1);let a=r(t,"id",12,void 0),o=r(t,"style",12,void 0),f=r(t,"className",12,void 0),w=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 f()},set className(s){f(s),l()},get fill(){return w()},set fill(s){w(s),l()},get size(){return c()},set size(s){c(s),l()}},v=ye();return L(()=>{G(v,"id",a()),_e(v,o()),te(v,0,ae(f())),G(v,"fill",w())}),n(j,v),ee(E)}customElements.define("cross-circle-filled-20",Z(re,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var ze=H('<label><!> <input type="checkbox" class="mc-tag__input svelte-1f9dt2v"/> <span class="mc-tag__label svelte-1f9dt2v"> </span></label>'),Ne=H('<button><!> <span class="mc-tag__label svelte-1f9dt2v"> </span></button>'),Me=H('<button><!> <span class="mc-tag__label svelte-1f9dt2v"> </span></button>'),Be=H('<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>'),Le=H('<span><span class="mc-tag__label svelte-1f9dt2v"> </span></span>');const Pe={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 De(j,t){$(t,!0),be(j,Pe);let a=r(t,"type",7,"informative"),o=r(t,"size",7,"m"),f=r(t,"id",7),w=r(t,"name",7),c=r(t,"label",7),E=r(t,"checked",15),v=r(t,"disabled",7),s=r(t,"contextualisednumber",7,99),I=r(t,"removablelabel",7),A=ue(t,["$$slots","$$events","$$legacy","$$host","type","size","id","name","label","checked","disabled","contextualisednumber","removablelabel"]),J;const le=()=>{const e=new CustomEvent("remove-tag",{detail:f(),bubbles:!0,composed:!0});J.dispatchEvent(e)};var oe={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 f()},set id(e){f(e),l()},get name(){return w()},set name(e){w(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 v()},set disabled(e){v(e),l()},get contextualisednumber(){return s()},set contextualisednumber(e=99){s(e),l()},get removablelabel(){return I()},set removablelabel(e){I(e),l()}},W=D(),se=F(W);{var de=e=>{var x=ze();q(x,()=>({for:f(),class:["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`],...A}),void 0,void 0,void 0,"svelte-1f9dt2v");var R=d(x);{var K=h=>{var k=D(),P=F(k);Y(P,t,"icon",{}),n(h,k)};B(R,h=>{E()||h(K)})}var u=N(R,2);we(u);var g=N(u,2),b=d(g,!0);i(g),i(x),L(()=>{G(u,"id",f()),G(u,"name",w()),u.disabled=v(),M(b,c())}),xe(u,E),n(e,x)},ie=e=>{var x=D(),R=F(x);{var K=g=>{var b=Ne();q(b,()=>({class:["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`],type:"button",disabled:v(),...A}),void 0,void 0,void 0,"svelte-1f9dt2v");var h=d(b);Y(h,t,"icon",{});var k=N(h,2),P=d(k,!0);i(k),i(b),L(()=>M(P,c())),n(g,b)},u=g=>{var b=D(),h=F(b);{var k=y=>{var C=Me();q(C,()=>({class:["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`],type:"button",disabled:v(),...A}),void 0,void 0,void 0,"svelte-1f9dt2v");var S=d(C);{let p=pe(()=>o()==="l"?"m":void 0);Ee(S,{appearance:"inverse",get label(){return s()},get size(){return he(p)}})}var T=N(S,2),O=d(T,!0);i(T),i(C),L(()=>M(O,c())),n(y,C)},P=y=>{var C=D(),S=F(C);{var T=p=>{var m=Be();q(m,()=>({class:["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`],...A}),void 0,void 0,void 0,"svelte-1f9dt2v");var z=d(m),Q=d(z,!0);i(z);var U=N(z,2);U.__click=le;var V=d(U),ve=d(V);{var ne=_=>{re(_,{"aria-hidden":"true"})},ce=_=>{Ce(_,{"aria-hidden":"true"})};B(ve,_=>{o()==="s"?_(ne):_(ce,!1)})}i(V);var X=N(V,2),me=d(X,!0);i(X),i(U),i(m),ke(m,_=>J=_,()=>J),L(()=>{M(Q,c()),M(me,I())}),n(p,m)},O=p=>{var m=Le(),z=d(m),Q=d(z,!0);i(z),i(m),L(()=>{te(m,1,ae(["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`]),"svelte-1f9dt2v"),M(Q,c())}),n(p,m)};B(S,p=>{a()==="removable"?p(T):p(O,!1)},!0)}n(y,C)};B(h,y=>{a()==="contextualised"?y(k):y(P,!1)},!0)}n(g,b)};B(R,g=>{a()==="interactive"?g(K):g(u,!1)},!0)}n(e,x)};B(se,e=>{a()==="selectable"?e(de):e(ie,!1)})}return n(j,W),ee(oe)}ge(["click"]);customElements.define("m-tag",Z(De,{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    ...attrs\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}`]} {...attrs}>\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\n    class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]}\n    type=\"button\"\n    {disabled}\n    {...attrs}\n  >\n    <slot name=\"icon\" />\n    <span class=\"mc-tag__label\">{label}</span>\n  </button>\n{:else if type === 'contextualised'}\n  <button\n    class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]}\n    type=\"button\"\n    {disabled}\n    {...attrs}\n  >\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} {...attrs}>\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","attrs","$.rest_props","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":"o7BAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,SAAS,iRAGDJ,GAAE,OAAUC,GAAK,YAASC,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,EACXO,EAAAC,GAAAR,EAAA,2IAEDS,EAEE,MAAAC,GAAQ,IAAS,CACf,MAAAC,EAAK,IAAO,YAAY,cAC5B,OAAQlB,EAAE,EACV,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBgB,EAAQ,cAAcE,CAAK,CAC7B,4CApBS,cAAa,6CACb,IAAG,0TAMa,GAAE,gIAiBflB,EAAE,SAAU,SAAQ,UAAYK,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,KAASU,mHACpEJ,EAAO,GAAAS,EAAAC,CAAA,gHAIgBX,GAAK,mFAI1B,SAAQ,UAAYJ,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,gCAG/CU,kHAGyBL,EAAK,CAAA,CAAA,wEAI1B,SAAQ,UAAYJ,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,gCAG/CU,uDAKI,IAAAO,EAAAC,GAAA,IAAAlB,EAAI,IAAK,IAAM,IAAM,MAAS,gDAD7BQ,EAAoB,yEAGAH,EAAK,CAAA,CAAA,wEAGtB,SAAQ,UAAYJ,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,KAA6BU,4FAEpBG,8GAEvDb,EAAI,IAAK,IAAGe,EAAAI,EAAA,EAAAJ,EAAAK,GAAA,EAAA,gDAJkDC,GAAAC,EAAAC,GAAAX,QAAAA,CAAO,aACjDP,GAAK,OASMI,GAAc,0EAI1C,SAAQ,UAAYR,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,CAAA,EAAA,gBAAA,MAC1BK,GAAK,oBAhB5BJ,EAAI,IAAK,YAAWc,EAAAS,CAAA,EAAAT,EAAAU,EAAA,EAAA,uBAdpBxB,EAAI,IAAK,iBAAgBc,EAAAW,CAAA,EAAAX,EAAAY,EAAA,EAAA,uBAVzB1B,EAAI,IAAK,cAAac,EAAAa,CAAA,EAAAb,EAAAc,EAAA,EAAA,wBAR3B5B,EAAI,IAAK,aAAYc,EAAAe,EAAA,EAAAf,EAAAgB,GAAA,EAAA,wBAF1B","x_google_ignoreList":[0]}

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Tag.svelte';
+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;AAKrE,OAAO,cAAc,CAAC;AAEtB,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,71 @@
+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';
+import './Tag.svelte';
+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,
+    },
+};