@mozaic-ds/web-components 1.4.0 → 1.5.1

package/dist/components/textinput/Textinput.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textinput.js","sources":["../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-textinput',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n      isclearable: { reflect: true, type: 'Boolean', attribute: 'isclearable' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.\n   *\n   * @slot icon - Use this slot to insert an icon in the input.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * A unique identifier for the input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the input field.\n     */\n    value?: string | number;\n    /**\n     * A placeholder text to show in the input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * Defines the type of input.\n     */\n    inputtype?: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';\n    /**\n     * If `true`, applies an invalid state to the input.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the input.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the input has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n    /**\n     * Use this snippet to insert an icon in the input.\n     */\n    icon?: Snippet;\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(),\n    placeholder,\n    inputtype = 'text',\n    isinvalid,\n    disabled,\n    readonly,\n    size = 'm',\n    clearlabel = 'Clear content',\n    isclearable,\n    icon,\n    ...attrs\n  }: Props = $props();\n\n  const resetValue = () => (value = '');\n</script>\n\n<div class={['mc-text-input', `mc-text-input--${size}`, isinvalid && 'is-invalid']}>\n  <span class=\"mc-text-input__icon\">\n    {#if icon}\n      {@render icon()}\n    {:else}\n      <slot name=\"icon\" />\n    {/if}\n  </span>\n\n  <input\n    bind:value\n    class=\"mc-text-input__control\"\n    aria-invalid={isinvalid}\n    {name}\n    {id}\n    type={inputtype}\n    {placeholder}\n    {disabled}\n    {readonly}\n    {...attrs}\n  />\n\n  {#if isclearable && value}\n    <div class=\"mc-controls-options\">\n      <button type=\"button\" class=\"mc-controls-options__button\" onclick={resetValue}>\n        <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n          <path\n            fill-rule=\"evenodd\"\n            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\"\n          />\n        </svg>\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/controls-options';\n  @use '@mozaic-ds/styles/components/text-input';\n\n  .mc-text-input__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","inputtype","isinvalid","disabled","readonly","size","clearlabel","isclearable","icon","attrs","$.rest_props","resetValue","div","root","span","$$render","consequent","alternate","input","$.sibling","node_3","div_1","root_3","button","span_1","consequent_1","$.bind_value","customElementForwardEvents"],"mappings":";;;;;;;mHAaA,qBA6DIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,EAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,oBAAY,MAAM,EAClBC,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAQR,EAAAC,EAAA,WAAA,CAAA,EACRQ,eAAO,GAAG,EACVC,qBAAa,eAAe,EAC5BC,EAAWX,EAAAC,EAAA,cAAA,CAAA,EACXW,EAAIZ,EAAAC,EAAA,OAAA,CAAA,EACDY,EAAAC,EAAAb,EAAA,2KAGCc,EAAU,IAAUZ,EAAQ,EAAE,qPAXtB,OAAM,8MAIX,IAAG,yDACG,gBAAe,oHAS/Ba,EAAGC,GAAA,EACDC,IADFF,CAAG,MACDE,CAAI,kCAEQN,CAAI,uEADVA,EAAI,EAAAO,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,MADVH,CAAI,EAQJ,IAAAI,EAAAC,EARAL,EAAI,CAAA,IAQJI,sDAGehB,EAAS,OACtBJ,EAAI,KACJH,EAAE,OACGM,EAAS,cACdD,EAAW,WACXG,EAAQ,WACRC,EAAQ,KACLK,6CAVL,IAAAW,EAAAD,EAAAD,EAAA,CAAA,iBAcEG,EAAGC,GAAA,EACDC,IADFF,CAAG,EACDE,EAAyD,QAASZ,EAOhE,IAAAa,MAPFD,CAAM,EAAA,CAAA,MAOJC,EAAI,EAAA,IAAJA,CAAI,IAPND,CAAM,IADRF,CAAG,YAQ0Cf,EAAU,CAAA,CAAA,MARvDe,CAAG,WADDd,EAAW,GAAIR,KAAKgB,EAAAU,CAAA,aAtB1Bb,CAAG,UAAHA,OAAY,kCAAmCP,EAAI,CAAA,GAAIH,KAAa,iCASlEwB,EAAAR,EAAAnB,CAAA,MATFa,CAAG,MAFI,yYAjFIe"}
+{"version":3,"file":"Textinput.js","sources":["../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-textinput',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n      isclearable: { reflect: true, type: 'Boolean', attribute: 'isclearable' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.\n   *\n   * @slot icon - Use this slot to insert an icon in the input.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * A unique identifier for the input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the input field.\n     */\n    value?: string | number;\n    /**\n     * A placeholder text to show in the input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * Defines the type of input.\n     */\n    inputtype?: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';\n    /**\n     * If `true`, applies an invalid state to the input.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the input.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the input has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(),\n    placeholder,\n    inputtype = 'text',\n    isinvalid,\n    disabled,\n    readonly,\n    size = 'm',\n    clearlabel = 'Clear content',\n    isclearable,\n    ...attrs\n  }: Props = $props();\n\n  const resetValue = () => (value = '');\n</script>\n\n<div class={['mc-text-input', `mc-text-input--${size}`, isinvalid && 'is-invalid']}>\n  <span class=\"mc-text-input__icon\">\n    <slot name=\"icon\" />\n  </span>\n\n  <input\n    bind:value\n    class=\"mc-text-input__control\"\n    aria-invalid={isinvalid}\n    {name}\n    {id}\n    type={inputtype}\n    {placeholder}\n    {disabled}\n    {readonly}\n    {...attrs}\n  />\n\n  {#if isclearable && value}\n    <div class=\"mc-controls-options\">\n      <button type=\"button\" class=\"mc-controls-options__button\" onclick={resetValue}>\n        <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n          <path\n            fill-rule=\"evenodd\"\n            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\"\n          />\n        </svg>\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/controls-options';\n  @use '@mozaic-ds/styles/components/text-input';\n\n  .mc-text-input__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","inputtype","isinvalid","disabled","readonly","size","clearlabel","isclearable","attrs","$.rest_props","resetValue","div","root","span","input","$.sibling","node_1","div_1","root_1","button","span_1","$$render","consequent","$.bind_value","customElementForwardEvents"],"mappings":";;;;;;;kHAaA,oBAwDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,EAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,oBAAY,MAAM,EAClBC,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAQR,EAAAC,EAAA,WAAA,CAAA,EACRQ,eAAO,GAAG,EACVC,qBAAa,eAAe,EAC5BC,EAAWX,EAAAC,EAAA,cAAA,CAAA,EACRW,EAAAC,EAAAZ,EAAA,oKAGCa,EAAU,IAAUX,EAAQ,EAAE,qPAVtB,OAAM,8MAIX,IAAG,yDACG,gBAAe,uEAQ/BY,EAAGC,EAAA,EACDC,IADFF,CAAG,MACDE,CAAI,0BAAJA,CAAI,EAIJ,IAAAC,EAAAC,EAJAF,EAAI,CAAA,IAIJC,sDAGeZ,EAAS,OACtBJ,EAAI,KACJH,EAAE,OACGM,EAAS,cACdD,EAAW,WACXG,EAAQ,WACRC,EAAQ,KACLI,6CAVL,IAAAQ,EAAAD,EAAAD,EAAA,CAAA,iBAcEG,EAAGC,EAAA,EACDC,IADFF,CAAG,EACDE,EAAyD,QAAST,EAOhE,IAAAU,MAPFD,CAAM,EAAA,CAAA,MAOJC,EAAI,EAAA,IAAJA,CAAI,IAPND,CAAM,IADRF,CAAG,YAQ0CX,EAAU,CAAA,CAAA,MARvDW,CAAG,WADDV,EAAW,GAAIR,KAAKsB,EAAAC,CAAA,aAlB1BX,CAAG,UAAHA,OAAY,kCAAmCN,EAAI,CAAA,GAAIH,KAAa,iCAKlEqB,EAAAT,EAAAf,CAAA,MALFY,CAAG,MAFI,gYA3EIa"}

