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

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"),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,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?: '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);
+    });
+});

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' },
-            options: ['xs', 's', 'm', 'l'],
+            control: 'radio',
+            options: ['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' },
 };

package/dist/components/loader/Loader.svelte

@@ -1,31 +1,29 @@
 <svelte:options customElement={{ tag: 'm-loader' }} />
 
 <script lang="ts">
-  import type { LoaderSize, LoaderTheme } from './loader.types';
-
+  /**
+   * 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.
+   */
   interface Props {
-    size: LoaderSize;
-    theme: LoaderTheme;
+    /**
+     * Specifies the visual appearance of the loader.
+     */
+    appearance?: 'standard' | 'accent' | 'inverse';
+
+    /**
+     * Defines the size of the loader.
+     */
+    size?: 's' | 'm' | 'l';
+
+    /**
+     * Text to display alongside the loader when using the loader inside an `Overlay`.
+     */
     text?: string;
   }
 
-  let { size, theme, text }: Props = $props();
-
-  function setClasses(size: LoaderSize, theme: LoaderTheme) {
-    const classes = ['mc-loader'];
-
-    if (size) {
-      classes.push(`mc-loader--${size}`);
-    }
-
-    if (theme) {
-      classes.push(`mc-loader--${theme}`);
-    }
-
-    return classes.join(' ');
-  }
+  let { size = 'm', appearance = 'standard', text }: Props = $props();
 
-  function setViewBox(size: LoaderSize) {
+  const setViewBox = () => {
     let viewBox: string;
 
     switch (size) {
@@ -40,9 +38,9 @@
     }
 
     return viewBox;
-  }
+  };
 
-  function setCircleRadius(size: LoaderSize) {
+  const setCircleRadius = () => {
     let circleRadius: number;
 
     switch (size) {
@@ -57,22 +55,24 @@
     }
 
     return circleRadius;
-  }
+  };
 </script>
 
-<div class={setClasses(size, theme)}>
+<div
+  class={[
+    'mc-loader',
+    `mc-loader--${size}`,
+    `mc-loader--${appearance}`,
+    text && 'mc-loader--text-visible',
+  ]}
+>
   <span class="mc-loader__spinner">
     <svg
       class="mc-loader__icon"
       xmlns="http://www.w3.org/2000/svg"
-      viewBox={setViewBox(size)}
+      viewBox={setViewBox()}
     >
-      <circle
-        class="mc-loader__path"
-        cx="50%"
-        cy="50%"
-        r={setCircleRadius(size)}
-      />
+      <circle class="mc-loader__path" cx="50%" cy="50%" r={setCircleRadius()} />
     </svg>
   </span>
 

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

@@ -1,7 +1,18 @@
-import type { LoaderSize, LoaderTheme } from './loader.types';
+/**
+ * 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.
+ */
 interface Props {
-    size: LoaderSize;
-    theme: LoaderTheme;
+    /**
+     * Specifies the visual appearance of the loader.
+     */
+    appearance?: 'standard' | 'accent' | 'inverse';
+    /**
+     * Defines the size of the loader.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * Text to display alongside the loader when using the loader inside an `Overlay`.
+     */
     text?: string;
 }
 declare const Loader: import("svelte").Component<Props, {}, "">;

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

