@mozaic-ds/web-components 1.6.0 → 1.8.0

package/dist/components/textarea/Textarea.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-textarea',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n    },\n    extend: customElementForwardEvents,\n  }}\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    [key: string]: any;\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    ...attrs\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  {...attrs}\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","attrs","$.rest_props","textarea","root","$.remove_textarea_child","$.bind_value","$.append","$$anchor","customElementForwardEvents"],"mappings":";;yvDAYA,oBAkDIA,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,EACLU,EAAAC,EAAAX,EAAA,oeAJI,EAAC,+KAQXY,EAAAC,EAAA,EAAAC,OAAAA,EAAAF,CAAA,IAAAA,eAES,cAAeR,EAAS,GAAI,YAAY,iBAClCA,EAAS,OACtBH,EAAI,KACJH,EAAE,cACFK,EAAW,OACXG,EAAI,WACJD,EAAQ,YACRE,EAAS,YACTC,EAAS,WACTC,EAAQ,KACLC,2CAZLK,EAAAH,EAAAV,CAAA,EAAAc,EAAAC,EAAAL,CAAA,MAFO,sTAlEIM"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-textarea',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n    },\n    extend: customElementForwardEvents,\n  }}\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    [key: string]: any;\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 = $bindable(),\n    placeholder,\n    isinvalid,\n    disabled,\n    rows = 2,\n    minlength,\n    maxlength,\n    readonly,\n    ...attrs\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  {...attrs}\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","attrs","$.rest_props","textarea","root","$.remove_textarea_child","$.bind_value","$.append","$$anchor","customElementForwardEvents"],"mappings":";;+wDAYA,oBAkDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,EAAA,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,EACLU,EAAAC,EAAAX,EAAA,oeAJI,EAAC,+KAQXY,EAAAC,EAAA,EAAAC,OAAAA,EAAAF,CAAA,IAAAA,eAES,cAAeR,EAAS,GAAI,YAAY,iBAClCA,EAAS,OACtBH,EAAI,KACJH,EAAE,cACFK,EAAW,OACXG,EAAI,WACJD,EAAQ,YACRE,EAAS,YACTC,EAAS,WACTC,EAAQ,KACLC,2CAZLK,EAAAH,EAAAV,CAAA,EAAAc,EAAAC,EAAAL,CAAA,MAFO,sTAlEIM"}

package/dist/components/textarea/Textarea.svelte