package/dist/components/textinput/Textinput.spec.js

@@ -83,10 +83,7 @@ describe('m-textinput component', () => {
     it('hides icon slot container if slot is empty', () => {
         const { container } = render(Textinput, { props: baseProps });
         const iconContainer = container.querySelector('.mc-text-input__icon');
-        expect(iconContainer.innerHTML.trim()).toBe('<!----><!---->');
-        // jsdom bug with double comment
-        // we remove the content because we are sure to only have double comment
-        iconContainer.innerHTML = '';
+        expect(iconContainer.innerHTML.trim()).toBe('<!---->');
         expect(getComputedStyle(iconContainer).display).toBe('none');
     });
 });

package/dist/components/textinput/Textinput.stories.d.ts

@@ -1,13 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '../field/Field.svelte';
 import './Textinput.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
 export declare const WithValue: Story;
 export declare const Default: Story;
+export declare const Standalone: Story;
 export declare const Small: Story;
 export declare const MinValue: Story;
 export declare const Disabled: Story;
 export declare const ReadOnly: Story;
+export declare const Valid: Story;
 export declare const Invalid: Story;
+export declare const Loading: Story;
 //# sourceMappingURL=Textinput.stories.d.ts.map

package/dist/components/textinput/Textinput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textinput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,oBAAoB,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAmDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
+{"version":3,"file":"Textinput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,uBAAuB,CAAC;AAC/B,OAAO,oBAAoB,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAiDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAanB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAuBnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAuBrB,CAAC"}

package/dist/components/textinput/Textinput.stories.js

@@ -1,10 +1,12 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
+import '../field/Field.svelte';
 import './Textinput.svelte';
 const meta = {
     title: 'Form Elements/TextInput',
     component: 'm-textinput',
+    subcomponents: { Field: 'm-field' },
     argTypes: {
         inputtype: {
             control: 'radio',
@@ -25,31 +27,28 @@ const meta = {
         const onFocus = action('focus');
         const onBlur = action('blur');
         return html `
-      <m-textinput
+      <m-field
         id=${ifDefined(args.id)}
-        name=${ifDefined(args.name)}
-        value=${ifDefined(args.value)}
-        placeholder=${ifDefined(args.placeholder)}
-        inputtype=${ifDefined(args.inputtype)}
-        ?isinvalid=${args.isinvalid}
-        ?disabled=${args.disabled}
-        size=${ifDefined(args.size)}
-        ?readonly=${args.readonly}
-        ?isclearable=${args.isclearable}
-        clearlabel=${ifDefined(args.clearlabel)}
-        @input=${(event) => {
-            onInput(event);
-        }}
-        @change=${(event) => {
-            onChange(event);
-        }}
-        @focus=${(event) => {
-            onFocus(event);
-        }}
-        @blur=${(event) => {
-            onBlur(event);
-        }}
-      ></m-textinput>
+        label="Label"
+      >
+        <m-textinput
+          id=${ifDefined(args.id)}
+          name=${ifDefined(args.name)}
+          value=${ifDefined(args.value)}
+          placeholder=${ifDefined(args.placeholder)}
+          inputtype=${ifDefined(args.inputtype)}
+          ?isinvalid=${args.isinvalid}
+          ?disabled=${args.disabled}
+          size=${ifDefined(args.size)}
+          ?readonly=${args.readonly}
+          ?isclearable=${args.isclearable}
+          clearlabel=${ifDefined(args.clearlabel)}
+          @input=${(event) => onInput(event)}
+          @change=${(event) => onChange(event)}
+          @focus=${(event) => onFocus(event)}
+          @blur=${(event) => onBlur(event)}
+        ></m-textinput>
+      </m-field>
     `;
     },
 };
@@ -60,13 +59,58 @@ export const WithValue = {
         value: 'Value of the input component',
         isclearable: true,
     },
+    parameters: {
+        docs: {
+            description: {
+                story: 'TextInput initialized with a predefined value. The clear action is enabled, allowing users to quickly remove the current content and return the field to an empty state.',
+            },
+        },
+    },
+};
+export const Default = {
+    render: () => html `
+    <m-field
+      id="labelId"
+      label="Label"
+    >
+      <m-textinput
+        id="labelId"
+        placeholder="Placeholder"
+      ></m-textinput>
+    </m-field>
+  `,
+    parameters: {
+        docs: {
+            description: {
+                story: 'Default TextInput wrapped in a Field component with a label. This configuration represents the recommended usage for accessible forms requiring consistent layout, labeling, and user guidance.',
+            },
+        },
+    },
+};
+export const Standalone = {
+    render: () => html `
+    <m-textinput id="textInputId" placeholder="Placeholder"></m-textinput>
+  `,
+    parameters: {
+        docs: {
+            description: {
+                story: 'TextInput rendered without a Field wrapper. Use this approach only when labels, help text, validation feedback, or accessibility relationships are managed outside the component.',
+            },
+        },
+    },
 };
-export const Default = {};
 export const Small = {
     args: {
         id: 'smallId',
         size: 's',
     },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Small-sized variant of the TextInput component. Intended for dense interfaces, compact layouts, or secondary forms where visual hierarchy and space efficiency are important.',
+            },
+        },
+    },
 };
 export const MinValue = {
     args: {
@@ -75,22 +119,107 @@ export const MinValue = {
         value: '4',
         min: '3',
     },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Number TextInput configured with a minimum allowed value. This example demonstrates basic numeric constraints and helps prevent users from entering values below the defined threshold.',
+            },
+        },
+    },
 };
 export const Disabled = {
     args: {
         id: 'disableId',
         disabled: true,
     },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Disabled TextInput state where user interaction is prevented. The field cannot receive focus or input and clearly communicates its inactive status through visual styling.',
+            },
+        },
+    },
 };
 export const ReadOnly = {
     args: {
         id: 'readonlyId',
         readonly: true,
     },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Read-only TextInput displaying a value that can be selected and copied but not edited. Useful for presenting system-generated or immutable information.',
+            },
+        },
+    },
+};
+export const Valid = {
+    render: () => html `
+    <m-field
+      id="inputvalidId"
+      label="Label"
+      requirementtext="required"
+      isvalid
+      message="Validation message (Be concise and use comprehensive words)"
+    >
+      <m-textinput
+        id="inputvalidId"
+        placeholder="Placeholder"
+      ></m-textinput>
+    </m-field>
+  `,
+    parameters: {
+        docs: {
+            description: {
+                story: 'TextInput wrapped in a Field component displaying a valid state. A validation message confirms successful input and provides clear, positive feedback to the user.',
+            },
+        },
+    },
 };
 export const Invalid = {
-    args: {
-        id: 'invalidId',
-        isinvalid: true,
+    render: () => html `
+    <m-field
+      id="invalidId"
+      label="Label"
+      requirementtext="required"
+      isinvalid
+      message="Error message (Be concise and use comprehensive words)"
+    >
+      <m-textinput
+        id="invalidId"
+        placeholder="Placeholder"
+        isinvalid
+      ></m-textinput>
+    </m-field>
+  `,
+    parameters: {
+        docs: {
+            description: {
+                story: 'TextInput wrapped in a Field component displaying an invalid state. Error messaging and visual cues clearly indicate validation issues and guide users toward correction.',
+            },
+        },
+    },
+};
+export const Loading = {
+    render: () => html `
+    <m-field
+      id="loadingId"
+      label="Label"
+      requirementtext="required"
+      isloading
+      message="Loading message (Be concise and use comprehensive words)"
+    >
+      <m-textinput
+        id="loadingId"
+        placeholder="Placeholder"
+      ></m-textinput>
+    </m-field>
+  `,
+    parameters: {
+        docs: {
+            description: {
+                story: 'TextInput wrapped in a Field component in a loading state. Use this state when asynchronous validation or background processing is occurring.',
+            },
+        },
     },
 };

package/dist/components/textinput/Textinput.svelte

@@ -12,7 +12,6 @@
 />
 
 <script lang="ts">
-  import type { Snippet } from 'svelte';
   import { customElementForwardEvents } from '../../utils';
   /**
    * A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.
@@ -65,10 +64,6 @@
      * The label text for the clear button.
      */
     clearlabel?: string;
-    /**
-     * Use this snippet to insert an icon in the input.
-     */
-    icon?: Snippet;
   }
 
   let {
@@ -83,7 +78,6 @@
     size = 'm',
     clearlabel = 'Clear content',
     isclearable,
-    icon,
     ...attrs
   }: Props = $props();
 
