@mozaic-ds/web-components 1.0.0 → 1.2.0

package/dist/components/kpiitem/KpiItem.svelte

@@ -0,0 +1,231 @@
+<svelte:options customElement={{ tag: 'm-kpi-item' }} />
+
+<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';
+  /**
+   * 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 {
+    /**
+     * The current value of the kpi item.
+     */
+    value: string;
+    /**
+     * Defines the evolution of the kpi.
+     */
+    trend?: 'increasing' | 'decreasing' | 'stable';
+    /**
+     * Label of the kpi item.
+     */
+    label?: string;
+    /**
+     * Allows to define the kpi item status.
+     */
+    status?: 'info' | 'warning' | 'error' | 'success' | 'neutral';
+    /**
+     * The evolution information defining the kpi.
+     */
+    information?: string;
+    /**
+     * Allows to define the kpi item size.
+     */
+    size?: 's' | 'm' | 'l';
+  }
+
+  let { value, trend, label, status = 'info', information, size = 's' }: Props = $props();
+
+  const isMedium = $derived(size === 'm');
+  const isLarge = $derived(size === 'l');
+
+  const iconMap: Record<NonNullable<Props['trend']>, Component> = {
+    increasing: ArrowTopRight24,
+    decreasing: ArrowBottomRight24,
+    stable: Less24,
+  };
+
+  const IconComponent = $derived(trend ? iconMap[trend] : undefined);
+
+  const rootClasses = $derived(`mc-kpi mc-kpi--${size} mc-kpi--${status}`);
+</script>
+
+<div class={rootClasses}>
+  {#if isMedium && label}
+    <span class="mc-kpi__label">
+      {label}
+    </span>
+  {/if}
+  <div class="mc-kpi__content">
+    <div class="mc-kpi__main">
+      {#if isLarge && label}
+        <span class="mc-kpi__label">
+          {label}
+        </span>
+      {/if}
+      <span class="mc-kpi__value">{value}</span>
+    </div>
+    {#if trend || information}
+      <div class="mc-kpi__aside">
+        {#if isLarge && information}
+          <span class="mc-kpi__detail">
+            {information}
+          </span>
+        {/if}
+
+        {#if trend}
+          <IconComponent className="mc-kpi__icon" color="black" />
+        {/if}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-kpi,
+.mc-kpi * {
+  box-sizing: border-box;
+}
+.mc-kpi {
+  display: inline-block;
+}
+.mc-kpi:not(.mc-kpi--s) {
+  min-width: 10rem;
+}
+.mc-kpi__label {
+  font-size: var(--font-body-s, 0.875rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  display: block;
+}
+.mc-kpi__content {
+  line-height: var(--line-height-s, 1.3);
+  display: flex;
+}
+.mc-kpi__main {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.mc-kpi__value {
+  font-weight: var(--font-weight-semi-bold, 600);
+  font-size: var(--font-body-s, 0.875rem);
+  color: var(--color-kpi-value, var(--kpi-item-color-value-info, #0074aa));
+}
+.mc-kpi__aside {
+  align-items: center;
+  background-color: var(--kpi-item-color-trend-item-background, #ffffff);
+  color: var(--kpi-item-color-trend-item-text, #000000);
+  display: flex;
+  justify-content: center;
+  border-radius: var(--border-radius-xs, 0.125rem);
+}
+.mc-kpi__detail {
+  font-size: var(--font-body-s, 0.875rem);
+}
+.mc-kpi__icon {
+  display: block;
+  height: 1rem;
+  width: 1rem;
+}
+.mc-kpi--s .mc-kpi__content {
+  gap: 0.25rem;
+}
+.mc-kpi--s .mc-kpi__main {
+  background-color: var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));
+  border: 1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));
+  border-radius: 4px;
+  overflow: hidden;
+  padding: 0 0.25rem;
+  height: 1.5rem;
+}
+.mc-kpi--s .mc-kpi__aside {
+  background-color: transparent;
+}
+.mc-kpi--m .mc-kpi__label {
+  color: var(--color-kpi-label-medium, var(--kpi-item-color-label-info-medium, #000000));
+  margin-bottom: 0.25rem;
+}
+.mc-kpi--m .mc-kpi__content {
+  background-color: var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));
+  border: 1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));
+  border-radius: 4px;
+  overflow: hidden;
+  height: 3rem;
+  align-items: center;
+  padding: 0 0.25rem 0 0.5rem;
+  gap: 0.5rem;
+}
+.mc-kpi--m .mc-kpi__main {
+  flex-grow: 1;
+  height: 2.5rem;
+}
+.mc-kpi--m .mc-kpi__value {
+  font-size: var(--font-body-l, 1.125rem);
+}
+.mc-kpi--m .mc-kpi__aside {
+  padding: 0 0.5rem;
+  height: 2.5rem;
+  width: 2.5rem;
+}
+.mc-kpi--l {
+  background-color: var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));
+  border: 1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));
+  border-radius: 4px;
+  overflow: hidden;
+  padding: 0.5rem;
+  height: 9rem;
+}
+.mc-kpi--l .mc-kpi__content {
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+}
+.mc-kpi--l .mc-kpi__main {
+  flex-direction: column;
+  flex-grow: 1;
+}
+.mc-kpi--l .mc-kpi__label {
+  font-size: var(--font-body-m, 1rem);
+  color: var(--color-kpi-label-large, var(--kpi-item-color-label-info-large, #0074aa));
+}
+.mc-kpi--l .mc-kpi__value {
+  font-size: var(--font-heading-l, 2rem);
+}
+.mc-kpi--l .mc-kpi__aside {
+  gap: 0.5rem;
+  height: 2.5rem;
+  padding: 0 0.5rem;
+  font-size: var(--font-body-s, 0.875rem);
+}
+.mc-kpi--warning {
+  --color-kpi-background: var(--kpi-item-color-background-warning, #fdf1e8);
+  --color-kpi-border: var(--kpi-item-color-border-warning, #ef934a);
+  --color-kpi-label-medium: var(--kpi-item-color-label-warning-medium, #000000);
+  --color-kpi-label-large: var(--kpi-item-color-label-warning-large, #b64f00);
+  --color-kpi-value: var(--kpi-item-color-value-warning, #b64f00);
+}
+.mc-kpi--error {
+  --color-kpi-background: var(--kpi-item-color-background-error, #fdeaea);
+  --color-kpi-border: var(--kpi-item-color-border-error, #ef5f5c);
+  --color-kpi-label-medium: var(--kpi-item-color-label-error-medium, #000000);
+  --color-kpi-label-large: var(--kpi-item-color-label-error-large, #c61112);
+  --color-kpi-value: var(--kpi-item-color-value-error, #c61112);
+}
+.mc-kpi--success {
+  --color-kpi-background: var(--kpi-item-color-background-success, #ebf5de);
+  --color-kpi-border: var(--kpi-item-color-border-success, #78be20);
+  --color-kpi-label-medium: var(--kpi-item-color-label-success-medium, #000000);
+  --color-kpi-label-large: var(--kpi-item-color-label-success-large, #117f03);
+  --color-kpi-value: var(--kpi-item-color-value-success, #117f03);
+}
+.mc-kpi--neutral {
+  --color-kpi-background: var(--kpi-item-color-background-neutral, #f2f2f2);
+  --color-kpi-border: var(--kpi-item-color-border-neutral, #999999);
+  --color-kpi-label-medium: var(--kpi-item-color-label-neutral-medium, #000000);
+  --color-kpi-label-large: var(--kpi-item-color-label-neutral-large, #666666);
+  --color-kpi-value: var(--kpi-item-color-value-neutral, #666666);
+}</style>

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

@@ -0,0 +1,34 @@
+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 {
+    /**
+     * The current value of the kpi item.
+     */
+    value: string;
+    /**
+     * Defines the evolution of the kpi.
+     */
+    trend?: 'increasing' | 'decreasing' | 'stable';
+    /**
+     * Label of the kpi item.
+     */
+    label?: string;
+    /**
+     * Allows to define the kpi item status.
+     */
+    status?: 'info' | 'warning' | 'error' | 'success' | 'neutral';
+    /**
+     * The evolution information defining the kpi.
+     */
+    information?: string;
+    /**
+     * Allows to define the kpi item size.
+     */
+    size?: 's' | 'm' | 'l';
+}
+declare const KpiItem: Component<Props, {}, "">;
+type KpiItem = ReturnType<typeof KpiItem>;
+export default KpiItem;
+//# sourceMappingURL=KpiItem.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/kpiitem/README.md

@@ -0,0 +1,15 @@
+# `m-kpi-item`
+
+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.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `value*` | The current value of the kpi item. | `string` |   |
+| `trend` | Defines the evolution of the kpi. | `'increasing'` `'decreasing'` `'stable'` |   |
+| `label` | Label of the kpi item. | `string` |   |
+| `status` | Allows to define the kpi item status. | `'info'` `'warning'` `'error'` `'success'` `'neutral'` | `info` |
+| `information` | The evolution information defining the kpi. | `string` |   |
+| `size` | Allows to define the kpi item size. | `'s'` `'m'` `'l'` | `s` |
+

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.js

@@ -1,4 +1,4 @@
-import{c as f,p as d,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 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:`/**
  * 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(--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(--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){d(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",f(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,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));
 //# 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\n  class={[\n    'mc-linear-progressbar-buffer',\n    `mc-linear-progressbar-buffer--${size}`,\n  ]}\n>\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":";;wnBAAA,gBAiBQ,IAAAA,gBAAQ,CAAC,EAAEC,eAAO,GAAG,6CAAb,EAAC,6CAAS,IAAG,qDAKzB,gEACiCA,GAAI,+CAMTD,EAAK,CAAA,GAAA,sBAClBA,GAAK,eAZxB"}
+{"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"}

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte

@@ -18,12 +18,7 @@
   let { value = 0, size = 'm' }: Props = $props();
 </script>
 
-<div
-  class={[
-    'mc-linear-progressbar-buffer',
-    `mc-linear-progressbar-buffer--${size}`,
-  ]}
->
+<div class={['mc-linear-progressbar-buffer', `mc-linear-progressbar-buffer--${size}`]}>
   <div
     class="mc-linear-progressbar-buffer__indicator"
     role="progressbar"
@@ -43,14 +38,14 @@
   height: 0.25rem;
   position: relative;
   min-width: 6rem;
-  border-radius: var(--radius-l, 1rem);
+  border-radius: var(--border-radius-l, 1rem);
 }
 .mc-linear-progressbar-buffer__indicator {
   background-color: var(--progressbar-color-indicator, #464e63);
   height: 100%;
   transition: width 0.4s ease;
   overflow: hidden;
-  border-radius: var(--radius-l, 1rem);
+  border-radius: var(--border-radius-l, 1rem);
   box-sizing: border-box;
   width: calc(var(--progress-value) * 1%);
 }

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;AAoBH,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;;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 d,p as g,a as b,b as m,f as u,t as f,i as h,j as _,k,d as a,N 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 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:`/**
  * 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(--radius-l, 1rem);box-sizing:border-box;}.mc-linear-progressbar-percentage__indicator.svelte-kh7ttv {border-radius:var(--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(--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(p=0){e(p),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",d(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(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));
 //# 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":";;42CAAA,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    /**\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"}

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte

@@ -42,11 +42,11 @@
   height: 1.5rem;
   position: relative;
   min-width: 6rem;
-  border-radius: var(--radius-l, 1rem);
+  border-radius: var(--border-radius-l, 1rem);
   box-sizing: border-box;
 }
 .mc-linear-progressbar-percentage__indicator {
-  border-radius: var(--radius-l, 1rem);
+  border-radius: var(--border-radius-l, 1rem);
   background-color: var(--progressbar-color-indicator, #464e63);
   min-width: 40px;
   height: 100%;
@@ -61,7 +61,7 @@
 }
 .mc-linear-progressbar-percentage__label {
   box-sizing: border-box;
-  border-radius: var(--radius-l, 1rem);
+  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;

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:`/**
  * 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-s, 1px) 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 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));
 //# 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":";;mzDAAA,oBAqCIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAMF,EAAAC,EAAA,SAAA,CAAA,EACNE,EAAMH,EAAAC,EAAA,SAAA,CAAA,EACNG,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,uBAAe,MAAM,sMAFR,WAAU,6CAChB,IAAG,6DACK,OAAM,2FAelBA,EAAY,IAAK,QAAMC,EAAAC,CAAA,gIAQvBF,EAAY,IAAK,SAAOC,EAAAE,CAAA,gCAjB3B,sBACYL,EAAU,CAAA,eACVC,EAAI,CAAA,GAChBF,EAAM,GAAI,kBACT,CAAAA,EAAM,GAAI,yFARf"}
+{"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"}

package/dist/components/link/Link.svelte

@@ -122,7 +122,7 @@
   font-weight: var(--link-font-weight, 600);
 }
 .mc-link--stand-alone .mc-link__label {
-  border-bottom: var(--border-s, 1px) solid currentColor;
+  border-bottom: var(--border-width-s, 0.0625rem) solid currentColor;
 }
 .mc-link--stand-alone:hover .mc-link__label {
   border-color: transparent;

package/dist/components/loader/Loader.js

@@ -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"),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};
+}`};function G(k,s){C(s,!0),B(k,F);let t=d(s,"size",7,"m"),c=d(s,"appearance",7,"standard"),r=d(s,"text",7);const f=()=>{let e;switch(t()){case"xs":e="0 0 20 20";break;case"s":e="0 0 24 24";break;case"l":e="0 0 64 64";break;default:e="0 0 32 32"}return e},j=()=>{let e;switch(t()){case"xs":e=6;break;case"s":e=6;break;case"l":e=19;break;default:e=9}return e};var w={get size(){return t()},set size(e="m"){t(e),m()},get appearance(){return c()},set appearance(e="standard"){c(e),m()},get text(){return r()},set text(e){r(e),m()}},n=A(),v=l(n),i=l(v),x=l(i);o(i),o(v);var u=L(v,2);{var b=e=>{var a=q(),y=l(a,!0);o(a),g(()=>S(y,r())),h(e,a)};V(u,e=>{r()&&e(b)})}return o(n),g((e,a)=>{R(n,1,D(["mc-loader",`mc-loader--${t()}`,`mc-loader--${c()}`,r()&&"mc-loader--text-visible"]),"svelte-g7kvnj"),p(i,"viewBox",e),p(x,"r",a)},[f,j]),h(k,n),E(w)}customElements.define("m-loader",z(G,{size:{},appearance:{},text:{}},[],[],!0));export{G as L};
 //# sourceMappingURL=Loader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../../src/components/loader/Loader.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-loader' }} />\n\n<script lang=\"ts\">\n  /**\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"}
+{"version":3,"file":"Loader.js","sources":["../../../src/components/loader/Loader.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-loader' }} />\n\n<script lang=\"ts\">\n  /**\n   * A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.\n   */\n  interface Props {\n    /**\n     * Specifies the visual appearance of the loader.\n     */\n    appearance?: 'standard' | 'accent' | 'inverse';\n\n    /**\n     * Defines the size of the loader.\n     */\n    size?: 'xs' | 's' | 'm' | 'l';\n\n    /**\n     * Text to display alongside the loader when using the loader inside an `Overlay`.\n     */\n    text?: string;\n  }\n\n  let { size = 'm', appearance = 'standard', text }: Props = $props();\n\n  const setViewBox = () => {\n    let viewBox: string;\n\n    switch (size) {\n      case 'xs':\n        viewBox = '0 0 20 20';\n        break;\n      case 's':\n        viewBox = '0 0 24 24';\n        break;\n      case 'l':\n        viewBox = '0 0 64 64';\n        break;\n      default:\n        viewBox = '0 0 32 32';\n    }\n\n    return viewBox;\n  };\n\n  const setCircleRadius = () => {\n    let circleRadius: number;\n\n    switch (size) {\n      case 'xs':\n        circleRadius = 6;\n        break;\n      case 's':\n        circleRadius = 6;\n        break;\n      case 'l':\n        circleRadius = 19;\n        break;\n      default:\n        circleRadius = 9;\n    }\n\n    return circleRadius;\n  };\n</script>\n\n<div\n  class={[\n    'mc-loader',\n    `mc-loader--${size}`,\n    `mc-loader--${appearance}`,\n    text && 'mc-loader--text-visible',\n  ]}\n>\n  <span class=\"mc-loader__spinner\">\n    <svg class=\"mc-loader__icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox={setViewBox()}>\n      <circle class=\"mc-loader__path\" cx=\"50%\" cy=\"50%\" r={setCircleRadius()} />\n    </svg>\n  </span>\n\n  {#if text}\n    <span class=\"mc-loader__text\">\n      {text}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loader';\n</style>\n"],"names":["size","appearance","text","$.prop","$$props","setViewBox","viewBox","setCircleRadius","circleRadius","$$render","consequent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAA,gBAuBQ,IAAAA,eAAO,GAAG,EAAEC,qBAAa,UAAU,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAEzC,MAAAC,EAAU,IAAS,KACnBC,SAEIN,EAAI,EAAA,KACL,KACHM,EAAU,sBAEP,IACHA,EAAU,sBAEP,IACHA,EAAU,0BAGVA,EAAU,mBAGPA,CACT,EAEMC,EAAe,IAAS,KACxBC,SAEIR,EAAI,EAAA,KACL,KACHQ,EAAe,YAEZ,IACHA,EAAe,YAEZ,IACHA,EAAe,iBAGfA,EAAe,SAGZA,CACT,2CAxCa,IAAG,yDAAe,WAAU,yJA2DpCN,EAAI,CAAA,CAAA,kBAFJA,EAAI,GAAAO,EAAAC,CAAA,mCAZP,0BACcV,EAAI,CAAA,iBACJC,EAAU,CAAA,GACxBC,KAAQ,0EAIiE,CAAAG,EAClBE,CAAe,cAZ1E"}

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

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

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

@@ -6,7 +6,7 @@ const meta = {
     argTypes: {
         size: {
             control: 'radio',
-            options: ['s', 'm', 'l'],
+            options: ['xs', 's', 'm', 'l'],
         },
         appearance: {
             control: 'radio',

package/dist/components/loader/Loader.svelte

@@ -13,7 +13,7 @@
     /**
      * Defines the size of the loader.
      */
-    size?: 's' | 'm' | 'l';
+    size?: 'xs' | 's' | 'm' | 'l';
 
     /**
      * Text to display alongside the loader when using the loader inside an `Overlay`.
@@ -27,6 +27,9 @@
     let viewBox: string;
 
     switch (size) {
+      case 'xs':
+        viewBox = '0 0 20 20';
+        break;
       case 's':
         viewBox = '0 0 24 24';
         break;
@@ -44,6 +47,9 @@
     let circleRadius: number;
 
     switch (size) {
+      case 'xs':
+        circleRadius = 6;
+        break;
       case 's':
         circleRadius = 6;
         break;
@@ -67,11 +73,7 @@
   ]}
 >
   <span class="mc-loader__spinner">
-    <svg
-      class="mc-loader__icon"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox={setViewBox()}
-    >
+    <svg class="mc-loader__icon" xmlns="http://www.w3.org/2000/svg" viewBox={setViewBox()}>
       <circle class="mc-loader__path" cx="50%" cy="50%" r={setCircleRadius()} />
     </svg>
   </span>

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

@@ -9,7 +9,7 @@ interface Props {
     /**
      * Defines the size of the loader.
      */
-    size?: 's' | 'm' | 'l';
+    size?: 'xs' | 's' | 'm' | 'l';
     /**
      * Text to display alongside the loader when using the loader inside an `Overlay`.
      */

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,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"}
+{"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"}

package/dist/components/loader/README.md

@@ -7,6 +7,6 @@ A loader is a visual indicator used to inform users that a process is in progres
 | 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` |
+| `size` | Defines the size of the loader. | `'xs'` `'s'` `'m'` `'l'` | `m` |
 | `text` | Text to display alongside the loader when using the loader inside an `Overlay`. | `string` |   |
 

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

@@ -3,5 +3,5 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
-export declare const text: Story;
+export declare const Text: Story;
 //# sourceMappingURL=LoadingOverlay.stories.d.ts.map

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

@@ -32,7 +32,7 @@ const meta = {
 };
 export default meta;
 export const Default = {};
-export const text = {
+export const Text = {
     args: {
         text: 'Insert your text here',
     },