@mozaic-ds/web-components 1.0.0-alpha.9 → 1.0.0-beta.1

package/dist/components/button/Button.svelte

@@ -11,15 +11,15 @@
   import Loader from '../loader/Loader.svelte';
 
   interface Props {
-    appearance?: ButtonStyle | undefined;
+    appearance?: ButtonStyle;
     size?: ButtonSize;
     ghost?: boolean;
     outlined?: boolean;
-    iconname: string | undefined;
-    iconmode: ButtonIconMode | undefined;
+    iconmode?: ButtonIconMode;
     disabled?: boolean;
     type?: ButtonType;
     isloading?: boolean;
+    hasiconslot?: boolean;
     [key: string]: any;
   }
 
@@ -28,45 +28,20 @@
     size = 'm',
     ghost = false,
     outlined = false,
-    iconname,
     iconmode,
     disabled = false,
     type = 'button',
     isloading = false,
+    hasiconslot = false,
     ...events
   }: Props = $props();
-
-  function generateIconName(
-    size: ButtonSize,
-    iconMode: ButtonIconMode,
-    iconName: string,
-  ): string {
-    const isIconOnly = iconMode === 'only';
-    let iconSize: string;
-
-    switch (size) {
-      case 's':
-        iconSize = '24px';
-        break;
-      case 'm':
-        iconSize = isIconOnly ? '32px' : '24px';
-        break;
-      case 'l':
-        iconSize = isIconOnly ? '100%' : '32px';
-        break;
-    }
-
-    return `${iconName} size="${iconSize}" `;
-  }
 </script>
 
 <button
-  class="mc-button {size ? `mc-button--${size}` : ''} {appearance
-    ? `mc-button--${appearance}`
-    : ''}"
+  class={`mc-button mc-button--${size} mc-button--${appearance}`}
   class:mc-button--ghost={ghost}
   class:mc-button--outlined={outlined}
-  class:mc-button--icon-only={iconmode == 'only'}
+  class:mc-button--icon-only={iconmode === 'only'}
   class:mc-button--loading={isloading}
   {disabled}
   {type}
@@ -80,36 +55,25 @@
       text=""
     />
   {/if}
