npm - @mozaic-ds/web-components - Versions diffs - 1.0.0 → 1.2.0 - Mend

@mozaic-ds/web-components 1.0.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (326) hide show

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

@@ -0,0 +1,65 @@
+/**
+ * A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).
+ *
+ * @event remove-tag {CustomEvent<string>} - Emits when the remove button of a tag is clicked, passing the tag's ID.
+ * @slot icon - Use this slot to insert an icon in the tag.
+ */
+interface Props {
+    /**
+     * Defines the behavior and layout of the tag.
+     */
+    type?: 'informative' | 'interactive' | 'contextualised' | 'removable' | 'selectable';
+    /**
+     * Determines the size of the tag.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * A unique identifier for the tag, used to associate the label with the form element. **Required** when type is 'selectable' or 'removable'.
+     */
+    id?: string;
+    /**
+     * The name attribute for the tag element, typically used for form submission. (only relevant for type: 'selectable').
+     */
+    name?: string;
+    /**
+     * The text label displayed next to the tag.
+     */
+    label: string;
+    /**
+     * The tag's checked state. Used only for type: 'selectable'.
+     */
+    checked?: boolean;
+    /**
+     * If `true`, disables the tag, making it non-interactive. Applicable to selectable, interactive, and contextualised types.
+     */
+    disabled?: boolean;
+    /**
+     * A number displayed in the badge when the tag is contextualised.
+     */
+    contextualisednumber?: number;
+    /**
+     * Accessible label text for the remove button in removable tags.
+     */
+    removablelabel?: string;
+}
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Tag: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+}, {}, "checked">;
+type Tag = InstanceType<typeof Tag>;
+export default Tag;
+//# sourceMappingURL=Tag.svelte.d.ts.map

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

@@ -0,0 +1 @@

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

package/dist/components/textarea/Textarea.js CHANGED Viewed

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

package/dist/components/textarea/Textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options\n customElement={{ tag: 'm-textarea', extend: customElementForwardEvents }}\n/>\n\n<script lang=\"ts\">\n import { customElementForwardEvents } from '../../utils';\n /*\n A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.\n /\n interface Props {\n /\n A unique identifier for the textarea, used to associate the label with the form element.\n /\n id: string;\n /\n The name attribute for the textarea element, used for form submission.\n /\n name?: string;\n /\n The current value of the textarea field.\n /\n value?: string \| number;\n /\n Text displayed when the textarea is empty.\n /\n placeholder?: string;\n /\n If `true`, the textarea is marked as invalid.\n /\n isinvalid?: boolean;\n /\n If `true`, the textarea is disabled and non-interactive.\n /\n disabled?: boolean;\n /\n The number of visible text lines in the textarea.\n /\n rows?: number;\n /\n Minimum number of characters required for the textarea.\n /\n minlength?: number;\n /\n Maximum number of characters allowed in the textarea.\n /\n maxlength?: number;\n /\n If `true`, the textarea is read-only (cannot be edited).\n */\n readonly?: boolean;\n }\n\n let {\n id,\n name,\n value,\n placeholder,\n isinvalid,\n disabled,\n rows = 2,\n minlength,\n maxlength,\n readonly,\n }: Props = $props();\n</script>\n\n<textarea\n bind:value\n class={['mc-textarea', isinvalid && 'is-invalid']}\n aria-invalid={isinvalid}\n {name}\n {id}\n {placeholder}\n {rows}\n {disabled}\n {minlength}\n {maxlength}\n {readonly}\n></textarea>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/textarea';\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","isinvalid","disabled","rows","minlength","maxlength","readonly","customElementForwardEvents"],"mappings":";;~~ysDAAA~~,~~oBAqDIA~~,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,eAAO,CAAC,EACRC,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAST,EAAAC,EAAA,YAAA,CAAA,EACTS,EAAQV,EAAAC,EAAA,WAAA,CAAA,uVAHD,EAAC,iNASF,cAAeI,KAAa,YAAY,CAAA,EAAA,gBAAA,qBAClCA,GAAS,mKALzB,~~gKA/D8CM~~"}
1	+ {"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-textarea', extend: customElementForwardEvents }} />\n\n<script lang=\"ts\">\n import { customElementForwardEvents } from '../../utils';\n /*\n A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.\n /\n interface Props {\n /\n A unique identifier for the textarea, used to associate the label with the form element.\n /\n id: string;\n /\n The name attribute for the textarea element, used for form submission.\n /\n name?: string;\n /\n The current value of the textarea field.\n /\n value?: string \| number;\n /\n Text displayed when the textarea is empty.\n /\n placeholder?: string;\n /\n If `true`, the textarea is marked as invalid.\n /\n isinvalid?: boolean;\n /\n If `true`, the textarea is disabled and non-interactive.\n /\n disabled?: boolean;\n /\n The number of visible text lines in the textarea.\n /\n rows?: number;\n /\n Minimum number of characters required for the textarea.\n /\n minlength?: number;\n /\n Maximum number of characters allowed in the textarea.\n /\n maxlength?: number;\n /\n If `true`, the textarea is read-only (cannot be edited).\n */\n readonly?: boolean;\n }\n\n let {\n id,\n name,\n value,\n placeholder,\n isinvalid,\n disabled,\n rows = 2,\n minlength,\n maxlength,\n readonly,\n }: Props = $props();\n</script>\n\n<textarea\n bind:value\n class={['mc-textarea', isinvalid && 'is-invalid']}\n aria-invalid={isinvalid}\n {name}\n {id}\n {placeholder}\n {rows}\n {disabled}\n {minlength}\n {maxlength}\n {readonly}\n></textarea>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/textarea';\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","isinvalid","disabled","rows","minlength","maxlength","readonly","customElementForwardEvents"],"mappings":";;yvDAAA,oBAmDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,eAAO,CAAC,EACRC,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAST,EAAAC,EAAA,YAAA,CAAA,EACTS,EAAQV,EAAAC,EAAA,WAAA,CAAA,uVAHD,EAAC,iNASF,cAAeI,KAAa,YAAY,CAAA,EAAA,gBAAA,qBAClCA,GAAS,mKALzB,gKA9D4DM"}

package/dist/components/textarea/Textarea.svelte CHANGED Viewed

@@ -1,6 +1,4 @@
-<svelte:options
-  customElement={{ tag: 'm-textarea', extend: customElementForwardEvents }}
-/>
+<svelte:options customElement={{ tag: 'm-textarea', extend: customElementForwardEvents }} />
 <script lang="ts">
   import { customElementForwardEvents } from '../../utils';
