@mozaic-ds/web-components 1.6.0 → 1.7.0

package/dist/components/stepperstacked/StepperStacked.svelte

@@ -0,0 +1,214 @@
+<svelte:options customElement={{ tag: 'm-stepper-stacked' }} />
+
+<script lang="ts">
+  import { Check24 } from '@mozaic-ds/icons-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 {
+    [key: string]: any;
+    /**
+     * Defines the currently active step.
+     *
+     * - If a `number` is provided, it represents the 1-based position of the step
+     *   in the `steps` array (e.g. `1` for the first step).
+     * - If a `string` is provided, it must match the `id` of one of the steps.
+     */
+    step?: string | number;
+
+    /**
+     * Steps of the stepper stacked.
+     */
+    steps?: Array<{
+      /**
+       * Unique identifier for the step.
+       */
+      id?: string;
+      /**
+       * Label of the step.
+       */
+      label: string;
+
+      /**
+       * Optional additional information under the label.
+       */
+      additionalinfo?: string;
+    }>;
+  }
+
+  let { step = $bindable(1), steps = $bindable([]), ...attrs }: Props = $props();
+
+  const activeStep = $derived.by(() => {
+    if (typeof step === 'number') {
+      return Math.min(Math.max(step, 1), steps.length) - 1;
+    } else {
+      const activeIndex = steps.findIndex((el) => el.id === step);
+      return activeIndex === -1 ? 0 : activeIndex;
+    }
+  });
+
+  const stepStates = $derived(() =>
+    steps.map((_, i) => ({
+      completed: i < activeStep,
+      current: i === activeStep,
+    })),
+  );
+</script>
+
+<nav class="mc-stepper-stacked" aria-label="Stepper" {...attrs}>
+  <ol class="mc-stepper-stacked__container">
+    {#each steps as step, index (index)}
+      {@const state = stepStates()[index]}
+      <li
+        class={{
+          'mc-stepper-stacked__item': true,
+          'has-additional': step.additionalinfo,
+        }}
+      >
+        <div class="mc-stepper-stacked__indicator">
+          {#if state.completed}
+            <span class="mc-stepper-stacked__icon mc-stepper-stacked__icon--check">
+              <Check24 />
+            </span>
+          {:else}
+            <span
+              class={{
+                'mc-stepper-stacked__circle': true,
+                'is-current': state.current,
+              }}
+            >
+              {index + 1}
+            </span>
+          {/if}
+        </div>
+        <div class="mc-stepper-stacked__content">
+          <span
+            class={{
+              'mc-stepper-stacked__label': true,
+              'is-current': state.current,
+            }}
+          >
+            {step.label}
+          </span>
+          <span class="mc-stepper-stacked__additional">
+            {step.additionalinfo}
+          </span>
+        </div>
+      </li>
+    {/each}
+  </ol>
+</nav>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-stepper-stacked__container {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.mc-stepper-stacked__indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 0.5rem;
+  position: relative;
+  min-height: 100%;
+  padding-bottom: 2rem;
+}
+.mc-stepper-stacked__indicator::after {
+  content: "";
+  position: absolute;
+  top: 1.5rem;
+  bottom: 0;
+  width: 0.125rem;
+  background-color: var(--stepper-color-progress-bar-background, #c9d0de);
+  left: 50%;
+  transform: translateX(-50%);
+}
+.mc-stepper-stacked__circle {
+  box-sizing: border-box;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  border: 0.125rem solid var(--stepper-color-step-item-default-border, #333333);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-100, 0.875rem);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--stepper-color-information, #666666);
+  background-color: var(--stepper-color-step-item-default-background, #ffffff);
+  z-index: 1;
+  flex-shrink: 0;
+  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
+}
+.mc-stepper-stacked__circle.is-current {
+  background-color: var(--stepper-color-step-item-active-background, #117f03);
+  border-color: var(--stepper-color-step-item-active-background, #117f03);
+  color: var(--stepper-color-step-item-active-text, #ffffff);
+  animation: pop-in 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+.mc-stepper-stacked__icon--check {
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--stepper-color-step-item-default-icon, #666666);
+  fill: currentcolor;
+  border: 0.125rem solid var(--stepper-color-step-item-default-border, #333333);
+  border-radius: 50%;
+  box-sizing: border-box;
+  background-color: var(--stepper-color-step-item-default-background, #ffffff);
+  z-index: 1;
+}
+.mc-stepper-stacked__content {
+  display: flex;
+  flex-direction: column;
+  padding-top: 0.25rem;
+}
+.mc-stepper-stacked__label {
+  font-size: var(--font-size-100, 0.875rem);
+  color: var(--stepper-color-step-label-default, #666666);
+  line-height: var(--line-height-s, 1.3);
+  transition: color 200ms ease;
+}
+.mc-stepper-stacked__label.is-current {
+  font-weight: var(--font-weight-medium, 600);
+  color: var(--stepper-color-step-label-active, #000000);
+}
+.mc-stepper-stacked__additional {
+  font-size: var(--font-size-50, 0.75rem);
+  color: var(--stepper-color-information, #666666);
+  margin-top: 0.25rem;
+}
+.mc-stepper-stacked__item {
+  display: flex;
+  position: relative;
+}
+.mc-stepper-stacked__item.has-additional .mc-stepper-stacked__indicator,
+.mc-stepper-stacked__item.has-additional .mc-stepper-stacked__content {
+  padding-bottom: 1rem;
+}
+.mc-stepper-stacked__item:last-child .mc-stepper-stacked__indicator,
+.mc-stepper-stacked__item:last-child .mc-stepper-stacked__content {
+  padding-bottom: 0;
+}
+.mc-stepper-stacked__item:last-child .mc-stepper-stacked__indicator::after {
+  display: none;
+}
+
+@keyframes pop-in {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}</style>

package/dist/components/stepperstacked/StepperStacked.svelte.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 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 {
+    [key: string]: any;
+    /**
+     * Defines the currently active step.
+     *
+     * - If a `number` is provided, it represents the 1-based position of the step
+     *   in the `steps` array (e.g. `1` for the first step).
+     * - If a `string` is provided, it must match the `id` of one of the steps.
+     */
+    step?: string | number;
+    /**
+     * Steps of the stepper stacked.
+     */
+    steps?: Array<{
+        /**
+         * Unique identifier for the step.
+         */
+        id?: string;
+        /**
+         * Label of the step.
+         */
+        label: string;
+        /**
+         * Optional additional information under the label.
+         */
+        additionalinfo?: string;
+    }>;
+}
+declare const StepperStacked: import("svelte").Component<Props, {}, "steps" | "step">;
+type StepperStacked = ReturnType<typeof StepperStacked>;
+export default StepperStacked;
+//# sourceMappingURL=StepperStacked.svelte.d.ts.map

package/dist/components/stepperstacked/StepperStacked.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperStacked.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/stepperstacked/StepperStacked.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AAEH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;QACZ;;WAEG;QACH,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;QAEd;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC,CAAC;CACJ;AAoEH,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/tab/README.md

@@ -10,6 +10,7 @@ Tabs are a navigation component that allows users to switch between different se
 | `selected` | If `true`, the tab will be selected. | `boolean` | `false` |
 | `href` | URL for the tab link. | `string` |   |
 | `disabled` | If `true`, the tab will be disabled. | `boolean` |   |
+| `badge` | The number badge displayed for the tab. | `number` |   |
 
 ## Slots
 

package/dist/components/tab/Tab.js

@@ -1,4 +1,4 @@
-import{c as D,e as E,a as S,p as d,b as g,d as T,f as h,j as o,i,r,k,n as q}from"../../custom-element.js";import{i as A}from"../../if.js";import{s as b}from"../../slot.js";import{a as x}from"../../attributes.js";import"../../branches.js";var C=h('<button><span class="mc-tabs__icon svelte-g14hff"><!></span> <span class="mc-tabs__label svelte-g14hff"><!></span></button>'),F=h('<a><span class="mc-tabs__icon svelte-g14hff"><!></span> <span class="mc-tabs__label svelte-g14hff"><!></span></a>'),G=h('<li class="mc-tabs__item" role="presentation"><!></li>');const H={hash:"svelte-g14hff",code:`/**
+import{c as I,e as J,a as K,p as i,b as f,d as L,f as g,h as s,m as v,r,s as m,n as M,i as S,w as T}from"../../custom-element.js";import{i as j}from"../../if.js";import{s as u}from"../../slot.js";import{a as q}from"../../attributes.js";import{N as A}from"../numberbadge/NumberBadge.js";import"../../branches.js";var O=g('<span class="mc-tabs__badge"><!></span>'),P=g('<button><span class="mc-tabs__icon svelte-g14hff"><!></span> <span class="mc-tabs__label svelte-g14hff"><!></span> <!></button>'),Q=g('<span class="mc-tabs__badge"><!></span>'),R=g('<a><span class="mc-tabs__icon svelte-g14hff"><!></span> <span class="mc-tabs__label svelte-g14hff"><!></span> <!></a>'),U=g('<li class="mc-tabs__item" role="presentation"><!></li>');const V={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:var(--tabs-list-padding, 0.5rem 0.25rem);}.mc-tabs__tab.svelte-g14hff {font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-semi-bold, 600);align-items:center;background:none;border:none;border-radius:var(--border-radius-s, 0.25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:0.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:0.75rem;padding-right:0.75rem;position:relative;text-decoration:none;}.mc-tabs__tab.svelte-g14hff:hover {background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-tabs__tab.svelte-g14hff:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-tabs__tab--selected.svelte-g14hff {color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de);}.mc-tabs__tab--selected.svelte-g14hff:hover {background-color:var(--tabs-color-background-selected-hover, #c5e39e);}.mc-tabs__tab--disabled.svelte-g14hff {color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed;}.mc-tabs__tab--disabled.svelte-g14hff:hover {background:none;}.mc-tabs__label.svelte-g14hff {pointer-events:none;}.mc-tabs__icon.svelte-g14hff {fill:currentcolor;height:1.5rem;width:1.5rem;}.mc-tabs__icon.svelte-g14hff:empty {display:none;}`};function I(p,t){E(t,!0),S(p,H);let f=d(t,"tag",7,"button"),l=d(t,"selected",7,!1),v=d(t,"href",7),c=d(t,"disabled",7),y=q(t,["$$slots","$$events","$$legacy","$$host","tag","selected","href","disabled"]);var w={get tag(){return f()},set tag(e="button"){f(e),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 c()},set disabled(e){c(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",c()&&"mc-tabs__tab--disabled"],...y}),void 0,void 0,void 0,"svelte-g14hff");var s=o(a),u=o(s);b(u,t,"icon",{},null),r(s);var n=k(s,2),_=o(n);b(_,t,"default",{},null),r(n),r(a),g(e,a)},B=e=>{var a=F();x(a,()=>({href:v(),role:"tab","aria-selected":l(),class:["mc-tabs__tab",l()&&"mc-tabs__tab--selected",c()&&"mc-tabs__tab--disabled"],...y}),void 0,void 0,void 0,"svelte-g14hff");var s=o(a),u=o(s);b(u,t,"icon",{},null),r(s);var n=k(s,2),_=o(n);b(_,t,"default",{},null),r(n),r(a),g(e,a)};A(j,e=>{f()==="button"?e(z):e(B,!1)})}return r(m),g(p,m),T(w)}customElements.define("m-tab",D(I,{selected:{attribute:"selected",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},tag:{},href:{}},["icon","default"],[],{mode:"open"}));
+ */.mc-tabs.svelte-g14hff {background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem;}.mc-tabs__list.svelte-g14hff {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:0.5rem;padding:var(--tabs-list-padding, 0.5rem 0.25rem);}.mc-tabs__tab.svelte-g14hff {font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-semi-bold, 600);align-items:center;background:none;border:none;border-radius:var(--border-radius-s, 0.25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:0.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:0.75rem;padding-right:0.75rem;position:relative;text-decoration:none;}.mc-tabs__tab.svelte-g14hff:hover {background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-tabs__tab.svelte-g14hff:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-tabs__tab--selected.svelte-g14hff {color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de);}.mc-tabs__tab--selected.svelte-g14hff:hover {background-color:var(--tabs-color-background-selected-hover, #c5e39e);}.mc-tabs__tab--disabled.svelte-g14hff {color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed;}.mc-tabs__tab--disabled.svelte-g14hff:hover {background:none;}.mc-tabs__label.svelte-g14hff {pointer-events:none;}.mc-tabs__icon.svelte-g14hff {fill:currentcolor;height:1.5rem;width:1.5rem;}.mc-tabs__icon.svelte-g14hff:empty {display:none;}`};function W(D,t){J(t,!0),K(D,V);let h=i(t,"tag",7,"button"),o=i(t,"selected",7,!1),p=i(t,"href",7),_=i(t,"disabled",7),b=i(t,"badge",7),E=M(t,["$$slots","$$events","$$legacy","$$host","tag","selected","href","disabled","badge"]);var C={get tag(){return h()},set tag(e="button"){h(e),v()},get selected(){return o()},set selected(e=!1){o(e),v()},get href(){return p()},set href(e){p(e),v()},get disabled(){return _()},set disabled(e){_(e),v()},get badge(){return b()},set badge(e){b(e),v()}},y=U(),F=s(y);{var G=e=>{var a=P();q(a,()=>({type:"button",role:"tab","aria-selected":o(),class:["mc-tabs__tab",o()&&"mc-tabs__tab--selected",_()&&"mc-tabs__tab--disabled"],...E}),void 0,void 0,void 0,"svelte-g14hff");var l=s(a),k=s(l);u(k,t,"icon",{},null),r(l);var n=m(l,2),w=s(n);u(w,t,"default",{},null),r(n);var x=m(n,2);{var B=d=>{var c=O(),z=s(c);{let N=T(()=>o()?"accent":"standard");A(z,{get label(){return b()},get appearance(){return S(N)}})}r(c),f(d,c)};j(x,d=>{b()&&d(B)})}r(a),f(e,a)},H=e=>{var a=R();q(a,()=>({href:p(),role:"tab","aria-selected":o(),class:["mc-tabs__tab",o()&&"mc-tabs__tab--selected",_()&&"mc-tabs__tab--disabled"],...E}),void 0,void 0,void 0,"svelte-g14hff");var l=s(a),k=s(l);u(k,t,"icon",{},null),r(l);var n=m(l,2),w=s(n);u(w,t,"default",{},null),r(n);var x=m(n,2);{var B=d=>{var c=Q(),z=s(c);{let N=T(()=>o()?"accent":"standard");A(z,{get label(){return b()},get appearance(){return S(N)}})}r(c),f(d,c)};j(x,d=>{b()&&d(B)})}r(a),f(e,a)};j(F,e=>{h()==="button"?e(G):e(H,-1)})}return r(y),f(D,y),L(C)}customElements.define("m-tab",I(W,{selected:{attribute:"selected",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},tag:{},href:{},badge:{}},["icon","default"],[],{mode:"open"}));
 //# 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\n  customElement={{\n    tag: 'm-tab',\n    props: {\n      selected: { reflect: true, type: 'Boolean', attribute: 'selected' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  /**\n   * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.\n   *\n   * @slot default - The content displayed in the tab.\n   * @slot icon - Use this slot to insert an icon for the tab.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * The HTML tag used for the tab.\n     */\n    tag?: 'a' | 'button';\n    /**\n     * If `true`, the tab will be selected.\n     */\n    selected?: boolean;\n    /**\n     * URL for the tab link.\n     */\n    href?: string;\n    /**\n     * If `true`, the tab will be disabled.\n     */\n    disabled?: boolean;\n  }\n\n  let { tag = 'button', selected = false, href, disabled, ...attrs }: Props = $props();\n</script>\n\n<li class=\"mc-tabs__item\" role=\"presentation\">\n  {#if tag === 'button'}\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={selected}\n      class={[\n        'mc-tabs__tab',\n        selected && 'mc-tabs__tab--selected',\n        disabled && 'mc-tabs__tab--disabled',\n      ]}\n      {...attrs}\n    >\n      <span class=\"mc-tabs__icon\">\n        <slot name=\"icon\" />\n      </span>\n\n      <span class=\"mc-tabs__label\">\n        <slot />\n      </span>\n    </button>\n  {:else}\n    <a\n      {href}\n      role=\"tab\"\n      aria-selected={selected}\n      class={[\n        'mc-tabs__tab',\n        selected && 'mc-tabs__tab--selected',\n        disabled && 'mc-tabs__tab--disabled',\n      ]}\n      {...attrs}\n    >\n      <span class=\"mc-tabs__icon\">\n        <slot name=\"icon\" />\n      </span>\n      <span class=\"mc-tabs__label\">\n        <slot />\n      </span>\n    </a>\n  {/if}\n</li>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tabs';\n\n  .mc-tabs__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["tag","selected","href","$.prop","$$props","disabled","attrs","$.rest_props","li","root","button","root_1","span","$.child","span_1","$.reset","$.append","$$anchor","root_2","span_2","span_3","$$render","consequent","alternate"],"mappings":";;6sDAUA,gBA2BQ,IAAAA,cAAM,QAAQ,EAAEC,mBAAW,EAAK,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EAAKE,EAAKC,EAAAH,EAAA,sHAApD,SAAQ,qDAAa,GAAK,8GAGvCI,EAAEC,EAAA,MAAFD,CAAE,aAEE,IAAAE,EAAAC,EAAA,IAAAD,iDAGgBT,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,0CAEH,IAAAM,EAAIC,EAXNH,CAAA,MAWEE,CAAI,0BAAJA,CAAI,EAIJ,IAAAE,IAJAF,EAAI,CAAA,MAIJE,CAAI,6BAAJA,CAAI,EAfNC,EAAAL,CAAA,EAAAM,EAAAC,EAAAP,CAAA,SAoBA,IAAA,EAAAQ,EAAA,IAAA,aACEhB,EAAI,6BAEUD,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,0CAEH,IAAAa,EAAIN,EAXN,CAAA,MAWEM,CAAI,0BAAJA,CAAI,EAGJ,IAAAC,IAHAD,EAAI,CAAA,MAGJC,CAAI,6BAAJA,CAAI,EAdNL,EAAA,CAAA,EAAAC,EAAAC,EAAA,CAAA,WArBEjB,EAAG,IAAK,SAAQqB,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,aADtBf,CAAE,MAAFA,CAAE,MAFK"}
+{"version":3,"file":"Tab.js","sources":["../../../src/components/tab/Tab.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-tab',\n    props: {\n      selected: { reflect: true, type: 'Boolean', attribute: 'selected' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import NumberBadge from '../numberbadge/NumberBadge.svelte';\n\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     * The number badge displayed for the tab.\n     */\n    badge?: number;\n  }\n\n  let { tag = 'button', selected = false, href, disabled, badge, ...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      {#if badge}\n        <span class=\"mc-tabs__badge\">\n          <NumberBadge label={badge} appearance={selected ? 'accent' : 'standard'} />\n        </span>\n      {/if}\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      {#if badge}\n        <span class=\"mc-tabs__badge\">\n          <NumberBadge label={badge} appearance={selected ? 'accent' : 'standard'} />\n        </span>\n      {/if}\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","badge","attrs","$.rest_props","li","root","button","root_1","span","$.child","span_1","span_2","root_2","NumberBadge","node_4","$$render","consequent","$.reset","$.append","$$anchor","root_3","span_3","span_4","span_5","root_4","node_8","consequent_2","consequent_1","alternate"],"mappings":";;6sDAUA,gBAiCQ,IAAAA,cAAM,QAAQ,EAAEC,mBAAW,EAAK,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EAAEE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EAAKG,EAAKC,EAAAJ,EAAA,8HAA3D,SAAQ,qDAAa,GAAK,6JAGvCK,EAAEC,EAAA,MAAFD,CAAE,aAEE,IAAAE,EAAAC,EAAA,IAAAD,iDAGgBV,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVE,0CAEH,IAAAM,EAAIC,EAXNH,CAAA,MAWEE,CAAI,0BAAJA,CAAI,EAIJ,IAAAE,IAJAF,EAAI,CAAA,MAIJE,CAAI,6BAAJA,CAAI,UAAJA,EAAI,CAAA,iBAIFC,EAAIC,EAAA,MAAJD,CAAI,eACoCf,EAAQ,EAAG,SAAW,UAAU,EAAtEiB,EAAWC,EAAA,oBAAQb,EAAK,qCAD1BU,CAAI,MAAJA,CAAI,WADFV,EAAK,GAAAc,EAAAC,CAAA,IAlBXC,EAAAX,CAAA,EAAAY,EAAAC,EAAAb,CAAA,SAyBA,IAAA,EAAAc,EAAA,IAAA,aACEvB,EAAI,6BAEUD,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVE,0CAEH,IAAAmB,EAAIZ,EAXN,CAAA,MAWEY,CAAI,0BAAJA,CAAI,EAGJ,IAAAC,IAHAD,EAAI,CAAA,MAGJC,CAAI,6BAAJA,CAAI,UAAJA,EAAI,CAAA,iBAIFC,EAAIC,EAAA,MAAJD,CAAI,eACoC3B,EAAQ,EAAG,SAAW,UAAU,EAAtEiB,EAAWY,EAAA,oBAAQxB,EAAK,qCAD1BsB,CAAI,MAAJA,CAAI,WADFtB,EAAK,GAAAc,EAAAW,CAAA,IAjBXT,EAAA,CAAA,EAAAC,EAAAC,EAAA,CAAA,WA1BExB,EAAG,IAAK,SAAQoB,EAAAY,CAAA,EAAAZ,EAAAa,EAAA,EAAA,aADtBxB,CAAE,MAAFA,CAAE,MAFK"}

package/dist/components/tab/Tab.svelte

@@ -9,6 +9,8 @@
 />
 
 <script lang="ts">
+  import NumberBadge from '../numberbadge/NumberBadge.svelte';
+
   /**
    * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.
    *
@@ -33,9 +35,13 @@
      * If `true`, the tab will be disabled.
      */
     disabled?: boolean;
+    /**
+     * The number badge displayed for the tab.
+     */
+    badge?: number;
   }
 
-  let { tag = 'button', selected = false, href, disabled, ...attrs }: Props = $props();
+  let { tag = 'button', selected = false, href, disabled, badge, ...attrs }: Props = $props();
 </script>
 
 <li class="mc-tabs__item" role="presentation">
@@ -58,6 +64,11 @@
       <span class="mc-tabs__label">
         <slot />
       </span>
+      {#if badge}
+        <span class="mc-tabs__badge">
+          <NumberBadge label={badge} appearance={selected ? 'accent' : 'standard'} />
+        </span>
+      {/if}
     </button>
   {:else}
     <a
@@ -77,6 +88,11 @@
       <span class="mc-tabs__label">
         <slot />
       </span>
+      {#if badge}
+        <span class="mc-tabs__badge">
+          <NumberBadge label={badge} appearance={selected ? 'accent' : 'standard'} />
+        </span>
+      {/if}
     </a>
   {/if}
 </li>

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

@@ -22,6 +22,10 @@ interface Props {
      * If `true`, the tab will be disabled.
      */
     disabled?: boolean;
+    /**
+     * The number badge displayed for the tab.
+     */
+    badge?: number;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tab/Tab.svelte.ts"],"names":[],"mappings":"AAGE;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;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":"AAME;;;;;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;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6DH,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,e as y,a as q,p as c,k,t as w,b as o,d as x,f as p,j as v,i as d,r as m,s as j,h as z}from"../../custom-element.js";import{i as B}from"../../if.js";import{s as D}from"../../slot.js";import{s as E}from"../../attributes.js";import"../../branches.js";var S=p('<div class="mc-divider-horizontal svelte-qelc5p"></div>'),T=p('<nav><ul class="mc-tabs__list svelte-qelc5p" role="tablist"><!></ul> <!></nav>');const A={hash:"svelte-qelc5p",code:`/**
+import{c as h,e as y,a as q,p as c,s as k,t as w,b as o,d as x,f as p,h as v,m as d,r as m,j,l as z}from"../../custom-element.js";import{i as B}from"../../if.js";import{s as D}from"../../slot.js";import{s as E}from"../../attributes.js";import"../../branches.js";var S=p('<div class="mc-divider-horizontal svelte-qelc5p"></div>'),T=p('<nav><ul class="mc-tabs__list svelte-qelc5p" role="tablist"><!></ul> <!></nav>');const A={hash:"svelte-qelc5p",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-tabs.svelte-qelc5p {background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem;}.mc-tabs__list.svelte-qelc5p {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:0.5rem;padding:var(--tabs-list-padding, 0.5rem 0.25rem);}.mc-tabs--centered.svelte-qelc5p .mc-tabs__list:where(.svelte-qelc5p) {justify-content:center;}.mc-divider-horizontal.svelte-qelc5p {background:var(--divider-color-primary, #cccccc);height:0.0625rem;}`};function C(n,t){y(t,!0),q(n,A);let a=c(t,"description",7),i=c(t,"divider",7,!0),l=c(t,"centered",7);var u={get description(){return a()},set description(e){a(e),d()},get divider(){return i()},set divider(e=!0){i(e),d()},get centered(){return l()},set centered(e){l(e),d()}},r=T(),s=v(r),b=v(s);D(b,t,"tab",{},null),m(s);var f=k(s,2);{var _=e=>{var g=S();o(e,g)};B(f,e=>{i()&&e(_)})}return m(r),w(()=>{j(r,1,z(["mc-tabs",l()&&"mc-tabs--centered"]),"svelte-qelc5p"),E(s,"aria-label",a())}),o(n,r),x(u)}customElements.define("m-tabs",h(C,{divider:{attribute:"divider",reflect:!0,type:"Boolean"},centered:{attribute:"centered",reflect:!0,type:"Boolean"},description:{}},["tab"],[],{mode:"open"}));
 //# sourceMappingURL=Tabs.js.map

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

@@ -10,4 +10,5 @@ export declare const Icons: Story;
 export declare const Centered: Story;
 export declare const NoDivider: Story;
 export declare const Disabled: Story;
+export declare const WithBadges: Story;
 //# sourceMappingURL=Tabs.stories.d.ts.map

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

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

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

@@ -67,3 +67,13 @@ export const Disabled = {
     `,
     },
 };
+export const WithBadges = {
+    args: {
+        tab: `
+      <m-tab slot="tab" selected="true" badge="8">label</m-tab>
+      <m-tab slot="tab" badge="2">label</m-tab>
+      <m-tab slot="tab" disabled="true">label</m-tab>
+      <m-tab slot="tab" disabled="true">label</m-tab>
+    `,
+    },
+};

package/dist/components/tag/README.md

@@ -15,6 +15,7 @@ A Tag is a UI element used to filter data, categorize, select or deselect an opt
 | `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` |   |
+| `onremove` | Callback to trigger when the remove button is clicked. | `() => void` |   |
 
 ## Slots
 

package/dist/components/tag/Tag.js

@@ -1,4 +1,4 @@
-import{o as X,c as Y,e as Z,a as $,p as v,y as S,x as T,b,d as ee,i as c,j as l,k as u,r as s,t as x,m as h,l as j,q as te,u as ae,s as re,h as oe,f as k,n as le,w as se,v as de}from"../../custom-element.js";import{i as q}from"../../if.js";import{s as A}from"../../slot.js";import{a as M,r as ie,s as G}from"../../attributes.js";import{a as ne}from"../../input.js";import{b as ve}from"../../this.js";import{d as ce,e as me}from"../../Condition20.js";import{N as fe}from"../numberbadge/NumberBadge.js";import"../../branches.js";var ge=k('<label><!> <input type="checkbox" class="mc-tag__input svelte-1f9dt2v"/> <span class="mc-tag__label svelte-1f9dt2v"> </span></label>'),be=k('<button><!> <span class="mc-tag__label svelte-1f9dt2v"> </span></button>'),ue=k('<button><!> <span class="mc-tag__label svelte-1f9dt2v"> </span></button>'),he=k('<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>'),pe=k('<span><span class="mc-tag__label svelte-1f9dt2v"> </span></span>');const _e={hash:"svelte-1f9dt2v",code:`/**
+import{o as Y,c as Z,e as $,a as ee,p as n,y as T,x as A,b,d as te,m as v,h as l,s as u,r as s,t as x,k as h,i as q,q as ae,u as re,j as oe,l as le,f as k,n as se,w as de,v as ie}from"../../custom-element.js";import{i as D}from"../../if.js";import{s as G}from"../../slot.js";import{a as M,r as ne,s as I}from"../../attributes.js";import{a as ve}from"../../input.js";import{b as ce}from"../../this.js";import{d as me,e as fe}from"../../Condition20.js";import{N as ge}from"../numberbadge/NumberBadge.js";import"../../branches.js";var be=k('<label><!> <input type="checkbox" class="mc-tag__input svelte-1f9dt2v"/> <span class="mc-tag__label svelte-1f9dt2v"> </span></label>'),ue=k('<button><!> <span class="mc-tag__label svelte-1f9dt2v"> </span></button>'),he=k('<button><!> <span class="mc-tag__label svelte-1f9dt2v"> </span></button>'),pe=k('<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>'),_e=k('<span><span class="mc-tag__label svelte-1f9dt2v"> </span></span>');const we={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-informative, #c9d0de);}.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-interactive, #8891aa);}.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-interactive, #8891aa);}.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-color:var(--tag-color-text-inverse, #ffffff);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;}.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 {mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;}.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 we(D,o){Z(o,!0),$(D,_e);let d=v(o,"type",7,"informative"),n=v(o,"size",7,"m"),p=v(o,"id",7),P=v(o,"name",7),g=v(o,"label",7),C=v(o,"checked",15),_=v(o,"disabled",7),B=v(o,"contextualisednumber",7,99),H=v(o,"removablelabel",7),E=le(o,["$$slots","$$events","$$legacy","$$host","type","size","id","name","label","checked","disabled","contextualisednumber","removablelabel"]),F=de(null);const I=()=>{const e=new CustomEvent("remove-tag",{detail:p(),bubbles:!0,composed:!0});j(F)?.dispatchEvent(e)};var J={get type(){return d()},set type(e="informative"){d(e),c()},get size(){return n()},set size(e="m"){n(e),c()},get id(){return p()},set id(e){p(e),c()},get name(){return P()},set name(e){P(e),c()},get label(){return g()},set label(e){g(e),c()},get checked(){return C()},set checked(e){C(e),c()},get disabled(){return _()},set disabled(e){_(e),c()},get contextualisednumber(){return B()},set contextualisednumber(e=99){B(e),c()},get removablelabel(){return H()},set removablelabel(e){H(e),c()}},R=S(),K=T(R);{var L=e=>{var t=ge();M(t,()=>({for:p(),class:["mc-tag",`mc-tag-${d()}`,`mc-tag--${n()}`],...E}),void 0,void 0,void 0,"svelte-1f9dt2v");var a=l(t);{var i=w=>{var y=S(),z=T(y);A(z,o,"icon",{},null),b(w,y)};q(a,w=>{C()||w(i)})}var r=u(a,2);ie(r);var m=u(r,2),N=l(m,!0);s(m),s(t),x(()=>{G(r,"id",p()),G(r,"name",P()),r.disabled=_(),h(N,g())}),ne(r,C),b(e,t)},O=e=>{var t=be();M(t,()=>({class:["mc-tag",`mc-tag-${d()}`,`mc-tag--${n()}`],type:"button",disabled:_(),...E}),void 0,void 0,void 0,"svelte-1f9dt2v");var a=l(t);A(a,o,"icon",{},null);var i=u(a,2),r=l(i,!0);s(i),s(t),x(()=>h(r,g())),b(e,t)},Q=e=>{var t=ue();M(t,()=>({class:["mc-tag",`mc-tag-${d()}`,`mc-tag--${n()}`],type:"button",disabled:_(),...E}),void 0,void 0,void 0,"svelte-1f9dt2v");var a=l(t);{let m=se(()=>n()==="l"?"m":void 0);fe(a,{appearance:"inverse",get label(){return B()},get size(){return j(m)}})}var i=u(a,2),r=l(i,!0);s(i),s(t),x(()=>h(r,g())),b(e,t)},U=e=>{var t=he();M(t,()=>({class:["mc-tag",`mc-tag-${d()}`,`mc-tag--${n()}`],...E}),void 0,void 0,void 0,"svelte-1f9dt2v");var a=l(t),i=l(a,!0);s(a);var r=u(a,2),m=l(r),N=l(m);{var w=f=>{ce(f,{})},y=f=>{me(f,{})};q(N,f=>{n()==="s"?f(w):f(y,!1)})}s(m);var z=u(m,2),W=l(z,!0);s(z),s(r),s(t),ve(t,f=>te(F,f),()=>j(F)),x(()=>{h(i,g()),h(W,H())}),ae("click",r,I),b(e,t)},V=e=>{var t=pe(),a=l(t),i=l(a,!0);s(a),s(t),x(()=>{re(t,1,oe(["mc-tag",`mc-tag-${d()}`,`mc-tag--${n()}`]),"svelte-1f9dt2v"),h(i,g())}),b(e,t)};q(K,e=>{d()==="selectable"?e(L):d()==="interactive"?e(O,1):d()==="contextualised"?e(Q,2):d()==="removable"?e(U,3):e(V,!1)})}return b(D,R),ee(J)}X(["click"]);customElements.define("m-tag",Y(we,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},type:{},size:{},id:{},name:{},label:{},contextualisednumber:{},removablelabel:{}},["icon"],[],{mode:"open"}));
+ */.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-informative, #c9d0de);}.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-interactive, #8891aa);}.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-interactive, #8891aa);}.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-color:var(--tag-color-text-inverse, #ffffff);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;}.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 {mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;}.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 xe(R,r){$(r,!0),ee(R,we);let d=n(r,"type",7,"informative"),c=n(r,"size",7,"m"),p=n(r,"id",7),P=n(r,"name",7),g=n(r,"label",7),C=n(r,"checked",15),_=n(r,"disabled",7),B=n(r,"contextualisednumber",7,99),H=n(r,"removablelabel",7),F=n(r,"onremove",7),E=se(r,["$$slots","$$events","$$legacy","$$host","type","size","id","name","label","checked","disabled","contextualisednumber","removablelabel","onremove"]),N=ie(null);const J=()=>{F()?.();const e=new CustomEvent("remove-tag",{detail:p(),bubbles:!0,composed:!0});q(N)?.dispatchEvent(e)};var K={get type(){return d()},set type(e="informative"){d(e),v()},get size(){return c()},set size(e="m"){c(e),v()},get id(){return p()},set id(e){p(e),v()},get name(){return P()},set name(e){P(e),v()},get label(){return g()},set label(e){g(e),v()},get checked(){return C()},set checked(e){C(e),v()},get disabled(){return _()},set disabled(e){_(e),v()},get contextualisednumber(){return B()},set contextualisednumber(e=99){B(e),v()},get removablelabel(){return H()},set removablelabel(e){H(e),v()},get onremove(){return F()},set onremove(e){F(e),v()}},S=T(),L=A(S);{var O=e=>{var t=be();M(t,()=>({for:p(),class:["mc-tag",`mc-tag-${d()}`,`mc-tag--${c()}`],...E}),void 0,void 0,void 0,"svelte-1f9dt2v");var a=l(t);{var i=w=>{var y=T(),z=A(y);G(z,r,"icon",{},null),b(w,y)};D(a,w=>{C()||w(i)})}var o=u(a,2);ne(o);var m=u(o,2),j=l(m,!0);s(m),s(t),x(()=>{I(o,"id",p()),I(o,"name",P()),o.disabled=_(),h(j,g())}),ve(o,C),b(e,t)},Q=e=>{var t=ue();M(t,()=>({class:["mc-tag",`mc-tag-${d()}`,`mc-tag--${c()}`],type:"button",disabled:_(),...E}),void 0,void 0,void 0,"svelte-1f9dt2v");var a=l(t);G(a,r,"icon",{},null);var i=u(a,2),o=l(i,!0);s(i),s(t),x(()=>h(o,g())),b(e,t)},U=e=>{var t=he();M(t,()=>({class:["mc-tag",`mc-tag-${d()}`,`mc-tag--${c()}`],type:"button",disabled:_(),...E}),void 0,void 0,void 0,"svelte-1f9dt2v");var a=l(t);{let m=de(()=>c()==="l"?"m":void 0);ge(a,{appearance:"inverse",get label(){return B()},get size(){return q(m)}})}var i=u(a,2),o=l(i,!0);s(i),s(t),x(()=>h(o,g())),b(e,t)},V=e=>{var t=pe();M(t,()=>({class:["mc-tag",`mc-tag-${d()}`,`mc-tag--${c()}`],...E}),void 0,void 0,void 0,"svelte-1f9dt2v");var a=l(t),i=l(a,!0);s(a);var o=u(a,2),m=l(o),j=l(m);{var w=f=>{me(f,{})},y=f=>{fe(f,{})};D(j,f=>{c()==="s"?f(w):f(y,-1)})}s(m);var z=u(m,2),X=l(z,!0);s(z),s(o),s(t),ce(t,f=>ae(N,f),()=>q(N)),x(()=>{h(i,g()),h(X,H())}),re("click",o,J),b(e,t)},W=e=>{var t=_e(),a=l(t),i=l(a,!0);s(a),s(t),x(()=>{oe(t,1,le(["mc-tag",`mc-tag-${d()}`,`mc-tag--${c()}`]),"svelte-1f9dt2v"),h(i,g())}),b(e,t)};D(L,e=>{d()==="selectable"?e(O):d()==="interactive"?e(Q,1):d()==="contextualised"?e(U,2):d()==="removable"?e(V,3):e(W,-1)})}return b(R,S),te(K)}Y(["click"]);customElements.define("m-tag",Z(xe,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},type:{},size:{},id:{},name:{},label:{},contextualisednumber:{},removablelabel:{},onremove:{}},["icon"],[],{mode:"open"}));
 //# sourceMappingURL=Tag.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/components/tag/Tag.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-tag',\n    props: {\n      checked: { reflect: true, type: 'Boolean', attribute: 'checked' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { CrossCircleFilled24, CrossCircleFilled20 } from '@mozaic-ds/icons-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    [key: string]: any;\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 = $state<HTMLElement | null>(null);\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 />\n        {:else}\n          <CrossCircleFilled24 />\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":["type","size","id","$.prop","$$props","name","label","checked","disabled","contextualisednumber","removablelabel","attrs","$.rest_props","element","$.state","onRemove","event","label_1","root_1","$$render","consequent","input","$.sibling","node_1","span","$.set_attribute","button","root_3","node_3","$.child","span_1","$.reset","$.append","$$anchor","button_1","root_4","node_4","$0","$.derived","NumberBadge","span_2","span_3","root_5","span_4","button_2","span_5","CrossCircleFilled20","CrossCircleFilled24","consequent_4","alternate","span_6","$$value","$.set","$.get","$.delegated","span_7","root_8","span_8","$.set_class","$.clsx","consequent_1","consequent_2","consequent_3","consequent_5","alternate_1"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../src/components/tag/Tag.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-tag',\n    props: {\n      checked: { reflect: true, type: 'Boolean', attribute: 'checked' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { CrossCircleFilled24, CrossCircleFilled20 } from '@mozaic-ds/icons-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    [key: string]: any;\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     * Callback to trigger when the remove button is clicked.\n     */\n    onremove?: () => void;\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    onremove,\n    ...attrs\n  }: Props = $props();\n  let element = $state<HTMLElement | null>(null);\n\n  const onRemove = () => {\n    onremove?.();\n\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 />\n        {:else}\n          <CrossCircleFilled24 />\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":["type","size","id","$.prop","$$props","name","label","checked","disabled","contextualisednumber","removablelabel","onremove","attrs","$.rest_props","element","$.state","onRemove","event","label_1","root_1","$$render","consequent","input","$.sibling","node_1","span","$.set_attribute","button","root_3","node_3","$.child","span_1","$.reset","$.append","$$anchor","button_1","root_4","node_4","$0","$.derived","NumberBadge","span_2","span_3","root_5","span_4","button_2","span_5","CrossCircleFilled20","CrossCircleFilled24","consequent_4","alternate","span_6","$$value","$.set","$.get","$.delegated","span_7","root_8","span_8","$.set_class","$.clsx","consequent_1","consequent_2","consequent_3","consequent_5","alternate_1"],"mappings":"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"}

package/dist/components/tag/Tag.svelte

@@ -55,6 +55,10 @@
      * Accessible label text for the remove button in removable tags.
      */
     removablelabel?: string;
+    /**
+     * Callback to trigger when the remove button is clicked.
+     */
+    onremove?: () => void;
   }
 
   let {
@@ -67,11 +71,14 @@
     disabled,
     contextualisednumber = 99,
     removablelabel,
+    onremove,
     ...attrs
   }: Props = $props();
   let element = $state<HTMLElement | null>(null);
 
   const onRemove = () => {
+    onremove?.();
+
     const event = new CustomEvent('remove-tag', {
       detail: id,
       bubbles: true,

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

@@ -42,6 +42,10 @@ interface Props {
      * Accessible label text for the remove button in removable tags.
      */
     removablelabel?: string;
+    /**
+     * Callback to trigger when the remove button is clicked.
+     */
+    onremove?: () => void;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.svelte.ts"],"names":[],"mappings":"AAME;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,GAAG,aAAa,GAAG,gBAAgB,GAAG,WAAW,GAAG,YAAY,CAAC;IACrF;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAgFH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,GAAG;;;;iBAAqF,CAAC;AAC7E,KAAK,GAAG,GAAG,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC;AACtC,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tag.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.svelte.ts"],"names":[],"mappings":"AAME;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,GAAG,aAAa,GAAG,gBAAgB,GAAG,WAAW,GAAG,YAAY,CAAC;IACrF;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAmFH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,GAAG;;;;iBAAqF,CAAC;AAC7E,KAAK,GAAG,GAAG,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC;AACtC,eAAe,GAAG,CAAC"}