@mozaic-ds/web-components 1.2.0 → 1.4.0

package/dist/components/builtinmenuitem/BuiltInMenuItem.svelte

@@ -0,0 +1,165 @@
+<svelte:options
+  customElement={{
+    tag: 'm-built-in-menu-item',
+    props: {
+      selected: { reflect: true, type: 'Boolean', attribute: 'selected' },
+    },
+  }}
+/>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { ChevronRight20 } from '@mozaic-ds/icons-svelte';
+  /**
+   * A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.
+   *
+   * @slot icon - Use this slot to insert an icon before the label.
+   */
+  interface Props {
+    [key: string]: any;
+    /**
+     * The label used for the menu item.
+     */
+    label: string;
+    /**
+     * URL for the menu item link.
+     */
+    href?: string;
+    /**
+     * Where to open the link.
+     */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /**
+     * If `true`, the menu item will be selected.
+     */
+    selected: boolean;
+    /**
+     * Use this snippet to insert an icon before the label.
+     */
+    icon?: Snippet;
+  }
+
+  let { label, href, target, selected, icon, attrs }: Props = $props();
+
+  const tag = $derived(href ? 'a' : 'button');
+</script>
+
+<li
+  class={{
+    'mc-built-in-menu__item': true,
+    'mc-built-in-menu__item--selected': selected,
+  }}
+  {...selected ? { 'aria-current': true } : {}}
+  {...attrs}
+>
+  <svelte:element
+    this={tag}
+    class={`mc-built-in-menu__${tag === 'button' ? 'button' : 'link'}`}
+    {...tag === 'a' && { href, target }}
+  >
+    {#if icon}
+      {@render icon()}
+    {:else}
+      <slot name="icon" />
+    {/if}
+
+    <span class="mc-built-in-menu__label">
+      {label}
+    </span>
+
+    <ChevronRight20 className="mc-built-in-menu__icon" />
+  </svelte:element>
+</li>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-built-in-menu {
+  display: inline-block;
+  width: 15rem;
+  padding: 0.5rem;
+  background-color: var(--built-in-menu-color-background-default, #ffffff);
+  border-radius: var(--border-radius-s, 0.25rem);
+}
+.mc-built-in-menu--outlined {
+  border: 1px solid var(--color-border-primary, #cccccc);
+}
+.mc-built-in-menu__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.mc-built-in-menu__item {
+  display: flex;
+  align-items: center;
+  height: 3.5rem;
+  border-bottom: 1px solid var(--divider-color-primary, #cccccc);
+}
+.mc-built-in-menu__item--selected .mc-built-in-menu__button,
+.mc-built-in-menu__item--selected .mc-built-in-menu__link {
+  background-color: var(--built-in-menu-color-background-selected, #ebf5de);
+}
+.mc-built-in-menu__item--selected .mc-built-in-menu__label {
+  color: var(--built-in-menu-color-text-selected, #006902);
+  font-weight: var(--font-weight-semi-bold, 600);
+}
+.mc-built-in-menu__item--selected .mc-built-in-menu__icon {
+  fill: var(--built-in-menu-color-text-selected, #006902);
+}
+.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected):hover .mc-built-in-menu__button, .mc-built-in-menu__item:not(.mc-built-in-menu__item--selected):hover .mc-built-in-menu__link,
+.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__button:focus-visible,
+.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__link:focus-visible {
+  background-color: var(--built-in-menu-color-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__label {
+  color: var(--built-in-menu-color-text-default, #404040);
+}
+.mc-built-in-menu__item--selected, .mc-built-in-menu__item:has(+ .mc-built-in-menu__item--selected), .mc-built-in-menu__item:last-child, .mc-built-in-menu__item:hover, .mc-built-in-menu__item:has(+ .mc-built-in-menu__item:hover) {
+  border-bottom: 1px solid transparent;
+}
+.mc-built-in-menu__icon {
+  flex: 0 0 auto;
+}
+.mc-built-in-menu__button {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--border-radius-s, 0.25rem);
+  background-color: var(--built-in-menu-color-background-default, #ffffff);
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  overflow: hidden;
+  border: none;
+  cursor: pointer;
+}
+.mc-built-in-menu__link {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--border-radius-s, 0.25rem);
+  background-color: var(--built-in-menu-color-background-default, #ffffff);
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  overflow: hidden;
+  text-decoration: none;
+}
+.mc-built-in-menu__label {
+  flex: 1 1 auto;
+  margin-left: 0.5rem;
+  margin-right: 1rem;
+  font-size: var(--font-size-150, 1rem);
+  font-weight: var(--font-weight-regular, 400);
+  line-height: var(--line-height-s, 1.3);
+  color: var(--built-in-menu-color-text-default, #404040);
+  /* Truncature */
+  overflow: hidden;
+  display: -webkit-box;
+  text-align: left;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}</style>

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

@@ -0,0 +1,50 @@
+import type { Snippet } from 'svelte';
+/**
+ * A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.
+ *
+ * @slot icon - Use this slot to insert an icon before the label.
+ */
+interface Props {
+    [key: string]: any;
+    /**
+     * The label used for the menu item.
+     */
+    label: string;
+    /**
+     * URL for the menu item link.
+     */
+    href?: string;
+    /**
+     * Where to open the link.
+     */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /**
+     * If `true`, the menu item will be selected.
+     */
+    selected: boolean;
+    /**
+     * Use this snippet to insert an icon before the label.
+     */
+    icon?: Snippet;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BuiltInMenuItem: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+}, {}, "">;
+type BuiltInMenuItem = InstanceType<typeof BuiltInMenuItem>;
+export default BuiltInMenuItem;
+//# sourceMappingURL=BuiltInMenuItem.svelte.d.ts.map

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

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

package/dist/components/builtinmenuitem/README.md

@@ -0,0 +1,20 @@
+# `m-built-in-menu-item`
+
+A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `label*` | The label used for the menu item. | `string` |   |
+| `href` | URL for the menu item link. | `string` |   |
+| `target` | Where to open the link. | `'_self'` `'_blank'` `'_parent'` `'_top'` |   |
+| `selected*` | If `true`, the menu item will be selected. | `boolean` |   |
+| `icon` | Use this snippet to insert an icon before the label. | `Snippet` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `icon` | Use this slot to insert an icon before the label. |
+

package/dist/components/button/Button.js

@@ -1,5 +1,5 @@
-import{c as G,p as H,a as I,b as n,f as s,D 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:`/**
+import{c as T,p as U,a as V,b as a,s as m,f as l,g as W,h as _,i as X,d as z,j as c,t as Y,k as f,l as k,r as p,n as Z,o as $}from"../../custom-element.js";import{s as G}from"../../snippet.js";import{i as u}from"../../if.js";import{s as H}from"../../slot.js";import{a as oo}from"../../attributes.js";import{L as to}from"../loader/Loader.js";var eo=_('<span class="mc-button__icon svelte-ozghz9"><!></span>'),ro=_('<span class="mc-button__icon svelte-ozghz9" style="position: absolute; visibility: visible;"><!></span>'),no=_("<span><!></span>"),ao=_("<button><!> <!> <!> <!> <!></button>");const co={hash:"svelte-ozghz9",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-button.svelte-ozghz9 {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-ozghz9:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-ozghz9:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-ozghz9 {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-150, 1rem);}.mc-button.svelte-ozghz9 {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-ozghz9 {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-ozghz9 {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-ozghz9:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-button--s.svelte-ozghz9 {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--s.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-100, 0.875rem);}.mc-button--s.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {width:1.25rem;height:1.25rem;}.mc-button--s.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9):only-child {width:1.25rem;height:1.25rem;}.mc-button--m.svelte-ozghz9 {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--m.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-150, 1rem);}.mc-button--m.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {width:1.5rem;height:1.5rem;}.mc-button--m.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9):only-child {width:1.5rem;height:1.5rem;}.mc-button--l.svelte-ozghz9 {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--l.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-200, 1.125rem);}.mc-button--l.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {width:2rem;height:2rem;}.mc-button--l.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9):only-child {width:2rem;height:2rem;}.mc-button--icon-only.svelte-ozghz9 {padding:0.25rem;}.mc-button--outlined.svelte-ozghz9 {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-ozghz9:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-ozghz9:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-ozghz9 {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-ozghz9:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-ozghz9:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-ozghz9 {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-ozghz9:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-ozghz9 {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-ozghz9:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-ozghz9 {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-ozghz9:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-ozghz9 {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--loading.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9),
-.mc-button--loading.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {visibility:hidden;}.mc-button--outlined.mc-button--standard.svelte-ozghz9 {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-ozghz9:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-ozghz9:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-ozghz9 {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-ozghz9:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-ozghz9 {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-ozghz9:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-ozghz9 {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-ozghz9 {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-ozghz9:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-ozghz9:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-ozghz9 {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-ozghz9:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-ozghz9 {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-ozghz9:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-ozghz9 {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.hidden.svelte-ozghz9 {visibility:hidden;}`};function 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),D=J(e,["$$slots","$$events","$$legacy","$$host","appearance","size","type","ghost","outlined","disabled","isloading","iconposition"]);var L={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(),...D}),void 0,void 0,void 0,"svelte-ozghz9");var y=d(g);{var C=o=>{var t=R(),r=d(t);h(r,e,"icon",{}),u(t),b(o,t)};i(y,o=>{c()==="left"&&!l()&&o(C)})}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(L)}customElements.define("m-button",G(Z,{appearance:{},size:{},type:{},ghost:{},outlined:{},disabled:{},isloading:{},iconposition:{}},["icon","default"],[],!0));export{Z as B};
+.mc-button--loading.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {visibility:hidden;}.mc-button--outlined.mc-button--standard.svelte-ozghz9 {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-ozghz9:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-ozghz9:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-ozghz9 {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-ozghz9:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-ozghz9 {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-ozghz9:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-ozghz9 {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-ozghz9 {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-ozghz9:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-ozghz9:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-ozghz9 {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-ozghz9:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-ozghz9 {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-ozghz9:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-ozghz9 {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.hidden.svelte-ozghz9 {visibility:hidden;}`};function lo(I,t){U(t,!0),V(I,co);const w=o=>{var r=eo(),i=z(r);{var D=e=>{var n=f(),b=k(n);G(b,v),l(e,n)},E=e=>{var n=f(),b=k(n);H(b,t,"icon",{},null),l(e,n)};u(i,e=>{v()?e(D):e(E,!1)})}p(r),l(o,r)};let y=a(t,"appearance",7,"standard"),x=a(t,"size",7,"m"),B=a(t,"type",7,"button"),j=a(t,"ghost",7),L=a(t,"outlined",7),C=a(t,"disabled",7),s=a(t,"isloading",7),d=a(t,"iconposition",7),g=a(t,"children",7),v=a(t,"icon",7),J=X(t,["$$slots","$$events","$$legacy","$$host","appearance","size","type","ghost","outlined","disabled","isloading","iconposition","children","icon"]);var K={get appearance(){return y()},set appearance(o="standard"){y(o),c()},get size(){return x()},set size(o="m"){x(o),c()},get type(){return B()},set type(o="button"){B(o),c()},get ghost(){return j()},set ghost(o){j(o),c()},get outlined(){return L()},set outlined(o){L(o),c()},get disabled(){return C()},set disabled(o){C(o),c()},get isloading(){return s()},set isloading(o){s(o),c()},get iconposition(){return d()},set iconposition(o){d(o),c()},get children(){return g()},set children(o){g(o),c()},get icon(){return v()},set icon(o){v(o),c()}},h=ao();oo(h,()=>({class:["mc-button",`mc-button--${x()}`,`mc-button--${y()}`,j()&&"mc-button--ghost",L()&&"mc-button--outlined",s()&&"mc-button--loading",d()==="only"&&"mc-button--icon-only"],disabled:C(),type:B(),...J}),void 0,void 0,void 0,"svelte-ozghz9");var S=z(h);{var M=o=>{w(o)};u(S,o=>{d()==="left"&&!s()&&o(M)})}var q=m(S,2);{var N=o=>{var r=ro(),i=z(r);to(i,{style:"color: currentColor",size:"s"}),p(r),l(o,r)};u(q,o=>{s()&&o(N)})}var A=m(q,2);{var O=o=>{w(o)};u(A,o=>{d()==="only"&&o(O)})}var F=m(A,2);{var P=o=>{var r=no(),i=z(r);{var D=e=>{var n=f(),b=k(n);G(b,g),l(e,n)},E=e=>{var n=f(),b=k(n);H(b,t,"default",{},null),l(e,n)};u(i,e=>{g()?e(D):e(E,!1)})}p(r),Y(()=>Z(r,1,$(["mc-button__label",s()&&"hidden"]),"svelte-ozghz9")),l(o,r)};u(F,o=>{d()!=="only"&&o(P)})}var Q=m(F,2);{var R=o=>{w(o)};u(Q,o=>{d()==="right"&&o(R)})}return p(h),l(I,h),W(K)}customElements.define("m-button",T(lo,{disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},outlined:{attribute:"outlined",reflect:!0,type:"Boolean"},ghost:{attribute:"ghost",reflect:!0,type:"Boolean"},isloading:{attribute:"isloading",reflect:!0,type:"Boolean"},appearance:{},size:{},type:{},iconposition:{},children:{},icon:{}},["icon","default"],[],!0));export{lo as B};
 //# 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 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,uHAECD,EAAY,IAAK,QAAM,CAAKD,EAAS,GAAAI,EAAAC,CAAA,uGAMrCL,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"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-button',\n    props: {\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      outlined: { reflect: true, type: 'Boolean', attribute: 'outlined' },\n      ghost: { reflect: true, type: 'Boolean', attribute: 'ghost' },\n      isloading: { reflect: true, type: 'Boolean', attribute: 'isloading' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  import Loader from '../loader/Loader.svelte';\n  /**\n   * Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.\n   *\n   * @slot default - The content displayed in the button.\n   * @slot icon - Use this slot to insert an icon for the Button.\n   */\n  interface Props {\n    [key: string]: any;\n\n    /**\n     * Defines the visual style of the button.\n     */\n    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';\n    /**\n     * Determines the size of the button.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * If `true`, disables the button, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, applies a \"ghost\" style to the button, typically a transparent background with a border.\n     */\n    ghost?: boolean;\n    /**\n     * If `true`, the button gets an outlined style, usually with just the border and no solid background.\n     */\n    outlined?: boolean;\n    /**\n     * Controls the positioning of an icon in the button.\n     */\n    iconposition?: 'left' | 'right' | 'only';\n    /**\n     * Specifies the button's HTML `type` attribute.\n     */\n    type?: 'button' | 'reset' | 'submit';\n    /**\n     * If `true`, a loading state is displayed.\n     */\n    isloading?: boolean;\n    /**\n     * The content displayed in the button.\n     */\n    children?: Snippet;\n    /**\n     * Use this snippet to insert an icon for the Button.\n     */\n    icon?: Snippet;\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    type = 'button',\n    ghost,\n    outlined,\n    disabled,\n    isloading,\n    iconposition,\n    children,\n    icon,\n    ...attrs\n  }: Props = $props();\n</script>\n\n{#snippet displayIcon()}\n  <span class=\"mc-button__icon\">\n    {#if icon}\n      {@render icon()}\n    {:else}\n      <slot name=\"icon\" />\n    {/if}\n  </span>\n{/snippet}\n\n<button\n  class={[\n    'mc-button',\n    `mc-button--${size}`,\n    `mc-button--${appearance}`,\n    ghost && 'mc-button--ghost',\n    outlined && 'mc-button--outlined',\n    isloading && 'mc-button--loading',\n    iconposition === 'only' && 'mc-button--icon-only',\n  ]}\n  {disabled}\n  {type}\n  {...attrs}\n>\n  {#if iconposition === 'left' && !isloading}\n    {@render displayIcon()}\n  {/if}\n\n  {#if isloading}\n    <span class=\"mc-button__icon\" style=\"position: absolute; visibility: visible;\">\n      <Loader style=\"color: currentColor\" size=\"s\" />\n    </span>\n  {/if}\n\n  {#if iconposition === 'only'}\n    {@render displayIcon()}\n  {/if}\n\n  {#if iconposition !== 'only'}\n    <span class={['mc-button__label', isloading && 'hidden']}>\n      {#if children}\n        {@render children()}\n      {:else}\n        <slot />\n      {/if}\n    </span>\n  {/if}\n\n  {#if iconposition === 'right'}\n    {@render displayIcon()}\n  {/if}\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n\n  .hidden {\n    visibility: hidden;\n  }\n</style>\n"],"names":["displayIcon","$$anchor","span","root_1","icon","$$render","consequent","alternate","appearance","size","type","ghost","$.prop","$$props","outlined","disabled","isloading","iconposition","children","attrs","$.rest_props","button","root","node_3","$.child","consequent_1","span_1","root_5","Loader","node_5","consequent_2","consequent_3","span_2","root_7","consequent_4","alternate_1","$.template_effect","$.set_class","$.clsx","consequent_5","consequent_6","$.reset","$.append"],"mappings":";;;q/LAYA,uBAqEUA,EAAWC,GAAA,KAClBC,EAAIC,GAAA,MAAJD,CAAI,kCAEQE,CAAI,uEADVA,EAAI,EAAAC,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,MADVL,CAAI,MAAJA,CAAI,GAfH,IAAAM,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,eAAO,QAAQ,EACfC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACRG,EAASJ,EAAAC,EAAA,YAAA,CAAA,EACTI,EAAYL,EAAAC,EAAA,eAAA,CAAA,EACZK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRT,EAAIQ,EAAAC,EAAA,OAAA,CAAA,EACDM,EAAAC,EAAAP,EAAA,uMAVU,WAAU,6CAChB,IAAG,6CACH,SAAQ,2XAsBlBQ,EAAAC,GAAA,KAAAD,eAEG,0BACcZ,EAAI,CAAA,iBACJD,EAAU,CAAA,GACxBG,EAAK,GAAI,mBACTG,EAAQ,GAAI,sBACZE,EAAS,GAAI,qBACbC,EAAY,IAAK,QAAU,iCAE5BF,EAAQ,OACRL,EAAI,KACDS,0CAZL,IAAAI,EAAAC,EAAAH,CAAA,aAeYrB,EAAWC,CAAA,WADjBgB,EAAY,IAAK,QAAM,CAAKD,EAAS,GAAAX,EAAAoB,CAAA,gCAKvCC,EAAIC,GAAA,MAAJD,CAAI,EACFE,GAAMC,EAAA,CAAA,MAAA,sBAAA,KAAA,IAAA,IADRH,CAAI,MAAJA,CAAI,WADFV,EAAS,GAAAX,EAAAyB,CAAA,4BAOH9B,EAAWC,CAAA,WADjBgB,EAAY,IAAK,QAAMZ,EAAA0B,CAAA,gCAKzBC,EAAIC,GAAA,MAAJD,CAAI,kCAEQd,CAAQ,0EADdA,EAAQ,EAAAb,EAAA6B,CAAA,EAAA7B,EAAA8B,EAAA,EAAA,MADdH,CAAI,EAAJI,EAAA,IAAAC,EAAAL,EAAI,EAAAM,EAAA,CAAS,mBAAoBtB,EAAS,GAAI,QAAQ,CAAA,EAAA,eAAA,CAAA,MAAtDgB,CAAI,WADFf,EAAY,IAAK,QAAMZ,EAAAkC,CAAA,4BAWjBvC,EAAWC,CAAA,WADjBgB,EAAY,IAAK,SAAOZ,EAAAmC,CAAA,IAtC9BC,OAAAA,EAAApB,CAAA,EAAAqB,EAAAzC,EAAAoB,CAAA,MAZO"}

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

@@ -1,10 +1,23 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Button.svelte';
+import '@mozaic-ds/icons-svelte/components/ChevronRight24/ChevronRight24.svelte';
+import '@mozaic-ds/icons-svelte/components/Edit24/Edit24.svelte';
+import '@mozaic-ds/icons-svelte/components/Search24/Search24.svelte';
 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 IconLeft: Story;
+export declare const IconRight: Story;
+export declare const IconOnly: Story;
+export declare const Standard: Story;
+export declare const Accent: Story;
+export declare const Danger: Story;
+export declare const Inverse: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: 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":"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"}
+{"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;AAIrE,OAAO,iBAAiB,CAAC;AACzB,OAAO,yEAAyE,CAAC;AACjF,OAAO,yDAAyD,CAAC;AACjE,OAAO,6DAA6D,CAAC;AAErE,QAAA,MAAM,IAAI,EAAE,IAoCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KActB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC"}

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

@@ -1,6 +1,10 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './Button.svelte';
+import '@mozaic-ds/icons-svelte/components/ChevronRight24/ChevronRight24.svelte';
+import '@mozaic-ds/icons-svelte/components/Edit24/Edit24.svelte';
+import '@mozaic-ds/icons-svelte/components/Search24/Search24.svelte';
 const meta = {
     title: 'Action/Button',
     component: 'm-button',
@@ -28,32 +32,168 @@ const meta = {
       iconposition=${ifDefined(args.iconposition)}
       appearance=${ifDefined(args.appearance)}
       size=${ifDefined(args.size)}
-      disabled=${ifDefined(args.disabled)}
-      ghost=${ifDefined(args.ghost)}
-      outlined=${ifDefined(args.outlined)}
+      ?disabled=${args.disabled}
+      ?ghost=${args.ghost}
+      ?outlined=${args.outlined}
       type=${ifDefined(args.type)}
-      isloading=${ifDefined(args.isloading)}
+      ?isloading=${args.isloading}
     >
       ${unsafeHTML(ifDefined(args.icon))} ${unsafeHTML(ifDefined(args.default))}
     </m-button>
   `,
 };
 export default meta;
-export const Filled = {};
+export const Filled = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Most visible variant, used to emphasize the primary action on a page or a section.',
+            },
+        },
+    },
+};
 export const Outline = {
     args: { outlined: true },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Complements the filled button for secondary actions that require less attention. It can also be used when multiple actions are available, without one standing out as more important.',
+            },
+        },
+    },
 };
 export const Ghost = {
     args: { ghost: true },
+    parameters: {
+        docs: {
+            description: {
+                story: 'More discreet, should be used exclusively for canceling or ignoring a task or action.',
+            },
+        },
+    },
 };
-export const Icon = {
+export const IconLeft = {
     args: {
         iconposition: 'left',
+        icon: '<edit-24 slot="icon"></edit-24>',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'An icon can enhance the action or provide a visual element that helps user understanding.<br/> Used in conjunction with the action verb, reinforcing its meaning.',
+            },
+        },
+    },
+};
+export const IconRight = {
+    args: {
+        iconposition: 'right',
         icon: '<chevron-right-24 slot="icon"></chevron-right-24>',
     },
+    parameters: {
+        docs: {
+            description: {
+                story: 'An icon can enhance the action or provide a visual element that helps user understanding.<br/> Often emphasizes the concept of navigation, guiding users effectively.',
+            },
+        },
+    },
+};
+export const IconOnly = {
+    args: {
+        default: undefined,
+        iconposition: 'only',
+        icon: '<search-24 slot="icon"></search-24>',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'An icon can enhance the action or provide a visual element that helps user understanding.<br/> Used when the action is generic enough to be understood without accompanying text.',
+            },
+        },
+    },
+};
+export const Standard = {
+    args: { appearance: 'standard' },
+    parameters: {
+        docs: {
+            description: {
+                story: 'The standard style is a neutral variant used for general actions that don’t require special attention, ensuring a consistent and accessible look.',
+            },
+        },
+    },
+};
+export const Accent = {
+    args: { appearance: 'accent' },
+    parameters: {
+        docs: {
+            description: {
+                story: 'The accent style is a more prominent variant used for engaging actions that require attention, such as conversions or highlighting specific tasks, ensuring a vibrant and accessible appearance.',
+            },
+        },
+    },
+};
+export const Danger = {
+    args: { appearance: 'danger' },
+    parameters: {
+        docs: {
+            description: {
+                story: 'The danger style is intended for critical or irreversible actions, such as deleting sensitive data (e.g., deleting a profile picture is not considered sensitive), ensuring that users are clearly warned before proceeding.',
+            },
+        },
+    },
+};
+export const Inverse = {
+    globals: {
+        backgrounds: { value: 'inverse' },
+    },
+    args: { appearance: 'inverse' },
+    parameters: {
+        docs: {
+            description: {
+                story: 'The inverse style must be used exclusively on dark backgrounds, providing contrast and clarity.',
+            },
+        },
+    },
+};
+export const Small = {
+    args: { size: 's' },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Exclusively used on desktop interfaces. Ideal for complex interfaces with a high volume of content.',
+            },
+        },
+    },
+};
+export const Medium = {
+    args: { size: 'm' },
+    parameters: {
+        docs: {
+            description: {
+                story: 'This is the minimum size recommended for mobile use, and it is the default size based on standard height. It provides an adequate touch area for mobile devices.',
+            },
+        },
+    },
+};
+export const Large = {
+    args: { size: 'l' },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Primarily used on landing pages or layouts with generous spacing. It may also be applicable in more complex scenarios, such as for small mobile devices used by warehouse employees.',
+            },
+        },
+    },
 };
 export const Loading = {
     args: {
         isloading: true,
     },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Visually communicates to users that a process or action is in progress. It helps set user expectations during waiting periods by indicating that the system is working. Typically used for actions that require more than a fraction of a second to complete.',
+            },
+        },
+    },
 };