@mozaic-ds/web-components 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/components/breadcrumb/Breadcrumb.svelte

@@ -1,64 +1,176 @@
-<svelte:options tag={null} />
+<svelte:options
+  customElement={{
+    tag: 'm-breadcrumb',
+    props: {
+      options: { reflect: true, type: 'Array', attribute: 'links' },
+    },
+  }}
+/>
 
 <script lang="ts">
-  import type { BreadcrumbItems } from './breadcrumb.types';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
+  interface BreadcrumbLink {
+    label: string;
+    href: string;
+    target: '_blank' | '_self' | '_parent' | '_top' | undefined;
+  }
 
-  export let items: string;
-  export let dark = false;
-  export let responsive = false;
-  export let nopadding: boolean | string = false;
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
+  interface Props {
+    appearance?: 'standard' | 'inverse';
+    links?: BreadcrumbLink[];
+  }
 
-  $: parseItems = items ? (JSON.parse(items) as BreadcrumbItems[]) : [];
-  $: noPadding = nopadding && nopadding !== 'false';
-  $: userClass = $$props.class;
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
+  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
-  class="mc-breadcrumb {responsive ? ' mc-breadcrumb--responsive' : ''}{dark
-    ? ' mc-breadcrumb--dark'
-    : ''} {userClass}"
-  class:mc-breadcrumb--no-padding={noPadding}
+  class={`mc-breadcrumb mc-breadcrumb--${appearance}`}
   aria-label="Breadcrumb"
-  {...attributes}
 >
-  <ul class="mc-breadcrumb__container">
-    {#each parseItems as item, i}
-      <li class="mc-breadcrumb__item{item.isActive ? ' is-active' : ''}">
-        {#if i !== parseItems.length - 1}
-          <a
-            href={item.href}
-            class="mc-link mc-link--s{dark ? ' mc-link--light' : ''}"
-            on:click={() => eventHandler.dispatch('link-clicked', item)}
-          >
-            {item.text}
-          </a>
-        {:else}
-          <span
-            class="mc-link mc-link--s mc-breadcrumb__current{dark
-              ? ' mc-link--light'
-              : ''}"
-          >
-            {item.text}
-          </span>
-        {/if}
+  <ol class="mc-breadcrumb__container">
+    {#each links as link, index (index)}
+      <li class="mc-breadcrumb__item">
+        <a
+          href={link.href}
+          target={link.target}
+          class={setClasses(isLastLink(index))}
+        >
+          <span class="mc-link__label">{link.label}</span>
+        </a>
       </li>
     {/each}
-  </ul>
+  </ol>
 </nav>
 
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/_c.links';
-  @import '@mozaic-ds/styles/components/_c.breadcrumb';
-</style>
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-breadcrumb {
+  color: var(--breadcrumb-color-text-standard, #000000);
+}
+.mc-breadcrumb__container {
+  list-style-type: none;
+  padding-inline-start: 0;
+  margin-block: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+.mc-breadcrumb__item {
+  background-position: left center;
+  background-repeat: no-repeat;
+}
+.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='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='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%);
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    padding: 0;
+    width: 1px;
+  }
+}
+.mc-breadcrumb__current, .mc-breadcrumb__current.mc-link {
+  cursor: default;
+  text-decoration: none;
+}
+.mc-breadcrumb__current, .mc-breadcrumb__current:active, .mc-breadcrumb__current:focus, .mc-breadcrumb__current:hover, .mc-breadcrumb__current:visited, .mc-breadcrumb__current.mc-link, .mc-breadcrumb__current.mc-link:active, .mc-breadcrumb__current.mc-link:focus, .mc-breadcrumb__current.mc-link:hover, .mc-breadcrumb__current.mc-link:visited {
+  color: currentcolor;
+}
+.mc-breadcrumb--inverse {
+  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='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='var(--breadcrumb-color-icon-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M11.78 5.303a.75.75 0 0 1 0 1.06L8.144 10l3.636 3.637a.75.75 0 0 1-1.06 1.06l-4.167-4.166a.75.75 0 0 1 0-1.061l4.166-4.167a.75.75 0 0 1 1.061 0'/%3E%3C/svg%3E");
+  }
+}
+
+.mc-link {
+  transition: box-shadow 200ms ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  min-height: 1.5rem;
+  text-decoration: none;
+  color: var(--link-color-text-primary, #000000);
+  font-size: 0.875rem;
+}
+.mc-link__label {
+  line-height: 1.3;
+}
+.mc-link__icon {
+  display: block;
+  height: 1.25rem;
+  width: 1.25rem;
+  flex-shrink: 0;
+  fill: currentcolor;
+}
+.mc-link:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label {
+  text-decoration: underline;
+}
+.mc-link:focus {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-link--m {
+  min-height: 2rem;
+  font-size: 1rem;
+}
+.mc-link--secondary {
+  color: var(--link-color-text-secondary, #666666);
+}
+.mc-link--accent {
+  color: var(--link-color-text-accent, #117f03);
+}
+.mc-link--inverse {
+  --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: var(--link-font-weight, 600);
+}
+.mc-link--stand-alone .mc-link__label {
+  border-bottom: var(--border-s, 1px) solid currentColor;
+}
+.mc-link--stand-alone:hover .mc-link__label {
+  border-color: transparent;
+}
+.mc-link--inline {
+  font-weight: inherit;
+  text-decoration: underline;
+}
+.mc-link--inline .mc-link__label {
+  line-height: 1;
+}
+.mc-link--inline:hover {
+  text-decoration: none;
+}</style>

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,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;CAC7D;AAED,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACpC,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;CAC1B;AA4CH,QAAA,MAAM,UAAU,2CAAsC,CAAC;AACvD,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,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;CAC7D;AAED,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACpC,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;CAC1B;AA4CH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/button/Button.js

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

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

@@ -0,0 +1,14 @@
+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;
+//# sourceMappingURL=Button.stories.d.ts.map

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

@@ -0,0 +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;AAE1D;;;;;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"}