@mozaic-ds/web-components 1.4.0 → 1.5.1

package/dist/components/tab/Tab.js

@@ -1,4 +1,4 @@
-import{c as L,p as M,a as N,b as i,f as o,g as O,h,d as f,j as d,r as b,i as P,l as v,s as Q,k as u}from"../../custom-element.js";import{s as C}from"../../snippet.js";import{i as x}from"../../if.js";import{s as D}from"../../slot.js";import{a as E}from"../../attributes.js";var R=h('<span class="mc-tabs__icon svelte-g14hff"><!></span> <span class="mc-tabs__label svelte-g14hff"><!></span>',1),U=h("<button><!></button>"),V=h("<a><!></a>"),W=h('<li class="mc-tabs__item" role="presentation"><!></li>');const X={hash:"svelte-g14hff",code:`/**
+import{c as D,p as E,a as S,b as i,f as g,g as T,h,d as r,j as d,r as o,s as k,i as q}from"../../custom-element.js";import{i as A}from"../../if.js";import{s as b}from"../../slot.js";import{a as x}from"../../attributes.js";import"../../branches.js";var C=h('<button><span class="mc-tabs__icon svelte-g14hff"><!></span> <span class="mc-tabs__label svelte-g14hff"><!></span></button>'),F=h('<a><span class="mc-tabs__icon svelte-g14hff"><!></span> <span class="mc-tabs__label svelte-g14hff"><!></span></a>'),G=h('<li class="mc-tabs__item" role="presentation"><!></li>');const H={hash:"svelte-g14hff",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-tabs.svelte-g14hff {background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem;}.mc-tabs__list.svelte-g14hff {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:0.5rem;padding: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 Y(w,s){M(s,!0),N(w,X);const j=e=>{var a=R(),l=v(a),F=f(l);{var G=t=>{var r=u(),n=v(r);C(n,_),o(t,r)},H=t=>{var r=u(),n=v(r);D(n,s,"icon",{},null),o(t,r)};x(F,t=>{_()?t(G):t(H,!1)})}b(l);var B=Q(l,2),I=f(B);{var J=t=>{var r=u(),n=v(r);C(n,g),o(t,r)},K=t=>{var r=u(),n=v(r);D(n,s,"default",{},null),o(t,r)};x(I,t=>{g()?t(J):t(K,!1)})}b(B),o(e,a)};let p=i(s,"tag",7,"button"),c=i(s,"selected",7,!1),y=i(s,"href",7),m=i(s,"disabled",7),g=i(s,"children",7),_=i(s,"icon",7),z=P(s,["$$slots","$$events","$$legacy","$$host","tag","selected","href","disabled","children","icon"]);var S={get tag(){return p()},set tag(e="button"){p(e),d()},get selected(){return c()},set selected(e=!1){c(e),d()},get href(){return y()},set href(e){y(e),d()},get disabled(){return m()},set disabled(e){m(e),d()},get children(){return g()},set children(e){g(e),d()},get icon(){return _()},set icon(e){_(e),d()}},k=W(),T=f(k);{var q=e=>{var a=U();E(a,()=>({type:"button",role:"tab","aria-selected":c(),class:["mc-tabs__tab",c()&&"mc-tabs__tab--selected",m()&&"mc-tabs__tab--disabled"],...z}),void 0,void 0,void 0,"svelte-g14hff");var l=f(a);j(l),b(a),o(e,a)},A=e=>{var a=V();E(a,()=>({href:y(),role:"tab","aria-selected":c(),class:["mc-tabs__tab",c()&&"mc-tabs__tab--selected",m()&&"mc-tabs__tab--disabled"],...z}),void 0,void 0,void 0,"svelte-g14hff");var l=f(a);j(l),b(a),o(e,a)};x(T,e=>{p()==="button"?e(q):e(A,!1)})}return b(k),o(w,k),O(S)}customElements.define("m-tab",L(Y,{selected:{attribute:"selected",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},tag:{},href:{},children:{},icon:{}},["icon","default"],[],!0));
+ */.mc-tabs.svelte-g14hff {background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem;}.mc-tabs__list.svelte-g14hff {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:0.5rem;padding:var(--tabs-list-padding, 0.5rem 0.25rem);}.mc-tabs__tab.svelte-g14hff {font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-semi-bold, 600);align-items:center;background:none;border:none;border-radius:var(--border-radius-s, 0.25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:0.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:0.75rem;padding-right:0.75rem;position:relative;text-decoration:none;}.mc-tabs__tab.svelte-g14hff:hover {background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-tabs__tab.svelte-g14hff:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-tabs__tab--selected.svelte-g14hff {color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de);}.mc-tabs__tab--selected.svelte-g14hff:hover {background-color:var(--tabs-color-background-selected-hover, #c5e39e);}.mc-tabs__tab--disabled.svelte-g14hff {color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed;}.mc-tabs__tab--disabled.svelte-g14hff:hover {background:none;}.mc-tabs__label.svelte-g14hff {pointer-events:none;}.mc-tabs__icon.svelte-g14hff {fill:currentcolor;height:1.5rem;width:1.5rem;}.mc-tabs__icon.svelte-g14hff:empty {display:none;}`};function I(p,t){E(t,!0),S(p,H);let f=i(t,"tag",7,"button"),l=i(t,"selected",7,!1),v=i(t,"href",7),c=i(t,"disabled",7),y=q(t,["$$slots","$$events","$$legacy","$$host","tag","selected","href","disabled"]);var w={get tag(){return f()},set tag(e="button"){f(e),d()},get selected(){return l()},set selected(e=!1){l(e),d()},get href(){return v()},set href(e){v(e),d()},get disabled(){return c()},set disabled(e){c(e),d()}},m=G(),j=r(m);{var z=e=>{var a=C();x(a,()=>({type:"button",role:"tab","aria-selected":l(),class:["mc-tabs__tab",l()&&"mc-tabs__tab--selected",c()&&"mc-tabs__tab--disabled"],...y}),void 0,void 0,void 0,"svelte-g14hff");var s=r(a),u=r(s);b(u,t,"icon",{},null),o(s);var n=k(s,2),_=r(n);b(_,t,"default",{},null),o(n),o(a),g(e,a)},B=e=>{var a=F();x(a,()=>({href:v(),role:"tab","aria-selected":l(),class:["mc-tabs__tab",l()&&"mc-tabs__tab--selected",c()&&"mc-tabs__tab--disabled"],...y}),void 0,void 0,void 0,"svelte-g14hff");var s=r(a),u=r(s);b(u,t,"icon",{},null),o(s);var n=k(s,2),_=r(n);b(_,t,"default",{},null),o(n),o(a),g(e,a)};A(j,e=>{f()==="button"?e(z):e(B,!1)})}return o(m),g(p,m),T(w)}customElements.define("m-tab",D(I,{selected:{attribute:"selected",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},tag:{},href:{}},["icon","default"],[],!0));
 //# sourceMappingURL=Tab.js.map

