@mozaic-ds/web-components 1.0.0-beta.7 → 1.1.0

package/dist/components/tabs/Tabs.js

@@ -1,4 +1,4 @@
-import{c as b,p as f,a as h,b as n,v as g,l as _,f as q,m as x,d,t as y,e as k,h as w,i as j,j as o,r as v,E as z}from"../../custom-element.js";import{s as E}from"../../slot.js";var T=q('<nav><ul class="mc-tabs__list svelte-qelc5p" role="tablist" aria-label="Tabs default"><!></ul> <div class="mc-divider-horizontal svelte-qelc5p"></div></nav>');const D={hash:"svelte-qelc5p",code:`/**
+import{c as h,p as q,a as y,b as l,f as p,d as o,s as k,t as w,i as v,j as x,k as d,r as m,e as j,g as z}from"../../custom-element.js";import{i as D}from"../../if.js";import{s as E}from"../../slot.js";import{s as S}from"../../attributes.js";var T=p('<div class="mc-divider-horizontal svelte-qelc5p"></div>'),A=p('<nav><ul class="mc-tabs__list svelte-qelc5p" role="tablist"><!></ul> <!></nav>');const B={hash:"svelte-qelc5p",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-tabs.svelte-qelc5p {background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem;}.mc-tabs__list.svelte-qelc5p {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:0.5rem;padding:0.5rem 0.25rem;}.mc-tabs--centered.svelte-qelc5p .mc-tabs__list:where(.svelte-qelc5p) {justify-content:center;}.mc-divider-horizontal.svelte-qelc5p {background:var(--divider-color-primary, #cccccc);height:0.0625rem;}`};function S(l,t){f(t,!0),h(l,D);let s=n(t,"activeindex",7),c=n(t,"centered",7),m=g(_(s()??0));var p={get activeindex(){return s()},set activeindex(e){s(e),o()},get centered(){return c()},set centered(e){c(e),o()}},a=T();let r;var i=d(a),u=d(i);return E(u,t,"tab",{get active(){return x(m)}}),v(i),z(2),v(a),y(e=>r=k(a,1,"mc-tabs svelte-qelc5p",null,r,e),[()=>({"mc-tabs--centered":c()})]),w(l,a),j(p)}customElements.define("mc-tabs",b(S,{activeindex:{},centered:{}},["tab"],[],!0));
+ */.mc-tabs.svelte-qelc5p {background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem;}.mc-tabs__list.svelte-qelc5p {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:0.5rem;padding:0.5rem 0.25rem;}.mc-tabs--centered.svelte-qelc5p .mc-tabs__list:where(.svelte-qelc5p) {justify-content:center;}.mc-divider-horizontal.svelte-qelc5p {background:var(--divider-color-primary, #cccccc);height:0.0625rem;}`};function C(n,t){q(t,!0),y(n,B);let a=l(t,"description",7),i=l(t,"divider",7,!0),c=l(t,"centered",7);var f={get description(){return a()},set description(e){a(e),d()},get divider(){return i()},set divider(e=!0){i(e),d()},get centered(){return c()},set centered(e){c(e),d()}},r=A(),s=o(r),u=o(s);E(u,t,"tab",{}),m(s);var b=k(s,2);{var _=e=>{var g=T();v(e,g)};D(b,e=>{i()&&e(_)})}return m(r),w(()=>{j(r,1,z(["mc-tabs",c()&&"mc-tabs--centered"]),"svelte-qelc5p"),S(s,"aria-label",a())}),v(n,r),x(f)}customElements.define("m-tabs",h(C,{description:{},divider:{},centered:{}},["tab"],[],!0));
 //# 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 customElement={{ tag: 'mc-tabs' }} />\n\n<script lang=\"ts\">\n  let { activeindex, centered } = $props();\n\n  let active = $state(activeindex ?? 0);\n</script>\n\n<nav class=\"mc-tabs\" class:mc-tabs--centered={centered}>\n  <ul class=\"mc-tabs__list\" role=\"tablist\" aria-label=\"Tabs default\">\n    <slot name=\"tab\" {active} />\n  </ul>\n  <div class=\"mc-divider-horizontal\"></div>\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":["activeindex","$.prop","$$props","centered","active","$.state","$.proxy"],"mappings":";;yeAAA,oBAGQA,EAAWC,EAAAC,EAAA,cAAA,CAAA,EAAEC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EAEvBE,EAAMC,EAAAC,EAAUN,EAAW,GAAI,CAAC,CAAA,iSAGQG,EAAQ,CAAA,EAAA,CAAA,aAFtD"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-tabs' }} />\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","$$render","consequent"],"mappings":";;yeAAA,oBAuBQA,EAAWC,EAAAC,EAAA,cAAA,CAAA,EAAEC,kBAAU,EAAI,EAAEC,EAAQH,EAAAC,EAAA,WAAA,CAAA,4GAAd,GAAI,4JAO5BC,EAAO,GAAAE,EAAAC,CAAA,gCAJD,UAAWF,KAAY,mBAAmB,CAAA,EAAA,eAAA,mBACAJ,GAAW,eAHlE"}

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

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Tabs from './Tabs.svelte';
+describe('mc-tabs component', () => {
+    it('renders <nav> with the base class', () => {
+        const { container } = render(Tabs);
+        const nav = container.querySelector('nav');
+        expect(nav).toBeTruthy();
+        expect(nav?.classList.contains('mc-tabs')).toBe(true);
+    });
+    it('adds the "mc-tabs--centered" class when centered is true', () => {
+        const { container } = render(Tabs, {
+            props: { centered: true },
+        });
+        const nav = container.querySelector('nav');
+        expect(nav?.classList.contains('mc-tabs--centered')).toBe(true);
+    });
+    it('renders a <ul> with role="tablist"', () => {
+        const { container } = render(Tabs);
+        const ul = container.querySelector('ul.mc-tabs__list');
+        expect(ul).toBeTruthy();
+        expect(ul?.getAttribute('role')).toBe('tablist');
+    });
+    it('sets aria-label on the tablist when description is provided', () => {
+        const description = 'My tab description';
+        const { container } = render(Tabs, {
+            props: { description },
+        });
+        const ul = container.querySelector('ul.mc-tabs__list');
+        expect(ul?.getAttribute('aria-label')).toBe(description);
+    });
+    it('renders a divider by default', () => {
+        const { container } = render(Tabs);
+        const divider = container.querySelector('.mc-divider-horizontal');
+        expect(divider).toBeTruthy();
+    });
+    it('does not render divider when divider is false', () => {
+        const { container } = render(Tabs, {
+            props: { divider: false },
+        });
+        const divider = container.querySelector('.mc-divider-horizontal');
+        expect(divider).toBeNull();
+    });
+    it('renders without crashing when value prop is provided', () => {
+        const { container } = render(Tabs, {
+            props: { value: 2 },
+        });
+        const nav = container.querySelector('nav');
+        expect(nav).toBeTruthy();
+    });
+});

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

@@ -1,7 +1,10 @@
-import type { Meta } from '@storybook/html-vite';
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const Centered: any;
-export declare const WithIcons: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Icons: Story;
+export declare const Centered: Story;
+export declare const NoDivider: Story;
+export declare const Disabled: Story;
 //# sourceMappingURL=Tabs.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,sBAAsB,CAAC;wBAyBrD,IAAI;AArBT,wBAqBU;AAsCV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAoBzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAoD1C,eAAO,MAAM,SAAS,KAAwB,CAAC"}
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAsBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAqBnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC"}

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

@@ -1,122 +1,66 @@
-import ChevronRight32 from '@mozaic-ds/icons-svelte/custom-elements/ChevronRight32/ChevronRight32.js';
-import { within, expect } from 'storybook/test';
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+const meta = {
     title: 'Navigation/Tabs',
-    tags: ['autodocs', 'new'],
-    parameters: {
-        docs: {
-            description: {
-                component: '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.',
-            },
-        },
+    component: 'm-tabs',
+    subcomponents: { 'm-tab': 'm-tab' },
+    args: {
+        tab: `
+      <m-tab slot="tab" selected="true">label</m-tab>
+      <m-tab slot="tab">label</m-tab>
+      <m-tab slot="tab">label</m-tab>
+      <m-tab slot="tab">label</m-tab>
+    `,
     },
-    argTypes: {
-        activeindex: {
-            description: 'Index of the currently selected tab',
-            control: { type: 'number', min: 0 },
-        },
-        centered: {
-            description: 'centered tab element',
-            control: { type: 'boolean' },
-        },
-    },
-};
-// --- Template Function
-const Template = ({ activeindex = 0, centered = 'false' }) => {
-    const wrapper = document.createElement('div');
-    const tabs = document.createElement('mc-tabs');
-    tabs.setAttribute('activeindex', String(activeindex));
-    tabs.setAttribute('centered', centered || '');
-    for (let i = 0; i < 4; i++) {
-        const tab = document.createElement('mc-tab');
-        tab.setAttribute('slot', 'tab');
-        tab.setAttribute('index', String(i));
-        tab.setAttribute('tag', 'button');
-        tab.innerText = `Tab ${i + 1}`;
-        if (String(i) === String(3))
-            tab.setAttribute('disabled', 'true');
-        if (i === activeindex)
-            tab.setAttribute('selected', 'true');
-        tab.addEventListener('click', () => {
-            tabs.setAttribute('activeindex', String(i));
-            // Update other tab selection
-            const allTabs = tabs.querySelectorAll('mc-tab');
-            allTabs.forEach((el, idx) => {
-                if (i === idx) {
-                    el.setAttribute('selected', 'true');
-                }
-                else {
-                    el.removeAttribute('selected');
-                }
-            });
-        });
-        tabs.appendChild(tab);
-    }
-    wrapper.appendChild(tabs);
-    return wrapper;
-};
-// --- Default story
-export const Default = Template.bind({});
-Default.args = {
-    activeIndex: 0,
-    centered: false,
+    render: (args) => html `
+    <m-tabs
+      description=${ifDefined(args.description)}
+      centered=${ifDefined(args.centered)}
+      divider=${ifDefined(args.divider)}
+      value=${ifDefined(args.value)}
+    >
+      ${unsafeHTML(ifDefined(args.tab))}
+    </m-tabs>
+  `,
 };
-Default.play = async ({ canvasElement }) => {
-    const tabs = canvasElement.querySelector('mc-tabs');
-    const tabItems = tabs?.querySelectorAll('mc-tab');
-    expect(tabItems?.length).toBe(4);
-    const selected = Array.from(tabItems).filter((tab) => tab.getAttribute('selected') === 'true');
-    expect(selected.length).toBe(1);
-    expect(selected[0].innerText).toBe('Tab 1');
+export default meta;
+export const Default = {};
+export const Icons = {
+    args: {
+        tab: `
+      <m-tab slot="tab" selected="true">
+        <chevron-right-24 slot="icon"></chevron-right-24>
+        label
+      </m-tab>
+      <m-tab slot="tab">
+        <chevron-right-24  slot="icon"></chevron-right-24>
+        label
+      </m-tab>
+      <m-tab slot="tab">
+        <chevron-right-24  slot="icon"></chevron-right-24>
+        label
+      </m-tab>
+      <m-tab slot="tab">
+        <chevron-right-24  slot="icon"></chevron-right-24>
+        label
+      </m-tab>
+    `,
+    },
 };
-// --- Centered story
-export const Centered = Template.bind({});
-Centered.args = {
-    activeIndex: 1,
-    centered: true,
+export const Centered = {
+    args: { centered: true },
 };
-const IconTemplate = ({ activeindex = 0, centered = 'false' }) => {
-    const wrapper = document.createElement('div');
-    const tabs = document.createElement('mc-tabs');
-    tabs.setAttribute('activeindex', String(activeindex));
-    tabs.setAttribute('centered', centered || '');
-    for (let i = 0; i < 4; i++) {
-        const tab = document.createElement('mc-tab');
-        tab.setAttribute('slot', 'tab');
-        tab.setAttribute('index', String(i));
-        tab.setAttribute('tag', 'button');
-        tab.setAttribute('hasiconslot', 'true');
-        if (i === 3)
-            tab.setAttribute('disabled', 'true');
-        if (i === activeindex)
-            tab.setAttribute('selected', 'true');
-        const icon = document.createElement('chevron-right-32');
-        icon.setAttribute('slot', 'icon');
-        icon.setAttribute('style', 'height: 100%');
-        tab.appendChild(icon);
-        const label = document.createElement('span');
-        label.innerText = `Tab ${i + 1}`;
-        tab.appendChild(icon);
-        tab.appendChild(label);
-        tab.addEventListener('click', () => {
-            tabs.setAttribute('activeindex', String(i));
-            const allTabs = tabs.querySelectorAll('mc-tab');
-            allTabs.forEach((el, idx) => {
-                if (i === idx) {
-                    el.setAttribute('selected', 'true');
-                }
-                else {
-                    el.removeAttribute('selected');
-                }
-            });
-        });
-        tabs.appendChild(tab);
-    }
-    wrapper.appendChild(tabs);
-    return wrapper;
+export const NoDivider = {
+    args: { divider: false },
 };
-export const WithIcons = IconTemplate.bind({});
-WithIcons.args = {
-    activeIndex: 0,
-    centered: false,
+export const Disabled = {
+    args: {
+        tab: `
+      <m-tab slot="tab" selected="true">label</m-tab>
+      <m-tab slot="tab">label</m-tab>
+      <m-tab slot="tab" disabled="true">label</m-tab>
+      <m-tab slot="tab" disabled="true">label</m-tab>
+    `,
+    },
 };

package/dist/components/tabs/Tabs.svelte

@@ -1,16 +1,36 @@
-<svelte:options customElement={{ tag: 'mc-tabs' }} />
+<svelte:options customElement={{ tag: 'm-tabs' }} />
 
 <script lang="ts">
-  let { activeindex, centered } = $props();
+  /**
+   * 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.
+   *
+   * @slot tab - use this slot to insert `m-tab` components.
+   */
+  interface Props {
+    /**
+     * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
+     */
+    description?: string;
+    /**
+     * If `true`, the divider will appear.
+     */
+    divider?: boolean;
+    /**
+     * If `true`, the tabs of the component will be centered.
+     */
+    centered?: boolean;
+  }
 
-  let active = $state(activeindex ?? 0);
+  let { description, divider = true, centered }: Props = $props();
 </script>
 
-<nav class="mc-tabs" class:mc-tabs--centered={centered}>
-  <ul class="mc-tabs__list" role="tablist" aria-label="Tabs default">
-    <slot name="tab" {active} />
+<nav class={['mc-tabs', centered && 'mc-tabs--centered']}>
+  <ul class="mc-tabs__list" role="tablist" aria-label={description}>
+    <slot name="tab" />
   </ul>
-  <div class="mc-divider-horizontal"></div>
+  {#if divider}
+    <div class="mc-divider-horizontal"></div>
+  {/if}
 </nav>
 
 <style>/**

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

@@ -1,3 +1,22 @@
+/**
+ * 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.
+ *
+ * @slot tab - use this slot to insert `m-tab` components.
+ */
+interface Props {
+    /**
+     * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
+     */
+    description?: string;
+    /**
+     * If `true`, the divider will appear.
+     */
+    divider?: boolean;
+    /**
+     * If `true`, the tabs of the component will be centered.
+     */
+    centered?: boolean;
+}
 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> & {
         $$bindings?: Bindings;
@@ -11,15 +30,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Tabs: $$__sveltets_2_IsomorphicComponent<{
-    activeindex: any;
-    centered: any;
-}, {
+declare const Tabs: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {
-    tab: {
-        active: any;
-    };
+    tab: {};
 }, {}, "">;
 type Tabs = InstanceType<typeof Tabs>;
 export default Tabs;

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":"AAsBA,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;iBAjCgD,GAAG;cAAY,GAAG;;;;;;;UAiCmB,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;AAsBH,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/tags/README.md

@@ -0,0 +1,9 @@
+# `mc-tag`
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `label*` |  | `string` |   |
+| `size` |  | `'s'` `'m'` `'l'` | `m` |
+

package/dist/components/tags/Tag.js

@@ -1,4 +1,4 @@
-import{c as m,p as f,a as b,b as c,f as h,D as p,t as w,h as x,i as j,j as i,d,r as n,g as k}from"../../custom-element.js";import{b as _}from"../../attributes.js";var E=h('<span><span class="mc-tag__label svelte-ajo7cu"> </span></span>');const C={hash:"svelte-ajo7cu",code:`/**
+import{c as m,p as f,a as b,b as c,f as h,z as p,t as w,i as x,j,k as i,d,r as n,h as k}from"../../custom-element.js";import{b as _}from"../../attributes.js";var E=h('<span><span class="mc-tag__label svelte-ajo7cu"> </span></span>');const C={hash:"svelte-ajo7cu",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-tag.svelte-ajo7cu {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-s, 1px) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-ajo7cu {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-ajo7cu {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-ajo7cu, .mc-tag.svelte-ajo7cu: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-ajo7cu {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-ajo7cu:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-ajo7cu: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-ajo7cu {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-ajo7cu:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-ajo7cu: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-ajo7cu {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-ajo7cu {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-ajo7cu {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(--radius-full, 100%);}.mc-tag-removable__remove.svelte-ajo7cu:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-ajo7cu: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-ajo7cu {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-ajo7cu {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-ajo7cu {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-ajo7cu {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-ajo7cu:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-ajo7cu:has(:where(.svelte-ajo7cu):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-ajo7cu:has(:where(.svelte-ajo7cu):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-ajo7cu:has(:where(.svelte-ajo7cu):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-ajo7cu:has(:where(.svelte-ajo7cu):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-ajo7cu:has(:where(.svelte-ajo7cu):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-ajo7cu:has(:where(.svelte-ajo7cu):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-ajo7cu .mc-tag__label:where(.svelte-ajo7cu) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-ajo7cu {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-ajo7cu {padding-inline-start:0.75rem;}`};function z(l,e){f(e,!0),b(l,C);let r=c(e,"label",7),o=c(e,"size",7,"m"),u=p(e,["$$slots","$$events","$$legacy","$$host","label","size"]);var v={get label(){return r()},set label(t){r(t),i()},get size(){return o()},set size(t="m"){o(t),i()}},a=E();_(a,()=>({class:`mc-tag  ${o()!=="m"?`mc-tag--${o()}`:""}`,...u}),void 0,void 0,"svelte-ajo7cu");var s=d(a),g=d(s,!0);return n(s),n(a),w(()=>k(g,r())),x(l,a),j(v)}customElements.define("mc-tag",m(z,{label:{},size:{}},[],[],!0));
 //# sourceMappingURL=Tag.js.map

package/dist/components/tags/TagContextualised.js

@@ -1,4 +1,4 @@
-import{c as w,p,a as x,b as o,f as k,D as _,d as m,s as C,t as E,h as z,i as N,j as l,r as v,g as y}from"../../custom-element.js";import{b as M}from"../../attributes.js";import{N as P}from"../numberbadge/NumberBadge.js";var B=k('<button><!> <span class="mc-tag__label svelte-ra288w"> </span></button>');const D={hash:"svelte-ra288w",code:`/**
+import{c as w,p,a as x,b as o,f as k,z as _,d as g,s as C,t as E,i as z,j as N,k as l,r as v,h as y}from"../../custom-element.js";import{b as M}from"../../attributes.js";import{N as P}from"../numberbadge/NumberBadge.js";var B=k('<button><!> <span class="mc-tag__label svelte-ra288w"> </span></button>');const H={hash:"svelte-ra288w",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-tag.svelte-ra288w {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-s, 1px) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-ra288w {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-ra288w {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-ra288w, .mc-tag.svelte-ra288w: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-ra288w {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-ra288w:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-ra288w: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-ra288w {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-ra288w:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-ra288w: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-ra288w {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-ra288w {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-ra288w {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(--radius-full, 100%);}.mc-tag-removable__remove.svelte-ra288w:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-ra288w: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-ra288w {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-ra288w {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-ra288w {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-ra288w {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-ra288w:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):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-ra288w:has(:where(.svelte-ra288w):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):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-ra288w:has(:where(.svelte-ra288w):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-ra288w:has(:where(.svelte-ra288w):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-ra288w:has(:where(.svelte-ra288w):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-ra288w .mc-tag__label:where(.svelte-ra288w) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-ra288w {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-ra288w {padding-inline-start:0.75rem;}`};function H(c,r){p(r,!0),x(c,D);let s=o(r,"label",7),i=o(r,"contextualisedNumber",7,"99"),a=o(r,"size",7,"m"),d=o(r,"disabled",7,!1),f=_(r,["$$slots","$$events","$$legacy","$$host","label","contextualisedNumber","size","disabled"]);const u=a()==="l"?"m":"s";var b={get label(){return s()},set label(e){s(e),l()},get contextualisedNumber(){return i()},set contextualisedNumber(e="99"){i(e),l()},get size(){return a()},set size(e="m"){a(e),l()},get disabled(){return d()},set disabled(e=!1){d(e),l()}},t=B();M(t,()=>({class:`mc-tag mc-tag-contextualised ${a()!=="m"?`mc-tag--${a()}`:""}`,disabled:d(),...f}),void 0,void 0,"svelte-ra288w");var n=m(t);P(n,{appearance:"inverse",get label(){return i()},get size(){return u}});var g=C(n,2),h=m(g,!0);return v(g),v(t),E(()=>y(h,s())),z(c,t),N(b)}customElements.define("mc-tag-contextualised",w(H,{label:{},contextualisedNumber:{},size:{},disabled:{}},[],[],!0));
+ */.mc-tag.svelte-ra288w {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-s, 1px) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-ra288w {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-ra288w {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-ra288w, .mc-tag.svelte-ra288w: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-ra288w {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-ra288w:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-ra288w: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-ra288w {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-ra288w:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-ra288w: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-ra288w {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-ra288w {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-ra288w {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(--radius-full, 100%);}.mc-tag-removable__remove.svelte-ra288w:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-ra288w: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-ra288w {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-ra288w {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-ra288w {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-ra288w {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-ra288w:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):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-ra288w:has(:where(.svelte-ra288w):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):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-ra288w:has(:where(.svelte-ra288w):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-ra288w:has(:where(.svelte-ra288w):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-ra288w:has(:where(.svelte-ra288w):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-ra288w .mc-tag__label:where(.svelte-ra288w) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-ra288w {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-ra288w {padding-inline-start:0.75rem;}`};function S(c,r){p(r,!0),x(c,H);let s=o(r,"label",7),i=o(r,"contextualisedNumber",7,"99"),a=o(r,"size",7,"m"),d=o(r,"disabled",7,!1),f=_(r,["$$slots","$$events","$$legacy","$$host","label","contextualisedNumber","size","disabled"]);const u=a()==="l"?"m":"s";var b={get label(){return s()},set label(e){s(e),l()},get contextualisedNumber(){return i()},set contextualisedNumber(e="99"){i(e),l()},get size(){return a()},set size(e="m"){a(e),l()},get disabled(){return d()},set disabled(e=!1){d(e),l()}},t=B();M(t,()=>({class:`mc-tag mc-tag-contextualised ${a()!=="m"?`mc-tag--${a()}`:""}`,disabled:d(),...f}),void 0,void 0,"svelte-ra288w");var n=g(t);P(n,{appearance:"inverse",get label(){return i()},get size(){return u}});var m=C(n,2),h=g(m,!0);return v(m),v(t),E(()=>y(h,s())),z(c,t),N(b)}customElements.define("mc-tag-contextualised",w(S,{label:{},contextualisedNumber:{},size:{},disabled:{}},[],[],!0));
 //# sourceMappingURL=TagContextualised.js.map

package/dist/components/tags/TagContextualised.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagContextualised.js","sources":["../../../src/components/tags/TagContextualised.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag-contextualised' }} />\n\n<script lang=\"ts\">\n  import NumberBadge from '../numberbadge/NumberBadge.svelte';\n\n  interface Props {\n    label: string;\n    contextualisedNumber?: string;\n    size?: 's' | 'm' | 'l' | undefined;\n    disabled?: boolean;\n    [key: string]: any;\n  }\n\n  let {\n    label,\n    contextualisedNumber = '99',\n    size = 'm',\n    disabled = false,\n    ...attrs\n  }: Props = $props();\n\n  const badgeSize = size === 'l' ? 'm' : 's';\n</script>\n\n<button\n  class={`mc-tag mc-tag-contextualised ${size !== 'm' ? `mc-tag--${size}` : ''}`}\n  {disabled}\n  {...attrs}\n>\n  <NumberBadge\n    appearance=\"inverse\"\n    label={contextualisedNumber}\n    size={badgeSize}\n  />\n  <span class=\"mc-tag__label\">{label}</span>\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n</style>\n"],"names":["label","$.prop","$$props","contextualisedNumber","size","disabled","attrs","$.rest_props","badgeSize"],"mappings":";;oiMAAA,oBAcIA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,+BAAuB,IAAI,EAC3BC,eAAO,GAAG,EACVC,mBAAW,EAAK,EACbC,EAAAC,EAAAL,EAAA,6FAGC,MAAAM,EAAYJ,EAAI,IAAK,IAAM,IAAM,4HANd,KAAI,6CACpB,IAAG,qDACC,GAAK,4BAQqB,MAAA,gCAAAA,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,mBAExEE,2FAIKH,EAAoB,qBACrBK,uDAEqBR,EAAK,CAAA,CAAA,aAZpC"}
+{"version":3,"file":"TagContextualised.js","sources":["../../../src/components/tags/TagContextualised.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag-contextualised' }} />\n\n<script lang=\"ts\">\n  import NumberBadge from '../numberbadge/NumberBadge.svelte';\n\n  interface Props {\n    label: string;\n    contextualisedNumber?: string;\n    size?: 's' | 'm' | 'l' | undefined;\n    disabled?: boolean;\n    [key: string]: any;\n  }\n\n  let {\n    label,\n    contextualisedNumber = '99',\n    size = 'm',\n    disabled = false,\n    ...attrs\n  }: Props = $props();\n\n  const badgeSize = size === 'l' ? 'm' : 's';\n</script>\n\n<button\n  class={`mc-tag mc-tag-contextualised ${size !== 'm' ? `mc-tag--${size}` : ''}`}\n  {disabled}\n  {...attrs}\n>\n  <NumberBadge appearance=\"inverse\" label={contextualisedNumber} size={badgeSize} />\n  <span class=\"mc-tag__label\">{label}</span>\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n</style>\n"],"names":["label","$.prop","$$props","contextualisedNumber","size","disabled","attrs","$.rest_props","badgeSize"],"mappings":";;oiMAAA,oBAcIA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,+BAAuB,IAAI,EAC3BC,eAAO,GAAG,EACVC,mBAAW,EAAK,EACbC,EAAAC,EAAAL,EAAA,6FAGC,MAAAM,EAAYJ,EAAI,IAAK,IAAM,IAAM,4HANd,KAAI,6CACpB,IAAG,qDACC,GAAK,4BAQqB,MAAA,gCAAAA,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,mBAExEE,2FAEqCH,EAAoB,qBAAQK,uDACxCR,EAAK,CAAA,CAAA,aARpC"}

package/dist/components/tags/TagContextualised.svelte

@@ -27,11 +27,7 @@
   {disabled}
   {...attrs}
 >
-  <NumberBadge
-    appearance="inverse"
-    label={contextualisedNumber}
-    size={badgeSize}
-  />
+  <NumberBadge appearance="inverse" label={contextualisedNumber} size={badgeSize} />
   <span class="mc-tag__label">{label}</span>
 </button>
 

package/dist/components/tags/TagInteractive.js

@@ -1,4 +1,4 @@
-import{c as b,p as u,a as h,b as s,f as p,D as y,t as w,h as x,i as k,j as i,d as n,r as v,g as _}from"../../custom-element.js";import{b as E}from"../../attributes.js";var C=p('<button><span class="mc-tag__label svelte-re604y"> </span></button>');const z={hash:"svelte-re604y",code:`/**
+import{c as b,p as u,a as h,b as s,f as p,z as y,t as w,i as x,j as k,k as i,d as n,r as v,h as _}from"../../custom-element.js";import{b as E}from"../../attributes.js";var C=p('<button><span class="mc-tag__label svelte-re604y"> </span></button>');const z={hash:"svelte-re604y",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-tag.svelte-re604y {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-s, 1px) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-re604y {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-re604y {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-re604y, .mc-tag.svelte-re604y: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-re604y {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-re604y:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-re604y: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-re604y {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-re604y:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-re604y: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-re604y {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-re604y {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-re604y {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(--radius-full, 100%);}.mc-tag-removable__remove.svelte-re604y:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-re604y: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-re604y {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-re604y {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-re604y {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-re604y {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-re604y:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-re604y:has(:where(.svelte-re604y):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-re604y:has(:where(.svelte-re604y):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-re604y:has(:where(.svelte-re604y):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-re604y:has(:where(.svelte-re604y):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-re604y:has(:where(.svelte-re604y):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-re604y:has(:where(.svelte-re604y):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-re604y .mc-tag__label:where(.svelte-re604y) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-re604y {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-re604y {padding-inline-start:0.75rem;}`};function M(d,e){u(e,!0),h(d,z);let o=s(e,"label",7),l=s(e,"disabled",7,!1),t=s(e,"size",7,"m"),g=y(e,["$$slots","$$events","$$legacy","$$host","label","disabled","size"]);var m={get label(){return o()},set label(r){o(r),i()},get disabled(){return l()},set disabled(r=!1){l(r),i()},get size(){return t()},set size(r="m"){t(r),i()}},a=C();E(a,()=>({class:`mc-tag mc-tag-interactive ${t()!=="m"?`mc-tag--${t()}`:""}`,disabled:l(),...g}),void 0,void 0,"svelte-re604y");var c=n(a),f=n(c,!0);return v(c),v(a),w(()=>_(f,o())),x(d,a),k(m)}customElements.define("mc-tag-interactive",b(M,{label:{},disabled:{},size:{}},[],[],!0));
 //# sourceMappingURL=TagInteractive.js.map

package/dist/components/tags/TagRemovable.js

@@ -1,4 +1,4 @@
-import{c as j,p as _,b as l,q as R,t as k,h as C,i as E,j as s,e as B,u as D,n as F,a as H,f as q,D as S,s as p,d as g,r as m,g as w}from"../../custom-element.js";import{i as T}from"../../if.js";import{s as x,a as A,b as G}from"../../attributes.js";import{C as I}from"../../CrossCircleFilled24.js";import"../../legacy.js";var J=R('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06"></path></svg>');function z(n,e){_(e,!1);let c=l(e,"id",12,void 0),i=l(e,"style",12,void 0),d=l(e,"className",12,void 0),o=l(e,"fill",12,void 0),v=l(e,"size",12,"1.25rem");var f={get id(){return c()},set id(a){c(a),s()},get style(){return i()},set style(a){i(a),s()},get className(){return d()},set className(a){d(a),s()},get fill(){return o()},set fill(a){o(a),s()},get size(){return v()},set size(a){v(a),s()}},r=J();return k(()=>{x(r,"id",c()),A(r,i()),B(r,0,D(d())),x(r,"fill",o())}),C(n,r),E(f)}customElements.define("cross-circle-filled-20",j(z,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function K(n,e){dispatchEvent(new CustomEvent("remove-tag",{detail:e()}))}var O=q('<span><span class="mc-tag__label svelte-14ecgj3"> </span> <button class="mc-tag-removable__remove svelte-14ecgj3" type="button"><span class="mc-tag-removable__icon svelte-14ecgj3"><!></span> <span class="mc-tag-removable__text svelte-14ecgj3"> </span></button></span>');const Q={hash:"svelte-14ecgj3",code:`/**
+import{c as j,p as _,b as l,A as R,t as k,i as C,j as E,k as s,e as B,g as F,v as H,a as A,f as D,z as S,s as p,d as g,r as m,h as w}from"../../custom-element.js";import{i as T}from"../../if.js";import{s as x,a as q,b as G}from"../../attributes.js";import{C as I}from"../../CrossCircleFilled24.js";import"../../legacy.js";var J=R('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06"></path></svg>');function z(n,e){_(e,!1);let c=l(e,"id",12,void 0),i=l(e,"style",12,void 0),d=l(e,"className",12,void 0),o=l(e,"fill",12,void 0),v=l(e,"size",12,"1.25rem");var f={get id(){return c()},set id(a){c(a),s()},get style(){return i()},set style(a){i(a),s()},get className(){return d()},set className(a){d(a),s()},get fill(){return o()},set fill(a){o(a),s()},get size(){return v()},set size(a){v(a),s()}},r=J();return k(()=>{x(r,"id",c()),q(r,i()),B(r,0,F(d())),x(r,"fill",o())}),C(n,r),E(f)}customElements.define("cross-circle-filled-20",j(z,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function K(n,e){dispatchEvent(new CustomEvent("remove-tag",{detail:e()}))}var O=D('<span><span class="mc-tag__label svelte-14ecgj3"> </span> <button class="mc-tag-removable__remove svelte-14ecgj3" type="button"><span class="mc-tag-removable__icon svelte-14ecgj3"><!></span> <span class="mc-tag-removable__text svelte-14ecgj3"> </span></button></span>');const Q={hash:"svelte-14ecgj3",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-tag.svelte-14ecgj3 {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-s, 1px) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-14ecgj3 {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-14ecgj3 {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-14ecgj3, .mc-tag.svelte-14ecgj3: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-14ecgj3 {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-14ecgj3:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-14ecgj3: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-14ecgj3 {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-14ecgj3:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-14ecgj3: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-14ecgj3 {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-14ecgj3 {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-14ecgj3 {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(--radius-full, 100%);}.mc-tag-removable__remove.svelte-14ecgj3:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-14ecgj3: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-14ecgj3 {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-14ecgj3 {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-14ecgj3 {padding:0 0 0 0.5rem;}.mc-tag-removable.mc-tag--s.svelte-14ecgj3 .mc-tag-removable__remove:where(.svelte-14ecgj3) {width:1.5rem;height:1.5rem;padding:0.125rem;}.mc-tag-removable.mc-tag--s.svelte-14ecgj3 .mc-tag-removable__icon:where(.svelte-14ecgj3) {width:1.25rem;height:1.25rem;}.mc-tag-removable.mc-tag--l.svelte-14ecgj3 .mc-tag-removable__remove:where(.svelte-14ecgj3) {width:2.5rem;height:2.5rem;}.mc-tag-removable.mc-tag--l.svelte-14ecgj3 .mc-tag-removable__icon:where(.svelte-14ecgj3) {width:2rem;height:2rem;}.mc-tag-selectable.svelte-14ecgj3 {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-14ecgj3:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-14ecgj3:has(:where(.svelte-14ecgj3):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-14ecgj3:has(:where(.svelte-14ecgj3):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-14ecgj3:has(:where(.svelte-14ecgj3):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-14ecgj3:has(:where(.svelte-14ecgj3):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-14ecgj3:has(:where(.svelte-14ecgj3):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-14ecgj3:has(:where(.svelte-14ecgj3):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-14ecgj3 .mc-tag__label:where(.svelte-14ecgj3) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-14ecgj3 {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-14ecgj3 {padding-inline-start:0.75rem;}`};function U(n,e){_(e,!0),H(n,Q);let c=l(e,"id",7),i=l(e,"label",7),d=l(e,"removableLabel",7,"Remove"),o=l(e,"size",7,"m"),v=S(e,["$$slots","$$events","$$legacy","$$host","id","label","removableLabel","size"]);var f={get id(){return c()},set id(t){c(t),s()},get label(){return i()},set label(t){i(t),s()},get removableLabel(){return d()},set removableLabel(t="Remove"){d(t),s()},get size(){return o()},set size(t="m"){o(t),s()}},r=O();G(r,()=>({class:`mc-tag mc-tag-removable  ${o()!=="m"?`mc-tag--${o()}`:""}`,id:c(),...v}),void 0,void 0,"svelte-14ecgj3");var a=g(r),y=g(a,!0);m(a);var b=p(a,2);b.__click=[K,c];var u=g(b),L=g(u);{var M=t=>{z(t,{"aria-hidden":"true"})},N=t=>{I(t,{"aria-hidden":"true"})};T(L,t=>{o()==="s"?t(M):t(N,!1)})}m(u);var h=p(u,2),P=g(h,!0);return m(h),m(b),m(r),k(()=>{w(y,i()),w(P,d())}),C(n,r),E(f)}F(["click"]);customElements.define("mc-tag-removable",j(U,{id:{},label:{},removableLabel:{},size:{}},[],[],!0));
+ */.mc-tag.svelte-14ecgj3 {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-s, 1px) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-14ecgj3 {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-14ecgj3 {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-14ecgj3, .mc-tag.svelte-14ecgj3: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-14ecgj3 {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-14ecgj3:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-14ecgj3: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-14ecgj3 {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-14ecgj3:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-14ecgj3: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-14ecgj3 {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-14ecgj3 {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-14ecgj3 {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(--radius-full, 100%);}.mc-tag-removable__remove.svelte-14ecgj3:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-14ecgj3: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-14ecgj3 {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-14ecgj3 {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-14ecgj3 {padding:0 0 0 0.5rem;}.mc-tag-removable.mc-tag--s.svelte-14ecgj3 .mc-tag-removable__remove:where(.svelte-14ecgj3) {width:1.5rem;height:1.5rem;padding:0.125rem;}.mc-tag-removable.mc-tag--s.svelte-14ecgj3 .mc-tag-removable__icon:where(.svelte-14ecgj3) {width:1.25rem;height:1.25rem;}.mc-tag-removable.mc-tag--l.svelte-14ecgj3 .mc-tag-removable__remove:where(.svelte-14ecgj3) {width:2.5rem;height:2.5rem;}.mc-tag-removable.mc-tag--l.svelte-14ecgj3 .mc-tag-removable__icon:where(.svelte-14ecgj3) {width:2rem;height:2rem;}.mc-tag-selectable.svelte-14ecgj3 {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-14ecgj3:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-14ecgj3:has(:where(.svelte-14ecgj3):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-14ecgj3:has(:where(.svelte-14ecgj3):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-14ecgj3:has(:where(.svelte-14ecgj3):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-14ecgj3:has(:where(.svelte-14ecgj3):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-14ecgj3:has(:where(.svelte-14ecgj3):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-14ecgj3:has(:where(.svelte-14ecgj3):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-14ecgj3 .mc-tag__label:where(.svelte-14ecgj3) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-14ecgj3 {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-14ecgj3 {padding-inline-start:0.75rem;}`};function U(n,e){_(e,!0),A(n,Q);let c=l(e,"id",7),i=l(e,"label",7),d=l(e,"removableLabel",7,"Remove"),o=l(e,"size",7,"m"),v=S(e,["$$slots","$$events","$$legacy","$$host","id","label","removableLabel","size"]);var f={get id(){return c()},set id(t){c(t),s()},get label(){return i()},set label(t){i(t),s()},get removableLabel(){return d()},set removableLabel(t="Remove"){d(t),s()},get size(){return o()},set size(t="m"){o(t),s()}},r=O();G(r,()=>({class:`mc-tag mc-tag-removable  ${o()!=="m"?`mc-tag--${o()}`:""}`,id:c(),...v}),void 0,void 0,"svelte-14ecgj3");var a=g(r),y=g(a,!0);m(a);var b=p(a,2);b.__click=[K,c];var u=g(b),L=g(u);{var M=t=>{z(t,{"aria-hidden":"true"})},N=t=>{I(t,{"aria-hidden":"true"})};T(L,t=>{o()==="s"?t(M):t(N,!1)})}m(u);var h=p(u,2),P=g(h,!0);return m(h),m(b),m(r),k(()=>{w(y,i()),w(P,d())}),C(n,r),E(f)}H(["click"]);customElements.define("mc-tag-removable",j(U,{id:{},label:{},removableLabel:{},size:{}},[],[],!0));
 //# sourceMappingURL=TagRemovable.js.map

package/dist/components/tags/TagRemovable.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagRemovable.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/CrossCircleFilled20/CrossCircleFilled20.svelte","../../../src/components/tags/TagRemovable.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'cross-circle-filled-20', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.25rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" width=\"20px\" height=\"20px\"><path fill-rule=\"evenodd\" d=\"M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06\"/></svg>","<svelte:options customElement={{ tag: 'mc-tag-removable' }} />\n\n<script lang=\"ts\">\n  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';\n  import CrossCircleFilled20 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled20/CrossCircleFilled20.svelte';\n\n  interface Props {\n    id: string;\n    label: string;\n    removableLabel?: string;\n    size?: 's' | 'm' | 'l';\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    label,\n    removableLabel = 'Remove',\n    size = 'm',\n    ...attrs\n  }: Props = $props();\n\n  function handleRemove() {\n    dispatchEvent(new CustomEvent('remove-tag', { detail: id }));\n  }\n</script>\n\n<span\n  class={`mc-tag mc-tag-removable  ${size !== 'm' ? `mc-tag--${size}` : ''}`}\n  {id}\n  {...attrs}\n>\n  <span class=\"mc-tag__label\">{label}</span>\n  <button class=\"mc-tag-removable__remove\" type=\"button\" onclick={handleRemove}>\n    <span class=\"mc-tag-removable__icon\">\n      {#if size === 's'}\n        <CrossCircleFilled20 aria-hidden=\"true\" />\n      {:else}\n        <CrossCircleFilled24 aria-hidden=\"true\" />\n      {/if}\n    </span>\n    <span class=\"mc-tag-removable__text\">{removableLabel}</span>\n  </button>\n</span>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n  @use '@mozaic-ds/styles/components/tag/c.tag-removable';\n</style>\n"],"names":["id","style","className","fill","size","handleRemove","_","$.prop","$$props","label","removableLabel","attrs","$.rest_props","$$render","consequent","alternate"],"mappings":"2uBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,SAAS,gRAGDJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,6GCeW,SAAAE,EAAYC,EAAAN,EAAG,CACtB,kBAAkB,YAAY,aAAY,CAAI,OAAQA,EAAE,CAAA,CAAA,CAAA,CAC1D;;wjNAxBF,oBAeIA,EAAEO,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,yBAAiB,QAAQ,EACzBN,eAAO,GAAG,EACPO,EAAAC,EAAAJ,EAAA,sOAFc,SAAQ,6CAClB,IAAG,4BAUuB,MAAA,4BAAAJ,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,aAEpEO,sFAG4DN,EAAYL,CAAA,uGAEnEI,EAAI,IAAK,IAAGS,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,iEAHQN,GAAK,MASMC,GAAc,eAhBxD","x_google_ignoreList":[0]}
+{"version":3,"file":"TagRemovable.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/CrossCircleFilled20/CrossCircleFilled20.svelte","../../../src/components/tags/TagRemovable.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'cross-circle-filled-20', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.25rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" width=\"20px\" height=\"20px\"><path fill-rule=\"evenodd\" d=\"M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06\"/></svg>","<svelte:options customElement={{ tag: 'mc-tag-removable' }} />\n\n<script lang=\"ts\">\n  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';\n  import CrossCircleFilled20 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled20/CrossCircleFilled20.svelte';\n\n  interface Props {\n    id: string;\n    label: string;\n    removableLabel?: string;\n    size?: 's' | 'm' | 'l';\n    [key: string]: any;\n  }\n\n  let { id, label, removableLabel = 'Remove', size = 'm', ...attrs }: Props = $props();\n\n  function handleRemove() {\n    dispatchEvent(new CustomEvent('remove-tag', { detail: id }));\n  }\n</script>\n\n<span class={`mc-tag mc-tag-removable  ${size !== 'm' ? `mc-tag--${size}` : ''}`} {id} {...attrs}>\n  <span class=\"mc-tag__label\">{label}</span>\n  <button class=\"mc-tag-removable__remove\" type=\"button\" onclick={handleRemove}>\n    <span class=\"mc-tag-removable__icon\">\n      {#if size === 's'}\n        <CrossCircleFilled20 aria-hidden=\"true\" />\n      {:else}\n        <CrossCircleFilled24 aria-hidden=\"true\" />\n      {/if}\n    </span>\n    <span class=\"mc-tag-removable__text\">{removableLabel}</span>\n  </button>\n</span>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n  @use '@mozaic-ds/styles/components/tag/c.tag-removable';\n</style>\n"],"names":["id","style","className","fill","size","handleRemove","_","$.prop","$$props","label","removableLabel","attrs","$.rest_props","$$render","consequent","alternate"],"mappings":"2uBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,SAAS,gRAGDJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,6GCSW,SAAAE,EAAYC,EAAAN,EAAG,CACtB,kBAAkB,YAAY,aAAY,CAAI,OAAQA,EAAE,CAAA,CAAA,CAAA,CAC1D;;wjNAlBF,oBAcQA,EAAEO,EAAAC,EAAA,KAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,yBAAiB,QAAQ,EAAEN,eAAO,GAAG,EAAKO,EAAKC,EAAAJ,EAAA,sOAA9B,SAAQ,6CAAS,IAAG,4BAOf,MAAA,4BAAAJ,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,aAAaO,sFAEzBN,EAAYL,CAAA,uGAEnEI,EAAI,IAAK,IAAGS,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,iEAHQN,GAAK,MASMC,GAAc,eAZxD","x_google_ignoreList":[0]}

package/dist/components/tags/TagRemovable.svelte

@@ -12,24 +12,14 @@
     [key: string]: any;
   }
 
-  let {
-    id,
-    label,
-    removableLabel = 'Remove',
-    size = 'm',
-    ...attrs
-  }: Props = $props();
+  let { id, label, removableLabel = 'Remove', size = 'm', ...attrs }: Props = $props();
 
   function handleRemove() {
     dispatchEvent(new CustomEvent('remove-tag', { detail: id }));
   }
 </script>
 
-<span
-  class={`mc-tag mc-tag-removable  ${size !== 'm' ? `mc-tag--${size}` : ''}`}
-  {id}
-  {...attrs}
->
+<span class={`mc-tag mc-tag-removable  ${size !== 'm' ? `mc-tag--${size}` : ''}`} {id} {...attrs}>
   <span class="mc-tag__label">{label}</span>
   <button class="mc-tag-removable__remove" type="button" onclick={handleRemove}>
     <span class="mc-tag-removable__icon">