@@ -85,8 +83,8 @@
   font-family: inherit;
   transition: box-shadow 200ms ease;
   background-color: var(--forms-color-background-default, #ffffff);
-  border: var(--border-s, 1px) solid var(--forms-color-border-default, #666666);
-  border-radius: var(--forms-radius-border, 0.25rem);
+  border: var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);
+  border-radius: var(--forms-border-radius, 0.25rem);
   transition: all ease 200ms;
   color: var(--forms-color-text-default, #000000);
   display: block;
@@ -101,7 +99,7 @@
 }
 .mc-textarea:hover {
   border-color: var(--forms-color-border-hover, #4d4d4d);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-textarea:focus {
   box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
@@ -121,9 +119,9 @@
 }
 .mc-textarea.is-invalid {
   border-color: var(--forms-color-border-invalid, #ea302d);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);
 }
 .mc-textarea.is-invalid:hover {
   border-color: var(--forms-color-border-invalid-hover, #c61112);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
 }</style>

package/dist/components/textinput/README.md CHANGED Viewed

@@ -8,7 +8,7 @@ A text input is a single-line input that allows users to enter and edit short te
 |------|-------------|------|---------|
 | `id*` | A unique identifier for the input element, used to associate the label with the form element. | `string` |   |
 | `name` | The name attribute for the input element, typically used for form submission. | `string` |   |
-| `value` | The current value of the input field. | `string` `number` |   |
+| `value` | The current value of the input field. | `string` `number` | `$bindable()` |
 | `placeholder` | A placeholder text to show in the input when it is empty. | `string` |   |
 | `inputtype` | Defines the type of input. | `'date'` `'email'` `'number'` `'password'` `'search'` `'tel'` `'text'` | `text` |
 | `isinvalid` | If `true`, applies an invalid state to the input. | `boolean` |   |

package/dist/components/textinput/Textinput.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Textinput.js","sources":["../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["<svelte:options\n customElement={{ tag: 'm-textinput', extend: customElementForwardEvents }}\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 /\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,\n placeholder,\n inputtype = 'text',\n isinvalid,\n disabled,\n readonly,\n size = 'm',\n clearlabel = 'Clear content',\n isclearable,\n }: Props = $props();\n\n const resetValue = () => (value = '');\n</script>\n\n<div\n class={['mc-text-input', `mc-text-input--${size}`, isinvalid && 'is-invalid']}\n>\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 />\n\n {#if isclearable && value}\n <div class=\"mc-controls-options\">\n <button\n type=\"button\"\n class=\"mc-controls-options__button\"\n onclick={resetValue}\n >\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":["~~resetValue","_","value","~~id","$.prop","$$props","name","placeholder","inputtype","isinvalid","disabled","readonly","size","clearlabel","isclearable","$$render","consequent","customElementForwardEvents"],"mappings":"~~0WAwEQA,EAAU,CAAAC,EAAAC,IAAUA,EAAQ,EAAE~~;;;;;;;~~kHAxEtC~~,~~oBA2DIC~~,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,~~EACJH~~,~~EAAKE~~,EAAAC,EAAA,QAAA,~~CAAA~~,~~EACLE~~,~~EAAWH~~,EAAAC,EAAA,cAAA,CAAA,~~EACXG~~,oBAAY,MAAM,EAClBC,~~EAASL~~,EAAAC,EAAA,YAAA,CAAA,~~EACTK~~,~~EAAQN~~,EAAAC,EAAA,WAAA,CAAA,~~EACRM~~,~~EAAQP~~,EAAAC,EAAA,WAAA,CAAA,~~EACRO~~,eAAO,GAAG,EACVC,qBAAa,eAAe,EAC5BC,~~EAAWV~~,EAAAC,EAAA,cAAA,CAAA,~~qPANC~~,OAAM,8MAIX,IAAG,yDACG,gBAAe,~~uLA+BfL~~,~~EAAUE~~,~~CAAA,qDAQuBW,~~EAAU,CAAA,CAAA,~~kBAbrDC~~,EAAW,~~GAAIZ~~,~~KAAKa~~,EAAAC,CAAA,~~gCAlBjB~~,~~kCAAmCJ~~,EAAI,CAAA,GAAIH,KAAa,~~mDAShDA~~,GAAS,2CAGjBD,GAAS,~~2EAfnB~~,~~oMAxE+CS~~"}
1	+ {"version":3,"file":"Textinput.js","sources":["../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-textinput', extend: customElementForwardEvents }} />\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 /\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 }: 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 />\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","resetValue","$$render","consequent","customElementForwardEvents"],"mappings":";;;;;;;kHAAA,oBAyDIA,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,QAGPW,EAAU,IAAUT,EAAQ,EAAE,qPATtB,OAAM,8MAIX,IAAG,yDACG,gBAAe,sLA0ByCS,qDAOvBF,EAAU,CAAA,CAAA,kBATrDC,EAAW,GAAIR,KAAKU,EAAAC,CAAA,gCAjBd,kCAAmCL,EAAI,CAAA,GAAIH,KAAa,mDAQnDA,GAAS,2CAGjBD,GAAS,2EAbnB,oMAvE6DU"}

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

@@ -5,7 +5,7 @@ type Story = StoryObj;
 export declare const WithValue: Story;
 export declare const Default: Story;
 export declare const Small: Story;
-export declare const minValue: Story;
+export declare const MinValue: Story;
 export declare const Disabled: Story;
 export declare const ReadOnly: Story;
 export declare const Invalid: Story;

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

@@ -67,7 +67,7 @@ export const Small = {
         size: 's',
     },
 };
-export const minValue = {
+export const MinValue = {
     args: {
         id: 'minValueId',
         inputtype: 'number',

package/dist/components/textinput/Textinput.svelte CHANGED Viewed

@@ -1,6 +1,4 @@
-<svelte:options
-  customElement={{ tag: 'm-textinput', extend: customElementForwardEvents }}
-/>
+<svelte:options customElement={{ tag: 'm-textinput', extend: customElementForwardEvents }} />
 <script lang="ts">
   import { customElementForwardEvents } from '../../utils';
@@ -59,7 +57,7 @@
   let {
     id,
     name,
-    value,
+    value = $bindable(),
     placeholder,
     inputtype = 'text',
     isinvalid,
@@ -73,9 +71,7 @@
   const resetValue = () => (value = '');
 </script>
-<div
-  class={['mc-text-input', `mc-text-input--${size}`, isinvalid && 'is-invalid']}
->
+<div class={['mc-text-input', `mc-text-input--${size}`, isinvalid && 'is-invalid']}>
   <span class="mc-text-input__icon">
     <slot name="icon" />
   </span>
@@ -94,11 +90,7 @@
   {#if isclearable && value}
     <div class="mc-controls-options">
-      <button
-        type="button"
-        class="mc-controls-options__button"
-        onclick={resetValue}
-      >
+      <button type="button" class="mc-controls-options__button" onclick={resetValue}>
         <svg class="mc-controls-options__icon" aria-hidden="true">
           <path
             fill-rule="evenodd"
@@ -129,7 +121,7 @@
   appearance: none;
   cursor: pointer;
   padding: 0;
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
 }
 .mc-controls-options__button:hover .mc-controls-options__icon {
   fill: var(--forms-color-icon-clear-hover, #4d4d4d);
@@ -167,8 +159,8 @@
 .mc-text-input {
   transition: box-shadow 200ms ease;
   background-color: var(--forms-color-background-default, #ffffff);
-  border: var(--border-s, 1px) solid var(--forms-color-border-default, #666666);
-  border-radius: var(--forms-radius-border, 0.25rem);
+  border: var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);
+  border-radius: var(--forms-border-radius, 0.25rem);
   transition: all ease 200ms;
   color: var(--forms-color-text-default, #000000);
   display: block;
@@ -222,7 +214,7 @@
 }
 .mc-text-input:hover:not(:focus-within) {
   border-color: var(--forms-color-border-hover, #4d4d4d);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-text-input:has(input:disabled) {
   background-color: var(--forms-color-background-disabled, #d9d9d9);
@@ -264,11 +256,11 @@
 }
 .mc-text-input.is-invalid {
   border-color: var(--forms-color-border-invalid, #ea302d);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);
 }
 .mc-text-input.is-invalid:hover:not(:focus-within) {
   border-color: var(--forms-color-border-invalid-hover, #c61112);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
 }
 .mc-text-input * {
   box-sizing: border-box;

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

@@ -66,7 +66,7 @@ declare const Textinput: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {
     icon: {};
-}, {}, "">;
+}, {}, "value">;
 type Textinput = InstanceType<typeof Textinput>;
 export default Textinput;
 //# sourceMappingURL=Textinput.svelte.d.ts.map

package/dist/components/textinput/Textinput.svelte.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Textinput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.svelte.ts"],"names":[],"mappings":"AAKE;;;;GAIG;AACH,UAAU,KAAK;IACb;;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;AA+CH,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;;;;~~UAAqF~~,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"Textinput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.svelte.ts"],"names":[],"mappings":"AAKE;;;;GAIG;AACH,UAAU,KAAK;IACb;;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;AA+CH,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 CHANGED Viewed

@@ -13,6 +13,7 @@ A toaster is a temporary notification that appears briefly on the screen to prov
 | `closable` | If `true`, display the close button. | `boolean` | `true` |
 | `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` |   |
 ## Slots

package/dist/components/toaster/Toaster.js CHANGED Viewed

@@ -1,10 +1,6 @@
-import{n as k,o as U,u as Y,q as A,v as Z,c as $,p as oo,a as to,b as a,w as M,l as ro,f as F,s as f,t as S,i as E,j as eo,k as n,x as W,m as v,d as c,r as s,e as ao,g as no,h as co}from"../../custom-element.js";import{i as q}from"../../if.js";import{s as so}from"../../slot.js";import{c as lo,I as uo,C as io,W as bo,a as vo,b as mo}from"../../Cross20.js";import{a as go,s as V}from"../../attributes.js";import{b as ho}from"../../this.js";import"../../legacy.js";function B(e){throw new Error("https://svelte.dev/e/lifecycle_outside_component")}function G(e){k===null&&B(),U&&k.l!==null?ko(k).m.push(e):Y(()=>{const t=A(e);if(typeof t=="function")return t})}function fo(e){k===null&&B(),G(()=>()=>A(e))}function ko(e){var t=e.l;return t.u??(t.u={a:[],b:[],m:[]})}var po=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>'),_o=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>'),wo=F('<section role="status" tabindex="-1"><span class="mc-toaster__icon svelte-h1mguv" aria-hidden="true"><!></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 xo={hash:"svelte-h1mguv",code:`/**
+import{n as k,o as Y,u as Z,q as V,v as $,c as oo,p as to,a as ro,b as a,w as j,l as eo,f as E,s as h,t as M,i as U,j as ao,k as n,x as S,m as v,d as s,r as l,e as no,g as co,h as so}from"../../custom-element.js";import{i as W}from"../../if.js";import{s as lo}from"../../slot.js";import{c as uo}from"../../svelte-component.js";import{a as io,s as q}from"../../attributes.js";import{b as bo}from"../../this.js";import{I as vo,C as mo,W as go,a as fo,b as ho}from"../../Cross20.js";import"../../legacy.js";function A(e){throw new Error("https://svelte.dev/e/lifecycle_outside_component")}function B(e){k===null&&A(),Y&&k.l!==null?po(k).m.push(e):Z(()=>{const t=V(e);if(typeof t=="function")return t})}function ko(e){k===null&&A(),B(()=>()=>V(e))}function po(e){var t=e.l;return t.u??={a:[],b:[],m:[]}}var _o=E('<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>'),wo=E('<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>'),xo=E('<section role="status" tabindex="-1"><span class="mc-toaster__icon svelte-h1mguv" aria-hidden="true"><!></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 yo={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-radius, 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(--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(--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(--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;}
-/* create columns */
-/* create columns */
-/* create custom named columns with custom content */.mc-toaster.svelte-h1mguv {border-radius:var(--radius-m, 0.5rem);display:flex;flex-flow:row wrap;align-items:flex-start;background:var(--toaster-color-background-information, #002a41);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-information, #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--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-information, #002a41);}.mc-toaster--information.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-information, #3facd7);}.mc-toaster--information.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-information, #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-information, #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 yo(e,t){oo(t,!0),to(e,xo);let l=a(t,"open",7),p=a(t,"position",7,"top"),_=a(t,"description",7),m=a(t,"status",7,"info"),w=a(t,"closable",7,!0),g=a(t,"progress",7),b=a(t,"timeout",7),x;const X=[{status:"info",component:uo},{status:"success",component:io},{status:"warning",component:bo},{status:"error",component:vo}];function H(o){return X.find(r=>r.status===o)||X[0]}let J=M(ro(H(m()))),u=M(0),h=null,y=null;const C=()=>{l(!1);const o=new CustomEvent("update:open",{detail:l(),bubbles:!0,composed:!0});x.dispatchEvent(o)};G(()=>{if(b())if(g()){const i=100/(b()/100);h=setInterval(()=>{W(u,v(u)+i),v(u)>=100&&(W(u,100),clearInterval(h),C())},100)}else y=setTimeout(()=>{C()},b())}),fo(()=>{h&&clearInterval(h),y&&clearTimeout(y)});var K={get open(){return l()},set open(o){l(o),n()},get position(){return p()},set position(o="top"){p(o),n()},get description(){return _()},set description(o){_(o),n()},get status(){return m()},set status(o="info"){m(o),n()},get closable(){return w()},set closable(o=!0){w(o),n()},get progress(){return g()},set progress(o){g(o),n()},get timeout(){return b()},set timeout(o){b(o),n()}},d=wo(),z=c(d),L=c(z);lo(L,()=>v(J).component,(o,r)=>{r(o,{})}),s(z);var I=f(z,2),D=c(I),N=c(D,!0);s(D);var T=f(D,2),O=c(T);so(O,t,"action",{}),s(T),s(I);var j=f(I,2);{var P=o=>{var r=po();r.__click=C;var i=c(r);mo(i,{class:"mc-button__icon",slot:"icon","aria-hidden":"true"}),s(r),E(o,r)};q(j,o=>{w()&&o(P)})}var Q=f(j,2);{var R=o=>{var r=_o(),i=c(r);s(r),S(()=>{go(i,`--progress-value: ${v(u)};`),V(i,"aria-valuenow",v(u))}),E(o,r)};q(Q,o=>{g()&&o(R)})}return s(d),ho(d,o=>x=o,()=>x),S(()=>{ao(d,1,no(["mc-toaster",l()&&"is-open",`mc-toaster--${m()}`,`mc-toaster--${p()}`]),"svelte-h1mguv"),V(d,"aria-hidden",!l()),co(N,_())}),E(e,d),eo(K)}Z(["click"]);customElements.define("m-toaster",$(yo,{open:{},position:{},description:{},status:{},closable:{},progress:{},timeout:{}},["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 Co(e,t){to(t,!0),ro(e,yo);let c=a(t,"open",7),p=a(t,"position",7,"top"),_=a(t,"description",7),m=a(t,"status",7,"info"),w=a(t,"closable",7,!0),g=a(t,"progress",7),b=a(t,"timeout",7),x=a(t,"onUpdateOpen",7),y;const F=[{status:"info",component:vo},{status:"success",component:mo},{status:"warning",component:go},{status:"error",component:fo}];function G(o){return F.find(r=>r.status===o)||F[0]}let H=j(eo(G(m()))),u=j(0),f=null,C=null;const z=()=>{c(!1),x()?.(c());const o=new CustomEvent("update:open",{detail:c(),bubbles:!0,composed:!0});y.dispatchEvent(o)};B(()=>{if(b())if(g()){const i=100/(b()/100);f=setInterval(()=>{S(u,v(u)+i),v(u)>=100&&(S(u,100),clearInterval(f),z())},100)}else C=setTimeout(()=>{z()},b())}),ko(()=>{f&&clearInterval(f),C&&clearTimeout(C)});var J={get open(){return c()},set open(o){c(o),n()},get position(){return p()},set position(o="top"){p(o),n()},get description(){return _()},set description(o){_(o),n()},get status(){return m()},set status(o="info"){m(o),n()},get closable(){return w()},set closable(o=!0){w(o),n()},get progress(){return g()},set progress(o){g(o),n()},get timeout(){return b()},set timeout(o){b(o),n()},get onUpdateOpen(){return x()},set onUpdateOpen(o){x(o),n()}},d=xo(),I=s(d),K=s(I);uo(K,()=>v(H).component,(o,r)=>{r(o,{})}),l(I);var D=h(I,2),O=s(D),L=s(O,!0);l(O);var X=h(O,2),N=s(X);lo(N,t,"action",{}),l(X),l(D);var T=h(D,2);{var P=o=>{var r=_o();r.__click=z;var i=s(r);ho(i,{class:"mc-button__icon",slot:"icon","aria-hidden":"true"}),l(r),U(o,r)};W(T,o=>{w()&&o(P)})}var Q=h(T,2);{var R=o=>{var r=wo(),i=s(r);l(r),M(()=>{io(i,`--progress-value: ${v(u)};`),q(i,"aria-valuenow",v(u))}),U(o,r)};W(Q,o=>{g()&&o(R)})}return l(d),bo(d,o=>y=o,()=>y),M(()=>{no(d,1,co(["mc-toaster",c()&&"is-open",`mc-toaster--${m()}`,`mc-toaster--${p()}`]),"svelte-h1mguv"),q(d,"aria-hidden",!c()),so(L,_())}),U(e,d),ao(J)}$(["click"]);customElements.define("m-toaster",oo(Co,{open:{},position:{},description:{},status:{},closable:{},progress:{},timeout:{},onUpdateOpen:{}},["action"],[],!0));
 //# sourceMappingURL=Toaster.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Toaster.js","sources":["../../../node_modules/svelte/src/internal/shared/errors.js","../../../node_modules/svelte/src/index-client.js","../../../src/components/toaster/Toaster.svelte"],"sourcesContent":["/* This file is generated by scripts/process-messages/index.js. Do not edit! /\n\nimport { DEV } from 'esm-env';\n\n/\n Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead\n * @returns {never}\n /\nexport function invalid_default_snippet() {\n\tif (DEV) {\n\t\tconst error = new Error(`invalid_default_snippet\\nCannot use \\`{@render children(...)}\\` if the parent component uses \\`let:\\` directives. Consider using a named snippet instead\\nhttps://svelte.dev/e/invalid_default_snippet`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/invalid_default_snippet`);\n\t}\n}\n\n/\n A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`\n * @returns {never}\n /\nexport function invalid_snippet_arguments() {\n\tif (DEV) {\n\t\tconst error = new Error(`invalid_snippet_arguments\\nA snippet function was passed invalid arguments. Snippets should only be instantiated via \\`{@render ...}\\`\\nhttps://svelte.dev/e/invalid_snippet_arguments`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/invalid_snippet_arguments`);\n\t}\n}\n\n/\n `%name%(...)` can only be used during component initialisation\n * @param {string} name\n * @returns {never}\n /\nexport function lifecycle_outside_component(name) {\n\tif (DEV) {\n\t\tconst error = new Error(`lifecycle_outside_component\\n\\`${name}(...)\\` can only be used during component initialisation\\nhttps://svelte.dev/e/lifecycle_outside_component`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/lifecycle_outside_component`);\n\t}\n}\n\n/\n Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.\n * @returns {never}\n /\nexport function snippet_without_render_tag() {\n\tif (DEV) {\n\t\tconst error = new Error(`snippet_without_render_tag\\nAttempted to render a snippet without a \\`{@render}\\` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change \\`{snippet}\\` to \\`{@render snippet()}\\`.\\nhttps://svelte.dev/e/snippet_without_render_tag`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/snippet_without_render_tag`);\n\t}\n}\n\n/\n `%name%` is not a store with a `subscribe` method\n * @param {string} name\n * @returns {never}\n /\nexport function store_invalid_shape(name) {\n\tif (DEV) {\n\t\tconst error = new Error(`store_invalid_shape\\n\\`${name}\\` is not a store with a \\`subscribe\\` method\\nhttps://svelte.dev/e/store_invalid_shape`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/store_invalid_shape`);\n\t}\n}\n\n/\n The `this` prop on `<svelte:element>` must be a string, if defined\n * @returns {never}\n /\nexport function svelte_element_invalid_this_value() {\n\tif (DEV) {\n\t\tconst error = new Error(`svelte_element_invalid_this_value\\nThe \\`this\\` prop on \\`<svelte:element>\\` must be a string, if defined\\nhttps://svelte.dev/e/svelte_element_invalid_this_value`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/svelte_element_invalid_this_value`);\n\t}\n}","/* @import { ComponentContext, ComponentContextLegacy } from '#client' /\n/* @import { EventDispatcher } from './index.js' /\n/* @import { NotFunction } from './internal/types.js' /\nimport { active_reaction, untrack } from './internal/client/runtime.js';\nimport { is_array } from './internal/shared/utils.js';\nimport { user_effect } from './internal/client/index.js';\nimport as e from './internal/client/errors.js';\nimport { legacy_mode_flag } from './internal/flags/index.js';\nimport { component_context } from './internal/client/context.js';\nimport { DEV } from 'esm-env';\n\nif (DEV) {\n\t/*\n\t @param {string} rune\n\t /\n\tfunction throw_rune_error(rune) {\n\t\tif (!(rune in globalThis)) {\n\t\t\t// TODO if people start adjusting the \"this can contain runes\" config through v-p-s more, adjust this message\n\t\t\t/* @type {any} /\n\t\t\tlet value; // let's hope noone modifies this global, but belts and braces\n\t\t\tObject.defineProperty(globalThis, rune, {\n\t\t\t\tconfigurable: true,\n\t\t\t\t// eslint-disable-next-line getter-return\n\t\t\t\tget: () => {\n\t\t\t\t\tif (value !== undefined) {\n\t\t\t\t\t\treturn value;\n\t\t\t\t\t}\n\n\t\t\t\t\te.rune_outside_svelte(rune);\n\t\t\t\t},\n\t\t\t\tset: (v) => {\n\t\t\t\t\tvalue = v;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\tthrow_rune_error('$state');\n\tthrow_rune_error('$effect');\n\tthrow_rune_error('$derived');\n\tthrow_rune_error('$inspect');\n\tthrow_rune_error('$props');\n\tthrow_rune_error('$bindable');\n}\n\n/\n Returns an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](https://svelte.dev/docs/svelte/$derived) or [effect](https://svelte.dev/docs/svelte/$effect) re-runs or is destroyed.\n \n Must be called while a derived or effect is running.\n \n ```svelte\n * <script>\n * \timport { getAbortSignal } from 'svelte';\n \n \tlet { id } = $props();\n \n \tasync function getData(id) {\n * \t\tconst response = await fetch(`/items/${id}`, {\n * \t\t\tsignal: getAbortSignal()\n * \t\t});\n \n \t\treturn await response.json();\n * \t}\n \n \tconst data = $derived(await getData(id));\n * </script>\n * ```\n /\nexport function getAbortSignal() {\n\tif (active_reaction === null) {\n\t\te.get_abort_signal_outside_reaction();\n\t}\n\n\treturn (active_reaction.ac ??= new AbortController()).signal;\n}\n\n/\n `onMount`, like [`$effect`](https://svelte.dev/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.\n * Unlike `$effect`, the provided function only runs once.\n \n It must be called during the component's initialisation (but doesn't need to live _inside_ the component;\n * it can be called from an external module). If a function is returned _synchronously_ from `onMount`,\n * it will be called when the component is unmounted.\n \n `onMount` functions do not run during [server-side rendering](https://svelte.dev/docs/svelte/svelte-server#render).\n \n @template T\n * @param {() => NotFunction<T> \| Promise<NotFunction<T>> \| (() => any)} fn\n * @returns {void}\n /\nexport function onMount(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('onMount');\n\t}\n\n\tif (legacy_mode_flag && component_context.l !== null) {\n\t\tinit_update_callbacks(component_context).m.push(fn);\n\t} else {\n\t\tuser_effect(() => {\n\t\t\tconst cleanup = untrack(fn);\n\t\t\tif (typeof cleanup === 'function') return /* @type {() => void} / (cleanup);\n\t\t});\n\t}\n}\n\n/\n Schedules a callback to run immediately before the component is unmounted.\n \n Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the\n * only one that runs inside a server-side component.\n \n @param {() => any} fn\n * @returns {void}\n /\nexport function onDestroy(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('onDestroy');\n\t}\n\n\tonMount(() => () => untrack(fn));\n}\n\n/\n @template [T=any]\n * @param {string} type\n * @param {T} [detail]\n * @param {any}params_0\n * @returns {CustomEvent<T>}\n /\nfunction create_custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {\n\treturn new CustomEvent(type, { detail, bubbles, cancelable });\n}\n\n/\n Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs/svelte/legacy-on#Component-events).\n * Event dispatchers are functions that can take two arguments: `name` and `detail`.\n \n Component events created with `createEventDispatcher` create a\n * [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).\n * These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).\n * The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)\n * property and can contain any type of data.\n \n The event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:\n * ```ts\n * const dispatch = createEventDispatcher<{\n * loaded: null; // does not take a detail argument\n * change: string; // takes a detail argument of type string, which is required\n * optional: number \| null; // takes an optional detail argument of type number\n * }>();\n * ```\n \n @deprecated Use callback props and/or the `$host()` rune instead — see [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events)\n * @template {Record<string, any>} [EventMap = any]\n * @returns {EventDispatcher<EventMap>}\n /\nexport function createEventDispatcher() {\n\tconst active_component_context = component_context;\n\tif (active_component_context === null) {\n\t\te.lifecycle_outside_component('createEventDispatcher');\n\t}\n\n\t/\n\t @param [detail]\n\t * @param [options]\n\t /\n\treturn (type, detail, options) => {\n\t\tconst events = /* @type {Record<string, Function \| Function[]>} / (\n\t\t\tactive_component_context.s.$$events\n\t\t)?.[/* @type {string} / (type)];\n\n\t\tif (events) {\n\t\t\tconst callbacks = is_array(events) ? events.slice() : [events];\n\t\t\t// TODO are there situations where events could be dispatched\n\t\t\t// in a server (non-DOM) environment?\n\t\t\tconst event = create_custom_event(/* @type {string} / (type), detail, options);\n\t\t\tfor (const fn of callbacks) {\n\t\t\t\tfn.call(active_component_context.x, event);\n\t\t\t}\n\t\t\treturn !event.defaultPrevented;\n\t\t}\n\n\t\treturn true;\n\t};\n}\n\n// TODO mark beforeUpdate and afterUpdate as deprecated in Svelte 6\n\n/\n Schedules a callback to run immediately before the component is updated after any state change.\n \n The first time the callback runs will be before the initial `onMount`.\n \n In runes mode use `$effect.pre` instead.\n \n @deprecated Use [`$effect.pre`](https://svelte.dev/docs/svelte/$effect#$effect.pre) instead\n * @param {() => void} fn\n * @returns {void}\n /\nexport function beforeUpdate(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('beforeUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('beforeUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).b.push(fn);\n}\n\n/\n Schedules a callback to run immediately after the component has been updated.\n \n The first time the callback runs will be after the initial `onMount`.\n \n In runes mode use `$effect` instead.\n \n @deprecated Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead\n * @param {() => void} fn\n * @returns {void}\n /\nexport function afterUpdate(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('afterUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('afterUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).a.push(fn);\n}\n\n/\n Legacy-mode: Init callbacks object for onMount/beforeUpdate/afterUpdate\n * @param {ComponentContext} context\n /\nfunction init_update_callbacks(context) {\n\tvar l = /* @type {ComponentContextLegacy} / (context).l;\n\treturn (l.u ??= { a: [], b: [], m: [] });\n}\n\nexport { flushSync } from './internal/client/reactivity/batch.js';\nexport { getContext, getAllContexts, hasContext, setContext } from './internal/client/context.js';\nexport { hydrate, mount, unmount } from './internal/client/render.js';\nexport { tick, untrack, settled } from './internal/client/runtime.js';\nexport { createRawSnippet } from './internal/client/dom/blocks/snippet.js';\n","<svelte:options customElement={{ tag: 'm-toaster' }} />\n\n<script lang=\"ts\">\n import { onMount, onDestroy } from 'svelte';\n import InfoCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled32/InfoCircleFilled32.svelte';\n import WarningCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled32/WarningCircleFilled32.svelte';\n import CrossCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled32/CrossCircleFilled32.svelte';\n import CheckCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled32/CheckCircleFilled32.svelte';\n import Cross20 from '@mozaic-ds/icons-svelte/svelte/Cross20/Cross20.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 /\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\n let {\n open,\n position = 'top',\n description,\n status = 'info',\n closable = true,\n progress,\n timeout,\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 let selected = $state(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 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={[\n 'mc-toaster',\n open && 'is-open',\n `mc-toaster--${status}`,\n `mc-toaster--${position}`,\n ]}\n role=\"status\"\n tabindex=\"-1\"\n aria-hidden={!open}\n bind:this={element}\n>\n <span class=\"mc-toaster__icon\" aria-hidden=\"true\">\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 class=\"mc-button__icon\" slot=\"icon\" aria-hidden=\"true\" />\n </button>\n {/if}\n\n {#if progress}\n <div\n class=\"mc-toaster__indicator mc-linear-progressbar-buffer mc-linear-progressbar-buffer--m\"\n >\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":["lifecycle_outside_component","name","onMount","fn","component_context","e.lifecycle_outside_component","legacy_mode_flag","init_update_callbacks","user_effect","cleanup","untrack","onDestroy","context","l","open","$.prop","$$props","position","description","status","closable","progress","timeout","element","iconMap","InfoCircleFilled32","CheckCircleFilled32","WarningCircleFilled32","CrossCircleFilled32","getSelected","icon","selected","$.state","$.proxy","progressValue","intervalId","timeoutId","onClose","event","increment","$.get","$.set","$$render","consequent","consequent_1","$.bind_this","section","$$value"],"mappings":"gdAyCO,SAASA,EAA4BC,EAAM,CAQhD,MAAM,IAAI,MAAM,kDAAkD,CAEpE,CCuCO,SAASC,EAAQC,EAAI,CACvBC,IAAsB,MACzBC,EAAuC,EAGpCC,GAAoBF,EAAkB,IAAM,KAC/CG,GAAsBH,CAAiB,EAAE,EAAE,KAAKD,CAAE,EAElDK,EAAY,IAAM,CACjB,MAAMC,EAAUC,EAAQP,CAAE,EAC1B,GAAI,OAAOM,GAAY,WAAY,OAAkCA,CACtE,CAAC,CAEH,CAWO,SAASE,GAAUR,EAAI,CACzBC,IAAsB,MACzBC,EAAyC,EAG1CH,EAAQ,IAAM,IAAMQ,EAAQP,CAAE,CAAC,CAChC,CAsHA,SAASI,GAAsBK,EAAS,CACvC,IAAIC,EAA2CD,EAAS,EACxD,OAAQC,EAAE,IAAFA,EAAE,EAAM,CAAE,EAAG,CAAA,EAAI,EAAG,CAAA,EAAI,EAAG,EAAE,EACtC;;;;;;;;6uECjPA,uBA+CIC,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,EAELO,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,EAAYV,EAAgB,CAC5B,OAAAK,EAAQ,KAAMM,GAASA,EAAK,SAAWX,CAAM,GAAKK,EAAQ,CAAC,CACpE,KAEIO,EAAQC,EAAAC,GAAUJ,EAAYV,EAAM,CAAA,CAAA,CAAA,EAEpCe,IAAuB,CAAC,EACxBC,EAAoD,KACpDC,EAAkD,KAEhD,MAAAC,EAAO,IAAS,CACpBvB,EAAO,EAAK,EAEN,MAAAwB,EAAK,IAAO,YAAY,eAC5B,OAAQxB,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBS,EAAQ,cAAce,CAAK,CAC7B,EAEApC,EAAO,IAAO,CACR,GAAAoB,EAAO,EACL,GAAAD,EAAQ,EAAE,OAGNkB,EAAY,KADJjB,EAAO,EAAG,KAGxBa,EAAa,YAAkB,IAAA,GAC7BD,EAAaM,EAAbN,CAAa,EAAIK,CAAS,IACtBL,CAAa,GAAI,MACnBO,EAAAP,EAAgB,GAAG,EACnB,cAAcC,CAAU,EACxBE,EAAO,EAEX,EAAG,IACL,MACED,EAAY,WAAiB,IAAA,CAC3BC,EAAO,CACT,EAAGf,EAAO,EAGhB,CAAC,EAEDX,GAAS,IAAO,CACVwB,GAAY,cAAcA,CAAU,EACpCC,GAAW,aAAaA,CAAS,CACvC,CAAC,gGA/DY,MAAK,4GAEP,OAAM,qDACJ,GAAI,0TA4FJC,mGALRjB,EAAQ,GAAAsB,EAAAC,CAAA,sFAkBqBT,CAAa,CAAA,GAAA,wBAC1BA,CAAa,CAAA,oBAR7Bb,EAAQ,GAAAqB,EAAAE,CAAA,gBAzBFC,GAAAC,EAAAC,GAAAxB,QAAAA,CAAO,oBARhB,aACAT,EAAI,GAAI,yBACOK,EAAM,CAAA,kBACNF,GAAQ,yCAIXH,EAAI,CAAA,OAQgBI,GAAW,gBAnB/C","x_google_ignoreList":[0,1]}
1	+ {"version":3,"file":"Toaster.js","sources":["../../../node_modules/svelte/src/internal/shared/errors.js","../../../node_modules/svelte/src/index-client.js","../../../src/components/toaster/Toaster.svelte"],"sourcesContent":["/* This file is generated by scripts/process-messages/index.js. Do not edit! /\n\nimport { DEV } from 'esm-env';\n\n/\n Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead\n * @returns {never}\n /\nexport function invalid_default_snippet() {\n\tif (DEV) {\n\t\tconst error = new Error(`invalid_default_snippet\\nCannot use \\`{@render children(...)}\\` if the parent component uses \\`let:\\` directives. Consider using a named snippet instead\\nhttps://svelte.dev/e/invalid_default_snippet`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/invalid_default_snippet`);\n\t}\n}\n\n/\n A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`\n * @returns {never}\n /\nexport function invalid_snippet_arguments() {\n\tif (DEV) {\n\t\tconst error = new Error(`invalid_snippet_arguments\\nA snippet function was passed invalid arguments. Snippets should only be instantiated via \\`{@render ...}\\`\\nhttps://svelte.dev/e/invalid_snippet_arguments`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/invalid_snippet_arguments`);\n\t}\n}\n\n/\n `%name%(...)` can only be used during component initialisation\n * @param {string} name\n * @returns {never}\n /\nexport function lifecycle_outside_component(name) {\n\tif (DEV) {\n\t\tconst error = new Error(`lifecycle_outside_component\\n\\`${name}(...)\\` can only be used during component initialisation\\nhttps://svelte.dev/e/lifecycle_outside_component`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/lifecycle_outside_component`);\n\t}\n}\n\n/\n Context was not set in a parent component\n * @returns {never}\n /\nexport function missing_context() {\n\tif (DEV) {\n\t\tconst error = new Error(`missing_context\\nContext was not set in a parent component\\nhttps://svelte.dev/e/missing_context`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/missing_context`);\n\t}\n}\n\n/\n Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.\n * @returns {never}\n /\nexport function snippet_without_render_tag() {\n\tif (DEV) {\n\t\tconst error = new Error(`snippet_without_render_tag\\nAttempted to render a snippet without a \\`{@render}\\` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change \\`{snippet}\\` to \\`{@render snippet()}\\`.\\nhttps://svelte.dev/e/snippet_without_render_tag`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/snippet_without_render_tag`);\n\t}\n}\n\n/\n `%name%` is not a store with a `subscribe` method\n * @param {string} name\n * @returns {never}\n /\nexport function store_invalid_shape(name) {\n\tif (DEV) {\n\t\tconst error = new Error(`store_invalid_shape\\n\\`${name}\\` is not a store with a \\`subscribe\\` method\\nhttps://svelte.dev/e/store_invalid_shape`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/store_invalid_shape`);\n\t}\n}\n\n/\n The `this` prop on `<svelte:element>` must be a string, if defined\n * @returns {never}\n /\nexport function svelte_element_invalid_this_value() {\n\tif (DEV) {\n\t\tconst error = new Error(`svelte_element_invalid_this_value\\nThe \\`this\\` prop on \\`<svelte:element>\\` must be a string, if defined\\nhttps://svelte.dev/e/svelte_element_invalid_this_value`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/svelte_element_invalid_this_value`);\n\t}\n}","/* @import { ComponentContext, ComponentContextLegacy } from '#client' /\n/* @import { EventDispatcher } from './index.js' /\n/* @import { NotFunction } from './internal/types.js' /\nimport { active_reaction, untrack } from './internal/client/runtime.js';\nimport { is_array } from './internal/shared/utils.js';\nimport { user_effect } from './internal/client/index.js';\nimport as e from './internal/client/errors.js';\nimport { legacy_mode_flag } from './internal/flags/index.js';\nimport { component_context } from './internal/client/context.js';\nimport { DEV } from 'esm-env';\n\nif (DEV) {\n\t/*\n\t @param {string} rune\n\t /\n\tfunction throw_rune_error(rune) {\n\t\tif (!(rune in globalThis)) {\n\t\t\t// TODO if people start adjusting the \"this can contain runes\" config through v-p-s more, adjust this message\n\t\t\t/* @type {any} /\n\t\t\tlet value; // let's hope noone modifies this global, but belts and braces\n\t\t\tObject.defineProperty(globalThis, rune, {\n\t\t\t\tconfigurable: true,\n\t\t\t\t// eslint-disable-next-line getter-return\n\t\t\t\tget: () => {\n\t\t\t\t\tif (value !== undefined) {\n\t\t\t\t\t\treturn value;\n\t\t\t\t\t}\n\n\t\t\t\t\te.rune_outside_svelte(rune);\n\t\t\t\t},\n\t\t\t\tset: (v) => {\n\t\t\t\t\tvalue = v;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\tthrow_rune_error('$state');\n\tthrow_rune_error('$effect');\n\tthrow_rune_error('$derived');\n\tthrow_rune_error('$inspect');\n\tthrow_rune_error('$props');\n\tthrow_rune_error('$bindable');\n}\n\n/\n Returns an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](https://svelte.dev/docs/svelte/$derived) or [effect](https://svelte.dev/docs/svelte/$effect) re-runs or is destroyed.\n \n Must be called while a derived or effect is running.\n \n ```svelte\n * <script>\n * \timport { getAbortSignal } from 'svelte';\n \n \tlet { id } = $props();\n \n \tasync function getData(id) {\n * \t\tconst response = await fetch(`/items/${id}`, {\n * \t\t\tsignal: getAbortSignal()\n * \t\t});\n \n \t\treturn await response.json();\n * \t}\n \n \tconst data = $derived(await getData(id));\n * </script>\n * ```\n /\nexport function getAbortSignal() {\n\tif (active_reaction === null) {\n\t\te.get_abort_signal_outside_reaction();\n\t}\n\n\treturn (active_reaction.ac ??= new AbortController()).signal;\n}\n\n/\n `onMount`, like [`$effect`](https://svelte.dev/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.\n * Unlike `$effect`, the provided function only runs once.\n \n It must be called during the component's initialisation (but doesn't need to live _inside_ the component;\n * it can be called from an external module). If a function is returned _synchronously_ from `onMount`,\n * it will be called when the component is unmounted.\n \n `onMount` functions do not run during [server-side rendering](https://svelte.dev/docs/svelte/svelte-server#render).\n \n @template T\n * @param {() => NotFunction<T> \| Promise<NotFunction<T>> \| (() => any)} fn\n * @returns {void}\n /\nexport function onMount(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('onMount');\n\t}\n\n\tif (legacy_mode_flag && component_context.l !== null) {\n\t\tinit_update_callbacks(component_context).m.push(fn);\n\t} else {\n\t\tuser_effect(() => {\n\t\t\tconst cleanup = untrack(fn);\n\t\t\tif (typeof cleanup === 'function') return /* @type {() => void} / (cleanup);\n\t\t});\n\t}\n}\n\n/\n Schedules a callback to run immediately before the component is unmounted.\n \n Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the\n * only one that runs inside a server-side component.\n \n @param {() => any} fn\n * @returns {void}\n /\nexport function onDestroy(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('onDestroy');\n\t}\n\n\tonMount(() => () => untrack(fn));\n}\n\n/\n @template [T=any]\n * @param {string} type\n * @param {T} [detail]\n * @param {any}params_0\n * @returns {CustomEvent<T>}\n /\nfunction create_custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {\n\treturn new CustomEvent(type, { detail, bubbles, cancelable });\n}\n\n/\n Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs/svelte/legacy-on#Component-events).\n * Event dispatchers are functions that can take two arguments: `name` and `detail`.\n \n Component events created with `createEventDispatcher` create a\n * [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).\n * These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).\n * The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)\n * property and can contain any type of data.\n \n The event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:\n * ```ts\n * const dispatch = createEventDispatcher<{\n * loaded: null; // does not take a detail argument\n * change: string; // takes a detail argument of type string, which is required\n * optional: number \| null; // takes an optional detail argument of type number\n * }>();\n * ```\n \n @deprecated Use callback props and/or the `$host()` rune instead — see [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events)\n * @template {Record<string, any>} [EventMap = any]\n * @returns {EventDispatcher<EventMap>}\n /\nexport function createEventDispatcher() {\n\tconst active_component_context = component_context;\n\tif (active_component_context === null) {\n\t\te.lifecycle_outside_component('createEventDispatcher');\n\t}\n\n\t/\n\t @param [detail]\n\t * @param [options]\n\t /\n\treturn (type, detail, options) => {\n\t\tconst events = /* @type {Record<string, Function \| Function[]>} / (\n\t\t\tactive_component_context.s.$$events\n\t\t)?.[/* @type {string} / (type)];\n\n\t\tif (events) {\n\t\t\tconst callbacks = is_array(events) ? events.slice() : [events];\n\t\t\t// TODO are there situations where events could be dispatched\n\t\t\t// in a server (non-DOM) environment?\n\t\t\tconst event = create_custom_event(/* @type {string} / (type), detail, options);\n\t\t\tfor (const fn of callbacks) {\n\t\t\t\tfn.call(active_component_context.x, event);\n\t\t\t}\n\t\t\treturn !event.defaultPrevented;\n\t\t}\n\n\t\treturn true;\n\t};\n}\n\n// TODO mark beforeUpdate and afterUpdate as deprecated in Svelte 6\n\n/\n Schedules a callback to run immediately before the component is updated after any state change.\n \n The first time the callback runs will be before the initial `onMount`.\n \n In runes mode use `$effect.pre` instead.\n \n @deprecated Use [`$effect.pre`](https://svelte.dev/docs/svelte/$effect#$effect.pre) instead\n * @param {() => void} fn\n * @returns {void}\n /\nexport function beforeUpdate(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('beforeUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('beforeUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).b.push(fn);\n}\n\n/\n Schedules a callback to run immediately after the component has been updated.\n \n The first time the callback runs will be after the initial `onMount`.\n \n In runes mode use `$effect` instead.\n \n @deprecated Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead\n * @param {() => void} fn\n * @returns {void}\n /\nexport function afterUpdate(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('afterUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('afterUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).a.push(fn);\n}\n\n/\n Legacy-mode: Init callbacks object for onMount/beforeUpdate/afterUpdate\n * @param {ComponentContext} context\n /\nfunction init_update_callbacks(context) {\n\tvar l = /* @type {ComponentContextLegacy} / (context).l;\n\treturn (l.u ??= { a: [], b: [], m: [] });\n}\n\nexport { flushSync, fork } from './internal/client/reactivity/batch.js';\nexport {\n\tcreateContext,\n\tgetContext,\n\tgetAllContexts,\n\thasContext,\n\tsetContext\n} from './internal/client/context.js';\nexport { hydrate, mount, unmount } from './internal/client/render.js';\nexport { tick, untrack, settled } from './internal/client/runtime.js';\nexport { createRawSnippet } from './internal/client/dom/blocks/snippet.js';\n","<svelte:options customElement={{ tag: 'm-toaster' }} />\n\n<script lang=\"ts\">\n import { onMount, onDestroy } from 'svelte';\n import InfoCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled32/InfoCircleFilled32.svelte';\n import WarningCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled32/WarningCircleFilled32.svelte';\n import CrossCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled32/CrossCircleFilled32.svelte';\n import CheckCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled32/CheckCircleFilled32.svelte';\n import Cross20 from '@mozaic-ds/icons-svelte/svelte/Cross20/Cross20.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 /\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 }: 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 let selected = $state(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>\n <span class=\"mc-toaster__icon\" aria-hidden=\"true\">\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 class=\"mc-button__icon\" slot=\"icon\" aria-hidden=\"true\" />\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":["lifecycle_outside_component","name","onMount","fn","component_context","e.lifecycle_outside_component","legacy_mode_flag","init_update_callbacks","user_effect","cleanup","untrack","onDestroy","context","l","open","$.prop","$$props","position","description","status","closable","progress","timeout","onUpdateOpen","element","iconMap","InfoCircleFilled32","CheckCircleFilled32","WarningCircleFilled32","CrossCircleFilled32","getSelected","icon","selected","$.state","$.proxy","progressValue","intervalId","timeoutId","onClose","event","increment","$.get","$.set","$$render","consequent","consequent_1","$.bind_this","section","$$value"],"mappings":"wfAyCO,SAASA,EAA4BC,EAAM,CAQhD,MAAM,IAAI,MAAM,kDAAkD,CAEpE,CCuCO,SAASC,EAAQC,EAAI,CACvBC,IAAsB,MACzBC,EAAuC,EAGpCC,GAAoBF,EAAkB,IAAM,KAC/CG,GAAsBH,CAAiB,EAAE,EAAE,KAAKD,CAAE,EAElDK,EAAY,IAAM,CACjB,MAAMC,EAAUC,EAAQP,CAAE,EAC1B,GAAI,OAAOM,GAAY,WAAY,OAAkCA,CACtE,CAAC,CAEH,CAWO,SAASE,GAAUR,EAAI,CACzBC,IAAsB,MACzBC,EAAyC,EAG1CH,EAAQ,IAAM,IAAMQ,EAAQP,CAAE,CAAC,CAChC,CAsHA,SAASI,GAAsBK,EAAS,CACvC,IAAIC,EAA2CD,EAAS,EACxD,OAAQC,EAAE,IAAM,CAAE,EAAG,CAAA,EAAI,EAAG,CAAA,EAAI,EAAG,EAAE,CACtC;;;;itECjPA,uBAmDIC,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,EAEVQ,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,EAAYX,EAAgB,CAC5B,OAAAM,EAAQ,KAAMM,GAASA,EAAK,SAAWZ,CAAM,GAAKM,EAAQ,CAAC,CACpE,KAEIO,EAAQC,EAAAC,GAAUJ,EAAYX,EAAM,CAAA,CAAA,CAAA,EAEpCgB,IAAuB,CAAC,EACxBC,EAAoD,KACpDC,EAAkD,KAEhD,MAAAC,EAAO,IAAS,CACpBxB,EAAO,EAAK,EAEZS,EAAY,IAAGT,GAAI,EAEb,MAAAyB,EAAK,IAAO,YAAY,eAC5B,OAAQzB,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBU,EAAQ,cAAce,CAAK,CAC7B,EAEArC,EAAO,IAAO,CACR,GAAAoB,EAAO,EACL,GAAAD,EAAQ,EAAE,OAGNmB,EAAY,KADJlB,EAAO,EAAG,KAGxBc,EAAa,YAAkB,IAAA,GAC7BD,EAAaM,EAAbN,CAAa,EAAIK,CAAS,IACtBL,CAAa,GAAI,MACnBO,EAAAP,EAAgB,GAAG,EACnB,cAAcC,CAAU,EACxBE,EAAO,EAEX,EAAG,IACL,MACED,EAAY,WAAiB,IAAA,CAC3BC,EAAO,CACT,EAAGhB,EAAO,EAGhB,CAAC,EAEDX,GAAS,IAAO,CACVyB,GAAY,cAAcA,CAAU,EACpCC,GAAW,aAAaA,CAAS,CACvC,CAAC,gGAlEY,MAAK,4GAEP,OAAM,qDACJ,GAAI,uXA0FJC,mGALRlB,EAAQ,GAAAuB,EAAAC,CAAA,sFAgBqBT,CAAa,CAAA,GAAA,wBAC1BA,CAAa,CAAA,oBAN7Bd,EAAQ,GAAAsB,EAAAE,CAAA,gBAzBFC,GAAAC,EAAAC,GAAAxB,QAAAA,CAAO,oBAJV,aAAcV,EAAI,GAAI,yBAA0BK,EAAM,CAAA,kBAAmBF,GAAQ,yCAG3EH,EAAI,CAAA,OAQgBI,GAAW,gBAd/C","x_google_ignoreList":[0,1]}