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

package/dist/components/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.svelte"],"sourcesContent":["<svelte:options customElement=\"m-link\" />\n\n<script lang=\"ts\">\n  import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';\n  interface Props {\n    href: string;\n    target: string;\n    appearance?: LinkStyle;\n    disabled?: boolean;\n    size?: LinkSize;\n    inline?: boolean;\n    iconposition?: LinkIconPosition | undefined;\n    [key: string]: any;\n  }\n\n  let {\n    href,\n    target,\n    appearance = undefined,\n    disabled = false,\n    size = 'm',\n    inline = false,\n    iconposition = undefined,\n    ...events\n  }: Props = $props();\n\n  function setClasses(\n    appearance: LinkStyle,\n    size: LinkSize,\n    inline: boolean,\n  ): string {\n    const classes = ['mc-link'];\n\n    if (appearance) {\n      classes.push(`mc-link--${appearance}`);\n    }\n    if (size) {\n      classes.push(`mc-link--${size}`);\n    }\n    if (inline) {\n      classes.push('mc-link--inline');\n    } else {\n      classes.push('mc-link--stand-alone');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<a\n  {href}\n  {target}\n  class=\"{setClasses(appearance, size, inline)} {disabled\n    ? 'is-disabled'\n    : ''} \"\n  {...events}\n>\n  {#if iconposition === 'left'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <span class=\"mc-link__label\">\n    <slot />\n  </span>\n  {#if iconposition === 'right'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n</a>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/link';\n</style>\n"],"names":["href","$.prop","$$props","target","appearance","disabled","size","inline","iconposition","events","$.rest_props","setClasses","classes","$$render","consequent","consequent_1"],"mappings":";;;;;k9CAAA,oBAgBIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAMF,EAAAC,EAAA,SAAA,CAAA,EACNE,qBAAa,MAAS,EACtBC,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,iBAAS,EAAK,EACdC,uBAAe,MAAS,EACrBC,EAAAC,EAAAR,EAAA,mHAGI,SAAAS,EACPP,EACAE,EACAC,EACQ,CACF,MAAAK,GAAW,SAAS,EAEtB,OAAAR,GACFQ,EAAQ,KAAI,YAAaR,CAAU,EAAA,EAEjCE,GACFM,EAAQ,KAAI,YAAaN,CAAI,EAAA,EAE3BC,EACFK,EAAQ,KAAK,iBAAiB,EAE9BA,EAAQ,KAAK,sBAAsB,EAE9BA,EAAQ,KAAK,GAAG,CACzB,0DAM+CP,IAC3C,cACA,EAAE,OACFI,IAHI,CAAA,IAAAE,EAAWP,EAAU,EAAEE,IAAMC,EAAM,CAAA,CAAA,uGAKtCC,MAAiB,QAAMK,EAAAC,CAAA,gIAQvBN,MAAiB,SAAOK,EAAAE,CAAA,sKA9Cd,OAAS,qDACX,GAAK,6CACT,IAAG,iDACD,GAAK,6DACC,OAAS,YAwB5B"}
+{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-link' }} />\n\n<script lang=\"ts\">\n  /**\n   * A link is an interactive text element used to navigate between pages, sections, or external resources. It is typically underlined and styled to indicate its clickable nature. Links can be standalone or embedded within text, and they may include icons to reinforce their purpose. They are essential for navigation and content referencing in web and application interfaces.\n   *\n   * @slot default - Use this slot to insert the textual content of the Link.\n   * @slot icon - Use this slot to insert an icon for the Link.\n   */\n  interface Props {\n    /**\n     * Position of the icon relative to the text.\n     */\n    iconposition?: 'left' | 'right';\n    /**\n     * Allows to define the link appearance.\n     */\n    appearance?: 'secondary' | 'accent' | 'inverse' | 'standard';\n    /**\n     * Allows to define the link size.\n     */\n    size?: 's' | 'm';\n    /**\n     * URL for the link.\n     */\n    href?: string;\n    /**\n     * Where to open the link.\n     */\n    target?: '_self' | '_blank' | '_parent' | '_top';\n    /**\n     * Specify wether the link is inline.\n     */\n    inline?: boolean;\n  }\n\n  let {\n    href,\n    target,\n    inline,\n    appearance = 'standard',\n    size = 's',\n    iconposition = 'left',\n  }: Props = $props();\n</script>\n\n<a\n  class={[\n    'mc-link',\n    `mc-link--${appearance}`,\n    `mc-link--${size}`,\n    inline && 'mc-link--inline',\n    !inline && 'mc-link--stand-alone',\n  ]}\n  {href}\n  {target}\n>\n  {#if iconposition === 'left'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <span class=\"mc-link__label\">\n    <slot />\n  </span>\n  {#if iconposition === 'right'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n</a>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/link';\n\n  .mc-link__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["href","$.prop","$$props","target","inline","appearance","size","iconposition","$$render","consequent","consequent_1"],"mappings":";;mzDAAA,oBAqCIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAMF,EAAAC,EAAA,SAAA,CAAA,EACNE,EAAMH,EAAAC,EAAA,SAAA,CAAA,EACNG,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,uBAAe,MAAM,sMAFR,WAAU,6CAChB,IAAG,6DACK,OAAM,2FAelBA,EAAY,IAAK,QAAMC,EAAAC,CAAA,gIAQvBF,EAAY,IAAK,SAAOC,EAAAE,CAAA,gCAjB3B,sBACYL,EAAU,CAAA,eACVC,EAAI,CAAA,GAChBF,EAAM,GAAI,kBACT,CAAAA,EAAM,GAAI,yFARf"}