@@ -62,7 +62,7 @@
   let {
     id,
     name,
-    value,
+    value = $bindable(),
     placeholder,
     isinvalid,
     disabled,
@@ -106,6 +106,7 @@
   line-height: var(--line-height-m, 1.5);
   min-height: 4rem;
   padding: 0.5rem 0.75rem;
+  box-sizing: border-box;
 }
 .mc-textarea::placeholder {
   color: var(--forms-color-placeholder, #666666);

package/dist/components/textarea/Textarea.svelte.d.ts

@@ -44,7 +44,7 @@ interface Props {
      */
     readonly?: boolean;
 }
-declare const Textarea: import("svelte").Component<Props, {}, "">;
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;
 //# sourceMappingURL=Textarea.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/Textarea.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoCH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/Textarea.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoCH,QAAA,MAAM,QAAQ,gDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/textinput/README.md

@@ -19,6 +19,7 @@ A text input is a single-line input that allows users to enter and edit short te
 | `clearlabel` | The label text for the clear button. | `string` | `Clear content` |
 | `prefix` | Displays additional text inside the component, before the input. | `string` |   |
 | `suffix` | Displays additional text inside the component, after the input. | `string` |   |
+| `element` |  | `HTMLElement` `null` | `$bindable()` |
 
 ## Slots
 

package/dist/components/textinput/Textinput.js

@@ -1,9 +1,9 @@
-import{o as K,c as N,e as O,a as P,p as n,k as c,t as m,b as p,d as Q,f,j as l,n as R,i as r,r as s,m as E,u as U,s as W,h as X}from"../../custom-element.js";import{i as j}from"../../if.js";import{s as Y}from"../../slot.js";import{a as $}from"../../attributes.js";import{c as ee}from"../../input.js";import{c as te}from"../../custom-element-forward-events.js";import"../../branches.js";var ne=f('<span class="mc-text-input__addon svelte-5c9enb"> </span>'),re=f('<span class="mc-text-input__addon svelte-5c9enb"> </span>'),oe=f('<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>'),ie=f('<div><span class="mc-text-input__icon svelte-5c9enb"><!></span> <!> <input/> <!> <!></div>');const le={hash:"svelte-5c9enb",code:`/**
+import{o as N,c as O,e as P,a as Q,p as n,s as c,t as f,j as R,n as U,b as h,d as W,f as _,h as i,l as X,m as r,k as j,u as Y,r as s}from"../../custom-element.js";import{i as F}from"../../if.js";import{s as $}from"../../slot.js";import{a as ee}from"../../attributes.js";import{c as te}from"../../input.js";import{b as ne}from"../../this.js";import{c as re}from"../../custom-element-forward-events.js";import"../../branches.js";var oe=_('<span class="mc-text-input__addon svelte-5c9enb"> </span>'),le=_('<span class="mc-text-input__addon svelte-5c9enb"> </span>'),ie=_('<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>'),se=_('<div><span class="mc-text-input__icon svelte-5c9enb"><!></span> <!> <input/> <!> <!></div>');const ae={hash:"svelte-5c9enb",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-controls-options.svelte-5c9enb {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-5c9enb {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%);}.mc-controls-options__button.svelte-5c9enb:hover .mc-controls-options__icon:where(.svelte-5c9enb) {fill:var(--forms-color-icon-clear-hover, #4d4d4d);}.mc-controls-options__button.svelte-5c9enb:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-controls-options__icon.svelte-5c9enb {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-5c9enb, .mc-controls-options__icon.svelte-5c9enb {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-5c9enb {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-controls-options__unit.svelte-5c9enb {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);}
+ */.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);color:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-5c9enb, .mc-controls-options__icon.svelte-5c9enb {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-5c9enb {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-controls-options__unit.svelte-5c9enb {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);}
 
-/* stylelint-disable string-no-newline */.mc-text-input.svelte-5c9enb {transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:0.5rem;}.mc-text-input__control.svelte-5c9enb {background-color:transparent;border-width:0;font-family:inherit;outline:none;}.mc-text-input__control[type=number].svelte-5c9enb::-webkit-inner-spin-button, .mc-text-input__control[type=number].svelte-5c9enb::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-text-input__control[type=number].svelte-5c9enb {
+/* 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;display:flex;align-items:center;gap:0.5rem;box-sizing:border-box;}.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);color:var(--forms-color-text-default, #000000);flex-grow:1;}.mc-text-input__control.svelte-5c9enb::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__addon.svelte-5c9enb {font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);}.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)), .mc-text-input.svelte-5c9enb:has(.mc-text-input__addon: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), .mc-text-input.svelte-5c9enb:has(.mc-text-input__addon: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)), .mc-text-input.svelte-5c9enb:has(.mc-text-input__addon: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), .mc-text-input.svelte-5c9enb:has(.mc-text-input__addon: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 se(F,t){O(t,!0),P(F,le);let h=n(t,"id",7),_=n(t,"name",7),a=n(t,"value",15),x=n(t,"placeholder",7),g=n(t,"inputtype",7,"text"),d=n(t,"isinvalid",7),w=n(t,"disabled",7),y=n(t,"readonly",7),k=n(t,"size",7,"m"),z=n(t,"clearlabel",7,"Clear content"),B=n(t,"isclearable",7),v=n(t,"prefix",7),u=n(t,"suffix",7),D=R(t,["$$slots","$$events","$$legacy","$$host","id","name","value","placeholder","inputtype","isinvalid","disabled","readonly","size","clearlabel","isclearable","prefix","suffix"]);const G=()=>a("");var T={get id(){return h()},set id(e){h(e),r()},get name(){return _()},set name(e){_(e),r()},get value(){return a()},set value(e){a(e),r()},get placeholder(){return x()},set placeholder(e){x(e),r()},get inputtype(){return g()},set inputtype(e="text"){g(e),r()},get isinvalid(){return d()},set isinvalid(e){d(e),r()},get disabled(){return w()},set disabled(e){w(e),r()},get readonly(){return y()},set readonly(e){y(e),r()},get size(){return k()},set size(e="m"){k(e),r()},get clearlabel(){return z()},set clearlabel(e="Clear content"){z(e),r()},get isclearable(){return B()},set isclearable(e){B(e),r()},get prefix(){return v()},set prefix(e){v(e),r()},get suffix(){return u()},set suffix(e){u(e),r()}},b=ie(),L=l(b),V=l(L);Y(V,t,"icon",{},null),s(L);var M=c(L,2);{var q=e=>{var o=ne(),i=l(o,!0);s(o),m(()=>E(i,v())),p(e,o)};j(M,e=>{v()&&e(q)})}var C=c(M,2);$(C,()=>({class:"mc-text-input__control","aria-invalid":d(),name:_(),id:h(),type:g(),placeholder:x(),disabled:w(),readonly:y(),...D}),void 0,void 0,void 0,"svelte-5c9enb",!0);var S=c(C,2);{var A=e=>{var o=re(),i=l(o,!0);s(o),m(()=>E(i,u())),p(e,o)};j(S,e=>{u()&&e(A)})}var H=c(S,2);{var I=e=>{var o=oe(),i=l(o),Z=c(l(i),2),J=l(Z,!0);s(Z),s(i),s(o),m(()=>E(J,z())),U("click",i,G),p(e,o)};j(H,e=>{B()&&a()&&e(I)})}return s(b),m(()=>W(b,1,X(["mc-text-input",`mc-text-input--${k()}`,d()&&"is-invalid"]),"svelte-5c9enb")),ee(C,a),p(F,b),Q(T)}K(["click"]);customElements.define("m-textinput",N(se,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},isclearable:{attribute:"isclearable",reflect:!0,type:"Boolean"},id:{},name:{},value:{},placeholder:{},inputtype:{},size:{},clearlabel:{},prefix:{},suffix:{}},["icon"],[],{mode:"open"},te));
+/* stylelint-enable string-no-newline */.mc-text-input__icon.svelte-5c9enb:empty {display:none;}`};function ce(M,t){P(t,!0),Q(M,ae);let x=n(t,"id",7),g=n(t,"name",7),a=n(t,"value",15),w=n(t,"placeholder",7),y=n(t,"inputtype",7,"text"),d=n(t,"isinvalid",7),k=n(t,"disabled",7),z=n(t,"readonly",7),B=n(t,"size",7,"m"),L=n(t,"clearlabel",7,"Clear content"),C=n(t,"isclearable",7),v=n(t,"prefix",7),u=n(t,"suffix",7),m=n(t,"element",15),D=X(t,["$$slots","$$events","$$legacy","$$host","id","name","value","placeholder","inputtype","isinvalid","disabled","readonly","size","clearlabel","isclearable","prefix","suffix","element"]);const G=()=>a("");var V={get id(){return x()},set id(e){x(e),r()},get name(){return g()},set name(e){g(e),r()},get value(){return a()},set value(e){a(e),r()},get placeholder(){return w()},set placeholder(e){w(e),r()},get inputtype(){return y()},set inputtype(e="text"){y(e),r()},get isinvalid(){return d()},set isinvalid(e){d(e),r()},get disabled(){return k()},set disabled(e){k(e),r()},get readonly(){return z()},set readonly(e){z(e),r()},get size(){return B()},set size(e="m"){B(e),r()},get clearlabel(){return L()},set clearlabel(e="Clear content"){L(e),r()},get isclearable(){return C()},set isclearable(e){C(e),r()},get prefix(){return v()},set prefix(e){v(e),r()},get suffix(){return u()},set suffix(e){u(e),r()},get element(){return m()},set element(e){m(e),r()}},b=se(),E=i(b),q=i(E);$(q,t,"icon",{},null),s(E);var S=c(E,2);{var A=e=>{var o=oe(),l=i(o,!0);s(o),f(()=>j(l,v())),h(e,o)};F(S,e=>{v()&&e(A)})}var p=c(S,2);ee(p,()=>({class:"mc-text-input__control","aria-invalid":d(),name:g(),id:x(),type:y(),placeholder:w(),disabled:k(),readonly:z(),...D}),void 0,void 0,void 0,"svelte-5c9enb",!0),ne(p,e=>m(e),()=>m());var T=c(p,2);{var H=e=>{var o=le(),l=i(o,!0);s(o),f(()=>j(l,u())),h(e,o)};F(T,e=>{u()&&e(H)})}var I=c(T,2);{var J=e=>{var o=ie(),l=i(o),Z=c(i(l),2),K=i(Z,!0);s(Z),s(l),s(o),f(()=>j(K,L())),Y("click",l,G),h(e,o)};F(I,e=>{C()&&a()&&e(J)})}return s(b),f(()=>R(b,1,U(["mc-text-input",`mc-text-input--${B()}`,d()&&"is-invalid"]),"svelte-5c9enb")),te(p,a),h(M,b),W(V)}N(["click"]);customElements.define("m-textinput",O(ce,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},isclearable:{attribute:"isclearable",reflect:!0,type:"Boolean"},id:{},name:{},value:{},placeholder:{},inputtype:{},size:{},clearlabel:{},prefix:{},suffix:{},element:{}},["icon"],[],{mode:"open"},re));export{ce as T};
 //# sourceMappingURL=Textinput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Textinput.js","sources":["../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-textinput',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n      isclearable: { reflect: true, type: 'Boolean', attribute: 'isclearable' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.\n   *\n   * @slot icon - Use this slot to insert an icon in the input.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * A unique identifier for the input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the input field.\n     */\n    value?: string | number;\n    /**\n     * A placeholder text to show in the input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * Defines the type of input.\n     */\n    inputtype?: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';\n    /**\n     * If `true`, applies an invalid state to the input.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the input.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the input has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n    /**\n     * Displays additional text inside the component, before the input.\n     */\n    prefix?: string;\n    /**\n     * Displays additional text inside the component, after the input.\n     */\n    suffix?: 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    prefix,\n    suffix,\n    ...attrs\n  }: Props = $props();\n\n  const resetValue = () => (value = '');\n</script>\n\n<div class={['mc-text-input', `mc-text-input--${size}`, isinvalid && 'is-invalid']}>\n  <span class=\"mc-text-input__icon\">\n    <slot name=\"icon\" />\n  </span>\n\n  {#if prefix}\n    <span class=\"mc-text-input__addon\">{prefix}</span>\n  {/if}\n\n  <input\n    bind:value\n    class=\"mc-text-input__control\"\n    aria-invalid={isinvalid}\n    {name}\n    {id}\n    type={inputtype}\n    {placeholder}\n    {disabled}\n    {readonly}\n    {...attrs}\n  />\n\n  {#if suffix}\n    <span class=\"mc-text-input__addon\">{suffix}</span>\n  {/if}\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","prefix","suffix","attrs","$.rest_props","resetValue","div","root","span","span_1","root_1","$$render","consequent","input","$.sibling","node_1","node_2","span_2","root_2","consequent_1","div_1","root_3","button","span_3","$.delegated","consequent_2","$.bind_value","customElementForwardEvents"],"mappings":";;;;;;;mHAaA,qBAgEIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,EAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,oBAAY,MAAM,EAClBC,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAQR,EAAAC,EAAA,WAAA,CAAA,EACRQ,eAAO,GAAG,EACVC,qBAAa,eAAe,EAC5BC,EAAWX,EAAAC,EAAA,cAAA,CAAA,EACXW,EAAMZ,EAAAC,EAAA,SAAA,CAAA,EACNY,EAAMb,EAAAC,EAAA,SAAA,CAAA,EACHa,EAAAC,EAAAd,EAAA,sLAGCe,EAAU,IAAUb,EAAQ,EAAE,qPAZtB,OAAM,8MAIX,IAAG,yDACG,gBAAe,yKAU/Bc,EAAGC,GAAA,EACDC,IADFF,CAAG,MACDE,CAAI,0BAAJA,CAAI,UAAJA,EAAI,CAAA,iBAKFC,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YAA+BR,EAAM,CAAA,CAAA,MAAzCQ,CAAI,WADFR,EAAM,GAAAU,EAAAC,CAAA,IAIV,IAAAC,EAAAC,EAAAC,EAAA,CAAA,IAAAF,sDAGelB,EAAS,OACtBJ,EAAI,KACJH,EAAE,OACGM,EAAS,cACdD,EAAW,WACXG,EAAQ,WACRC,EAAQ,KACLM,6CAVL,IAAAa,EAAAF,EAAAD,EAAA,CAAA,iBAcEI,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YAA+Bf,EAAM,CAAA,CAAA,MAAzCe,CAAI,WADFf,EAAM,GAAAS,EAAAQ,CAAA,gCAKRC,EAAGC,GAAA,EACDC,IADFF,CAAG,EAQCG,MAPFD,CAAM,EAAA,CAAA,MAOJC,EAAI,EAAA,IAAJA,CAAI,IAPND,CAAM,IADRF,CAAG,YAQ0CrB,EAAU,CAAA,CAAA,EAPrDyB,EAAA,QAAAF,EAAkEjB,CAAU,MAD9Ee,CAAG,WADDpB,EAAW,GAAIR,KAAKmB,EAAAc,CAAA,aA1B1BnB,CAAG,UAAHA,OAAY,kCAAmCR,EAAI,CAAA,GAAIH,KAAa,iCASlE+B,GAAAb,EAAArB,CAAA,MATFc,CAAG,MAFI,gaArFIqB"}