-  {#if (iconname || $$slots.icon) && iconmode === 'left'}
+
+  {#if iconmode === 'left' || iconmode === 'only'}
     <span class="mc-button__icon">
-      {#if $$slots.icon}
+      {#if hasiconslot}
         <slot name="icon" />
-      {:else if iconname}
-        {@html `<${generateIconName(size, iconmode, iconname)} />`}
       {/if}
     </span>
   {/if}
 
-  {#if (iconname || $$slots.icon) && iconmode === 'only'}
-    <span class="mc-button__icon">
-      {#if $$slots.icon}
-        <slot name="icon" />
-      {:else if iconname}
-        {@html `<${generateIconName(size, iconmode, iconname)} />`}
-      {/if}
-    </span>
-  {:else}
+  {#if iconmode !== 'only'}
     <span class="mc-button__label" class:hidden={isloading}>
       <slot />
     </span>
   {/if}
 
-  {#if (iconname || $$slots.icon) && iconmode === 'right'}
+  {#if iconmode === 'right'}
     <span class="mc-button__icon">
-      {#if $$slots.icon}
+      {#if hasiconslot}
         <slot name="icon" />
-      {:else if iconname}
-        {@html `<${generateIconName(size, iconmode, iconname)} />`}
       {/if}
     </span>
   {/if}
@@ -135,6 +99,7 @@
   transition: box-shadow 200ms ease;
   align-items: center;
   box-sizing: border-box;
+  font-family: inherit;
   fill: currentcolor;
   gap: 0.25rem;
   cursor: pointer;
@@ -154,6 +119,25 @@
 .mc-button .mc-button__label {
   font-size: 1rem;
 }
+.mc-button__label {
+  font-size: 1rem;
+}
+.mc-button__icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button: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 {
   padding: 0 calc(0.75rem - 0.125rem);
   min-height: 2rem;
@@ -202,25 +186,6 @@
   width: 2rem;
   height: 2rem;
 }
-.mc-button__label {
-  font-size: 1rem;
-}
-.mc-button__icon {
-  flex-shrink: 0;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.mc-button:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
-  border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
-  cursor: not-allowed;
-}
-.mc-button: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--icon-only {
   padding: 0.25rem;
 }

package/dist/components/button/Button.svelte.d.ts

@@ -1,14 +1,14 @@
 import type { ButtonIconMode, ButtonSize, ButtonStyle, ButtonType } from './button.types';
 interface Props {
-    appearance?: ButtonStyle | undefined;
+    appearance?: ButtonStyle;
     size?: ButtonSize;
     ghost?: boolean;
     outlined?: boolean;
-    iconname: string | undefined;
-    iconmode: ButtonIconMode | undefined;
+    iconmode?: ButtonIconMode;
     disabled?: boolean;
     type?: ButtonType;
     isloading?: boolean;
+    hasiconslot?: boolean;
     [key: string]: any;
 }
 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> {

package/dist/components/button/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,cAAc,EACd,UAAU,EACV,WAAW,EACX,UAAU,EACX,MAAM,gBAAgB,CAAC;AAKxB,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA2FH,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;;;;;;;;UAAmF,CAAC;AAC9E,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,cAAc,EACd,UAAU,EACV,WAAW,EACX,UAAU,EACX,MAAM,gBAAgB,CAAC;AAKxB,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAuDH,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;;;;;;;;UAAmF,CAAC;AAC9E,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}

package/dist/components/button/IconButton.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../src/components/button/IconButton.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-icon-button', shadow: 'none' }} />\n\n<script lang=\"ts\">\n  import type { ButtonSize, ButtonStyle, ButtonType } from './button.types';\n\n  interface Props {\n    appearance?: ButtonStyle | undefined;\n    size?: ButtonSize;\n    ghost?: boolean;\n    outlined?: boolean;\n    iconname: string;\n    disabled?: boolean;\n    type?: ButtonType;\n    [key: string]: any;\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    ghost = false,\n    outlined = false,\n    iconname,\n    disabled = false,\n    type = 'button',\n    ...events\n  }: Props = $props();\n\n  function generateIconName(size: ButtonSize, iconName: string): string {\n    let iconSize: string;\n\n    switch (size) {\n      case 's':\n        iconSize = '20px';\n        break;\n      case 'm':\n        iconSize = '24px';\n        break;\n      case 'l':\n        iconSize = '32px';\n        break;\n    }\n\n    return `${iconName} size=\"${iconSize}\" `;\n  }\n</script>\n\n<button\n  class=\"mc-button mc-button--icon-button {size\n    ? `mc-button--${size}`\n    : ''} {appearance ? `mc-button--${appearance}` : ''}\"\n  class:mc-button--ghost={ghost}\n  class:mc-button--outlined={outlined}\n  {disabled}\n  {type}\n  {...events}\n>\n  {@html `<${generateIconName(size, iconname)} />`}\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["appearance","size","ghost","outlined","iconname","$.prop","$$props","disabled","type","events","$.rest_props","generateIconName","iconName","iconSize"],"mappings":";;69VAiBI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,gBAAQ,EAAK,EACbC,mBAAW,EAAK,EAChBC,EAAQC,EAAAC,EAAA,WAAA,CAAA,EACRC,mBAAW,EAAK,EAChBC,eAAO,QAAQ,EACZC,EAAAC,EAAAJ,EAAA,gHAGI,SAAAK,EAAiBV,EAAkBW,EAA0B,KAChEC,SAEIZ,EAAI,KACL,IACHY,EAAW,iBAER,IACHA,EAAW,iBAER,IACHA,EAAW,aAIL,MAAA,GAAAD,CAAQ,UAAUC,CAAQ,IACtC,+CAaWF,EAAiBV,EAAI,EAAEG,EAAQ,CAAA,CAAA,KAAA,iEATDH,EACvB,EAAA,cAAAA,MACd,KAAE,EAAA,KAAGD,EAA2B,EAAA,cAAAA,EAAU,IAAK,KAAE,EAAA,4BAKjDS,0BAJoBP,EAAK,wBACFC,EAAQ,8EAlCpB,WAAU,6CAChB,IAAG,+CACF,GAAK,qDACF,GAAK,0GAEL,GAAK,6CACT,SAAQ"}
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/button/IconButton.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-icon-button' }} />\n\n<script lang=\"ts\">\n  import type { ButtonSize, ButtonStyle, ButtonType } from './button.types';\n\n  interface Props {\n    appearance?: ButtonStyle | undefined;\n    size?: ButtonSize;\n    ghost?: boolean;\n    outlined?: boolean;\n    iconname: string;\n    disabled?: boolean;\n    type?: ButtonType;\n    [key: string]: any;\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    ghost = false,\n    outlined = false,\n    iconname,\n    disabled = false,\n    type = 'button',\n    ...events\n  }: Props = $props();\n\n  function generateIconName(size: ButtonSize, iconName: string): string {\n    let iconSize: string;\n\n    switch (size) {\n      case 's':\n        iconSize = '20px';\n        break;\n      case 'm':\n        iconSize = '24px';\n        break;\n      case 'l':\n        iconSize = '32px';\n        break;\n    }\n\n    return `${iconName} size=\"${iconSize}\" `;\n  }\n</script>\n\n<button\n  class=\"mc-button mc-button--icon-button {size\n    ? `mc-button--${size}`\n    : ''} {appearance ? `mc-button--${appearance}` : ''}\"\n  class:mc-button--ghost={ghost}\n  class:mc-button--outlined={outlined}\n  {disabled}\n  {type}\n  {...events}\n>\n  <slot name=\"icon\" />\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["appearance","size","ghost","outlined","iconname","$.prop","$$props","disabled","type","events","$.rest_props"],"mappings":";;kjWAiBI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,gBAAQ,EAAK,EACbC,mBAAW,EAAK,EAChBC,EAAQC,EAAAC,EAAA,WAAA,CAAA,EACRC,mBAAW,EAAK,EAChBC,eAAO,QAAQ,EACZC,EAAAC,EAAAJ,EAAA,6KAuBoCL,EACvB,EAAA,cAAAA,EAAI,IAClB,EAAE,IAAGD,EAAU,EAAiB,cAAAA,MAAe,EAAE,4BAKjDS,oCAJoBP,EAAK,wBACFC,EAAQ,uHAlCpB,WAAU,6CAChB,IAAG,+CACF,GAAK,qDACF,GAAK,0GAEL,GAAK,6CACT,SAAQ"}

package/dist/components/button/IconButton.svelte

@@ -1,4 +1,4 @@
-<svelte:options customElement={{ tag: 'm-icon-button', shadow: 'none' }} />
+<svelte:options customElement={{ tag: 'm-icon-button' }} />
 
 <script lang="ts">
   import type { ButtonSize, ButtonStyle, ButtonType } from './button.types';
@@ -54,7 +54,7 @@
   {type}
   {...events}
 >
-  {@html `<${generateIconName(size, iconname)} />`}
+  <slot name="icon" />
 </button>
 
 <style>/**
@@ -77,6 +77,7 @@
   transition: box-shadow 200ms ease;
   align-items: center;
   box-sizing: border-box;
+  font-family: inherit;
   fill: currentcolor;
   gap: 0.25rem;
   cursor: pointer;
@@ -96,6 +97,25 @@
 .mc-button .mc-button__label {
   font-size: 1rem;
 }
+.mc-button__label {
+  font-size: 1rem;
+}
+.mc-button__icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button: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 {
   padding: 0 calc(0.75rem - 0.125rem);
   min-height: 2rem;
@@ -144,25 +164,6 @@
   width: 2rem;
   height: 2rem;
 }
-.mc-button__label {
-  font-size: 1rem;
-}
-.mc-button__icon {
-  flex-shrink: 0;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.mc-button:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
-  border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
-  cursor: not-allowed;
-}
-.mc-button: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--icon-only {
   padding: 0.25rem;
 }

package/dist/components/button/IconButton.svelte.d.ts

@@ -9,7 +9,24 @@ interface Props {
     type?: ButtonType;
     [key: string]: any;
 }
-declare const IconButton: import("svelte").Component<Props, {}, "">;
-type IconButton = ReturnType<typeof IconButton>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const IconButton: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+}, {}, "">;
+type IconButton = InstanceType<typeof IconButton>;
 export default IconButton;
 //# sourceMappingURL=IconButton.svelte.d.ts.map

package/dist/components/button/IconButton.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/button/IconButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGxE,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA+CH,QAAA,MAAM,UAAU,2CAAsC,CAAC;AACvD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/button/IconButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGxE,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA+CH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,UAAU;;;;UAAmF,CAAC;AAClF,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}

package/dist/components/checkbox/Checkbox.js

@@ -1,10 +1,10 @@
-import{c as z,p as B,a as M,b as r,z as S,A,t as x,s as H,e as p,f as g,m as j,g as k,h as D,i,r as _,C as L,j as q,o as F}from"../../custom-element.js";import{i as G}from"../../if.js";import{r as I,s as J,b as K,C as N}from"../../attributes.js";import{c as O}from"../../input.js";var P=x('<label class="mc-checkbox__label svelte-1vlbnyp"> </label>'),Q=x('<div class="mc-checkbox svelte-1vlbnyp"><input> <!></div>');const R={hash:"svelte-1vlbnyp",code:`/**
+import{c as y,p as z,a as B,b as M,d as t,f as w,s as H,g as k,t as _,m as j,h as x,i as D,j as o,r as p,k as F}from"../../custom-element.js";import{i as S}from"../../if.js";import{s as n,r as A}from"../../attributes.js";import{c as G}from"../../input.js";import{c as I}from"../../custom-element-forward-events.js";var J=w('<label class="mc-checkbox__label svelte-14qag3h"> </label>'),K=w('<div class="mc-checkbox svelte-14qag3h"><input type="checkbox"/> <!></div>');const L={hash:"svelte-14qag3h",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
-/* stylelint-disable string-no-newline */.mc-checkbox.svelte-1vlbnyp {align-items:center;display:flex;gap:0.5rem;}.mc-checkbox__label.svelte-1vlbnyp {font-size:1rem;line-height:1.3;color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-checkbox__input.svelte-1vlbnyp {appearance:none;margin:0;cursor:pointer;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:0.125rem solid var(--forms-color-border-default, #666666);border-radius:0.25rem;transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-1vlbnyp:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-checkbox__input.svelte-1vlbnyp: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-checkbox__input.svelte-1vlbnyp:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-1vlbnyp:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-1vlbnyp:checked, .mc-checkbox__input.svelte-1vlbnyp:indeterminate {background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-1vlbnyp:checked, .mc-checkbox__input.svelte-1vlbnyp:indeterminate, .mc-checkbox__input.svelte-1vlbnyp:disabled {border-color:transparent;}.mc-checkbox__input.svelte-1vlbnyp:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-checkbox__input.svelte-1vlbnyp:disabled:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-1vlbnyp:disabled:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-1vlbnyp:disabled + .mc-checkbox__label:where(.svelte-1vlbnyp) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-checkbox__input.svelte-1vlbnyp:not(:disabled):checked:hover, .mc-checkbox__input.svelte-1vlbnyp:not(:disabled):indeterminate:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-checkbox__input.is-invalid.svelte-1vlbnyp:not(:checked):not(:indeterminate) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-checkbox__input.is-invalid.svelte-1vlbnyp:not(:checked):not(:indeterminate):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
+/* stylelint-disable string-no-newline */.mc-checkbox.svelte-14qag3h {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-checkbox__label.svelte-14qag3h {font-size:1rem;line-height:1.3;color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-checkbox__input.svelte-14qag3h {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:0.125rem solid var(--forms-color-border-default, #666666);border-radius:0.25rem;transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-14qag3h:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-checkbox__input.svelte-14qag3h: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-checkbox__input.svelte-14qag3h:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-14qag3h:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-14qag3h:checked, .mc-checkbox__input.svelte-14qag3h:indeterminate {background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-14qag3h:checked, .mc-checkbox__input.svelte-14qag3h:indeterminate, .mc-checkbox__input.svelte-14qag3h:disabled {border-color:transparent;}.mc-checkbox__input.svelte-14qag3h:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-checkbox__input.svelte-14qag3h:disabled:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-14qag3h:disabled:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-14qag3h:disabled + .mc-checkbox__label:where(.svelte-14qag3h) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-checkbox__input.svelte-14qag3h:not(:disabled):checked:hover, .mc-checkbox__input.svelte-14qag3h:not(:disabled):indeterminate:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-checkbox__input.is-invalid.svelte-14qag3h:not(:checked):not(:indeterminate) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-checkbox__input.is-invalid.svelte-14qag3h:not(:checked):not(:indeterminate):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
 
 /* stylelint-enable string-no-newline */
 /* stylelint-disable string-no-newline */
 
-/* stylelint-enable string-no-newline */`};function T(h,t){B(t,!0),M(h,R);let a=r(t,"name",7,"checkbox"),c=r(t,"id",7),d=r(t,"indeterminate",7),v=r(t,"disabled",7,!1),l=r(t,"isinvalid",7,!1),o=r(t,"label",7),b=r(t,"ischecked",7),y=F(t,["$$slots","$$events","$$legacy","$$host","name","id","indeterminate","disabled","isinvalid","label","ischecked"]),u=S(A(b()));var m=Q(),n=p(m);I(n);let f;var w=H(n,2);{var C=e=>{var s=P(),E=p(s,!0);_(s),g(()=>{J(s,"for",a()),q(E,o())}),k(e,s)};G(w,e=>{o()&&e(C)})}return _(m),g(()=>f=K(n,f,{id:c(),type:"checkbox",class:"mc-checkbox__input","aria-invalid":l(),name:a(),disabled:v(),indeterminate:d(),...y,[N]:{"is-invalid":l()}},"svelte-1vlbnyp")),O(n,()=>j(u),e=>L(u,e)),k(h,m),D({get name(){return a()},set name(e="checkbox"){a(e),i()},get id(){return c()},set id(e){c(e),i()},get indeterminate(){return d()},set indeterminate(e){d(e),i()},get disabled(){return v()},set disabled(e=!1){v(e),i()},get isinvalid(){return l()},set isinvalid(e=!1){l(e),i()},get label(){return o()},set label(e){o(e),i()},get ischecked(){return b()},set ischecked(e){b(e),i()}})}customElements.define("m-checkbox",z(T,{name:{},id:{},indeterminate:{},disabled:{},isinvalid:{},label:{},ischecked:{}},[],[],!0));
+/* stylelint-enable string-no-newline */`};function N(g,r){const u=z();B(r,!0),M(g,L);let d=t(r,"name",7,"checkbox"),i=t(r,"id",7,u),l=t(r,"label",7),m=t(r,"indeterminate",7,!1),h=t(r,"disabled",7,!1),c=t(r,"isinvalid",7,!1),v=t(r,"checked",15,!1);var b=K(),a=k(b);A(a);let f;var q=H(a,2);{var E=e=>{var s=J(),C=k(s,!0);p(s),_(()=>{n(s,"for",i()),F(C,l())}),x(e,s)};S(q,e=>{l()&&e(E)})}return p(b),_(e=>{n(a,"id",i()),f=j(a,1,"mc-checkbox__input svelte-14qag3h",null,f,e),n(a,"aria-invalid",c()),n(a,"name",d()),a.disabled=h(),a.indeterminate=m()},[()=>({"is-invalid":c()})]),G(a,v),x(g,b),D({get name(){return d()},set name(e="checkbox"){d(e),o()},get id(){return i()},set id(e=u){i(e),o()},get label(){return l()},set label(e){l(e),o()},get indeterminate(){return m()},set indeterminate(e=!1){m(e),o()},get disabled(){return h()},set disabled(e=!1){h(e),o()},get isinvalid(){return c()},set isinvalid(e=!1){c(e),o()},get checked(){return v()},set checked(e=!1){v(e),o()}})}customElements.define("m-checkbox",y(N,{name:{},id:{},label:{},indeterminate:{},disabled:{},isinvalid:{},checked:{}},[],[],!0,I));
 //# sourceMappingURL=Checkbox.js.map

package/dist/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox',\n  }}\n/>\n\n<script lang=\"ts\">\n  interface Props {\n    name: string;\n    id: string;\n    checked: boolean;\n    indeterminate: boolean;\n    disabled?: boolean;\n    isinvalid?: boolean;\n    label: string;\n    ischecked: boolean;\n  }\n\n  let {\n    name = 'checkbox',\n    id,\n    indeterminate,\n    disabled = false,\n    isinvalid = false,\n    label,\n    ischecked,\n    ...events\n  }: Props = $props();\n\n  let isChecked = $state(ischecked);\n</script>\n\n<div class=\"mc-checkbox\">\n  <input\n    {id}\n    type=\"checkbox\"\n    class=\"mc-checkbox__input\"\n    class:is-invalid={isinvalid}\n    aria-invalid={isinvalid}\n    {name}\n    {disabled}\n    {indeterminate}\n    bind:checked={isChecked}\n    {...events}\n  />\n  {#if label}\n    <label for={name} class=\"mc-checkbox__label\">{label}</label>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["name","id","$.prop","$$props","indeterminate","disabled","isinvalid","label","ischecked","events","$.rest_props","isChecked","$$render","consequent","$.bind_checked","input","$.get","$$value"],"mappings":";;;;;;;;0EAmBI,IAAAA,eAAO,UAAU,EACjBC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAaF,EAAAC,EAAA,gBAAA,CAAA,EACbE,mBAAW,EAAK,EAChBC,oBAAY,EAAK,EACjBC,EAAKL,EAAAC,EAAA,QAAA,CAAA,EACLK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACNM,EAAAC,EAAAP,EAAA,mHAGDQ,MAAmBH,EAAS,CAAA,CAAA,gGAiBlBR,GAAI,MAA8BO,GAAK,oBADhDA,EAAK,GAAAK,EAAAC,CAAA,gGAPMP,EAAS,6CAKnBG,oBANcH,EAAS,CAAA,sBAKbQ,EAAAC,EAAA,IAAAC,EAAAL,CAAS,OAATA,EAASM,CAAA,CAAA,8CAvBhB,WAAU,6JAGN,GAAK,uDACJ,GAAK"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n\n  interface Props {\n    name: string;\n    label?: string;\n    id?: string;\n    checked?: boolean;\n    indeterminate?: boolean;\n    disabled?: boolean;\n    isinvalid?: boolean;\n  }\n\n  const uid = $props.id();\n  let {\n    name = 'checkbox',\n    id = uid,\n    label,\n    indeterminate = false,\n    disabled = false,\n    isinvalid = false,\n    checked = $bindable(false),\n  }: Props = $props();\n</script>\n\n<div class=\"mc-checkbox\">\n  <input\n    {id}\n    type=\"checkbox\"\n    class=\"mc-checkbox__input\"\n    class:is-invalid={isinvalid}\n    aria-invalid={isinvalid}\n    {name}\n    {disabled}\n    {indeterminate}\n    bind:checked\n  />\n  {#if label}\n    <label for={id} class=\"mc-checkbox__label\">{label}</label>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["uid","$.props_id","name","id","label","$.prop","$$props","indeterminate","disabled","isinvalid","checked","$$render","consequent","customElementForwardEvents"],"mappings":";;;;;;;;iEAoBQA,EAAGC,EAAA,iBAEP,IAAAC,eAAO,UAAU,EACjBC,aAAKH,CAAG,EACRI,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,wBAAgB,EAAK,EACrBC,mBAAW,EAAK,EAChBC,oBAAY,EAAK,EACjBC,mBAAoB,EAAK,gGAiBbP,GAAE,MAA8BC,GAAK,oBAD9CA,EAAK,GAAAO,EAAAC,CAAA,6GANMH,GAAS,0EADLA,EAAS,GAAA,sDAfpB,WAAU,yCACZT,EAAG,8GAEQ,GAAK,qDACV,GAAK,uDACJ,GAAK,mDACG,GAAK,2IAzBjBa"}

package/dist/components/checkbox/Checkbox.svelte

@@ -1,33 +1,33 @@
 <svelte:options
   customElement={{
     tag: 'm-checkbox',
+    extend: customElementForwardEvents,
   }}
 />
 
 <script lang="ts">
+  import { customElementForwardEvents } from '../../utils';
+
   interface Props {
     name: string;
-    id: string;
-    checked: boolean;
-    indeterminate: boolean;
+    label?: string;
+    id?: string;
+    checked?: boolean;
+    indeterminate?: boolean;
     disabled?: boolean;
     isinvalid?: boolean;
-    label: string;
-    ischecked: boolean;
   }
 
+  const uid = $props.id();
   let {
     name = 'checkbox',
-    id,
-    indeterminate,
+    id = uid,
+    label,
+    indeterminate = false,
     disabled = false,
     isinvalid = false,
-    label,
-    ischecked,
-    ...events
+    checked = $bindable(false),
   }: Props = $props();
-
-  let isChecked = $state(ischecked);
 </script>
 
 <div class="mc-checkbox">
@@ -40,11 +40,10 @@
     {name}
     {disabled}
     {indeterminate}
-    bind:checked={isChecked}
-    {...events}
+    bind:checked
   />
   {#if label}
-    <label for={name} class="mc-checkbox__label">{label}</label>
+    <label for={id} class="mc-checkbox__label">{label}</label>
   {/if}
 </div>
 
@@ -56,6 +55,7 @@
   align-items: center;
   display: flex;
   gap: 0.5rem;
+  padding: 0.375rem;
 }
 .mc-checkbox__label {
   font-size: 1rem;
@@ -67,6 +67,7 @@
   appearance: none;
   margin: 0;
   cursor: pointer;
+  flex-shrink: 0;
   transition: box-shadow 200ms ease;
   background-color: var(--forms-color-background-default, #ffffff);
   border: 0.125rem solid var(--forms-color-border-default, #666666);
@@ -130,11 +131,7 @@
   color: var(--field-color-label, #000000);
 }
 .mc-field__legend {
-  padding-left: 0;
-  padding-right: 0;
-}
-.mc-field__legend + .mc-field__container, .mc-field__help + .mc-field__container {
-  margin-top: 0.5rem;
+  padding-inline: 0;
 }
 .mc-field__requirement, .mc-field__help {
   font-size: 0.75rem;
@@ -150,21 +147,6 @@
 .mc-field__content {
   margin-top: 0.5rem;
 }
-.mc-field__container--inline, .mc-field__element--inline {
-  display: flex;
-  flex-wrap: wrap;
-}
-.mc-field__container--inline__item:not(:last-child), .mc-field__element--inline__item:not(:last-child) {
-  margin-bottom: 0.25rem;
-  margin-right: 1rem;
-}
-.mc-field__item {
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
-}
-.mc-field__item:not(:last-child) {
-  margin-bottom: 0.25rem;
-}
 .mc-field__validation-message {
   font-size: 0.875rem;
   line-height: 1.5;
@@ -172,7 +154,7 @@
   gap: 0.25rem;
   margin-top: 0.25rem;
 }
-.mc-field__validation-message::before {
+.mc-field__validation-message.is-valid::before, .mc-field__validation-message.is-invalid::before {
   content: "";
   height: 1.25rem;
   width: 1.25rem;
@@ -189,11 +171,23 @@
 .mc-field__validation-message.is-invalid::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");
 }
+.mc-field__validation-message.is-loading {
+  color: var(--field-color-validation-loading, #666666);
+}
 .mc-field--group {
-  border: none;
-  margin-left: 0;
-  margin-right: 0;
+  border-width: 0;
+  margin-inline: 0;
   padding: 0;
 }
+.mc-field--group .mc-field__content {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: 0.25rem;
+}
+.mc-field--group .mc-field__content:where(.mc-field__content--inline) {
+  flex-flow: row wrap;
+  gap: 0.25rem 1rem;
+}
 
 /* stylelint-enable string-no-newline */</style>

package/dist/components/checkbox/Checkbox.svelte.d.ts

@@ -1,14 +1,13 @@
 interface Props {
     name: string;
-    id: string;
-    checked: boolean;
-    indeterminate: boolean;
+    label?: string;
+    id?: string;
+    checked?: boolean;
+    indeterminate?: boolean;
     disabled?: boolean;
     isinvalid?: boolean;
-    label: string;
-    ischecked: boolean;
 }
-declare const Checkbox: import("svelte").Component<Props, {}, "">;
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;
 //# sourceMappingURL=Checkbox.svelte.d.ts.map

package/dist/components/checkbox/Checkbox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;CACpB;AAiCH,QAAA,MAAM,QAAQ,2CAAsC,CAAC;AACrD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAiCH,QAAA,MAAM,QAAQ,kDAAsC,CAAC;AACrD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}