@@ -92,11 +86,7 @@
 
 <div class={['mc-text-input', `mc-text-input--${size}`, isinvalid && 'is-invalid']}>
   <span class="mc-text-input__icon">
-    {#if icon}
-      {@render icon()}
-    {:else}
-      <slot name="icon" />
-    {/if}
+    <slot name="icon" />
   </span>
 
   <input

package/dist/components/textinput/Textinput.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { Snippet } from 'svelte';
 /**
  * A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.
  *
@@ -50,10 +49,6 @@ interface Props {
      * The label text for the clear button.
      */
     clearlabel?: string;
-    /**
-     * Use this snippet to insert an icon in the input.
-     */
-    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/textinput/Textinput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textinput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IACjF;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AA+DH,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,SAAS;;;;eAAqF,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Textinput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.svelte.ts"],"names":[],"mappings":"AAKE;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IACjF;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAyDH,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,SAAS;;;;eAAqF,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}

package/dist/components/toaster/README.md

@@ -14,7 +14,6 @@ A toaster is a temporary notification that appears briefly on the screen to prov
 | `progress` | If `true`, display the progress bar of the duration. | `boolean` |   |
 | `timeout` | Duration of the toaster | `number` |   |
 | `onUpdateOpen` | Callback fired when the toaster open state changes. | `(open: boolean) => void` |   |
-| `action` | Use this snippet to insert a button or a link in the toaster | `Snippet` |   |
 
 ## Slots
 

package/dist/components/toaster/Toaster.js

