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

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

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

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

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

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

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

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

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

package/dist/components/button/Button.svelte

@@ -1,80 +1,106 @@
 <svelte:options customElement={{ tag: 'm-button' }} />
 
 <script lang="ts">
-  import type {
-    ButtonIconMode,
-    ButtonSize,
-    ButtonStyle,
-    ButtonType,
-  } from './button.types';
-
   import Loader from '../loader/Loader.svelte';
-
+  /**
+   * 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 default - The content displayed in the button.
+   * @slot icon - Use this slot to insert an icon for the Button.
+   */
   interface Props {
-    appearance?: ButtonStyle;
-    size?: ButtonSize;
+    [key: string]: any;
+    /**
+     * Defines the visual style of the button.
+     */
+    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';
+    /**
+     * Determines the size of the button.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * If `true`, disables the button, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, applies a "ghost" style to the button, typically a transparent background with a border.
+     */
     ghost?: boolean;
+    /**
+     * If `true`, the button gets an outlined style, usually with just the border and no solid background.
+     */
     outlined?: boolean;
-    iconmode?: ButtonIconMode;
-    disabled?: boolean;
-    type?: ButtonType;
+    /**
+     * Controls the positioning of an icon in the button.
+     */
+    iconposition?: 'left' | 'right' | 'only';
+    /**
+     * Specifies the button's HTML `type` attribute.
+     */
+    type?: 'button' | 'reset' | 'submit';
+    /**
+     * If `true`, a loading state is displayed.
+     */
     isloading?: boolean;
-    hasiconslot?: boolean;
-    [key: string]: any;
   }
 
   let {
     appearance = 'standard',
     size = 'm',
-    ghost = false,
-    outlined = false,
-    iconmode,
-    disabled = false,
     type = 'button',
-    isloading = false,
-    hasiconslot = false,
-    ...events
+    ghost,
+    outlined,
+    disabled,
+    isloading,
+    iconposition,
+    ...attrs
   }: Props = $props();
 </script>
 
 <button
-  class={`mc-button mc-button--${size} mc-button--${appearance}`}
-  class:mc-button--ghost={ghost}
-  class:mc-button--outlined={outlined}
-  class:mc-button--icon-only={iconmode === 'only'}
-  class:mc-button--loading={isloading}
+  class={[
+    'mc-button',
+    `mc-button--${size}`,
+    `mc-button--${appearance}`,
+    ghost && 'mc-button--ghost',
+    outlined && 'mc-button--outlined',
+    isloading && 'mc-button--loading',
+    iconposition === 'only' && 'mc-button--icon-only',
+  ]}
   {disabled}
   {type}
-  {...events}
+  {...attrs}
 >