package/dist/components/tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../src/components/tab/Tab.svelte"],"sourcesContent":["<svelte:options\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 type { Snippet } from 'svelte';\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    /**\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 content displayed in the tab.\n     */\n    children?: Snippet;\n    /**\n     * Use this snippet to insert an icon for the tab.\n     */\n    icon?: Snippet;\n  }\n\n  let {\n    tag = 'button',\n    selected = false,\n    href,\n    disabled,\n    children,\n    icon,\n    ...attrs\n  }: Props = $props();\n</script>\n\n{#snippet displayContent()}\n  <span class=\"mc-tabs__icon\">\n    {#if icon}\n      {@render icon()}\n    {:else}\n      <slot name=\"icon\" />\n    {/if}\n  </span>\n  <span class=\"mc-tabs__label\">\n    {#if children}\n      {@render children()}\n    {:else}\n      <slot />\n    {/if}\n  </span>\n{/snippet}\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      {@render displayContent()}\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      {@render displayContent()}\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":["displayContent","$$anchor","span","$.first_child","fragment","icon","$$render","consequent","alternate","span_1","children","consequent_1","alternate_1","tag","selected","href","$.prop","$$props","disabled","attrs","$.rest_props","li","root","button","root_6","node_7","$.child","$.reset","$.append","root_7","node_8","consequent_2","alternate_2"],"mappings":";;6sDAUA,sBAgDUA,EAAcC,GAAA,WACrBC,EAAIC,EAAAC,CAAA,MAAJF,CAAI,kCAEQG,CAAI,uEADVA,EAAI,EAAAC,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,MADVN,CAAI,EAOJ,IAAAO,IAPAP,EAAI,CAAA,MAOJO,CAAI,kCAEQC,CAAQ,0EADdA,EAAQ,EAAAJ,EAAAK,CAAA,EAAAL,EAAAM,EAAA,EAAA,MADdH,CAAI,UAlBH,IAAAI,cAAM,QAAQ,EACdC,mBAAW,EAAK,EAChBC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRP,EAAQM,EAAAC,EAAA,WAAA,CAAA,EACRZ,EAAIW,EAAAC,EAAA,OAAA,CAAA,EACDE,EAAAC,EAAAH,EAAA,wIANG,SAAQ,qDACH,GAAK,gNA0BnBI,EAAEC,EAAA,MAAFD,CAAE,aAEE,IAAAE,EAAAC,EAAA,IAAAD,iDAGgBT,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,0CATL,IAAAM,EAAAC,EAAAH,CAAA,EAWUvB,EAAcyB,CAAA,EAXxBE,EAAAJ,CAAA,EAAAK,EAAA3B,EAAAsB,CAAA,SAcA,IAAA,EAAAM,EAAA,IAAA,aACEd,EAAI,6BAEUD,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,0CATL,IAAAW,EAAAJ,EAAA,CAAA,EAWU1B,EAAc8B,CAAA,EAXxBH,EAAA,CAAA,EAAAC,EAAA3B,EAAA,CAAA,WAfEY,EAAG,IAAK,SAAQP,EAAAyB,CAAA,EAAAzB,EAAA0B,EAAA,EAAA,aADtBX,CAAE,MAAFA,CAAE,MAnBK"}
+{"version":3,"file":"Tab.js","sources":["../../../src/components/tab/Tab.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-tab',\n    props: {\n      selected: { reflect: true, type: 'Boolean', attribute: 'selected' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  /**\n   * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.\n   *\n   * @slot default - The content displayed in the tab.\n   * @slot icon - Use this slot to insert an icon for the tab.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * The HTML tag used for the tab.\n     */\n    tag?: 'a' | 'button';\n    /**\n     * If `true`, the tab will be selected.\n     */\n    selected?: boolean;\n    /**\n     * URL for the tab link.\n     */\n    href?: string;\n    /**\n     * If `true`, the tab will be disabled.\n     */\n    disabled?: boolean;\n  }\n\n  let { tag = 'button', selected = false, href, disabled, ...attrs }: Props = $props();\n</script>\n\n<li class=\"mc-tabs__item\" role=\"presentation\">\n  {#if tag === 'button'}\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={selected}\n      class={[\n        'mc-tabs__tab',\n        selected && 'mc-tabs__tab--selected',\n        disabled && 'mc-tabs__tab--disabled',\n      ]}\n      {...attrs}\n    >\n      <span class=\"mc-tabs__icon\">\n        <slot name=\"icon\" />\n      </span>\n\n      <span class=\"mc-tabs__label\">\n        <slot />\n      </span>\n    </button>\n  {:else}\n    <a\n      {href}\n      role=\"tab\"\n      aria-selected={selected}\n      class={[\n        'mc-tabs__tab',\n        selected && 'mc-tabs__tab--selected',\n        disabled && 'mc-tabs__tab--disabled',\n      ]}\n      {...attrs}\n    >\n      <span class=\"mc-tabs__icon\">\n        <slot name=\"icon\" />\n      </span>\n      <span class=\"mc-tabs__label\">\n        <slot />\n      </span>\n    </a>\n  {/if}\n</li>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tabs';\n\n  .mc-tabs__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["tag","selected","href","$.prop","$$props","disabled","attrs","$.rest_props","li","root","button","root_1","span","$.child","span_1","$.reset","$.append","$$anchor","root_2","span_2","span_3","$$render","consequent","alternate"],"mappings":";;6sDAUA,gBA2BQ,IAAAA,cAAM,QAAQ,EAAEC,mBAAW,EAAK,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EAAKE,EAAKC,EAAAH,EAAA,sHAApD,SAAQ,qDAAa,GAAK,8GAGvCI,EAAEC,EAAA,MAAFD,CAAE,aAEE,IAAAE,EAAAC,EAAA,IAAAD,iDAGgBT,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,0CAEH,IAAAM,EAAIC,EAXNH,CAAA,MAWEE,CAAI,0BAAJA,CAAI,EAIJ,IAAAE,IAJAF,EAAI,CAAA,MAIJE,CAAI,6BAAJA,CAAI,EAfNC,EAAAL,CAAA,EAAAM,EAAAC,EAAAP,CAAA,SAoBA,IAAA,EAAAQ,EAAA,IAAA,aACEhB,EAAI,6BAEUD,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,0CAEH,IAAAa,EAAIN,EAXN,CAAA,MAWEM,CAAI,0BAAJA,CAAI,EAGJ,IAAAC,IAHAD,EAAI,CAAA,MAGJC,CAAI,6BAAJA,CAAI,EAdNL,EAAA,CAAA,EAAAC,EAAAC,EAAA,CAAA,WArBEjB,EAAG,IAAK,SAAQqB,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,aADtBf,CAAE,MAAFA,CAAE,MAFK"}

package/dist/components/tab/Tab.svelte

@@ -9,7 +9,6 @@
 />
 
 <script lang="ts">
-  import type { Snippet } from '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.
    *
@@ -18,7 +17,6 @@
    */
   interface Props {
     [key: string]: any;
-
     /**
      * The HTML tag used for the tab.
      */
@@ -35,44 +33,11 @@
      * If `true`, the tab will be disabled.
      */
     disabled?: boolean;
-    /**
-     * The content displayed in the tab.
-     */
-    children?: Snippet;
-    /**
-     * Use this snippet to insert an icon for the tab.
-     */
-    icon?: Snippet;
   }
 
-  let {
-    tag = 'button',
-    selected = false,
-    href,
-    disabled,
-    children,
-    icon,
-    ...attrs
-  }: Props = $props();
+  let { tag = 'button', selected = false, href, disabled, ...attrs }: Props = $props();
 </script>
 
-{#snippet displayContent()}
-  <span class="mc-tabs__icon">
-    {#if icon}
-      {@render icon()}
-    {:else}
-      <slot name="icon" />
-    {/if}
-  </span>
-  <span class="mc-tabs__label">
-    {#if children}
-      {@render children()}
-    {:else}
-      <slot />
-    {/if}
-  </span>
-{/snippet}
-
 <li class="mc-tabs__item" role="presentation">
   {#if tag === 'button'}
     <button
@@ -86,7 +51,13 @@
       ]}
       {...attrs}
     >
-      {@render displayContent()}
+      <span class="mc-tabs__icon">
+        <slot name="icon" />
+      </span>
+
+      <span class="mc-tabs__label">
+        <slot />
+      </span>
     </button>
   {:else}
     <a
@@ -100,7 +71,12 @@
       ]}
       {...attrs}
     >
-      {@render displayContent()}
+      <span class="mc-tabs__icon">
+        <slot name="icon" />
+      </span>
+      <span class="mc-tabs__label">
+        <slot />
+      </span>
     </a>
   {/if}
 </li>

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

@@ -1,4 +1,3 @@
-import type { Snippet } from '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.
  *
@@ -23,14 +22,6 @@ interface Props {
      * If `true`, the tab will be disabled.
      */
     disabled?: boolean;
-    /**
-     * The content displayed in the tab.
-     */
-    children?: Snippet;
-    /**
-     * Use this snippet to insert an icon for the tab.
-     */
-    icon?: Snippet;
 }
 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":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEpC;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IAEnB;;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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAiEH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,GAAG;;;;;;;;UAAqF,CAAC;AAC7E,KAAK,GAAG,GAAG,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC;AACtC,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tab.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tab/Tab.svelte.ts"],"names":[],"mappings":"AAGE;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkDH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,GAAG;;;;;;;;UAAqF,CAAC;AAC7E,KAAK,GAAG,GAAG,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC;AACtC,eAAe,GAAG,CAAC"}

package/dist/components/tabs/README.md

@@ -9,7 +9,6 @@ Tabs are a navigation component that allows users to switch between different se
 | `description` | A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component. | `string` |   |
 | `divider` | If `true`, the divider will appear. | `boolean` | `true` |
 | `centered` | If `true`, the tabs of the component will be centered. | `boolean` |   |
-| `children` | use this snippet to insert `m-tab` components. | `Snippet` |   |
 
 ## Slots
 

package/dist/components/tabs/Tabs.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-tabs',\n    props: {\n      divider: { reflect: true, type: 'Boolean', attribute: 'divider' },\n      centered: { reflect: true, type: 'Boolean', attribute: 'centered' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  /**\n   * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.\n   *\n   * @slot tab - use this slot to insert `m-tab` components.\n   */\n  interface Props {\n    /**\n     * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.\n     */\n    description?: string;\n    /**\n     * If `true`, the divider will appear.\n     */\n    divider?: boolean;\n    /**\n     * If `true`, the tabs of the component will be centered.\n     */\n    centered?: boolean;\n    /**\n     * use this snippet to insert `m-tab` components.\n     */\n    children?: Snippet;\n  }\n\n  let { description, divider = true, centered, children }: Props = $props();\n</script>\n\n<nav class={['mc-tabs', centered && 'mc-tabs--centered']}>\n  <ul class=\"mc-tabs__list\" role=\"tablist\" aria-label={description}>\n    {#if children}\n      {@render children()}\n    {:else}\n      <slot name=\"tab\" />\n    {/if}\n  </ul>\n  {#if divider}\n    <div class=\"mc-divider-horizontal\"></div>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tabs';\n  @use '@mozaic-ds/styles/components/divider';\n</style>\n"],"names":["description","$.prop","$$props","divider","centered","children","nav","root","ul","$$render","consequent","alternate","div","root_3","consequent_1","$.set_class","$.clsx","$.set_attribute"],"mappings":";;mgBAUA,oBA0BQA,EAAWC,EAAAC,EAAA,cAAA,CAAA,EAAEC,kBAAU,EAAI,EAAEC,EAAQH,EAAAC,EAAA,WAAA,CAAA,EAAEG,EAAQJ,EAAAC,EAAA,WAAA,CAAA,4GAAxB,GAAI,sHAGlCI,EAAGC,EAAA,EACDC,IADFF,CAAG,MACDE,CAAE,kCAEUH,CAAQ,sEADdA,EAAQ,EAAAI,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,MADdH,CAAE,UAAFA,EAAE,CAAA,iBAQAI,EAAGC,EAAA,MAAHD,CAAG,WADDT,EAAO,GAAAM,EAAAK,CAAA,aARbR,CAAG,SAAHS,EAAAT,EAAG,EAAAU,EAAA,CAAS,UAAWZ,KAAY,mBAAmB,CAAA,EAAA,eAAA,EACpDa,EAAAT,eAAoDR,GAAW,QADjEM,CAAG,MAFI"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-tabs',\n    props: {\n      divider: { reflect: true, type: 'Boolean', attribute: 'divider' },\n      centered: { reflect: true, type: 'Boolean', attribute: 'centered' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  /**\n   * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.\n   *\n   * @slot tab - use this slot to insert `m-tab` components.\n   */\n  interface Props {\n    /**\n     * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.\n     */\n    description?: string;\n    /**\n     * If `true`, the divider will appear.\n     */\n    divider?: boolean;\n    /**\n     * If `true`, the tabs of the component will be centered.\n     */\n    centered?: boolean;\n  }\n\n  let { description, divider = true, centered }: Props = $props();\n</script>\n\n<nav class={['mc-tabs', centered && 'mc-tabs--centered']}>\n  <ul class=\"mc-tabs__list\" role=\"tablist\" aria-label={description}>\n    <slot name=\"tab\" />\n  </ul>\n  {#if divider}\n    <div class=\"mc-divider-horizontal\"></div>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tabs';\n  @use '@mozaic-ds/styles/components/divider';\n</style>\n"],"names":["description","$.prop","$$props","divider","centered","nav","root","ul","div","root_1","$$render","consequent","$.set_class","$.clsx","$.set_attribute"],"mappings":";;mgBAUA,oBAqBQA,EAAWC,EAAAC,EAAA,cAAA,CAAA,EAAEC,kBAAU,EAAI,EAAEC,EAAQH,EAAAC,EAAA,WAAA,CAAA,4GAAd,GAAI,iEAGlCG,EAAGC,EAAA,EACDC,IADFF,CAAG,MACDE,CAAE,yBAAFA,CAAE,UAAFA,EAAE,CAAA,iBAIAC,EAAGC,EAAA,MAAHD,CAAG,WADDL,EAAO,GAAAO,EAAAC,CAAA,aAJbN,CAAG,SAAHO,EAAAP,EAAG,EAAAQ,EAAA,CAAS,UAAWT,KAAY,mBAAmB,CAAA,EAAA,eAAA,EACpDU,EAAAP,eAAoDP,GAAW,QADjEK,CAAG,MAFI"}

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

