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

package/dist/components/field/README.md

@@ -0,0 +1,24 @@
+# `m-field`
+
+A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the form field, used to associate the label with the form element. | `string` |   |
+| `label*` | The text displayed as the label for the form field. | `string` |   |
+| `requirementtext` | Additional text displayed alongside the label, typically used to indicate if the form field is required or optional | `string` |   |
+| `helptext` | Text shown below the form field to provide additional context or instructions for the user. | `string` |   |
+| `helpid` | The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._ | `string` |   |
+| `isvalid` | If `true`, applies a valid state to the form field. | `boolean` |   |
+| `isinvalid` | If `true`, applies an invalid state to the form field. | `boolean` |   |
+| `messageid` | The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._ | `string` |   |
+| `message` | message displayed when the form field has a valid or invalid state, usually indicating validation or errors. | `string` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `default` | Use this slot to insert the form element of your choice |
+

package/dist/components/flag/Flag.js

@@ -1,7 +1,4 @@
-import{c as d,p as i,a as p,b as m,f as g,D as u,d as l,h as v,i as h,j as y,r as n}from"../../custom-element.js";import{s as w}from"../../slot.js";import{b}from"../../attributes.js";var _=g('<div><span class="mc-flag__label"><!></span></div>');const k={hash:"svelte-17yclwp",code:`/**
+import{c as v,p,a as u,b as c,f as m,t as b,i as h,j as x,k as o,d as f,r as g,e as k,g as _,h as w}from"../../custom-element.js";var y=m('<div><span class="mc-flag__label"> </span></div>');const z={hash:"svelte-1e4tn4t",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-flag.svelte-17yclwp {padding:0 0.5rem;border-radius:0.125rem;white-space:nowrap;font-size:0.875rem;font-weight:400;line-height:1.3;height:1.5rem;display:inline-flex;align-items:center;color:#ffffff;background-color:#191919;}.mc-flag--accent.svelte-17yclwp {color:#ffffff;background-color:#117f03;}.mc-flag--danger.svelte-17yclwp {color:#ffffff;background-color:#c61112;}.mc-flag--inverse.svelte-17yclwp {color:#000000;background-color:#ffffff;}`};function $(s,e){i(e,!0),p(s,k);let a=m(e,"appearance",7,"standard"),f=u(e,["$$slots","$$events","$$legacy","$$host","appearance"]);var t=_();b(t,()=>({class:`mc-flag ${a()!=="standard"?`mc-flag--${a()}`:""}`,...f}),void 0,void 0,"svelte-17yclwp");var r=l(t),c=l(r);return w(c,e,"default",{}),n(r),n(t),v(s,t),h({get appearance(){return a()},set appearance(o="standard"){a(o),y()}})}customElements.define("m-flag",d($,{appearance:{}},["default"],[],!0));
+ */.mc-flag.svelte-1e4tn4t {padding:0 0.5rem;border-radius:var(--radius-xs, 0.125rem);white-space:nowrap;font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);height:1.5rem;display:inline-flex;align-items:center;color:var(--flag-color-text-standard, #ffffff);background-color:var(--flag-color-background-standard, #191919);}.mc-flag--accent.svelte-1e4tn4t {color:var(--flag-color-text-accent, #ffffff);background-color:var(--flag-color-background-accent, #117f03);}.mc-flag--danger.svelte-1e4tn4t {color:var(--flag-color-text-danger, #ffffff);background-color:var(--flag-color-background-danger, #c61112);}.mc-flag--inverse.svelte-1e4tn4t {color:var(--flag-color-text-inverse, #000000);background-color:var(--flag-color-background-inverse, #ffffff);}`};function j(n,a){p(a,!0),u(n,z);let r=c(a,"appearance",7,"standard"),t=c(a,"label",7);var d={get appearance(){return r()},set appearance(l="standard"){r(l),o()},get label(){return t()},set label(l){t(l),o()}},e=y(),s=f(e),i=f(s,!0);return g(s),g(e),b(()=>{k(e,1,_(["mc-flag",`mc-flag--${r()}`]),"svelte-1e4tn4t"),w(i,t())}),h(n,e),x(d)}customElements.define("m-flag",v(j,{appearance:{},label:{}},[],[],!0));
 //# sourceMappingURL=Flag.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Flag.js","sources":["../../../src/components/flag/Flag.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-flag' }} />\n\n<script lang=\"ts\">\n  interface Props {\n    /**\n     * Style du Flag\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n\n    [key: string]: any;\n  }\n\n  let { appearance = 'standard', ...events }: Props = $props();\n</script>\n\n<div\n  class={`mc-flag ${appearance !== 'standard' ? `mc-flag--${appearance}` : ''}`}\n  {...events}\n>\n  <span class=\"mc-flag__label\">\n    <slot />\n  </span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/flag';\n</style>\n"],"names":["appearance","events","$.rest_props","$$props"],"mappings":";;;;;qdAAA,gBAYQ,IAAAA,qBAAa,UAAU,EAAKC,EAAMC,EAAAC,EAAA,CAAA,UAAA,WAAA,WAAA,SAAA,YAAA,CAAA,sBAItB,MAAA,WAAAH,EAAU,IAAK,WAAyB,YAAAA,MAAe,EAAE,MACvEC,mJALe,WAAU,YAC/B"}
+{"version":3,"file":"Flag.js","sources":["../../../src/components/flag/Flag.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-flag' }} />\n\n<script lang=\"ts\">\n  /**\n   * 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.\n   */\n  interface Props {\n    /**\n     * Label of the Flag.\n     */\n    label: string;\n    /**\n     * Allows to define the Flag appearance.\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n  }\n\n  let { appearance = 'standard', label }: Props = $props();\n</script>\n\n<div class={['mc-flag', `mc-flag--${appearance}`]}>\n  <span class=\"mc-flag__label\">\n    {label}\n  </span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/flag';\n</style>\n"],"names":["appearance","label","$.prop","$$props","$.set_class","div","$.clsx"],"mappings":";;q0BAAA,gBAiBQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,uDAAjB,WAAU,0GAGlBC,EAAAC,EAAA,EAAAC,EAAA,CAAA,sBAAuBN,EAAU,CAAA,EAAA,CAAA,EAAA,gBAAA,MAEzCC,GAAK,eAJV"}

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

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Flag from './Flag.svelte';
+describe('m-flag component', () => {
+    it('renders with default appearance', () => {
+        const { container, getByText } = render(Flag, {
+            props: { label: 'New' },
+        });
+        const flag = container.querySelector('.mc-flag');
+        expect(flag).toBeTruthy();
+        expect(flag?.classList.contains('mc-flag--standard')).toBe(true);
+        const label = getByText('New');
+        expect(label).toBeInTheDocument();
+        expect(label.classList.contains('mc-flag__label')).toBe(true);
+    });
+    it('applies the correct appearance class', () => {
+        const { container } = render(Flag, {
+            props: { label: 'Sale', appearance: 'danger' },
+        });
+        const flag = container.querySelector('.mc-flag');
+        expect(flag).toBeTruthy();
+        expect(flag?.classList.contains('mc-flag--danger')).toBe(true);
+    });
+    it('renders the correct label text', () => {
+        const { getByText } = render(Flag, {
+            props: { label: 'Limited Offer' },
+        });
+        expect(getByText('Limited Offer')).toBeInTheDocument();
+    });
+});

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

@@ -1,19 +1,9 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * 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.
- */
-declare const _default: Meta;
-export default _default;
-export declare const Standard: any;
-export declare const Accent: any;
-export declare const Danger: any;
-export declare const Inverse: any;
-/**
- * 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 declare const ClickableHost: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Standard: Story;
+export declare const Accent: Story;
+export declare const Danger: Story;
+export declare const Inverse: Story;
 //# sourceMappingURL=Flag.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Flag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/flag/Flag.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBAyBE,IAAI;AAvBT,wBAuBU;AAiBV,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAmB1C,eAAO,MAAM,MAAM,KAAoB,CAAC;AAexC,eAAO,MAAM,MAAM,KAAoB,CAAC;AAexC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAoBzC;;;GAGG;AACH,eAAO,MAAM,aAAa,KAAoB,CAAC"}
+{"version":3,"file":"Flag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/flag/Flag.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAkBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

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

@@ -1,113 +1,35 @@
-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',
     },
-};
-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');
-};
-/**
- * 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',
-};
-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');
+    render: (args) => html `
+    <m-flag
+      label=${ifDefined(args.label)}
+      appearance=${ifDefined(args.appearance)}
+    ></m-flag>
+  `,
+};
+export default meta;
+export const Standard = {};
+export const Accent = {
+    args: { appearance: 'accent' },
+};
+export const Danger = {
+    args: { appearance: 'danger' },
+};
+export const Inverse = {
+    globals: {
+        backgrounds: { value: 'inverse' },
+    },
+    args: { appearance: 'inverse' },
 };

package/dist/components/flag/Flag.svelte

@@ -1,55 +1,54 @@
 <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>
 
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-flag {
   padding: 0 0.5rem;
-  border-radius: 0.125rem;
+  border-radius: var(--radius-xs, 0.125rem);
   white-space: nowrap;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.3;
+  font-size: var(--font-size-100, 0.875rem);
+  font-weight: var(--font-weight-regular, 400);
+  line-height: var(--line-height-s, 1.3);
   height: 1.5rem;
   display: inline-flex;
   align-items: center;
-  color: #ffffff;
-  background-color: #191919;
+  color: var(--flag-color-text-standard, #ffffff);
+  background-color: var(--flag-color-background-standard, #191919);
 }
 .mc-flag--accent {
-  color: #ffffff;
-  background-color: #117f03;
+  color: var(--flag-color-text-accent, #ffffff);
+  background-color: var(--flag-color-background-accent, #117f03);
 }
 .mc-flag--danger {
-  color: #ffffff;
-  background-color: #c61112;
+  color: var(--flag-color-text-danger, #ffffff);
+  background-color: var(--flag-color-background-danger, #c61112);
 }
 .mc-flag--inverse {
-  color: #000000;
-  background-color: #ffffff;
+  color: var(--flag-color-text-inverse, #000000);
+  background-color: var(--flag-color-background-inverse, #ffffff);
 }</style>

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,7 +1,4 @@
-import{c as f,p as v,a as x,b as r,f as h,D as k,d as p,h as w,i as y,j as e,r as _}from"../../custom-element.js";import{s as z}from"../../slot.js";import{b as D,C as S}from"../../attributes.js";var j=h("<button><!></button>");const C={hash:"svelte-b2a6xr",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.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-button.svelte-b2a6xr {color:#ffffff;background-color:#464e63;font-weight:600;padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:0.25rem;transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button.svelte-b2a6xr:hover {background-color:#343b4c;}.mc-button.svelte-b2a6xr:active {background-color:#242938;}.mc-button.svelte-b2a6xr:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button__label.svelte-b2a6xr {font-size:1rem;}.mc-button__icon.svelte-b2a6xr {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-b2a6xr:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button.svelte-b2a6xr:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-button--s.svelte-b2a6xr {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-b2a6xr {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-b2a6xr {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-b2a6xr {padding:0.25rem;}.mc-button--outlined.svelte-b2a6xr {color:#242938;border-color:#8891aa;background-color:#ffffff;}.mc-button--outlined.svelte-b2a6xr:hover {background-color:#eff1f6;}.mc-button--outlined.svelte-b2a6xr:active {background-color:#c9d0de;}.mc-button--outlined.svelte-b2a6xr:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--ghost.svelte-b2a6xr {color:#242938;background-color:rgba(255, 255, 255, 0.01);}.mc-button--ghost.svelte-b2a6xr:hover {background-color:rgba(70, 78, 99, 0.1);}.mc-button--ghost.svelte-b2a6xr:active {background-color:rgba(70, 78, 99, 0.2);}.mc-button--ghost.svelte-b2a6xr:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--accent.svelte-b2a6xr {color:#ffffff;background-color:#117f03;}.mc-button--accent.svelte-b2a6xr:hover {background-color:#006902;}.mc-button--accent.svelte-b2a6xr:active {background-color:#035010;}.mc-button--accent.svelte-b2a6xr:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--danger.svelte-b2a6xr {color:#ffffff;background-color:#c61112;}.mc-button--danger.svelte-b2a6xr:hover {background-color:#8c0003;}.mc-button--danger.svelte-b2a6xr:active {background-color:#530000;}.mc-button--danger.svelte-b2a6xr:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--inverse.svelte-b2a6xr {--focus-color-mid: #000000;--focus-color-outer: #ffffff;color:#242938;background-color:#ffffff;}.mc-button--inverse.svelte-b2a6xr:hover {background-color:#e6e6e6;}.mc-button--inverse.svelte-b2a6xr:active {background-color:#cccccc;}.mc-button--inverse.svelte-b2a6xr:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--icon-button.svelte-b2a6xr {border-radius:100%;padding:0;}.mc-button--outlined.mc-button--standard.svelte-b2a6xr {color:#242938;border-color:#8891aa;background-color:#ffffff;}.mc-button--outlined.mc-button--standard.svelte-b2a6xr:hover {background-color:#eff1f6;}.mc-button--outlined.mc-button--standard.svelte-b2a6xr:active {background-color:#c9d0de;}.mc-button--outlined.mc-button--standard.svelte-b2a6xr:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-b2a6xr {color:#117f03;border-color:#78be20;background-color:#ffffff;}.mc-button--outlined.mc-button--accent.svelte-b2a6xr:hover {background-color:#ebf5de;}.mc-button--outlined.mc-button--accent.svelte-b2a6xr:active {background-color:#c5e39e;}.mc-button--outlined.mc-button--accent.svelte-b2a6xr:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-b2a6xr {color:#c61112;border-color:#ef5f5c;background-color:#ffffff;}.mc-button--outlined.mc-button--danger.svelte-b2a6xr:hover {background-color:#fdeaea;}.mc-button--outlined.mc-button--danger.svelte-b2a6xr:active {background-color:#f8bcbb;}.mc-button--outlined.mc-button--danger.svelte-b2a6xr:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-b2a6xr {color:#ffffff;border-color:#ffffff;background-color:rgba(255, 255, 255, 0.01);}.mc-button--outlined.mc-button--inverse.svelte-b2a6xr:hover {background-color:rgba(255, 255, 255, 0.1);}.mc-button--outlined.mc-button--inverse.svelte-b2a6xr:active {background-color:rgba(255, 255, 255, 0.2);}.mc-button--outlined.mc-button--inverse.svelte-b2a6xr:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-b2a6xr {color:#242938;background-color:rgba(255, 255, 255, 0.01);}.mc-button--ghost.mc-button--standard.svelte-b2a6xr:hover {background-color:rgba(70, 78, 99, 0.1);}.mc-button--ghost.mc-button--standard.svelte-b2a6xr:active {background-color:rgba(70, 78, 99, 0.2);}.mc-button--ghost.mc-button--standard.svelte-b2a6xr:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-b2a6xr {color:#117f03;background-color:rgba(255, 255, 255, 0.01);}.mc-button--ghost.mc-button--accent.svelte-b2a6xr:hover {background-color:rgba(17, 127, 3, 0.1);}.mc-button--ghost.mc-button--accent.svelte-b2a6xr:active {background-color:rgba(17, 127, 3, 0.2);}.mc-button--ghost.mc-button--accent.svelte-b2a6xr:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-b2a6xr {color:#c61112;background-color:rgba(255, 255, 255, 0.01);}.mc-button--ghost.mc-button--danger.svelte-b2a6xr:hover {background-color:rgba(198, 17, 18, 0.1);}.mc-button--ghost.mc-button--danger.svelte-b2a6xr:active {background-color:rgba(198, 17, 18, 0.2);}.mc-button--ghost.mc-button--danger.svelte-b2a6xr:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-b2a6xr {color:#ffffff;background-color:rgba(255, 255, 255, 0.01);}.mc-button--ghost.mc-button--inverse.svelte-b2a6xr:hover {background-color:rgba(255, 255, 255, 0.1);}.mc-button--ghost.mc-button--inverse.svelte-b2a6xr:active {background-color:rgba(255, 255, 255, 0.2);}.mc-button--ghost.mc-button--inverse.svelte-b2a6xr:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}`};function I(u,t){v(t,!0),x(u,C);let c=r(t,"appearance",7,"standard"),n=r(t,"size",7,"m"),b=r(t,"ghost",7,!1),l=r(t,"outlined",7,!1),i=r(t,"iconname",7),d=r(t,"disabled",7,!1),s=r(t,"type",7,"button"),m=k(t,["$$slots","$$events","$$legacy","$$host","appearance","size","ghost","outlined","iconname","disabled","type"]);var a=j();D(a,o=>({class:`mc-button mc-button--icon-button ${n()?`mc-button--${n()}`:""} ${c()?`mc-button--${c()}`:""}`,disabled:d(),type:s(),...m,[S]:o}),[()=>({"mc-button--ghost":b(),"mc-button--outlined":l()})],void 0,"svelte-b2a6xr");var g=p(a);return z(g,t,"icon",{}),_(a),w(u,a),y({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 b()},set ghost(o=!1){b(o),e()},get outlined(){return l()},set outlined(o=!1){l(o),e()},get iconname(){return i()},set iconname(o){i(o),e()},get disabled(){return d()},set disabled(o=!1){d(o),e()},get type(){return s()},set type(o="button"){s(o),e()}})}customElements.define("m-icon-button",f(I,{appearance:{},size:{},ghost:{},outlined:{},iconname:{},disabled:{},type:{}},["icon"],[],!0));export{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":";;;;;+zNAAA,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,6KAuBoCL,EACvB,EAAA,cAAAA,EAAI,IAClB,EAAE,IAAGD,EAAU,EAAiB,cAAAA,MAAe,EAAE,4BAKjDS,oCAJoBP,EAAK,wBACFC,EAAQ,6HAlCpB,WAAU,6CAChB,IAAG,+CACF,GAAK,qDACF,GAAK,0GAEL,GAAK,6CACT,SAAQ,YAqBnB"}
+{"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"}