@mozaic-ds/web-components 1.2.0 → 1.4.0

package/dist/components/kpiitem/KpiItem.svelte

@@ -2,13 +2,12 @@
 
 <script lang="ts">
   import type { Component } from 'svelte';
-  import ArrowBottomRight24 from '@mozaic-ds/icons-svelte/svelte/ArrowBottomRight24/ArrowBottomRight24.svelte';
-  import ArrowTopRight24 from '@mozaic-ds/icons-svelte/svelte/ArrowTopRight24/ArrowTopRight24.svelte';
-  import Less24 from '@mozaic-ds/icons-svelte/svelte/Less24/Less24.svelte';
+  import { ArrowBottomRight24, ArrowTopRight24, Less24 } from '@mozaic-ds/icons-svelte';
   /**
    * A KPI Item is used to display Key Performance Indicators (KPIs) within an interface, providing a quick and clear visualization of essential data. It often includes contextual elements such as labels, trends, or status indicators to help users interpret the information at a glance. KPI Items are commonly used in dashboards, reports, and analytics tools to highlight critical metrics and facilitate data-driven decision-making.
    */
   interface Props {
+    [key: string]: any;
     /**
      * The current value of the kpi item.
      */
@@ -35,7 +34,7 @@
     size?: 's' | 'm' | 'l';
   }
 
-  let { value, trend, label, status = 'info', information, size = 's' }: Props = $props();
+  let { value, trend, label, status = 'info', information, size = 's', ...attrs }: Props = $props();
 
   const isMedium = $derived(size === 'm');
   const isLarge = $derived(size === 'l');
@@ -51,7 +50,7 @@
   const rootClasses = $derived(`mc-kpi mc-kpi--${size} mc-kpi--${status}`);
 </script>
 
