@mozaic-ds/web-components 1.0.0-beta.6 → 1.0.0

package/dist/components/breadcrumb/Breadcrumb.svelte

@@ -1,6 +1,6 @@
 <svelte:options
   customElement={{
-    tag: 'm-breadcrumb'
+    tag: 'm-breadcrumb',
   }}
 />
 
@@ -16,7 +16,7 @@
     /**
      * Links of the breadcrumb.
      */
-		links: Array<{
+    links: Array<{
       /**
        * The label displayed for the link.
        */
@@ -30,22 +30,11 @@
        */
       target?: '_blank' | '_self' | '_parent' | '_top';
     }>;
-	}
+  }
 
-  let { appearance = 'standard', links = []}: Props = $props();
+  let { appearance = 'standard', links }: Props = $props();
 
   const isLastLink = (index: number) => index === links.length - 1;
-
-  function setClasses(isCurrent: boolean): string {
-    const classes = ['mc-link', 'mc-link--m', 'mc-link--inline'];
-    if (appearance) {
-      classes.push(`mc-link--${appearance}`);
-    }
-    if (isCurrent) {
-      classes.push('mc-breadcrumb__current');
-    }
-    return classes.join(' ');
-  }
 </script>
 
 <nav
@@ -58,7 +47,13 @@
         <a
           href={link.href}
           target={link.target}
-          class={setClasses(isLastLink(index))}
+          class={[
+            'mc-link',
+            'mc-link--m',
+            'mc-link--inline',
+            appearance && `mc-link--${appearance}`,
+            isLastLink(index) && 'mc-breadcrumb__current',
+          ]}
         >
           <span class="mc-link__label">{link.label}</span>
         </a>
@@ -70,11 +65,8 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-breadcrumb {
-  color: #000000;
+  color: var(--breadcrumb-color-text-standard, #000000);
 }
 .mc-breadcrumb__container {
   list-style-type: none;
@@ -90,11 +82,11 @@
 }
 .mc-breadcrumb__item: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='%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");
+  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: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='%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");
+    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:not(:nth-last-child(2)) {
     clip-path: inset(100%);
@@ -115,14 +107,14 @@
   color: currentcolor;
 }
 .mc-breadcrumb--inverse {
-  color: #ffffff;
+  color: var(--breadcrumb-color-text-inverse, #ffffff);
 }
 .mc-breadcrumb--inverse .mc-breadcrumb__item: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='%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");
+  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 .mc-breadcrumb__item: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='%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");
+    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");
   }
 }
 
@@ -134,7 +126,7 @@
   gap: 0.25rem;
   min-height: 1.5rem;
   text-decoration: none;
-  color: #000000;
+  color: var(--link-color-text-primary, #000000);
   font-size: 0.875rem;
 }
 .mc-link__label {
@@ -151,7 +143,7 @@
   text-decoration: underline;
 }
 .mc-link:focus {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  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;
 }