package/dist/components/link/Link.spec.js

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Link from './Link.svelte';
+describe('m-link component', () => {
+    it('renders with default props and correct classes', () => {
+        const { container } = render(Link, {
+            props: {
+                href: 'https://example.com',
+            },
+        });
+        const link = container.querySelector('a.mc-link');
+        expect(link).toBeTruthy();
+        expect(link).toHaveAttribute('href', 'https://example.com');
+        expect(link.classList.contains('mc-link--standard')).toBe(true);
+        expect(link.classList.contains('mc-link--s')).toBe(true);
+        expect(link.classList.contains('mc-link--stand-alone')).toBe(true);
+    });
+    it('renders with inline class when inline prop is true', () => {
+        const { container } = render(Link, {
+            props: {
+                href: 'https://example.com',
+                inline: true,
+            },
+        });
+        const link = container.querySelector('a.mc-link');
+        expect(link.classList.contains('mc-link--inline')).toBe(true);
+        expect(link.classList.contains('mc-link--stand-alone')).toBe(false);
+    });
+    it('applies appearance and size classes correctly', () => {
+        const { container } = render(Link, {
+            props: {
+                href: 'https://example.com',
+                appearance: 'accent',
+                size: 'm',
+            },
+        });
+        const link = container.querySelector('a.mc-link');
+        expect(link.classList.contains('mc-link--accent')).toBe(true);
+        expect(link.classList.contains('mc-link--m')).toBe(true);
+    });
+    it('sets target attribute correctly', () => {
+        const { container } = render(Link, {
+            props: {
+                href: 'https://example.com',
+                target: '_blank',
+            },
+        });
+        const link = container.querySelector('a.mc-link');
+        expect(link).toHaveAttribute('target', '_blank');
+    });
+});

package/dist/components/link/Link.stories.d.ts

@@ -1,13 +1,13 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * > A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page.
- *
- * The `MLink` component is the **Svelte / WebComponent** implementation of the **Link** component of Mozaic Design System.<br/>
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/links/).
- */
-declare const _default: Meta<unknown>;
-export default _default;
-export declare const Default: any;
-export declare const IconLeft: any;
-export declare const IconRight: 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 Secondary: Story;
+export declare const Accent: Story;
+export declare const Inverse: Story;
+export declare const Size: Story;
+export declare const Inline: Story;
+export declare const IconLeft: Story;
+export declare const IconRight: Story;
 //# sourceMappingURL=Link.stories.d.ts.map