+  {#if iconposition === 'left' && !isloading}
+    <span class="mc-button__icon">
+      <slot name="icon" />
+    </span>
+  {/if}
+
   {#if isloading}
-    <Loader
-      theme="standard"
-      style="color: currentColor; position: absolute;"
-      size="m"
-      text=""
-    />
+    <span
+      class="mc-button__icon"
+      style="color: currentColor;position: absolute; visibility: visible;"
+    >
+      <Loader appearance={'inverse'} size="s" />
+    </span>
   {/if}
 
-  {#if iconmode === 'left' || iconmode === 'only'}
+  {#if iconposition === 'only'}
     <span class="mc-button__icon">
-      {#if hasiconslot}
-        <slot name="icon" />
-      {/if}
+      <slot name="icon" />
     </span>
   {/if}
 
-  {#if iconmode !== 'only'}
-    <span class="mc-button__label" class:hidden={isloading}>
+  {#if iconposition !== 'only'}
+    <span class={['mc-button__label', isloading && 'hidden']}>
       <slot />
     </span>
   {/if}
 
-  {#if iconmode === 'right'}
+  {#if iconposition === 'right'}
     <span class="mc-button__icon">
-      {#if hasiconslot}
-        <slot name="icon" />
-      {/if}
+      <slot name="icon" />
     </span>
   {/if}
 </button>
@@ -421,15 +447,6 @@
   cursor: not-allowed;
 }
 
-.mc-button__icon {
-  pointer-events: none;
-}
-
 .hidden {
   visibility: hidden;
-}
-
-.loader-style {
-  color: currentColor;
-  position: absolute;
 }</style>

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

@@ -1,15 +1,43 @@
-import type { ButtonIconMode, ButtonSize, ButtonStyle, ButtonType } from './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 default - The content displayed in the button.
+ * @slot icon - Use this slot to insert an icon for the Button.
+ */
 interface Props {
-    appearance?: ButtonStyle;
-    size?: ButtonSize;
+    [key: string]: any;
+    /**
+     * Defines the visual style of the button.
+     */
+    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';
+    /**
+     * Determines the size of the button.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * If `true`, disables the button, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, applies a "ghost" style to the button, typically a transparent background with a border.
+     */
     ghost?: boolean;
+    /**
+     * If `true`, the button gets an outlined style, usually with just the border and no solid background.
+     */
     outlined?: boolean;
-    iconmode?: ButtonIconMode;
-    disabled?: boolean;
-    type?: ButtonType;
+    /**
+     * Controls the positioning of an icon in the button.
+     */
+    iconposition?: 'left' | 'right' | 'only';
+    /**
+     * Specifies the button's HTML `type` attribute.
+     */
+    type?: 'button' | 'reset' | 'submit';
+    /**
+     * If `true`, a loading state is displayed.
+     */
     isloading?: boolean;
-    hasiconslot?: boolean;
-    [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> & {

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

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,cAAc,EACd,UAAU,EACV,WAAW,EACX,UAAU,EACX,MAAM,gBAAgB,CAAC;AAKxB,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAuDH,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,MAAM;;;;;;;;UAAqF,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.svelte.ts"],"names":[],"mappings":"AAKE;;;;;GAKG;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,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACzC;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAgEH,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,MAAM;;;;;;;;UAAqF,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}

package/dist/components/button/README.md

@@ -0,0 +1,26 @@
+# `m-button`
+
+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.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `appearance` | Defines the visual style of the button. | `'standard'` `'accent'` `'danger'` `'inverse'` | `standard` |
+| `size` | Determines the size of the button. | `'s'` `'m'` `'l'` | `m` |
+| `disabled` | If `true`, disables the button, making it non-interactive. | `boolean` |   |
+| `ghost` | If `true`, applies a "ghost" style to the button, typically a transparent background with a border. | `boolean` |   |
+| `outlined` | If `true`, the button gets an outlined style, usually with just the border and no solid background. | `boolean` |   |
+| `iconposition` | Controls the positioning of an icon in the button. | `'left'` `'right'` `'only'` |   |
+| `type` | Specifies the button's HTML `type` attribute. | `'button'` `'reset'` `'submit'` | `button` |
+| `isloading` | If `true`, a loading state is displayed. | `boolean` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `icon` | Use this slot to insert an icon for the Button. |
+| `icon` | Use this slot to insert an icon for the Button. |
+| `default` | The content displayed in the button. |
+| `icon` | Use this slot to insert an icon for the Button. |
+

package/dist/components/callout/Callout.js

@@ -1,4 +1,4 @@
-import{c as j,p as C,a as D,b as m,f as E,d as t,s as r,t as S,h as q,i as A,j as u,r as l,e as B,u as F,g as h}from"../../custom-element.js";import{s as d}from"../../slot.js";var G=E('<section role="status"><div class="mc-callout__icon svelte-1pnlv3f"><!></div> <div class="mc-callout__content svelte-1pnlv3f"><h2 class="mc-callout__title svelte-1pnlv3f"> </h2> <p class="mc-callout__message svelte-1pnlv3f"> </p> <!> <div class="mc-callout__footer svelte-1pnlv3f"><!></div></div></section>');const H={hash:"svelte-1pnlv3f",code:`/**
+import{c as j,p as C,a as D,b as m,f as E,d as t,s as r,t as S,i as q,j as A,k as u,r as l,e as B,g as F,h}from"../../custom-element.js";import{s as d}from"../../slot.js";var G=E('<section role="status"><div class="mc-callout__icon svelte-1pnlv3f"><!></div> <div class="mc-callout__content svelte-1pnlv3f"><h2 class="mc-callout__title svelte-1pnlv3f"> </h2> <p class="mc-callout__message svelte-1pnlv3f"> </p> <!> <div class="mc-callout__footer svelte-1pnlv3f"><!></div></div></section>');const H={hash:"svelte-1pnlv3f",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* create columns */

package/dist/components/callout/Callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.js","sources":["../../../src/components/callout/Callout.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-callout' }} />\n\n<script lang=\"ts\">\n  /**\n   * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.\n   */\n  interface Props {\n    /**\n     * Title of the callout.\n     */\n    title: string;\n    /**\n     * Description of the callout.\n     */\n    description: string;\n    /**\n     * Allows to define the callout appearance.\n     */\n    appearance?: 'standard' | 'accent' | 'tips' | 'inverse';\n  }\n\n  let {\n    title,\n    description,\n    appearance = 'standard',\n  }: Props = $props();\n</script>\n\n<section class={[\"mc-callout\", `mc-callout--${appearance}`]} role=\"status\">\n  <div class=\"mc-callout__icon\">\n    <slot name=\"icon\"/>\n  </div>\n  <div class=\"mc-callout__content\">\n    <h2 class=\"mc-callout__title\">{ title }</h2>\n\n    <p class=\"mc-callout__message\">\n      { description }\n    </p>\n\n    <slot/>\n\n    <div class=\"mc-callout__footer\">\n      <slot name=\"footer\"/>\n    </div>\n  </div>\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/callout';\n\n  .mc-callout__footer:empty {\n    display: none;\n  }\n</style>\n"],"names":["title","$.prop","$$props","description","appearance","$.set_class","section","$.clsx"],"mappings":";;;;;i6CAAA,oBAsBIA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EACXE,qBAAa,UAAU,iKAAV,WAAU,0NAIVC,EAAAC,EAAA,EAAAC,EAAA,CAAA,4BAA6BH,EAAU,CAAA,EAAA,CAAA,EAAA,gBAAA,MAKpBJ,GAAK,MAGjCG,GAAW,eAVnB"}
+{"version":3,"file":"Callout.js","sources":["../../../src/components/callout/Callout.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-callout' }} />\n\n<script lang=\"ts\">\n  /**\n   * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.\n   *\n   * @slot icon - Use this slot to insert an icon.\n   * @slot default - Use this slot to insert custom content.\n   * @slot footer - Use this slot to insert a button or a link in the footer of the callout.\n   */\n  interface Props {\n    /**\n     * Title of the callout.\n     */\n    title: string;\n    /**\n     * Description of the callout.\n     */\n    description: string;\n    /**\n     * Allows to define the callout appearance.\n     */\n    appearance?: 'standard' | 'accent' | 'tips' | 'inverse';\n  }\n\n  let {\n    title,\n    description,\n    appearance = 'standard',\n  }: Props = $props();\n</script>\n\n<section class={[\"mc-callout\", `mc-callout--${appearance}`]} role=\"status\">\n  <div class=\"mc-callout__icon\">\n    <slot name=\"icon\"/>\n  </div>\n  <div class=\"mc-callout__content\">\n    <h2 class=\"mc-callout__title\">{ title }</h2>\n\n    <p class=\"mc-callout__message\">\n      { description }\n    </p>\n\n    <slot/>\n\n    <div class=\"mc-callout__footer\">\n      <slot name=\"footer\"/>\n    </div>\n  </div>\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/callout';\n\n  .mc-callout__footer:empty {\n    display: none;\n  }\n</style>\n"],"names":["title","$.prop","$$props","description","appearance","$.set_class","section","$.clsx"],"mappings":";;;;;i6CAAA,oBA0BIA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EACXE,qBAAa,UAAU,iKAAV,WAAU,0NAIVC,EAAAC,EAAA,EAAAC,EAAA,CAAA,4BAA6BH,EAAU,CAAA,EAAA,CAAA,EAAA,gBAAA,MAKpBJ,GAAK,MAGjCG,GAAW,eAVnB"}

package/dist/components/callout/Callout.spec.js

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Callout from './Callout.svelte';
+describe('m-callout component', () => {
+    const defaultProps = {
+        title: 'Helpful Tip',
+        description: 'This is a description for the callout.',
+    };
+    it('renders with default appearance "standard"', () => {
+        const { container, getByText } = render(Callout, { props: defaultProps });
+        const section = container.querySelector('section.mc-callout');
+        expect(section).toBeTruthy();
+        expect(section?.classList.contains('mc-callout--standard')).toBe(true);
+        expect(section).toHaveAttribute('role', 'status');
+        expect(getByText(defaultProps.title)).toBeTruthy();
+        expect(getByText(defaultProps.description)).toBeTruthy();
+        const footer = container.querySelector('.mc-callout__footer');
+        expect(footer).toBeTruthy();
+        expect(footer).toBeEmptyDOMElement();
+        expect(getComputedStyle(footer).display).toBe('none');
+    });
+    it('applies correct appearance class', () => {
+        const appearances = ['standard', 'accent', 'tips', 'inverse'];
+        appearances.forEach((appearance) => {
+            const { container, unmount } = render(Callout, {
+                props: { ...defaultProps, appearance },
+            });
+            const section = container.querySelector('section.mc-callout');
+            expect(section?.classList.contains(`mc-callout--${appearance}`)).toBe(true);
+            unmount();
+        });
+    });
+});

package/dist/components/callout/Callout.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/callout/Callout.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,kEAAkE,CAAC;AAC1E,OAAO,oEAAoE,CAAC;AAE5E,QAAA,MAAM,IAAI,EAAE,IAiFX,CAAC;AAEF,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,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAUpB,CAAC"}
+{"version":3,"file":"Callout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/callout/Callout.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,kEAAkE,CAAC;AAC1E,OAAO,oEAAoE,CAAC;AAE5E,QAAA,MAAM,IAAI,EAAE,IA0BX,CAAC;AAEF,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,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAUpB,CAAC"}