+{"version":3,"file":"Textinput.js","sources":["../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-textinput',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n      isclearable: { reflect: true, type: 'Boolean', attribute: 'isclearable' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.\n   *\n   * @slot icon - Use this slot to insert an icon in the input.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * A unique identifier for the input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the input field.\n     */\n    value?: string | number;\n    /**\n     * A placeholder text to show in the input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * Defines the type of input.\n     */\n    inputtype?: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';\n    /**\n     * If `true`, applies an invalid state to the input.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the input.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the input has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n    /**\n     * Displays additional text inside the component, before the input.\n     */\n    prefix?: string;\n    /**\n     * Displays additional text inside the component, after the input.\n     */\n    suffix?: string;\n    element?: HTMLElement | null;\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    prefix,\n    suffix,\n    element = $bindable(),\n    ...attrs\n  }: Props = $props();\n\n  const resetValue = () => (value = '');\n</script>\n\n<div class={['mc-text-input', `mc-text-input--${size}`, isinvalid && 'is-invalid']}>\n  <span class=\"mc-text-input__icon\">\n    <slot name=\"icon\" />\n  </span>\n\n  {#if prefix}\n    <span class=\"mc-text-input__addon\">{prefix}</span>\n  {/if}\n\n  <input\n    bind:this={element}\n    bind:value\n    class=\"mc-text-input__control\"\n    aria-invalid={isinvalid}\n    {name}\n    {id}\n    type={inputtype}\n    {placeholder}\n    {disabled}\n    {readonly}\n    {...attrs}\n  />\n\n  {#if suffix}\n    <span class=\"mc-text-input__addon\">{suffix}</span>\n  {/if}\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","prefix","suffix","element","attrs","$.rest_props","resetValue","div","root","span","span_1","root_1","$$render","consequent","input","$.sibling","node_1","$$value","node_2","span_2","root_2","consequent_1","div_1","root_3","button","span_3","$.delegated","consequent_2","$.bind_value","customElementForwardEvents"],"mappings":";;;;;;;mHAaA,qBAiEIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,EAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,oBAAY,MAAM,EAClBC,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAQR,EAAAC,EAAA,WAAA,CAAA,EACRQ,eAAO,GAAG,EACVC,qBAAa,eAAe,EAC5BC,EAAWX,EAAAC,EAAA,cAAA,CAAA,EACXW,EAAMZ,EAAAC,EAAA,SAAA,CAAA,EACNY,EAAMb,EAAAC,EAAA,SAAA,CAAA,EACNa,EAAOd,EAAAC,EAAA,UAAA,EAAA,EACJc,EAAAC,EAAAf,EAAA,gMAGCgB,EAAU,IAAUd,EAAQ,EAAE,qPAbtB,OAAM,8MAIX,IAAG,yDACG,gBAAe,4NAW/Be,EAAGC,GAAA,EACDC,IADFF,CAAG,MACDE,CAAI,0BAAJA,CAAI,UAAJA,EAAI,CAAA,iBAKFC,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YAA+BT,EAAM,CAAA,CAAA,MAAzCS,CAAI,WADFT,EAAM,GAAAW,EAAAC,CAAA,IAIV,IAAAC,EAAAC,EAAAC,EAAA,CAAA,KAAAF,sDAIenB,EAAS,OACtBJ,EAAI,KACJH,EAAE,OACGM,EAAS,cACdD,EAAW,WACXG,EAAQ,WACRC,EAAQ,KACLO,gDAXLU,EAAAG,GACYd,SAAAA,GAAO,EADnB,IAAAe,EAAAH,EAAAD,EAAA,CAAA,iBAeEK,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YAA+BjB,EAAM,CAAA,CAAA,MAAzCiB,CAAI,WADFjB,EAAM,GAAAU,EAAAS,CAAA,gCAKRC,EAAGC,GAAA,EACDC,IADFF,CAAG,EAQCG,MAPFD,CAAM,EAAA,CAAA,MAOJC,EAAI,EAAA,IAAJA,CAAI,IAPND,CAAM,IADRF,CAAG,YAQ0CvB,EAAU,CAAA,CAAA,EAPrD2B,EAAA,QAAAF,EAAkElB,CAAU,MAD9EgB,CAAG,WADDtB,EAAW,GAAIR,KAAKoB,EAAAe,CAAA,aA3B1BpB,CAAG,UAAHA,OAAY,kCAAmCT,EAAI,CAAA,GAAIH,KAAa,iCASlEiC,GAAAd,EAAAtB,CAAA,MATFe,CAAG,MAFI,2aAvFIsB"}

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

@@ -1 +1 @@
-{"version":3,"file":"Textinput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,uBAAuB,CAAC;AAC/B,OAAO,oBAAoB,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAgDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,KAAK,EAAE,KAcnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAanB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAoBnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAItB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAItB,CAAC"}
+{"version":3,"file":"Textinput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,uBAAuB,CAAC;AAC/B,OAAO,oBAAoB,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAiDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,KAAK,EAAE,KAcnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAanB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAoBnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAItB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAItB,CAAC"}

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

@@ -42,6 +42,7 @@ const meta = {
           clearlabel=${ifDefined(args.clearlabel)}
           prefix=${ifDefined(args.prefix)}
           suffix=${ifDefined(args.suffix)}
+          min=${ifDefined(args.min)}
           @input=${(event) => onInput(event)}
           @change=${(event) => onChange(event)}
           @focus=${(event) => onFocus(event)}

package/dist/components/textinput/Textinput.svelte

@@ -72,6 +72,7 @@
      * Displays additional text inside the component, after the input.
      */
     suffix?: string;
+    element?: HTMLElement | null;
   }
 
   let {
@@ -88,6 +89,7 @@
     isclearable,
     prefix,
     suffix,
+    element = $bindable(),
     ...attrs
   }: Props = $props();
 
@@ -104,6 +106,7 @@
   {/if}
 
   <input
+    bind:this={element}
     bind:value
     class="mc-text-input__control"
     aria-invalid={isinvalid}