package/dist/components/link/Link.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE1D;;;;;GAKG;wBAkDE,IAAI,CAAC,OAAO,CAAC;AAhDlB,wBAgDmB;AA0BnB,eAAO,MAAM,OAAO,KAAoB,CAAC;AAEzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAK1C,eAAO,MAAM,SAAS,KAAoB,CAAC"}
+{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAqCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC"}

package/dist/components/link/Link.stories.js

@@ -1,86 +1,73 @@
-/**
- * > A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page.
- *
- * The `MLink` component is the **Svelte / WebComponent** implementation of the **Link** component of Mozaic Design System.<br/>
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/links/).
- */
-export default {
-    title: 'Navigation/Link (stand alone)',
-    tags: ['autodocs', 'beta'],
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+const meta = {
+    title: 'Navigation/Link',
+    component: 'm-link',
     argTypes: {
-        label: {
-            description: 'Specify the link label',
-            control: 'text',
+        iconposition: {
+            control: 'radio',
+            options: ['left', 'right'],
         },
-        href: {
-            description: 'Specify the link href',
-            control: 'text',
-        },
-        target: {
-            description: 'Specify the href target',
-            control: {
-                type: 'select',
-                options: ['_blank', '_self', '_parent', '_top'],
-            },
-            defaultValue: '_blank',
-            if: { arg: 'href' },
+        appearance: {
+            control: 'radio',
+            options: ['secondary', 'accent', 'inverse', 'standard'],
         },
         size: {
-            description: 'Specify the link size',
-            control: { type: 'select' },
+            control: 'radio',
             options: ['s', 'm'],
         },
-        disabled: {
-            description: 'Specify wether the link is disabled',
-            control: 'boolean',
-        },
-        inline: {
-            description: 'Specify wether the link is inline',
-            control: 'boolean',
-        },
-        style: {
-            description: 'Specify which theme to display for the link',
-            control: {
-                type: 'select',
-            },
-            options: ['primary', 'secondary', 'accent', 'inverse'],
-        },
-        iconposition: {
-            description: 'Specify wether the icon is on the right or left ot the link',
-            control: { type: 'radio' },
-            options: ['left', 'right'],
+        target: {
+            control: 'radio',
+            options: ['_self', '_blank', '_parent', '_top'],
         },
     },
+    args: {
+        default: 'Stand-alone link',
+        href: '#',
+    },
+    render: (args) => html `
+    <m-link
+      iconposition=${ifDefined(args.iconposition)}
+      appearance=${ifDefined(args.appearance)}
+      size=${ifDefined(args.size)}
+      href=${ifDefined(args.href)}
+      target=${ifDefined(args.target)}
+      inline=${ifDefined(args.inline)}
+    >
+      ${unsafeHTML(ifDefined(args.icon))} ${unsafeHTML(ifDefined(args.default))}
+    </m-link>
+  `,
+};
+export default meta;
+export const Standard = {};
+export const Secondary = {
+    args: { appearance: 'secondary' },
 };
-const Template = (args) => {
-    const label = document.createElement('span');
-    label.innerText = 'Stand alone link';
-    const icon = document.createElement('chevron-left-24');
-    icon.setAttribute('slot', 'icon');
-    icon.setAttribute('style', 'height: 100%');
-    const primary = document.createElement('m-link');
-    primary.setAttribute('label', 'Primary');
-    if (args.style)
-        primary.setAttribute('style', args.style);
-    if (args.inline)
-        primary.setAttribute('inline', args.inline);
-    if (args.disabled)
-        primary.setAttribute('disabled', args.disabled);
-    if (args.iconposition)
-        primary.setAttribute('iconposition', args.iconposition);
-    primary.setAttribute('size', args.size);
-    primary.setAttribute('href', args.href);
-    primary.setAttribute('target', args.target);
-    primary.appendChild(label);
-    primary.appendChild(icon);
-    return primary;
+export const Accent = {
+    args: { appearance: 'accent' },
+};
+export const Inverse = {
+    globals: {
+        backgrounds: { value: 'inverse' },
+    },
+    args: { appearance: 'inverse' },
 };
-export const Default = Template.bind({});
-export const IconLeft = Template.bind({});
-IconLeft.args = {
-    iconposition: 'left',
+export const Size = {
+    args: { size: 'm' },
 };
-export const IconRight = Template.bind({});
-IconRight.args = {
-    iconposition: 'right',
+export const Inline = {
+    args: { inline: true },
+};
+export const IconLeft = {
+    args: {
+        iconPosition: 'left',
+        icon: '<chevron-left-24 slot="icon"></chevron-left-24>',
+    },
+};
+export const IconRight = {
+    args: {
+        iconPosition: 'right',
+        icon: '<chevron-right-24 slot="icon"></chevron-right-24>',
+    },
 };

package/dist/components/link/Link.svelte

@@ -1,58 +1,59 @@
-<svelte:options customElement="m-link" />
+<svelte:options customElement={{ tag: 'm-link' }} />
 
 <script lang="ts">
-  import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';
+  /**
+   * A link is an interactive text element used to navigate between pages, sections, or external resources. It is typically underlined and styled to indicate its clickable nature. Links can be standalone or embedded within text, and they may include icons to reinforce their purpose. They are essential for navigation and content referencing in web and application interfaces.
+   *
+   * @slot default - Use this slot to insert the textual content of the Link.
+   * @slot icon - Use this slot to insert an icon for the Link.
+   */
   interface Props {
-    href: string;
-    target: string;
-    appearance?: LinkStyle;
-    disabled?: boolean;
-    size?: LinkSize;
+    /**
+     * Position of the icon relative to the text.
+     */
+    iconposition?: 'left' | 'right';
+    /**
+     * Allows to define the link appearance.
+     */
+    appearance?: 'secondary' | 'accent' | 'inverse' | 'standard';
+    /**
+     * Allows to define the link size.
+     */
+    size?: 's' | 'm';
+    /**
+     * URL for the link.
+     */
+    href?: string;
+    /**
+     * Where to open the link.
+     */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /**
+     * Specify wether the link is inline.
+     */
     inline?: boolean;
-    iconposition?: LinkIconPosition | undefined;
-    [key: string]: any;
   }
 
   let {
     href,
     target,
-    appearance = undefined,
-    disabled = false,
-    size = 'm',
-    inline = false,
-    iconposition = undefined,
-    ...events
+    inline,
+    appearance = 'standard',
+    size = 's',
+    iconposition = 'left',
   }: Props = $props();
-
-  function setClasses(
-    appearance: LinkStyle,
-    size: LinkSize,
-    inline: boolean,
-  ): string {
-    const classes = ['mc-link'];
-
-    if (appearance) {
-      classes.push(`mc-link--${appearance}`);
-    }
-    if (size) {
-      classes.push(`mc-link--${size}`);
-    }
-    if (inline) {
-      classes.push('mc-link--inline');
-    } else {
-      classes.push('mc-link--stand-alone');
-    }
-    return classes.join(' ');
-  }
 </script>
 
 <a
+  class={[
+    'mc-link',
+    `mc-link--${appearance}`,
+    `mc-link--${size}`,
+    inline && 'mc-link--inline',
+    !inline && 'mc-link--stand-alone',
+  ]}
   {href}
   {target}
-  class="{setClasses(appearance, size, inline)} {disabled
-    ? 'is-disabled'
-    : ''} "
-  {...events}
 >
   {#if iconposition === 'left'}
     <span class="mc-link__icon">
@@ -72,9 +73,6 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-link {
   transition: box-shadow 200ms ease;
   display: inline-flex;
@@ -83,7 +81,7 @@
   gap: 0.25rem;
   min-height: 1.5rem;
   text-decoration: none;
-  color: #000000;
+  color: var(--link-color-text-primary, #000000);
   font-size: 0.875rem;
 }
 .mc-link__label {
@@ -100,7 +98,7 @@
   text-decoration: underline;
 }
 .mc-link:focus {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  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;
 }
@@ -109,22 +107,22 @@
   font-size: 1rem;
 }
 .mc-link--secondary {
-  color: #666666;
+  color: var(--link-color-text-secondary, #666666);
 }
 .mc-link--accent {
-  color: #117f03;
+  color: var(--link-color-text-accent, #117f03);
 }
 .mc-link--inverse {
-  --focus-color-mid: #000000;
-  --focus-color-outer: #ffffff;
-  color: #ffffff;
+  --focus-color-mid: var(--focus-color-outline-outer, #000000);
+  --focus-color-outer: var(--focus-color-outline-mid, #ffffff);
+  color: var(--link-color-text-inverse, #ffffff);
 }
 .mc-link--stand-alone {
   min-height: 2rem;
-  font-weight: 600;
+  font-weight: var(--link-font-weight, 600);
 }
 .mc-link--stand-alone .mc-link__label {
-  border-bottom: 1px solid currentColor;
+  border-bottom: var(--border-s, 1px) solid currentColor;
 }
 .mc-link--stand-alone:hover .mc-link__label {
   border-color: transparent;
@@ -138,4 +136,8 @@
 }
 .mc-link--inline:hover {
   text-decoration: none;
+}
+
+.mc-link__icon:empty {
+  display: none;
 }</style>

package/dist/components/link/Link.svelte.d.ts

@@ -1,13 +1,34 @@
-import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';
+/**
+ * A link is an interactive text element used to navigate between pages, sections, or external resources. It is typically underlined and styled to indicate its clickable nature. Links can be standalone or embedded within text, and they may include icons to reinforce their purpose. They are essential for navigation and content referencing in web and application interfaces.
+ *
+ * @slot default - Use this slot to insert the textual content of the Link.
+ * @slot icon - Use this slot to insert an icon for the Link.
+ */
 interface Props {
-    href: string;
-    target: string;
-    appearance?: LinkStyle;
-    disabled?: boolean;
-    size?: LinkSize;
+    /**
+     * Position of the icon relative to the text.
+     */
+    iconposition?: 'left' | 'right';
+    /**
+     * Allows to define the link appearance.
+     */
+    appearance?: 'secondary' | 'accent' | 'inverse' | 'standard';
+    /**
+     * Allows to define the link size.
+     */
+    size?: 's' | 'm';
+    /**
+     * URL for the link.
+     */
+    href?: string;
+    /**
+     * Where to open the link.
+     */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /**
+     * Specify wether the link is inline.
+     */
     inline?: boolean;
-    iconposition?: LinkIconPosition | undefined;
-    [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/link/Link.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAExE,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;IAC5C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA8DH,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":"Link.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.svelte.ts"],"names":[],"mappings":"AAGE;;;;;GAKG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA0CH,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"}

package/dist/components/link/README.md

@@ -0,0 +1,23 @@
+# `m-link`
+
+A link is an interactive text element used to navigate between pages, sections, or external resources. It is typically underlined and styled to indicate its clickable nature. Links can be standalone or embedded within text, and they may include icons to reinforce their purpose. They are essential for navigation and content referencing in web and application interfaces.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `iconposition` | Position of the icon relative to the text. | `'left'` `'right'` | `left` |
+| `appearance` | Allows to define the link appearance. | `'secondary'` `'accent'` `'inverse'` `'standard'` | `standard` |
+| `size` | Allows to define the link size. | `'s'` `'m'` | `s` |
+| `href` | URL for the link. | `string` |   |
+| `target` | Where to open the link. | `'_self'` `'_blank'` `'_parent'` `'_top'` |   |
+| `inline` | Specify wether the link is inline. | `boolean` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `icon` | Use this slot to insert an icon for the Link. |
+| `default` | Use this slot to insert the textual content of the Link. |
+| `icon` | Use this slot to insert an icon for the Link. |
+

package/dist/components/loader/Loader.js

@@ -1,13 +1,10 @@
-import{c as C,p as B,a as j,b as h,f as u,s as D,d as n,t as _,u as L,e as R,h as p,i as E,j as k,r as i,g as S}from"../../custom-element.js";import{i as V}from"../../if.js";import{s as f}from"../../attributes.js";var q=u('<span class="mc-loader__text svelte-ekl442"> </span>'),A=u('<div><span class="mc-loader__spinner svelte-ekl442"><svg class="mc-loader__icon svelte-ekl442" xmlns="http://www.w3.org/2000/svg"><circle class="mc-loader__path svelte-ekl442" cx="50%" cy="50%"></circle></svg></span> <!></div>');const F={hash:"svelte-ekl442",code:`/**
+import{c as z,p as C,a as B,b as d,f as _,s as L,d as l,t as g,e as R,g as D,i as h,j as E,k as m,r as o,h as S}from"../../custom-element.js";import{i as V}from"../../if.js";import{s as p}from"../../attributes.js";var q=_('<span class="mc-loader__text svelte-g7kvnj"> </span>'),A=_('<div><span class="mc-loader__spinner svelte-g7kvnj"><svg class="mc-loader__icon svelte-g7kvnj" xmlns="http://www.w3.org/2000/svg"><circle class="mc-loader__path svelte-g7kvnj" cx="50%" cy="50%"></circle></svg></span> <!></div>');const F={hash:"svelte-g7kvnj",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-loader.svelte-ekl442 {color:#464e63;align-items:center;display:inline-flex;flex-direction:column;}.mc-loader.svelte-ekl442 .mc-loader__spinner:where(.svelte-ekl442) {height:2rem;width:2rem;}.mc-loader.svelte-ekl442 .mc-loader__path:where(.svelte-ekl442) {stroke-width:4;}.mc-loader.svelte-ekl442 .mc-loader__path:where(.svelte-ekl442) {stroke:currentColor;}.mc-loader__spinner.svelte-ekl442:not(:only-child) {margin-bottom:1rem;}.mc-loader__icon.svelte-ekl442 {
-  animation: svelte-ekl442-rotate-loader 2s linear infinite;transform-origin:center;}.mc-loader__path.svelte-ekl442 {fill:none;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round;
-  animation: svelte-ekl442-animate-dash-loader 2s ease-in-out infinite;}.mc-loader__text.svelte-ekl442 {font-size:1rem;color:currentcolor;}.mc-loader.svelte-ekl442:not(.mc-loader--text-visible) .mc-loader__text:where(.svelte-ekl442) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-loader--xs.svelte-ekl442 .mc-loader__spinner:where(.svelte-ekl442) {height:1.25rem;width:1.25rem;}.mc-loader--xs.svelte-ekl442 .mc-loader__path:where(.svelte-ekl442) {stroke-width:2;}.mc-loader--s.svelte-ekl442 .mc-loader__spinner:where(.svelte-ekl442) {height:1.5rem;width:1.5rem;}.mc-loader--s.svelte-ekl442 .mc-loader__path:where(.svelte-ekl442) {stroke-width:4;}.mc-loader--l.svelte-ekl442 .mc-loader__spinner:where(.svelte-ekl442) {height:4rem;width:4rem;}.mc-loader--l.svelte-ekl442 .mc-loader__path:where(.svelte-ekl442) {stroke-width:8;}.mc-loader--accent.svelte-ekl442 {color:#117f03;}.mc-loader--accent.svelte-ekl442 .mc-loader__path:where(.svelte-ekl442) {stroke:currentColor;}.mc-loader--inverse.svelte-ekl442 {color:#ffffff;}.mc-loader--inverse.svelte-ekl442 .mc-loader__path:where(.svelte-ekl442) {stroke:currentColor;}
+ */.mc-loader.svelte-g7kvnj .mc-loader__spinner:where(.svelte-g7kvnj) {height:2rem;width:2rem;}.mc-loader.svelte-g7kvnj .mc-loader__path:where(.svelte-g7kvnj) {stroke-width:4;}.mc-loader.svelte-g7kvnj {color:var(--loader-color-standard, #464e63);}.mc-loader.svelte-g7kvnj .mc-loader__path:where(.svelte-g7kvnj) {stroke:currentColor;}.mc-loader.svelte-g7kvnj {align-items:center;display:inline-flex;flex-direction:column;}.mc-loader__spinner.svelte-g7kvnj:not(:only-child) {margin-bottom:1rem;}.mc-loader__icon.svelte-g7kvnj {
+  animation: svelte-g7kvnj-rotate-loader 2s linear infinite;transform-origin:center;}.mc-loader__path.svelte-g7kvnj {fill:none;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round;
+  animation: svelte-g7kvnj-animate-dash-loader 2s ease-in-out infinite;}.mc-loader__text.svelte-g7kvnj {font-size:var(--font-size-150, 1rem);color:currentcolor;}.mc-loader.svelte-g7kvnj:not(.mc-loader--text-visible) .mc-loader__text:where(.svelte-g7kvnj) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-loader--xs.svelte-g7kvnj .mc-loader__spinner:where(.svelte-g7kvnj) {height:1.25rem;width:1.25rem;}.mc-loader--xs.svelte-g7kvnj .mc-loader__path:where(.svelte-g7kvnj) {stroke-width:2;}.mc-loader--s.svelte-g7kvnj .mc-loader__spinner:where(.svelte-g7kvnj) {height:1.5rem;width:1.5rem;}.mc-loader--s.svelte-g7kvnj .mc-loader__path:where(.svelte-g7kvnj) {stroke-width:4;}.mc-loader--l.svelte-g7kvnj .mc-loader__spinner:where(.svelte-g7kvnj) {height:4rem;width:4rem;}.mc-loader--l.svelte-g7kvnj .mc-loader__path:where(.svelte-g7kvnj) {stroke-width:8;}.mc-loader--accent.svelte-g7kvnj {color:var(--loader-color-accent, #117f03);}.mc-loader--accent.svelte-g7kvnj .mc-loader__path:where(.svelte-g7kvnj) {stroke:currentColor;}.mc-loader--inverse.svelte-g7kvnj {color:var(--loader-color-inverse, #ffffff);}.mc-loader--inverse.svelte-g7kvnj .mc-loader__path:where(.svelte-g7kvnj) {stroke:currentColor;}
 
-@keyframes svelte-ekl442-rotate-loader {
+@keyframes svelte-g7kvnj-rotate-loader {
   0% {
     transform: rotate(0deg);
   }
@@ -15,7 +12,7 @@ import{c as C,p as B,a as j,b as h,f as u,s as D,d as n,t as _,u as L,e as R,h a
     transform: rotate(270deg);
   }
 }
-@keyframes svelte-ekl442-animate-dash-loader {
+@keyframes svelte-g7kvnj-animate-dash-loader {
   0% {
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
@@ -28,5 +25,5 @@ import{c as C,p as B,a as j,b as h,f as u,s as D,d as n,t as _,u as L,e as R,h a
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -124px;
   }
-}`};function G(v,s){B(s,!0),j(v,F);let l=h(s,"size",7),c=h(s,"theme",7),a=h(s,"text",7);function w(e,t){const r=["mc-loader"];return e&&r.push(`mc-loader--${e}`),t&&r.push(`mc-loader--${t}`),r.join(" ")}function x(e){let t;switch(e){case"s":t="0 0 24 24";break;case"l":t="0 0 64 64";break;default:t="0 0 32 32"}return t}function g(e){let t;switch(e){case"s":t=6;break;case"l":t=19;break;default:t=9}return t}var o=A(),d=n(o),m=n(d),y=n(m);i(m),i(d);var b=D(d,2);{var z=e=>{var t=q(),r=n(t,!0);i(t),_(()=>S(r,a())),p(e,t)};V(b,e=>{a()&&e(z)})}return i(o),_((e,t,r)=>{R(o,1,e,"svelte-ekl442"),f(m,"viewBox",t),f(y,"r",r)},[()=>L(w(l(),c())),()=>x(l()),()=>g(l())]),p(v,o),E({get size(){return l()},set size(e){l(e),k()},get theme(){return c()},set theme(e){c(e),k()},get text(){return a()},set text(e){a(e),k()}})}customElements.define("m-loader",C(G,{size:{},theme:{},text:{}},[],[],!0));export{G as L};
+}`};function G(k,s){C(s,!0),B(k,F);let t=d(s,"size",7,"m"),v=d(s,"appearance",7,"standard"),r=d(s,"text",7);const f=()=>{let e;switch(t()){case"s":e="0 0 24 24";break;case"l":e="0 0 64 64";break;default:e="0 0 32 32"}return e},j=()=>{let e;switch(t()){case"s":e=6;break;case"l":e=19;break;default:e=9}return e};var w={get size(){return t()},set size(e="m"){t(e),m()},get appearance(){return v()},set appearance(e="standard"){v(e),m()},get text(){return r()},set text(e){r(e),m()}},n=A(),c=l(n),i=l(c),x=l(i);o(i),o(c);var u=L(c,2);{var b=e=>{var a=q(),y=l(a,!0);o(a),g(()=>S(y,r())),h(e,a)};V(u,e=>{r()&&e(b)})}return o(n),g((e,a)=>{R(n,1,D(["mc-loader",`mc-loader--${t()}`,`mc-loader--${v()}`,r()&&"mc-loader--text-visible"]),"svelte-g7kvnj"),p(i,"viewBox",e),p(x,"r",a)},[f,j]),h(k,n),E(w)}customElements.define("m-loader",z(G,{size:{},appearance:{},text:{}},[],[],!0));export{G as L};
 //# sourceMappingURL=Loader.js.map

package/dist/components/loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../../src/components/loader/Loader.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-loader' }} />\n\n<script lang=\"ts\">\n  import type { LoaderSize, LoaderTheme } from './loader.types';\n\n  interface Props {\n    size: LoaderSize;\n    theme: LoaderTheme;\n    text?: string;\n  }\n\n  let { size, theme, text }: Props = $props();\n\n  function setClasses(size: LoaderSize, theme: LoaderTheme) {\n    const classes = ['mc-loader'];\n\n    if (size) {\n      classes.push(`mc-loader--${size}`);\n    }\n\n    if (theme) {\n      classes.push(`mc-loader--${theme}`);\n    }\n\n    return classes.join(' ');\n  }\n\n  function setViewBox(size: LoaderSize) {\n    let viewBox: string;\n\n    switch (size) {\n      case 's':\n        viewBox = '0 0 24 24';\n        break;\n      case 'l':\n        viewBox = '0 0 64 64';\n        break;\n      default:\n        viewBox = '0 0 32 32';\n    }\n\n    return viewBox;\n  }\n\n  function setCircleRadius(size: LoaderSize) {\n    let circleRadius: number;\n\n    switch (size) {\n      case 's':\n        circleRadius = 6;\n        break;\n      case 'l':\n        circleRadius = 19;\n        break;\n      default:\n        circleRadius = 9;\n    }\n\n    return circleRadius;\n  }\n</script>\n\n<div class={setClasses(size, theme)}>\n  <span class=\"mc-loader__spinner\">\n    <svg\n      class=\"mc-loader__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={setViewBox(size)}\n    >\n      <circle\n        class=\"mc-loader__path\"\n        cx=\"50%\"\n        cy=\"50%\"\n        r={setCircleRadius(size)}\n      />\n    </svg>\n  </span>\n\n  {#if text}\n    <span class=\"mc-loader__text\">\n      {text}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loader';\n</style>\n"],"names":["size","$.prop","$$props","theme","text","setClasses","classes","setViewBox","viewBox","setCircleRadius","circleRadius","$$render","consequent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAA,oBAWQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAIH,EAAAC,EAAA,OAAA,CAAA,EAEd,SAAAG,EAAWL,EAAkBG,EAAoB,CAClD,MAAAG,GAAW,WAAW,EAExB,OAAAN,GACFM,EAAQ,KAAI,cAAeN,CAAI,EAAA,EAG7BG,GACFG,EAAQ,KAAI,cAAeH,CAAK,EAAA,EAG3BG,EAAQ,KAAK,GAAG,CACzB,UAESC,EAAWP,EAAkB,KAChCQ,SAEIR,EAAI,KACL,IACHQ,EAAU,sBAEP,IACHA,EAAU,0BAGVA,EAAU,mBAGPA,CACT,UAESC,EAAgBT,EAAkB,KACrCU,SAEIV,EAAI,KACL,IACHU,EAAe,YAEZ,IACHA,EAAe,iBAGfA,EAAe,SAGZA,CACT,qGAqBKN,EAAI,CAAA,CAAA,kBAFJA,EAAI,GAAAO,EAAAC,CAAA,yFAhBCP,EAAWL,EAAI,EAAEG,EAAK,CAAA,CAAA,EAKnB,IAAAI,EAAWP,GAAI,EAMnB,IAAAS,EAAgBT,EAAI,CAAA,wJAb/B"}
+{"version":3,"file":"Loader.js","sources":["../../../src/components/loader/Loader.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-loader' }} />\n\n<script lang=\"ts\">\n  /**\n   * A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.\n   */\n  interface Props {\n    /**\n     * Specifies the visual appearance of the loader.\n     */\n    appearance?: 'standard' | 'accent' | 'inverse';\n\n    /**\n     * Defines the size of the loader.\n     */\n    size?: 's' | 'm' | 'l';\n\n    /**\n     * Text to display alongside the loader when using the loader inside an `Overlay`.\n     */\n    text?: string;\n  }\n\n  let { size = 'm', appearance = 'standard', text }: Props = $props();\n\n  const setViewBox = () => {\n    let viewBox: string;\n\n    switch (size) {\n      case 's':\n        viewBox = '0 0 24 24';\n        break;\n      case 'l':\n        viewBox = '0 0 64 64';\n        break;\n      default:\n        viewBox = '0 0 32 32';\n    }\n\n    return viewBox;\n  };\n\n  const setCircleRadius = () => {\n    let circleRadius: number;\n\n    switch (size) {\n      case 's':\n        circleRadius = 6;\n        break;\n      case 'l':\n        circleRadius = 19;\n        break;\n      default:\n        circleRadius = 9;\n    }\n\n    return circleRadius;\n  };\n</script>\n\n<div\n  class={[\n    'mc-loader',\n    `mc-loader--${size}`,\n    `mc-loader--${appearance}`,\n    text && 'mc-loader--text-visible',\n  ]}\n>\n  <span class=\"mc-loader__spinner\">\n    <svg\n      class=\"mc-loader__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={setViewBox()}\n    >\n      <circle class=\"mc-loader__path\" cx=\"50%\" cy=\"50%\" r={setCircleRadius()} />\n    </svg>\n  </span>\n\n  {#if text}\n    <span class=\"mc-loader__text\">\n      {text}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loader';\n</style>\n"],"names":["size","appearance","text","$.prop","$$props","setViewBox","viewBox","setCircleRadius","circleRadius","$$render","consequent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAA,gBAuBQ,IAAAA,eAAO,GAAG,EAAEC,qBAAa,UAAU,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAEzC,MAAAC,EAAU,IAAS,KACnBC,SAEIN,EAAI,EAAA,KACL,IACHM,EAAU,sBAEP,IACHA,EAAU,0BAGVA,EAAU,mBAGPA,CACT,EAEMC,EAAe,IAAS,KACxBC,SAEIR,EAAI,EAAA,KACL,IACHQ,EAAe,YAEZ,IACHA,EAAe,iBAGfA,EAAe,SAGZA,CACT,2CAlCa,IAAG,yDAAe,WAAU,yJAyDpCN,EAAI,CAAA,CAAA,kBAFJA,EAAI,GAAAO,EAAAC,CAAA,mCAhBP,0BACcV,EAAI,CAAA,iBACJC,EAAU,CAAA,GACxBC,KAAQ,0EAOG,CAAAG,EAE4CE,CAAe,cAhB1E"}

package/dist/components/loader/Loader.spec.js

@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Loader from './Loader.svelte';
+describe('m-loader component', () => {
+    it('renders with default props', () => {
+        const { container } = render(Loader);
+        const loader = container.querySelector('.mc-loader');
+        expect(loader).toBeTruthy();
+        expect(loader?.classList).toContain('mc-loader--m');
+        expect(loader?.classList).toContain('mc-loader--standard');
+        expect(loader?.classList).not.toContain('mc-loader--text-visible');
+        const svg = container.querySelector('svg.mc-loader__icon');
+        expect(svg).toBeTruthy();
+        expect(svg?.getAttribute('viewBox')).toBe('0 0 32 32');
+        const circle = container.querySelector('circle.mc-loader__path');
+        expect(circle).toBeTruthy();
+        expect(circle?.getAttribute('r')).toBe('9');
+        const textSpan = container.querySelector('.mc-loader__text');
+        expect(textSpan).toBeNull();
+    });
+    it('renders with size "s" and appearance "accent"', () => {
+        const { container } = render(Loader, {
+            props: { size: 's', appearance: 'accent' },
+        });
+        const loader = container.querySelector('.mc-loader');
+        expect(loader?.classList).toContain('mc-loader--s');
+        expect(loader?.classList).toContain('mc-loader--accent');
+        const svg = container.querySelector('svg.mc-loader__icon');
+        expect(svg?.getAttribute('viewBox')).toBe('0 0 24 24');
+        const circle = container.querySelector('circle.mc-loader__path');
+        expect(circle?.getAttribute('r')).toBe('6');
+    });
+    it('renders with size "l" and appearance "inverse"', () => {
+        const { container } = render(Loader, {
+            props: { size: 'l', appearance: 'inverse' },
+        });
+        const loader = container.querySelector('.mc-loader');
+        expect(loader?.classList).toContain('mc-loader--l');
+        expect(loader?.classList).toContain('mc-loader--inverse');
+        const svg = container.querySelector('svg.mc-loader__icon');
+        expect(svg?.getAttribute('viewBox')).toBe('0 0 64 64');
+        const circle = container.querySelector('circle.mc-loader__path');
+        expect(circle?.getAttribute('r')).toBe('19');
+    });
+    it('renders with text and applies text-visible class', () => {
+        const text = 'Loading...';
+        const { container, getByText } = render(Loader, { props: { text } });
+        const loader = container.querySelector('.mc-loader');
+        expect(loader?.classList).toContain('mc-loader--text-visible');
+        const textSpan = getByText(text);
+        expect(textSpan).toBeTruthy();
+        expect(textSpan.classList.contains('mc-loader__text')).toBe(true);
+    });
+});