@@ -160,22 +152,22 @@
   font-size: 1rem;
 }
 .mc-link--secondary {
-  color: #666666;
+  color: var(--link-color-text-secondary, #666666);
 }
 .mc-link--accent {
-  color: #117f03;
+  color: var(--link-color-text-accent, #117f03);
 }
 .mc-link--inverse {
-  --focus-color-mid: #000000;
-  --focus-color-outer: #ffffff;
-  color: #ffffff;
+  --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 {
   min-height: 2rem;
-  font-weight: 600;
+  font-weight: var(--link-font-weight, 600);
 }
 .mc-link--stand-alone .mc-link__label {
-  border-bottom: 1px solid currentColor;
+  border-bottom: var(--border-s, 1px) solid currentColor;
 }
 .mc-link--stand-alone:hover .mc-link__label {
   border-color: transparent;

package/dist/components/breadcrumb/Breadcrumb.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/Breadcrumb.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,UAAU,EAAE,UAAU,GAAG,SAAS,CAAC;IACnC;;OAEG;IACL,KAAK,EAAE,KAAK,CAAC;QACT;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,IAAI,EAAE,MAAM,CAAC;QACb;;WAEG;QACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;KAClD,CAAC,CAAC;CACL;AAwCF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/Breadcrumb.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,UAAU,EAAE,UAAU,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC;QACX;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,IAAI,EAAE,MAAM,CAAC;QACb;;WAEG;QACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;KAClD,CAAC,CAAC;CACJ;AAmCH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/breadcrumb/README.md

@@ -0,0 +1,11 @@
+# `m-breadcrumb`
+
+A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `appearance*` | Allows to define the breadcrumb appearance. | `'standard'` `'inverse'` | `standard` |
+| `links*` | Links of the breadcrumb. | `Array<{ label: string; href: string; target?: '_blank'` `'_self'` `'_parent'` `'_top'; }>` |   |
+

package/dist/components/button/Button.js

@@ -1,8 +1,5 @@
-import{c as K,p as M,a as N,b as n,f as h,D as O,s as C,d as g,h as i,i as P,j as c,r as f,t as Q,e as R,A,B as E}from"../../custom-element.js";import{i as s}from"../../if.js";import{s as B}from"../../slot.js";import{b as T,C as U}from"../../attributes.js";import{L as V}from"../loader/Loader.js";var W=h('<span class="mc-button__icon svelte-9om05i"><!></span>'),X=h("<span><!></span>"),Y=h('<span class="mc-button__icon svelte-9om05i"><!></span>'),Z=h("<button><!> <!> <!> <!></button>");const $={hash:"svelte-9om05i",code:`/**
+import{c as G,p as H,a as I,b as n,f as s,z as J,d,s as v,i as b,j as K,k as a,r as u,t as M,e as N,g as O}from"../../custom-element.js";import{i}from"../../if.js";import{s as h}from"../../slot.js";import{b as P}from"../../attributes.js";import{L as Q}from"../loader/Loader.js";var R=s('<span class="mc-button__icon svelte-ozghz9"><!></span>'),T=s('<span class="mc-button__icon svelte-ozghz9" style="color: currentColor;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.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-button.svelte-9om05i {color:#ffffff;background-color:#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-9om05i:hover {background-color:#343b4c;}.mc-button.svelte-9om05i:active {background-color:#242938;}.mc-button.svelte-9om05i:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button.svelte-9om05i .mc-button__label:where(.svelte-9om05i) {font-size:1rem;}.mc-button__label.svelte-9om05i {font-size:1rem;}.mc-button__icon.svelte-9om05i {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-9om05i:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button.svelte-9om05i:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-button--s.svelte-9om05i {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--s.svelte-9om05i .mc-button__label:where(.svelte-9om05i) {font-size:0.875rem;}.mc-button--s.svelte-9om05i .mc-button__icon:where(.svelte-9om05i) {width:1.25rem;height:1.25rem;}.mc-button--s.svelte-9om05i .mc-button__icon:where(.svelte-9om05i):only-child {width:1.25rem;height:1.25rem;}.mc-button--m.svelte-9om05i {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--m.svelte-9om05i .mc-button__label:where(.svelte-9om05i) {font-size:1rem;}.mc-button--m.svelte-9om05i .mc-button__icon:where(.svelte-9om05i) {width:1.5rem;height:1.5rem;}.mc-button--m.svelte-9om05i .mc-button__icon:where(.svelte-9om05i):only-child {width:1.5rem;height:1.5rem;}.mc-button--l.svelte-9om05i {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--l.svelte-9om05i .mc-button__label:where(.svelte-9om05i) {font-size:1.125rem;}.mc-button--l.svelte-9om05i .mc-button__icon:where(.svelte-9om05i) {width:2rem;height:2rem;}.mc-button--l.svelte-9om05i .mc-button__icon:where(.svelte-9om05i):only-child {width:2rem;height:2rem;}.mc-button--icon-only.svelte-9om05i {padding:0.25rem;}.mc-button--outlined.svelte-9om05i {color:#242938;border-color:#8891aa;background-color:#ffffff;}.mc-button--outlined.svelte-9om05i:hover {background-color:#eff1f6;}.mc-button--outlined.svelte-9om05i:active {background-color:#c9d0de;}.mc-button--outlined.svelte-9om05i:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--ghost.svelte-9om05i {color:#242938;background-color:rgba(255, 255, 255, 0.01);}.mc-button--ghost.svelte-9om05i:hover {background-color:rgba(70, 78, 99, 0.1);}.mc-button--ghost.svelte-9om05i:active {background-color:rgba(70, 78, 99, 0.2);}.mc-button--ghost.svelte-9om05i:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--accent.svelte-9om05i {color:#ffffff;background-color:#117f03;}.mc-button--accent.svelte-9om05i:hover {background-color:#006902;}.mc-button--accent.svelte-9om05i:active {background-color:#035010;}.mc-button--accent.svelte-9om05i:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--danger.svelte-9om05i {color:#ffffff;background-color:#c61112;}.mc-button--danger.svelte-9om05i:hover {background-color:#8c0003;}.mc-button--danger.svelte-9om05i:active {background-color:#530000;}.mc-button--danger.svelte-9om05i:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--inverse.svelte-9om05i {--focus-color-mid: #000000;--focus-color-outer: #ffffff;color:#242938;background-color:#ffffff;}.mc-button--inverse.svelte-9om05i:hover {background-color:#e6e6e6;}.mc-button--inverse.svelte-9om05i:active {background-color:#cccccc;}.mc-button--inverse.svelte-9om05i:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--icon-button.svelte-9om05i {border-radius:100%;padding:0;}.mc-button--loading.svelte-9om05i .mc-button__label:where(.svelte-9om05i),
-.mc-button--loading.svelte-9om05i .mc-button__icon:where(.svelte-9om05i) {visibility:hidden;}.mc-button--outlined.mc-button--standard.svelte-9om05i {color:#242938;border-color:#8891aa;background-color:#ffffff;}.mc-button--outlined.mc-button--standard.svelte-9om05i:hover {background-color:#eff1f6;}.mc-button--outlined.mc-button--standard.svelte-9om05i:active {background-color:#c9d0de;}.mc-button--outlined.mc-button--standard.svelte-9om05i:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-9om05i {color:#117f03;border-color:#78be20;background-color:#ffffff;}.mc-button--outlined.mc-button--accent.svelte-9om05i:hover {background-color:#ebf5de;}.mc-button--outlined.mc-button--accent.svelte-9om05i:active {background-color:#c5e39e;}.mc-button--outlined.mc-button--accent.svelte-9om05i:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-9om05i {color:#c61112;border-color:#ef5f5c;background-color:#ffffff;}.mc-button--outlined.mc-button--danger.svelte-9om05i:hover {background-color:#fdeaea;}.mc-button--outlined.mc-button--danger.svelte-9om05i:active {background-color:#f8bcbb;}.mc-button--outlined.mc-button--danger.svelte-9om05i:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-9om05i {color:#ffffff;border-color:#ffffff;background-color:rgba(255, 255, 255, 0.01);}.mc-button--outlined.mc-button--inverse.svelte-9om05i:hover {background-color:rgba(255, 255, 255, 0.1);}.mc-button--outlined.mc-button--inverse.svelte-9om05i:active {background-color:rgba(255, 255, 255, 0.2);}.mc-button--outlined.mc-button--inverse.svelte-9om05i:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-9om05i {color:#242938;background-color:rgba(255, 255, 255, 0.01);}.mc-button--ghost.mc-button--standard.svelte-9om05i:hover {background-color:rgba(70, 78, 99, 0.1);}.mc-button--ghost.mc-button--standard.svelte-9om05i:active {background-color:rgba(70, 78, 99, 0.2);}.mc-button--ghost.mc-button--standard.svelte-9om05i:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-9om05i {color:#117f03;background-color:rgba(255, 255, 255, 0.01);}.mc-button--ghost.mc-button--accent.svelte-9om05i:hover {background-color:rgba(17, 127, 3, 0.1);}.mc-button--ghost.mc-button--accent.svelte-9om05i:active {background-color:rgba(17, 127, 3, 0.2);}.mc-button--ghost.mc-button--accent.svelte-9om05i:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-9om05i {color:#c61112;background-color:rgba(255, 255, 255, 0.01);}.mc-button--ghost.mc-button--danger.svelte-9om05i:hover {background-color:rgba(198, 17, 18, 0.1);}.mc-button--ghost.mc-button--danger.svelte-9om05i:active {background-color:rgba(198, 17, 18, 0.2);}.mc-button--ghost.mc-button--danger.svelte-9om05i:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-9om05i {color:#ffffff;background-color:rgba(255, 255, 255, 0.01);}.mc-button--ghost.mc-button--inverse.svelte-9om05i:hover {background-color:rgba(255, 255, 255, 0.1);}.mc-button--ghost.mc-button--inverse.svelte-9om05i:active {background-color:rgba(255, 255, 255, 0.2);}.mc-button--ghost.mc-button--inverse.svelte-9om05i:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button__icon.svelte-9om05i {pointer-events:none;}.hidden.svelte-9om05i {visibility:hidden;}.loader-style.svelte-9om05i {color:currentColor;position:absolute;}`};function oo(D,t){M(t,!0),N(D,$);let _=n(t,"appearance",7,"standard"),k=n(t,"size",7,"m"),p=n(t,"ghost",7,!1),w=n(t,"outlined",7,!1),l=n(t,"iconmode",7),y=n(t,"disabled",7,!1),z=n(t,"type",7,"button"),d=n(t,"isloading",7,!1),u=n(t,"hasiconslot",7,!1),q=O(t,["$$slots","$$events","$$legacy","$$host","appearance","size","ghost","outlined","iconmode","disabled","type","isloading","hasiconslot"]);var v=Z();T(v,o=>({class:`mc-button mc-button--${k()} mc-button--${_()}`,disabled:y(),type:z(),...q,[U]:o}),[()=>({"mc-button--ghost":p(),"mc-button--outlined":w(),"mc-button--icon-only":l()==="only","mc-button--loading":d()})],void 0,"svelte-9om05i");var L=g(v);{var F=o=>{V(o,{theme:"standard",style:"color: currentColor; position: absolute;",size:"m",text:""})};s(L,o=>{d()&&o(F)})}var S=C(L,2);{var G=o=>{var e=W(),a=g(e);{var m=r=>{var b=A(),x=E(b);B(x,t,"icon",{}),i(r,b)};s(a,r=>{u()&&r(m)})}f(e),i(o,e)};s(S,o=>{(l()==="left"||l()==="only")&&o(G)})}var j=C(S,2);{var H=o=>{var e=X();let a;var m=g(e);B(m,t,"default",{}),f(e),Q(r=>a=R(e,1,"mc-button__label svelte-9om05i",null,a,r),[()=>({hidden:d()})]),i(o,e)};s(j,o=>{l()!=="only"&&o(H)})}var I=C(j,2);{var J=o=>{var e=Y(),a=g(e);{var m=r=>{var b=A(),x=E(b);B(x,t,"icon",{}),i(r,b)};s(a,r=>{u()&&r(m)})}f(e),i(o,e)};s(I,o=>{l()==="right"&&o(J)})}return f(v),i(D,v),P({get appearance(){return _()},set appearance(o="standard"){_(o),c()},get size(){return k()},set size(o="m"){k(o),c()},get ghost(){return p()},set ghost(o=!1){p(o),c()},get outlined(){return w()},set outlined(o=!1){w(o),c()},get iconmode(){return l()},set iconmode(o){l(o),c()},get disabled(){return y()},set disabled(o=!1){y(o),c()},get type(){return z()},set type(o="button"){z(o),c()},get isloading(){return d()},set isloading(o=!1){d(o),c()},get hasiconslot(){return u()},set hasiconslot(o=!1){u(o),c()}})}customElements.define("m-button",K(oo,{appearance:{},size:{},ghost:{},outlined:{},iconmode:{},disabled:{},type:{},isloading:{},hasiconslot:{}},["icon","default"],[],!0));export{oo 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-radius, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-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(--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 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),_=n(e,"outlined",7),p=n(e,"disabled",7),l=n(e,"isloading",7),c=n(e,"iconposition",7),L=J(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 _()},set outlined(o){_(o),a()},get disabled(){return p()},set disabled(o){p(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",_()&&"mc-button--outlined",l()&&"mc-button--loading",c()==="only"&&"mc-button--icon-only"],disabled:p(),type:f(),...L}),void 0,void 0,"svelte-ozghz9");var y=d(g);{var D=o=>{var t=R(),r=d(t);h(r,e,"icon",{}),u(t),b(o,t)};i(y,o=>{c()==="left"&&!l()&&o(D)})}var x=v(y,2);{var E=o=>{var t=T(),r=d(t);Q(r,{appearance:"inverse",size:"s"}),u(t),b(o,t)};i(x,o=>{l()&&o(E)})}var j=v(x,2);{var S=o=>{var t=U(),r=d(t);h(r,e,"icon",{}),u(t),b(o,t)};i(j,o=>{c()==="only"&&o(S)})}var B=v(j,2);{var q=o=>{var t=V(),r=d(t);h(r,e,"default",{}),u(t),M(()=>N(t,1,O(["mc-button__label",l()&&"hidden"]),"svelte-ozghz9")),b(o,t)};i(B,o=>{c()!=="only"&&o(q)})}var A=v(B,2);{var F=o=>{var t=W(),r=d(t);h(r,e,"icon",{}),u(t),b(o,t)};i(A,o=>{c()==="right"&&o(F)})}return u(g),b(w,g),K(C)}customElements.define("m-button",G(Z,{appearance:{},size:{},type:{},ghost:{},outlined:{},disabled:{},isloading:{},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 customElement={{ tag: 'm-button' }} />\n\n<script lang=\"ts\">\n  import type {\n    ButtonIconMode,\n    ButtonSize,\n    ButtonStyle,\n    ButtonType,\n  } from './button.types';\n\n  import Loader from '../loader/Loader.svelte';\n\n  interface Props {\n    appearance?: ButtonStyle;\n    size?: ButtonSize;\n    ghost?: boolean;\n    outlined?: boolean;\n    iconmode?: ButtonIconMode;\n    disabled?: boolean;\n    type?: ButtonType;\n    isloading?: boolean;\n    hasiconslot?: boolean;\n    [key: string]: any;\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    ghost = false,\n    outlined = false,\n    iconmode,\n    disabled = false,\n    type = 'button',\n    isloading = false,\n    hasiconslot = false,\n    ...events\n  }: Props = $props();\n</script>\n\n<button\n  class={`mc-button mc-button--${size} mc-button--${appearance}`}\n  class:mc-button--ghost={ghost}\n  class:mc-button--outlined={outlined}\n  class:mc-button--icon-only={iconmode === 'only'}\n  class:mc-button--loading={isloading}\n  {disabled}\n  {type}\n  {...events}\n>\n  {#if isloading}\n    <Loader\n      theme=\"standard\"\n      style=\"color: currentColor; position: absolute;\"\n      size=\"m\"\n      text=\"\"\n    />\n  {/if}\n\n  {#if iconmode === 'left' || iconmode === 'only'}\n    <span class=\"mc-button__icon\">\n      {#if hasiconslot}\n        <slot name=\"icon\" />\n      {/if}\n    </span>\n  {/if}\n\n  {#if iconmode !== 'only'}\n    <span class=\"mc-button__label\" class:hidden={isloading}>\n      <slot />\n    </span>\n  {/if}\n\n  {#if iconmode === 'right'}\n    <span class=\"mc-button__icon\">\n      {#if hasiconslot}\n        <slot name=\"icon\" />\n      {/if}\n    </span>\n  {/if}\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-button__icon {\n    pointer-events: none;\n  }\n\n  .hidden {\n    visibility: hidden;\n  }\n\n  .loader-style {\n    color: currentColor;\n    position: absolute;\n  }\n</style>\n"],"names":["appearance","size","ghost","outlined","iconmode","$.prop","$$props","disabled","type","isloading","hasiconslot","events","$.rest_props","$$render","consequent","consequent_1","consequent_2","consequent_3","consequent_4","consequent_5"],"mappings":";;;;;;kzHAAA,gBA0BI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,gBAAQ,EAAK,EACbC,mBAAW,EAAK,EAChBC,EAAQC,EAAAC,EAAA,WAAA,CAAA,EACRC,mBAAW,EAAK,EAChBC,eAAO,QAAQ,EACfC,oBAAY,EAAK,EACjBC,sBAAc,EAAK,EAChBC,EAAAC,EAAAN,EAAA,6JAK0B,MAAA,wBAAAL,kBAAmBD,EAAU,CAAA,4BAOxDW,oCANoBT,EAAK,wBACFC,EAAQ,EACP,uBAAAC,EAAQ,IAAK,4BACfK,EAAS,sJAK9BA,EAAS,GAAAI,EAAAC,CAAA,0GAWLJ,EAAW,GAAAG,EAAAE,CAAA,0BAFfX,EAAa,IAAA,QAAUA,MAAa,SAAMS,EAAAG,CAAA,sJASAP,EAAS,CAAA,EAAA,CAAA,kBADnDL,MAAa,QAAMS,EAAAI,CAAA,0GAQfP,EAAW,GAAAG,EAAAK,CAAA,yBAFfd,MAAa,SAAOS,EAAAM,CAAA,wEA9CV,WAAU,6CAChB,IAAG,+CACF,GAAK,qDACF,GAAK,0GAEL,GAAK,6CACT,SAAQ,uDACH,GAAK,2DACH,GAAK,YAGvB"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-button' }} />\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\n      class=\"mc-button__icon\"\n      style=\"color: currentColor;position: absolute; visibility: visible;\"\n    >\n      <Loader appearance={'inverse'} 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","$$render","consequent","consequent_1","consequent_2","consequent_3","consequent_4"],"mappings":";;;o/LAAA,gBA+CI,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,gTAYf,0BACcJ,EAAI,CAAA,iBACJD,EAAU,CAAA,GACxBG,EAAK,GAAI,mBACTG,EAAQ,GAAI,sBACZE,EAAS,GAAI,qBACbC,EAAY,IAAK,QAAU,iDAIzBC,gHAECD,EAAY,IAAK,QAAM,CAAKD,EAAS,GAAAI,EAAAC,CAAA,6DAWlB,UAAS,KAAA,IAAA,uBAL5BL,EAAS,GAAAI,EAAAE,CAAA,mFASTL,EAAY,IAAK,QAAMG,EAAAG,CAAA,qFAOZ,mBAAoBP,EAAS,GAAI,QAAQ,CAAA,EAAA,eAAA,CAAA,kBADpDC,EAAY,IAAK,QAAMG,EAAAI,CAAA,mFAMvBP,EAAY,IAAK,SAAOG,EAAAK,CAAA,2BA3C/B"}

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

@@ -0,0 +1,74 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Button from './Button.svelte';
+describe('m-button component', () => {
+    it('renders with default classes', () => {
+        const { container } = render(Button, {
+            props: {},
+        });
+        const button = container.querySelector('button');
+        expect(button).toBeTruthy();
+        expect(button.classList.contains('mc-button')).toBe(true);
+        expect(button.classList.contains('mc-button--m')).toBe(true);
+        expect(button.classList.contains('mc-button--standard')).toBe(true);
+    });
+    it('applies correct classes for props', () => {
+        const { container } = render(Button, {
+            props: {
+                appearance: 'accent',
+                size: 'l',
+                ghost: true,
+                outlined: true,
+                iconposition: 'only',
+                isloading: true,
+            },
+        });
+        const button = container.querySelector('button');
+        expect(button.classList.contains('mc-button--accent')).toBe(true);
+        expect(button.classList.contains('mc-button--l')).toBe(true);
+        expect(button.classList.contains('mc-button--ghost')).toBe(true);
+        expect(button.classList.contains('mc-button--outlined')).toBe(true);
+        expect(button.classList.contains('mc-button--loading')).toBe(true);
+        expect(button.classList.contains('mc-button--icon-only')).toBe(true);
+    });
+    it('renders disabled button', () => {
+        const { container } = render(Button, {
+            props: {
+                disabled: true,
+            },
+        });
+        const button = container.querySelector('button');
+        expect(button.disabled).toBe(true);
+    });
+    it('renders loading spinner when isloading is true', () => {
+        const { container } = render(Button, {
+            props: {
+                isloading: true,
+            },
+        });
+        const loaderIcon = container.querySelector('.mc-button__icon');
+        expect(loaderIcon).toBeTruthy();
+        expect(loaderIcon?.innerHTML).toContain('svg');
+    });
+    it('fires click event when clicked', async () => {
+        const { container } = render(Button);
+        const button = container.querySelector('button');
+        const clickHandler = vi.fn();
+        button.addEventListener('click', clickHandler);
+        await fireEvent.click(button);
+        expect(clickHandler).toHaveBeenCalledOnce();
+    });
+    it('passes additional attributes to button element', () => {
+        const { container } = render(Button, {
+            props: {
+                'aria-label': 'My button',
+                name: 'test-button',
+                type: 'submit',
+            },
+        });
+        const button = container.querySelector('button');
+        expect(button.getAttribute('aria-label')).toBe('My button');
+        expect(button.getAttribute('name')).toBe('test-button');
+        expect(button.getAttribute('type')).toBe('submit');
+    });
+});

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

@@ -1,14 +1,10 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * Buttons are used to trigger actions. Their appearance depends on the type of action required from the user or the context.
- *
- * The `MButton` component is the **Svelte / WebComponent** implementation of the **Button** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/buttons/).
- */
-declare const _default: Meta;
-export default _default;
-export declare const Filled: any;
-export declare const Outlined: any;
-export declare const Ghost: any;
-export declare const Icon: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Filled: Story;
+export declare const Outline: Story;
+export declare const Ghost: Story;
+export declare const Icon: Story;
+export declare const Loading: Story;
 //# sourceMappingURL=Button.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBA8DE,IAAI;AA5DT,wBA4DU;AA6BV,eAAO,MAAM,MAAM,KAAoB,CAAC;AAUxC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAc1C,eAAO,MAAM,KAAK,KAAoB,CAAC;AAqBvC,eAAO,MAAM,IAAI,KAAoB,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAoCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,MAAM,EAAE,KAAU,CAAC;AAEhC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}

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

@@ -1,159 +1,59 @@
-import { action } from 'storybook/actions';
-import ChevronRight32 from '@mozaic-ds/icons-svelte/custom-elements/ChevronRight32/ChevronRight32.js';
-import { userEvent, expect, within, fn } from 'storybook/test';
-/**
- * Buttons are used to trigger actions. Their appearance depends on the type of action required from the user or the context.
- *
- * The `MButton` component is the **Svelte / WebComponent** implementation of the **Button** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/buttons/).
- */
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+const meta = {
     title: 'Action/Button',
-    tags: ['autodocs', 'beta', 'version:2.0.0'],
-    context: 'sidebar',
-    args: {
-        size: 'm',
-    },
+    component: 'm-button',
     argTypes: {
+        iconposition: {
+            control: 'radio',
+            options: ['left', 'right', 'only'],
+        },
+        appearance: {
+            control: 'radio',
+            options: ['danger', 'accent', 'inverse', 'standard'],
+        },
         size: {
-            description: 'Specify the size of the button, available sizes are `s`, `m`, and `l`',
-            control: { type: 'radio' },
+            control: 'radio',
             options: ['s', 'm', 'l'],
         },
         type: {
-            description: 'Specify the type of the button, available types are `button`, `reset`, `submit`',
-            control: { type: 'radio' },
+            control: 'radio',
             options: ['button', 'reset', 'submit'],
         },
-        appearance: {
-            control: { type: 'radio' },
-            options: ['standard', 'accent', 'danger', 'inverse'],
-        },
-        disabled: {
-            description: 'Specify whether the button is disabled',
-            control: 'boolean',
-        },
-        outlined: {
-            description: 'Specify whether the button is outlined',
-            control: 'boolean',
-        },
-        ghost: {
-            description: 'Specify whether the button is using ghost style',
-            control: 'boolean',
-        },
-        isloading: {
-            description: 'Specify whether the button is loading',
-            control: 'boolean',
-        },
-        label: {
-            description: 'Button Label',
-            table: {
-                category: 'Slots',
-            },
-        },
-        icon: {
-            description: 'Icon that can be used ',
-            table: {
-                category: 'Slots',
-            },
-        },
-        click: {
-            description: 'Event that occurs on the button click',
-            action: 'click',
-            table: {
-                category: 'Events',
-            },
-        },
     },
-};
-const Template = (args) => {
-    const primary = document.createElement('m-button');
-    primary.setAttribute('data-testid', args.label || 'Primary');
-    primary.setAttribute('type', args.type);
-    primary.setAttribute('appearance', 'standard');
-    primary.setAttribute('size', args.size);
-    primary.addEventListener('click', action('click'));
-    const label = document.createElement('span');
-    label.innerText = 'Button Label';
-    const icon = document.createElement('chevron-right-32');
-    icon.setAttribute('slot', 'icon');
-    icon.setAttribute('style', 'height: 100%');
-    primary.appendChild(label);
-    primary.appendChild(icon);
-    if (args.outlined)
-        primary.setAttribute('outlined', 'true');
-    if (args.ghost)
-        primary.setAttribute('ghost', 'true');
-    if (args.appearance)
-        primary.setAttribute('appearance', args.appearance);
-    if (args.disabled)
-        primary.setAttribute('disabled', 'true');
-    if (args.iconmode)
-        primary.setAttribute('iconmode', args.iconmode || 'left');
-    if (args.hasiconslot)
-        primary.setAttribute('hasiconslot', args.hasiconslot);
-    if (args.isloading)
-        primary.setAttribute('isloading', args.isloading);
-    return primary;
-};
-export const Filled = Template.bind({});
-Filled.args = {};
-Filled.play = async ({ canvasElement }) => {
-    const MButton = canvasElement.querySelector('m-button');
-    const button = MButton?.shadowRoot.querySelector('button');
-    expect(button).not.toBeNull();
-    await userEvent.click(button);
-    expect(MButton).toHaveTextContent('Button Label');
-};
-export const Outlined = Template.bind({});
-Outlined.args = {
-    outlined: 'true',
-    label: 'Button Label',
-};
-Outlined.play = async ({ canvasElement }) => {
-    const MButton = canvasElement.querySelector('m-button');
-    const button = MButton?.shadowRoot.querySelector('button');
-    expect(button).not.toBeNull();
-    await userEvent.click(button);
-    expect(MButton).toHaveTextContent('Button Label');
-    expect(MButton).toHaveAttribute('outlined', 'true');
-};
-export const Ghost = Template.bind({});
-Ghost.args = {
-    ghost: true,
-    label: 'Button Label',
-};
-Ghost.argTypes = {
-    iconmode: {
-        table: {
-            disable: true,
-        },
+    args: { default: 'Button Label' },
+    render: (args) => html `
+    <m-button
+      iconposition=${ifDefined(args.iconposition)}
+      appearance=${ifDefined(args.appearance)}
+      size=${ifDefined(args.size)}
+      disabled=${ifDefined(args.disabled)}
+      ghost=${ifDefined(args.ghost)}
+      outlined=${ifDefined(args.outlined)}
+      type=${ifDefined(args.type)}
+      isloading=${ifDefined(args.isloading)}
+    >
+      ${unsafeHTML(ifDefined(args.icon))} ${unsafeHTML(ifDefined(args.default))}
+    </m-button>
+  `,
+};
+export default meta;
+export const Filled = {};
+export const Outline = {
+    args: { outlined: true },
+};
+export const Ghost = {
+    args: { ghost: true },
+};
+export const Icon = {
+    args: {
+        iconposition: 'left',
+        icon: '<chevron-right-24 slot="icon"></chevron-right-24>',
     },
 };
-Ghost.play = async ({ canvasElement }) => {
-    const MButton = canvasElement.querySelector('m-button');
-    const button = MButton?.shadowRoot.querySelector('button');
-    expect(button).not.toBeNull();
-    await userEvent.click(button);
-    expect(MButton).toHaveTextContent('Button Label');
-    expect(MButton).toHaveAttribute('ghost', 'true');
-};
-export const Icon = Template.bind({});
-Icon.args = {
-    hasiconslot: true,
-    iconmode: 'left',
-};
-Icon.argTypes = {
-    iconmode: {
-        table: {
-            disable: true,
-        },
+export const Loading = {
+    args: {
+        isloading: true,
     },
 };
-Icon.play = async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const MButton = canvasElement.querySelector('m-button');
-    const button = MButton?.shadowRoot.querySelector('button');
-    expect(button).not.toBeNull();
-    await userEvent.click(MButton);
-};