@mozaic-ds/web-components 1.0.0-beta.7 → 1.1.0

package/dist/components/flag/Flag.stories.js

@@ -1,113 +1,32 @@
-import { userEvent, expect } from 'storybook/test';
-/**
- * A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content.
- *
- * The `MFlag` component is the **Svelte / WebComponent** implementation of the **Flag** component of Mozaic Design System.
- * Full specification available in the Mozaic documentation.
- */
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+const meta = {
     title: 'Indicators/Flag',
-    tags: ['autodocs', 'beta', 'version:2.0.0'],
-    context: 'sidebar',
-    args: {
-        appearance: 'standard',
-        label: 'Flag Label',
-    },
+    component: 'm-flag',
     argTypes: {
         appearance: {
-            description: 'Style du flag. Valeurs disponibles : `standard`, `accent`, `danger`, `inverse`',
-            control: { type: 'radio' },
-            options: ['standard', 'accent', 'danger', 'inverse'],
-        },
-        default: {
-            description: 'Contenu du flag (slot par défaut)',
-            table: {
-                category: 'Slots',
-            },
-            control: 'text',
+            control: 'radio',
+            options: ['danger', 'accent', 'inverse', 'standard'],
         },
     },
-};
-const Template = (args) => {
-    const flag = document.createElement('m-flag');
-    flag.setAttribute('data-testid', args.label || 'Flag');
-    // Attributs
-    if (args.appearance)
-        flag.setAttribute('appearance', args.appearance);
-    // Slot (label)
-    const label = document.createElement('span');
-    label.innerText = args.label || 'Flag Label';
-    flag.appendChild(label);
-    return flag;
-};
-export const Standard = Template.bind({});
-Standard.args = {
-    appearance: 'standard',
-    label: 'Standard',
-};
-Standard.play = async ({ canvasElement }) => {
-    const MFlag = canvasElement.querySelector('m-flag');
-    const inner = MFlag?.shadowRoot?.querySelector('.mc-flag__label');
-    expect(inner).not.toBeNull();
-    expect(MFlag).toHaveTextContent('Standard');
-    // pas de modificateur attendu pour standard
-    const container = MFlag?.shadowRoot?.querySelector('.mc-flag');
-    expect(container?.className).not.toContain('mc-flag--');
-};
-export const Accent = Template.bind({});
-Accent.args = {
-    appearance: 'accent',
-    label: 'Accent',
-};
-Accent.play = async ({ canvasElement }) => {
-    const MFlag = canvasElement.querySelector('m-flag');
-    const container = MFlag?.shadowRoot?.querySelector('.mc-flag');
-    expect(container).not.toBeNull();
-    expect(MFlag).toHaveTextContent('Accent');
-    expect(container?.className).toContain('mc-flag--accent');
-};
-export const Danger = Template.bind({});
-Danger.args = {
-    appearance: 'danger',
-    label: 'Danger',
-};
-Danger.play = async ({ canvasElement }) => {
-    const MFlag = canvasElement.querySelector('m-flag');
-    const container = MFlag?.shadowRoot?.querySelector('.mc-flag');
-    expect(container).not.toBeNull();
-    expect(MFlag).toHaveTextContent('Danger');
-    expect(container?.className).toContain('mc-flag--danger');
-};
-export const Inverse = Template.bind({});
-Inverse.globals = {
-    backgrounds: {
-        value: 'inverse',
+    args: {
+        label: 'Flag label',
     },
+    render: (args) => html `
+    <m-flag label=${ifDefined(args.label)} appearance=${ifDefined(args.appearance)}></m-flag>
+  `,
 };
-Inverse.args = {
-    appearance: 'inverse',
-    label: 'Inverse',
-};
-Inverse.play = async ({ canvasElement }) => {
-    const MFlag = canvasElement.querySelector('m-flag');
-    const container = MFlag?.shadowRoot?.querySelector('.mc-flag');
-    expect(container).not.toBeNull();
-    expect(MFlag).toHaveTextContent('Inverse');
-    expect(container?.className).toContain('mc-flag--inverse');
+export default meta;
+export const Standard = {};
+export const Accent = {
+    args: { appearance: 'accent' },
 };
-/**
- * Story d’interaction simple (démonstration) :
- * un clic sur l’hôte n’affecte pas le visuel mais valide que le composant est focusable/clicable si nécessaire.
- */
-export const ClickableHost = Template.bind({});
-ClickableHost.args = {
-    appearance: 'accent',
-    label: 'Cliquable',
+export const Danger = {
+    args: { appearance: 'danger' },
 };
-ClickableHost.play = async ({ canvasElement }) => {
-    const MFlag = canvasElement.querySelector('m-flag');
-    expect(MFlag).not.toBeNull();
-    await userEvent.click(MFlag);
-    // Le composant n’a pas d’événement spécifique par défaut, on vérifie juste le contenu.
-    expect(MFlag).toHaveTextContent('Cliquable');
+export const Inverse = {
+    globals: {
+        backgrounds: { value: 'inverse' },
+    },
+    args: { appearance: 'inverse' },
 };

package/dist/components/flag/Flag.svelte

@@ -1,24 +1,26 @@
 <svelte:options customElement={{ tag: 'm-flag' }} />
 
 <script lang="ts">
+  /**
+   * A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content. It is typically placed at the top of an element to ensure immediate visibility.
+   */
   interface Props {
     /**
-     * Style du Flag
+     * Label of the Flag.
+     */
+    label: string;
+    /**
+     * Allows to define the Flag appearance.
      */
     appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
-
-    [key: string]: any;
   }
 
-  let { appearance = 'standard', ...events }: Props = $props();
+  let { appearance = 'standard', label }: Props = $props();
 </script>
 
-<div
-  class={`mc-flag ${appearance !== 'standard' ? `mc-flag--${appearance}` : ''}`}
-  {...events}
->
+<div class={['mc-flag', `mc-flag--${appearance}`]}>
   <span class="mc-flag__label">
-    <slot />
+    {label}
   </span>
 </div>
 

package/dist/components/flag/Flag.svelte.d.ts

@@ -1,35 +1,17 @@
+/**
+ * A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content. It is typically placed at the top of an element to ensure immediate visibility.
+ */
 interface Props {
     /**
-     * Style du Flag
+     * Label of the Flag.
+     */
+    label: string;
+    /**
+     * Allows to define the Flag appearance.
      */
     appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
-    [key: string]: any;
-}
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    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;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Flag: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, "">;
-type Flag = InstanceType<typeof Flag>;
+declare const Flag: import("svelte").Component<Props, {}, "">;
+type Flag = ReturnType<typeof Flag>;
 export default Flag;
 //# sourceMappingURL=Flag.svelte.d.ts.map

package/dist/components/flag/Flag.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flag.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/flag/Flag.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAE1D,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAmBH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,IAAI;;;;;;UAAqF,CAAC;AAC9E,KAAK,IAAI,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACxC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Flag.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/flag/Flag.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;CAC3D;AAmBH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/flag/README.md

@@ -0,0 +1,11 @@
+# `m-flag`
+
+A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content. It is typically placed at the top of an element to ensure immediate visibility.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `label*` | Label of the Flag. | `string` |   |
+| `appearance` | Allows to define the Flag appearance. | `'danger'` `'accent'` `'inverse'` `'standard'` | `standard` |
+

package/dist/components/iconbutton/IconButton.js

@@ -1,4 +1,4 @@
-import{c as h,p as m,a as k,b as r,f as p,D as w,d as y,h as x,i as _,j as e,r as z}from"../../custom-element.js";import{s as S}from"../../slot.js";import{b as j,C}from"../../attributes.js";var D=p("<button><!></button>");const I={hash:"svelte-3c0lhf",code:`/**
+import{c as f,p as h,a as m,b as r,f as k,z as p,d as w,i as y,j as x,k as e,r as z}from"../../custom-element.js";import{s as _}from"../../slot.js";import{b as j}from"../../attributes.js";var I=k("<button><!></button>");const B={hash:"svelte-3c0lhf",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-button.svelte-3c0lhf {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-3c0lhf:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-3c0lhf:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-3c0lhf: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-3c0lhf {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-3c0lhf {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-3c0lhf {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-3c0lhf {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-3c0lhf: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-3c0lhf: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-3c0lhf {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-3c0lhf {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-3c0lhf {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-3c0lhf {padding:0.25rem;}.mc-button--outlined.svelte-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-3c0lhf:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-3c0lhf:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-3c0lhf: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-3c0lhf {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-3c0lhf:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-3c0lhf:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-3c0lhf: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-3c0lhf {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-3c0lhf:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-3c0lhf:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-3c0lhf: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-3c0lhf {--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-3c0lhf:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-3c0lhf:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-3c0lhf: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-3c0lhf {border-radius:var(--radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-3c0lhf:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-3c0lhf:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-3c0lhf:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-3c0lhf:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-3c0lhf:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-3c0lhf:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-3c0lhf:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-3c0lhf:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function A(s,t){m(t,!0),k(s,I);let c=r(t,"appearance",7,"standard"),n=r(t,"size",7,"m"),l=r(t,"ghost",7,!1),d=r(t,"outlined",7,!1),i=r(t,"iconname",7),b=r(t,"disabled",7,!1),u=r(t,"type",7,"button"),v=w(t,["$$slots","$$events","$$legacy","$$host","appearance","size","ghost","outlined","iconname","disabled","type"]);var g={get appearance(){return c()},set appearance(o="standard"){c(o),e()},get size(){return n()},set size(o="m"){n(o),e()},get ghost(){return l()},set ghost(o=!1){l(o),e()},get outlined(){return d()},set outlined(o=!1){d(o),e()},get iconname(){return i()},set iconname(o){i(o),e()},get disabled(){return b()},set disabled(o=!1){b(o),e()},get type(){return u()},set type(o="button"){u(o),e()}},a=D();j(a,o=>({class:`mc-button mc-button--icon-button ${n()?`mc-button--${n()}`:""} ${c()?`mc-button--${c()}`:""}`,disabled:b(),type:u(),...v,[C]:o}),[()=>({"mc-button--ghost":l(),"mc-button--outlined":d()})],void 0,"svelte-3c0lhf");var f=y(a);return S(f,t,"icon",{}),z(a),x(s,a),_(g)}customElements.define("m-icon-button",h(A,{appearance:{},size:{},ghost:{},outlined:{},iconname:{},disabled:{},type:{}},["icon"],[],!0));export{A as I};
+ */.mc-button.svelte-3c0lhf {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-3c0lhf:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-3c0lhf:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-3c0lhf: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-3c0lhf {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-3c0lhf {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-3c0lhf {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-3c0lhf {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-3c0lhf: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-3c0lhf: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-3c0lhf {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-3c0lhf {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-3c0lhf {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-3c0lhf {padding:0.25rem;}.mc-button--outlined.svelte-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-3c0lhf:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-3c0lhf:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-3c0lhf: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-3c0lhf {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-3c0lhf:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-3c0lhf:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-3c0lhf: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-3c0lhf {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-3c0lhf:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-3c0lhf:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-3c0lhf: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-3c0lhf {--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-3c0lhf:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-3c0lhf:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-3c0lhf: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-3c0lhf {border-radius:var(--radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-3c0lhf:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-3c0lhf:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-3c0lhf:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-3c0lhf:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-3c0lhf:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-3c0lhf:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-3c0lhf:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-3c0lhf: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-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-3c0lhf:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function D(s,t){h(t,!0),m(s,B);let n=r(t,"appearance",7,"standard"),a=r(t,"size",7,"m"),l=r(t,"type",7,"button"),d=r(t,"ghost",7),b=r(t,"outlined",7),u=r(t,"disabled",7),i=p(t,["$$slots","$$events","$$legacy","$$host","appearance","size","type","ghost","outlined","disabled"]);var v={get appearance(){return n()},set appearance(o="standard"){n(o),e()},get size(){return a()},set size(o="m"){a(o),e()},get type(){return l()},set type(o="button"){l(o),e()},get ghost(){return d()},set ghost(o){d(o),e()},get outlined(){return b()},set outlined(o){b(o),e()},get disabled(){return u()},set disabled(o){u(o),e()}},c=I();j(c,()=>({class:["mc-button","mc-button--icon-button",`mc-button--${a()}`,`mc-button--${n()}`,d()&&"mc-button--ghost",b()&&"mc-button--outlined"],disabled:u(),type:l(),...i}),void 0,void 0,"svelte-3c0lhf");var g=w(c);return _(g,t,"icon",{}),z(c),y(s,c),x(v)}customElements.define("m-icon-button",f(D,{appearance:{},size:{},type:{},ghost:{},outlined:{},disabled:{}},["icon"],[],!0));export{D as I};
 //# sourceMappingURL=IconButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../src/components/iconbutton/IconButton.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-icon-button' }} />\n\n<script lang=\"ts\">\n  import type { ButtonSize, ButtonStyle, ButtonType } from '../button/button.types';\n\n  interface Props {\n    appearance?: ButtonStyle | undefined;\n    size?: ButtonSize;\n    ghost?: boolean;\n    outlined?: boolean;\n    iconname?: string;\n    disabled?: boolean;\n    type?: ButtonType;\n    [key: string]: any;\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    ghost = false,\n    outlined = false,\n    iconname,\n    disabled = false,\n    type = 'button',\n    ...events\n  }: Props = $props();\n\n  function generateIconName(size: ButtonSize, iconName: string): string {\n    let iconSize: string;\n\n    switch (size) {\n      case 's':\n        iconSize = '20px';\n        break;\n      case 'm':\n        iconSize = '24px';\n        break;\n      case 'l':\n        iconSize = '32px';\n        break;\n    }\n\n    return `${iconName} size=\"${iconSize}\" `;\n  }\n</script>\n\n<button\n  class=\"mc-button mc-button--icon-button {size\n    ? `mc-button--${size}`\n    : ''} {appearance ? `mc-button--${appearance}` : ''}\"\n  class:mc-button--ghost={ghost}\n  class:mc-button--outlined={outlined}\n  {disabled}\n  {type}\n  {...events}\n>\n  <slot name=\"icon\" />\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["appearance","size","ghost","outlined","iconname","$.prop","$$props","disabled","type","events","$.rest_props"],"mappings":";;qnWAAA,gBAiBI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,gBAAQ,EAAK,EACbC,mBAAW,EAAK,EAChBC,EAAQC,EAAAC,EAAA,WAAA,CAAA,EACRC,mBAAW,EAAK,EAChBC,eAAO,QAAQ,EACZC,EAAAC,EAAAJ,EAAA,qKAPU,WAAU,6CAChB,IAAG,+CACF,GAAK,qDACF,GAAK,0GAEL,GAAK,6CACT,SAAQ,qEAwBwBL,EAAA,EAAA,cACvBA,EAAI,IAClB,EAAE,IAAGD,EAAU,EAAA,cAAiBA,MAAe,EAAE,4BAKjDS,oCAJoBP,EAAK,wBACFC,EAAQ,gFAPrC"}
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/iconbutton/IconButton.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-icon-button' }} />\n\n<script lang=\"ts\">\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 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 icon button.\n     */\n    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';\n    /**\n     * Determines the size of the icon button.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * If `true`, disables the icon button, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, applies a \"ghost\" style to the icon button.\n     */\n    ghost?: boolean;\n    /**\n     * If `true`, the icon button gets an outlined style.\n     */\n    outlined?: boolean;\n    /**\n     * Specifies the button's HTML `type` attribute.\n     */\n    type?: 'button' | 'reset' | 'submit';\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    type = 'button',\n    ghost,\n    outlined,\n    disabled,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<button\n  class={[\n    'mc-button',\n    'mc-button--icon-button',\n    `mc-button--${size}`,\n    `mc-button--${appearance}`,\n    ghost && 'mc-button--ghost',\n    outlined && 'mc-button--outlined',\n  ]}\n  {disabled}\n  {type}\n  {...attrs}\n>\n  <slot name=\"icon\" />\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["appearance","size","type","ghost","$.prop","$$props","outlined","disabled","attrs","$.rest_props"],"mappings":";;qnWAAA,gBAqCI,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,EACLG,EAAAC,EAAAJ,EAAA,0JANU,WAAU,6CAChB,IAAG,6CACH,SAAQ,4LAUf,YACA,uCACcJ,EAAI,CAAA,iBACJD,EAAU,CAAA,GACxBG,EAAK,GAAI,mBACTG,KAAY,gDAIVE,sFAbN"}

package/dist/components/iconbutton/IconButton.stories.d.ts

@@ -1,12 +1,12 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * Icon Buttons are used to trigger actions where an icon is preferable over text.
- * The `MIconButton` component is the **Svelte / WebComponent** implementation of the **Icon 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;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '@mozaic-ds/icons-svelte/custom-elements/ChevronRight20/ChevronRight20.js';
+import '@mozaic-ds/icons-svelte/custom-elements/ChevronRight32/ChevronRight32.js';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Standard: Story;
+export declare const Outline: Story;
+export declare const Ghost: Story;
+export declare const SizeS: Story;
+export declare const SizeL: Story;
 //# sourceMappingURL=IconButton.stories.d.ts.map

package/dist/components/iconbutton/IconButton.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/iconbutton/IconButton.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAI1D;;;;GAIG;wBAWE,IAAI;AATT,wBASU;AAsBV,eAAO,MAAM,MAAM,KAAoB,CAAC;AAUxC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAY1C,eAAO,MAAM,KAAK,KAAoB,CAAC"}
+{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/iconbutton/IconButton.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,0EAA0E,CAAC;AAClF,OAAO,0EAA0E,CAAC;AAElF,QAAA,MAAM,IAAI,EAAE,IAiCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC"}

package/dist/components/iconbutton/IconButton.stories.js

@@ -1,75 +1,59 @@
-import { action } from 'storybook/actions';
-import { userEvent, within, expect } from 'storybook/test';
-import * as ButtonStories from '../button/Button.stories';
-/**
- * Icon Buttons are used to trigger actions where an icon is preferable over text.
- * The `MIconButton` component is the **Svelte / WebComponent** implementation of the **Icon 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';
+import '@mozaic-ds/icons-svelte/custom-elements/ChevronRight20/ChevronRight20.js';
+import '@mozaic-ds/icons-svelte/custom-elements/ChevronRight32/ChevronRight32.js';
+const meta = {
     title: 'Action/Icon Button',
-    tags: ['autodocs', 'new'],
+    component: 'm-icon-button',
+    tags: ['v2'],
     args: {
-        ...ButtonStories.default.args,
+        icon: '<chevron-right-24 slot="icon"></chevron-right-24>',
     },
     argTypes: {
-        ...ButtonStories.default.argTypes,
-    },
-};
-const Template = (args) => {
-    const primary = document.createElement('m-icon-button');
-    primary.setAttribute('data-testid', args.label || 'Primary');
-    primary.setAttribute('type', args.type);
-    primary.setAttribute('appearance', args.appearance || 'standard');
-    primary.setAttribute('size', args.size);
-    const icon = document.createElement('chevron-right-24');
-    icon.setAttribute('slot', 'icon');
-    icon.setAttribute('style', 'height: 100%');
-    primary.appendChild(icon);
-    primary.addEventListener('click', action('click'));
-    if (args.outlined)
-        primary.setAttribute('outlined', 'true');
-    if (args.ghost)
-        primary.setAttribute('ghost', 'true');
-    if (args.disabled)
-        primary.setAttribute('disabled', 'true');
-    return primary;
-};
-export const Filled = Template.bind({});
-Filled.args = {};
-Filled.play = async ({ canvasElement }) => {
-    const MIconButton = canvasElement.querySelector('m-icon-button');
-    const button = MIconButton?.shadowRoot.querySelector('button');
-    expect(button).not.toBeNull();
-    await userEvent.click(button);
-    expect(MIconButton).toHaveAttribute('appearance', 'standard');
-};
-export const Outlined = Template.bind({});
-Outlined.args = {
-    outlined: true,
-};
-Outlined.play = async ({ canvasElement }) => {
-    const MIconButton = canvasElement.querySelector('m-icon-button');
-    const button = MIconButton?.shadowRoot.querySelector('button');
-    expect(button).not.toBeNull();
-    await userEvent.click(button);
-    expect(MIconButton).toHaveAttribute('outlined', 'true');
-};
-export const Ghost = Template.bind({});
-Ghost.args = {
-    ghost: true,
-};
-Ghost.argTypes = {
-    iconmode: {
-        table: {
-            disable: true,
+        appearance: {
+            control: 'radio',
+            options: ['danger', 'accent', 'inverse', 'standard'],
         },
+        size: {
+            control: 'radio',
+            options: ['s', 'm', 'l'],
+        },
+        type: {
+            control: 'radio',
+            options: ['button', 'reset', 'submit'],
+        },
+    },
+    render: (args) => html `
+    <m-icon-button
+      appearance=${ifDefined(args.appearance)}
+      size=${ifDefined(args.size)}
+      disabled=${ifDefined(args.disabled)}
+      ghost=${ifDefined(args.ghost)}
+      outlined=${ifDefined(args.outlined)}
+      type=${ifDefined(args.type)}
+    >
+      ${unsafeHTML(ifDefined(args.icon))}
+    </m-icon-button>
+  `,
+};
+export default meta;
+export const Standard = {};
+export const Outline = {
+    args: { outlined: true },
+};
+export const Ghost = {
+    args: { ghost: true },
+};
+export const SizeS = {
+    args: {
+        size: 's',
+        icon: '<chevron-right-20 slot="icon"></chevron-right-20>',
     },
 };
-Ghost.play = async ({ canvasElement }) => {
-    const MIconButton = canvasElement.querySelector('m-icon-button');
-    const button = MIconButton?.shadowRoot.querySelector('button');
-    expect(button).not.toBeNull();
-    await userEvent.click(button);
-    expect(MIconButton).toHaveAttribute('ghost', 'true');
+export const SizeL = {
+    args: {
+        size: 'l',
+        icon: '<chevron-right-32 slot="icon"></chevron-right-32>',
+    },
 };

package/dist/components/iconbutton/IconButton.svelte

@@ -1,58 +1,62 @@
 <svelte:options customElement={{ tag: 'm-icon-button' }} />
 
 <script lang="ts">
-  import type { ButtonSize, ButtonStyle, ButtonType } from '../button/button.types';
-
+  /**
+   * 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.
+   *
+   * @slot icon - Use this slot to insert an icon for the Button.
+   */
   interface Props {
-    appearance?: ButtonStyle | undefined;
-    size?: ButtonSize;
+    [key: string]: any;
+    /**
+     * Defines the visual style of the icon button.
+     */
+    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';
+    /**
+     * Determines the size of the icon button.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * If `true`, disables the icon button, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, applies a "ghost" style to the icon button.
+     */
     ghost?: boolean;
+    /**
+     * If `true`, the icon button gets an outlined style.
+     */
     outlined?: boolean;
-    iconname?: string;
-    disabled?: boolean;
-    type?: ButtonType;
-    [key: string]: any;
+    /**
+     * Specifies the button's HTML `type` attribute.
+     */
+    type?: 'button' | 'reset' | 'submit';
   }
 
   let {
     appearance = 'standard',
     size = 'm',
-    ghost = false,
-    outlined = false,
-    iconname,
-    disabled = false,
     type = 'button',
-    ...events
+    ghost,
+    outlined,
+    disabled,
+    ...attrs
   }: Props = $props();
-
-  function generateIconName(size: ButtonSize, iconName: string): string {
-    let iconSize: string;
-
-    switch (size) {
-      case 's':
-        iconSize = '20px';
-        break;
-      case 'm':
-        iconSize = '24px';
-        break;
-      case 'l':
-        iconSize = '32px';
-        break;
-    }
-
-    return `${iconName} size="${iconSize}" `;
-  }
 </script>
 
 <button
-  class="mc-button mc-button--icon-button {size
-    ? `mc-button--${size}`
-    : ''} {appearance ? `mc-button--${appearance}` : ''}"
-  class:mc-button--ghost={ghost}
-  class:mc-button--outlined={outlined}
+  class={[
+    'mc-button',
+    'mc-button--icon-button',
+    `mc-button--${size}`,
+    `mc-button--${appearance}`,
+    ghost && 'mc-button--ghost',
+    outlined && 'mc-button--outlined',
+  ]}
   {disabled}
   {type}
-  {...events}
+  {...attrs}
 >
   <slot name="icon" />
 </button>

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

@@ -1,13 +1,34 @@
-import type { ButtonSize, ButtonStyle, ButtonType } from '../button/button.types';
+/**
+ * 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.
+ *
+ * @slot icon - Use this slot to insert an icon for the Button.
+ */
 interface Props {
-    appearance?: ButtonStyle | undefined;
-    size?: ButtonSize;
+    [key: string]: any;
+    /**
+     * Defines the visual style of the icon button.
+     */
+    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';
+    /**
+     * Determines the size of the icon button.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * If `true`, disables the icon button, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, applies a "ghost" style to the icon button.
+     */
     ghost?: boolean;
+    /**
+     * If `true`, the icon button gets an outlined style.
+     */
     outlined?: boolean;
-    iconname?: string;
-    disabled?: boolean;
-    type?: ButtonType;
-    [key: string]: any;
+    /**
+     * Specifies the button's HTML `type` attribute.
+     */
+    type?: 'button' | 'reset' | 'submit';
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/iconbutton/IconButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAGhF,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA+CH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,UAAU;;;;UAAqF,CAAC;AACpF,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/iconbutton/IconButton.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC1D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CACtC;AAgCH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,UAAU;;;;UAAqF,CAAC;AACpF,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}