-<div class={rootClasses}>
+<div class={rootClasses} {...attrs}>
   {#if isMedium && label}
     <span class="mc-kpi__label">
       {label}

package/dist/components/kpiitem/KpiItem.svelte.d.ts

@@ -3,6 +3,7 @@ import type { Component } from 'svelte';
  * A KPI Item is used to display Key Performance Indicators (KPIs) within an interface, providing a quick and clear visualization of essential data. It often includes contextual elements such as labels, trends, or status indicators to help users interpret the information at a glance. KPI Items are commonly used in dashboards, reports, and analytics tools to highlight critical metrics and facilitate data-driven decision-making.
  */
 interface Props {
+    [key: string]: any;
     /**
      * The current value of the kpi item.
      */

package/dist/components/kpiitem/KpiItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KpiItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/kpiitem/KpiItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAKtC;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,GAAG,YAAY,GAAG,QAAQ,CAAC;IAC/C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IAC9D;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AA6DH,QAAA,MAAM,OAAO,0BAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"KpiItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/kpiitem/KpiItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGtC;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,GAAG,YAAY,GAAG,QAAQ,CAAC;IAC/C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IAC9D;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AA2DH,QAAA,MAAM,OAAO,0BAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.js

@@ -1,4 +1,4 @@
-import{c as d,p as f,a as v,b as l,f as c,t as b,i as m,j as g,k as u,d as p,r as h,e as z,g as _}from"../../custom-element.js";import{a as k,s as j}from"../../attributes.js";var w=c('<div><div class="mc-linear-progressbar-buffer__indicator svelte-kfj12z" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div></div>');const x={hash:"svelte-kfj12z",code:`/**
+import{c as v,p as f,a as c,b as o,t as b,f as m,g,h as p,i as h,d as z,j as l,r as _,n as k,o as j}from"../../custom-element.js";import{a as w}from"../../attributes.js";var $=p("<div><div></div></div>");const x={hash:"svelte-kfj12z",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-linear-progressbar-buffer.svelte-kfj12z {--progress-value: 40;background-color:var(--progressbar-color-background, #c9d0de);height:0.25rem;position:relative;min-width:6rem;border-radius:var(--border-radius-l, 1rem);}.mc-linear-progressbar-buffer__indicator.svelte-kfj12z {background-color:var(--progressbar-color-indicator, #464e63);height:100%;transition:width 0.4s ease;overflow:hidden;border-radius:var(--border-radius-l, 1rem);box-sizing:border-box;width:calc(var(--progress-value) * 1%);}.mc-linear-progressbar-buffer--s.svelte-kfj12z {height:0.125rem;}.mc-linear-progressbar-buffer--l.svelte-kfj12z {height:0.5rem;}`};function y(i,s){f(s,!0),v(i,x);let e=l(s,"value",7,0),a=l(s,"size",7,"m");var n={get value(){return e()},set value(t=0){e(t),u()},get size(){return a()},set size(t="m"){a(t),u()}},r=w(),o=p(r);return h(r),b(()=>{z(r,1,_(["mc-linear-progressbar-buffer",`mc-linear-progressbar-buffer--${a()}`]),"svelte-kfj12z"),k(o,`--progress-value: ${e()};`),j(o,"aria-valuenow",e())}),m(i,r),g(n)}customElements.define("m-linear-progressbar-buffer",d(y,{value:{},size:{}},[],[],!0));
+ */.mc-linear-progressbar-buffer.svelte-kfj12z {--progress-value: 40;background-color:var(--progressbar-color-background, #c9d0de);height:0.25rem;position:relative;min-width:6rem;border-radius:var(--border-radius-l, 1rem);}.mc-linear-progressbar-buffer__indicator.svelte-kfj12z {background-color:var(--progressbar-color-indicator, #464e63);height:100%;transition:width 0.4s ease;overflow:hidden;border-radius:var(--border-radius-l, 1rem);box-sizing:border-box;width:calc(var(--progress-value) * 1%);}.mc-linear-progressbar-buffer--s.svelte-kfj12z {height:0.125rem;}.mc-linear-progressbar-buffer--l.svelte-kfj12z {height:0.5rem;}`};function y(i,e){f(e,!0),c(i,x);let r=o(e,"value",7,0),a=o(e,"size",7,"m"),d=h(e,["$$slots","$$events","$$legacy","$$host","value","size"]);var n={get value(){return r()},set value(t=0){r(t),l()},get size(){return a()},set size(t="m"){a(t),l()}},s=$(),u=z(s);return w(u,()=>({class:"mc-linear-progressbar-buffer__indicator",role:"progressbar",style:`--progress-value: ${r()};`,"aria-valuenow":r(),"aria-valuemin":"0","aria-valuemax":"100",...d}),void 0,void 0,void 0,"svelte-kfj12z"),_(s),b(()=>k(s,1,j(["mc-linear-progressbar-buffer",`mc-linear-progressbar-buffer--${a()}`]),"svelte-kfj12z")),m(i,s),g(n)}customElements.define("m-linear-progressbar-buffer",v(y,{value:{},size:{}},[],[],!0));
 //# sourceMappingURL=LinearProgressbarBuffer.js.map

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgressbarBuffer.js","sources":["../../../src/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-linear-progressbar-buffer' }} />\n\n<script lang=\"ts\">\n  /**\n   * A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.\n   */\n  interface Props {\n    /**\n     * Allows to define the progress bar size.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * The current value of the progress bar.\n     */\n    value?: number;\n  }\n\n  let { value = 0, size = 'm' }: Props = $props();\n</script>\n\n<div class={['mc-linear-progressbar-buffer', `mc-linear-progressbar-buffer--${size}`]}>\n  <div\n    class=\"mc-linear-progressbar-buffer__indicator\"\n    role=\"progressbar\"\n    style={`--progress-value: ${value};`}\n    aria-valuenow={value}\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  ></div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/linear-progressbar-buffer';\n</style>\n"],"names":["value","size"],"mappings":";;soBAAA,gBAiBQ,IAAAA,gBAAQ,CAAC,EAAEC,eAAO,GAAG,6CAAb,EAAC,6CAAS,IAAG,qDAGhB,gEAAiEA,GAAI,+CAIlDD,EAAK,CAAA,GAAA,sBAClBA,GAAK,eAPxB"}
+{"version":3,"file":"LinearProgressbarBuffer.js","sources":["../../../src/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-linear-progressbar-buffer' }} />\n\n<script lang=\"ts\">\n  /**\n   * A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Allows to define the progress bar size.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * The current value of the progress bar.\n     */\n    value?: number;\n  }\n\n  let { value = 0, size = 'm', ...attrs }: Props = $props();\n</script>\n\n<div class={['mc-linear-progressbar-buffer', `mc-linear-progressbar-buffer--${size}`]}>\n  <div\n    class=\"mc-linear-progressbar-buffer__indicator\"\n    role=\"progressbar\"\n    style={`--progress-value: ${value};`}\n    aria-valuenow={value}\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    {...attrs}\n  ></div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/linear-progressbar-buffer';\n</style>\n"],"names":["value","size","attrs","$.rest_props","$$props","div","root","div_1","$.child"],"mappings":";;soBAEA,gBAgBQ,IAAAA,gBAAQ,CAAC,EAAEC,eAAO,GAAG,EAAKC,EAAKC,EAAAC,EAAA,CAAA,UAAA,WAAA,WAAA,SAAA,QAAA,MAAA,CAAA,6CAAvB,EAAC,6CAAS,IAAG,YAG5BC,EAAGC,EAAA,EACDC,EAAAC,EADFH,CAAG,WACDE,sGAG6BP,EAAK,CAAA,oBAClBA,EAAK,+CAGhBE,4CARPG,CAAG,UAAHA,OAAY,gEAAiEJ,GAAI,2BAAjFI,CAAG,MAFI"}

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.d.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './LinearProgressbarBuffer.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgressbarBuffer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAsBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}
+{"version":3,"file":"LinearProgressbarBuffer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,kCAAkC,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAsBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import './LinearProgressbarBuffer.svelte';
 const meta = {
     title: 'Indicators/Linear Progress Bar (Buffer)',
     component: 'm-linear-progressbar-buffer',

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte

@@ -5,6 +5,7 @@
    * A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.
    */
   interface Props {
+    [key: string]: any;
     /**
      * Allows to define the progress bar size.
      */
@@ -15,7 +16,7 @@
     value?: number;
   }
 
-  let { value = 0, size = 'm' }: Props = $props();
+  let { value = 0, size = 'm', ...attrs }: Props = $props();
 </script>
 
 <div class={['mc-linear-progressbar-buffer', `mc-linear-progressbar-buffer--${size}`]}>
@@ -26,6 +27,7 @@
     aria-valuenow={value}
     aria-valuemin="0"
     aria-valuemax="100"
+    {...attrs}
   ></div>
 </div>
 

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte.d.ts

@@ -2,6 +2,7 @@
  * A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.
  */
 interface Props {
+    [key: string]: any;
     /**
      * Allows to define the progress bar size.
      */

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgressbarBuffer.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiBH,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"LinearProgressbarBuffer.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiBH,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.js

@@ -1,4 +1,4 @@
-import{c as p,p as g,a as b,b as m,f as u,t as f,i as h,j as _,k,d as a,F as x,r as t,h as w}from"../../custom-element.js";import{a as y,s as z}from"../../attributes.js";var j=u('<div class="mc-linear-progressbar-percentage svelte-kh7ttv"><div class="mc-linear-progressbar-percentage__indicator svelte-kh7ttv" role="progressbar" aria-valuemin="0" aria-valuemax="100"><div class="mc-linear-progressbar-percentage__label svelte-kh7ttv"><p class="mc-linear-progressbar-percentage__value svelte-kh7ttv"> <span class="mc-linear-progressbar-percentage__unit svelte-kh7ttv">%</span></p></div></div></div>');const L={hash:"svelte-kh7ttv",code:`/**
+import{c as g,p as b,a as m,b as u,t as f,f as h,g as _,h as x,i as k,d as r,j as w,aC as y,r as a,e as $}from"../../custom-element.js";import{a as z}from"../../attributes.js";var j=x('<div class="mc-linear-progressbar-percentage svelte-kh7ttv"><div><div class="mc-linear-progressbar-percentage__label svelte-kh7ttv"><p class="mc-linear-progressbar-percentage__value svelte-kh7ttv"> <span class="mc-linear-progressbar-percentage__unit svelte-kh7ttv">%</span></p></div></div></div>');const L={hash:"svelte-kh7ttv",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-linear-progressbar-percentage.svelte-kh7ttv {--progress-value: 40;font-family:var(--font-family, LeroyMerlin), sans-serif;background-color:var(--progressbar-color-background, #c9d0de);height:1.5rem;position:relative;min-width:6rem;border-radius:var(--border-radius-l, 1rem);box-sizing:border-box;}.mc-linear-progressbar-percentage__indicator.svelte-kh7ttv {border-radius:var(--border-radius-l, 1rem);background-color:var(--progressbar-color-indicator, #464e63);min-width:40px;height:100%;top:0;left:0;position:absolute;transition:width 0.4s ease;overflow:hidden;display:flex;justify-content:flex-end;width:calc(40px + var(--progress-value) * (100% - 40px) / 100);}.mc-linear-progressbar-percentage__label.svelte-kh7ttv {box-sizing:border-box;border-radius:var(--border-radius-l, 1rem);background-color:var(--progressbar-badge-color-background, #ffffff);color:var(--progressbar-badge-color-text, #171b26);height:1.5rem;width:2.5rem;border:0.125rem solid var(--progressbar-color-indicator, #464e63);display:flex;align-items:center;justify-content:center;}.mc-linear-progressbar-percentage__value.svelte-kh7ttv {font-size:var(--font-size-50, 0.75rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;}.mc-linear-progressbar-percentage__unit.svelte-kh7ttv {font-size:var(--font-size-25, 0.625rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;position:relative;bottom:1px;}`};function P(o,i){g(i,!0),b(o,L);let e=m(i,"value",7,0);var v={get value(){return e()},set value(d=0){e(d),k()}},s=j(),r=a(s),l=a(r),n=a(l),c=a(n);return x(),t(n),t(l),t(r),t(s),f(()=>{y(r,`--progress-value: ${e()};`),z(r,"aria-valuenow",e()),w(c,`${e()??""} `)}),h(o,s),_(v)}customElements.define("m-linear-progressbar-percentage",p(P,{value:{}},[],[],!0));
+ */.mc-linear-progressbar-percentage.svelte-kh7ttv {--progress-value: 40;font-family:var(--font-family, LeroyMerlin), sans-serif;background-color:var(--progressbar-color-background, #c9d0de);height:1.5rem;position:relative;min-width:6rem;border-radius:var(--border-radius-l, 1rem);box-sizing:border-box;}.mc-linear-progressbar-percentage__indicator.svelte-kh7ttv {border-radius:var(--border-radius-l, 1rem);background-color:var(--progressbar-color-indicator, #464e63);min-width:40px;height:100%;top:0;left:0;position:absolute;transition:width 0.4s ease;overflow:hidden;display:flex;justify-content:flex-end;width:calc(40px + var(--progress-value) * (100% - 40px) / 100);}.mc-linear-progressbar-percentage__label.svelte-kh7ttv {box-sizing:border-box;border-radius:var(--border-radius-l, 1rem);background-color:var(--progressbar-badge-color-background, #ffffff);color:var(--progressbar-badge-color-text, #171b26);height:1.5rem;width:2.5rem;border:0.125rem solid var(--progressbar-color-indicator, #464e63);display:flex;align-items:center;justify-content:center;}.mc-linear-progressbar-percentage__value.svelte-kh7ttv {font-size:var(--font-size-50, 0.75rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;}.mc-linear-progressbar-percentage__unit.svelte-kh7ttv {font-size:var(--font-size-25, 0.625rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;position:relative;bottom:1px;}`};function P(i,t){b(t,!0),m(i,L);let e=u(t,"value",7,0),v=k(t,["$$slots","$$events","$$legacy","$$host","value"]);var c={get value(){return e()},set value(p=0){e(p),w()}},s=j(),o=r(s);z(o,()=>({class:"mc-linear-progressbar-percentage__indicator",role:"progressbar",style:`--progress-value: ${e()};`,"aria-valuenow":e(),"aria-valuemin":"0","aria-valuemax":"100",...v}),void 0,void 0,void 0,"svelte-kh7ttv");var l=r(o),n=r(l),d=r(n);return y(),a(n),a(l),a(o),a(s),f(()=>$(d,`${e()??""} `)),h(i,s),_(c)}customElements.define("m-linear-progressbar-percentage",g(P,{value:{}},[],[],!0));
 //# sourceMappingURL=LinearProgressbarPercentage.js.map

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgressbarPercentage.js","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-linear-progressbar-percentage' }} />\n\n<script lang=\"ts\">\n  /**\n   * A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.\n   */\n  interface Props {\n    /**\n     * The current value of the progress bar.\n     */\n    value?: number;\n  }\n\n  let { value = 0 }: Props = $props();\n</script>\n\n<div class=\"mc-linear-progressbar-percentage\">\n  <div\n    class=\"mc-linear-progressbar-percentage__indicator\"\n    role=\"progressbar\"\n    style={`--progress-value: ${value};`}\n    aria-valuenow={value}\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div class=\"mc-linear-progressbar-percentage__label\">\n      <p class=\"mc-linear-progressbar-percentage__value\">\n        {value}\n        <span class=\"mc-linear-progressbar-percentage__unit\">%</span>\n      </p>\n    </div>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/linear-progressbar-percentage';\n</style>\n"],"names":["value"],"mappings":";;i4CAAA,gBAaQ,IAAAA,gBAAQ,CAAC,6CAAD,EAAC,6GAOeA,EAAK,CAAA,GAAA,sBAClBA,GAAK,SAMfA,EAAK,GAAA,EAAA,GAAA,eAbd"}
+{"version":3,"file":"LinearProgressbarPercentage.js","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-linear-progressbar-percentage' }} />\n\n<script lang=\"ts\">\n  /**\n   * A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * The current value of the progress bar.\n     */\n    value?: number;\n  }\n\n  let { value = 0, ...attrs }: Props = $props();\n</script>\n\n<div class=\"mc-linear-progressbar-percentage\">\n  <div\n    class=\"mc-linear-progressbar-percentage__indicator\"\n    role=\"progressbar\"\n    style={`--progress-value: ${value};`}\n    aria-valuenow={value}\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    {...attrs}\n  >\n    <div class=\"mc-linear-progressbar-percentage__label\">\n      <p class=\"mc-linear-progressbar-percentage__value\">\n        {value}\n        <span class=\"mc-linear-progressbar-percentage__unit\">%</span>\n      </p>\n    </div>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/linear-progressbar-percentage';\n</style>\n"],"names":["value","attrs","$.rest_props","$$props","div","root","div_1","$.child","div_2","p","$.reset"],"mappings":";;i4CAEA,gBAYQ,IAAAA,gBAAQ,CAAC,EAAKC,EAAKC,EAAAC,EAAA,CAAA,UAAA,WAAA,WAAA,SAAA,OAAA,CAAA,6CAAX,EAAC,YAGhBC,EAAGC,EAAA,EACDC,EAAAC,EADFH,CAAG,IACDE,0GAG6BN,EAAK,CAAA,oBAClBA,EAAK,+CAGhBC,0CAEH,IAAAO,EAAGD,EATLD,CAAA,EAUIG,IADFD,CAAG,MACDC,CAAC,eAADA,CAAC,IADHD,CAAG,EATLE,EAAAJ,CAAA,IADFF,CAAG,eAYKJ,KAAK,EAAA,GAAA,CAAA,MAZbI,CAAG,MAFI"}

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.d.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './LinearProgressbarPercentage.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgressbarPercentage.stories.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAiBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC"}
+{"version":3,"file":"LinearProgressbarPercentage.stories.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,sCAAsC,CAAC;AAE9C,QAAA,MAAM,IAAI,EAAE,IAiBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC"}

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import './LinearProgressbarPercentage.svelte';
 const meta = {
     title: 'Indicators/Linear Progress Bar (Percentage)',
     component: 'm-linear-progressbar-percentage',

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte

@@ -5,13 +5,14 @@
    * A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.
    */
   interface Props {
+    [key: string]: any;
     /**
      * The current value of the progress bar.
      */
     value?: number;
   }
 
-  let { value = 0 }: Props = $props();
+  let { value = 0, ...attrs }: Props = $props();
 </script>
 
 <div class="mc-linear-progressbar-percentage">
@@ -22,6 +23,7 @@
     aria-valuenow={value}
     aria-valuemin="0"
     aria-valuemax="100"
+    {...attrs}
   >
     <div class="mc-linear-progressbar-percentage__label">
       <p class="mc-linear-progressbar-percentage__value">

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte.d.ts

@@ -2,6 +2,7 @@
  * A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.
  */
 interface Props {
+    [key: string]: any;
     /**
      * The current value of the progress bar.
      */

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgressbarPercentage.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwBH,QAAA,MAAM,2BAA2B,2CAAwC,CAAC;AAC1E,KAAK,2BAA2B,GAAG,UAAU,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAClF,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"LinearProgressbarPercentage.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwBH,QAAA,MAAM,2BAA2B,2CAAwC,CAAC;AAC1E,KAAK,2BAA2B,GAAG,UAAU,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAClF,eAAe,2BAA2B,CAAC"}

package/dist/components/link/Link.js

@@ -1,4 +1,4 @@
-import{c as L,p as S,a as q,b as i,f as _,d as c,s as b,t as A,i as h,j as B,k as l,r as s,e as F,g as G}from"../../custom-element.js";import{i as w}from"../../if.js";import{s as x}from"../../slot.js";import{s as y}from"../../attributes.js";var H=_('<span class="mc-link__icon svelte-5kacnx"><!></span>'),I=_('<span class="mc-link__icon svelte-5kacnx"><!></span>'),J=_('<a><!> <span class="mc-link__label svelte-5kacnx"><!></span> <!></a>');const K={hash:"svelte-5kacnx",code:`/**
+import{c as O,p as P,a as Q,b as i,s as D,f as l,g as R,h as L,i as T,d as w,j as a,k as d,l as h,r as z}from"../../custom-element.js";import{s as E}from"../../snippet.js";import{i as u}from"../../if.js";import{s as I}from"../../slot.js";import{a as U}from"../../attributes.js";var V=L('<span class="mc-link__icon svelte-5kacnx"><!></span>'),W=L('<a><!> <span class="mc-link__label svelte-5kacnx"><!></span> <!></a>');const X={hash:"svelte-5kacnx",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-link.svelte-5kacnx {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-5kacnx {line-height:1.3;}.mc-link__icon.svelte-5kacnx {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-5kacnx:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-5kacnx) {text-decoration:underline;}.mc-link.svelte-5kacnx:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-link--m.svelte-5kacnx {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-5kacnx {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-5kacnx {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-5kacnx {--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.svelte-5kacnx {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {border-bottom:var(--border-width-s, 0.0625rem) solid currentColor;}.mc-link--stand-alone.svelte-5kacnx:hover .mc-link__label:where(.svelte-5kacnx) {border-color:transparent;}.mc-link--inline.svelte-5kacnx {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {line-height:1;}.mc-link--inline.svelte-5kacnx:hover {text-decoration:none;}.mc-link__icon.svelte-5kacnx:empty {display:none;}`};function M(p,n){S(n,!0),q(p,K);let m=i(n,"href",7),k=i(n,"target",7),r=i(n,"inline",7),f=i(n,"appearance",7,"standard"),v=i(n,"size",7,"s"),o=i(n,"iconposition",7,"left");var z={get href(){return m()},set href(e){m(e),l()},get target(){return k()},set target(e){k(e),l()},get inline(){return r()},set inline(e){r(e),l()},get appearance(){return f()},set appearance(e="standard"){f(e),l()},get size(){return v()},set size(e="s"){v(e),l()},get iconposition(){return o()},set iconposition(e="left"){o(e),l()}},a=J(),g=c(a);{var j=e=>{var t=H(),u=c(t);x(u,n,"icon",{}),s(t),h(e,t)};w(g,e=>{o()==="left"&&e(j)})}var d=b(g,2),C=c(d);x(C,n,"default",{}),s(d);var D=b(d,2);{var E=e=>{var t=I(),u=c(t);x(u,n,"icon",{}),s(t),h(e,t)};w(D,e=>{o()==="right"&&e(E)})}return s(a),A(()=>{F(a,1,G(["mc-link",`mc-link--${f()}`,`mc-link--${v()}`,r()&&"mc-link--inline",!r()&&"mc-link--stand-alone"]),"svelte-5kacnx"),y(a,"href",m()),y(a,"target",k())}),h(p,a),B(z)}customElements.define("m-link",L(M,{href:{},target:{},inline:{},appearance:{},size:{},iconposition:{}},["icon","default"],[],!0));
+ */.mc-link.svelte-5kacnx {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-5kacnx {line-height:1.3;}.mc-link__icon.svelte-5kacnx {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-5kacnx:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-5kacnx) {text-decoration:underline;}.mc-link.svelte-5kacnx:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-link--m.svelte-5kacnx {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-5kacnx {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-5kacnx {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-5kacnx {--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.svelte-5kacnx {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {border-bottom:var(--border-width-s, 0.0625rem) solid currentColor;}.mc-link--stand-alone.svelte-5kacnx:hover .mc-link__label:where(.svelte-5kacnx) {border-color:transparent;}.mc-link--inline.svelte-5kacnx {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {line-height:1;}.mc-link--inline.svelte-5kacnx:hover {text-decoration:none;}.mc-link__icon.svelte-5kacnx:empty {display:none;}`};function Y(j,n){P(n,!0),Q(j,X);const B=e=>{var t=V(),o=w(t);{var M=r=>{var c=d(),y=h(c);E(y,v),l(r,c)},N=r=>{var c=d(),y=h(c);I(y,n,"icon",{},null),l(r,c)};u(o,r=>{v()?r(M):r(N,!1)})}z(t),l(e,t)};let _=i(n,"href",7),x=i(n,"target",7),s=i(n,"inline",7),g=i(n,"appearance",7,"standard"),p=i(n,"size",7,"s"),m=i(n,"iconposition",7,"left"),f=i(n,"children",7),v=i(n,"icon",7),S=T(n,["$$slots","$$events","$$legacy","$$host","href","target","inline","appearance","size","iconposition","children","icon"]);var q={get href(){return _()},set href(e){_(e),a()},get target(){return x()},set target(e){x(e),a()},get inline(){return s()},set inline(e){s(e),a()},get appearance(){return g()},set appearance(e="standard"){g(e),a()},get size(){return p()},set size(e="s"){p(e),a()},get iconposition(){return m()},set iconposition(e="left"){m(e),a()},get children(){return f()},set children(e){f(e),a()},get icon(){return v()},set icon(e){v(e),a()}},k=W();U(k,()=>({class:["mc-link",`mc-link--${g()}`,`mc-link--${p()}`,s()&&"mc-link--inline",!s()&&"mc-link--stand-alone"],href:_(),target:x(),...S}),void 0,void 0,void 0,"svelte-5kacnx");var C=w(k);{var A=e=>{B(e)};u(C,e=>{m()==="left"&&e(A)})}var b=D(C,2),F=w(b);{var G=e=>{var t=d(),o=h(t);E(o,f),l(e,t)},H=e=>{var t=d(),o=h(t);I(o,n,"default",{},null),l(e,t)};u(F,e=>{f()?e(G):e(H,!1)})}z(b);var J=D(b,2);{var K=e=>{B(e)};u(J,e=>{m()==="right"&&e(K)})}return z(k),l(j,k),R(q)}customElements.define("m-link",O(Y,{inline:{attribute:"inline",reflect:!0,type:"Boolean"},href:{},target:{},appearance:{},size:{},iconposition:{},children:{},icon:{}},["icon","default"],[],!0));
 //# sourceMappingURL=Link.js.map

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

@@ -1 +1 @@
-{"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":";;+zDAAA,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"}
+{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-link',\n    props: {\n      inline: { reflect: true, type: 'Boolean', attribute: 'inline' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\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    [key: string]: any;\n\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     * Use this snippet to insert the textual content of the Link.\n     */\n    icon?: Snippet;\n    /**\n     * Use this snippet to insert an icon for the Link.\n     */\n    children?: Snippet;\n  }\n\n  let {\n    href,\n    target,\n    inline,\n    appearance = 'standard',\n    size = 's',\n    iconposition = 'left',\n    children,\n    icon,\n    ...attrs\n  }: Props = $props();\n</script>\n\n{#snippet displayIcon()}\n  <span class=\"mc-link__icon\">\n    {#if icon}\n      {@render icon()}\n    {:else}\n      <slot name=\"icon\" />\n    {/if}\n  </span>\n{/snippet}\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  {...attrs}\n>\n  {#if iconposition === 'left'}\n    {@render displayIcon()}\n  {/if}\n  <span class=\"mc-link__label\">\n    {#if children}\n      {@render children()}\n    {:else}\n      <slot />\n    {/if}\n  </span>\n  {#if iconposition === 'right'}\n    {@render displayIcon()}\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":["displayIcon","$$anchor","span","root_1","icon","$$render","consequent","alternate","href","$.prop","$$props","target","inline","appearance","size","iconposition","children","attrs","$.rest_props","a","root","node_3","$.child","consequent_1","span_1","$.sibling","consequent_2","alternate_1","consequent_3","$.reset","$.append"],"mappings":";;+zDASA,sBA0DUA,EAAWC,GAAA,KAClBC,EAAIC,EAAA,MAAJD,CAAI,kCAEQE,CAAI,uEADVA,EAAI,EAAAC,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,MADVL,CAAI,MAAJA,CAAI,OAbHM,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,EACrBC,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRN,EAAIK,EAAAC,EAAA,OAAA,CAAA,EACDO,EAAAC,EAAAR,EAAA,8TALU,WAAU,6CAChB,IAAG,6DACK,OAAM,8GAiBxBS,EAAAC,EAAA,IAAAD,eAEG,sBACYN,EAAU,CAAA,eACVC,EAAI,CAAA,GAChBF,EAAM,GAAI,kBACT,CAAAA,EAAM,GAAI,6BAEZJ,EAAI,SACJG,EAAM,KACHM,0CAVL,IAAAI,EAAAC,EAAAH,CAAA,aAaYnB,EAAWC,CAAA,WADjBc,EAAY,IAAK,QAAMV,EAAAkB,CAAA,QAG3BC,EAAIC,EAAAJ,EAAA,CAAA,MAAJG,CAAI,kCAEQR,CAAQ,0EADdA,EAAQ,EAAAX,EAAAqB,CAAA,EAAArB,EAAAsB,EAAA,EAAA,MADdH,CAAI,UAAJA,EAAI,CAAA,aAQMxB,EAAWC,CAAA,WADjBc,EAAY,IAAK,SAAOV,EAAAuB,CAAA,IAtB9BC,OAAAA,EAAAV,CAAA,EAAAW,EAAA7B,EAAAkB,CAAA,MAZO"}

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

@@ -1,4 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Link.svelte';
+import '@mozaic-ds/icons-svelte/components/ChevronRight24/ChevronRight24.svelte';
+import '@mozaic-ds/icons-svelte/components/ChevronLeft24/ChevronLeft24.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

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,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"}
+{"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;AAIrE,OAAO,eAAe,CAAC;AACvB,OAAO,yEAAyE,CAAC;AACjF,OAAO,uEAAuE,CAAC;AAE/E,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,6 +1,9 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './Link.svelte';
+import '@mozaic-ds/icons-svelte/components/ChevronRight24/ChevronRight24.svelte';
+import '@mozaic-ds/icons-svelte/components/ChevronLeft24/ChevronLeft24.svelte';
 const meta = {
     title: 'Navigation/Link',
     component: 'm-link',
@@ -33,7 +36,7 @@ const meta = {
       size=${ifDefined(args.size)}
       href=${ifDefined(args.href)}
       target=${ifDefined(args.target)}
-      inline=${ifDefined(args.inline)}
+      ?inline=${args.inline}
     >
       ${unsafeHTML(ifDefined(args.icon))} ${unsafeHTML(ifDefined(args.default))}
     </m-link>
@@ -61,13 +64,13 @@ export const Inline = {
 };
 export const IconLeft = {
     args: {
-        iconPosition: 'left',
+        iconposition: 'left',
         icon: '<chevron-left-24 slot="icon"></chevron-left-24>',
     },
 };
 export const IconRight = {
     args: {
-        iconPosition: 'right',
+        iconposition: 'right',
         icon: '<chevron-right-24 slot="icon"></chevron-right-24>',
     },
 };

package/dist/components/link/Link.svelte

@@ -1,6 +1,14 @@
-<svelte:options customElement={{ tag: 'm-link' }} />
+<svelte:options
+  customElement={{
+    tag: 'm-link',
+    props: {
+      inline: { reflect: true, type: 'Boolean', attribute: 'inline' },
+    },
+  }}
+/>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   /**
    * 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.
    *
@@ -8,6 +16,8 @@
    * @slot icon - Use this slot to insert an icon for the Link.
    */
   interface Props {
+    [key: string]: any;
+
     /**
      * Position of the icon relative to the text.
      */
@@ -32,6 +42,14 @@
      * Specify wether the link is inline.
      */
     inline?: boolean;
+    /**
+     * Use this snippet to insert the textual content of the Link.
+     */
+    icon?: Snippet;
+    /**
+     * Use this snippet to insert an icon for the Link.
+     */
+    children?: Snippet;
   }
 
   let {
@@ -41,9 +59,22 @@
     appearance = 'standard',
     size = 's',
     iconposition = 'left',
+    children,
+    icon,
+    ...attrs
   }: Props = $props();
 </script>
 
+{#snippet displayIcon()}
+  <span class="mc-link__icon">
+    {#if icon}
+      {@render icon()}
+    {:else}
+      <slot name="icon" />
+    {/if}
+  </span>
+{/snippet}
+
 <a
   class={[
     'mc-link',
@@ -54,19 +85,20 @@
   ]}
   {href}
   {target}
+  {...attrs}
 >
   {#if iconposition === 'left'}
-    <span class="mc-link__icon">
-      <slot name="icon" />
-    </span>
+    {@render displayIcon()}
   {/if}
   <span class="mc-link__label">
-    <slot />
+    {#if children}
+      {@render children()}
+    {:else}
+      <slot />
+    {/if}
   </span>
   {#if iconposition === 'right'}
-    <span class="mc-link__icon">
-      <slot name="icon" />
-    </span>
+    {@render displayIcon()}
   {/if}
 </a>
 

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

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 /**
  * 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.
  *
@@ -5,6 +6,7 @@
  * @slot icon - Use this slot to insert an icon for the Link.
  */
 interface Props {
+    [key: string]: any;
     /**
      * Position of the icon relative to the text.
      */
@@ -29,6 +31,14 @@ interface Props {
      * Specify wether the link is inline.
      */
     inline?: boolean;
+    /**
+     * Use this snippet to insert the textual content of the Link.
+     */
+    icon?: Snippet;
+    /**
+     * Use this snippet to insert an icon for the Link.
+     */
+    children?: Snippet;
 }
 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":"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"}
+{"version":3,"file":"Link.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEpC;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IAEnB;;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;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6DH,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

@@ -12,12 +12,13 @@ A link is an interactive text element used to navigate between pages, sections,
 | `href` | URL for the link. | `string` |   |
 | `target` | Where to open the link. | `'_self'` `'_blank'` `'_parent'` `'_top'` |   |
 | `inline` | Specify wether the link is inline. | `boolean` |   |
+| `icon` | Use this snippet to insert the textual content of the Link. | `Snippet` |   |
+| `children` | Use this snippet to insert an icon for the Link. | `Snippet` |   |
 
 ## 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 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:`/**
+import{c as C,p as $,a as B,b as d,s as L,t as g,f as h,g as R,h as _,i as D,d as o,j as m,r as l,e as E}from"../../custom-element.js";import{i as S}from"../../if.js";import{a as V,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 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 a
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -124px;
   }
-}`};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};
+}`};function G(k,t){$(t,!0),B(k,F);let r=d(t,"size",7,"m"),v=d(t,"appearance",7,"standard"),a=d(t,"text",7),f=D(t,["$$slots","$$events","$$legacy","$$host","size","appearance","text"]);const j=()=>{let e;switch(r()){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},w=()=>{let e;switch(r()){case"xs":e=6;break;case"s":e=6;break;case"l":e=19;break;default:e=9}return e};var x={get size(){return r()},set size(e="m"){r(e),m()},get appearance(){return v()},set appearance(e="standard"){v(e),m()},get text(){return a()},set text(e){a(e),m()}},n=A();V(n,()=>({class:["mc-loader",`mc-loader--${r()}`,`mc-loader--${v()}`,a()&&"mc-loader--text-visible"],...f}),void 0,void 0,void 0,"svelte-g7kvnj");var c=o(n),i=o(c),u=o(i);l(i),l(c);var b=L(c,2);{var y=e=>{var s=q(),z=o(s,!0);l(s),g(()=>E(z,a())),h(e,s)};S(b,e=>{a()&&e(y)})}return l(n),g((e,s)=>{p(i,"viewBox",e),p(u,"r",s)},[j,w]),h(k,n),R(x)}customElements.define("m-loader",C(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  /**\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"}
+{"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    [key: string]: any;\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, ...attrs }: 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  {...attrs}\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","attrs","$.rest_props","setViewBox","viewBox","setCircleRadius","circleRadius","div","root","span","$.child","svg","circle","span_1","root_1","$$render","consequent","$.reset","$0","$1","$.append","$$anchor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;mBAEA,gBAsBQ,IAAAA,eAAO,GAAG,EAAEC,qBAAa,UAAU,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAKC,EAAKC,EAAAF,EAAA,uEAEnD,MAAAG,EAAU,IAAS,KACnBC,SAEIR,EAAI,EAAA,KACL,KACHQ,EAAU,sBAEP,IACHA,EAAU,sBAEP,IACHA,EAAU,0BAGVA,EAAU,mBAGPA,CACT,EAEMC,EAAe,IAAS,KACxBC,SAEIV,EAAI,EAAA,KACL,KACHU,EAAe,YAEZ,IACHA,EAAe,YAEZ,IACHA,EAAe,iBAGfA,EAAe,SAGZA,CACT,2CAxCa,IAAG,yDAAe,WAAU,yDA2C1CC,EAAAC,EAAA,IAAAD,eAEG,0BACcX,EAAI,CAAA,iBACJC,EAAU,CAAA,GACxBC,KAAQ,8BAENG,0CAEH,IAAAQ,EAAIC,EATNH,CAAA,EAUII,IADFF,CAAI,EAEAG,IADFD,CAAG,IAAHA,CAAG,IADLF,CAAI,UAAJA,EAAI,CAAA,iBAOFI,EAAIC,EAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YACFf,EAAI,CAAA,CAAA,MADNe,CAAI,WADFf,EAAI,GAAAiB,EAAAC,CAAA,IAfVC,OAAAA,EAAAV,CAAA,cAUII,EAAG,UAAAO,CAAA,IACDN,EAAM,IAAAO,CAAA,GADgE,CAAAhB,EAClBE,CAAe,GAXzEe,EAAAC,EAAAd,CAAA,MAFO"}

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Loader.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

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,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"}
+{"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;AAGrE,OAAO,iBAAiB,CAAC;AAEzB,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,5 +1,6 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import './Loader.svelte';
 const meta = {
     title: 'Indicators/Loader',
     component: 'm-loader',

package/dist/components/loader/Loader.svelte

@@ -5,6 +5,7 @@
    * 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 {
+    [key: string]: any;
     /**
      * Specifies the visual appearance of the loader.
      */
@@ -21,7 +22,7 @@
     text?: string;
   }
 
-  let { size = 'm', appearance = 'standard', text }: Props = $props();
+  let { size = 'm', appearance = 'standard', text, ...attrs }: Props = $props();
 
   const setViewBox = () => {
     let viewBox: string;
@@ -71,6 +72,7 @@
     `mc-loader--${appearance}`,
     text && 'mc-loader--text-visible',
   ]}
+  {...attrs}
 >
   <span class="mc-loader__spinner">
     <svg class="mc-loader__icon" xmlns="http://www.w3.org/2000/svg" viewBox={setViewBox()}>

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

@@ -2,6 +2,7 @@
  * 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 {
+    [key: string]: any;
     /**
      * Specifies the visual appearance of the loader.
      */

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":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IAE/C;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAE9B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAwEH,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,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IAE/C;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAE9B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAwEH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}