@@ -7,7 +7,7 @@ import '@mozaic-ds/icons-svelte/components/ChevronRight24/ChevronRight24.svelte'
 const meta = {
     title: 'Navigation/Tabs',
     component: 'm-tabs',
-    subcomponents: { 'm-tab': 'm-tab' },
+    subcomponents: { 'Tab': 'm-tab' },
     args: {
         tab: `
       <m-tab slot="tab" selected="true">label</m-tab>

package/dist/components/tabs/Tabs.svelte

@@ -9,7 +9,6 @@
 />
 
 <script lang="ts">
-  import type { Snippet } from '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.
    *
@@ -28,22 +27,14 @@
      * If `true`, the tabs of the component will be centered.
      */
     centered?: boolean;
-    /**
-     * use this snippet to insert `m-tab` components.
-     */
-    children?: Snippet;
   }
 
-  let { description, divider = true, centered, children }: Props = $props();
+  let { description, divider = true, centered }: Props = $props();
 </script>
 
 <nav class={['mc-tabs', centered && 'mc-tabs--centered']}>
   <ul class="mc-tabs__list" role="tablist" aria-label={description}>
-    {#if children}
-      {@render children()}
-    {:else}
-      <slot name="tab" />
-    {/if}
+    <slot name="tab" />
   </ul>
   {#if divider}
     <div class="mc-divider-horizontal"></div>

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

@@ -1,4 +1,3 @@
-import type { Snippet } from '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.
  *
@@ -17,10 +16,6 @@ interface Props {
      * If `true`, the tabs of the component will be centered.
      */
     centered?: boolean;
-    /**
-     * use this snippet to insert `m-tab` components.
-     */
-    children?: Snippet;
 }
 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/tabs/Tabs.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEpC;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiCH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,IAAI;;;;UAAqF,CAAC;AAC9E,KAAK,IAAI,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACxC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA4BH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,IAAI;;;;UAAqF,CAAC;AAC9E,KAAK,IAAI,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACxC,eAAe,IAAI,CAAC"}

package/dist/components/tag/README.md

@@ -15,7 +15,6 @@ 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` |   |
-| `icon` | Use this snippet to insert an icon in the tag. | `Snippet` |   |
 
 ## Slots
 

package/dist/components/tag/Tag.js

@@ -1,4 +1,4 @@
-import{u as ne,c as ce,p as me,a as fe,b as m,k as h,l as p,f as o,g as ge,j as f,d as l,s as P,r as s,t as q,e as F,h as D,i as be,q as V,x as ue,v as he,n as pe,o as _e,w as we}from"../../custom-element.js";import{s as Z}from"../../snippet.js";import{i as C}from"../../if.js";import{s as $}from"../../slot.js";import{a as A,r as xe,s as ee}from"../../attributes.js";import{a as ke}from"../../input.js";import{b as Ce}from"../../this.js";import{c as Ee,d as ye}from"../../Condition20.js";import{N as ze}from"../numberbadge/NumberBadge.js";var Be=D('<label><!> <input type="checkbox" class="mc-tag__input svelte-1f9dt2v"/> <span class="mc-tag__label svelte-1f9dt2v"> </span></label>'),Me=D('<button><!> <span class="mc-tag__label svelte-1f9dt2v"> </span></button>'),Pe=D('<button><!> <span class="mc-tag__label svelte-1f9dt2v"> </span></button>'),Fe=D('<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>'),He=D('<span><span class="mc-tag__label svelte-1f9dt2v"> </span></span>');const Ne={hash:"svelte-1f9dt2v",code:`/**
+import{o as ie,c as ve,p as ne,a as ce,b as n,x as M,y as P,f as s,g as me,j as c,d as a,s as k,r,t as F,e as C,h as H,i as fe,n as U,v as ge,q as be,l as ue,m as he,u as pe}from"../../custom-element.js";import{i as E}from"../../if.js";import{s as Y}from"../../slot.js";import{a as S,r as _e,s as Z}from"../../attributes.js";import{a as xe}from"../../input.js";import{b as we}from"../../this.js";import{c as ke,d as Ce}from"../../Condition20.js";import{N as Ee}from"../numberbadge/NumberBadge.js";import"../../branches.js";var ye=H('<label><!> <input type="checkbox" class="mc-tag__input svelte-1f9dt2v"/> <span class="mc-tag__label svelte-1f9dt2v"> </span></label>'),ze=H('<button><!> <span class="mc-tag__label svelte-1f9dt2v"> </span></button>'),Be=H('<button><!> <span class="mc-tag__label svelte-1f9dt2v"> </span></button>'),Me=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>'),Pe=H('<span><span class="mc-tag__label svelte-1f9dt2v"> </span></span>');const Fe={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 je(W,r){me(r,!0),fe(W,Ne);let d=m(r,"type",7,"informative"),g=m(r,"size",7,"m"),H=m(r,"id",7),G=m(r,"name",7),E=m(r,"label",7),R=m(r,"checked",15),N=m(r,"disabled",7),I=m(r,"contextualisednumber",7,99),J=m(r,"removablelabel",7),z=m(r,"icon",7),S=be(r,["$$slots","$$events","$$legacy","$$host","type","size","id","name","label","checked","disabled","contextualisednumber","removablelabel","icon"]),K=we(null);const te=()=>{const e=new CustomEvent("remove-tag",{detail:H(),bubbles:!0,composed:!0});V(K)?.dispatchEvent(e)};var ae={get type(){return d()},set type(e="informative"){d(e),f()},get size(){return g()},set size(e="m"){g(e),f()},get id(){return H()},set id(e){H(e),f()},get name(){return G()},set name(e){G(e),f()},get label(){return E()},set label(e){E(e),f()},get checked(){return R()},set checked(e){R(e),f()},get disabled(){return N()},set disabled(e){N(e),f()},get contextualisednumber(){return I()},set contextualisednumber(e=99){I(e),f()},get removablelabel(){return J()},set removablelabel(e){J(e),f()},get icon(){return z()},set icon(e){z(e),f()}},X=h(),re=p(X);{var oe=e=>{var y=Be();A(y,()=>({for:H(),class:["mc-tag",`mc-tag-${d()}`,`mc-tag--${g()}`],...S}),void 0,void 0,void 0,"svelte-1f9dt2v");var T=l(y);{var L=w=>{var B=h(),j=p(B);{var i=t=>{var a=h(),n=p(a);Z(n,z),o(t,a)},v=t=>{var a=h(),n=p(a);$(n,r,"icon",{},null),o(t,a)};C(j,t=>{z()?t(i):t(v,!1)})}o(w,B)};C(T,w=>{R()||w(L)})}var _=P(T,2);xe(_);var b=P(_,2),u=l(b,!0);s(b),s(y),q(()=>{ee(_,"id",H()),ee(_,"name",G()),_.disabled=N(),F(u,E())}),ke(_,R),o(e,y)},le=e=>{var y=h(),T=p(y);{var L=b=>{var u=Me();A(u,()=>({class:["mc-tag",`mc-tag-${d()}`,`mc-tag--${g()}`],type:"button",disabled:N(),...S}),void 0,void 0,void 0,"svelte-1f9dt2v");var w=l(u);{var B=t=>{var a=h(),n=p(a);Z(n,z),o(t,a)},j=t=>{var a=h(),n=p(a);$(n,r,"icon",{},null),o(t,a)};C(w,t=>{z()?t(B):t(j,!1)})}var i=P(w,2),v=l(i,!0);s(i),s(u),q(()=>F(v,E())),o(b,u)},_=b=>{var u=h(),w=p(u);{var B=i=>{var v=Pe();A(v,()=>({class:["mc-tag",`mc-tag-${d()}`,`mc-tag--${g()}`],type:"button",disabled:N(),...S}),void 0,void 0,void 0,"svelte-1f9dt2v");var t=l(v);{let x=ue(()=>g()==="l"?"m":void 0);ze(t,{appearance:"inverse",get label(){return I()},get size(){return V(x)}})}var a=P(t,2),n=l(a,!0);s(a),s(v),q(()=>F(n,E())),o(i,v)},j=i=>{var v=h(),t=p(v);{var a=x=>{var c=Fe();A(c,()=>({class:["mc-tag",`mc-tag-${d()}`,`mc-tag--${g()}`],...S}),void 0,void 0,void 0,"svelte-1f9dt2v");var M=l(c),O=l(M,!0);s(M);var Q=P(M,2);Q.__click=te;var U=l(Q),se=l(U);{var de=k=>{Ee(k,{})},ie=k=>{ye(k,{})};C(se,k=>{g()==="s"?k(de):k(ie,!1)})}s(U);var Y=P(U,2),ve=l(Y,!0);s(Y),s(Q),s(c),Ce(c,k=>he(K,k),()=>V(K)),q(()=>{F(O,E()),F(ve,J())}),o(x,c)},n=x=>{var c=He(),M=l(c),O=l(M,!0);s(M),s(c),q(()=>{pe(c,1,_e(["mc-tag",`mc-tag-${d()}`,`mc-tag--${g()}`]),"svelte-1f9dt2v"),F(O,E())}),o(x,c)};C(t,x=>{d()==="removable"?x(a):x(n,!1)},!0)}o(i,v)};C(w,i=>{d()==="contextualised"?i(B):i(j,!1)},!0)}o(b,u)};C(T,b=>{d()==="interactive"?b(L):b(_,!1)},!0)}o(e,y)};C(re,e=>{d()==="selectable"?e(oe):e(le,!1)})}return o(W,X),ge(ae)}ne(["click"]);customElements.define("m-tag",ce(je,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},type:{},size:{},id:{},name:{},label:{},contextualisednumber:{},removablelabel:{},icon:{}},["icon"],[],!0));
+ */.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 He(V,t){ne(t,!0),ce(V,Fe);let o=n(t,"type",7,"informative"),d=n(t,"size",7,"m"),y=n(t,"id",7),T=n(t,"name",7),u=n(t,"label",7),N=n(t,"checked",15),z=n(t,"disabled",7),A=n(t,"contextualisednumber",7,99),G=n(t,"removablelabel",7),j=fe(t,["$$slots","$$events","$$legacy","$$host","type","size","id","name","label","checked","disabled","contextualisednumber","removablelabel"]),I=pe(null);const $=()=>{const e=new CustomEvent("remove-tag",{detail:y(),bubbles:!0,composed:!0});U(I)?.dispatchEvent(e)};var ee={get type(){return o()},set type(e="informative"){o(e),c()},get size(){return d()},set size(e="m"){d(e),c()},get id(){return y()},set id(e){y(e),c()},get name(){return T()},set name(e){T(e),c()},get label(){return u()},set label(e){u(e),c()},get checked(){return N()},set checked(e){N(e),c()},get disabled(){return z()},set disabled(e){z(e),c()},get contextualisednumber(){return A()},set contextualisednumber(e=99){A(e),c()},get removablelabel(){return G()},set removablelabel(e){G(e),c()}},W=M(),te=P(W);{var ae=e=>{var h=ye();S(h,()=>({for:y(),class:["mc-tag",`mc-tag-${o()}`,`mc-tag--${d()}`],...j}),void 0,void 0,void 0,"svelte-1f9dt2v");var q=a(h);{var J=f=>{var p=M(),B=P(p);Y(B,t,"icon",{},null),s(f,p)};E(q,f=>{N()||f(J)})}var m=k(q,2);_e(m);var i=k(m,2),v=a(i,!0);r(i),r(h),F(()=>{Z(m,"id",y()),Z(m,"name",T()),m.disabled=z(),C(v,u())}),xe(m,N),s(e,h)},re=e=>{var h=M(),q=P(h);{var J=i=>{var v=ze();S(v,()=>({class:["mc-tag",`mc-tag-${o()}`,`mc-tag--${d()}`],type:"button",disabled:z(),...j}),void 0,void 0,void 0,"svelte-1f9dt2v");var f=a(v);Y(f,t,"icon",{},null);var p=k(f,2),B=a(p,!0);r(p),r(v),F(()=>C(B,u())),s(i,v)},m=i=>{var v=M(),f=P(v);{var p=x=>{var _=Be();S(_,()=>({class:["mc-tag",`mc-tag-${o()}`,`mc-tag--${d()}`],type:"button",disabled:z(),...j}),void 0,void 0,void 0,"svelte-1f9dt2v");var D=a(_);{let g=ge(()=>d()==="l"?"m":void 0);Ee(D,{appearance:"inverse",get label(){return A()},get size(){return U(g)}})}var R=k(D,2),K=a(R,!0);r(R),r(_),F(()=>C(K,u())),s(x,_)},B=x=>{var _=M(),D=P(_);{var R=g=>{var l=Me();S(l,()=>({class:["mc-tag",`mc-tag-${o()}`,`mc-tag--${d()}`],...j}),void 0,void 0,void 0,"svelte-1f9dt2v");var w=a(l),L=a(w,!0);r(w);var O=k(w,2);O.__click=$;var Q=a(O),oe=a(Q);{var le=b=>{ke(b,{})},se=b=>{Ce(b,{})};E(oe,b=>{d()==="s"?b(le):b(se,!1)})}r(Q);var X=k(Q,2),de=a(X,!0);r(X),r(O),r(l),we(l,b=>be(I,b),()=>U(I)),F(()=>{C(L,u()),C(de,G())}),s(g,l)},K=g=>{var l=Pe(),w=a(l),L=a(w,!0);r(w),r(l),F(()=>{ue(l,1,he(["mc-tag",`mc-tag-${o()}`,`mc-tag--${d()}`]),"svelte-1f9dt2v"),C(L,u())}),s(g,l)};E(D,g=>{o()==="removable"?g(R):g(K,!1)},!0)}s(x,_)};E(f,x=>{o()==="contextualised"?x(p):x(B,!1)},!0)}s(i,v)};E(q,i=>{o()==="interactive"?i(J):i(m,!1)},!0)}s(e,h)};E(te,e=>{o()==="selectable"?e(ae):e(re,!1)})}return s(V,W),me(ee)}ie(["click"]);customElements.define("m-tag",ve(He,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},type:{},size:{},id:{},name:{},label:{},contextualisednumber:{},removablelabel:{}},["icon"],[],!0));
 //# 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 type { Snippet } from 'svelte';\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     * Use this snippet to insert an icon in the tag.\n     */\n    icon?: Snippet;\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    icon,\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      {#if icon}\n        {@render icon()}\n      {:else}\n        <slot name=\"icon\" />\n      {/if}\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    {#if icon}\n      {@render icon()}\n    {:else}\n      <slot name=\"icon\" />\n    {/if}\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","icon","attrs","$.rest_props","element","$.state","onRemove","event","label_1","root_1","$$render","consequent","alternate","consequent_1","input","$.sibling","node_1","span","$.set_attribute","button","root_6","node_6","$.child","consequent_3","alternate_1","span_1","$.reset","$.append","$$anchor","button_1","root_10","node_10","$0","$.derived","NumberBadge","span_2","span_3","root_12","span_4","button_2","span_5","CrossCircleFilled20","CrossCircleFilled24","consequent_6","alternate_2","span_6","$$value","$.set","$.get","span_7","root_15","span_8","$.set_class","$.clsx","consequent_7","alternate_3","consequent_5","alternate_4","consequent_4","alternate_5","consequent_2","alternate_6"],"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\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_4","node_4","$.child","span_1","$.reset","$.append","$$anchor","button_1","root_6","node_6","$0","$.derived","NumberBadge","span_2","span_3","root_8","span_4","button_2","span_5","CrossCircleFilled20","CrossCircleFilled24","consequent_4","alternate","span_6","$$value","$.set","$.get","span_7","root_11","span_8","$.set_class","$.clsx","consequent_5","alternate_1","consequent_3","alternate_2","consequent_2","alternate_3","consequent_1","alternate_4"],"mappings":"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"}

package/dist/components/tag/Tag.svelte

@@ -9,7 +9,6 @@
 />
 
 <script lang="ts">
-  import type { Snippet } from 'svelte';
   import { CrossCircleFilled24, CrossCircleFilled20 } from '@mozaic-ds/icons-svelte';
   import NumberBadge from '../numberbadge/NumberBadge.svelte';
   /**
@@ -56,10 +55,6 @@
      * Accessible label text for the remove button in removable tags.
      */
     removablelabel?: string;
-    /**
-     * Use this snippet to insert an icon in the tag.
-     */
-    icon?: Snippet;
   }
 
   let {
@@ -72,7 +67,6 @@
     disabled,
     contextualisednumber = 99,
     removablelabel,
-    icon,
     ...attrs
   }: Props = $props();
   let element = $state<HTMLElement | null>(null);
@@ -90,11 +84,7 @@
 {#if type === 'selectable'}
   <label for={id} class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]} {...attrs}>
     {#if !checked}
-      {#if icon}
-        {@render icon()}
-      {:else}
-        <slot name="icon" />
-      {/if}
+      <slot name="icon" />
     {/if}
     <input type="checkbox" class="mc-tag__input" {id} {name} {disabled} bind:checked />
     <span class="mc-tag__label">{label}</span>
@@ -106,11 +96,7 @@
     {disabled}
     {...attrs}
   >
-    {#if icon}
-      {@render icon()}
-    {:else}
-      <slot name="icon" />
-    {/if}
+    <slot name="icon" />
     <span class="mc-tag__label">{label}</span>
   </button>
 {:else if type === 'contextualised'}

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

@@ -1,4 +1,3 @@
-import type { Snippet } from 'svelte';
 /**
  * A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).
  *
@@ -43,10 +42,6 @@ interface Props {
      * Accessible label text for the remove button in removable tags.
      */
     removablelabel?: string;
-    /**
-     * Use this snippet to insert an icon in the tag.
-     */
-    icon?: Snippet;
 }
 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":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC;;;;;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,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AA0FH,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;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"}

package/dist/components/textarea/Textarea.js

@@ -1,4 +1,4 @@
-import{c as x,p as w,a as y,b as a,f as p,g as z,h as j,i as q,j as o,y as _}from"../../custom-element.js";import{a as k}from"../../attributes.js";import{c as B}from"../../input.js";import{c as E}from"../../custom-element-forward-events.js";var D=j("<textarea></textarea>");const F={hash:"svelte-1qbzujl",code:`/**
+import{c as x,p as w,a as y,b as a,f as p,g as z,h as j,i as q,j as o,w as _}from"../../custom-element.js";import{a as k}from"../../attributes.js";import{c as B}from"../../input.js";import{c as E}from"../../custom-element-forward-events.js";var D=j("<textarea></textarea>");const F={hash:"svelte-1qbzujl",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-textarea.svelte-1qbzujl {font-family:inherit;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);min-height:4rem;padding:0.5rem 0.75rem;}.mc-textarea.svelte-1qbzujl::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-textarea.svelte-1qbzujl:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-textarea.svelte-1qbzujl:focus {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-textarea.svelte-1qbzujl:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-textarea[readonly].svelte-1qbzujl {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-textarea.is-invalid.svelte-1qbzujl {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-textarea.is-invalid.svelte-1qbzujl:hover {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}`};function S(f,r){w(r,!0),y(f,F);let d=a(r,"id",7),s=a(r,"name",7),i=a(r,"value",7),n=a(r,"placeholder",7),t=a(r,"isinvalid",7),c=a(r,"disabled",7),m=a(r,"rows",7,2),v=a(r,"minlength",7),u=a(r,"maxlength",7),b=a(r,"readonly",7),h=q(r,["$$slots","$$events","$$legacy","$$host","id","name","value","placeholder","isinvalid","disabled","rows","minlength","maxlength","readonly"]);var g={get id(){return d()},set id(e){d(e),o()},get name(){return s()},set name(e){s(e),o()},get value(){return i()},set value(e){i(e),o()},get placeholder(){return n()},set placeholder(e){n(e),o()},get isinvalid(){return t()},set isinvalid(e){t(e),o()},get disabled(){return c()},set disabled(e){c(e),o()},get rows(){return m()},set rows(e=2){m(e),o()},get minlength(){return v()},set minlength(e){v(e),o()},get maxlength(){return u()},set maxlength(e){u(e),o()},get readonly(){return b()},set readonly(e){b(e),o()}},l=D();return _(l),k(l,()=>({class:["mc-textarea",t()&&"is-invalid"],"aria-invalid":t(),name:s(),id:d(),placeholder:n(),rows:m(),disabled:c(),minlength:v(),maxlength:u(),readonly:b(),...h}),void 0,void 0,void 0,"svelte-1qbzujl"),B(l,i),p(f,l),z(g)}customElements.define("m-textarea",x(S,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},id:{},name:{},value:{},placeholder:{},rows:{},minlength:{},maxlength:{}},[],[],!0,E));
 //# sourceMappingURL=Textarea.js.map

package/dist/components/textarea/Textarea.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/Textarea.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,mBAAmB,CAAC;AAE3B,QAAA,MAAM,IAAI,EAAE,IAwCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
+{"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/Textarea.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,mBAAmB,CAAC;AAE3B,QAAA,MAAM,IAAI,EAAE,IAyCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/textarea/Textarea.stories.js

@@ -5,6 +5,7 @@ import './Textarea.svelte';
 const meta = {
     title: 'Form Elements/Textarea',
     component: 'm-textarea',
+    subcomponents: { 'Field': 'm-field' },
     args: {
         id: 'textareaId',
         placeholder: 'Placeholder',

package/dist/components/textinput/README.md

@@ -17,7 +17,6 @@ A text input is a single-line input that allows users to enter and edit short te
 | `readonly` | If `true`, the input is read-only (cannot be edited). | `boolean` |   |
 | `isclearable` | If `true`, a clear button will appear when the input has a value. | `boolean` |   |
 | `clearlabel` | The label text for the clear button. | `string` | `Clear content` |
-| `icon` | Use this snippet to insert an icon in the input. | `Snippet` |   |
 
 ## Slots
 

package/dist/components/textinput/Textinput.js

@@ -1,9 +1,9 @@
-import{u as I,c as J,p as K,a as N,b as n,s as z,t as C,f as b,g as O,h as M,d as s,i as P,j as o,k as E,l as j,r as a,e as Q,n as R,o as U}from"../../custom-element.js";import{s as W}from"../../snippet.js";import{i as F}from"../../if.js";import{s as X}from"../../slot.js";import{a as Y}from"../../attributes.js";import{c as $}from"../../input.js";import{c as ee}from"../../custom-element-forward-events.js";var te=M('<div class="mc-controls-options svelte-5c9enb"><button type="button" class="mc-controls-options__button svelte-5c9enb"><svg class="mc-controls-options__icon svelte-5c9enb" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" class="svelte-5c9enb"></path></svg> <span class="mc-controls-options__label svelte-5c9enb"> </span></button></div>'),ne=M('<div><span class="mc-text-input__icon svelte-5c9enb"><!></span> <input/> <!></div>');const oe={hash:"svelte-5c9enb",code:`/**
+import{o as G,c as T,p as V,a as q,b as n,s as y,t as B,f as L,g as A,h as C,d as l,i as H,j as o,r as i,e as I,l as J,m as K}from"../../custom-element.js";import{i as N}from"../../if.js";import{s as O}from"../../slot.js";import{a as P}from"../../attributes.js";import{c as Q}from"../../input.js";import{c as R}from"../../custom-element-forward-events.js";import"../../branches.js";var U=C('<div class="mc-controls-options svelte-5c9enb"><button type="button" class="mc-controls-options__button svelte-5c9enb"><svg class="mc-controls-options__icon svelte-5c9enb" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" class="svelte-5c9enb"></path></svg> <span class="mc-controls-options__label svelte-5c9enb"> </span></button></div>'),W=C('<div><span class="mc-text-input__icon svelte-5c9enb"><!></span> <input/> <!></div>');const X={hash:"svelte-5c9enb",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-controls-options.svelte-5c9enb {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-5c9enb {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%);}.mc-controls-options__button.svelte-5c9enb:hover .mc-controls-options__icon:where(.svelte-5c9enb) {fill:var(--forms-color-icon-clear-hover, #4d4d4d);}.mc-controls-options__button.svelte-5c9enb: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-controls-options__icon.svelte-5c9enb {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-5c9enb, .mc-controls-options__icon.svelte-5c9enb {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-5c9enb {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-controls-options__unit.svelte-5c9enb {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);}
 
 /* stylelint-disable string-no-newline */.mc-text-input.svelte-5c9enb {transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:0.5rem;}.mc-text-input__control.svelte-5c9enb {background-color:transparent;border-width:0;font-family:inherit;outline:none;}.mc-text-input__control[type=number].svelte-5c9enb::-webkit-inner-spin-button, .mc-text-input__control[type=number].svelte-5c9enb::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-text-input__control[type=number].svelte-5c9enb {
   /* For Gecko rendering engine */appearance:textfield;}.mc-text-input__control[type=search].svelte-5c9enb::-webkit-search-decoration, .mc-text-input__control[type=search].svelte-5c9enb::-webkit-search-cancel-button {appearance:none;}.mc-text-input__control.svelte-5c9enb {padding:0.75rem 0.6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);flex-grow:1;}.mc-text-input__control.svelte-5c9enb::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__icon.svelte-5c9enb {fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-5c9enb:focus-within {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-text-input.svelte-5c9enb:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-text-input.svelte-5c9enb:has(input:where(.svelte-5c9enb):disabled) {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none;}.mc-text-input.svelte-5c9enb:has(input[readonly]:where(.svelte-5c9enb)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-5c9enb:has(.mc-text-input__icon:where(.svelte-5c9enb)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-5c9enb:has(.mc-text-input__icon:where(.svelte-5c9enb)) .mc-text-input__control:where(.svelte-5c9enb) {padding-inline-start:0;}.mc-text-input.svelte-5c9enb:has(.mc-controls-options:where(.svelte-5c9enb)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-5c9enb:has(.mc-controls-options:where(.svelte-5c9enb)) .mc-text-input__control:where(.svelte-5c9enb) {padding-inline-end:0;}.mc-text-input--s.svelte-5c9enb {height:2rem;}.mc-text-input--s.svelte-5c9enb .mc-text-input__control:where(.svelte-5c9enb) {padding:0.375rem 0.6875rem;font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);}.mc-text-input--s.svelte-5c9enb:has(.mc-text-input__icon:where(.svelte-5c9enb)) {padding-inline-start:0.4375rem;}.mc-text-input--s.svelte-5c9enb:has(.mc-controls-options:where(.svelte-5c9enb)) {padding-inline-end:0.4375rem;}.mc-text-input.is-invalid.svelte-5c9enb {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-text-input.is-invalid.svelte-5c9enb:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}.mc-text-input.svelte-5c9enb :where(.svelte-5c9enb) {box-sizing:border-box;}
 
-/* stylelint-enable string-no-newline */.mc-text-input__icon.svelte-5c9enb:empty {display:none;}`};function re(B,t){K(t,!0),N(B,oe);let u=n(t,"id",7),m=n(t,"name",7),l=n(t,"value",15),p=n(t,"placeholder",7),f=n(t,"inputtype",7,"text"),c=n(t,"isinvalid",7),h=n(t,"disabled",7),_=n(t,"readonly",7),x=n(t,"size",7,"m"),g=n(t,"clearlabel",7,"Clear content"),w=n(t,"isclearable",7),d=n(t,"icon",7),S=P(t,["$$slots","$$events","$$legacy","$$host","id","name","value","placeholder","inputtype","isinvalid","disabled","readonly","size","clearlabel","isclearable","icon"]);const Z=()=>l("");var D={get id(){return u()},set id(e){u(e),o()},get name(){return m()},set name(e){m(e),o()},get value(){return l()},set value(e){l(e),o()},get placeholder(){return p()},set placeholder(e){p(e),o()},get inputtype(){return f()},set inputtype(e="text"){f(e),o()},get isinvalid(){return c()},set isinvalid(e){c(e),o()},get disabled(){return h()},set disabled(e){h(e),o()},get readonly(){return _()},set readonly(e){_(e),o()},get size(){return x()},set size(e="m"){x(e),o()},get clearlabel(){return g()},set clearlabel(e="Clear content"){g(e),o()},get isclearable(){return w()},set isclearable(e){w(e),o()},get icon(){return d()},set icon(e){d(e),o()}},v=ne(),y=s(v),G=s(y);{var T=e=>{var r=E(),i=j(r);W(i,d),b(e,r)},V=e=>{var r=E(),i=j(r);X(i,t,"icon",{},null),b(e,r)};F(G,e=>{d()?e(T):e(V,!1)})}a(y);var k=z(y,2);Y(k,()=>({class:"mc-text-input__control","aria-invalid":c(),name:m(),id:u(),type:f(),placeholder:p(),disabled:h(),readonly:_(),...S}),void 0,void 0,void 0,"svelte-5c9enb",!0);var q=z(k,2);{var A=e=>{var r=te(),i=s(r);i.__click=Z;var L=z(s(i),2),H=s(L,!0);a(L),a(i),a(r),C(()=>Q(H,g())),b(e,r)};F(q,e=>{w()&&l()&&e(A)})}return a(v),C(()=>R(v,1,U(["mc-text-input",`mc-text-input--${x()}`,c()&&"is-invalid"]),"svelte-5c9enb")),$(k,l),b(B,v),O(D)}I(["click"]);customElements.define("m-textinput",J(re,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},isclearable:{attribute:"isclearable",reflect:!0,type:"Boolean"},id:{},name:{},value:{},placeholder:{},inputtype:{},size:{},clearlabel:{},icon:{}},["icon"],[],!0,ee));
+/* stylelint-enable string-no-newline */.mc-text-input__icon.svelte-5c9enb:empty {display:none;}`};function Y(k,t){V(t,!0),q(k,X);let c=n(t,"id",7),d=n(t,"name",7),r=n(t,"value",15),b=n(t,"placeholder",7),v=n(t,"inputtype",7,"text"),s=n(t,"isinvalid",7),u=n(t,"disabled",7),m=n(t,"readonly",7),p=n(t,"size",7,"m"),f=n(t,"clearlabel",7,"Clear content"),h=n(t,"isclearable",7),E=H(t,["$$slots","$$events","$$legacy","$$host","id","name","value","placeholder","inputtype","isinvalid","disabled","readonly","size","clearlabel","isclearable"]);const j=()=>r("");var F={get id(){return c()},set id(e){c(e),o()},get name(){return d()},set name(e){d(e),o()},get value(){return r()},set value(e){r(e),o()},get placeholder(){return b()},set placeholder(e){b(e),o()},get inputtype(){return v()},set inputtype(e="text"){v(e),o()},get isinvalid(){return s()},set isinvalid(e){s(e),o()},get disabled(){return u()},set disabled(e){u(e),o()},get readonly(){return m()},set readonly(e){m(e),o()},get size(){return p()},set size(e="m"){p(e),o()},get clearlabel(){return f()},set clearlabel(e="Clear content"){f(e),o()},get isclearable(){return h()},set isclearable(e){h(e),o()}},a=W(),_=l(a),M=l(_);O(M,t,"icon",{},null),i(_);var x=y(_,2);P(x,()=>({class:"mc-text-input__control","aria-invalid":s(),name:d(),id:c(),type:v(),placeholder:b(),disabled:u(),readonly:m(),...E}),void 0,void 0,void 0,"svelte-5c9enb",!0);var S=y(x,2);{var Z=e=>{var g=U(),w=l(g);w.__click=j;var z=y(l(w),2),D=l(z,!0);i(z),i(w),i(g),B(()=>I(D,f())),L(e,g)};N(S,e=>{h()&&r()&&e(Z)})}return i(a),B(()=>J(a,1,K(["mc-text-input",`mc-text-input--${p()}`,s()&&"is-invalid"]),"svelte-5c9enb")),Q(x,r),L(k,a),A(F)}G(["click"]);customElements.define("m-textinput",T(Y,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},isclearable:{attribute:"isclearable",reflect:!0,type:"Boolean"},id:{},name:{},value:{},placeholder:{},inputtype:{},size:{},clearlabel:{}},["icon"],[],!0,R));
 //# sourceMappingURL=Textinput.js.map