@@ -1 +1 @@
-{"version":3,"file":"Loader.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/loader/Loader.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG5D,UAAU,KAAK;IACb,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA4EH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Loader.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/loader/Loader.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IAE/C;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAEvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAkEH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/loader/README.md

@@ -0,0 +1,12 @@
+# `m-loader`
+
+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.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `appearance` | Specifies the visual appearance of the loader. | `'standard'` `'accent'` `'inverse'` | `standard` |
+| `size` | Defines the size of the loader. | `'s'` `'m'` `'l'` | `m` |
+| `text` | Text to display alongside the loader when using the loader inside an `Overlay`. | `string` |   |
+

package/dist/components/loadingoverlay/LoadingOverlay.js

@@ -0,0 +1,4 @@
+import{c as p,p as b,a as g,b as o,f as u,d as n,t as y,i as f,j as x,k as v,r as d,e as z,g as _}from"../../custom-element.js";import{s as h}from"../../attributes.js";import{L as k}from"../loader/Loader.js";import"../../if.js";var L=u('<div><div role="dialog" tabindex="-1"><!></div></div>');const j={hash:"svelte-111c1z1",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-loading-loader.svelte-111c1z1 {background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:var(--overlay-z-index, 2);}.mc-loading-loader.is-visible.svelte-111c1z1 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}.mc-loading-loader.svelte-111c1z1 {align-items:center;display:flex;justify-content:center;}`};function w(l,t){b(t,!0),g(l,j);let s=o(t,"isvisible",7),e=o(t,"text",7);var c={get isvisible(){return s()},set isvisible(r){s(r),v()},get text(){return e()},set text(r){e(r),v()}},i=L(),a=n(i),m=n(a);return k(m,{size:"l",appearance:"inverse",get text(){return e()}}),d(a),d(i),y(()=>{z(i,1,_(["mc-loading-loader",s()&&"is-visible"]),"svelte-111c1z1"),h(a,"aria-label",e())}),f(l,i),x(c)}customElements.define("m-loading-overlay",p(w,{isvisible:{},text:{}},[],[],!0));
+//# sourceMappingURL=LoadingOverlay.js.map

package/dist/components/loadingoverlay/LoadingOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingOverlay.js","sources":["../../../src/components/loadingoverlay/LoadingOverlay.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-loading-overlay' }} />\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n  /**\n   * A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.\n   */\n  interface Props {\n    /**\n     * Controls the visibility of the loading overlay.\n     */\n    isvisible?: boolean;\n    /**\n     * Text of the loading overlay.\n     */\n    text?: string;\n  }\n\n  let { isvisible, text }: Props = $props();\n</script>\n\n<div class={['mc-loading-loader', isvisible && 'is-visible']}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-label={text}>\n    <Loader size=\"l\" appearance=\"inverse\" {text} />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loading-overlay';\n</style>\n"],"names":["isvisible","$.prop","$$props","text"],"mappings":";;8eAAA,oBAkBQA,EAASC,EAAAC,EAAA,YAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,+NAGV,oBAAqBF,KAAa,YAAY,CAAA,EAAA,gBAAA,mBACZG,GAAI,eAHnD"}

package/dist/components/loadingoverlay/LoadingOverlay.spec.js

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import LoadingOverlay from './LoadingOverlay.svelte';
+describe('m-loading-overlay component', () => {
+    it('does not have visible class by default', () => {
+        const { container } = render(LoadingOverlay);
+        const overlay = container.querySelector('.mc-loading-loader');
+        expect(overlay).toBeTruthy();
+        expect(overlay?.classList).not.toContain('is-visible');
+    });
+    it('adds visible class when isvisible is true', () => {
+        const { container } = render(LoadingOverlay, {
+            props: { isvisible: true },
+        });
+        const overlay = container.querySelector('.mc-loading-loader');
+        expect(overlay?.classList).toContain('is-visible');
+    });
+    it('renders with provided text and sets aria-label', () => {
+        const text = 'Loading data...';
+        const { container, getByRole } = render(LoadingOverlay, {
+            props: { isvisible: true, text },
+        });
+        const dialog = getByRole('dialog');
+        expect(dialog).toBeTruthy();
+        expect(dialog.getAttribute('aria-label')).toBe(text);
+        const loader = container.querySelector('.mc-loader');
+        expect(loader).toBeTruthy();
+        const loaderText = container.querySelector('.mc-loader__text');
+        expect(loaderText?.textContent).toBe(text);
+    });
+    it('does not render aria-label when no text is provided', () => {
+        const { getByRole } = render(LoadingOverlay, {
+            props: { isvisible: true },
+        });
+        const dialog = getByRole('dialog');
+        expect(dialog.getAttribute('aria-label')).toBe(null);
+    });
+});

package/dist/components/loadingoverlay/LoadingOverlay.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const text: Story;
+//# sourceMappingURL=LoadingOverlay.stories.d.ts.map

package/dist/components/loadingoverlay/LoadingOverlay.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingOverlay.stories.d.ts","sourceRoot":"","sources":["../../../src/components/loadingoverlay/LoadingOverlay.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IA6BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC"}

package/dist/components/loadingoverlay/LoadingOverlay.stories.js

@@ -0,0 +1,39 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+const meta = {
+    title: 'Overlay/Loading Overlay',
+    component: 'm-loading-overlay',
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            story: { height: '400px' },
+        },
+    },
+    args: {
+        isvisible: true,
+    },
+    argTypes: {
+        '--overlay-z-index': {
+            description: 'Customise the z-index of the overlay',
+            control: false,
+            table: {
+                category: 'Custom Properties',
+                type: { summary: 'number' },
+                defaultValue: { summary: '2' },
+            },
+        },
+    },
+    render: (args) => html `
+    <m-loading-overlay
+      isvisible=${ifDefined(args.isvisible)}
+      text=${ifDefined(args.text)}
+    ></m-loading-overlay>
+  `,
+};
+export default meta;
+export const Default = {};
+export const text = {
+    args: {
+        text: 'Insert your text here',
+    },
+};