@mozaic-ds/web-components 1.4.0 → 1.5.1

package/dist/components/drawer/Drawer.svelte

@@ -10,8 +10,8 @@
 />
 
 <script lang="ts">
-  import type { Snippet } from 'svelte';
   import { ArrowBack24, Cross24 } from '@mozaic-ds/icons-svelte';
+  import { tick } from 'svelte';
   import MOverlay from '../overlay/Overlay.svelte';
   /**
    * A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality.
@@ -47,14 +47,6 @@
      * Title of the content of the drawer.
      */
     contentTitle?: string;
-    /**
-     * Use this snippet to insert the content of the drawer
-     */
-    children?: Snippet;
-    /**
-     * Use this snippet to insert buttons in the footer
-     */
-    footer?: Snippet;
     /**
      * Callback fired when the drawer open state changes.
      */
@@ -72,13 +64,21 @@
     back,
     title,
     contentTitle,
-    children,
-    footer,
     onUpdateOpen,
     onBack,
     ...attrs
   }: Props = $props();
   let element: HTMLElement;
+  let titleEl: HTMLHeadingElement | undefined = undefined;
+
+  $effect(() => {
+    if (!open) return;
+
+    (async () => {
+      await tick();
+      titleEl?.focus();
+    })();
+  });
 
   const onClose = () => {
     open = false;
@@ -114,7 +114,6 @@
   role="dialog"
   aria-labelledby="drawerTitle"
   aria-modal={open ? 'true' : 'false'}
-  tabindex="-1"
   aria-hidden={!open}
   onkeydown={(e) => e.key === 'Escape' && onClose()}
   bind:this={element}
@@ -131,7 +130,7 @@
           <ArrowBack24 />
         </button>
       {/if}
-      <h2 class="mc-drawer__title" id="drawerTitle">{title}</h2>
+      <h2 class="mc-drawer__title" id="drawerTitle" tabIndex="-1" bind:this={titleEl}>{title}</h2>
       <button
         class="mc-drawer__close mc-button mc-button--icon-button mc-button--ghost"
         aria-label="Close"
@@ -146,20 +145,12 @@
         {#if contentTitle}
           <h2 class="mc-drawer__content__title">{contentTitle}</h2>
         {/if}
-        {#if children}
-          {@render children()}
-        {:else}
-          <slot />
-        {/if}
+        <slot />
       </div>
     </div>
 
     <div class="mc-drawer__footer">
-      {#if footer}
-        {@render footer()}
-      {:else}
-        <slot name="footer" />
-      {/if}
+      <slot name="footer" />
     </div>
   </div>
   <MOverlay isvisible={open} dialoglabel="drawerTitle" />
@@ -483,6 +474,9 @@
   border-radius: var(--border-radius-full, 100%);
   padding: 0;
 }
+.mc-button--loading {
+  pointer-events: none;
+}
 .mc-button--loading .mc-button__loader {
   position: absolute;
   color: currentcolor;

package/dist/components/drawer/Drawer.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { Snippet } from 'svelte';
 /**
  * A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality.
  *
@@ -33,14 +32,6 @@ interface Props {
      * Title of the content of the drawer.
      */
     contentTitle?: string;
-    /**
-     * Use this snippet to insert the content of the drawer
-     */
-    children?: Snippet;
-    /**
-     * Use this snippet to insert buttons in the footer
-     */
-    footer?: Snippet;
     /**
      * Callback fired when the drawer open state changes.
      */

package/dist/components/drawer/Drawer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC;;;;;;;GAOG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAsGH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,MAAM;;;;;;;;UAAqF,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAOE;;;;;;;GAOG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAsGH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,MAAM;;;;;;;;UAAqF,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}

package/dist/components/drawer/README.md

@@ -12,8 +12,6 @@ A drawer is a sliding panel that appears from the side of the screen, providing
 | `back` | If `true`, display the back button. | `boolean` |   |
 | `title*` | Title of the drawer. | `string` |   |
 | `contentTitle` | Title of the content of the drawer. | `string` |   |
-| `children` | Use this snippet to insert the content of the drawer | `Snippet` |   |
-| `footer` | Use this snippet to insert buttons in the footer | `Snippet` |   |
 | `onUpdateOpen` | Callback fired when the drawer open state changes. | `(open: boolean) => void` |   |
 | `onBack` | Callback fired when the back button is clicked. | `() => void` |   |
 

package/dist/components/field/Field.js

@@ -1,7 +1,7 @@
-import{c as Q,p as R,a as T,b as t,s as v,t as p,f as r,g as U,h as x,d as n,j as a,r as d,e as b,k as D,l as F,n as W,o as X}from"../../custom-element.js";import{s as Y}from"../../snippet.js";import{i as o}from"../../if.js";import{s as $}from"../../slot.js";import{s as B}from"../../attributes.js";import{L as ee}from"../loader/Loader.js";var ie=x('<span class="mc-field__requirement svelte-19i2lwv" aria-hidden="true"> </span>'),le=x('<span class="mc-field__help svelte-19i2lwv"> </span>'),te=x("<span><!> </span>"),ae=x('<div class="mc-field"><label class="mc-field__label svelte-19i2lwv"> <!></label> <!> <div class="mc-field__content svelte-19i2lwv"><!></div> <!></div>');const se={hash:"svelte-19i2lwv",code:`/**
+import{c as J,p as K,a as N,b as t,s as d,t as h,f as u,g as O,h as b,d as r,j as a,r as n,e as w,l as P,m as Q}from"../../custom-element.js";import{i as p}from"../../if.js";import{s as R}from"../../slot.js";import{s as B}from"../../attributes.js";import{L as T}from"../loader/Loader.js";import"../../branches.js";var U=b('<span class="mc-field__requirement svelte-19i2lwv" aria-hidden="true"> </span>'),W=b('<span class="mc-field__help svelte-19i2lwv"> </span>'),X=b("<span><!> </span>"),Y=b('<div class="mc-field"><label class="mc-field__label svelte-19i2lwv"> <!></label> <!> <div class="mc-field__content svelte-19i2lwv"><!></div> <!></div>');const $={hash:"svelte-19i2lwv",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-field__label.svelte-19i2lwv {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000);}.mc-field__requirement.svelte-19i2lwv, .mc-field__help.svelte-19i2lwv {font-size:var(--font-size-50, 0.75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666);}.mc-field__help.svelte-19i2lwv {display:block;margin-top:0.125rem;}.mc-field__content.svelte-19i2lwv {margin-top:0.5rem;}.mc-field__validation-message.svelte-19i2lwv {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:0.25rem;margin-top:0.25rem;}.mc-field__validation-message.is-valid.svelte-19i2lwv::before, .mc-field__validation-message.is-invalid.svelte-19i2lwv::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-19i2lwv {color:var(--field-color-validation-valid, #117f03);}.mc-field__validation-message.is-valid.svelte-19i2lwv::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");}.mc-field__validation-message.is-invalid.svelte-19i2lwv {color:var(--field-color-validation-invalid, #c61112);}.mc-field__validation-message.is-invalid.svelte-19i2lwv::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");}
 
-/* stylelint-enable string-no-newline */`};function re(M,l){R(l,!0),T(M,se);let y=t(l,"id",7),q=t(l,"label",7),m=t(l,"requirementtext",7),g=t(l,"helpid",7),c=t(l,"helptext",7),z=t(l,"messageid",7),E=t(l,"message",7),f=t(l,"isinvalid",7),_=t(l,"isvalid",7),h=t(l,"isloading",7),u=t(l,"children",7);var S={get id(){return y()},set id(e){y(e),a()},get label(){return q()},set label(e){q(e),a()},get requirementtext(){return m()},set requirementtext(e){m(e),a()},get helpid(){return g()},set helpid(e){g(e),a()},get helptext(){return c()},set helptext(e){c(e),a()},get messageid(){return z()},set messageid(e){z(e),a()},get message(){return E()},set message(e){E(e),a()},get isinvalid(){return f()},set isinvalid(e){f(e),a()},get isvalid(){return _()},set isvalid(e){_(e),a()},get isloading(){return h()},set isloading(e){h(e),a()},get children(){return u()},set children(e){u(e),a()}},Z=ae(),w=n(Z),L=n(w),V=v(L);{var A=e=>{var i=ie(),s=n(i,!0);d(i),p(()=>b(s,m())),r(e,i)};o(V,e=>{m()&&e(A)})}d(w);var j=v(w,2);{var G=e=>{var i=le(),s=n(i,!0);d(i),p(()=>{B(i,"id",g()),b(s,c())}),r(e,i)};o(j,e=>{g()&&c()&&e(G)})}var C=v(j,2),H=n(C);{var I=e=>{var i=D(),s=F(i);Y(s,u),r(e,i)},J=e=>{var i=D(),s=F(i);$(s,l,"default",{},null),r(e,i)};o(H,e=>{u()?e(I):e(J,!1)})}d(C);var K=v(C,2);{var N=e=>{var i=te(),s=n(i);{var O=k=>{ee(k,{size:"xs"})};o(s,k=>{h()&&k(O)})}var P=v(s);d(i),p(()=>{B(i,"id",z()),W(i,1,X(["mc-field__validation-message",_()&&"is-valid",f()&&"is-invalid"]),"svelte-19i2lwv"),b(P,` ${E()??""}`)}),r(e,i)};o(K,e=>{(f()||_()||h())&&e(N)})}return d(Z),p(()=>{B(w,"for",y()),b(L,`${q()??""} `)}),r(M,Z),U(S)}customElements.define("m-field",Q(re,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},isvalid:{attribute:"isvalid",reflect:!0,type:"Boolean"},isloading:{attribute:"isloading",reflect:!0,type:"Boolean"},id:{},label:{},requirementtext:{},helpid:{},helptext:{},messageid:{},message:{},children:{}},["default"],[],!0));
+/* stylelint-enable string-no-newline */`};function ee(M,l){K(l,!0),N(M,$);let x=t(l,"id",7),y=t(l,"label",7),v=t(l,"requirementtext",7),o=t(l,"helpid",7),m=t(l,"helptext",7),q=t(l,"messageid",7),z=t(l,"message",7),g=t(l,"isinvalid",7),c=t(l,"isvalid",7),f=t(l,"isloading",7);var j={get id(){return x()},set id(e){x(e),a()},get label(){return y()},set label(e){y(e),a()},get requirementtext(){return v()},set requirementtext(e){v(e),a()},get helpid(){return o()},set helpid(e){o(e),a()},get helptext(){return m()},set helptext(e){m(e),a()},get messageid(){return q()},set messageid(e){q(e),a()},get message(){return z()},set message(e){z(e),a()},get isinvalid(){return g()},set isinvalid(e){g(e),a()},get isvalid(){return c()},set isvalid(e){c(e),a()},get isloading(){return f()},set isloading(e){f(e),a()}},E=Y(),_=r(E),k=r(_),D=d(k);{var F=e=>{var i=U(),s=r(i,!0);n(i),h(()=>w(s,v())),u(e,i)};p(D,e=>{v()&&e(F)})}n(_);var L=d(_,2);{var S=e=>{var i=W(),s=r(i,!0);n(i),h(()=>{B(i,"id",o()),w(s,m())}),u(e,i)};p(L,e=>{o()&&m()&&e(S)})}var Z=d(L,2),V=r(Z);R(V,l,"default",{},null),n(Z);var A=d(Z,2);{var G=e=>{var i=X(),s=r(i);{var H=C=>{T(C,{size:"xs"})};p(s,C=>{f()&&C(H)})}var I=d(s);n(i),h(()=>{B(i,"id",q()),P(i,1,Q(["mc-field__validation-message",c()&&"is-valid",g()&&"is-invalid"]),"svelte-19i2lwv"),w(I,` ${z()??""}`)}),u(e,i)};p(A,e=>{(g()||c()||f())&&e(G)})}return n(E),h(()=>{B(_,"for",x()),w(k,`${y()??""} `)}),u(M,E),O(j)}customElements.define("m-field",J(ee,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},isvalid:{attribute:"isvalid",reflect:!0,type:"Boolean"},isloading:{attribute:"isloading",reflect:!0,type:"Boolean"},id:{},label:{},requirementtext:{},helpid:{},helptext:{},messageid:{},message:{}},["default"],[],!0));
 //# sourceMappingURL=Field.js.map

package/dist/components/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../src/components/field/Field.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-field',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      isvalid: { reflect: true, type: 'Boolean', attribute: 'isvalid' },\n      isloading: { reflect: true, type: 'Boolean', attribute: 'isloading' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  import Loader from '../loader/Loader.svelte';\n\n  /**\n   * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.\n   *\n   * @slot default - Use this slot to insert the form element of your choice\n   */\n  interface Props {\n    /**\n     * A unique identifier for the form field, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The text displayed as the label for the form field.\n     */\n    label: string;\n    /**\n     * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional\n     */\n    requirementtext?: string;\n    /**\n     * Text shown below the form field to provide additional context or instructions for the user.\n     */\n    helptext?: string;\n    /**\n     * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._\n     */\n    helpid?: string;\n    /**\n     * If `true`, applies a valid state to the form field.\n     */\n    isvalid?: boolean;\n    /**\n     * If `true`, applies an invalid state to the form field.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, applies a loading state to the form field.\n     */\n    isloading?: boolean;\n    /**\n     * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._\n     */\n    messageid?: string;\n    /**\n     * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.\n     */\n    message?: string;\n    /**\n     * Use this snippet to insert the form element of your choice\n     */\n    children?: Snippet;\n  }\n\n  let {\n    id,\n    label,\n    requirementtext,\n    helpid,\n    helptext,\n    messageid,\n    message,\n    isinvalid,\n    isvalid,\n    isloading,\n    children,\n  }: Props = $props();\n</script>\n\n<div class=\"mc-field\">\n  <label for={id} class=\"mc-field__label\">\n    {label}\n    {#if requirementtext}\n      <span class=\"mc-field__requirement\" aria-hidden=\"true\">\n        {requirementtext}\n      </span>\n    {/if}\n  </label>\n\n  {#if helpid && helptext}\n    <span id={helpid} class=\"mc-field__help\">\n      {helptext}\n    </span>\n  {/if}\n\n  <div class=\"mc-field__content\">\n    {#if children}\n      {@render children()}\n    {:else}\n      <slot />\n    {/if}\n  </div>\n\n  {#if isinvalid || isvalid || isloading}\n    <span\n      id={messageid}\n      class={['mc-field__validation-message', isvalid && 'is-valid', isinvalid && 'is-invalid']}\n    >\n      {#if isloading}\n        <Loader size=\"xs\" />\n      {/if}\n      {message}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["id","$.prop","$$props","label","requirementtext","helpid","helptext","messageid","message","isinvalid","isvalid","isloading","children","div","root","label_1","span","root_1","$$render","consequent","span_1","root_2","$.set_attribute","consequent_1","div_1","$.sibling","node_1","consequent_2","alternate","span_2","root_5","node_6","$.child","Loader","$$anchor","consequent_3","$.reset","$.append","consequent_4"],"mappings":";;;;;2DAWA,qBAyDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,EAAeH,EAAAC,EAAA,kBAAA,CAAA,EACfG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAOP,EAAAC,EAAA,UAAA,CAAA,EACPO,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAOT,EAAAC,EAAA,UAAA,CAAA,EACPS,EAASV,EAAAC,EAAA,YAAA,CAAA,EACTU,EAAQX,EAAAC,EAAA,WAAA,CAAA,2kBAIXW,EAAGC,GAAA,EACDC,IADFF,CAAG,MACDE,CAAK,wBAGDC,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YACFZ,EAAe,CAAA,CAAA,MADjBY,CAAI,WADFZ,EAAe,GAAAc,EAAAC,CAAA,MAFrBJ,CAAK,UAALA,EAAK,CAAA,iBAUHK,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,SAAJE,EAAAF,OAASf,GAAM,MACbC,GAAQ,QADVc,CAAI,WADFf,EAAM,GAAIC,KAAQY,EAAAK,CAAA,QAMtBC,EAAGC,EAAAC,EAAA,CAAA,MAAHF,CAAG,kCAESZ,CAAQ,0EADdA,EAAQ,EAAAM,EAAAS,CAAA,EAAAT,EAAAU,EAAA,EAAA,MADdJ,CAAG,UAAHA,EAAG,CAAA,aASD,IAAAK,EAAAC,GAAA,EAAAC,EAAAC,EAAAH,CAAA,aAKII,GAAMC,EAAA,CAAA,KAAA,IAAA,CAAA,WADJvB,EAAS,GAAAO,EAAAiB,CAAA,eAJfC,EAAAP,CAAA,SAAAP,EAAAO,EAAA,KACKtB,GAAS,IADdsB,OAES,+BAAgCnB,EAAO,GAAI,WAAYD,KAAa,yCAK3ED,EAAO,GAAA,EAAA,EAAA,IAPT6B,EAAAH,EAAAL,CAAA,YADEpB,EAAS,GAAIC,EAAO,GAAIC,EAAS,IAAAO,EAAAoB,CAAA,aAxBvCzB,CAAG,SACDS,EAAAP,QAAWf,GAAE,SACXG,EAAK,GAAA,EAAA,GAAA,QAFTU,CAAG,MAFI"}
+{"version":3,"file":"Field.js","sources":["../../../src/components/field/Field.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-field',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      isvalid: { reflect: true, type: 'Boolean', attribute: 'isvalid' },\n      isloading: { reflect: true, type: 'Boolean', attribute: 'isloading' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n\n  /**\n   * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.\n   *\n   * @slot default - Use this slot to insert the form element of your choice\n   */\n  interface Props {\n    /**\n     * A unique identifier for the form field, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The text displayed as the label for the form field.\n     */\n    label: string;\n    /**\n     * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional\n     */\n    requirementtext?: string;\n    /**\n     * Text shown below the form field to provide additional context or instructions for the user.\n     */\n    helptext?: string;\n    /**\n     * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._\n     */\n    helpid?: string;\n    /**\n     * If `true`, applies a valid state to the form field.\n     */\n    isvalid?: boolean;\n    /**\n     * If `true`, applies an invalid state to the form field.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, applies a loading state to the form field.\n     */\n    isloading?: boolean;\n    /**\n     * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._\n     */\n    messageid?: string;\n    /**\n     * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.\n     */\n    message?: string;\n  }\n\n  let {\n    id,\n    label,\n    requirementtext,\n    helpid,\n    helptext,\n    messageid,\n    message,\n    isinvalid,\n    isvalid,\n    isloading,\n  }: Props = $props();\n</script>\n\n<div class=\"mc-field\">\n  <label for={id} class=\"mc-field__label\">\n    {label}\n    {#if requirementtext}\n      <span class=\"mc-field__requirement\" aria-hidden=\"true\">\n        {requirementtext}\n      </span>\n    {/if}\n  </label>\n\n  {#if helpid && helptext}\n    <span id={helpid} class=\"mc-field__help\">\n      {helptext}\n    </span>\n  {/if}\n\n  <div class=\"mc-field__content\">\n    <slot />\n  </div>\n\n  {#if isinvalid || isvalid || isloading}\n    <span\n      id={messageid}\n      class={['mc-field__validation-message', isvalid && 'is-valid', isinvalid && 'is-invalid']}\n    >\n      {#if isloading}\n        <Loader size=\"xs\" />\n      {/if}\n      {message}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["id","$.prop","$$props","label","requirementtext","helpid","helptext","messageid","message","isinvalid","isvalid","isloading","div","root","label_1","span","root_1","$$render","consequent","span_1","root_2","$.set_attribute","consequent_1","div_1","$.sibling","node_1","span_2","root_3","node_4","$.child","Loader","$$anchor","consequent_2","$.reset","$.append","consequent_3"],"mappings":";;;;;2DAWA,oBAoDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,EAAeH,EAAAC,EAAA,kBAAA,CAAA,EACfG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAOP,EAAAC,EAAA,UAAA,CAAA,EACPO,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAOT,EAAAC,EAAA,UAAA,CAAA,EACPS,EAASV,EAAAC,EAAA,YAAA,CAAA,shBAIZU,EAAGC,EAAA,EACDC,IADFF,CAAG,MACDE,CAAK,wBAGDC,EAAIC,EAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YACFX,EAAe,CAAA,CAAA,MADjBW,CAAI,WADFX,EAAe,GAAAa,EAAAC,CAAA,MAFrBJ,CAAK,UAALA,EAAK,CAAA,iBAUHK,EAAIC,EAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,SAAJE,EAAAF,OAASd,GAAM,MACbC,GAAQ,QADVa,CAAI,WADFd,EAAM,GAAIC,KAAQW,EAAAK,CAAA,QAMtBC,EAAGC,EAAAC,EAAA,CAAA,MAAHF,CAAG,6BAAHA,CAAG,UAAHA,EAAG,CAAA,aAKD,IAAAG,EAAAC,EAAA,EAAAC,EAAAC,EAAAH,CAAA,aAKII,EAAMC,EAAA,CAAA,KAAA,IAAA,CAAA,WADJpB,EAAS,GAAAM,EAAAe,CAAA,eAJfC,EAAAP,CAAA,SAAAL,EAAAK,EAAA,KACKnB,GAAS,IADdmB,OAES,+BAAgChB,EAAO,GAAI,WAAYD,KAAa,yCAK3ED,EAAO,GAAA,EAAA,EAAA,IAPT0B,EAAAH,EAAAL,CAAA,YADEjB,EAAS,GAAIC,EAAO,GAAIC,EAAS,IAAAM,EAAAkB,CAAA,aApBvCvB,CAAG,SACDS,EAAAP,QAAWd,GAAE,SACXG,EAAK,GAAA,EAAA,GAAA,QAFTS,CAAG,MAFI"}

package/dist/components/field/Field.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.stories.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,gBAAgB,CAAC;AACxB,OAAO,+BAA+B,CAAC;AAEvC,QAAA,MAAM,IAAI,EAAE,IA6BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC"}
+{"version":3,"file":"Field.stories.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,gBAAgB,CAAC;AACxB,OAAO,+BAA+B,CAAC;AAEvC,QAAA,MAAM,IAAI,EAAE,IA6BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAiB1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC"}

package/dist/components/field/Field.stories.js

@@ -52,6 +52,7 @@ export const InputFull = {
         label: 'Label',
         requirementtext: 'optional',
         helptext: 'Help text',
+        helpid: 'inputFullId',
         id: 'inputFullId',
         default: `
       <m-textinput
@@ -66,6 +67,7 @@ export const InputValid = {
         label: 'Label',
         requirementtext: 'required',
         helptext: 'Help text',
+        helpid: 'inputvalidId',
         id: 'inputvalidId',
         isvalid: true,
         message: 'Validation message (Be concise and use comprehensive words).',
@@ -82,6 +84,7 @@ export const InputInvalid = {
         label: 'Label',
         requirementtext: 'required',
         helptext: 'Help text',
+        helpid: 'inputInvalidId',
         id: 'inputInvalidId',
         isinvalid: true,
         message: 'Error message (Be concise and use comprehensive words)',

package/dist/components/field/Field.svelte

@@ -10,7 +10,6 @@
 />
 
 <script lang="ts">
-  import type { Snippet } from 'svelte';
   import Loader from '../loader/Loader.svelte';
 
   /**
@@ -59,10 +58,6 @@
      * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.
      */
     message?: string;
-    /**
-     * Use this snippet to insert the form element of your choice
-     */
-    children?: Snippet;
   }
 
   let {
@@ -76,7 +71,6 @@
     isinvalid,
     isvalid,
     isloading,
-    children,
   }: Props = $props();
 </script>
 
@@ -97,11 +91,7 @@
   {/if}
 
   <div class="mc-field__content">
-    {#if children}
-      {@render children()}
-    {:else}
-      <slot />
-    {/if}
+    <slot />
   </div>
 
   {#if isinvalid || isvalid || isloading}

package/dist/components/field/Field.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { Snippet } from 'svelte';
 /**
  * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.
  *
@@ -45,10 +44,6 @@ interface Props {
      * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.
      */
     message?: string;
-    /**
-     * Use this snippet to insert the form element of your choice
-     */
-    children?: Snippet;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/components/field/Field.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;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;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;UAAqF,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Field.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.svelte.ts"],"names":[],"mappings":"AAME;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AA8DH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;UAAqF,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}

package/dist/components/field/README.md

@@ -16,7 +16,6 @@ A field label is a text element that identifies the purpose of an input field, p
 | `isloading` | If `true`, applies a loading state to the form field. | `boolean` |   |
 | `messageid` | The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._ | `string` |   |
 | `message` | message displayed when the form field has a valid or invalid state, usually indicating validation or errors. | `string` |   |
-| `children` | Use this snippet to insert the form element of your choice | `Snippet` |   |
 
 ## Slots
 

package/dist/components/fileuploader/FileUploader.js

@@ -1,4 +1,4 @@
-import{u as Ae,c as Ie,p as Me,a as Se,b as l,A as Ve,q as n,s as k,t as V,B,f as u,g as Be,x as L,h as le,d as h,v as O,aJ as ue,j as a,w as ce,l as P,r as c,e as y,n as fe,o as me,k as ee,aI as be}from"../../custom-element.js";import{i as ve}from"../../if.js";import{e as Le,i as Oe}from"../../each.js";import{s as te}from"../../slot.js";import{s as re}from"../../attributes.js";import{b as he}from"../../this.js";import{F as Pe}from"../fileuploaderitem/FileUploaderItem.js";import{U as qe}from"../../Condition20.js";import"../../svelte-component.js";import"../button/Button.js";import"../../snippet.js";import"../loader/Loader.js";import"../divider/Divider.js";var Je=le('<span class="mc-file-uploader__input-title svelte-1hihzzl"> </span> <span class="mc-file-uploader__input-subtitle svelte-1hihzzl"> </span>',1),Ke=le('<div class="mc-file-uploader__files-list svelte-1hihzzl"></div>'),Ne=le('<div><div class="mc-file-uploader__container"><input type="file" aria-label="File input" class="mc-file-uploader__hidden-input svelte-1hihzzl"/> <div tabindex="0" role="button"><!> <div class="mc-button mc-button--outlined mc-file-uploader__button svelte-1hihzzl"><!> <span class="mc-button__label svelte-1hihzzl"> </span></div></div></div> <!></div>');const Te={hash:"svelte-1hihzzl",code:`/**
+import{o as Me,c as Ae,p as Se,a as Ve,b as l,A as Be,n,s as k,t as B,B as I,f as u,g as Ie,v as L,h as le,d as h,q as N,aN as ue,j as a,u as ce,y as O,r as c,e as y,l as fe,m as me,x as ee,aM as be}from"../../custom-element.js";import{i as ve}from"../../if.js";import{e as Le,i as Ne}from"../../each.js";import{s as te}from"../../slot.js";import{s as re}from"../../attributes.js";import{b as he}from"../../this.js";import{F as Oe}from"../fileuploaderitem/FileUploaderItem.js";import{U as Pe}from"../../Condition20.js";import"../../branches.js";import"../../svelte-component.js";import"../button/Button.js";import"../loader/Loader.js";import"../divider/Divider.js";var qe=le('<span class="mc-file-uploader__input-title svelte-1hihzzl"> </span> <span class="mc-file-uploader__input-subtitle svelte-1hihzzl"> </span>',1),Ke=le('<div class="mc-file-uploader__files-list svelte-1hihzzl"></div>'),Te=le('<div><div class="mc-file-uploader__container"><input type="file" aria-label="File input" class="mc-file-uploader__hidden-input svelte-1hihzzl"/> <div tabindex="0" role="button"><!> <div class="mc-button mc-button--outlined mc-file-uploader__button svelte-1hihzzl"><!> <span class="mc-button__label svelte-1hihzzl"> </span></div></div></div> <!></div>');const Ge={hash:"svelte-1hihzzl",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-file-uploader.svelte-1hihzzl {display:flex;flex-direction:column;gap:1rem;width:18rem;}.mc-file-uploader__files-list.svelte-1hihzzl {display:flex;flex-direction:column;gap:1rem;}.mc-file-uploader__hidden-input.svelte-1hihzzl {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-file-uploader__input.svelte-1hihzzl {display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);border-radius:var(--border-radius-m, 0.5rem);color:var(--file-uploader-color-drag-and-drop-text-default, #242938);}.mc-file-uploader__input.svelte-1hihzzl .mc-file-uploader__button:where(.svelte-1hihzzl) {width:100%;}.mc-file-uploader__input--disabled.svelte-1hihzzl .mc-file-uploader__button.mc-button.mc-button--outlined:where(.svelte-1hihzzl) {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-file-uploader__input-title.svelte-1hihzzl {height:1.125rem;font-size:var(--font-size-150, 1rem);}.mc-file-uploader__input-subtitle.svelte-1hihzzl {height:1.125rem;font-size:var(--font-size-100, 0.875rem);}.mc-file-uploader--draggable.svelte-1hihzzl {width:25rem;}.mc-file-uploader--draggable.svelte-1hihzzl .mc-file-uploader__input:where(.svelte-1hihzzl) {padding:2rem;outline:0.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);display:flex;}.mc-file-uploader--draggable.svelte-1hihzzl .mc-file-uploader__input--disabled:where(.svelte-1hihzzl) {outline-color:var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);color:var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);cursor:not-allowed;}.mc-file-uploader--draggable.svelte-1hihzzl .mc-file-uploader__input--dragged:where(.svelte-1hihzzl) {outline-width:0.25rem;}.mc-button.svelte-1hihzzl {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1hihzzl:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1hihzzl:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1hihzzl: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-1hihzzl {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1hihzzl .mc-button__label:where(.svelte-1hihzzl) {font-size:var(--font-size-150, 1rem);}.mc-button.svelte-1hihzzl {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-1hihzzl {font-size:var(--font-size-150, 1rem);}.mc-button.svelte-1hihzzl: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-1hihzzl: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--outlined.svelte-1hihzzl {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-1hihzzl:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1hihzzl:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1hihzzl:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function Ge(ae,t){Me(t,!0),Se(ae,Te);let i=l(t,"files",15),q=l(t,"accept",7),g=l(t,"multiple",7),D=l(t,"allowedextensions",7),E=l(t,"maxsize",7),J=l(t,"rules",7),f=l(t,"hasdragdrop",7,!0),K=l(t,"showfileslist",7,!0),m=l(t,"disabled",7),N=l(t,"title",7,"Drag & drop"),T=l(t,"subtitle",7,"or"),G=l(t,"uploadbuttonlabel",7,"Upload file(s)"),H=l(t,"format",7,"inline"),Q=l(t,"errormessage",7),R=l(t,"deletebuttonlabel",7),F=l(t,"information",7),W=l(t,"onvalidation",7),X=l(t,"onfilesupdate",7),U,C=L(()=>pe(i())),j,A=ce(!1),I=ce(0);function pe(e=[]){const r={};return e.forEach(o=>{const v=o.name.split(".").pop()?.toLowerCase()||"";r[o.name]={size:E()&&o.size?o.size<=E():!0,extension:D()?D().includes(v):!0,customValidation:J()?.every(p=>p(o))??!0}}),r}Ve(()=>{X()?.(i());const e=new CustomEvent("files-update",{detail:i(),bubbles:!0,composed:!0});if(U.dispatchEvent(e),i()?.length>0){W()?.(n(C));const r=new CustomEvent("validation",{detail:n(C),bubbles:!0,composed:!0});U.dispatchEvent(r)}});function ge(e){f()&&(e.preventDefault(),ue(I),O(A,!0))}function ze(e){f()&&(e.preventDefault(),ue(I,-1),n(I)===0&&O(A,!1))}function oe(e){return i()?.every(r=>r.name!==e.name)}function _e(e){const r=e.target,o=Array.from(r.files||[]).filter(oe);if(!o.length){r.value="";return}i(g()?[...i(),...o]:o.slice(0,1)),r.value=""}function xe(e){e.preventDefault()}function we(e){if(!f()||(e.preventDefault(),e.stopPropagation(),O(I,0),O(A,!1),m()))return;const r=Array.from(e.dataTransfer?.files||[]).filter(oe);r.length&&i(g()?[...i(),...r]:[r[0]])}function ke(e){(e.key===" "||e.key==="Enter")&&(e.preventDefault(),j.click())}function ye(e){i(i()?.filter((r,o)=>o!==e))}function De(e){return Object.values(n(C)[e.name]??{}).every(Boolean)}var Ee={get files(){return i()},set files(e){i(e),a()},get accept(){return q()},set accept(e){q(e),a()},get multiple(){return g()},set multiple(e){g(e),a()},get allowedextensions(){return D()},set allowedextensions(e){D(e),a()},get maxsize(){return E()},set maxsize(e){E(e),a()},get rules(){return J()},set rules(e){J(e),a()},get hasdragdrop(){return f()},set hasdragdrop(e=!0){f(e),a()},get showfileslist(){return K()},set showfileslist(e=!0){K(e),a()},get disabled(){return m()},set disabled(e){m(e),a()},get title(){return N()},set title(e="Drag & drop"){N(e),a()},get subtitle(){return T()},set subtitle(e="or"){T(e),a()},get uploadbuttonlabel(){return G()},set uploadbuttonlabel(e="Upload file(s)"){G(e),a()},get format(){return H()},set format(e="inline"){H(e),a()},get errormessage(){return Q()},set errormessage(e){Q(e),a()},get deletebuttonlabel(){return R()},set deletebuttonlabel(e){R(e),a()},get information(){return F()},set information(e){F(e),a()},get onvalidation(){return W()},set onvalidation(e){W(e),a()},get onfilesupdate(){return X()},set onfilesupdate(e){X(e),a()}},z=Ne(),Y=h(z),b=h(Y);b.__change=_e,he(b,e=>j=e,()=>j);var s=k(b,2);s.__click=()=>j.click(),s.__keydown=ke;var ie=h(s);{var Fe=e=>{var r=Je(),o=P(r),v=h(o,!0);c(o);var p=k(o,2),Z=h(p,!0);c(p),V(()=>{y(v,N()),y(Z,T())}),u(e,r)};ve(ie,e=>{f()&&e(Fe)})}var ne=k(ie,2),se=h(ne);qe(se,{className:"mc-button__icon"});var de=k(se,2),Ue=h(de,!0);c(de),c(ne),c(s),c(Y);var Ce=k(Y,2);{var je=e=>{var r=Ke();Le(r,21,i,Oe,(o,v,p)=>{{let Z=L(()=>De(n(v)));Pe(o,{get file(){return n(v)},get format(){return H()},get errormessage(){return Q()},get information(){return F()},get deletebuttonlabel(){return R()},get valid(){return n(Z)},ondelete:()=>ye(p),$$slots:{name:(_,M)=>{var d=ee(),x=P(d);const S=L(()=>M.file);te(x,t,"name",{get file(){return n(S)}},$=>{var w=be();V(()=>y(w,n(S).name)),u($,w)}),u(_,d)},information:(_,M)=>{var d=ee(),x=P(d);const S=L(()=>M.file);te(x,t,"information",{get file(){return n(S)}},$=>{var w=be();V(()=>y(w,F())),u($,w)}),u(_,d)},errorMessage:(_,M)=>{var d=ee(),x=P(d);te(x,t,"errorMessage",{get validationState(){return n(C)[n(v).name]}},null),u(_,d)}}})}}),c(r),u(e,r)};ve(Ce,e=>{K()&&e(je)})}return c(z),he(z,e=>U=e,()=>U),V(()=>{fe(z,1,me({"mc-file-uploader":!0,"mc-file-uploader--draggable":f()}),"svelte-1hihzzl"),re(b,"accept",q()),b.multiple=g(),b.disabled=m(),re(b,"aria-disabled",m()),fe(s,1,me({"mc-file-uploader__input":!0,"mc-file-uploader__input--dragged":n(A),"mc-file-uploader__input--disabled":m()}),"svelte-1hihzzl"),re(s,"aria-disabled",m()),y(Ue,G())}),B("dragover",s,xe),B("drop",s,we),B("dragenter",s,ge),B("dragleave",s,ze),u(ae,z),Be(Ee)}Ae(["change","click","keydown"]);customElements.define("m-file-uploader",Ie(Ge,{files:{},accept:{},multiple:{},allowedextensions:{},maxsize:{},rules:{},hasdragdrop:{},showfileslist:{},disabled:{},title:{},subtitle:{},uploadbuttonlabel:{},format:{},errormessage:{},deletebuttonlabel:{},information:{},onvalidation:{},onfilesupdate:{}},["name","information","errorMessage"],[],!0));
+ */.mc-file-uploader.svelte-1hihzzl {display:flex;flex-direction:column;gap:1rem;width:18rem;}.mc-file-uploader__files-list.svelte-1hihzzl {display:flex;flex-direction:column;gap:1rem;}.mc-file-uploader__hidden-input.svelte-1hihzzl {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-file-uploader__input.svelte-1hihzzl {display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);border-radius:var(--border-radius-m, 0.5rem);color:var(--file-uploader-color-drag-and-drop-text-default, #242938);}.mc-file-uploader__input.svelte-1hihzzl .mc-file-uploader__button:where(.svelte-1hihzzl) {width:100%;}.mc-file-uploader__input--disabled.svelte-1hihzzl .mc-file-uploader__button.mc-button.mc-button--outlined:where(.svelte-1hihzzl) {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-file-uploader__input-title.svelte-1hihzzl {height:1.125rem;font-size:var(--font-size-150, 1rem);}.mc-file-uploader__input-subtitle.svelte-1hihzzl {height:1.125rem;font-size:var(--font-size-100, 0.875rem);}.mc-file-uploader--draggable.svelte-1hihzzl {width:25rem;}.mc-file-uploader--draggable.svelte-1hihzzl .mc-file-uploader__input:where(.svelte-1hihzzl) {padding:2rem;outline:0.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);display:flex;}.mc-file-uploader--draggable.svelte-1hihzzl .mc-file-uploader__input--disabled:where(.svelte-1hihzzl) {outline-color:var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);color:var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);cursor:not-allowed;}.mc-file-uploader--draggable.svelte-1hihzzl .mc-file-uploader__input--dragged:where(.svelte-1hihzzl) {outline-width:0.25rem;}.mc-button.svelte-1hihzzl {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1hihzzl:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1hihzzl:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1hihzzl: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-1hihzzl {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1hihzzl .mc-button__label:where(.svelte-1hihzzl) {font-size:var(--font-size-150, 1rem);}.mc-button.svelte-1hihzzl {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-1hihzzl {font-size:var(--font-size-150, 1rem);}.mc-button.svelte-1hihzzl: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-1hihzzl: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--outlined.svelte-1hihzzl {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-1hihzzl:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1hihzzl:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1hihzzl:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function He(ae,t){Se(t,!0),Ve(ae,Ge);let i=l(t,"files",15),P=l(t,"accept",7),g=l(t,"multiple",7),D=l(t,"allowedextensions",7),E=l(t,"maxsize",7),q=l(t,"rules",7),f=l(t,"hasdragdrop",7,!0),K=l(t,"showfileslist",7,!0),m=l(t,"disabled",7),T=l(t,"title",7,"Drag & drop"),G=l(t,"subtitle",7,"or"),H=l(t,"uploadbuttonlabel",7,"Upload file(s)"),J=l(t,"format",7,"inline"),Q=l(t,"errormessage",7),R=l(t,"deletebuttonlabel",7),F=l(t,"information",7),W=l(t,"onvalidation",7),X=l(t,"onfilesupdate",7),U,C=L(()=>pe(i())),j,M=ce(!1),A=ce(0);function pe(e=[]){const r={};return e.forEach(o=>{const v=o.name.split(".").pop()?.toLowerCase()||"";r[o.name]={size:E()&&o.size?o.size<=E():!0,extension:D()?D().includes(v):!0,customValidation:q()?.every(p=>p(o))??!0}}),r}Be(()=>{X()?.(i());const e=new CustomEvent("files-update",{detail:i(),bubbles:!0,composed:!0});if(U.dispatchEvent(e),i()?.length>0){W()?.(n(C));const r=new CustomEvent("validation",{detail:n(C),bubbles:!0,composed:!0});U.dispatchEvent(r)}});function ge(e){f()&&(e.preventDefault(),ue(A),N(M,!0))}function ze(e){f()&&(e.preventDefault(),ue(A,-1),n(A)===0&&N(M,!1))}function oe(e){return i()?.every(r=>r.name!==e.name)}function _e(e){const r=e.target,o=Array.from(r.files||[]).filter(oe);if(!o.length){r.value="";return}i(g()?[...i(),...o]:o.slice(0,1)),r.value=""}function xe(e){e.preventDefault()}function we(e){if(!f()||(e.preventDefault(),e.stopPropagation(),N(A,0),N(M,!1),m()))return;const r=Array.from(e.dataTransfer?.files||[]).filter(oe);r.length&&i(g()?[...i(),...r]:[r[0]])}function ke(e){(e.key===" "||e.key==="Enter")&&(e.preventDefault(),j.click())}function ye(e){i(i()?.filter((r,o)=>o!==e))}function De(e){return Object.values(n(C)[e.name]??{}).every(Boolean)}var Ee={get files(){return i()},set files(e){i(e),a()},get accept(){return P()},set accept(e){P(e),a()},get multiple(){return g()},set multiple(e){g(e),a()},get allowedextensions(){return D()},set allowedextensions(e){D(e),a()},get maxsize(){return E()},set maxsize(e){E(e),a()},get rules(){return q()},set rules(e){q(e),a()},get hasdragdrop(){return f()},set hasdragdrop(e=!0){f(e),a()},get showfileslist(){return K()},set showfileslist(e=!0){K(e),a()},get disabled(){return m()},set disabled(e){m(e),a()},get title(){return T()},set title(e="Drag & drop"){T(e),a()},get subtitle(){return G()},set subtitle(e="or"){G(e),a()},get uploadbuttonlabel(){return H()},set uploadbuttonlabel(e="Upload file(s)"){H(e),a()},get format(){return J()},set format(e="inline"){J(e),a()},get errormessage(){return Q()},set errormessage(e){Q(e),a()},get deletebuttonlabel(){return R()},set deletebuttonlabel(e){R(e),a()},get information(){return F()},set information(e){F(e),a()},get onvalidation(){return W()},set onvalidation(e){W(e),a()},get onfilesupdate(){return X()},set onfilesupdate(e){X(e),a()}},z=Te(),Y=h(z),b=h(Y);b.__change=_e,he(b,e=>j=e,()=>j);var s=k(b,2);s.__click=()=>j.click(),s.__keydown=ke;var ie=h(s);{var Fe=e=>{var r=qe(),o=O(r),v=h(o,!0);c(o);var p=k(o,2),Z=h(p,!0);c(p),B(()=>{y(v,T()),y(Z,G())}),u(e,r)};ve(ie,e=>{f()&&e(Fe)})}var ne=k(ie,2),se=h(ne);Pe(se,{className:"mc-button__icon"});var de=k(se,2),Ue=h(de,!0);c(de),c(ne),c(s),c(Y);var Ce=k(Y,2);{var je=e=>{var r=Ke();Le(r,21,i,Ne,(o,v,p)=>{{let Z=L(()=>De(n(v)));Oe(o,{get file(){return n(v)},get format(){return J()},get errormessage(){return Q()},get information(){return F()},get deletebuttonlabel(){return R()},get valid(){return n(Z)},ondelete:()=>ye(p),$$slots:{name:(_,S)=>{var d=ee(),x=O(d);const V=L(()=>S.file);te(x,t,"name",{get file(){return n(V)}},$=>{var w=be();B(()=>y(w,n(V).name)),u($,w)}),u(_,d)},information:(_,S)=>{var d=ee(),x=O(d);const V=L(()=>S.file);te(x,t,"information",{get file(){return n(V)}},$=>{var w=be();B(()=>y(w,F())),u($,w)}),u(_,d)},errorMessage:(_,S)=>{var d=ee(),x=O(d);te(x,t,"errorMessage",{get validationState(){return n(C)[n(v).name]}},null),u(_,d)}}})}}),c(r),u(e,r)};ve(Ce,e=>{K()&&e(je)})}return c(z),he(z,e=>U=e,()=>U),B(()=>{fe(z,1,me({"mc-file-uploader":!0,"mc-file-uploader--draggable":f()}),"svelte-1hihzzl"),re(b,"accept",P()),b.multiple=g(),b.disabled=m(),re(b,"aria-disabled",m()),fe(s,1,me({"mc-file-uploader__input":!0,"mc-file-uploader__input--dragged":n(M),"mc-file-uploader__input--disabled":m()}),"svelte-1hihzzl"),re(s,"aria-disabled",m()),y(Ue,H())}),I("dragover",s,xe),I("drop",s,we),I("dragenter",s,ge),I("dragleave",s,ze),u(ae,z),Ie(Ee)}Me(["change","click","keydown"]);customElements.define("m-file-uploader",Ae(He,{files:{},accept:{},multiple:{},allowedextensions:{},maxsize:{},rules:{},hasdragdrop:{},showfileslist:{},disabled:{},title:{},subtitle:{},uploadbuttonlabel:{},format:{},errormessage:{},deletebuttonlabel:{},information:{},onvalidation:{},onfilesupdate:{}},["name","information","errorMessage"],[],!0));
 //# sourceMappingURL=FileUploader.js.map

package/dist/components/fileuploader/FileUploader.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.stories.d.ts","sourceRoot":"","sources":["../../../src/components/fileuploader/FileUploader.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,uBAAuB,CAAC;AAC/B,OAAO,6CAA6C,CAAC;AAErD,QAAA,MAAM,IAAI,EAAE,IAiFX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;CAI9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAoBjC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAwB7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAwBlC,CAAC"}
+{"version":3,"file":"FileUploader.stories.d.ts","sourceRoot":"","sources":["../../../src/components/fileuploader/FileUploader.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,uBAAuB,CAAC;AAC/B,OAAO,6CAA6C,CAAC;AAErD,QAAA,MAAM,IAAI,EAAE,IAoFX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;CAI9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAoBjC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAwB7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAwBlC,CAAC"}

package/dist/components/fileuploader/FileUploader.stories.js

@@ -6,7 +6,10 @@ import '../fileuploaderitem/FileUploaderItem.svelte';
 const meta = {
     title: 'Form elements/File uploader',
     component: 'm-file-uploader',
-    subcomponents: { 'm-file-uploader-item': 'm-file-uploader-item' },
+    subcomponents: {
+        'FileUploaderItem': 'm-file-uploader-item',
+        'Field': 'm-field'
+    },
     tags: ['v2'],
     args: {
         id: 'id',

package/dist/components/fileuploader/FileUploader.svelte

@@ -674,6 +674,9 @@
   border-radius: var(--border-radius-full, 100%);
   padding: 0;
 }
+.mc-button--loading {
+  pointer-events: none;
+}
 .mc-button--loading .mc-button__loader {
   position: absolute;
   color: currentcolor;

package/dist/components/fileuploaderitem/FileUploaderItem.js

@@ -1,5 +1,5 @@
-import{c as le,p as re,a as ie,b as n,q as p,s as b,t as f,f as i,g as ae,h,x as F,d as a,j as m,r as o,aI as _,e as g,l as oe,aC as H,n as S,o as q}from"../../custom-element.js";import{i as B}from"../../if.js";import{a as se,s as E}from"../../slot.js";import{c as de}from"../../svelte-component.js";import{B as J}from"../button/Button.js";import{D as ne}from"../divider/Divider.js";import{p as me,q as ce,C as fe,c as ue}from"../../Condition20.js";import"../../snippet.js";import"../../attributes.js";import"../loader/Loader.js";var ve=h('<span class="mc-file-uploader-item__details svelte-1sb9cm3"><!></span>'),pe=h('<!> <div class="mc-file-uploader-item__actions-container svelte-1sb9cm3"><!></div>',1),be=h('<div class="mc-file-uploader-item__delete-button-container svelte-1sb9cm3"><!></div>'),_e=h('<span class="mc-file-uploader-item__error-message svelte-1sb9cm3"><!></span>'),ge=h('<div><div><div><span class="mc-file-uploader-item__status-icon svelte-1sb9cm3"><!></span> <div class="mc-file-uploader-item__info-content svelte-1sb9cm3"><span class="mc-file-uploader-item__label svelte-1sb9cm3"><!></span> <!></div></div> <!></div> <!></div>');const he={hash:"svelte-1sb9cm3",code:`/**
+import{c as le,p as re,a as ie,b as n,n as p,s as b,t as f,f as i,g as ae,h,v as I,d as a,j as m,r as o,aM as _,e as g,y as oe,aH as G,l as S,m as B}from"../../custom-element.js";import{i as q}from"../../if.js";import{a as se,s as E}from"../../slot.js";import{c as de}from"../../svelte-component.js";import{B as J}from"../button/Button.js";import{D as ne}from"../divider/Divider.js";import{p as me,q as ce,C as fe,c as ue}from"../../Condition20.js";import"../../branches.js";import"../../attributes.js";import"../loader/Loader.js";var ve=h('<span class="mc-file-uploader-item__details svelte-1sb9cm3"><!></span>'),pe=h('<!> <div class="mc-file-uploader-item__actions-container svelte-1sb9cm3"><!></div>',1),be=h('<div class="mc-file-uploader-item__delete-button-container svelte-1sb9cm3"><!></div>'),_e=h('<span class="mc-file-uploader-item__error-message svelte-1sb9cm3"><!></span>'),ge=h('<div><div><div><span class="mc-file-uploader-item__status-icon svelte-1sb9cm3"><!></span> <div class="mc-file-uploader-item__info-content svelte-1sb9cm3"><span class="mc-file-uploader-item__label svelte-1sb9cm3"><!></span> <!></div></div> <!></div> <!></div>');const he={hash:"svelte-1sb9cm3",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-file-uploader.svelte-1sb9cm3 {display:flex;flex-direction:column;gap:1rem;width:18rem;}.mc-file-uploader__files-list.svelte-1sb9cm3 {display:flex;flex-direction:column;gap:1rem;}.mc-file-uploader__hidden-input.svelte-1sb9cm3 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-file-uploader__input.svelte-1sb9cm3 {display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);border-radius:var(--border-radius-m, 0.5rem);color:var(--file-uploader-color-drag-and-drop-text-default, #242938);}.mc-file-uploader__input.svelte-1sb9cm3 .mc-file-uploader__button:where(.svelte-1sb9cm3) {width:100%;}.mc-file-uploader__input--disabled.svelte-1sb9cm3 .mc-file-uploader__button.mc-button.mc-button--outlined:where(.svelte-1sb9cm3) {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-file-uploader__input-title.svelte-1sb9cm3 {height:1.125rem;font-size:var(--font-size-150, 1rem);}.mc-file-uploader__input-subtitle.svelte-1sb9cm3 {height:1.125rem;font-size:var(--font-size-100, 0.875rem);}.mc-file-uploader--draggable.svelte-1sb9cm3 {width:25rem;}.mc-file-uploader--draggable.svelte-1sb9cm3 .mc-file-uploader__input:where(.svelte-1sb9cm3) {padding:2rem;outline:0.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);display:flex;}.mc-file-uploader--draggable.svelte-1sb9cm3 .mc-file-uploader__input--disabled:where(.svelte-1sb9cm3) {outline-color:var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);color:var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);cursor:not-allowed;}.mc-file-uploader--draggable.svelte-1sb9cm3 .mc-file-uploader__input--dragged:where(.svelte-1sb9cm3) {outline-width:0.25rem;}.mc-file-uploader-item.svelte-1sb9cm3 {display:flex;flex-direction:column;gap:0.25rem;}.mc-file-uploader-item__container.svelte-1sb9cm3 {border:1px solid var(--file-uploader-color-file-item-border-default, #cccccc);border-radius:var(--border-radius-m, 0.5rem);padding:0.75rem;}.mc-file-uploader-item__meta-row.svelte-1sb9cm3 {display:flex;align-items:center;flex-grow:1;}.mc-file-uploader-item__meta-row--with-info.svelte-1sb9cm3 {align-items:start;}.mc-file-uploader-item__status-icon.svelte-1sb9cm3 {fill:var(--file-uploader-color-file-item-icon-valid, #3f9e10);}.mc-file-uploader-item__info-content.svelte-1sb9cm3 {display:flex;flex-direction:column;flex-grow:1;padding-left:0.5rem;padding-right:1rem;}.mc-file-uploader-item__label.svelte-1sb9cm3 {color:var(--file-uploader-color-file-item-text-file-name, #000000);font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);}.mc-file-uploader-item__details.svelte-1sb9cm3 {color:var(--file-uploader-color-file-item-text-information, #666666);font-size:var(--font-size-50, 0.75rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);}.mc-file-uploader-item__error-message.svelte-1sb9cm3 {color:var(--field-color-validation-invalid, #c61112);font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);}.mc-file-uploader-item__container--inline.svelte-1sb9cm3 {display:flex;align-items:center;}.mc-file-uploader-item__container--stacked.svelte-1sb9cm3 {display:flex;flex-direction:column;gap:0.75rem;}.mc-file-uploader-item__delete-button-container.svelte-1sb9cm3 {padding-left:0.25rem;margin-left:0.25rem;border-left:1px solid var(--divider-color-primary, #cccccc);}.mc-file-uploader-item__actions-container.svelte-1sb9cm3 {padding:0 2rem;display:flex;align-items:center;gap:0.25rem;justify-content:center;}.mc-file-uploader-item__action.svelte-1sb9cm3 {padding:0 0.75rem;flex-grow:1;}.mc-file-uploader-item--error.svelte-1sb9cm3 .mc-file-uploader-item__container:where(.svelte-1sb9cm3) {border-width:var(--border-width-m, 0.125rem);border-color:var(--file-uploader-color-file-item-border-invalid, #ea302d);}.mc-file-uploader-item--error.svelte-1sb9cm3 .mc-file-uploader-item__status-icon:where(.svelte-1sb9cm3) {fill:var(--file-uploader-color-file-item-icon-invalid, #ea302d);}.mc-file-uploader-item--loading.svelte-1sb9cm3 .mc-file-uploader-item__container:where(.svelte-1sb9cm3) {gap:1rem;flex-direction:column;align-items:normal;}.mc-file-uploader-item--loading.svelte-1sb9cm3 .mc-file-uploader-item__status-icon:where(.svelte-1sb9cm3) {fill:var(--color-standalone-disabled, #b3b3b3);}.mc-file-uploader-item--loading.svelte-1sb9cm3 .mc-file-uploader-item__label:where(.svelte-1sb9cm3),
-.mc-file-uploader-item--loading.svelte-1sb9cm3 .mc-file-uploader-item__details:where(.svelte-1sb9cm3) {color:var(--color-standalone-disabled, #b3b3b3);}`};function xe(U,l){const W=se(l);re(l,!0),ie(U,he);let u=n(l,"file",7),x=n(l,"format",7,"inline"),w=n(l,"valid",7),y=n(l,"errormessage",7),z=n(l,"deletebuttonlabel",7,"Delete"),v=n(l,"information",7),k=n(l,"ondelete",7);const K=F(()=>x()==="stacked"),I=F(()=>w()?"default":"error"),L={default:ce,error:me},N=F(()=>L[p(I)]);var O={get file(){return u()},set file(e){u(e),m()},get format(){return x()},set format(e="inline"){x(e),m()},get valid(){return w()},set valid(e){w(e),m()},get errormessage(){return y()},set errormessage(e){y(e),m()},get deletebuttonlabel(){return z()},set deletebuttonlabel(e="Delete"){z(e),m()},get information(){return v()},set information(e){v(e),m()},get ondelete(){return k()},set ondelete(e){k(e),m()}},C=ge(),D=a(C),M=a(D),P=a(M),Q=a(P);de(Q,()=>p(N),(e,t)=>{t(e,{})}),o(P);var A=b(P,2),j=a(A),R=a(j);E(R,l,"name",{get file(){return u()}},e=>{var t=_();f(()=>g(t,u().name)),i(e,t)}),o(j);var T=b(j,2);{var V=e=>{var t=ve(),d=a(t);E(d,l,"information",{get file(){return u()}},r=>{var s=_();f(()=>g(s,v())),i(r,s)}),o(t),i(e,t)};B(T,e=>{(v()||W.information)&&e(V)})}o(A),o(M);var X=b(M,2);{var Y=e=>{var t=pe(),d=oe(t);ne(d,{});var r=b(d,2),s=a(r);J(s,{ghost:!0,size:"s",iconposition:"left","aria-label":"Delete file",get onclick(){return k()},children:(c,te)=>{H();var G=_();f(()=>g(G,z())),i(c,G)},$$slots:{default:!0,icon:(c,te)=>{fe(c,{slot:"icon"})}}}),o(r),i(e,t)},Z=e=>{var t=be(),d=a(t);J(d,{ghost:!0,size:"s",iconposition:"only","aria-label":"Delete file",get onclick(){return k()},children:(r,s)=>{H();var c=_();f(()=>g(c,z())),i(r,c)},$$slots:{default:!0,icon:(r,s)=>{ue(r,{slot:"icon"})}}}),o(t),i(e,t)};B(X,e=>{p(K)?e(Y):e(Z,!1)})}o(D);var $=b(D,2);{var ee=e=>{var t=_e(),d=a(t);E(d,l,"errorMessage",{},r=>{var s=_();f(()=>g(s,y())),i(r,s)}),o(t),i(e,t)};B($,e=>{!w()&&(y()||W.errorMessage)&&e(ee)})}return o(C),f(()=>{S(C,1,q({"mc-file-uploader-item":!0,[`mc-file-uploader-item--${p(I)}`]:p(I)!=="default"}),"svelte-1sb9cm3"),S(D,1,q({"mc-file-uploader-item__container":!0,[`mc-file-uploader-item__container--${x()}`]:!0}),"svelte-1sb9cm3"),S(M,1,q({"mc-file-uploader-item__meta-row":!0,"mc-file-uploader-item__meta-row--with-info":v()}),"svelte-1sb9cm3")}),i(U,C),ae(O)}customElements.define("m-file-uploader-item",le(xe,{file:{},format:{},valid:{},errormessage:{},deletebuttonlabel:{},information:{},ondelete:{}},["name","information","errorMessage"],[],!0));export{xe as F};
+.mc-file-uploader-item--loading.svelte-1sb9cm3 .mc-file-uploader-item__details:where(.svelte-1sb9cm3) {color:var(--color-standalone-disabled, #b3b3b3);}`};function xe(H,l){const U=se(l);re(l,!0),ie(H,he);let u=n(l,"file",7),x=n(l,"format",7,"inline"),w=n(l,"valid",7),y=n(l,"errormessage",7),z=n(l,"deletebuttonlabel",7,"Delete"),v=n(l,"information",7),k=n(l,"ondelete",7);const K=I(()=>x()==="stacked"),P=I(()=>w()?"default":"error"),L={default:ce,error:me},N=I(()=>L[p(P)]);var O={get file(){return u()},set file(e){u(e),m()},get format(){return x()},set format(e="inline"){x(e),m()},get valid(){return w()},set valid(e){w(e),m()},get errormessage(){return y()},set errormessage(e){y(e),m()},get deletebuttonlabel(){return z()},set deletebuttonlabel(e="Delete"){z(e),m()},get information(){return v()},set information(e){v(e),m()},get ondelete(){return k()},set ondelete(e){k(e),m()}},C=ge(),D=a(C),M=a(D),j=a(M),Q=a(j);de(Q,()=>p(N),(e,t)=>{t(e,{})}),o(j);var W=b(j,2),F=a(W),R=a(F);E(R,l,"name",{get file(){return u()}},e=>{var t=_();f(()=>g(t,u().name)),i(e,t)}),o(F);var T=b(F,2);{var V=e=>{var t=ve(),d=a(t);E(d,l,"information",{get file(){return u()}},r=>{var s=_();f(()=>g(s,v())),i(r,s)}),o(t),i(e,t)};q(T,e=>{(v()||U.information)&&e(V)})}o(W),o(M);var X=b(M,2);{var Y=e=>{var t=pe(),d=oe(t);ne(d,{});var r=b(d,2),s=a(r);J(s,{ghost:!0,size:"s",iconposition:"left","aria-label":"Delete file",get onclick(){return k()},children:(c,te)=>{G();var A=_();f(()=>g(A,z())),i(c,A)},$$slots:{default:!0,icon:(c,te)=>{fe(c,{slot:"icon"})}}}),o(r),i(e,t)},Z=e=>{var t=be(),d=a(t);J(d,{ghost:!0,size:"s",iconposition:"only","aria-label":"Delete file",get onclick(){return k()},children:(r,s)=>{G();var c=_();f(()=>g(c,z())),i(r,c)},$$slots:{default:!0,icon:(r,s)=>{ue(r,{slot:"icon"})}}}),o(t),i(e,t)};q(X,e=>{p(K)?e(Y):e(Z,!1)})}o(D);var $=b(D,2);{var ee=e=>{var t=_e(),d=a(t);E(d,l,"errorMessage",{},r=>{var s=_();f(()=>g(s,y())),i(r,s)}),o(t),i(e,t)};q($,e=>{!w()&&(y()||U.errorMessage)&&e(ee)})}return o(C),f(()=>{S(C,1,B({"mc-file-uploader-item":!0,[`mc-file-uploader-item--${p(P)}`]:p(P)!=="default"}),"svelte-1sb9cm3"),S(D,1,B({"mc-file-uploader-item__container":!0,[`mc-file-uploader-item__container--${x()}`]:!0}),"svelte-1sb9cm3"),S(M,1,B({"mc-file-uploader-item__meta-row":!0,"mc-file-uploader-item__meta-row--with-info":v()}),"svelte-1sb9cm3")}),i(H,C),ae(O)}customElements.define("m-file-uploader-item",le(xe,{file:{},format:{},valid:{},errormessage:{},deletebuttonlabel:{},information:{},ondelete:{}},["name","information","errorMessage"],[],!0));export{xe as F};
 //# sourceMappingURL=FileUploaderItem.js.map

package/dist/components/iconbutton/IconButton.js

@@ -1,4 +1,4 @@
-import{c as E,p as S,a as q,b as r,s as A,f as u,g as F,h as G,i as H,d as J,j as e,k as h,l as k,r as K}from"../../custom-element.js";import{s as M}from"../../snippet.js";import{i as p}from"../../if.js";import{s as N}from"../../slot.js";import{a as O}from"../../attributes.js";import{L as P}from"../loader/Loader.js";var Q=G("<button><!> <!></button>");const R={hash:"svelte-3c0lhf",code:`/**
+import{c as x,p as z,a as B,b as r,s as j,f,g as I,h as L,i as C,d as D,j as e,x as E,y as S,r as q}from"../../custom-element.js";import{i as h}from"../../if.js";import{s as A}from"../../slot.js";import{a as F}from"../../attributes.js";import{L as G}from"../loader/Loader.js";import"../../branches.js";var H=L("<button><!> <!></button>");const J={hash:"svelte-3c0lhf",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-button.svelte-3c0lhf {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-3c0lhf:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-3c0lhf:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-3c0lhf: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-3c0lhf {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-3c0lhf {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-3c0lhf {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-3c0lhf {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-3c0lhf: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-3c0lhf: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-3c0lhf {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-3c0lhf {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-3c0lhf {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-3c0lhf {padding:0.25rem;}.mc-button--outlined.svelte-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-3c0lhf:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-3c0lhf:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-3c0lhf: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-3c0lhf {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-3c0lhf:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-3c0lhf:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-3c0lhf: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-3c0lhf {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-3c0lhf:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-3c0lhf:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-3c0lhf: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-3c0lhf {--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-3c0lhf:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-3c0lhf:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-3c0lhf: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-3c0lhf {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-3c0lhf:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-3c0lhf:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-3c0lhf:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-3c0lhf:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-3c0lhf:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-3c0lhf:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-3c0lhf:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-3c0lhf:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function T(w,t){S(t,!0),q(w,R);let b=r(t,"appearance",7,"standard"),s=r(t,"size",7,"m"),i=r(t,"type",7,"button"),v=r(t,"ghost",7),g=r(t,"outlined",7),f=r(t,"disabled",7),n=r(t,"isloading",7),l=r(t,"icon",7),x=H(t,["$$slots","$$events","$$legacy","$$host","appearance","size","type","ghost","outlined","disabled","isloading","icon"]);var z={get appearance(){return b()},set appearance(o="standard"){b(o),e()},get size(){return s()},set size(o="m"){s(o),e()},get type(){return i()},set type(o="button"){i(o),e()},get ghost(){return v()},set ghost(o){v(o),e()},get outlined(){return g()},set outlined(o){g(o),e()},get disabled(){return f()},set disabled(o){f(o),e()},get isloading(){return n()},set isloading(o){n(o),e()},get icon(){return l()},set icon(o){l(o),e()}},d=Q();O(d,()=>({class:["mc-button","mc-button--icon-button",`mc-button--${s()}`,`mc-button--${b()}`,v()&&"mc-button--ghost",g()&&"mc-button--outlined",n()&&"mc-button--loading"],disabled:f(),type:i(),...x}),void 0,void 0,void 0,"svelte-3c0lhf");var y=J(d);{var B=o=>{P(o,{style:"color: currentColor",size:"s"})};p(y,o=>{n()&&o(B)})}var j=A(y,2);{var I=o=>{var _=h(),L=k(_);{var C=c=>{var a=h(),m=k(a);M(m,l),u(c,a)},D=c=>{var a=h(),m=k(a);N(m,t,"icon",{},null),u(c,a)};p(L,c=>{l()?c(C):c(D,!1)})}u(o,_)};p(j,o=>{n()||o(I)})}return K(d),u(w,d),F(z)}customElements.define("m-icon-button",E(T,{disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},outlined:{attribute:"outlined",reflect:!0,type:"Boolean"},ghost:{attribute:"ghost",reflect:!0,type:"Boolean"},isloading:{attribute:"isloading",reflect:!0,type:"Boolean"},appearance:{},size:{},type:{},icon:{}},["icon"],[],!0));export{T as I};
+ */.mc-button.svelte-3c0lhf {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-3c0lhf:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-3c0lhf:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-3c0lhf: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-3c0lhf {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-3c0lhf {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-3c0lhf {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-3c0lhf {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-3c0lhf: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-3c0lhf: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-3c0lhf {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-3c0lhf {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-3c0lhf {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-3c0lhf {padding:0.25rem;}.mc-button--outlined.svelte-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-3c0lhf:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-3c0lhf:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-3c0lhf: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-3c0lhf {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-3c0lhf:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-3c0lhf:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-3c0lhf: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-3c0lhf {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-3c0lhf:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-3c0lhf:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-3c0lhf: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-3c0lhf {--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-3c0lhf:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-3c0lhf:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-3c0lhf: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-3c0lhf {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--loading.svelte-3c0lhf {pointer-events:none;}.mc-button--outlined.mc-button--standard.svelte-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-3c0lhf:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-3c0lhf:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-3c0lhf:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-3c0lhf:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-3c0lhf:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-3c0lhf:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-3c0lhf:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-3c0lhf:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}::slotted(*) {display:flex;}`};function K(i,t){z(t,!0),B(i,J);let a=r(t,"appearance",7,"standard"),l=r(t,"size",7,"m"),d=r(t,"type",7,"button"),b=r(t,"ghost",7),u=r(t,"outlined",7),s=r(t,"disabled",7),c=r(t,"isloading",7),m=C(t,["$$slots","$$events","$$legacy","$$host","appearance","size","type","ghost","outlined","disabled","isloading"]);var k={get appearance(){return a()},set appearance(o="standard"){a(o),e()},get size(){return l()},set size(o="m"){l(o),e()},get type(){return d()},set type(o="button"){d(o),e()},get ghost(){return b()},set ghost(o){b(o),e()},get outlined(){return u()},set outlined(o){u(o),e()},get disabled(){return s()},set disabled(o){s(o),e()},get isloading(){return c()},set isloading(o){c(o),e()}},n=H();F(n,()=>({class:["mc-button","mc-button--icon-button",`mc-button--${l()}`,`mc-button--${a()}`,b()&&"mc-button--ghost",u()&&"mc-button--outlined",c()&&"mc-button--loading"],disabled:s(),type:d(),...m}),void 0,void 0,void 0,"svelte-3c0lhf");var v=D(n);{var p=o=>{G(o,{style:"color: currentColor",size:"s"})};h(v,o=>{c()&&o(p)})}var w=j(v,2);{var y=o=>{var g=E(),_=S(g);A(_,t,"icon",{},null),f(o,g)};h(w,o=>{c()||o(y)})}return q(n),f(i,n),I(k)}customElements.define("m-icon-button",x(K,{disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},outlined:{attribute:"outlined",reflect:!0,type:"Boolean"},ghost:{attribute:"ghost",reflect:!0,type:"Boolean"},isloading:{attribute:"isloading",reflect:!0,type:"Boolean"},appearance:{},size:{},type:{}},["icon"],[],!0));export{K as I};
 //# sourceMappingURL=IconButton.js.map

package/dist/components/iconbutton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../src/components/iconbutton/IconButton.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-icon-button',\n    props: {\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      outlined: { reflect: true, type: 'Boolean', attribute: 'outlined' },\n      ghost: { reflect: true, type: 'Boolean', attribute: 'ghost' },\n      isloading: { reflect: true, type: 'Boolean', attribute: 'isloading' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n  import type { Snippet } from 'svelte';\n  /**\n   * Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.\n   *\n   * @slot icon - Use this slot to insert an icon for the Button.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Defines the visual style of the icon button.\n     */\n    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';\n    /**\n     * Determines the size of the icon button.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * If `true`, disables the icon button, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, applies a \"ghost\" style to the icon button.\n     */\n    ghost?: boolean;\n    /**\n     * If `true`, the icon button gets an outlined style.\n     */\n    outlined?: boolean;\n    /**\n     * If `true`, a loading state is displayed.\n     */\n    isloading?: boolean;\n    /**\n     * Specifies the button's HTML `type` attribute.\n     */\n    type?: 'button' | 'reset' | 'submit';\n    /**\n     * Use this snippet to insert an icon for the Button.\n     */\n    icon?: Snippet;\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    type = 'button',\n    ghost,\n    outlined,\n    disabled,\n    isloading,\n    icon,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<button\n  class={[\n    'mc-button',\n    'mc-button--icon-button',\n    `mc-button--${size}`,\n    `mc-button--${appearance}`,\n    ghost && 'mc-button--ghost',\n    outlined && 'mc-button--outlined',\n    isloading && 'mc-button--loading',\n  ]}\n  {disabled}\n  {type}\n  {...attrs}\n>\n  {#if isloading}\n    <Loader style=\"color: currentColor\" size=\"s\" />\n  {/if}\n  {#if !isloading}\n    {#if icon}\n      {@render icon()}\n    {:else}\n      <slot name=\"icon\" />\n    {/if}\n  {/if}\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["appearance","size","type","ghost","$.prop","$$props","outlined","disabled","isloading","icon","attrs","$.rest_props","button","root","node","$.child","Loader","$$anchor","$$render","consequent","consequent_1","alternate","consequent_2","$.reset","$.append"],"mappings":";;qoWAYA,gBA6CI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,eAAO,QAAQ,EACfC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACRG,EAASJ,EAAAC,EAAA,YAAA,CAAA,EACTI,EAAIL,EAAAC,EAAA,OAAA,CAAA,EACDK,EAAAC,EAAAN,EAAA,6KARU,WAAU,6CAChB,IAAG,6CACH,SAAQ,yQAUlBO,EAAAC,EAAA,IAAAD,eAEG,YACA,uCACcX,EAAI,CAAA,iBACJD,EAAU,CAAA,GACxBG,EAAK,GAAI,mBACTG,EAAQ,GAAI,sBACZE,KAAa,+BAEdD,EAAQ,OACRL,EAAI,KACDQ,0CAZL,IAAAI,EAAAC,EAAAH,CAAA,aAeII,EAAMC,EAAA,CAAA,MAAA,sBAAA,KAAA,IAAA,WADJT,EAAS,GAAAU,EAAAC,CAAA,6EAKDV,CAAI,uEADVA,EAAI,EAAAS,EAAAE,CAAA,EAAAF,EAAAG,EAAA,EAAA,oBADLb,EAAS,GAAAU,EAAAI,CAAA,IAjBhBC,OAAAA,EAAAX,CAAA,EAAAY,EAAAP,EAAAL,CAAA,MAFO"}
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/iconbutton/IconButton.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-icon-button',\n    props: {\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      outlined: { reflect: true, type: 'Boolean', attribute: 'outlined' },\n      ghost: { reflect: true, type: 'Boolean', attribute: 'ghost' },\n      isloading: { reflect: true, type: 'Boolean', attribute: 'isloading' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n  /**\n   * Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.\n   *\n   * @slot icon - Use this slot to insert an icon for the Button.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Defines the visual style of the icon button.\n     */\n    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';\n    /**\n     * Determines the size of the icon button.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * If `true`, disables the icon button, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, applies a \"ghost\" style to the icon button.\n     */\n    ghost?: boolean;\n    /**\n     * If `true`, the icon button gets an outlined style.\n     */\n    outlined?: boolean;\n    /**\n     * If `true`, a loading state is displayed.\n     */\n    isloading?: boolean;\n    /**\n     * Specifies the button's HTML `type` attribute.\n     */\n    type?: 'button' | 'reset' | 'submit';\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    type = 'button',\n    ghost,\n    outlined,\n    disabled,\n    isloading,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<button\n  class={[\n    'mc-button',\n    'mc-button--icon-button',\n    `mc-button--${size}`,\n    `mc-button--${appearance}`,\n    ghost && 'mc-button--ghost',\n    outlined && 'mc-button--outlined',\n    isloading && 'mc-button--loading',\n  ]}\n  {disabled}\n  {type}\n  {...attrs}\n>\n  {#if isloading}\n    <Loader style=\"color: currentColor\" size=\"s\" />\n  {/if}\n  {#if !isloading}\n    <slot name=\"icon\" />\n  {/if}\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n\n  :global(::slotted(*)) {\n    display: flex;\n  }\n</style>\n"],"names":["appearance","size","type","ghost","$.prop","$$props","outlined","disabled","isloading","attrs","$.rest_props","button","root","node","$.child","Loader","$$anchor","$$render","consequent","consequent_1","$.reset","$.append"],"mappings":";;ytWAYA,gBAwCI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,eAAO,QAAQ,EACfC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACRG,EAASJ,EAAAC,EAAA,YAAA,CAAA,EACNI,EAAAC,EAAAL,EAAA,sKAPU,WAAU,6CAChB,IAAG,6CACH,SAAQ,4NASlBM,EAAAC,EAAA,IAAAD,eAEG,YACA,uCACcV,EAAI,CAAA,iBACJD,EAAU,CAAA,GACxBG,EAAK,GAAI,mBACTG,EAAQ,GAAI,sBACZE,KAAa,+BAEdD,EAAQ,OACRL,EAAI,KACDO,0CAZL,IAAAI,EAAAC,EAAAH,CAAA,aAeII,EAAMC,EAAA,CAAA,MAAA,sBAAA,KAAA,IAAA,WADJR,EAAS,GAAAS,EAAAC,CAAA,mFAGRV,EAAS,GAAAS,EAAAE,CAAA,IAjBhBC,OAAAA,EAAAT,CAAA,EAAAU,EAAAL,EAAAL,CAAA,MAFO"}

package/dist/components/iconbutton/IconButton.svelte

@@ -12,7 +12,6 @@
 
 <script lang="ts">
   import Loader from '../loader/Loader.svelte';
-  import type { Snippet } from 'svelte';
   /**
    * Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.
    *
@@ -48,10 +47,6 @@
      * Specifies the button's HTML `type` attribute.
      */
     type?: 'button' | 'reset' | 'submit';
-    /**
-     * Use this snippet to insert an icon for the Button.
-     */
-    icon?: Snippet;
   }
 
   let {
@@ -62,7 +57,6 @@
     outlined,
     disabled,
     isloading,
-    icon,
     ...attrs
   }: Props = $props();
 </script>
@@ -85,11 +79,7 @@
     <Loader style="color: currentColor" size="s" />
   {/if}
   {#if !isloading}
-    {#if icon}
-      {@render icon()}
-    {:else}
-      <slot name="icon" />
-    {/if}
+    <slot name="icon" />
   {/if}
 </button>
 
@@ -294,6 +284,9 @@
   border-radius: var(--border-radius-full, 100%);
   padding: 0;
 }
+.mc-button--loading {
+  pointer-events: none;
+}
 .mc-button--loading .mc-button__loader {
   position: absolute;
   color: currentcolor;
@@ -433,4 +426,8 @@
   border-color: transparent;
   color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
+}
+
+:global(::slotted(*)) {
+  display: flex;
 }</style>