@@ -1,6 +1,6 @@
-import{u as Y,c as Z,p as $,a as oo,b as a,t as j,f as b,g as to,h as F,i as ro,d as s,s as p,j as n,v as M,q as v,r as l,k as S,l as W,e as eo,w as ao,x as no}from"../../custom-element.js";import{o as co,a as so}from"../../index-client.js";import{i as D}from"../../if.js";import{s as lo}from"../../slot.js";import{s as uo}from"../../snippet.js";import{c as io}from"../../svelte-component.js";import{a as bo,b as vo,s as go}from"../../attributes.js";import{b as mo}from"../../this.js";import{C as fo,I as ho,a as po,W as ko,b as _o}from"../../Condition20.js";var wo=F('<button class="mc-toaster__close mc-button mc-button--icon-button mc-button--inverse mc-button--s mc-button--ghost svelte-h1mguv" type="button" aria-label="Close"><!></button>'),xo=F('<div class="mc-toaster__indicator mc-linear-progressbar-buffer mc-linear-progressbar-buffer--m svelte-h1mguv"><div class="mc-linear-progressbar-buffer__indicator svelte-h1mguv" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div></div>'),yo=F('<section><span class="mc-toaster__icon svelte-h1mguv"><!></span> <div class="mc-toaster__content svelte-h1mguv"><p class="mc-toaster__message svelte-h1mguv"> </p> <div class="mc-toaster__action svelte-h1mguv"><!></div></div> <!> <!></section>');const Co={hash:"svelte-h1mguv",code:`/**
+import{o as K,c as L,p as P,a as Q,b as e,t as E,f as O,g as R,h as U,i as Y,s as h,j as a,q as T,n as b,d as c,r as s,e as Z,u as $,v as oo}from"../../custom-element.js";import{o as to,a as ro}from"../../index-client.js";import{i as j}from"../../if.js";import{s as eo}from"../../slot.js";import{c as ao}from"../../svelte-component.js";import{a as no,b as co,s as so}from"../../attributes.js";import{b as lo}from"../../this.js";import{C as uo,I as io,a as bo,W as vo,b as go}from"../../Condition20.js";import"../../branches.js";var mo=U('<button class="mc-toaster__close mc-button mc-button--icon-button mc-button--inverse mc-button--s mc-button--ghost svelte-h1mguv" type="button" aria-label="Close"><!></button>'),ho=U('<div class="mc-toaster__indicator mc-linear-progressbar-buffer mc-linear-progressbar-buffer--m svelte-h1mguv"><div class="mc-linear-progressbar-buffer__indicator svelte-h1mguv" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div></div>'),fo=U('<section><span class="mc-toaster__icon svelte-h1mguv"><!></span> <div class="mc-toaster__content svelte-h1mguv"><p class="mc-toaster__message svelte-h1mguv"> </p> <div class="mc-toaster__action svelte-h1mguv"><!></div></div> <!> <!></section>');const po={hash:"svelte-h1mguv",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-button.svelte-h1mguv {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-h1mguv:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-h1mguv:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-h1mguv {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-h1mguv {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-h1mguv {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-h1mguv {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-h1mguv: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-button--s.svelte-h1mguv {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-h1mguv {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-h1mguv {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-h1mguv {padding:0.25rem;}.mc-button--outlined.svelte-h1mguv {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-h1mguv:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-h1mguv:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-h1mguv {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-h1mguv:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-h1mguv:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-h1mguv {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-h1mguv:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-h1mguv:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-h1mguv {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-h1mguv:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-h1mguv:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-h1mguv {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-h1mguv:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-h1mguv:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-h1mguv {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-h1mguv {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-h1mguv:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-h1mguv:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-h1mguv {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-h1mguv:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-h1mguv:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-h1mguv {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-h1mguv:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-h1mguv:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-h1mguv {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-h1mguv:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-h1mguv:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-h1mguv {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-h1mguv:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-h1mguv:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-h1mguv {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-h1mguv:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-h1mguv:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-h1mguv {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-h1mguv:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-h1mguv:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-h1mguv {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-h1mguv:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-h1mguv:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-linear-progressbar-buffer.svelte-h1mguv {--progress-value: 40;background-color:var(--progressbar-color-background, #c9d0de);height:0.25rem;position:relative;min-width:6rem;border-radius:var(--border-radius-l, 1rem);}.mc-linear-progressbar-buffer__indicator.svelte-h1mguv {background-color:var(--progressbar-color-indicator, #464e63);height:100%;transition:width 0.4s ease;overflow:hidden;border-radius:var(--border-radius-l, 1rem);box-sizing:border-box;width:calc(var(--progress-value) * 1%);}.mc-linear-progressbar-buffer--s.svelte-h1mguv {height:0.125rem;}.mc-linear-progressbar-buffer--l.svelte-h1mguv {height:0.5rem;}.mc-toaster.svelte-h1mguv {border-radius:var(--border-radius-m, 0.5rem);background:var(--toaster-color-background-info, #002a41);display:flex;flex-flow:row wrap;align-items:flex-start;min-height:3.5rem;min-width:18rem;position:absolute;top:1.5rem;right:1.5rem;margin-left:1.5rem;box-sizing:border-box;color:var(--toaster-color-text, #ffffff);z-index:var(--toaster-z-index, 4);opacity:0;visibility:hidden;transform:translateX(25%);transition:visibility 0s linear 0.4s, transform 0.4s ease-in-out, opacity 0.4s ease-in-out;}.mc-toaster.is-open.svelte-h1mguv {opacity:1;visibility:visible;transform:translateX(0);}.mc-toaster__icon.svelte-h1mguv {width:2rem;height:2rem;margin:0.75rem;fill:var(--toaster-color-icon-info, #3facd7);}.mc-toaster__content.svelte-h1mguv {flex:1 1 0;flex-direction:column;align-self:stretch;display:flex;align-items:flex-start;gap:1rem;padding:0.75rem 1rem 0.75rem 0;}
+ */.mc-button.svelte-h1mguv {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-h1mguv:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-h1mguv:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-h1mguv {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-h1mguv {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-h1mguv {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-h1mguv {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-h1mguv: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-button--s.svelte-h1mguv {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-h1mguv {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-h1mguv {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-h1mguv {padding:0.25rem;}.mc-button--outlined.svelte-h1mguv {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-h1mguv:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-h1mguv:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-h1mguv {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-h1mguv:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-h1mguv:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-h1mguv {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-h1mguv:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-h1mguv:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-h1mguv {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-h1mguv:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-h1mguv:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-h1mguv {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-h1mguv:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-h1mguv:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-h1mguv {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--loading.svelte-h1mguv {pointer-events:none;}.mc-button--outlined.mc-button--standard.svelte-h1mguv {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-h1mguv:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-h1mguv:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-h1mguv {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-h1mguv:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-h1mguv:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-h1mguv {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-h1mguv:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-h1mguv:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-h1mguv {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-h1mguv:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-h1mguv:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-h1mguv {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-h1mguv:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-h1mguv:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-h1mguv {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-h1mguv:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-h1mguv:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-h1mguv {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-h1mguv:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-h1mguv:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-h1mguv {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-h1mguv:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-h1mguv:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-linear-progressbar-buffer.svelte-h1mguv {--progress-value: 40;background-color:var(--progressbar-color-background, #c9d0de);height:0.25rem;position:relative;min-width:6rem;border-radius:var(--border-radius-l, 1rem);}.mc-linear-progressbar-buffer__indicator.svelte-h1mguv {background-color:var(--progressbar-color-indicator, #464e63);height:100%;transition:width 0.4s ease;overflow:hidden;border-radius:var(--border-radius-l, 1rem);box-sizing:border-box;width:calc(var(--progress-value) * 1%);}.mc-linear-progressbar-buffer--s.svelte-h1mguv {height:0.125rem;}.mc-linear-progressbar-buffer--l.svelte-h1mguv {height:0.5rem;}.mc-toaster.svelte-h1mguv {border-radius:var(--border-radius-m, 0.5rem);background:var(--toaster-color-background-info, #002a41);display:flex;flex-flow:row wrap;align-items:flex-start;min-height:3.5rem;min-width:18rem;position:absolute;top:1.5rem;right:1.5rem;margin-left:1.5rem;box-sizing:border-box;color:var(--toaster-color-text, #ffffff);z-index:var(--toaster-z-index, 4);opacity:0;visibility:hidden;transform:translateX(25%);transition:visibility 0s linear 0.4s, transform 0.4s ease-in-out, opacity 0.4s ease-in-out;}.mc-toaster.is-open.svelte-h1mguv {opacity:1;visibility:visible;transform:translateX(0);}.mc-toaster__icon.svelte-h1mguv {width:2rem;height:2rem;margin:0.75rem;fill:var(--toaster-color-icon-info, #3facd7);}.mc-toaster__content.svelte-h1mguv {flex:1 1 0;flex-direction:column;align-self:stretch;display:flex;align-items:flex-start;gap:1rem;padding:0.75rem 1rem 0.75rem 0;}
 @media (width >= 680px) {.mc-toaster__content.svelte-h1mguv {flex-direction:row;align-items:center;}
-}.mc-toaster__message.svelte-h1mguv {flex:1 1 0;margin:0;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);}.mc-toaster--information.svelte-h1mguv {background:var(--toaster-color-background-info, #002a41);}.mc-toaster--information.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-info, #3facd7);}.mc-toaster--information.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);}.mc-toaster--success.svelte-h1mguv {background:var(--toaster-color-background-success, #023618);}.mc-toaster--success.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-success, #78be20);}.mc-toaster--success.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-success, #78be20);}.mc-toaster--warning.svelte-h1mguv {background:var(--toaster-color-background-warning, #360e00);}.mc-toaster--warning.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-warning, #ef934a);}.mc-toaster--warning.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-warning, #ef934a);}.mc-toaster--error.svelte-h1mguv {background:var(--toaster-color-background-error, #2d0000);}.mc-toaster--error.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-error, #ef5f5c);}.mc-toaster--error.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-error, #ef5f5c);}.mc-toaster--bottom.svelte-h1mguv {top:inherit;bottom:1.5rem;right:1.5rem;}.mc-toaster--top-center.svelte-h1mguv {top:1.5rem;right:50%;transform:translateX(50%) !important;}.mc-toaster--bottom-center.svelte-h1mguv {top:inherit;bottom:1.5rem;right:50%;transform:translateX(50%) !important;}.mc-toaster__indicator.svelte-h1mguv {width:100%;margin:0.5rem;--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);--progressbar-color-background: var(--color-background-primary, #ffffff);}.mc-toaster__close.svelte-h1mguv {margin:0.25rem;}.mc-toaster__action.svelte-h1mguv:empty {display:none;}`};function zo(X,r){$(r,!0),oo(X,Co);let c=a(r,"open",7),k=a(r,"position",7,"top"),_=a(r,"description",7),g=a(r,"status",7,"info"),w=a(r,"closable",7,!0),m=a(r,"progress",7),d=a(r,"timeout",7),x=a(r,"onUpdateOpen",7),f=a(r,"action",7),q=ro(r,["$$slots","$$events","$$legacy","$$host","open","position","description","status","closable","progress","timeout","onUpdateOpen","action"]),y;const B=[{status:"info",component:ho},{status:"success",component:po},{status:"warning",component:ko},{status:"error",component:_o}];function N(o){return B.find(t=>t.status===o)||B[0]}const V=no(()=>N(g()));let u=ao(0),h=null,C=null;const z=()=>{c(!1),x()?.(c());const o=new CustomEvent("update:open",{detail:c(),bubbles:!0,composed:!0});y.dispatchEvent(o)};co(()=>{if(d())if(m()){const e=100/(d()/100);h=setInterval(()=>{M(u,v(u)+e),v(u)>=100&&(M(u,100),clearInterval(h),z())},100)}else C=setTimeout(()=>{z()},d())}),so(()=>{h&&clearInterval(h),C&&clearTimeout(C)});var A={get open(){return c()},set open(o){c(o),n()},get position(){return k()},set position(o="top"){k(o),n()},get description(){return _()},set description(o){_(o),n()},get status(){return g()},set status(o="info"){g(o),n()},get closable(){return w()},set closable(o=!0){w(o),n()},get progress(){return m()},set progress(o){m(o),n()},get timeout(){return d()},set timeout(o){d(o),n()},get onUpdateOpen(){return x()},set onUpdateOpen(o){x(o),n()},get action(){return f()},set action(o){f(o),n()}},i=yo();bo(i,()=>({class:["mc-toaster",c()&&"is-open",`mc-toaster--${g()}`,`mc-toaster--${k()}`],role:"status",tabindex:"-1","aria-hidden":!c(),...q}),void 0,void 0,void 0,"svelte-h1mguv");var I=s(i),G=s(I);io(G,()=>v(V).component,(o,t)=>{t(o,{})}),l(I);var O=p(I,2),U=s(O),H=s(U,!0);l(U);var E=p(U,2),J=s(E);{var K=o=>{var t=S(),e=W(t);uo(e,f),b(o,t)},L=o=>{var t=S(),e=W(t);lo(e,r,"action",{},null),b(o,t)};D(J,o=>{f()?o(K):o(L,!1)})}l(E),l(O);var T=p(O,2);{var P=o=>{var t=wo();t.__click=z;var e=s(t);fo(e,{className:"mc-button__icon"}),l(t),b(o,t)};D(T,o=>{w()&&o(P)})}var Q=p(T,2);{var R=o=>{var t=xo(),e=s(t);l(t),j(()=>{vo(e,`--progress-value: ${v(u)};`),go(e,"aria-valuenow",v(u))}),b(o,t)};D(Q,o=>{m()&&o(R)})}return l(i),mo(i,o=>y=o,()=>y),j(()=>eo(H,_())),b(X,i),to(A)}Y(["click"]);customElements.define("m-toaster",Z(zo,{open:{attribute:"open",reflect:!0,type:"Boolean"},closable:{attribute:"closable",reflect:!0,type:"Boolean"},progress:{attribute:"progress",reflect:!0,type:"Boolean"},position:{},description:{},status:{},timeout:{},onUpdateOpen:{},action:{}},["action"],[],!0));
+}.mc-toaster__message.svelte-h1mguv {flex:1 1 0;margin:0;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);}.mc-toaster--information.svelte-h1mguv {background:var(--toaster-color-background-info, #002a41);}.mc-toaster--information.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-info, #3facd7);}.mc-toaster--information.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);}.mc-toaster--success.svelte-h1mguv {background:var(--toaster-color-background-success, #023618);}.mc-toaster--success.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-success, #78be20);}.mc-toaster--success.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-success, #78be20);}.mc-toaster--warning.svelte-h1mguv {background:var(--toaster-color-background-warning, #360e00);}.mc-toaster--warning.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-warning, #ef934a);}.mc-toaster--warning.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-warning, #ef934a);}.mc-toaster--error.svelte-h1mguv {background:var(--toaster-color-background-error, #2d0000);}.mc-toaster--error.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-error, #ef5f5c);}.mc-toaster--error.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-error, #ef5f5c);}.mc-toaster--bottom.svelte-h1mguv {top:inherit;bottom:1.5rem;right:1.5rem;}.mc-toaster--top-center.svelte-h1mguv {top:1.5rem;right:50%;transform:translateX(50%) !important;}.mc-toaster--bottom-center.svelte-h1mguv {top:inherit;bottom:1.5rem;right:50%;transform:translateX(50%) !important;}.mc-toaster__indicator.svelte-h1mguv {width:100%;margin:0.5rem;--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);--progressbar-color-background: var(--color-background-primary, #ffffff);}.mc-toaster__close.svelte-h1mguv {margin:0.25rem;}.mc-toaster__action.svelte-h1mguv:empty {display:none;}`};function ko(D,r){P(r,!0),Q(D,po);let n=e(r,"open",7),f=e(r,"position",7,"top"),p=e(r,"description",7),v=e(r,"status",7,"info"),k=e(r,"closable",7,!0),g=e(r,"progress",7),d=e(r,"timeout",7),_=e(r,"onUpdateOpen",7),M=Y(r,["$$slots","$$events","$$legacy","$$host","open","position","description","status","closable","progress","timeout","onUpdateOpen"]),w;const F=[{status:"info",component:io},{status:"success",component:bo},{status:"warning",component:vo},{status:"error",component:go}];function S(o){return F.find(t=>t.status===o)||F[0]}const W=oo(()=>S(v()));let l=$(0),m=null,x=null;const y=()=>{n(!1),_()?.(n());const o=new CustomEvent("update:open",{detail:n(),bubbles:!0,composed:!0});w.dispatchEvent(o)};to(()=>{if(d())if(g()){const u=100/(d()/100);m=setInterval(()=>{T(l,b(l)+u),b(l)>=100&&(T(l,100),clearInterval(m),y())},100)}else x=setTimeout(()=>{y()},d())}),ro(()=>{m&&clearInterval(m),x&&clearTimeout(x)});var q={get open(){return n()},set open(o){n(o),a()},get position(){return f()},set position(o="top"){f(o),a()},get description(){return p()},set description(o){p(o),a()},get status(){return v()},set status(o="info"){v(o),a()},get closable(){return k()},set closable(o=!0){k(o),a()},get progress(){return g()},set progress(o){g(o),a()},get timeout(){return d()},set timeout(o){d(o),a()},get onUpdateOpen(){return _()},set onUpdateOpen(o){_(o),a()}},i=fo();no(i,()=>({class:["mc-toaster",n()&&"is-open",`mc-toaster--${v()}`,`mc-toaster--${f()}`],role:"status",tabindex:"-1","aria-hidden":!n(),...M}),void 0,void 0,void 0,"svelte-h1mguv");var C=c(i),N=c(C);ao(N,()=>b(W).component,(o,t)=>{t(o,{})}),s(C);var z=h(C,2),I=c(z),V=c(I,!0);s(I);var X=h(I,2),A=c(X);eo(A,r,"action",{},null),s(X),s(z);var B=h(z,2);{var G=o=>{var t=mo();t.__click=y;var u=c(t);uo(u,{className:"mc-button__icon",slot:"icon"}),s(t),O(o,t)};j(B,o=>{k()&&o(G)})}var H=h(B,2);{var J=o=>{var t=ho(),u=c(t);s(t),E(()=>{co(u,`--progress-value: ${b(l)};`),so(u,"aria-valuenow",b(l))}),O(o,t)};j(H,o=>{g()&&o(J)})}return s(i),lo(i,o=>w=o,()=>w),E(()=>Z(V,p())),O(D,i),R(q)}K(["click"]);customElements.define("m-toaster",L(ko,{open:{attribute:"open",reflect:!0,type:"Boolean"},closable:{attribute:"closable",reflect:!0,type:"Boolean"},progress:{attribute:"progress",reflect:!0,type:"Boolean"},position:{},description:{},status:{},timeout:{},onUpdateOpen:{}},["action"],[],!0));
 //# sourceMappingURL=Toaster.js.map

package/dist/components/toaster/Toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.js","sources":["../../../src/components/toaster/Toaster.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-toaster',\n    props: {\n      open: { reflect: true, type: 'Boolean', attribute: 'open' },\n      closable: { reflect: true, type: 'Boolean', attribute: 'closable' },\n      progress: { reflect: true, type: 'Boolean', attribute: 'progress' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { onMount, onDestroy, type Snippet } from 'svelte';\n  import {\n    InfoCircleFilled32,\n    WarningCircleFilled32,\n    CrossCircleFilled32,\n    CheckCircleFilled32,\n    Cross20,\n  } from '@mozaic-ds/icons-svelte';\n  /**\n   * A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.\n   *\n   * @slot action - Use this slot to insert a button or a link in the toaster\n   * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * If `true`, display the Toaster.\n     */\n    open?: boolean;\n    /**\n     * Position of the toaster.\n     */\n    position?: 'top' | 'bottom' | 'top-center' | 'bottom-center';\n    /**\n     * Description of the toaster.\n     */\n    description: string;\n    /**\n     * Allows to define the toaster style.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error';\n    /**\n     * If `true`, display the close button.\n     */\n    closable?: boolean;\n    /**\n     * If `true`, display the progress bar of the duration.\n     */\n    progress?: boolean;\n    /**\n     * Duration of the toaster\n     */\n    timeout?: number;\n    /**\n     * Callback fired when the toaster open state changes.\n     */\n    onUpdateOpen?: (open: boolean) => void;\n    /**\n     * Use this snippet to insert a button or a link in the toaster\n     */\n    action?: Snippet;\n  }\n\n  let {\n    open,\n    position = 'top',\n    description,\n    status = 'info',\n    closable = true,\n    progress,\n    timeout,\n    onUpdateOpen,\n    action,\n    ...attrs\n  }: Props = $props();\n  let element: HTMLElement;\n\n  const iconMap = [\n    { status: 'info', component: InfoCircleFilled32 },\n    { status: 'success', component: CheckCircleFilled32 },\n    { status: 'warning', component: WarningCircleFilled32 },\n    { status: 'error', component: CrossCircleFilled32 },\n  ];\n\n  function getSelected(status: string) {\n    return iconMap.find((icon) => icon.status === status) || iconMap[0];\n  }\n\n  const selected = $derived(getSelected(status));\n\n  let progressValue = $state(0);\n  let intervalId: ReturnType<typeof setInterval> | null = null;\n  let timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n  const onClose = () => {\n    open = false;\n\n    onUpdateOpen?.(open);\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n\n  onMount(() => {\n    if (timeout) {\n      if (progress) {\n        const intervalDuration = 100;\n        const steps = timeout / intervalDuration;\n        const increment = 100 / steps;\n\n        intervalId = setInterval(() => {\n          progressValue += increment;\n          if (progressValue >= 100) {\n            progressValue = 100;\n            clearInterval(intervalId!);\n            onClose();\n          }\n        }, intervalDuration);\n      } else {\n        timeoutId = setTimeout(() => {\n          onClose();\n        }, timeout);\n      }\n    }\n  });\n\n  onDestroy(() => {\n    if (intervalId) clearInterval(intervalId);\n    if (timeoutId) clearTimeout(timeoutId);\n  });\n</script>\n\n<section\n  class={['mc-toaster', open && 'is-open', `mc-toaster--${status}`, `mc-toaster--${position}`]}\n  role=\"status\"\n  tabindex=\"-1\"\n  aria-hidden={!open}\n  bind:this={element}\n  {...attrs}\n>\n  <span class=\"mc-toaster__icon\">\n    <selected.component />\n  </span>\n\n  <div class=\"mc-toaster__content\">\n    <p class=\"mc-toaster__message\">{description}</p>\n\n    <div class=\"mc-toaster__action\">\n      {#if action}\n        {@render action()}\n      {:else}\n        <slot name=\"action\" />\n      {/if}\n    </div>\n  </div>\n\n  {#if closable}\n    <button\n      class=\"mc-toaster__close mc-button mc-button--icon-button mc-button--inverse mc-button--s mc-button--ghost\"\n      type=\"button\"\n      aria-label=\"Close\"\n      onclick={onClose}\n    >\n      <Cross20 className=\"mc-button__icon\" />\n    </button>\n  {/if}\n\n  {#if progress}\n    <div class=\"mc-toaster__indicator mc-linear-progressbar-buffer mc-linear-progressbar-buffer--m\">\n      <div\n        class=\"mc-linear-progressbar-buffer__indicator\"\n        role=\"progressbar\"\n        style={`--progress-value: ${progressValue};`}\n        aria-valuenow={progressValue}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n      ></div>\n    </div>\n  {/if}\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n  @use '@mozaic-ds/styles/components/linear-progressbar-buffer';\n  @use '@mozaic-ds/styles/components/toaster';\n\n  .mc-toaster__action:empty {\n    display: none;\n  }\n</style>\n"],"names":["open","$.prop","$$props","position","description","status","closable","progress","timeout","onUpdateOpen","action","attrs","$.rest_props","element","iconMap","InfoCircleFilled32","CheckCircleFilled32","WarningCircleFilled32","CrossCircleFilled32","getSelected","icon","selected","$.derived","progressValue","$.state","intervalId","timeoutId","onClose","event","onMount","increment","$.get","$.set","onDestroy","section","root","span","$.child","selected_component","$$anchor","div","p","div_1","$$render","consequent","alternate","button","root_3","node_5","Cross20","$.reset","$.append","consequent_1","div_2","root_4","div_3","$.set_style","$.set_attribute","consequent_2","$$value"],"mappings":";;;;itEAWA,sBAwDIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,mBAAW,KAAK,EAChBC,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,iBAAS,MAAM,EACfC,mBAAW,EAAI,EACfC,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAOP,EAAAC,EAAA,UAAA,CAAA,EACPO,EAAYR,EAAAC,EAAA,eAAA,CAAA,EACZQ,EAAMT,EAAAC,EAAA,SAAA,CAAA,EACHS,EAAAC,GAAAV,EAAA,6IAEDW,QAEEC,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,EAAkB,EAC7C,CAAA,OAAQ,UAAW,UAAWC,EAAmB,EACjD,CAAA,OAAQ,UAAW,UAAWC,EAAqB,EACnD,CAAA,OAAQ,QAAS,UAAWC,EAAmB,YAG1CC,EAAYd,EAAgB,CAC5B,OAAAS,EAAQ,KAAMM,GAASA,EAAK,SAAWf,CAAM,GAAKS,EAAQ,CAAC,CACpE,OAEMO,EAAQC,GAAA,IAAYH,EAAYd,EAAM,CAAA,CAAA,MAExCkB,EAAgBC,GAAO,CAAC,EACxBC,EAAoD,KACpDC,EAAkD,KAEhD,MAAAC,EAAO,IAAS,CACpB3B,EAAO,EAAK,EAEZS,EAAY,IAAGT,GAAI,EAEb,MAAA4B,EAAK,IAAO,YAAY,eAC5B,OAAQ5B,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBa,EAAQ,cAAce,CAAK,CAC7B,EAEAC,GAAO,IAAO,CACR,GAAArB,EAAO,EACL,GAAAD,EAAQ,EAAE,OAGNuB,EAAY,KADJtB,EAAO,EAAG,KAGxBiB,EAAa,YAAkB,IAAA,GAC7BF,EAAaQ,EAAbR,CAAa,EAAIO,CAAS,IACtBP,CAAa,GAAI,MACnBS,EAAAT,EAAgB,GAAG,EACnB,cAAcE,CAAU,EACxBE,EAAO,EAEX,EAAG,IACL,MACED,EAAY,WAAiB,IAAA,CAC3BC,EAAO,CACT,EAAGnB,EAAO,EAGhB,CAAC,EAEDyB,GAAS,IAAO,CACVR,GAAY,cAAcA,CAAU,EACpCC,GAAW,aAAaA,CAAS,CACvC,CAAC,gGApEY,MAAK,4GAEP,OAAM,qDACJ,GAAI,kOAoElBQ,EAAAC,GAAA,KAAAD,eACS,aAAclC,EAAI,GAAI,yBAA0BK,EAAM,CAAA,kBAAmBF,GAAQ,+CAG3EH,EAAI,KAEdW,0CAEH,IAAAyB,EAAIC,EARNH,CAAA,MAQEE,CAAI,kCACFE,EAAkBC,EAAA,EAAA,MADpBH,CAAI,EAIJ,IAAAI,IAJAJ,EAAI,CAAA,EAKFK,IADFD,CAAG,MACDC,EAAC,EAAA,IAADA,CAAC,EAED,IAAAC,IAFAD,EAAC,CAAA,MAEDC,CAAG,mCAEShC,CAAM,0EADZA,EAAM,EAAAiC,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,MADZH,CAAG,IAHLF,CAAG,UAAHA,EAAG,CAAA,aAaD,IAAAM,EAAAC,GAAA,EAAAD,EAIC,QAASnB,EAJV,IAAAqB,EAAAX,EAAAS,CAAA,EAMEG,GAAOD,EAAA,CAAA,UAAA,iBAAA,CAAA,EANTE,EAAAJ,CAAA,EAAAK,EAAAZ,EAAAO,CAAA,WADExC,EAAQ,GAAAqC,EAAAS,CAAA,gCAYVC,EAAGC,GAAA,EACDC,EAAAlB,EADFgB,CAAG,IAAHA,CAAG,SACDG,GAAAD,EAAA,qBAAAxB,EAG6BR,CAAa,CAAA,GAAA,EAH1CkC,GAAAF,EAAA,gBAAAxB,EAIgBR,CAAa,CAAA,QAL/B8B,CAAG,WADD9C,EAAQ,GAAAoC,EAAAe,CAAA,IAnCdR,OAAAA,EAAAhB,CAAA,KAAAA,EAAAyB,GAKY9C,QAAAA,CAAO,aAQgBT,EAAW,CAAA,CAAA,EAb9C+C,EAAAZ,EAAAL,CAAA,OAFO"}
+{"version":3,"file":"Toaster.js","sources":["../../../src/components/toaster/Toaster.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-toaster',\n    props: {\n      open: { reflect: true, type: 'Boolean', attribute: 'open' },\n      closable: { reflect: true, type: 'Boolean', attribute: 'closable' },\n      progress: { reflect: true, type: 'Boolean', attribute: 'progress' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { onMount, onDestroy } from 'svelte';\n  import {\n    InfoCircleFilled32,\n    WarningCircleFilled32,\n    CrossCircleFilled32,\n    CheckCircleFilled32,\n    Cross20,\n  } from '@mozaic-ds/icons-svelte';\n  /**\n   * A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.\n   *\n   * @slot action - Use this slot to insert a button or a link in the toaster\n   * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * If `true`, display the Toaster.\n     */\n    open?: boolean;\n    /**\n     * Position of the toaster.\n     */\n    position?: 'top' | 'bottom' | 'top-center' | 'bottom-center';\n    /**\n     * Description of the toaster.\n     */\n    description: string;\n    /**\n     * Allows to define the toaster style.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error';\n    /**\n     * If `true`, display the close button.\n     */\n    closable?: boolean;\n    /**\n     * If `true`, display the progress bar of the duration.\n     */\n    progress?: boolean;\n    /**\n     * Duration of the toaster\n     */\n    timeout?: number;\n    /**\n     * Callback fired when the toaster open state changes.\n     */\n    onUpdateOpen?: (open: boolean) => void;\n  }\n\n  let {\n    open,\n    position = 'top',\n    description,\n    status = 'info',\n    closable = true,\n    progress,\n    timeout,\n    onUpdateOpen,\n    ...attrs\n  }: Props = $props();\n  let element: HTMLElement;\n\n  const iconMap = [\n    { status: 'info', component: InfoCircleFilled32 },\n    { status: 'success', component: CheckCircleFilled32 },\n    { status: 'warning', component: WarningCircleFilled32 },\n    { status: 'error', component: CrossCircleFilled32 },\n  ];\n\n  function getSelected(status: string) {\n    return iconMap.find((icon) => icon.status === status) || iconMap[0];\n  }\n\n  const selected = $derived(getSelected(status));\n\n  let progressValue = $state(0);\n  let intervalId: ReturnType<typeof setInterval> | null = null;\n  let timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n  const onClose = () => {\n    open = false;\n\n    onUpdateOpen?.(open);\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n\n  onMount(() => {\n    if (timeout) {\n      if (progress) {\n        const intervalDuration = 100;\n        const steps = timeout / intervalDuration;\n        const increment = 100 / steps;\n\n        intervalId = setInterval(() => {\n          progressValue += increment;\n          if (progressValue >= 100) {\n            progressValue = 100;\n            clearInterval(intervalId!);\n            onClose();\n          }\n        }, intervalDuration);\n      } else {\n        timeoutId = setTimeout(() => {\n          onClose();\n        }, timeout);\n      }\n    }\n  });\n\n  onDestroy(() => {\n    if (intervalId) clearInterval(intervalId);\n    if (timeoutId) clearTimeout(timeoutId);\n  });\n</script>\n\n<section\n  class={['mc-toaster', open && 'is-open', `mc-toaster--${status}`, `mc-toaster--${position}`]}\n  role=\"status\"\n  tabindex=\"-1\"\n  aria-hidden={!open}\n  bind:this={element}\n  {...attrs}\n>\n  <span class=\"mc-toaster__icon\">\n    <selected.component />\n  </span>\n\n  <div class=\"mc-toaster__content\">\n    <p class=\"mc-toaster__message\">{description}</p>\n\n    <div class=\"mc-toaster__action\">\n      <slot name=\"action\" />\n    </div>\n  </div>\n\n  {#if closable}\n    <button\n      class=\"mc-toaster__close mc-button mc-button--icon-button mc-button--inverse mc-button--s mc-button--ghost\"\n      type=\"button\"\n      aria-label=\"Close\"\n      onclick={onClose}\n    >\n      <Cross20 className=\"mc-button__icon\" slot=\"icon\" />\n    </button>\n  {/if}\n\n  {#if progress}\n    <div class=\"mc-toaster__indicator mc-linear-progressbar-buffer mc-linear-progressbar-buffer--m\">\n      <div\n        class=\"mc-linear-progressbar-buffer__indicator\"\n        role=\"progressbar\"\n        style={`--progress-value: ${progressValue};`}\n        aria-valuenow={progressValue}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n      ></div>\n    </div>\n  {/if}\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n  @use '@mozaic-ds/styles/components/linear-progressbar-buffer';\n  @use '@mozaic-ds/styles/components/toaster';\n\n  .mc-toaster__action:empty {\n    display: none;\n  }\n</style>\n"],"names":["open","$.prop","$$props","position","description","status","closable","progress","timeout","onUpdateOpen","attrs","$.rest_props","element","iconMap","InfoCircleFilled32","CheckCircleFilled32","WarningCircleFilled32","CrossCircleFilled32","getSelected","icon","selected","$.derived","progressValue","$.state","intervalId","timeoutId","onClose","event","onMount","increment","$.get","$.set","onDestroy","section","root","span","$.child","selected_component","$$anchor","div","p","div_1","button","root_1","node_3","Cross20","$.reset","$.append","$$render","consequent","div_2","root_2","div_3","$.set_style","$.set_attribute","consequent_1","$$value"],"mappings":";;;;itEAWA,qBAoDIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,mBAAW,KAAK,EAChBC,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,iBAAS,MAAM,EACfC,mBAAW,EAAI,EACfC,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAOP,EAAAC,EAAA,UAAA,CAAA,EACPO,EAAYR,EAAAC,EAAA,eAAA,CAAA,EACTQ,EAAAC,EAAAT,EAAA,oIAEDU,QAEEC,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,EAAkB,EAC7C,CAAA,OAAQ,UAAW,UAAWC,EAAmB,EACjD,CAAA,OAAQ,UAAW,UAAWC,EAAqB,EACnD,CAAA,OAAQ,QAAS,UAAWC,EAAmB,YAG1CC,EAAYb,EAAgB,CAC5B,OAAAQ,EAAQ,KAAMM,GAASA,EAAK,SAAWd,CAAM,GAAKQ,EAAQ,CAAC,CACpE,OAEMO,EAAQC,GAAA,IAAYH,EAAYb,EAAM,CAAA,CAAA,MAExCiB,EAAgBC,EAAO,CAAC,EACxBC,EAAoD,KACpDC,EAAkD,KAEhD,MAAAC,EAAO,IAAS,CACpB1B,EAAO,EAAK,EAEZS,EAAY,IAAGT,GAAI,EAEb,MAAA2B,EAAK,IAAO,YAAY,eAC5B,OAAQ3B,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBY,EAAQ,cAAce,CAAK,CAC7B,EAEAC,GAAO,IAAO,CACR,GAAApB,EAAO,EACL,GAAAD,EAAQ,EAAE,OAGNsB,EAAY,KADJrB,EAAO,EAAG,KAGxBgB,EAAa,YAAkB,IAAA,GAC7BF,EAAaQ,EAAbR,CAAa,EAAIO,CAAS,IACtBP,CAAa,GAAI,MACnBS,EAAAT,EAAgB,GAAG,EACnB,cAAcE,CAAU,EACxBE,EAAO,EAEX,EAAG,IACL,MACED,EAAY,WAAiB,IAAA,CAC3BC,EAAO,CACT,EAAGlB,EAAO,EAGhB,CAAC,EAEDwB,GAAS,IAAO,CACVR,GAAY,cAAcA,CAAU,EACpCC,GAAW,aAAaA,CAAS,CACvC,CAAC,gGAnEY,MAAK,4GAEP,OAAM,qDACJ,GAAI,iLAmElBQ,EAAAC,GAAA,KAAAD,eACS,aAAcjC,EAAI,GAAI,yBAA0BK,EAAM,CAAA,kBAAmBF,GAAQ,+CAG3EH,EAAI,KAEdU,0CAEH,IAAAyB,EAAIC,EARNH,CAAA,MAQEE,CAAI,kCACFE,EAAkBC,EAAA,EAAA,MADpBH,CAAI,EAIJ,IAAAI,IAJAJ,EAAI,CAAA,EAKFK,IADFD,CAAG,MACDC,EAAC,EAAA,IAADA,CAAC,EAED,IAAAC,IAFAD,EAAC,CAAA,MAEDC,CAAG,6BAAHA,CAAG,IAHLF,CAAG,UAAHA,EAAG,CAAA,aASD,IAAAG,EAAAC,GAAA,EAAAD,EAIC,QAAShB,EAJV,IAAAkB,EAAAR,EAAAM,CAAA,EAMEG,GAAOD,EAAA,CAAA,UAAA,kBAAA,KAAA,OAAA,EANTE,EAAAJ,CAAA,EAAAK,EAAAT,EAAAI,CAAA,WADEpC,EAAQ,GAAA0C,EAAAC,CAAA,gCAYVC,EAAGC,GAAA,EACDC,EAAAhB,EADFc,CAAG,IAAHA,CAAG,SACDG,GAAAD,EAAA,qBAAAtB,EAG6BR,CAAa,CAAA,GAAA,EAH1CgC,GAAAF,EAAA,gBAAAtB,EAIgBR,CAAa,CAAA,QAL/B4B,CAAG,WADD3C,EAAQ,GAAAyC,EAAAO,CAAA,IA/BdT,OAAAA,EAAAb,CAAA,KAAAA,EAAAuB,GAKY5C,QAAAA,CAAO,YAQgBR,EAAW,CAAA,CAAA,EAb9C2C,EAAAT,EAAAL,CAAA,MAFO"}