@@ -165,6 +168,7 @@
 }
 .mc-controls-options__icon {
   fill: var(--forms-color-icon-clear, #666666);
+  color: var(--forms-color-icon-clear, #666666);
 }
 .mc-controls-options__button, .mc-controls-options__icon {
   height: 1.5rem;
@@ -198,10 +202,10 @@
   display: block;
   width: 100%;
   height: 3rem;
-  box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  box-sizing: border-box;
 }
 .mc-text-input__control {
   background-color: transparent;

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

@@ -57,6 +57,7 @@ interface Props {
      * Displays additional text inside the component, after the input.
      */
     suffix?: string;
+    element?: HTMLElement | null;
 }
 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> & {
@@ -75,7 +76,7 @@ declare const Textinput: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {
     icon: {};
-}, {}, "value">;
+}, {}, "value" | "element">;
 type Textinput = InstanceType<typeof Textinput>;
 export default Textinput;
 //# sourceMappingURL=Textinput.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Textinput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.svelte.ts"],"names":[],"mappings":"AAKE;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IACjF;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAmEH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,SAAS;;;;eAAqF,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Textinput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.svelte.ts"],"names":[],"mappings":"AAKE;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IACjF;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;AAoEH,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;;;;2BAAqF,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}

package/dist/components/tile/Tile.js

@@ -1,4 +1,4 @@
-import{c as C,e as j,a as M,p as f,k as u,t as V,b as s,d as Z,f as v,j as l,i as h,r as c,s as B,h as H}from"../../custom-element.js";import{i as z}from"../../if.js";import{a as L,s as p}from"../../slot.js";import"../../branches.js";var D=v('<div class="mc-tile__action svelte-1x4mzpd"><!></div>'),S=v('<div class="mc-tile__content svelte-1x4mzpd"><!></div>'),T=v('<div><div class="mc-tile__header svelte-1x4mzpd"><div class="mc-tile__body svelte-1x4mzpd"><!></div> <!></div> <!></div>');const q={hash:"svelte-1x4mzpd",code:`/**
+import{c as C,e as j,a as M,p as f,s as u,t as V,j as Z,n as B,b as s,d as H,f as v,h as l,m as h,r as c}from"../../custom-element.js";import{i as z}from"../../if.js";import{a as L,s as p}from"../../slot.js";import"../../branches.js";var D=v('<div class="mc-tile__action svelte-1x4mzpd"><!></div>'),S=v('<div class="mc-tile__content svelte-1x4mzpd"><!></div>'),T=v('<div><div class="mc-tile__header svelte-1x4mzpd"><div class="mc-tile__body svelte-1x4mzpd"><!></div> <!></div> <!></div>');const q={hash:"svelte-1x4mzpd",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-tile.svelte-1x4mzpd {border-radius:var(--border-radius-m, 0.5rem);background-color:var(--tile-color-background-primary, #ffffff);}
 @media (prefers-reduced-motion: no-preference) {.mc-tile.svelte-1x4mzpd {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
@@ -107,5 +107,5 @@ import{c as C,e as j,a as M,p as f,k as u,t as V,b as s,d as Z,f as v,j as l,i a
 @media (prefers-reduced-motion: no-preference) {.mc-tile--selectable.svelte-1x4mzpd {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;}
 }
 @media (prefers-reduced-motion: reduce) {.mc-tile--selectable.svelte-1x4mzpd {transition:none;}
-}.mc-tile--selectable.svelte-1x4mzpd {cursor:pointer;position:relative;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;overflow:hidden;box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile--selectable.svelte-1x4mzpd .mc-tile__body:where(.svelte-1x4mzpd) {flex-grow:1;display:flex;flex-direction:column;}.mc-tile--selectable.svelte-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd) {background-color:transparent;box-sizing:border-box;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;border-radius:initial;padding:0.75rem 0.75rem;}.mc-tile--selectable.svelte-1x4mzpd:has(.mc-tile__content:where(.svelte-1x4mzpd)) {flex-direction:column;align-items:stretch;}.mc-tile--selectable.svelte-1x4mzpd:has(.mc-tile__content:where(.svelte-1x4mzpd)) .mc-tile__header:where(.svelte-1x4mzpd) {display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;}.mc-tile--selectable.svelte-1x4mzpd:has(.mc-tile__content:where(.svelte-1x4mzpd)) .mc-tile__header:where(.svelte-1x4mzpd) .mc-tile__body:where(.svelte-1x4mzpd) {display:flex;flex-direction:column;}.mc-tile--selectable.svelte-1x4mzpd:has(.mc-tile__content:where(.svelte-1x4mzpd)) .mc-tile__content:where(.svelte-1x4mzpd) {border-top:1px solid var(--tile-color-border-default, #cccccc);}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-1x4mzpd)).mc-tile--input-left.svelte-1x4mzpd {flex-direction:column;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-1x4mzpd)).mc-tile--input-left.svelte-1x4mzpd .mc-tile__header:where(.svelte-1x4mzpd) {flex-direction:row-reverse;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-1x4mzpd)).mc-tile--input-center.svelte-1x4mzpd {align-items:stretch;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-1x4mzpd)).mc-tile--input-center.svelte-1x4mzpd .mc-tile__header:where(.svelte-1x4mzpd) {align-items:center;}.mc-tile--selectable.mc-tile--input-left.svelte-1x4mzpd {flex-direction:row-reverse;}.mc-tile--selectable.mc-tile--input-center.svelte-1x4mzpd {align-items:center;}.mc-tile--selectable.svelte-1x4mzpd:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--selectable.mc-tile--selected.svelte-1x4mzpd {box-shadow:0 0 0 2px var(--color-brand, #78be20), 0 0 0 4px var(--color-background-accent, #ebf5de);}.mc-tile--selectable.mc-tile--no-input.svelte-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd) {visibility:hidden;position:absolute;}`};function A(x,t){const b=L(t);j(t,!0),M(x,q);let i=f(t,"appearance",7,"primary"),n=f(t,"bordered",7,!0);var g={get appearance(){return i()},set appearance(e="primary"){i(e),h()},get bordered(){return n()},set bordered(e=!0){n(e),h()}},o=T(),d=l(o),a=l(d),w=l(a);p(w,t,"default",{},null),c(a);var _=u(a,2);{var k=e=>{var r=D(),m=l(r);p(m,t,"action",{},null),c(r),s(e,r)};z(_,e=>{b.action&&e(k)})}c(d);var y=u(d,2);{var E=e=>{var r=S(),m=l(r);p(m,t,"details",{},null),c(r),s(e,r)};z(y,e=>{b.details&&e(E)})}return c(o),V(()=>B(o,1,H({"mc-tile":!0,[`mc-tile--${i()}`]:i()!=="primary","mc-tile--bordered":n()}),"svelte-1x4mzpd")),s(x,o),Z(g)}customElements.define("m-tile",C(A,{bordered:{attribute:"bordered",reflect:!0,type:"Boolean"},appearance:{}},["default","action","details"],[],{mode:"open"}));
+}.mc-tile--selectable.svelte-1x4mzpd {cursor:pointer;position:relative;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;overflow:hidden;box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile--selectable.svelte-1x4mzpd .mc-tile__body:where(.svelte-1x4mzpd) {flex-grow:1;display:flex;flex-direction:column;}.mc-tile--selectable.svelte-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd) {background-color:transparent;box-sizing:border-box;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;border-radius:initial;padding:0.75rem 0.75rem;}.mc-tile--selectable.svelte-1x4mzpd:has(.mc-tile__content:where(.svelte-1x4mzpd)) {flex-direction:column;align-items:stretch;}.mc-tile--selectable.svelte-1x4mzpd:has(.mc-tile__content:where(.svelte-1x4mzpd)) .mc-tile__header:where(.svelte-1x4mzpd) {display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;}.mc-tile--selectable.svelte-1x4mzpd:has(.mc-tile__content:where(.svelte-1x4mzpd)) .mc-tile__header:where(.svelte-1x4mzpd) .mc-tile__body:where(.svelte-1x4mzpd) {display:flex;flex-direction:column;}.mc-tile--selectable.svelte-1x4mzpd:has(.mc-tile__content:where(.svelte-1x4mzpd)) .mc-tile__content:where(.svelte-1x4mzpd) {border-top:1px solid var(--tile-color-border-default, #cccccc);}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-1x4mzpd)).mc-tile--input-left.svelte-1x4mzpd {flex-direction:column;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-1x4mzpd)).mc-tile--input-left.svelte-1x4mzpd .mc-tile__header:where(.svelte-1x4mzpd) {flex-direction:row-reverse;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-1x4mzpd)).mc-tile--input-center.svelte-1x4mzpd {align-items:stretch;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-1x4mzpd)).mc-tile--input-center.svelte-1x4mzpd .mc-tile__header:where(.svelte-1x4mzpd) {align-items:center;}.mc-tile--selectable.mc-tile--input-left.svelte-1x4mzpd {flex-direction:row-reverse;}.mc-tile--selectable.mc-tile--input-center.svelte-1x4mzpd {align-items:center;}.mc-tile--selectable.svelte-1x4mzpd:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--selectable.mc-tile--selected.svelte-1x4mzpd {box-shadow:0 0 0 2px var(--color-brand, #78be20), 0 0 0 4px var(--color-background-accent, #ebf5de);}.mc-tile--selectable.mc-tile--no-input.svelte-1x4mzpd .mc-tile__action:where(.svelte-1x4mzpd) {visibility:hidden;position:absolute;}`};function A(x,t){const b=L(t);j(t,!0),M(x,q);let i=f(t,"appearance",7,"primary"),n=f(t,"bordered",7,!0);var g={get appearance(){return i()},set appearance(e="primary"){i(e),h()},get bordered(){return n()},set bordered(e=!0){n(e),h()}},o=T(),d=l(o),a=l(d),w=l(a);p(w,t,"default",{},null),c(a);var _=u(a,2);{var k=e=>{var r=D(),m=l(r);p(m,t,"action",{},null),c(r),s(e,r)};z(_,e=>{b.action&&e(k)})}c(d);var y=u(d,2);{var E=e=>{var r=S(),m=l(r);p(m,t,"details",{},null),c(r),s(e,r)};z(y,e=>{b.details&&e(E)})}return c(o),V(()=>Z(o,1,B({"mc-tile":!0,[`mc-tile--${i()}`]:i()!=="primary","mc-tile--bordered":n()}),"svelte-1x4mzpd")),s(x,o),H(g)}customElements.define("m-tile",C(A,{bordered:{attribute:"bordered",reflect:!0,type:"Boolean"},appearance:{}},["default","action","details"],[],{mode:"open"}));
 //# sourceMappingURL=Tile.js.map

package/dist/components/tileclickable/TileClickable.js

@@ -1,4 +1,4 @@
-import{c as L,e as A,a as T,p as l,y as D,x as j,l as n,k as S,b as q,j as b,d as F,w as f,f as G,i,r as x}from"../../custom-element.js";import{s as _}from"../../slot.js";import{e as I}from"../../svelte-element.js";import{a as J}from"../../attributes.js";import{b as K}from"../../this.js";import"../../branches.js";var N=G('<div class="mc-tile__body svelte-wqkxlj"><!></div> <div class="mc-tile__action svelte-wqkxlj"><div class="mc-tile__action-icon svelte-wqkxlj"><!></div></div>',1);const O={hash:"svelte-wqkxlj",code:`/**
+import{c as L,e as A,a as T,p as l,y as D,x as j,i as n,s as S,b as q,h as b,d as F,w as f,f as G,m as i,r as x}from"../../custom-element.js";import{s as _}from"../../slot.js";import{e as I}from"../../svelte-element.js";import{a as J}from"../../attributes.js";import{b as K}from"../../this.js";import"../../branches.js";var N=G('<div class="mc-tile__body svelte-wqkxlj"><!></div> <div class="mc-tile__action svelte-wqkxlj"><div class="mc-tile__action-icon svelte-wqkxlj"><!></div></div>',1);const O={hash:"svelte-wqkxlj",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-tile.svelte-wqkxlj {border-radius:var(--border-radius-m, 0.5rem);background-color:var(--tile-color-background-primary, #ffffff);}
 @media (prefers-reduced-motion: no-preference) {.mc-tile.svelte-wqkxlj {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}

package/dist/components/tileexpandable/TileExpandable.js

@@ -1,4 +1,4 @@
-import{c as G,e as J,a as K,p as f,k as L,t as H,b as d,d as N,f as m,j as a,i as p,l as t,x as O,r as c,m as Q,s as R,h as W,w as E,q as Y,v as ee}from"../../custom-element.js";import{i as te}from"../../if.js";import{s as $}from"../../slot.js";import{e as le}from"../../svelte-element.js";import{a as re,s as D}from"../../attributes.js";import{B as ie}from"../button/Button.js";import{I as ae}from"../iconbutton/IconButton.js";import{c as I}from"../../Condition20.js";import"../../branches.js";import"../../this.js";import"../loader/Loader.js";var ce=m('<span class="mc-tile__action-button svelte-9ba9gl"><!></span>'),oe=m('<span class="mc-tile__action-label svelte-9ba9gl"> </span>'),ne=m('<span class="mc-tile__action-button svelte-9ba9gl"><!></span>'),se=m('<div class="mc-tile__body svelte-9ba9gl"><!></div> <div class="mc-tile__action svelte-9ba9gl"><!></div>',1),de=m('<div><!> <div class="mc-tile__content svelte-9ba9gl"><!></div></div>');const me={hash:"svelte-9ba9gl",code:`/**
+import{c as G,e as J,a as K,p as f,s as L,t as H,j as N,n as O,i as t,b as d,d as Q,f as m,h as a,v as R,m as p,x as W,r as c,k as Y,w as E,q as ee}from"../../custom-element.js";import{i as te}from"../../if.js";import{s as $}from"../../slot.js";import{e as le}from"../../svelte-element.js";import{s as D,a as re}from"../../attributes.js";import{B as ie}from"../button/Button.js";import{I as ae}from"../iconbutton/IconButton.js";import{c as I}from"../../Condition20.js";import"../../branches.js";import"../../this.js";import"../loader/Loader.js";var ce=m('<span class="mc-tile__action-button svelte-9ba9gl"><!></span>'),oe=m('<span class="mc-tile__action-label svelte-9ba9gl"> </span>'),ne=m('<span class="mc-tile__action-button svelte-9ba9gl"><!></span>'),se=m('<div class="mc-tile__body svelte-9ba9gl"><!></div> <div class="mc-tile__action svelte-9ba9gl"><!></div>',1),de=m('<div><!> <div class="mc-tile__content svelte-9ba9gl"><!></div></div>');const me={hash:"svelte-9ba9gl",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-tile.svelte-9ba9gl {border-radius:var(--border-radius-m, 0.5rem);background-color:var(--tile-color-background-primary, #ffffff);}
 @media (prefers-reduced-motion: no-preference) {.mc-tile.svelte-9ba9gl {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
@@ -110,5 +110,5 @@ import{c as G,e as J,a as K,p as f,k as L,t as H,b as d,d as N,f as m,j as a,i a
 @media (prefers-reduced-motion: no-preference) {.mc-tile--selectable.svelte-9ba9gl {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;}
 }
 @media (prefers-reduced-motion: reduce) {.mc-tile--selectable.svelte-9ba9gl {transition:none;}
-}.mc-tile--selectable.svelte-9ba9gl {cursor:pointer;position:relative;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;overflow:hidden;box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile--selectable.svelte-9ba9gl .mc-tile__body:where(.svelte-9ba9gl) {flex-grow:1;display:flex;flex-direction:column;}.mc-tile--selectable.svelte-9ba9gl .mc-tile__action:where(.svelte-9ba9gl) {background-color:transparent;box-sizing:border-box;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;border-radius:initial;padding:0.75rem 0.75rem;}.mc-tile--selectable.svelte-9ba9gl:has(.mc-tile__content:where(.svelte-9ba9gl)) {flex-direction:column;align-items:stretch;}.mc-tile--selectable.svelte-9ba9gl:has(.mc-tile__content:where(.svelte-9ba9gl)) .mc-tile__header:where(.svelte-9ba9gl) {display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;}.mc-tile--selectable.svelte-9ba9gl:has(.mc-tile__content:where(.svelte-9ba9gl)) .mc-tile__header:where(.svelte-9ba9gl) .mc-tile__body:where(.svelte-9ba9gl) {display:flex;flex-direction:column;}.mc-tile--selectable.svelte-9ba9gl:has(.mc-tile__content:where(.svelte-9ba9gl)) .mc-tile__content:where(.svelte-9ba9gl) {border-top:1px solid var(--tile-color-border-default, #cccccc);}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-9ba9gl)).mc-tile--input-left.svelte-9ba9gl {flex-direction:column;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-9ba9gl)).mc-tile--input-left.svelte-9ba9gl .mc-tile__header:where(.svelte-9ba9gl) {flex-direction:row-reverse;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-9ba9gl)).mc-tile--input-center.svelte-9ba9gl {align-items:stretch;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-9ba9gl)).mc-tile--input-center.svelte-9ba9gl .mc-tile__header:where(.svelte-9ba9gl) {align-items:center;}.mc-tile--selectable.mc-tile--input-left.svelte-9ba9gl {flex-direction:row-reverse;}.mc-tile--selectable.mc-tile--input-center.svelte-9ba9gl {align-items:center;}.mc-tile--selectable.svelte-9ba9gl:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--selectable.mc-tile--selected.svelte-9ba9gl {box-shadow:0 0 0 2px var(--color-brand, #78be20), 0 0 0 4px var(--color-background-accent, #ebf5de);}.mc-tile--selectable.mc-tile--no-input.svelte-9ba9gl .mc-tile__action:where(.svelte-9ba9gl) {visibility:hidden;position:absolute;}`};function be(z,l){J(l,!0),K(z,me);let b=f(l,"appearance",7,"primary"),h=f(l,"bordered",7,!0),r=f(l,"trigger",7,"icon"),x=f(l,"label",7,"See more");const g=crypto.randomUUID();let o=ee(!1);const B=E(()=>r()==="container");function w(){Y(o,!t(o))}var P={get appearance(){return b()},set appearance(e="primary"){b(e),p()},get bordered(){return h()},set bordered(e=!0){h(e),p()},get trigger(){return r()},set trigger(e="icon"){r(e),p()},get label(){return x()},set label(e="See more"){x(e),p()}},v=de(),M=a(v);le(M,()=>t(B)?"button":"div",!1,(e,T)=>{re(e,()=>({class:"mc-tile__header",...t(B)?{type:"button","aria-controls":`content-${g}`,"aria-expanded":t(o),onclick:()=>w()}:{}}),void 0,void 0,void 0,"svelte-9ba9gl");var j=se(),_=O(j),U=a(_);$(U,l,"default",{},null),c(_);var V=L(_,2),X=a(V);{var q=n=>{var i=ce(),k=a(i);{let y=E(()=>`content-${g}`);ae(k,{ghost:!0,get"aria-controls"(){return t(y)},get"aria-expanded"(){return t(o)},onclick:()=>w(),$$slots:{icon:(s,Z)=>{I(s,{slot:"icon"})}}})}c(i),d(n,i)},A=n=>{var i=ne(),k=a(i);{let y=E(()=>`content-${g}`);ie(k,{ghost:!0,iconposition:"right",get"aria-controls"(){return t(y)},get"aria-expanded"(){return t(o)},onclick:()=>w(),children:(s,Z)=>{var C=oe(),F=a(C,!0);c(C),H(()=>Q(F,x())),d(s,C)},$$slots:{default:!0,icon:(s,Z)=>{I(s,{slot:"icon"})}}})}c(i),d(n,i)};te(X,n=>{r()==="icon"?n(q):r()==="button"&&n(A,1)})}c(V),d(T,j)});var u=L(M,2),S=a(u);return $(S,l,"details",{},null),c(u),c(v),H(()=>{R(v,1,W({"mc-tile mc-tile--expandable":!0,[`mc-tile--${b()}`]:b()!=="primary","mc-tile--bordered":h(),[`mc-tile--trigger-${r()}`]:r()!=="container"}),"svelte-9ba9gl"),D(u,"id",`content-${g}`),D(u,"aria-hidden",!t(o))}),d(z,v),N(P)}customElements.define("m-tile-expandable",G(be,{bordered:{attribute:"bordered",reflect:!0,type:"Boolean"},appearance:{},trigger:{},label:{}},["default","details"],[],{mode:"open"}));
+}.mc-tile--selectable.svelte-9ba9gl {cursor:pointer;position:relative;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;overflow:hidden;box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile--selectable.svelte-9ba9gl .mc-tile__body:where(.svelte-9ba9gl) {flex-grow:1;display:flex;flex-direction:column;}.mc-tile--selectable.svelte-9ba9gl .mc-tile__action:where(.svelte-9ba9gl) {background-color:transparent;box-sizing:border-box;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;border-radius:initial;padding:0.75rem 0.75rem;}.mc-tile--selectable.svelte-9ba9gl:has(.mc-tile__content:where(.svelte-9ba9gl)) {flex-direction:column;align-items:stretch;}.mc-tile--selectable.svelte-9ba9gl:has(.mc-tile__content:where(.svelte-9ba9gl)) .mc-tile__header:where(.svelte-9ba9gl) {display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;}.mc-tile--selectable.svelte-9ba9gl:has(.mc-tile__content:where(.svelte-9ba9gl)) .mc-tile__header:where(.svelte-9ba9gl) .mc-tile__body:where(.svelte-9ba9gl) {display:flex;flex-direction:column;}.mc-tile--selectable.svelte-9ba9gl:has(.mc-tile__content:where(.svelte-9ba9gl)) .mc-tile__content:where(.svelte-9ba9gl) {border-top:1px solid var(--tile-color-border-default, #cccccc);}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-9ba9gl)).mc-tile--input-left.svelte-9ba9gl {flex-direction:column;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-9ba9gl)).mc-tile--input-left.svelte-9ba9gl .mc-tile__header:where(.svelte-9ba9gl) {flex-direction:row-reverse;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-9ba9gl)).mc-tile--input-center.svelte-9ba9gl {align-items:stretch;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-9ba9gl)).mc-tile--input-center.svelte-9ba9gl .mc-tile__header:where(.svelte-9ba9gl) {align-items:center;}.mc-tile--selectable.mc-tile--input-left.svelte-9ba9gl {flex-direction:row-reverse;}.mc-tile--selectable.mc-tile--input-center.svelte-9ba9gl {align-items:center;}.mc-tile--selectable.svelte-9ba9gl:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--selectable.mc-tile--selected.svelte-9ba9gl {box-shadow:0 0 0 2px var(--color-brand, #78be20), 0 0 0 4px var(--color-background-accent, #ebf5de);}.mc-tile--selectable.mc-tile--no-input.svelte-9ba9gl .mc-tile__action:where(.svelte-9ba9gl) {visibility:hidden;position:absolute;}`};function be(z,l){J(l,!0),K(z,me);let b=f(l,"appearance",7,"primary"),h=f(l,"bordered",7,!0),r=f(l,"trigger",7,"icon"),x=f(l,"label",7,"See more");const g=crypto.randomUUID();let o=R(!1);const B=E(()=>r()==="container");function w(){ee(o,!t(o))}var P={get appearance(){return b()},set appearance(e="primary"){b(e),p()},get bordered(){return h()},set bordered(e=!0){h(e),p()},get trigger(){return r()},set trigger(e="icon"){r(e),p()},get label(){return x()},set label(e="See more"){x(e),p()}},v=de(),M=a(v);le(M,()=>t(B)?"button":"div",!1,(e,T)=>{re(e,()=>({class:"mc-tile__header",...t(B)?{type:"button","aria-controls":`content-${g}`,"aria-expanded":t(o),onclick:()=>w()}:{}}),void 0,void 0,void 0,"svelte-9ba9gl");var j=se(),_=W(j),U=a(_);$(U,l,"default",{},null),c(_);var V=L(_,2),X=a(V);{var q=n=>{var i=ce(),k=a(i);{let y=E(()=>`content-${g}`);ae(k,{ghost:!0,get"aria-controls"(){return t(y)},get"aria-expanded"(){return t(o)},onclick:()=>w(),$$slots:{icon:(s,Z)=>{I(s,{slot:"icon"})}}})}c(i),d(n,i)},A=n=>{var i=ne(),k=a(i);{let y=E(()=>`content-${g}`);ie(k,{ghost:!0,iconposition:"right",get"aria-controls"(){return t(y)},get"aria-expanded"(){return t(o)},onclick:()=>w(),children:(s,Z)=>{var C=oe(),F=a(C,!0);c(C),H(()=>Y(F,x())),d(s,C)},$$slots:{default:!0,icon:(s,Z)=>{I(s,{slot:"icon"})}}})}c(i),d(n,i)};te(X,n=>{r()==="icon"?n(q):r()==="button"&&n(A,1)})}c(V),d(T,j)});var u=L(M,2),S=a(u);return $(S,l,"details",{},null),c(u),c(v),H(()=>{N(v,1,O({"mc-tile mc-tile--expandable":!0,[`mc-tile--${b()}`]:b()!=="primary","mc-tile--bordered":h(),[`mc-tile--trigger-${r()}`]:r()!=="container"}),"svelte-9ba9gl"),D(u,"id",`content-${g}`),D(u,"aria-hidden",!t(o))}),d(z,v),Q(P)}customElements.define("m-tile-expandable",G(be,{bordered:{attribute:"bordered",reflect:!0,type:"Boolean"},appearance:{},trigger:{},label:{}},["default","details"],[],{mode:"open"}));
 //# sourceMappingURL=TileExpandable.js.map

package/dist/components/tileexpandable/TileExpandable.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileExpandable.js","sources":["../../../src/components/tileexpandable/TileExpandable.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-tile-expandable',\n    props: {\n      bordered: { reflect: true, type: 'Boolean', attribute: 'bordered' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  import { ChevronDown24 } from '@mozaic-ds/icons-svelte';\n\n  /**\n   * A tile is a container component used to group related content and actions within a structured layout. It provides a clickable or static area that can display text, images, icons, or interactive elements. Tiles are commonly used to present key information, navigate to detailed views, or trigger specific actions in dashboards, cards, and grid-based layouts. Their adaptable design allows them to accommodate various content types while maintaining a consistent and organized interface.\n   * @slot default - Default slot for the main content of the tile.\n   * @slot details - Named slot for expandable content shown when the tile is opened.\n   */\n\n  interface Props {\n    /**\n     * Defines the visual style of the tile.\n     */\n    appearance?: 'primary' | 'secondary';\n    /**\n     * Adds a border around the tile.\n     */\n    bordered?: boolean;\n    /**\n     * Determines how the tile expansion is triggered.\n     */\n    trigger?: 'container' | 'icon' | 'button';\n    /**\n     * Label for the action button (only used when trigger is 'button').\n     */\n    label?: string;\n  }\n\n  let {\n    appearance = 'primary',\n    bordered = true,\n    trigger = 'icon',\n    label = 'See more',\n  }: Props = $props();\n\n  const id = crypto.randomUUID();\n\n  let open = $state(false);\n\n  const isContainerTriggered = $derived(trigger === 'container');\n\n  function toggle() {\n    open = !open;\n  }\n</script>\n\n<div\n  class={{\n    'mc-tile mc-tile--expandable': true,\n    [`mc-tile--${appearance}`]: appearance !== 'primary',\n    'mc-tile--bordered': bordered,\n    [`mc-tile--trigger-${trigger}`]: trigger !== 'container',\n  }}\n>\n  <svelte:element\n    this={isContainerTriggered ? 'button' : 'div'}\n    class=\"mc-tile__header\"\n    {...isContainerTriggered\n      ? {\n          type: 'button',\n          ['aria-controls']: `content-${id}`,\n          ['aria-expanded']: open,\n          onclick: () => toggle(),\n        }\n      : {}}\n  >\n    <div class=\"mc-tile__body\">\n      <slot />\n    </div>\n\n    <div class=\"mc-tile__action\">\n      {#if trigger === 'icon'}\n        <span class=\"mc-tile__action-button\">\n          <IconButton\n            ghost\n            aria-controls={`content-${id}`}\n            aria-expanded={open}\n            onclick={() => toggle()}\n          >\n            <ChevronDown24 slot=\"icon\" />\n          </IconButton>\n        </span>\n      {:else if trigger === 'button'}\n        <span class=\"mc-tile__action-button\">\n          <Button\n            ghost\n            iconposition=\"right\"\n            aria-controls={`content-${id}`}\n            aria-expanded={open}\n            onclick={() => toggle()}\n          >\n            <span class=\"mc-tile__action-label\">\n              {label}\n            </span>\n\n            <ChevronDown24 slot=\"icon\" />\n          </Button>\n        </span>\n      {/if}\n    </div>\n  </svelte:element>\n\n  <div class=\"mc-tile__content\" id={`content-${id}`} aria-hidden={!open}>\n    <slot name=\"details\" />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tile';\n</style>\n"],"names":["appearance","bordered","trigger","label","id","open","$.state","isContainerTriggered","$.derived","toggle","$.set","div","root","node","$.child","$$element","$$anchor","$.get","div_1","$.first_child","fragment","div_2","span","root_2","IconButton","node_3","ChevronDown24","span_1","root_4","Button","node_4","span_2","root_5","$$render","consequent","consequent_1","div_3","$.sibling","$.reset","$.set_attribute","$.append"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;s5EASA,iBA+BI,IAAAA,qBAAa,SAAS,EACtBC,mBAAW,EAAI,EACfC,kBAAU,MAAM,EAChBC,gBAAQ,UAAU,QAGdC,EAAK,OAAO,WAAU,MAExBC,EAAOC,GAAO,EAAK,QAEjBC,EAAoBC,EAAA,IAAYN,EAAO,IAAK,WAAW,EAEpD,SAAAO,GAAS,CAChBC,EAAAL,KAAQA,CAAI,CAAA,CACd,sDAde,UAAS,qDACX,GAAI,mDACL,OAAM,+CACR,WAAU,YAcrBM,EAAAC,GAAA,EAAAC,EAAAC,EAAAH,CAAA,aASSJ,CAAoB,EAAG,SAAW,MAAK,GAAA,CAAAQ,EAAAC,IAAA,oCAEzC,GAAAC,EAAAV,CAAA,GAEE,KAAM,SACL,2BAA6BH,CAAE,GAC/B,kBAAkBC,CAAI,EACvB,YAAeI,EAAM,yDAI1BS,EAAGC,EAAAC,CAAA,MAAHF,CAAG,6BAAHA,CAAG,EAIH,IAAAG,IAJAH,EAAG,CAAA,MAIHG,CAAG,iBAECC,EAAIC,GAAA,MAAJD,CAAI,0BAGyBlB,CAAE,EAAA,EAF7BoB,GAAAC,EAAA,0EAGgBpB,CAAI,eACJI,EAAM,wBAEpBiB,EAAaV,EAAA,CAAA,KAAA,MAAA,CAAA,QAPjBM,CAAI,MAAJA,CAAI,aAWJK,EAAIC,GAAA,MAAJD,CAAI,0BAIyBvB,CAAE,EAAA,EAH7ByB,GAAAC,EAAA,+FAIgBzB,CAAI,eACJI,EAAM,uBAEpBsB,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YACF5B,EAAK,CAAA,CAAA,MADP4B,CAAI,oCAIJL,EAAaV,EAAA,CAAA,KAAA,MAAA,CAAA,QAZjBW,CAAI,MAAJA,CAAI,YAZFzB,EAAO,IAAK,OAAM+B,EAAAC,CAAA,EAWbhC,EAAO,IAAK,UAAQ+B,EAAAE,EAAA,CAAA,MAZ/Bd,CAAG,eAgCLe,EAAGC,EAAAxB,EAAA,CAAA,MAAHuB,CAAG,oCAAHA,CAAG,EAxDLE,EAAA3B,CAAA,WAAAA,OAEG,8BAA+B,gBAClBX,EAAU,CAAA,EAAA,EAAKA,EAAU,IAAK,UAC3C,oBAAqBC,EAAQ,uBACRC,EAAO,CAAA,EAAA,EAAKA,EAAO,IAAK,+BAmD9CqC,EAAAH,kBAA4ChC,CAAE,EAAA,EAA9CmC,EAAAH,mBAAgE/B,CAAI,CAAA,IAxDtEmC,EAAAxB,EAAAL,CAAA,MAFO"}
+{"version":3,"file":"TileExpandable.js","sources":["../../../src/components/tileexpandable/TileExpandable.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-tile-expandable',\n    props: {\n      bordered: { reflect: true, type: 'Boolean', attribute: 'bordered' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  import { ChevronDown24 } from '@mozaic-ds/icons-svelte';\n\n  /**\n   * A tile is a container component used to group related content and actions within a structured layout. It provides a clickable or static area that can display text, images, icons, or interactive elements. Tiles are commonly used to present key information, navigate to detailed views, or trigger specific actions in dashboards, cards, and grid-based layouts. Their adaptable design allows them to accommodate various content types while maintaining a consistent and organized interface.\n   * @slot default - Default slot for the main content of the tile.\n   * @slot details - Named slot for expandable content shown when the tile is opened.\n   */\n\n  interface Props {\n    /**\n     * Defines the visual style of the tile.\n     */\n    appearance?: 'primary' | 'secondary';\n    /**\n     * Adds a border around the tile.\n     */\n    bordered?: boolean;\n    /**\n     * Determines how the tile expansion is triggered.\n     */\n    trigger?: 'container' | 'icon' | 'button';\n    /**\n     * Label for the action button (only used when trigger is 'button').\n     */\n    label?: string;\n  }\n\n  let {\n    appearance = 'primary',\n    bordered = true,\n    trigger = 'icon',\n    label = 'See more',\n  }: Props = $props();\n\n  const id = crypto.randomUUID();\n\n  let open = $state(false);\n\n  const isContainerTriggered = $derived(trigger === 'container');\n\n  function toggle() {\n    open = !open;\n  }\n</script>\n\n<div\n  class={{\n    'mc-tile mc-tile--expandable': true,\n    [`mc-tile--${appearance}`]: appearance !== 'primary',\n    'mc-tile--bordered': bordered,\n    [`mc-tile--trigger-${trigger}`]: trigger !== 'container',\n  }}\n>\n  <svelte:element\n    this={isContainerTriggered ? 'button' : 'div'}\n    class=\"mc-tile__header\"\n    {...isContainerTriggered\n      ? {\n          type: 'button',\n          ['aria-controls']: `content-${id}`,\n          ['aria-expanded']: open,\n          onclick: () => toggle(),\n        }\n      : {}}\n  >\n    <div class=\"mc-tile__body\">\n      <slot />\n    </div>\n\n    <div class=\"mc-tile__action\">\n      {#if trigger === 'icon'}\n        <span class=\"mc-tile__action-button\">\n          <IconButton\n            ghost\n            aria-controls={`content-${id}`}\n            aria-expanded={open}\n            onclick={() => toggle()}\n          >\n            <ChevronDown24 slot=\"icon\" />\n          </IconButton>\n        </span>\n      {:else if trigger === 'button'}\n        <span class=\"mc-tile__action-button\">\n          <Button\n            ghost\n            iconposition=\"right\"\n            aria-controls={`content-${id}`}\n            aria-expanded={open}\n            onclick={() => toggle()}\n          >\n            <span class=\"mc-tile__action-label\">\n              {label}\n            </span>\n\n            <ChevronDown24 slot=\"icon\" />\n          </Button>\n        </span>\n      {/if}\n    </div>\n  </svelte:element>\n\n  <div class=\"mc-tile__content\" id={`content-${id}`} aria-hidden={!open}>\n    <slot name=\"details\" />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tile';\n</style>\n"],"names":["appearance","bordered","trigger","label","id","open","$.state","isContainerTriggered","$.derived","toggle","$.set","div","root","node","$.child","$$element","$$anchor","$.get","div_1","$.first_child","fragment","div_2","span","root_2","IconButton","node_3","ChevronDown24","span_1","root_4","Button","node_4","span_2","root_5","$$render","consequent","consequent_1","div_3","$.sibling","$.reset","$.set_attribute","$.append"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;s5EASA,iBA+BI,IAAAA,qBAAa,SAAS,EACtBC,mBAAW,EAAI,EACfC,kBAAU,MAAM,EAChBC,gBAAQ,UAAU,QAGdC,EAAK,OAAO,WAAU,MAExBC,EAAOC,EAAO,EAAK,QAEjBC,EAAoBC,EAAA,IAAYN,EAAO,IAAK,WAAW,EAEpD,SAAAO,GAAS,CAChBC,GAAAL,KAAQA,CAAI,CAAA,CACd,sDAde,UAAS,qDACX,GAAI,mDACL,OAAM,+CACR,WAAU,YAcrBM,EAAAC,GAAA,EAAAC,EAAAC,EAAAH,CAAA,aASSJ,CAAoB,EAAG,SAAW,MAAK,GAAA,CAAAQ,EAAAC,IAAA,oCAEzC,GAAAC,EAAAV,CAAA,GAEE,KAAM,SACL,2BAA6BH,CAAE,GAC/B,kBAAkBC,CAAI,EACvB,YAAeI,EAAM,yDAI1BS,EAAGC,EAAAC,CAAA,MAAHF,CAAG,6BAAHA,CAAG,EAIH,IAAAG,IAJAH,EAAG,CAAA,MAIHG,CAAG,iBAECC,EAAIC,GAAA,MAAJD,CAAI,0BAGyBlB,CAAE,EAAA,EAF7BoB,GAAAC,EAAA,0EAGgBpB,CAAI,eACJI,EAAM,wBAEpBiB,EAAaV,EAAA,CAAA,KAAA,MAAA,CAAA,QAPjBM,CAAI,MAAJA,CAAI,aAWJK,EAAIC,GAAA,MAAJD,CAAI,0BAIyBvB,CAAE,EAAA,EAH7ByB,GAAAC,EAAA,+FAIgBzB,CAAI,eACJI,EAAM,uBAEpBsB,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YACF5B,EAAK,CAAA,CAAA,MADP4B,CAAI,oCAIJL,EAAaV,EAAA,CAAA,KAAA,MAAA,CAAA,QAZjBW,CAAI,MAAJA,CAAI,YAZFzB,EAAO,IAAK,OAAM+B,EAAAC,CAAA,EAWbhC,EAAO,IAAK,UAAQ+B,EAAAE,EAAA,CAAA,MAZ/Bd,CAAG,eAgCLe,EAAGC,EAAAxB,EAAA,CAAA,MAAHuB,CAAG,oCAAHA,CAAG,EAxDLE,EAAA3B,CAAA,WAAAA,OAEG,8BAA+B,gBAClBX,EAAU,CAAA,EAAA,EAAKA,EAAU,IAAK,UAC3C,oBAAqBC,EAAQ,uBACRC,EAAO,CAAA,EAAA,EAAKA,EAAO,IAAK,+BAmD9CqC,EAAAH,kBAA4ChC,CAAE,EAAA,EAA9CmC,EAAAH,mBAAgE/B,CAAI,CAAA,IAxDtEmC,EAAAxB,EAAAL,CAAA,MAFO"}

package/dist/components/tileselectable/TileSelectable.js

@@ -1,4 +1,4 @@
-import{c as J,e as K,a as L,p as m,k as C,t as M,b as v,d as N,f as z,j as d,i as b,r as s,x as O,s as P,h as Q,l as g,w as _}from"../../custom-element.js";import{i as h}from"../../if.js";import{a as V,s as D}from"../../slot.js";import{C as F}from"../checkbox/Checkbox.js";import{R as I}from"../radio/Radio.js";import{c as W}from"../../custom-element-forward-events.js";import"../../branches.js";import"../../attributes.js";import"../../input.js";var X=z('<div class="mc-tile__header svelte-z2cgb1"><div class="mc-tile__body svelte-z2cgb1"><!></div> <div class="mc-tile__action svelte-z2cgb1"><!></div></div>'),Y=z('<div class="mc-tile__body svelte-z2cgb1"><!></div> <div class="mc-tile__action svelte-z2cgb1"><!></div>',1),Z=z('<div class="mc-tile__content svelte-z2cgb1"><!></div>'),$=z("<div><!> <!></div>");const ee={hash:"svelte-z2cgb1",code:`/**
+import{c as J,e as K,a as L,p as m,s as C,t as M,j as N,n as O,b as v,d as P,f as z,h as d,m as b,r as s,x as Q,i as g,w as _}from"../../custom-element.js";import{i as h}from"../../if.js";import{a as V,s as D}from"../../slot.js";import{C as F}from"../checkbox/Checkbox.js";import{R as I}from"../radio/Radio.js";import{c as W}from"../../custom-element-forward-events.js";import"../../branches.js";import"../../attributes.js";import"../../input.js";var X=z('<div class="mc-tile__header svelte-z2cgb1"><div class="mc-tile__body svelte-z2cgb1"><!></div> <div class="mc-tile__action svelte-z2cgb1"><!></div></div>'),Y=z('<div class="mc-tile__body svelte-z2cgb1"><!></div> <div class="mc-tile__action svelte-z2cgb1"><!></div>',1),Z=z('<div class="mc-tile__content svelte-z2cgb1"><!></div>'),$=z("<div><!> <!></div>");const ee={hash:"svelte-z2cgb1",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-tile.svelte-z2cgb1 {border-radius:var(--border-radius-m, 0.5rem);background-color:var(--tile-color-background-primary, #ffffff);}
 @media (prefers-reduced-motion: no-preference) {.mc-tile.svelte-z2cgb1 {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
@@ -104,5 +104,5 @@ import{c as J,e as K,a as L,p as m,k as C,t as M,b as v,d as N,f as z,j as d,i a
 @media (prefers-reduced-motion: no-preference) {.mc-tile--selectable.svelte-z2cgb1 {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;}
 }
 @media (prefers-reduced-motion: reduce) {.mc-tile--selectable.svelte-z2cgb1 {transition:none;}
-}.mc-tile--selectable.svelte-z2cgb1 {cursor:pointer;position:relative;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;overflow:hidden;box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile--selectable.svelte-z2cgb1 .mc-tile__body:where(.svelte-z2cgb1) {flex-grow:1;display:flex;flex-direction:column;}.mc-tile--selectable.svelte-z2cgb1 .mc-tile__action:where(.svelte-z2cgb1) {background-color:transparent;box-sizing:border-box;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;border-radius:initial;padding:0.75rem 0.75rem;}.mc-tile--selectable.svelte-z2cgb1:has(.mc-tile__content:where(.svelte-z2cgb1)) {flex-direction:column;align-items:stretch;}.mc-tile--selectable.svelte-z2cgb1:has(.mc-tile__content:where(.svelte-z2cgb1)) .mc-tile__header:where(.svelte-z2cgb1) {display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;}.mc-tile--selectable.svelte-z2cgb1:has(.mc-tile__content:where(.svelte-z2cgb1)) .mc-tile__header:where(.svelte-z2cgb1) .mc-tile__body:where(.svelte-z2cgb1) {display:flex;flex-direction:column;}.mc-tile--selectable.svelte-z2cgb1:has(.mc-tile__content:where(.svelte-z2cgb1)) .mc-tile__content:where(.svelte-z2cgb1) {border-top:1px solid var(--tile-color-border-default, #cccccc);}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-z2cgb1)).mc-tile--input-left.svelte-z2cgb1 {flex-direction:column;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-z2cgb1)).mc-tile--input-left.svelte-z2cgb1 .mc-tile__header:where(.svelte-z2cgb1) {flex-direction:row-reverse;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-z2cgb1)).mc-tile--input-center.svelte-z2cgb1 {align-items:stretch;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-z2cgb1)).mc-tile--input-center.svelte-z2cgb1 .mc-tile__header:where(.svelte-z2cgb1) {align-items:center;}.mc-tile--selectable.mc-tile--input-left.svelte-z2cgb1 {flex-direction:row-reverse;}.mc-tile--selectable.mc-tile--input-center.svelte-z2cgb1 {align-items:center;}.mc-tile--selectable.svelte-z2cgb1:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--selectable.mc-tile--selected.svelte-z2cgb1 {box-shadow:0 0 0 2px var(--color-brand, #78be20), 0 0 0 4px var(--color-background-accent, #ebf5de);}`};function te(R,r){const S=V(r);K(r,!0),L(R,ee);let c=m(r,"checked",15,!1),x=m(r,"bordered",7,!0),u=m(r,"inputtype",7,"checkbox"),k=m(r,"inputposition",7,"right"),w=m(r,"centered",7);const f=crypto.randomUUID();var T={get checked(){return c()},set checked(e=!1){c(e),b()},get bordered(){return x()},set bordered(e=!0){x(e),b()},get inputtype(){return u()},set inputtype(e="checkbox"){u(e),b()},get inputposition(){return k()},set inputposition(e="right"){k(e),b()},get centered(){return w()},set centered(e){w(e),b()}},p=$(),U=d(p);{var q=e=>{var i=X(),l=d(i),y=d(l);D(y,r,"default",{},null),s(l);var a=C(l,2),j=d(a);{var B=t=>{{let n=_(()=>`checkbox-${f}`);F(t,{get id(){return g(n)},name:"tile-select-group",get checked(){return c()},set checked(o){c(o)}})}},E=t=>{{let n=_(()=>`radio-${f}`);I(t,{get id(){return g(n)},name:"tile-select-group",get checked(){return c()},set checked(o){c(o)}})}};h(j,t=>{u()==="checkbox"?t(B):t(E,!1)})}s(a),s(i),v(e,i)},A=e=>{var i=Y(),l=O(i),y=d(l);D(y,r,"default",{},null),s(l);var a=C(l,2),j=d(a);{var B=t=>{{let n=_(()=>`checkbox-${f}`);F(t,{get id(){return g(n)},name:"tile-select-group",get checked(){return c()},set checked(o){c(o)}})}},E=t=>{{let n=_(()=>`radio-${f}`);I(t,{get id(){return g(n)},name:"tile-select-group",get checked(){return c()},set checked(o){c(o)}})}};h(j,t=>{u()==="checkbox"?t(B):t(E,!1)})}s(a),v(e,i)};h(U,e=>{S.details?e(q):e(A,!1)})}var G=C(U,2);{var H=e=>{var i=Z(),l=d(i);D(l,r,"details",{},null),s(i),v(e,i)};h(G,e=>{S.details&&e(H)})}return s(p),M(()=>P(p,1,Q({"mc-tile mc-tile--selectable":!0,"mc-tile--selected":c(),"mc-tile--bordered":x(),"mc-tile--input-left":k()==="left","mc-tile--input-center":w()}),"svelte-z2cgb1")),v(R,p),N(T)}customElements.define("m-tile-selectable",J(te,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},bordered:{attribute:"bordered",reflect:!0,type:"Boolean"},centered:{attribute:"centered",reflect:!0,type:"Boolean"},inputtype:{},inputposition:{}},["default","details"],[],{mode:"open"},W));
+}.mc-tile--selectable.svelte-z2cgb1 {cursor:pointer;position:relative;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;overflow:hidden;box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc);}.mc-tile--selectable.svelte-z2cgb1 .mc-tile__body:where(.svelte-z2cgb1) {flex-grow:1;display:flex;flex-direction:column;}.mc-tile--selectable.svelte-z2cgb1 .mc-tile__action:where(.svelte-z2cgb1) {background-color:transparent;box-sizing:border-box;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;border-radius:initial;padding:0.75rem 0.75rem;}.mc-tile--selectable.svelte-z2cgb1:has(.mc-tile__content:where(.svelte-z2cgb1)) {flex-direction:column;align-items:stretch;}.mc-tile--selectable.svelte-z2cgb1:has(.mc-tile__content:where(.svelte-z2cgb1)) .mc-tile__header:where(.svelte-z2cgb1) {display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;}.mc-tile--selectable.svelte-z2cgb1:has(.mc-tile__content:where(.svelte-z2cgb1)) .mc-tile__header:where(.svelte-z2cgb1) .mc-tile__body:where(.svelte-z2cgb1) {display:flex;flex-direction:column;}.mc-tile--selectable.svelte-z2cgb1:has(.mc-tile__content:where(.svelte-z2cgb1)) .mc-tile__content:where(.svelte-z2cgb1) {border-top:1px solid var(--tile-color-border-default, #cccccc);}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-z2cgb1)).mc-tile--input-left.svelte-z2cgb1 {flex-direction:column;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-z2cgb1)).mc-tile--input-left.svelte-z2cgb1 .mc-tile__header:where(.svelte-z2cgb1) {flex-direction:row-reverse;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-z2cgb1)).mc-tile--input-center.svelte-z2cgb1 {align-items:stretch;}.mc-tile--selectable:has(.mc-tile__content:where(.svelte-z2cgb1)).mc-tile--input-center.svelte-z2cgb1 .mc-tile__header:where(.svelte-z2cgb1) {align-items:center;}.mc-tile--selectable.mc-tile--input-left.svelte-z2cgb1 {flex-direction:row-reverse;}.mc-tile--selectable.mc-tile--input-center.svelte-z2cgb1 {align-items:center;}.mc-tile--selectable.svelte-z2cgb1:hover {box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc);}.mc-tile--selectable.mc-tile--selected.svelte-z2cgb1 {box-shadow:0 0 0 2px var(--color-brand, #78be20), 0 0 0 4px var(--color-background-accent, #ebf5de);}`};function te(R,r){const S=V(r);K(r,!0),L(R,ee);let c=m(r,"checked",15,!1),x=m(r,"bordered",7,!0),u=m(r,"inputtype",7,"checkbox"),k=m(r,"inputposition",7,"right"),w=m(r,"centered",7);const f=crypto.randomUUID();var T={get checked(){return c()},set checked(e=!1){c(e),b()},get bordered(){return x()},set bordered(e=!0){x(e),b()},get inputtype(){return u()},set inputtype(e="checkbox"){u(e),b()},get inputposition(){return k()},set inputposition(e="right"){k(e),b()},get centered(){return w()},set centered(e){w(e),b()}},p=$(),U=d(p);{var q=e=>{var i=X(),l=d(i),y=d(l);D(y,r,"default",{},null),s(l);var a=C(l,2),j=d(a);{var B=t=>{{let n=_(()=>`checkbox-${f}`);F(t,{get id(){return g(n)},name:"tile-select-group",get checked(){return c()},set checked(o){c(o)}})}},E=t=>{{let n=_(()=>`radio-${f}`);I(t,{get id(){return g(n)},name:"tile-select-group",get checked(){return c()},set checked(o){c(o)}})}};h(j,t=>{u()==="checkbox"?t(B):t(E,-1)})}s(a),s(i),v(e,i)},A=e=>{var i=Y(),l=Q(i),y=d(l);D(y,r,"default",{},null),s(l);var a=C(l,2),j=d(a);{var B=t=>{{let n=_(()=>`checkbox-${f}`);F(t,{get id(){return g(n)},name:"tile-select-group",get checked(){return c()},set checked(o){c(o)}})}},E=t=>{{let n=_(()=>`radio-${f}`);I(t,{get id(){return g(n)},name:"tile-select-group",get checked(){return c()},set checked(o){c(o)}})}};h(j,t=>{u()==="checkbox"?t(B):t(E,-1)})}s(a),v(e,i)};h(U,e=>{S.details?e(q):e(A,-1)})}var G=C(U,2);{var H=e=>{var i=Z(),l=d(i);D(l,r,"details",{},null),s(i),v(e,i)};h(G,e=>{S.details&&e(H)})}return s(p),M(()=>N(p,1,O({"mc-tile mc-tile--selectable":!0,"mc-tile--selected":c(),"mc-tile--bordered":x(),"mc-tile--input-left":k()==="left","mc-tile--input-center":w()}),"svelte-z2cgb1")),v(R,p),P(T)}customElements.define("m-tile-selectable",J(te,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},bordered:{attribute:"bordered",reflect:!0,type:"Boolean"},centered:{attribute:"centered",reflect:!0,type:"Boolean"},inputtype:{},inputposition:{}},["default","details"],[],{mode:"open"},W));
 //# sourceMappingURL=TileSelectable.js.map

package/dist/components/toaster/Toaster.js

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

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

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