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

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">
@@ -135,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,4 +1,4 @@
-import{c as C,p as B,a as L,b as m,f,s as R,d as o,t as g,u as D,e as E,h as _,i as S,j as h,r as v,g as V}from"../../custom-element.js";import{i as q}from"../../if.js";import{s as p}from"../../attributes.js";var A=f('<span class="mc-loader__text svelte-g7kvnj"> </span>'),F=f('<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 G={hash:"svelte-g7kvnj",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.
  */.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;
@@ -25,5 +25,5 @@ import{c as C,p as B,a as L,b as m,f,s as R,d as o,t as g,u as D,e as E,h as _,i
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -124px;
   }
-}`};function H(k,a){B(a,!0),L(k,G);let s=m(a,"size",7),c=m(a,"theme",7),n=m(a,"text",7);function j(e,t){const r=["mc-loader"];return e&&r.push(`mc-loader--${e}`),t&&r.push(`mc-loader--${t}`),r.join(" ")}function u(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 w(e){let t;switch(e){case"s":t=6;break;case"l":t=19;break;default:t=9}return t}var x={get size(){return s()},set size(e){s(e),h()},get theme(){return c()},set theme(e){c(e),h()},get text(){return n()},set text(e){n(e),h()}},l=F(),i=o(l),d=o(i),y=o(d);v(d),v(i);var b=R(i,2);{var z=e=>{var t=A(),r=o(t,!0);v(t),g(()=>V(r,n())),_(e,t)};q(b,e=>{n()&&e(z)})}return v(l),g((e,t,r)=>{E(l,1,e,"svelte-g7kvnj"),p(d,"viewBox",t),p(y,"r",r)},[()=>D(j(s(),c())),()=>u(s()),()=>w(s())]),_(k,l),S(x)}customElements.define("m-loader",C(H,{size:{},theme:{},text:{}},[],[],!0));export{H as L};
+}`};function G(k,s){C(s,!0),B(k,F);let t=d(s,"size",7,"m"),c=d(s,"appearance",7,"standard"),r=d(s,"text",7);const f=()=>{let e;switch(t()){case"xs":e="0 0 20 20";break;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"xs":e=6;break;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 c()},set appearance(e="standard"){c(e),m()},get text(){return r()},set text(e){r(e),m()}},n=A(),v=l(n),i=l(v),x=l(i);o(i),o(v);var u=L(v,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--${c()}`,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,kPAqBKN,EAAI,CAAA,CAAA,kBAFJA,EAAI,GAAAO,EAAAC,CAAA,yFAhBCP,EAAWL,EAAI,EAAEG,EAAK,CAAA,CAAA,EAKnB,IAAAI,EAAWP,GAAI,EAMnB,IAAAS,EAAgBT,EAAI,CAAA,eAb/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?: 'xs' | '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 'xs':\n        viewBox = '0 0 20 20';\n        break;\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 'xs':\n        circleRadius = 6;\n        break;\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 class=\"mc-loader__icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox={setViewBox()}>\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,KACHM,EAAU,sBAEP,IACHA,EAAU,sBAEP,IACHA,EAAU,0BAGVA,EAAU,mBAGPA,CACT,EAEMC,EAAe,IAAS,KACxBC,SAEIR,EAAI,EAAA,KACL,KACHQ,EAAe,YAEZ,IACHA,EAAe,YAEZ,IACHA,EAAe,iBAGfA,EAAe,SAGZA,CACT,2CAxCa,IAAG,yDAAe,WAAU,yJA2DpCN,EAAI,CAAA,CAAA,kBAFJA,EAAI,GAAAO,EAAAC,CAAA,mCAZP,0BACcV,EAAI,CAAA,iBACJC,EAAU,CAAA,GACxBC,KAAQ,0EAIiE,CAAAG,EAClBE,CAAe,cAZ1E"}

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

@@ -0,0 +1,73 @@
+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?.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);
+    });
+    it('renders correctly for size "xs" (falls through to "s" logic)', () => {
+        const { container } = render(Loader, { props: { size: 'xs' } });
+        const svg = container.querySelector('svg.mc-loader__icon');
+        expect(svg?.getAttribute('viewBox')).toBe('0 0 20 20');
+        const circle = container.querySelector('circle.mc-loader__path');
+        expect(circle?.getAttribute('r')).toBe('6');
+    });
+    it('handles unsupported size by falling back to defaults', () => {
+        const { container } = render(Loader, { props: { size: 'unknown' } });
+        const svg = container.querySelector('svg.mc-loader__icon');
+        expect(svg?.getAttribute('viewBox')).toBe('0 0 32 32');
+        const circle = container.querySelector('circle.mc-loader__path');
+        expect(circle?.getAttribute('r')).toBe('9');
+    });
+    it('handles unsupported appearance by still rendering standard loader', () => {
+        const { container } = render(Loader, { props: { appearance: 'weird' } });
+        const loader = container.querySelector('.mc-loader');
+        expect(loader?.classList).toContain('mc-loader--weird');
+        expect(container.querySelector('svg.mc-loader__icon')).toBeTruthy();
+    });
+});

package/dist/components/loader/Loader.stories.d.ts

@@ -1,11 +1,9 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * The `MLoader` component is the **Svelte / WebComponent** implementation of the **Loader** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/loader/).
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const Sizes: any;
-export declare const Themes: 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 Inverse: Story;
+export declare const Size: Story;
 //# sourceMappingURL=Loader.stories.d.ts.map

package/dist/components/loader/Loader.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.stories.d.ts","sourceRoot":"","sources":["../../../src/components/loader/Loader.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;GAGG;wBAqBE,IAAI;AAnBT,wBAmBU;AAUV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAOzC,eAAO,MAAM,KAAK,KAAoB,CAAC;AAOvC,eAAO,MAAM,MAAM,KAAoB,CAAC"}
+{"version":3,"file":"Loader.stories.d.ts","sourceRoot":"","sources":["../../../src/components/loader/Loader.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAoBX,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,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}

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

@@ -1,53 +1,37 @@
-import { userEvent, within, expect } from 'storybook/test';
-/**
- * The `MLoader` component is the **Svelte / WebComponent** implementation of the **Loader** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/loader/).
- */
-export default {
-    title: 'Loading/Loader',
-    tags: ['autodocs', 'beta'],
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+const meta = {
+    title: 'Indicators/Loader',
+    component: 'm-loader',
     argTypes: {
         size: {
-            description: 'Loader size',
-            control: { type: 'radio' },
+            control: 'radio',
             options: ['xs', 's', 'm', 'l'],
         },
-        theme: {
-            description: 'Loader theme',
-            control: { type: 'radio' },
+        appearance: {
+            control: 'radio',
             options: ['standard', 'accent', 'inverse'],
         },
-        text: {
-            description: 'Loader text - when using the loader inside an overlay',
-            control: 'text',
-        },
     },
+    render: (args) => html `
+    <m-loader
+      appearance=${ifDefined(args.appearance)}
+      size=${ifDefined(args.size)}
+      text=${ifDefined(args.text)}
+    ></m-loader>
+  `,
 };
-const Template = (args) => {
-    const loader = document.createElement('m-loader');
-    if (args.size)
-        loader.setAttribute('size', args.size);
-    if (args.theme)
-        loader.setAttribute('theme', args.theme);
-    if (args.text)
-        loader.setAttribute('text', args.text);
-    return loader;
-};
-export const Default = Template.bind({});
-Default.args = {};
-Default.play = async ({ canvasElement }) => {
-    const loader = canvasElement.querySelector('m-loader');
-    expect(loader).not.toBeNull();
+export default meta;
+export const Standard = {};
+export const Accent = {
+    args: { appearance: 'accent' },
 };
-export const Sizes = Template.bind({});
-Sizes.args = { size: 'm' };
-Sizes.play = async ({ canvasElement }) => {
-    const loader = canvasElement.querySelector('m-loader');
-    expect(loader).toHaveAttribute('size', 'm');
+export const Inverse = {
+    globals: {
+        backgrounds: { value: 'inverse' },
+    },
+    args: { appearance: 'inverse' },
 };
-export const Themes = Template.bind({});
-Themes.args = { theme: 'accent' };
-Themes.play = async ({ canvasElement }) => {
-    const loader = canvasElement.querySelector('m-loader');
-    expect(loader).toHaveAttribute('theme', 'accent');
+export const Size = {
+    args: { size: 's' },
 };