package/dist/components/toaster/Toaster.svelte

@@ -10,7 +10,7 @@
 />
 
 <script lang="ts">
-  import { onMount, onDestroy, type Snippet } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import {
     InfoCircleFilled32,
     WarningCircleFilled32,
@@ -58,10 +58,6 @@
      * Callback fired when the toaster open state changes.
      */
     onUpdateOpen?: (open: boolean) => void;
-    /**
-     * Use this snippet to insert a button or a link in the toaster
-     */
-    action?: Snippet;
   }
 
   let {
@@ -73,7 +69,6 @@
     progress,
     timeout,
     onUpdateOpen,
-    action,
     ...attrs
   }: Props = $props();
   let element: HTMLElement;
@@ -153,11 +148,7 @@
     <p class="mc-toaster__message">{description}</p>
 
     <div class="mc-toaster__action">
-      {#if action}
-        {@render action()}
-      {:else}
-        <slot name="action" />
-      {/if}
+      <slot name="action" />
     </div>
   </div>
 
@@ -168,7 +159,7 @@
       aria-label="Close"
       onclick={onClose}
     >
-      <Cross20 className="mc-button__icon" />
+      <Cross20 className="mc-button__icon" slot="icon" />
     </button>
   {/if}
 
@@ -387,6 +378,9 @@
   border-radius: var(--border-radius-full, 100%);
   padding: 0;
 }
+.mc-button--loading {
+  pointer-events: none;
+}
 .mc-button--loading .mc-button__loader {
   position: absolute;
   color: currentcolor;

package/dist/components/toaster/Toaster.svelte.d.ts

@@ -1,4 +1,3 @@
-import { type Snippet } from 'svelte';
 /**
  * A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.
  *
@@ -39,10 +38,6 @@ interface Props {
      * Callback fired when the toaster open state changes.
      */
     onUpdateOpen?: (open: boolean) => void;
-    /**
-     * Use this snippet to insert a button or a link in the toaster
-     */
-    action?: 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/toaster/Toaster.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toaster/Toaster.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAsB,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AASxD;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,YAAY,GAAG,eAAe,CAAC;IAC7D;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA0HH,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,OAAO;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Toaster.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toaster/Toaster.svelte.ts"],"names":[],"mappings":"AAYE;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,YAAY,GAAG,eAAe,CAAC;IAC7D;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAqHH,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,OAAO;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}