@mozaic-ds/web-components 1.4.0 → 1.5.1

package/dist/components/actionlistbox/ActionListbox.js

@@ -1,4 +1,4 @@
-import{c as C,p as I,a as A,b as p,s as _,f as x,g as B,h as g,d as t,j as h,r as s,t as D,e as F}from"../../custom-element.js";import{i as L}from"../../if.js";import{s as P}from"../../slot.js";import{b as S}from"../../this.js";import{I as q}from"../iconbutton/IconButton.js";import{n as G}from"../../Condition20.js";import{c as H}from"../../custom-element-forward-events.js";import"../../snippet.js";import"../../attributes.js";import"../loader/Loader.js";var J=g('<h3 class="mc-listbox__title svelte-cf5eub"> </h3>'),K=g('<div class="mc-listbox svelte-cf5eub"><div class="mc-listbox__content svelte-cf5eub"><div class="mc-listbox__header svelte-cf5eub"><!> <span class="mc-listbox__close svelte-cf5eub"><!></span></div> <div class="mc-listbox__body svelte-cf5eub"><ul class="mc-action-list svelte-cf5eub" role="menu"><!></ul></div></div></div>');const M={hash:"svelte-cf5eub",code:`/**
+import{c as C,p as I,a as A,b as p,s as _,f as x,g as B,h as g,d as t,j as h,r as s,t as D,e as F}from"../../custom-element.js";import{i as L}from"../../if.js";import{s as P}from"../../slot.js";import{b as S}from"../../this.js";import{I as q}from"../iconbutton/IconButton.js";import{n as G}from"../../Condition20.js";import{c as H}from"../../custom-element-forward-events.js";import"../../branches.js";import"../../attributes.js";import"../loader/Loader.js";var J=g('<h3 class="mc-listbox__title svelte-cf5eub"> </h3>'),K=g('<div class="mc-listbox svelte-cf5eub"><div class="mc-listbox__content svelte-cf5eub"><div class="mc-listbox__header svelte-cf5eub"><!> <span class="mc-listbox__close svelte-cf5eub"><!></span></div> <div class="mc-listbox__body svelte-cf5eub"><ul class="mc-action-list svelte-cf5eub" role="menu"><!></ul></div></div></div>');const M={hash:"svelte-cf5eub",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-listbox.svelte-cf5eub {position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;z-index:1;padding:0.5rem;background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:var(--overlay-z-index, 2);}.mc-listbox.svelte-cf5eub {opacity:1;}
 @media (width >= 680px) {.mc-listbox.svelte-cf5eub {position:relative;display:block;padding:0;background-color:transparent;}

package/dist/components/actionlistbox/ActionListbox.stories.js

@@ -10,7 +10,7 @@ import '@mozaic-ds/icons-svelte/components/Trash20/Trash20.svelte';
 const meta = {
     title: 'Overlay/ Action Listbox',
     component: 'm-action-listbox',
-    subcomponents: { 'm-action-listbox-item': 'm-action-listbox-item' },
+    subcomponents: { 'ActionListboxItem': 'm-action-listbox-item' },
     args: {
         title: 'Listbox title (optional)',
     },

package/dist/components/actionlistboxitem/ActionListboxItem.js

@@ -1,4 +1,4 @@
-import{u as F,c as I,p as L,a as S,b as a,l as q,s as w,t as B,f as b,g as C,h as g,d as i,j as l,r as o,n as G,o as H,e as J}from"../../custom-element.js";import{i as y}from"../../if.js";import{a as K,s as M}from"../../slot.js";import{c as N}from"../../custom-element-forward-events.js";import{D as O}from"../divider/Divider.js";import"../../snippet.js";import"../../attributes.js";var P=g('<span class="mc-action-list__divider svelte-rf7fkv"><!></span>'),Q=g('<span class="mc-action-list__icon svelte-rf7fkv"><!></span>'),R=g('<!> <li role="menuitem"><button type="button" class="mc-action-list__button svelte-rf7fkv"><!> <p class="mc-action-list__text svelte-rf7fkv"> </p></button></li>',1);const T={hash:"svelte-rf7fkv",code:`/**
+import{o as F,c as I,p as L,a as S,b as a,y as q,s as w,t as B,f as b,g as C,h as g,d as i,j as l,r as o,l as G,m as H,e as J}from"../../custom-element.js";import{i as y}from"../../if.js";import{a as K,s as M}from"../../slot.js";import{c as N}from"../../custom-element-forward-events.js";import{D as O}from"../divider/Divider.js";import"../../branches.js";import"../../attributes.js";var P=g('<span class="mc-action-list__divider svelte-rf7fkv"><!></span>'),Q=g('<span class="mc-action-list__icon svelte-rf7fkv"><!></span>'),R=g('<!> <li role="menuitem"><button type="button" class="mc-action-list__button svelte-rf7fkv"><!> <p class="mc-action-list__text svelte-rf7fkv"> </p></button></li>',1);const T={hash:"svelte-rf7fkv",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-action-list__element.svelte-rf7fkv {height:2.5rem;cursor:pointer;border-radius:var(--border-radius-s, 0.25rem);}.mc-action-list__element.svelte-rf7fkv:hover {background-color:var(--action-listbox-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-action-list__element--danger.svelte-rf7fkv .mc-action-list__text:where(.svelte-rf7fkv) {color:var(--action-listbox-color-text-danger, #c61112);}.mc-action-list__element--danger.svelte-rf7fkv .mc-action-list__icon:where(.svelte-rf7fkv) {fill:var(--action-listbox-color-text-danger, #c61112);}.mc-action-list__element--danger.svelte-rf7fkv:hover {background-color:var(--action-listbox-color-background-danger-hover, rgba(198, 17, 18, 0.1));}.mc-action-list__element--disabled.svelte-rf7fkv {cursor:not-allowed;}.mc-action-list__element--disabled.svelte-rf7fkv .mc-action-list__text:where(.svelte-rf7fkv) {color:var(--action-listbox-color-text-disabled, #b3b3b3);}.mc-action-list__element--disabled.svelte-rf7fkv .mc-action-list__icon:where(.svelte-rf7fkv) {fill:var(--action-listbox-color-text-disabled, #b3b3b3);}.mc-action-list__element--disabled.svelte-rf7fkv:hover {background-color:transparent;}.mc-action-list__button.svelte-rf7fkv {background-color:transparent;border:none;display:flex;align-items:center;gap:0.25rem;padding:0;padding:0 0.25rem;cursor:pointer;width:100%;height:100%;}.mc-action-list__text.svelte-rf7fkv {font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--action-listbox-color-text-default, #000000);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;}.mc-action-list__icon.svelte-rf7fkv {width:1.25rem;height:1.25rem;}.mc-action-list__divider.svelte-rf7fkv {margin:0.5rem 0;}.mc-action-list__divider.svelte-rf7fkv {display:block;}`};function U(u,t){const z=K(t);L(t,!0),S(u,T);let s=a(t,"label",7),n=a(t,"disabled",7),c=a(t,"appearance",7),v=a(t,"divider",7),d=a(t,"onclick",7);var D={get label(){return s()},set label(e){s(e),l()},get disabled(){return n()},set disabled(e){n(e),l()},get appearance(){return c()},set appearance(e){c(e),l()},get divider(){return v()},set divider(e){v(e),l()},get onclick(){return d()},set onclick(e){d(e),l()}},k=R(),p=q(k);{var E=e=>{var r=P(),_=i(r);O(_,{}),o(r),b(e,r)};y(p,e=>{v()&&e(E)})}var f=w(p,2),m=i(f);m.__click=function(...e){d()?.apply(this,e)};var h=i(m);{var j=e=>{var r=Q(),_=i(r);M(_,t,"icon",{},null),o(r),b(e,r)};y(h,e=>{z.icon&&e(j)})}var x=w(h,2),A=i(x,!0);return o(x),o(m),o(f),B(()=>{G(f,1,H({"mc-action-list__element":!0,"mc-action-list__element--danger":c()==="danger","mc-action-list__element--disabled":n()}),"svelte-rf7fkv"),J(A,s())}),b(u,k),C(D)}F(["click"]);customElements.define("m-action-listbox-item",I(U,{label:{},disabled:{},appearance:{},divider:{},onclick:{}},["icon"],[],!0,N));
+ */.mc-action-list__element.svelte-rf7fkv {height:2.5rem;cursor:pointer;border-radius:var(--border-radius-s, 0.25rem);}.mc-action-list__element.svelte-rf7fkv:hover {background-color:var(--action-listbox-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-action-list__element--danger.svelte-rf7fkv .mc-action-list__text:where(.svelte-rf7fkv) {color:var(--action-listbox-color-text-danger, #c61112);}.mc-action-list__element--danger.svelte-rf7fkv .mc-action-list__icon:where(.svelte-rf7fkv) {fill:var(--action-listbox-color-text-danger, #c61112);}.mc-action-list__element--danger.svelte-rf7fkv:hover {background-color:var(--action-listbox-color-background-danger-hover, rgba(198, 17, 18, 0.1));}.mc-action-list__element--disabled.svelte-rf7fkv {cursor:not-allowed;}.mc-action-list__element--disabled.svelte-rf7fkv .mc-action-list__text:where(.svelte-rf7fkv) {color:var(--action-listbox-color-text-disabled, #b3b3b3);}.mc-action-list__element--disabled.svelte-rf7fkv .mc-action-list__icon:where(.svelte-rf7fkv) {fill:var(--action-listbox-color-text-disabled, #b3b3b3);}.mc-action-list__element--disabled.svelte-rf7fkv:hover {background-color:transparent;}.mc-action-list__button.svelte-rf7fkv {background-color:transparent;border:none;display:flex;align-items:center;gap:0.25rem;padding:0;padding:0 0.25rem;cursor:pointer;width:100%;height:100%;}.mc-action-list__text.svelte-rf7fkv {font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--action-listbox-color-text-default, #000000);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;}.mc-action-list__icon.svelte-rf7fkv {width:1.25rem;height:1.25rem;}.mc-action-list__divider.svelte-rf7fkv {margin:0.5rem 0;}.mc-action-list__divider.svelte-rf7fkv {display:block;}`};function U(k,t){const z=K(t);L(t,!0),S(k,T);let s=a(t,"label",7),n=a(t,"disabled",7),c=a(t,"appearance",7),v=a(t,"divider",7),d=a(t,"onclick",7);var D={get label(){return s()},set label(e){s(e),l()},get disabled(){return n()},set disabled(e){n(e),l()},get appearance(){return c()},set appearance(e){c(e),l()},get divider(){return v()},set divider(e){v(e),l()},get onclick(){return d()},set onclick(e){d(e),l()}},p=R(),u=q(p);{var E=e=>{var r=P(),_=i(r);O(_,{}),o(r),b(e,r)};y(u,e=>{v()&&e(E)})}var f=w(u,2),m=i(f);m.__click=function(...e){d()?.apply(this,e)};var h=i(m);{var j=e=>{var r=Q(),_=i(r);M(_,t,"icon",{},null),o(r),b(e,r)};y(h,e=>{z.icon&&e(j)})}var x=w(h,2),A=i(x,!0);return o(x),o(m),o(f),B(()=>{G(f,1,H({"mc-action-list__element":!0,"mc-action-list__element--danger":c()==="danger","mc-action-list__element--disabled":n()}),"svelte-rf7fkv"),J(A,s())}),b(k,p),C(D)}F(["click"]);customElements.define("m-action-listbox-item",I(U,{label:{},disabled:{},appearance:{},divider:{},onclick:{}},["icon"],[],!0,N));
 //# sourceMappingURL=ActionListboxItem.js.map

package/dist/components/avatar/Avatar.js

@@ -1,4 +1,4 @@
-import{c as p,p as w,a as z,b as d,f as n,g as _,h as y,i as k,d as x,j as c,k as m,l as f,r as j}from"../../custom-element.js";import{s as A}from"../../snippet.js";import{i as D}from"../../if.js";import{s as E}from"../../slot.js";import{a as S}from"../../attributes.js";var $=y("<div><!></div>");const q={hash:"svelte-1g4aw6b",code:`/**
+import{c as l,p as d,a as c,b as m,f as v,g as f,h,i as u,d as g,j as b,r as p}from"../../custom-element.js";import{s as w}from"../../slot.js";import{a as z}from"../../attributes.js";var y=h("<div><!></div>");const _={hash:"svelte-1g4aw6b",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-avatar.svelte-1g4aw6b {display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;overflow:hidden;border-radius:var(--border-radius-full, 100%);background:var(--color-background-secondary, #eff1f6);color:var(--color-text-secondary, #404040);font-size:var(--font-size-50, 0.75rem);font-weight:var(--font-weight-semi-bold, 600);text-transform:uppercase;}.mc-avatar--m.svelte-1g4aw6b {width:3rem;height:3rem;font-size:var(--font-size-200, 1.125rem);}.mc-avatar--l.svelte-1g4aw6b {width:4rem;height:4rem;font-size:var(--font-size-300, 1.5rem);}.svelte-1g4aw6b::slotted(img) {display:block;width:100%;height:100%;object-fit:contain;}`};function B(l,t){w(t,!0),z(l,q);let r=d(t,"size",7,"s"),s=d(t,"children",7),v=k(t,["$$slots","$$events","$$legacy","$$host","size","children"]);var h={get size(){return r()},set size(e="s"){r(e),c()},get children(){return s()},set children(e){s(e),c()}},i=$();S(i,()=>({class:["mc-avatar",r()&&`mc-avatar--${r()}`],...v}),void 0,void 0,void 0,"svelte-1g4aw6b");var g=x(i);{var u=e=>{var a=m(),o=f(a);A(o,s),n(e,a)},b=e=>{var a=m(),o=f(a);E(o,t,"default",{},null),n(e,a)};D(g,e=>{s()?e(u):e(b,!1)})}return j(i),n(l,i),_(h)}customElements.define("m-avatar",p(B,{size:{},children:{}},["default"],[],!0));
+ */.mc-avatar.svelte-1g4aw6b {display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;overflow:hidden;border-radius:var(--border-radius-full, 100%);background:var(--color-background-secondary, #eff1f6);color:var(--color-text-secondary, #404040);font-size:var(--font-size-50, 0.75rem);font-weight:var(--font-weight-semi-bold, 600);text-transform:uppercase;}.mc-avatar--m.svelte-1g4aw6b {width:3rem;height:3rem;font-size:var(--font-size-200, 1.125rem);}.mc-avatar--l.svelte-1g4aw6b {width:4rem;height:4rem;font-size:var(--font-size-300, 1.5rem);}.svelte-1g4aw6b::slotted(img) {display:block;width:100%;height:100%;object-fit:contain;}`};function $(s,e){d(e,!0),c(s,_);let t=m(e,"size",7,"s"),r=u(e,["$$slots","$$events","$$legacy","$$host","size"]);var o={get size(){return t()},set size(n="s"){t(n),b()}},a=y();z(a,()=>({class:["mc-avatar",t()&&`mc-avatar--${t()}`],...r}),void 0,void 0,void 0,"svelte-1g4aw6b");var i=g(a);return w(i,e,"default",{},null),p(a),v(s,a),f(o)}customElements.define("m-avatar",l($,{size:{}},["default"],[],!0));
 //# sourceMappingURL=Avatar.js.map

package/dist/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-avatar' }} />\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  /**\n   * An avatar is a graphical representation of a user, entity, or group, commonly displayed as an image, initials, or an icon. It helps identify individuals or accounts in profiles, comments, chat interfaces, and user lists. Avatars can be customized with different styles, sizes, and fallback options (such as initials or placeholders) to ensure consistency and recognition across interfaces. When multiple users are represented, Avatar groups provide a compact way to display them collectively.\n   *\n   * @slot default - Use this slot to insert the image, icon or initials of the avatar.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Determines the size of the avatar.\n     */\n    size: 's' | 'm' | 'l';\n    /**\n     * Use this snippet to insert the image, icon or initials of the avatar.\n     */\n    children?: Snippet;\n  }\n\n  let { size = 's', children, ...attrs }: Props = $props();\n</script>\n\n<div class={['mc-avatar', size && `mc-avatar--${size}`]} {...attrs}>\n  {#if children}\n    {@render children()}\n  {:else}\n    <slot />\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/avatar';\n\n  ::slotted(img) {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n</style>\n"],"names":["size","children","$.prop","$$props","attrs","$.rest_props","div","root","$$render","consequent","alternate"],"mappings":";;gqBAEA,gBAmBQ,IAAAA,eAAO,GAAG,EAAEC,EAAQC,EAAAC,EAAA,WAAA,CAAA,EAAKC,EAAKC,EAAAF,EAAA,uGAAvB,IAAG,iEAGjBG,EAAGC,EAAA,IAAHD,eAAY,YAAaN,EAAI,GAAA,cAAkBA,EAAI,CAAA,EAAA,KAASI,mDAA5DE,CAAG,kCAESL,CAAQ,0EADdA,EAAQ,EAAAO,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,aADdJ,CAAG,MAAHA,CAAG,MAFI"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-avatar' }} />\n\n<script lang=\"ts\">\n  /**\n   * An avatar is a graphical representation of a user, entity, or group, commonly displayed as an image, initials, or an icon. It helps identify individuals or accounts in profiles, comments, chat interfaces, and user lists. Avatars can be customized with different styles, sizes, and fallback options (such as initials or placeholders) to ensure consistency and recognition across interfaces. When multiple users are represented, Avatar groups provide a compact way to display them collectively.\n   *\n   * @slot default - Use this slot to insert the image, icon or intials of the avatar.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Determines the size of the avatar.\n     */\n    size: 's' | 'm' | 'l';\n  }\n\n  let { size = 's', ...attrs }: Props = $props();\n</script>\n\n<div class={['mc-avatar', size && `mc-avatar--${size}`]} {...attrs}>\n  <slot />\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/avatar';\n\n  ::slotted(img) {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n</style>\n"],"names":["size","attrs","$.rest_props","$$props","div","root"],"mappings":";;gqBAEA,gBAcQ,IAAAA,eAAO,GAAG,EAAKC,EAAKC,EAAAC,EAAA,CAAA,UAAA,WAAA,WAAA,SAAA,MAAA,CAAA,2CAAb,IAAG,YAGjBC,EAAGC,EAAA,IAAHD,eAAY,YAAaJ,EAAI,GAAA,cAAkBA,EAAI,CAAA,EAAA,KAASC,mDAA5DG,CAAG,oCAAHA,CAAG,MAAHA,CAAG,MAFI"}

package/dist/components/avatar/Avatar.svelte

@@ -1,11 +1,10 @@
 <svelte:options customElement={{ tag: 'm-avatar' }} />
 
 <script lang="ts">
-  import type { Snippet } from 'svelte';
   /**
    * An avatar is a graphical representation of a user, entity, or group, commonly displayed as an image, initials, or an icon. It helps identify individuals or accounts in profiles, comments, chat interfaces, and user lists. Avatars can be customized with different styles, sizes, and fallback options (such as initials or placeholders) to ensure consistency and recognition across interfaces. When multiple users are represented, Avatar groups provide a compact way to display them collectively.
    *
-   * @slot default - Use this slot to insert the image, icon or initials of the avatar.
+   * @slot default - Use this slot to insert the image, icon or intials of the avatar.
    */
   interface Props {
     [key: string]: any;
@@ -13,21 +12,13 @@
      * Determines the size of the avatar.
      */
     size: 's' | 'm' | 'l';
-    /**
-     * Use this snippet to insert the image, icon or initials of the avatar.
-     */
-    children?: Snippet;
   }
 
-  let { size = 's', children, ...attrs }: Props = $props();
+  let { size = 's', ...attrs }: Props = $props();
 </script>
 
 <div class={['mc-avatar', size && `mc-avatar--${size}`]} {...attrs}>
-  {#if children}
-    {@render children()}
-  {:else}
-    <slot />
-  {/if}
+  <slot />
 </div>
 
 <style>/**

package/dist/components/avatar/Avatar.svelte.d.ts

@@ -1,8 +1,7 @@
-import type { Snippet } from 'svelte';
 /**
  * An avatar is a graphical representation of a user, entity, or group, commonly displayed as an image, initials, or an icon. It helps identify individuals or accounts in profiles, comments, chat interfaces, and user lists. Avatars can be customized with different styles, sizes, and fallback options (such as initials or placeholders) to ensure consistency and recognition across interfaces. When multiple users are represented, Avatar groups provide a compact way to display them collectively.
  *
- * @slot default - Use this slot to insert the image, icon or initials of the avatar.
+ * @slot default - Use this slot to insert the image, icon or intials of the avatar.
  */
 interface Props {
     [key: string]: any;
@@ -10,10 +9,6 @@ interface Props {
      * Determines the size of the avatar.
      */
     size: 's' | 'm' | 'l';
-    /**
-     * Use this snippet to insert the image, icon or initials of the avatar.
-     */
-    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/avatar/Avatar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEpC;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsBH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;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":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACvB;AAiBH,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/avatar/README.md

@@ -7,11 +7,10 @@ An avatar is a graphical representation of a user, entity, or group, commonly di
 | Name | Description | Type | Default |
 |------|-------------|------|---------|
 | `size*` | Determines the size of the avatar. | `'s'` `'m'` `'l'` | `s` |
-| `children` | Use this snippet to insert the image, icon or initials of the avatar. | `Snippet` |   |
 
 ## Slots
 
 | Name | Description |
 |------|-------------|
-| `default` | Use this slot to insert the image, icon or initials of the avatar. |
+| `default` | Use this slot to insert the image, icon or intials of the avatar. |
 

package/dist/components/breadcrumb/Breadcrumb.js

@@ -1,8 +1,8 @@
-import{c as E,p as L,a as B,b as u,f as b,g as $,h as _,i as M,d as c,j as x,r as t,t as j,o as z,q as m,n as q,e as D}from"../../custom-element.js";import{e as S,i as A}from"../../each.js";import{a as F,s as f}from"../../attributes.js";var G=_('<li class="mc-breadcrumb__item svelte-1ihiex7"><a><span class="mc-link__label svelte-1ihiex7"> </span></a></li>'),H=_('<nav><ol class="mc-breadcrumb__container svelte-1ihiex7"></ol></nav>');const I={hash:"svelte-1ihiex7",code:`/**
+import{c as E,p as L,a as B,b as u,f as b,g as $,h as _,i as M,d as c,j as x,r as t,t as j,m as z,n as m,l as D,e as S}from"../../custom-element.js";import{e as q,i as A}from"../../each.js";import{a as F,s as f}from"../../attributes.js";var G=_('<li class="mc-breadcrumb__item svelte-1ihiex7"><a><span class="mc-link__label svelte-1ihiex7"> </span></a></li>'),H=_('<nav><ol class="mc-breadcrumb__container svelte-1ihiex7"></ol></nav>');const I={hash:"svelte-1ihiex7",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-breadcrumb.svelte-1ihiex7 {color:var(--breadcrumb-color-text-standard, #000000);}.mc-breadcrumb__container.svelte-1ihiex7 {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;flex-wrap:wrap;gap:0.25rem;}.mc-breadcrumb__item.svelte-1ihiex7 {background-position:left center;background-repeat:no-repeat;}.mc-breadcrumb__item.svelte-1ihiex7:not(:first-child) {padding-inline-start:1.5rem;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(--breadcrumb-color-icon-standard, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.22 5.303a.75.75 0 0 1 1.06 0l4.167 4.167a.75.75 0 0 1 0 1.06L9.28 14.698a.75.75 0 1 1-1.06-1.06L11.856 10 8.22 6.364a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");}
 @media screen and (max-width: 679px) {.mc-breadcrumb__item.svelte-1ihiex7:nth-last-child(2) {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(--breadcrumb-color-icon-standard, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M11.78 5.303a.75.75 0 0 1 0 1.06L8.144 10l3.636 3.637a.75.75 0 0 1-1.06 1.06l-4.167-4.166a.75.75 0 0 1 0-1.061l4.166-4.167a.75.75 0 0 1 1.061 0'/%3E%3C/svg%3E");}.mc-breadcrumb__item.svelte-1ihiex7:not(:nth-last-child(2)) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}
 }.mc-breadcrumb__current.svelte-1ihiex7, .mc-breadcrumb__current.mc-link.svelte-1ihiex7 {cursor:default;text-decoration:none;}.mc-breadcrumb__current.svelte-1ihiex7, .mc-breadcrumb__current.svelte-1ihiex7:active, .mc-breadcrumb__current.svelte-1ihiex7:focus, .mc-breadcrumb__current.svelte-1ihiex7:hover, .mc-breadcrumb__current.svelte-1ihiex7:visited, .mc-breadcrumb__current.mc-link.svelte-1ihiex7, .mc-breadcrumb__current.mc-link.svelte-1ihiex7:active, .mc-breadcrumb__current.mc-link.svelte-1ihiex7:focus, .mc-breadcrumb__current.mc-link.svelte-1ihiex7:hover, .mc-breadcrumb__current.mc-link.svelte-1ihiex7:visited {color:currentcolor;}.mc-breadcrumb--inverse.svelte-1ihiex7 {color:var(--breadcrumb-color-text-inverse, #ffffff);}.mc-breadcrumb--inverse.svelte-1ihiex7 .mc-breadcrumb__item:where(.svelte-1ihiex7):not(:first-child) {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(--breadcrumb-color-icon-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.22 5.303a.75.75 0 0 1 1.06 0l4.167 4.167a.75.75 0 0 1 0 1.06L9.28 14.698a.75.75 0 1 1-1.06-1.06L11.856 10 8.22 6.364a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");}
 @media screen and (max-width: 679px) {.mc-breadcrumb--inverse.svelte-1ihiex7 .mc-breadcrumb__item:where(.svelte-1ihiex7):nth-last-child(2) {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(--breadcrumb-color-icon-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M11.78 5.303a.75.75 0 0 1 0 1.06L8.144 10l3.636 3.637a.75.75 0 0 1-1.06 1.06l-4.167-4.166a.75.75 0 0 1 0-1.061l4.166-4.167a.75.75 0 0 1 1.061 0'/%3E%3C/svg%3E");}
-}.mc-link.svelte-1ihiex7 {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-1ihiex7 {line-height:1.3;}.mc-link__icon.svelte-1ihiex7 {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-1ihiex7:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-1ihiex7) {text-decoration:underline;}.mc-link.svelte-1ihiex7:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-link--m.svelte-1ihiex7 {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-1ihiex7 {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-1ihiex7 {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-1ihiex7 {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-1ihiex7 {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-1ihiex7 .mc-link__label:where(.svelte-1ihiex7) {border-bottom:var(--border-width-s, 0.0625rem) solid currentColor;}.mc-link--stand-alone.svelte-1ihiex7:hover .mc-link__label:where(.svelte-1ihiex7) {border-color:transparent;}.mc-link--inline.svelte-1ihiex7 {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-1ihiex7 .mc-link__label:where(.svelte-1ihiex7) {line-height:1;}.mc-link--inline.svelte-1ihiex7:hover {text-decoration:none;}`};function J(d,a){L(a,!0),B(d,I);let r=u(a,"appearance",7,"standard"),l=u(a,"links",7),p=M(a,["$$slots","$$events","$$legacy","$$host","appearance","links"]);const g=e=>e===l().length-1;var k={get appearance(){return r()},set appearance(e="standard"){r(e),x()},get links(){return l()},set links(e){l(e),x()}},n=H();F(n,()=>({class:`mc-breadcrumb mc-breadcrumb--${r()}`,"aria-label":"Breadcrumb",...p}),void 0,void 0,void 0,"svelte-1ihiex7");var h=c(n);return S(h,21,l,A,(e,s,w)=>{var o=G(),i=c(o),v=c(i),y=c(v,!0);t(v),t(i),t(o),j(C=>{f(i,"href",m(s).href),f(i,"target",m(s).target),q(i,1,C,"svelte-1ihiex7"),D(y,m(s).label)},[()=>z(["mc-link","mc-link--m","mc-link--inline",r()&&`mc-link--${r()}`,g(w)&&"mc-breadcrumb__current"])]),b(e,o)}),t(h),t(n),b(d,n),$(k)}customElements.define("m-breadcrumb",E(J,{appearance:{},links:{}},[],[],!0));
+}.mc-link.svelte-1ihiex7 {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-1ihiex7 {line-height:1.3;}.mc-link__icon.svelte-1ihiex7 {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-1ihiex7:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-1ihiex7) {text-decoration:underline;}.mc-link.svelte-1ihiex7:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-link--m.svelte-1ihiex7 {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-1ihiex7 {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-1ihiex7 {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-1ihiex7 {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-1ihiex7 {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-1ihiex7 .mc-link__label:where(.svelte-1ihiex7) {border-bottom:var(--border-width-s, 0.0625rem) solid currentColor;}.mc-link--stand-alone.svelte-1ihiex7:hover .mc-link__label:where(.svelte-1ihiex7) {border-color:transparent;}.mc-link--inline.svelte-1ihiex7 {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-1ihiex7 .mc-link__label:where(.svelte-1ihiex7) {line-height:1;}.mc-link--inline.svelte-1ihiex7:hover {text-decoration:none;}`};function J(d,a){L(a,!0),B(d,I);let r=u(a,"appearance",7,"standard"),l=u(a,"links",7),p=M(a,["$$slots","$$events","$$legacy","$$host","appearance","links"]);const g=e=>e===l().length-1;var k={get appearance(){return r()},set appearance(e="standard"){r(e),x()},get links(){return l()},set links(e){l(e),x()}},n=H();F(n,()=>({class:`mc-breadcrumb mc-breadcrumb--${r()}`,"aria-label":"Breadcrumb",...p}),void 0,void 0,void 0,"svelte-1ihiex7");var h=c(n);return q(h,21,l,A,(e,s,w)=>{var o=G(),i=c(o),v=c(i),y=c(v,!0);t(v),t(i),t(o),j(C=>{f(i,"href",m(s).href),f(i,"target",m(s).target),D(i,1,C,"svelte-1ihiex7"),S(y,m(s).label)},[()=>z(["mc-link","mc-link--m","mc-link--inline",r()&&`mc-link--${r()}`,g(w)&&"mc-breadcrumb__current"])]),b(e,o)}),t(h),t(n),b(d,n),$(k)}customElements.define("m-breadcrumb",E(J,{appearance:{},links:{}},[],[],!0));
 //# sourceMappingURL=Breadcrumb.js.map

package/dist/components/builtinmenu/BuiltInMenu.js

@@ -1,4 +1,4 @@
-import{c as y,p as k,a as B,b as a,t as w,f as c,g as j,h as D,d as v,j as d,k as f,l as b,r as p,n as E,o as I}from"../../custom-element.js";import{s as M}from"../../snippet.js";import{i as S}from"../../if.js";import{s as q}from"../../slot.js";var z=D('<nav aria-label="menu"><ul class="mc-built-in-menu__list svelte-9dcxnv"><!></ul></nav>');const A={hash:"svelte-9dcxnv",code:`/**
+import{c as v,p as b,a as f,b as a,t as p,f as _,g,h as x,d as u,j as d,r as c,l as h,m as y}from"../../custom-element.js";import{s as k}from"../../slot.js";var w=x('<nav aria-label="menu"><ul class="mc-built-in-menu__list svelte-9dcxnv"><!></ul></nav>');const B={hash:"svelte-9dcxnv",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-built-in-menu.svelte-9dcxnv {display:inline-block;width:15rem;padding:0.5rem;background-color:var(--built-in-menu-color-background-default, #ffffff);border-radius:var(--border-radius-s, 0.25rem);}.mc-built-in-menu--outlined.svelte-9dcxnv {border:1px solid var(--color-border-primary, #cccccc);}.mc-built-in-menu__list.svelte-9dcxnv {list-style:none;margin:0;padding:0;}`};function C(u,t){k(t,!0),B(u,A);let o=a(t,"selected",15),s=a(t,"outlined",7),l=a(t,"children",7);var _={get selected(){return o()},set selected(e){o(e),d()},get outlined(){return s()},set outlined(e){s(e),d()},get children(){return l()},set children(e){l(e),d()}},r=z(),m=v(r),h=v(m);{var g=e=>{var n=f(),i=b(n);M(i,l),c(e,n)},x=e=>{var n=f(),i=b(n);q(i,t,"item",{},null),c(e,n)};S(h,e=>{l()?e(g):e(x,!1)})}return p(m),p(r),w(()=>E(r,1,I({"mc-built-in-menu":!0,"mc-built-in-menu--outlined":s()}),"svelte-9dcxnv")),c(u,r),j(_)}customElements.define("m-built-in-menu",y(C,{outlined:{attribute:"outlined",reflect:!0,type:"Boolean"},selected:{},children:{}},["item"],[],!0));export{C as B};
+ */.mc-built-in-menu.svelte-9dcxnv {display:inline-block;width:15rem;padding:0.5rem;background-color:var(--built-in-menu-color-background-default, #ffffff);border-radius:var(--border-radius-s, 0.25rem);}.mc-built-in-menu--outlined.svelte-9dcxnv {border:1px solid var(--color-border-primary, #cccccc);}.mc-built-in-menu__list.svelte-9dcxnv {list-style:none;margin:0;padding:0;}`};function j(s,e){b(e,!0),f(s,B);let i=a(e,"selected",15),l=a(e,"outlined",7);var o={get selected(){return i()},set selected(n){i(n),d()},get outlined(){return l()},set outlined(n){l(n),d()}},t=w(),r=u(t),m=u(r);return k(m,e,"item",{},null),c(r),c(t),p(()=>h(t,1,y({"mc-built-in-menu":!0,"mc-built-in-menu--outlined":l()}),"svelte-9dcxnv")),_(s,t),g(o)}customElements.define("m-built-in-menu",v(j,{outlined:{attribute:"outlined",reflect:!0,type:"Boolean"},selected:{}},["item"],[],!0));
 //# sourceMappingURL=BuiltInMenu.js.map

package/dist/components/builtinmenu/BuiltInMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"BuiltInMenu.js","sources":["../../../src/components/builtinmenu/BuiltInMenu.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-built-in-menu',\n    props: {\n      outlined: { reflect: true, type: 'Boolean', attribute: 'outlined' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  /**\n   * A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.\n   *\n   * @slot item - use this slot to insert `m-menu-item` components.\n   */\n  interface Props {\n    /**\n     * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.\n     */\n    selected?: number;\n    /**\n     * When enabled, adds a visible border around the wrapper to highlight or separate its content.\n     */\n    outlined?: boolean;\n    /**\n     * use this snippet to insert `m-menu-item` components.\n     */\n    children?: Snippet;\n  }\n\n  let { selected = $bindable(), outlined, children }: Props = $props();\n</script>\n\n<nav\n  class={{\n    'mc-built-in-menu': true,\n    'mc-built-in-menu--outlined': outlined,\n  }}\n  aria-label=\"menu\"\n>\n  <ul class=\"mc-built-in-menu__list\">\n    {#if children}\n      {@render children()}\n    {:else}\n      <slot name=\"item\" />\n    {/if}\n  </ul>\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/built-in-menu';\n</style>\n"],"names":["selected","$.prop","$$props","outlined","children","nav","root","ul","$.child","$$render","consequent","alternate","$.reset","$.append","$$anchor"],"mappings":";;0YASA,oBAsBQA,EAAQC,EAAAC,EAAA,WAAA,EAAA,EAAgBC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EAAEE,EAAQH,EAAAC,EAAA,WAAA,CAAA,yKAGjDG,EAAAC,EAAA,EAOEC,EAAEC,EAPJH,CAAA,MAOEE,CAAE,kCAEUH,CAAQ,uEADdA,EAAQ,EAAAK,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,aADdJ,CAAE,EAPJK,EAAAP,CAAA,UAAAA,OAEG,mBAAoB,GACpB,6BAA8BF,EAAQ,sBAHzCU,EAAAC,EAAAT,CAAA,MAFO"}
+{"version":3,"file":"BuiltInMenu.js","sources":["../../../src/components/builtinmenu/BuiltInMenu.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-built-in-menu',\n    props: {\n      outlined: { reflect: true, type: 'Boolean', attribute: 'outlined' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  /**\n   * A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.\n   *\n   * @slot item - use this slot to insert `m-menu-item` components.\n   */\n  interface Props {\n    /**\n     * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.\n     */\n    selected?: number;\n    /**\n     * When enabled, adds a visible border around the wrapper to highlight or separate its content.\n     */\n    outlined?: boolean;\n  }\n\n  let { selected = $bindable(), outlined }: Props = $props();\n</script>\n\n<nav\n  class={{\n    'mc-built-in-menu': true,\n    'mc-built-in-menu--outlined': outlined,\n  }}\n  aria-label=\"menu\"\n>\n  <ul class=\"mc-built-in-menu__list\">\n    <slot name=\"item\" />\n  </ul>\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/built-in-menu';\n</style>\n"],"names":["selected","$.prop","$$props","outlined","nav","root","ul","$.child","$.reset","$.append","$$anchor"],"mappings":";;0YASA,oBAiBQA,EAAQC,EAAAC,EAAA,WAAA,EAAA,EAAgBC,EAAQF,EAAAC,EAAA,WAAA,CAAA,oHAGvCE,EAAAC,EAAA,EAOEC,EAAEC,EAPJH,CAAA,MAOEE,CAAE,iCAAFA,CAAE,EAPJE,EAAAJ,CAAA,UAAAA,OAEG,mBAAoB,GACpB,6BAA8BD,EAAQ,sBAHzCM,EAAAC,EAAAN,CAAA,MAFO"}

package/dist/components/builtinmenu/BuiltInMenu.stories.js

@@ -7,7 +7,7 @@ import '@mozaic-ds/icons-svelte/components/Less24/Less24.svelte';
 const meta = {
     title: 'Navigation/Built-in Menu',
     component: 'm-built-in-menu',
-    subcomponents: { 'm-built-in-menu-item': 'm-built-in-menu-item' },
+    subcomponents: { 'BuiltInMenuItem': 'm-built-in-menu-item' },
     tags: ['v2'],
     args: {
         selected: 1,

package/dist/components/builtinmenu/BuiltInMenu.svelte

@@ -8,7 +8,6 @@
 />
 
 <script lang="ts">
-  import type { Snippet } from 'svelte';
   /**
    * A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.
    *
@@ -23,13 +22,9 @@
      * When enabled, adds a visible border around the wrapper to highlight or separate its content.
      */
     outlined?: boolean;
-    /**
-     * use this snippet to insert `m-menu-item` components.
-     */
-    children?: Snippet;
   }
 
-  let { selected = $bindable(), outlined, children }: Props = $props();
+  let { selected = $bindable(), outlined }: Props = $props();
 </script>
 
 <nav
@@ -40,11 +35,7 @@
   aria-label="menu"
 >
   <ul class="mc-built-in-menu__list">
-    {#if children}
-      {@render children()}
-    {:else}
-      <slot name="item" />
-    {/if}
+    <slot name="item" />
   </ul>
 </nav>
 

package/dist/components/builtinmenu/BuiltInMenu.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { Snippet } from 'svelte';
 /**
  * A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.
  *
@@ -13,10 +12,6 @@ interface Props {
      * When enabled, adds a visible border around the wrapper to highlight or separate its content.
      */
     outlined?: boolean;
-    /**
-     * use this snippet to insert `m-menu-item` components.
-     */
-    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/builtinmenu/BuiltInMenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BuiltInMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/builtinmenu/BuiltInMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEpC;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgCH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,WAAW;;;;kBAAqF,CAAC;AACrF,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"BuiltInMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/builtinmenu/BuiltInMenu.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2BH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,WAAW;;;;kBAAqF,CAAC;AACrF,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}

package/dist/components/builtinmenu/README.md

@@ -8,7 +8,6 @@ A built-in menu is a structured list of navigational or interactive options, typ
 |------|-------------|------|---------|
 | `selected` | Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use. | `number` | `$bindable()` |
 | `outlined` | When enabled, adds a visible border around the wrapper to highlight or separate its content. | `boolean` |   |
-| `children` | use this snippet to insert `m-menu-item` components. | `Snippet` |   |
 
 ## Slots
 

package/dist/components/builtinmenuitem/BuiltInMenuItem.js

@@ -1,8 +1,8 @@
-import{c as S,p as T,a as A,b as i,q as f,l as h,s as x,t as F,f as s,k as y,g as G,h as I,x as H,d as j,j as l,r as B,e as J}from"../../custom-element.js";import{s as K}from"../../snippet.js";import{i as L}from"../../if.js";import{s as O}from"../../slot.js";import{e as P}from"../../svelte-element.js";import{a as z}from"../../attributes.js";import{s as Q}from"../../Condition20.js";var U=I('<!> <span class="mc-built-in-menu__label svelte-eugnvn"> </span> <!>',1),V=I("<li><!></li>");const W={hash:"svelte-eugnvn",code:`/**
+import{c as I,p as C,a as D,b as n,n as v,y as E,s as _,t as M,f,g as N,h as k,v as R,d as h,j as i,r as p,e as S}from"../../custom-element.js";import{s as T}from"../../slot.js";import{e as q}from"../../svelte-element.js";import{a as w}from"../../attributes.js";import{s as A}from"../../Condition20.js";import"../../branches.js";var F=k('<!> <span class="mc-built-in-menu__label svelte-eugnvn"> </span> <!>',1),G=k("<li><!></li>");const H={hash:"svelte-eugnvn",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-built-in-menu.svelte-eugnvn {display:inline-block;width:15rem;padding:0.5rem;background-color:var(--built-in-menu-color-background-default, #ffffff);border-radius:var(--border-radius-s, 0.25rem);}.mc-built-in-menu--outlined.svelte-eugnvn {border:1px solid var(--color-border-primary, #cccccc);}.mc-built-in-menu__list.svelte-eugnvn {list-style:none;margin:0;padding:0;}.mc-built-in-menu__item.svelte-eugnvn {display:flex;align-items:center;height:3.5rem;border-bottom:1px solid var(--divider-color-primary, #cccccc);}.mc-built-in-menu__item--selected.svelte-eugnvn .mc-built-in-menu__button:where(.svelte-eugnvn),
 .mc-built-in-menu__item--selected.svelte-eugnvn .mc-built-in-menu__link:where(.svelte-eugnvn) {background-color:var(--built-in-menu-color-background-selected, #ebf5de);}.mc-built-in-menu__item--selected.svelte-eugnvn .mc-built-in-menu__label:where(.svelte-eugnvn) {color:var(--built-in-menu-color-text-selected, #006902);font-weight:var(--font-weight-semi-bold, 600);}.mc-built-in-menu__item--selected.svelte-eugnvn .mc-built-in-menu__icon:where(.svelte-eugnvn) {fill:var(--built-in-menu-color-text-selected, #006902);}.mc-built-in-menu__item.svelte-eugnvn:not(.mc-built-in-menu__item--selected):hover .mc-built-in-menu__button:where(.svelte-eugnvn), .mc-built-in-menu__item.svelte-eugnvn:not(.mc-built-in-menu__item--selected):hover .mc-built-in-menu__link:where(.svelte-eugnvn),
 .mc-built-in-menu__item.svelte-eugnvn:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__button:where(.svelte-eugnvn):focus-visible,
 .mc-built-in-menu__item.svelte-eugnvn:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__link:where(.svelte-eugnvn):focus-visible {background-color:var(--built-in-menu-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-built-in-menu__item.svelte-eugnvn:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__label:where(.svelte-eugnvn) {color:var(--built-in-menu-color-text-default, #404040);}.mc-built-in-menu__item--selected.svelte-eugnvn, .mc-built-in-menu__item.svelte-eugnvn:last-child, .mc-built-in-menu__item.svelte-eugnvn:hover {border-bottom:1px solid transparent;}.mc-built-in-menu__icon.svelte-eugnvn {flex:0 0 auto;}.mc-built-in-menu__button.svelte-eugnvn {width:100%;height:100%;border-radius:var(--border-radius-s, 0.25rem);background-color:var(--built-in-menu-color-background-default, #ffffff);padding:0 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;overflow:hidden;border:none;cursor:pointer;}.mc-built-in-menu__link.svelte-eugnvn {width:100%;height:100%;border-radius:var(--border-radius-s, 0.25rem);background-color:var(--built-in-menu-color-background-default, #ffffff);padding:0 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;overflow:hidden;text-decoration:none;}.mc-built-in-menu__label.svelte-eugnvn {flex:1 1 auto;margin-left:0.5rem;margin-right:1rem;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--built-in-menu-color-text-default, #404040);
-  /* Truncature */overflow:hidden;display:-webkit-box;text-align:left;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;}`};function X(p,t){T(t,!0),A(p,W);let c=i(t,"label",7),u=i(t,"href",7),v=i(t,"target",7),m=i(t,"selected",7),o=i(t,"icon",7),b=i(t,"attrs",7);const d=H(()=>u()?"a":"button");var q={get label(){return c()},set label(e){c(e),l()},get href(){return u()},set href(e){u(e),l()},get target(){return v()},set target(e){v(e),l()},get selected(){return m()},set selected(e){m(e),l()},get icon(){return o()},set icon(e){o(e),l()},get attrs(){return b()},set attrs(e){b(e),l()}},a=V();z(a,()=>({class:{"mc-built-in-menu__item":!0,"mc-built-in-menu__item--selected":m()},...m()?{"aria-current":!0}:{},...b()}),void 0,void 0,void 0,"svelte-eugnvn");var C=j(a);return P(C,()=>f(d),!1,(e,D)=>{z(e,()=>({class:`mc-built-in-menu__${f(d)==="button"?"button":"link"}`,...f(d)==="a"&&{href:u(),target:v()}}),void 0,void 0,void 0,"svelte-eugnvn");var w=U(),k=h(w);{var E=n=>{var r=y(),g=h(r);K(g,o),s(n,r)},M=n=>{var r=y(),g=h(r);O(g,t,"icon",{},null),s(n,r)};L(k,n=>{o()?n(E):n(M,!1)})}var _=x(k,2),N=j(_,!0);B(_);var R=x(_,2);Q(R,{className:"mc-built-in-menu__icon"}),F(()=>J(N,c())),s(D,w)}),B(a),s(p,a),G(q)}customElements.define("m-built-in-menu-item",S(X,{selected:{attribute:"selected",reflect:!0,type:"Boolean"},label:{},href:{},target:{},icon:{},attrs:{}},["icon"],[],!0));export{X as B};
+  /* Truncature */overflow:hidden;display:-webkit-box;text-align:left;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;}`};function J(b,t){C(t,!0),D(b,H);let m=n(t,"label",7),l=n(t,"href",7),o=n(t,"target",7),r=n(t,"selected",7),s=n(t,"attrs",7);const a=R(()=>l()?"a":"button");var x={get label(){return m()},set label(e){m(e),i()},get href(){return l()},set href(e){l(e),i()},get target(){return o()},set target(e){o(e),i()},get selected(){return r()},set selected(e){r(e),i()},get attrs(){return s()},set attrs(e){s(e),i()}},u=G();w(u,()=>({class:{"mc-built-in-menu__item":!0,"mc-built-in-menu__item--selected":r()},...r()?{"aria-current":!0}:{},...s()}),void 0,void 0,void 0,"svelte-eugnvn");var y=h(u);return q(y,()=>v(a),!1,(e,j)=>{w(e,()=>({class:`mc-built-in-menu__${v(a)==="button"?"button":"link"}`,...v(a)==="a"&&{href:l(),target:o()}}),void 0,void 0,void 0,"svelte-eugnvn");var d=F(),g=E(d);T(g,t,"icon",{},null);var c=_(g,2),z=h(c,!0);p(c);var B=_(c,2);A(B,{className:"mc-built-in-menu__icon"}),M(()=>S(z,m())),f(j,d)}),p(u),f(b,u),N(x)}customElements.define("m-built-in-menu-item",I(J,{selected:{attribute:"selected",reflect:!0,type:"Boolean"},label:{},href:{},target:{},attrs:{}},["icon"],[],!0));
 //# sourceMappingURL=BuiltInMenuItem.js.map

package/dist/components/builtinmenuitem/BuiltInMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BuiltInMenuItem.js","sources":["../../../src/components/builtinmenuitem/BuiltInMenuItem.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-built-in-menu-item',\n    props: {\n      selected: { reflect: true, type: 'Boolean', attribute: 'selected' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  import { ChevronRight20 } from '@mozaic-ds/icons-svelte';\n  /**\n   * A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.\n   *\n   * @slot icon - Use this slot to insert an icon before the label.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * The label used for the menu item.\n     */\n    label: string;\n    /**\n     * URL for the menu item link.\n     */\n    href?: string;\n    /**\n     * Where to open the link.\n     */\n    target?: '_self' | '_blank' | '_parent' | '_top';\n    /**\n     * If `true`, the menu item will be selected.\n     */\n    selected: boolean;\n    /**\n     * Use this snippet to insert an icon before the label.\n     */\n    icon?: Snippet;\n  }\n\n  let { label, href, target, selected, icon, attrs }: Props = $props();\n\n  const tag = $derived(href ? 'a' : 'button');\n</script>\n\n<li\n  class={{\n    'mc-built-in-menu__item': true,\n    'mc-built-in-menu__item--selected': selected,\n  }}\n  {...selected ? { 'aria-current': true } : {}}\n  {...attrs}\n>\n  <svelte:element\n    this={tag}\n    class={`mc-built-in-menu__${tag === 'button' ? 'button' : 'link'}`}\n    {...tag === 'a' && { href, target }}\n  >\n    {#if icon}\n      {@render icon()}\n    {:else}\n      <slot name=\"icon\" />\n    {/if}\n\n    <span class=\"mc-built-in-menu__label\">\n      {label}\n    </span>\n\n    <ChevronRight20 className=\"mc-built-in-menu__icon\" />\n  </svelte:element>\n</li>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/built-in-menu';\n</style>\n"],"names":["label","$.prop","$$props","href","target","selected","icon","attrs","tag","$.derived","li","root","node","$.child","$$element","$$anchor","$.get","$$render","consequent","alternate","span","$.sibling","node_1","ChevronRight20","node_4","$.reset","$.append"],"mappings":";;;;;;uJASA,oBAgCQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAEE,EAAMH,EAAAC,EAAA,SAAA,CAAA,EAAEG,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EAAEI,EAAIL,EAAAC,EAAA,OAAA,CAAA,EAAEK,EAAKN,EAAAC,EAAA,QAAA,CAAA,EAE1C,MAAAM,EAAGC,EAAA,IAAYN,EAAI,EAAG,IAAM,QAAQ,wSAG3CO,EAAAC,EAAA,IAAAD,eAEG,yBAA0B,GAC1B,mCAAoCL,EAAQ,MAE1CA,EAAQ,EAAA,CAAK,eAAgB,EAAI,EAAA,CAAA,KACjCE,EAAK,0CANV,IAAAK,EAAAC,EAAAH,CAAA,mBASSF,CAAG,EAAA,GAAA,CAAAM,EAAAC,IAAA,WACmB,MAAA,qBAAAC,EAAAR,CAAG,IAAK,SAAW,SAAW,MAAM,QAC5DA,CAAG,IAAK,KAAG,CAAM,KAAAL,EAAI,EAAE,OAAAC,EAAM,CAAA,2FAGtBE,CAAI,uEADVA,EAAI,EAAAW,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,QAMRC,EAAIC,EAAAC,EAAA,CAAA,MAAJF,EAAI,EAAA,IAAJA,CAAI,UAAJA,EAAI,CAAA,EAIJG,EAAcC,EAAA,CAAA,UAAA,wBAAA,CAAA,YAHZxB,EAAK,CAAA,CAAA,WApBXyB,EAAAf,CAAA,EAAAgB,EAAAX,EAAAL,CAAA,MAFO"}
+{"version":3,"file":"BuiltInMenuItem.js","sources":["../../../src/components/builtinmenuitem/BuiltInMenuItem.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-built-in-menu-item',\n    props: {\n      selected: { reflect: true, type: 'Boolean', attribute: 'selected' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { ChevronRight20 } from '@mozaic-ds/icons-svelte';\n  /**\n   * A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.\n   *\n   * @slot icon - Use this slot to insert an icon before the label.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * The label used for the menu item.\n     */\n    label: string;\n    /**\n     * URL for the menu item link.\n     */\n    href?: string;\n    /**\n     * Where to open the link.\n     */\n    target?: '_self' | '_blank' | '_parent' | '_top';\n    /**\n     * If `true`, the menu item will be selected.\n     */\n    selected: boolean;\n  }\n\n  let { label, href, target, selected, attrs }: Props = $props();\n\n  const tag = $derived(href ? 'a' : 'button');\n</script>\n\n<li\n  class={{\n    'mc-built-in-menu__item': true,\n    'mc-built-in-menu__item--selected': selected,\n  }}\n  {...selected ? { 'aria-current': true } : {}}\n  {...attrs}\n>\n  <svelte:element\n    this={tag}\n    class={`mc-built-in-menu__${tag === 'button' ? 'button' : 'link'}`}\n    {...tag === 'a' && { href, target }}\n  >\n    <slot name=\"icon\" />\n\n    <span class=\"mc-built-in-menu__label\">\n      {label}\n    </span>\n\n    <ChevronRight20 className=\"mc-built-in-menu__icon\" />\n  </svelte:element>\n</li>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/built-in-menu';\n</style>\n"],"names":["label","$.prop","$$props","href","target","selected","attrs","tag","$.derived","li","root","node","$.child","$$element","$$anchor","$.get","span","$.sibling","node_1","ChevronRight20","node_2","$.reset","$.append"],"mappings":";;;;;;uJASA,oBA2BQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAEE,EAAMH,EAAAC,EAAA,SAAA,CAAA,EAAEG,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EAAEI,EAAKL,EAAAC,EAAA,QAAA,CAAA,EAEpC,MAAAK,EAAGC,EAAA,IAAYL,EAAI,EAAG,IAAM,QAAQ,2PAG3CM,EAAAC,EAAA,IAAAD,eAEG,yBAA0B,GAC1B,mCAAoCJ,EAAQ,MAE1CA,EAAQ,EAAA,CAAK,eAAgB,EAAI,EAAA,CAAA,KACjCC,EAAK,0CANV,IAAAK,EAAAC,EAAAH,CAAA,mBASSF,CAAG,EAAA,GAAA,CAAAM,EAAAC,IAAA,WACmB,MAAA,qBAAAC,EAAAR,CAAG,IAAK,SAAW,SAAW,MAAM,QAC5DA,CAAG,IAAK,KAAG,CAAM,KAAAJ,EAAI,EAAE,OAAAC,EAAM,CAAA,qFAIhCY,EAAIC,EAAAC,EAAA,CAAA,MAAJF,EAAI,EAAA,IAAJA,CAAI,UAAJA,EAAI,CAAA,EAIJG,EAAcC,EAAA,CAAA,UAAA,wBAAA,CAAA,YAHZpB,EAAK,CAAA,CAAA,WAhBXqB,EAAAZ,CAAA,EAAAa,EAAAR,EAAAL,CAAA,MAFO"}

package/dist/components/builtinmenuitem/BuiltInMenuItem.svelte

@@ -8,7 +8,6 @@
 />
 
 <script lang="ts">
-  import type { Snippet } from 'svelte';
   import { ChevronRight20 } from '@mozaic-ds/icons-svelte';
   /**
    * A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.
@@ -33,13 +32,9 @@
      * If `true`, the menu item will be selected.
      */
     selected: boolean;
-    /**
-     * Use this snippet to insert an icon before the label.
-     */
-    icon?: Snippet;
   }
 
-  let { label, href, target, selected, icon, attrs }: Props = $props();
+  let { label, href, target, selected, attrs }: Props = $props();
 
   const tag = $derived(href ? 'a' : 'button');
 </script>
@@ -57,11 +52,7 @@
     class={`mc-built-in-menu__${tag === 'button' ? 'button' : 'link'}`}
     {...tag === 'a' && { href, target }}
   >
-    {#if icon}
-      {@render icon()}
-    {:else}
-      <slot name="icon" />
-    {/if}
+    <slot name="icon" />
 
     <span class="mc-built-in-menu__label">
       {label}

package/dist/components/builtinmenuitem/BuiltInMenuItem.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { Snippet } from 'svelte';
 /**
  * A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.
  *
@@ -22,10 +21,6 @@ interface Props {
      * If `true`, the menu item will be selected.
      */
     selected: boolean;
-    /**
-     * Use this snippet to insert an icon before the label.
-     */
-    icon?: Snippet;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/components/builtinmenuitem/BuiltInMenuItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BuiltInMenuItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/builtinmenuitem/BuiltInMenuItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAyCH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,eAAe;;;;UAAqF,CAAC;AACzF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"BuiltInMenuItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/builtinmenuitem/BuiltInMenuItem.svelte.ts"],"names":[],"mappings":"AAKE;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;CACnB;AAoCH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,eAAe;;;;UAAqF,CAAC;AACzF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}

package/dist/components/builtinmenuitem/README.md

@@ -10,7 +10,6 @@ A built-in menu is a structured list of navigational or interactive options, typ
 | `href` | URL for the menu item link. | `string` |   |
 | `target` | Where to open the link. | `'_self'` `'_blank'` `'_parent'` `'_top'` |   |
 | `selected*` | If `true`, the menu item will be selected. | `boolean` |   |
-| `icon` | Use this snippet to insert an icon before the label. | `Snippet` |   |
 
 ## Slots
 

package/dist/components/button/Button.js

@@ -1,5 +1,5 @@
-import{c as T,p as U,a as V,b as a,s as m,f as l,g as W,h as _,i as X,d as z,j as c,t as Y,k as f,l as k,r as p,n as Z,o as $}from"../../custom-element.js";import{s as G}from"../../snippet.js";import{i as u}from"../../if.js";import{s as H}from"../../slot.js";import{a as oo}from"../../attributes.js";import{L as to}from"../loader/Loader.js";var eo=_('<span class="mc-button__icon svelte-ozghz9"><!></span>'),ro=_('<span class="mc-button__icon svelte-ozghz9" style="position: absolute; visibility: visible;"><!></span>'),no=_("<span><!></span>"),ao=_("<button><!> <!> <!> <!> <!></button>");const co={hash:"svelte-ozghz9",code:`/**
+import{c as G,p as H,a as I,b as n,s as v,f as d,g as J,h as s,i as K,d as b,j as a,t as M,r as u,l as N,m as O}from"../../custom-element.js";import{i}from"../../if.js";import{s as h}from"../../slot.js";import{a as P}from"../../attributes.js";import{L as Q}from"../loader/Loader.js";import"../../branches.js";var R=s('<span class="mc-button__icon svelte-ozghz9"><!></span>'),T=s('<span class="mc-button__icon svelte-ozghz9" style="position: absolute; visibility: visible;"><!></span>'),U=s('<span class="mc-button__icon svelte-ozghz9"><!></span>'),V=s("<span><!></span>"),W=s('<span class="mc-button__icon svelte-ozghz9"><!></span>'),X=s("<button><!> <!> <!> <!> <!></button>");const Y={hash:"svelte-ozghz9",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-button.svelte-ozghz9 {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-ozghz9:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-ozghz9:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-ozghz9: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-ozghz9 {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-150, 1rem);}.mc-button.svelte-ozghz9 {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-ozghz9 {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-ozghz9 {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-ozghz9: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-ozghz9: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-ozghz9 {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--s.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-100, 0.875rem);}.mc-button--s.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {width:1.25rem;height:1.25rem;}.mc-button--s.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9):only-child {width:1.25rem;height:1.25rem;}.mc-button--m.svelte-ozghz9 {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--m.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-150, 1rem);}.mc-button--m.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {width:1.5rem;height:1.5rem;}.mc-button--m.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9):only-child {width:1.5rem;height:1.5rem;}.mc-button--l.svelte-ozghz9 {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--l.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-200, 1.125rem);}.mc-button--l.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {width:2rem;height:2rem;}.mc-button--l.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9):only-child {width:2rem;height:2rem;}.mc-button--icon-only.svelte-ozghz9 {padding:0.25rem;}.mc-button--outlined.svelte-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-ozghz9:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-ozghz9: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-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-ozghz9:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-ozghz9: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-ozghz9 {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-ozghz9:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-ozghz9: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-ozghz9 {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-ozghz9:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-ozghz9: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-ozghz9 {--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-ozghz9:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-ozghz9: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-ozghz9 {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--loading.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9),
-.mc-button--loading.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {visibility:hidden;}.mc-button--outlined.mc-button--standard.svelte-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-ozghz9:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-ozghz9: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-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-ozghz9: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-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-ozghz9: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-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9: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-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-ozghz9:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-ozghz9: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-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-ozghz9: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-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-ozghz9: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-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.hidden.svelte-ozghz9 {visibility:hidden;}`};function lo(I,t){U(t,!0),V(I,co);const w=o=>{var r=eo(),i=z(r);{var D=e=>{var n=f(),b=k(n);G(b,v),l(e,n)},E=e=>{var n=f(),b=k(n);H(b,t,"icon",{},null),l(e,n)};u(i,e=>{v()?e(D):e(E,!1)})}p(r),l(o,r)};let y=a(t,"appearance",7,"standard"),x=a(t,"size",7,"m"),B=a(t,"type",7,"button"),j=a(t,"ghost",7),L=a(t,"outlined",7),C=a(t,"disabled",7),s=a(t,"isloading",7),d=a(t,"iconposition",7),g=a(t,"children",7),v=a(t,"icon",7),J=X(t,["$$slots","$$events","$$legacy","$$host","appearance","size","type","ghost","outlined","disabled","isloading","iconposition","children","icon"]);var K={get appearance(){return y()},set appearance(o="standard"){y(o),c()},get size(){return x()},set size(o="m"){x(o),c()},get type(){return B()},set type(o="button"){B(o),c()},get ghost(){return j()},set ghost(o){j(o),c()},get outlined(){return L()},set outlined(o){L(o),c()},get disabled(){return C()},set disabled(o){C(o),c()},get isloading(){return s()},set isloading(o){s(o),c()},get iconposition(){return d()},set iconposition(o){d(o),c()},get children(){return g()},set children(o){g(o),c()},get icon(){return v()},set icon(o){v(o),c()}},h=ao();oo(h,()=>({class:["mc-button",`mc-button--${x()}`,`mc-button--${y()}`,j()&&"mc-button--ghost",L()&&"mc-button--outlined",s()&&"mc-button--loading",d()==="only"&&"mc-button--icon-only"],disabled:C(),type:B(),...J}),void 0,void 0,void 0,"svelte-ozghz9");var S=z(h);{var M=o=>{w(o)};u(S,o=>{d()==="left"&&!s()&&o(M)})}var q=m(S,2);{var N=o=>{var r=ro(),i=z(r);to(i,{style:"color: currentColor",size:"s"}),p(r),l(o,r)};u(q,o=>{s()&&o(N)})}var A=m(q,2);{var O=o=>{w(o)};u(A,o=>{d()==="only"&&o(O)})}var F=m(A,2);{var P=o=>{var r=no(),i=z(r);{var D=e=>{var n=f(),b=k(n);G(b,g),l(e,n)},E=e=>{var n=f(),b=k(n);H(b,t,"default",{},null),l(e,n)};u(i,e=>{g()?e(D):e(E,!1)})}p(r),Y(()=>Z(r,1,$(["mc-button__label",s()&&"hidden"]),"svelte-ozghz9")),l(o,r)};u(F,o=>{d()!=="only"&&o(P)})}var Q=m(F,2);{var R=o=>{w(o)};u(Q,o=>{d()==="right"&&o(R)})}return p(h),l(I,h),W(K)}customElements.define("m-button",T(lo,{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:{},iconposition:{},children:{},icon:{}},["icon","default"],[],!0));export{lo as B};
+ */.mc-button.svelte-ozghz9 {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-ozghz9:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-ozghz9:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-ozghz9: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-ozghz9 {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-150, 1rem);}.mc-button.svelte-ozghz9 {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-ozghz9 {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-ozghz9 {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-ozghz9: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-ozghz9: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-ozghz9 {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--s.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-100, 0.875rem);}.mc-button--s.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {width:1.25rem;height:1.25rem;}.mc-button--s.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9):only-child {width:1.25rem;height:1.25rem;}.mc-button--m.svelte-ozghz9 {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--m.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-150, 1rem);}.mc-button--m.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {width:1.5rem;height:1.5rem;}.mc-button--m.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9):only-child {width:1.5rem;height:1.5rem;}.mc-button--l.svelte-ozghz9 {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--l.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-200, 1.125rem);}.mc-button--l.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {width:2rem;height:2rem;}.mc-button--l.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9):only-child {width:2rem;height:2rem;}.mc-button--icon-only.svelte-ozghz9 {padding:0.25rem;}.mc-button--outlined.svelte-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-ozghz9:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-ozghz9: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-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-ozghz9:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-ozghz9: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-ozghz9 {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-ozghz9:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-ozghz9: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-ozghz9 {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-ozghz9:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-ozghz9: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-ozghz9 {--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-ozghz9:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-ozghz9: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-ozghz9 {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--loading.svelte-ozghz9 {pointer-events:none;}.mc-button--loading.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9),
+.mc-button--loading.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {visibility:hidden;}.mc-button--outlined.mc-button--standard.svelte-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-ozghz9:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-ozghz9: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-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-ozghz9: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-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-ozghz9: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-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9: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-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-ozghz9:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-ozghz9: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-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-ozghz9: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-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-ozghz9: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-ozghz9 {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-ozghz9:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.hidden.svelte-ozghz9 {visibility:hidden;}`};function Z(w,e){H(e,!0),I(w,Y);let m=n(e,"appearance",7,"standard"),z=n(e,"size",7,"m"),f=n(e,"type",7,"button"),k=n(e,"ghost",7),p=n(e,"outlined",7),_=n(e,"disabled",7),l=n(e,"isloading",7),c=n(e,"iconposition",7),L=K(e,["$$slots","$$events","$$legacy","$$host","appearance","size","type","ghost","outlined","disabled","isloading","iconposition"]);var C={get appearance(){return m()},set appearance(o="standard"){m(o),a()},get size(){return z()},set size(o="m"){z(o),a()},get type(){return f()},set type(o="button"){f(o),a()},get ghost(){return k()},set ghost(o){k(o),a()},get outlined(){return p()},set outlined(o){p(o),a()},get disabled(){return _()},set disabled(o){_(o),a()},get isloading(){return l()},set isloading(o){l(o),a()},get iconposition(){return c()},set iconposition(o){c(o),a()}},g=X();P(g,()=>({class:["mc-button",`mc-button--${z()}`,`mc-button--${m()}`,k()&&"mc-button--ghost",p()&&"mc-button--outlined",l()&&"mc-button--loading",c()==="only"&&"mc-button--icon-only"],disabled:_(),type:f(),...L}),void 0,void 0,void 0,"svelte-ozghz9");var y=b(g);{var D=o=>{var t=R(),r=b(t);h(r,e,"icon",{},null),u(t),d(o,t)};i(y,o=>{c()==="left"&&!l()&&o(D)})}var x=v(y,2);{var E=o=>{var t=T(),r=b(t);Q(r,{style:"color: currentColor",size:"s"}),u(t),d(o,t)};i(x,o=>{l()&&o(E)})}var B=v(x,2);{var S=o=>{var t=U(),r=b(t);h(r,e,"icon",{},null),u(t),d(o,t)};i(B,o=>{c()==="only"&&o(S)})}var j=v(B,2);{var q=o=>{var t=V(),r=b(t);h(r,e,"default",{},null),u(t),M(()=>N(t,1,O(["mc-button__label",l()&&"hidden"]),"svelte-ozghz9")),d(o,t)};i(j,o=>{c()!=="only"&&o(q)})}var A=v(j,2);{var F=o=>{var t=W(),r=b(t);h(r,e,"icon",{},null),u(t),d(o,t)};i(A,o=>{c()==="right"&&o(F)})}return u(g),d(w,g),J(C)}customElements.define("m-button",G(Z,{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:{},iconposition:{}},["icon","default"],[],!0));export{Z as B};
 //# sourceMappingURL=Button.js.map

package/dist/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-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 type { Snippet } from 'svelte';\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 default - The content displayed in the button.\n   * @slot icon - Use this slot to insert an icon for the Button.\n   */\n  interface Props {\n    [key: string]: any;\n\n    /**\n     * Defines the visual style of the button.\n     */\n    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';\n    /**\n     * Determines the size of the button.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * If `true`, disables the button, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, applies a \"ghost\" style to the button, typically a transparent background with a border.\n     */\n    ghost?: boolean;\n    /**\n     * If `true`, the button gets an outlined style, usually with just the border and no solid background.\n     */\n    outlined?: boolean;\n    /**\n     * Controls the positioning of an icon in the button.\n     */\n    iconposition?: 'left' | 'right' | 'only';\n    /**\n     * Specifies the button's HTML `type` attribute.\n     */\n    type?: 'button' | 'reset' | 'submit';\n    /**\n     * If `true`, a loading state is displayed.\n     */\n    isloading?: boolean;\n    /**\n     * The content displayed in the button.\n     */\n    children?: Snippet;\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    iconposition,\n    children,\n    icon,\n    ...attrs\n  }: Props = $props();\n</script>\n\n{#snippet displayIcon()}\n  <span class=\"mc-button__icon\">\n    {#if icon}\n      {@render icon()}\n    {:else}\n      <slot name=\"icon\" />\n    {/if}\n  </span>\n{/snippet}\n\n<button\n  class={[\n    'mc-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    iconposition === 'only' && 'mc-button--icon-only',\n  ]}\n  {disabled}\n  {type}\n  {...attrs}\n>\n  {#if iconposition === 'left' && !isloading}\n    {@render displayIcon()}\n  {/if}\n\n  {#if isloading}\n    <span class=\"mc-button__icon\" style=\"position: absolute; visibility: visible;\">\n      <Loader style=\"color: currentColor\" size=\"s\" />\n    </span>\n  {/if}\n\n  {#if iconposition === 'only'}\n    {@render displayIcon()}\n  {/if}\n\n  {#if iconposition !== 'only'}\n    <span class={['mc-button__label', isloading && 'hidden']}>\n      {#if children}\n        {@render children()}\n      {:else}\n        <slot />\n      {/if}\n    </span>\n  {/if}\n\n  {#if iconposition === 'right'}\n    {@render displayIcon()}\n  {/if}\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n\n  .hidden {\n    visibility: hidden;\n  }\n</style>\n"],"names":["displayIcon","$$anchor","span","root_1","icon","$$render","consequent","alternate","appearance","size","type","ghost","$.prop","$$props","outlined","disabled","isloading","iconposition","children","attrs","$.rest_props","button","root","node_3","$.child","consequent_1","span_1","root_5","Loader","node_5","consequent_2","consequent_3","span_2","root_7","consequent_4","alternate_1","$.template_effect","$.set_class","$.clsx","consequent_5","consequent_6","$.reset","$.append"],"mappings":";;;q/LAYA,uBAqEUA,EAAWC,GAAA,KAClBC,EAAIC,GAAA,MAAJD,CAAI,kCAEQE,CAAI,uEADVA,EAAI,EAAAC,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,MADVL,CAAI,MAAJA,CAAI,GAfH,IAAAM,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,EAAYL,EAAAC,EAAA,eAAA,CAAA,EACZK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRT,EAAIQ,EAAAC,EAAA,OAAA,CAAA,EACDM,EAAAC,EAAAP,EAAA,uMAVU,WAAU,6CAChB,IAAG,6CACH,SAAQ,2XAsBlBQ,EAAAC,GAAA,KAAAD,eAEG,0BACcZ,EAAI,CAAA,iBACJD,EAAU,CAAA,GACxBG,EAAK,GAAI,mBACTG,EAAQ,GAAI,sBACZE,EAAS,GAAI,qBACbC,EAAY,IAAK,QAAU,iCAE5BF,EAAQ,OACRL,EAAI,KACDS,0CAZL,IAAAI,EAAAC,EAAAH,CAAA,aAeYrB,EAAWC,CAAA,WADjBgB,EAAY,IAAK,QAAM,CAAKD,EAAS,GAAAX,EAAAoB,CAAA,gCAKvCC,EAAIC,GAAA,MAAJD,CAAI,EACFE,GAAMC,EAAA,CAAA,MAAA,sBAAA,KAAA,IAAA,IADRH,CAAI,MAAJA,CAAI,WADFV,EAAS,GAAAX,EAAAyB,CAAA,4BAOH9B,EAAWC,CAAA,WADjBgB,EAAY,IAAK,QAAMZ,EAAA0B,CAAA,gCAKzBC,EAAIC,GAAA,MAAJD,CAAI,kCAEQd,CAAQ,0EADdA,EAAQ,EAAAb,EAAA6B,CAAA,EAAA7B,EAAA8B,EAAA,EAAA,MADdH,CAAI,EAAJI,EAAA,IAAAC,EAAAL,EAAI,EAAAM,EAAA,CAAS,mBAAoBtB,EAAS,GAAI,QAAQ,CAAA,EAAA,eAAA,CAAA,MAAtDgB,CAAI,WADFf,EAAY,IAAK,QAAMZ,EAAAkC,CAAA,4BAWjBvC,EAAWC,CAAA,WADjBgB,EAAY,IAAK,SAAOZ,EAAAmC,CAAA,IAtC9BC,OAAAA,EAAApB,CAAA,EAAAqB,EAAAzC,EAAAoB,CAAA,MAZO"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-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 default - The content displayed in the button.\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 button.\n     */\n    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';\n    /**\n     * Determines the size of the button.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * If `true`, disables the button, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, applies a \"ghost\" style to the button, typically a transparent background with a border.\n     */\n    ghost?: boolean;\n    /**\n     * If `true`, the button gets an outlined style, usually with just the border and no solid background.\n     */\n    outlined?: boolean;\n    /**\n     * Controls the positioning of an icon in the button.\n     */\n    iconposition?: 'left' | 'right' | 'only';\n    /**\n     * Specifies the button's HTML `type` attribute.\n     */\n    type?: 'button' | 'reset' | 'submit';\n    /**\n     * If `true`, a loading state is displayed.\n     */\n    isloading?: boolean;\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    type = 'button',\n    ghost,\n    outlined,\n    disabled,\n    isloading,\n    iconposition,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<button\n  class={[\n    'mc-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    iconposition === 'only' && 'mc-button--icon-only',\n  ]}\n  {disabled}\n  {type}\n  {...attrs}\n>\n  {#if iconposition === 'left' && !isloading}\n    <span class=\"mc-button__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n\n  {#if isloading}\n    <span class=\"mc-button__icon\" style=\"position: absolute; visibility: visible;\">\n      <Loader style=\"color: currentColor\" size=\"s\" />\n    </span>\n  {/if}\n\n  {#if iconposition === 'only'}\n    <span class=\"mc-button__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n\n  {#if iconposition !== 'only'}\n    <span class={['mc-button__label', isloading && 'hidden']}>\n      <slot />\n    </span>\n  {/if}\n\n  {#if iconposition === 'right'}\n    <span class=\"mc-button__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n\n  .hidden {\n    visibility: hidden;\n  }\n</style>\n"],"names":["appearance","size","type","ghost","$.prop","$$props","outlined","disabled","isloading","iconposition","attrs","$.rest_props","button","root","node","$.child","span","root_1","$$render","consequent","span_1","root_2","Loader","node_3","consequent_1","span_2","root_3","consequent_2","span_3","root_4","$.template_effect","$.set_class","$.clsx","consequent_3","span_4","root_5","consequent_4","$.reset","$.append","$$anchor"],"mappings":";;;o/LAYA,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,EAAYL,EAAAC,EAAA,eAAA,CAAA,EACTK,EAAAC,EAAAN,EAAA,qLARU,WAAU,6CAChB,IAAG,6CACH,SAAQ,yRAUlBO,EAAAC,EAAA,IAAAD,eAEG,0BACcX,EAAI,CAAA,iBACJD,EAAU,CAAA,GACxBG,EAAK,GAAI,mBACTG,EAAQ,GAAI,sBACZE,EAAS,GAAI,qBACbC,EAAY,IAAK,QAAU,iCAE5BF,EAAQ,OACRL,EAAI,KACDQ,0CAZL,IAAAI,EAAAC,EAAAH,CAAA,iBAeII,EAAIC,EAAA,MAAJD,CAAI,0BAAJA,CAAI,MAAJA,CAAI,WADFP,EAAY,IAAK,QAAM,CAAKD,EAAS,GAAAU,EAAAC,CAAA,gCAOvCC,EAAIC,EAAA,MAAJD,CAAI,EACFE,EAAMC,EAAA,CAAA,MAAA,sBAAA,KAAA,IAAA,IADRH,CAAI,MAAJA,CAAI,WADFZ,EAAS,GAAAU,EAAAM,CAAA,gCAOXC,EAAIC,EAAA,MAAJD,CAAI,0BAAJA,CAAI,MAAJA,CAAI,WADFhB,EAAY,IAAK,QAAMS,EAAAS,CAAA,gCAOzBC,EAAIC,EAAA,MAAJD,CAAI,6BAAJA,CAAI,EAAJE,EAAA,IAAAC,EAAAH,EAAI,EAAAI,EAAA,CAAS,mBAAoBxB,EAAS,GAAI,QAAQ,CAAA,EAAA,eAAA,CAAA,MAAtDoB,CAAI,WADFnB,EAAY,IAAK,QAAMS,EAAAe,CAAA,gCAOzBC,EAAIC,EAAA,MAAJD,CAAI,0BAAJA,CAAI,MAAJA,CAAI,WADFzB,EAAY,IAAK,SAAOS,EAAAkB,CAAA,IAtC9BC,OAAAA,EAAAzB,CAAA,EAAA0B,EAAAC,EAAA3B,CAAA,MAFO"}