@mozaic-ds/web-components 1.1.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 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":";;wnBAAA,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    /**\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

@@ -38,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/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/modal/Modal.js

@@ -2,8 +2,8 @@ import{v as J,c as K,p as L,a as N,b as s,f as w,d as t,s as l,t as E,i as y,j a
  * Do not edit directly, this file was auto-generated.
  */.mc-modal.svelte-1tduk3b {box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 3);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto;}
 @media (width >= 680px) {.mc-modal.svelte-1tduk3b {align-items:center;}
-}.mc-modal__dialog.svelte-1tduk3b {background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease;visibility:hidden;width:100%;border-radius:var(--radius-l, 1rem) var(--radius-l, 1rem) 0 0;z-index:3;}
-@media (width >= 680px) {.mc-modal__dialog.svelte-1tduk3b {width:38rem;border-radius:var(--radius-l, 1rem);}
+}.mc-modal__dialog.svelte-1tduk3b {background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease;visibility:hidden;width:100%;border-radius:var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;z-index:3;}
+@media (width >= 680px) {.mc-modal__dialog.svelte-1tduk3b {width:38rem;border-radius:var(--border-radius-l, 1rem);}
 }.mc-modal.is-open.svelte-1tduk3b .mc-modal__dialog:where(.svelte-1tduk3b) {opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s, transform 0.4s ease, opacity 0.4s ease;visibility:visible;}.mc-modal__header.svelte-1tduk3b {align-items:center;display:flex;gap:0.5rem;min-height:3rem;padding:1rem;position:relative;}
 @media (width >= 680px) {.mc-modal__header.svelte-1tduk3b {padding:1.5rem 1.5rem 1rem 1.5rem;}
 }.mc-modal__icon.svelte-1tduk3b {width:2rem;height:2rem;}.mc-modal__title.svelte-1tduk3b {font-size:var(--font-title-m, 1.5rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--modal-color-title, #000000);margin-bottom:0.5rem;margin-top:0.5rem;padding-right:3rem;}.mc-modal__close.svelte-1tduk3b {position:absolute;top:0.75rem;right:0.75rem;}.mc-modal__body.svelte-1tduk3b {font-size:var(--font-size-150, 1rem);color:var(--modal-color-paragraph, #404040);padding:0 1rem;margin-bottom:1rem;}
@@ -12,5 +12,5 @@ import{v as J,c as K,p as L,a as N,b as s,f as w,d as t,s as l,t as E,i as y,j a
 @media (width >= 680px) {.mc-modal__footer.svelte-1tduk3b {flex-direction:row;padding:0.5rem 1.5rem 1.5rem 1.5rem;}
 }.mc-modal__link.svelte-1tduk3b {order:1;}
 @media (width >= 680px) {.mc-modal__link.svelte-1tduk3b {margin-right:auto;order:0;}
-}.mc-button.svelte-1tduk3b {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1tduk3b:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1tduk3b:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1tduk3b {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1tduk3b {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-radius, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1tduk3b:focus-visible {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-button--ghost.svelte-1tduk3b {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-1tduk3b:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1tduk3b:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-1tduk3b {border-radius:var(--radius-full, 100%);padding:0;}.mc-modal__icon.svelte-1tduk3b:empty {display:none;}`};function oe(z,r){L(r,!0),N(z,te);let d=s(r,"open",7),b=s(r,"title",7),n=s(r,"description",7),u=s(r,"closable",7,!0),v;function Y(){d(!1);const e=new CustomEvent("update:open",{detail:d(),bubbles:!0,composed:!0});v.dispatchEvent(e)}var D={get open(){return d()},set open(e){d(e),c()},get title(){return b()},set title(e){b(e),c()},get description(){return n()},set description(e){n(e),c()},get closable(){return u()},set closable(e=!0){u(e),c()}},i=ee(),f=t(i),g=t(f),p=t(g),M=t(p);m(M,r,"icon",{}),o(p);var k=l(p,2),S=t(k,!0);o(k);var q=l(k,2);{var A=e=>{var a=Z();a.__click=Y;var x=t(a);W(x,{class:"mc-modal__close","aria-hidden":"true"}),o(a),y(e,a)};T(q,e=>{u()&&e(A)})}o(g);var _=l(g,2),C=t(_);{var B=e=>{var a=$(),x=t(a,!0);o(a),E(()=>O(x,n())),y(e,a)};T(C,e=>{n()&&e(B)})}var F=l(C,2);m(F,r,"default",{}),o(_);var j=l(_,2),h=t(j),G=t(h);m(G,r,"link",{}),o(h);var H=l(h,2);m(H,r,"footer",{}),o(j),o(f);var I=l(f,2);return X(I,{get isvisible(){return d()},dialoglabel:"modal"}),o(i),V(i,e=>v=e,()=>v),E(()=>{Q(i,1,R(["mc-modal",d()&&"is-open"]),"svelte-1tduk3b"),U(i,"aria-hidden",!d()),O(S,b())}),y(z,i),P(D)}J(["click"]);customElements.define("m-modal",K(oe,{open:{},title:{},description:{},closable:{}},["icon","default","link","footer"],[],!0));
+}.mc-button.svelte-1tduk3b {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1tduk3b:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1tduk3b:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1tduk3b {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1tduk3b {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1tduk3b:focus-visible {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-button--ghost.svelte-1tduk3b {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-1tduk3b:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1tduk3b:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-1tduk3b {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-modal__icon.svelte-1tduk3b:empty {display:none;}`};function oe(z,r){L(r,!0),N(z,te);let d=s(r,"open",7),b=s(r,"title",7),n=s(r,"description",7),u=s(r,"closable",7,!0),v;function Y(){d(!1);const e=new CustomEvent("update:open",{detail:d(),bubbles:!0,composed:!0});v.dispatchEvent(e)}var D={get open(){return d()},set open(e){d(e),c()},get title(){return b()},set title(e){b(e),c()},get description(){return n()},set description(e){n(e),c()},get closable(){return u()},set closable(e=!0){u(e),c()}},i=ee(),f=t(i),g=t(f),p=t(g),M=t(p);m(M,r,"icon",{}),o(p);var k=l(p,2),S=t(k,!0);o(k);var q=l(k,2);{var A=e=>{var a=Z();a.__click=Y;var x=t(a);W(x,{class:"mc-modal__close","aria-hidden":"true"}),o(a),y(e,a)};T(q,e=>{u()&&e(A)})}o(g);var _=l(g,2),C=t(_);{var B=e=>{var a=$(),x=t(a,!0);o(a),E(()=>O(x,n())),y(e,a)};T(C,e=>{n()&&e(B)})}var F=l(C,2);m(F,r,"default",{}),o(_);var j=l(_,2),h=t(j),G=t(h);m(G,r,"link",{}),o(h);var H=l(h,2);m(H,r,"footer",{}),o(j),o(f);var I=l(f,2);return X(I,{get isvisible(){return d()},dialoglabel:"modal"}),o(i),V(i,e=>v=e,()=>v),E(()=>{Q(i,1,R(["mc-modal",d()&&"is-open"]),"svelte-1tduk3b"),U(i,"aria-hidden",!d()),O(S,b())}),y(z,i),P(D)}J(["click"]);customElements.define("m-modal",K(oe,{open:{},title:{},description:{},closable:{}},["icon","default","link","footer"],[],!0));
 //# sourceMappingURL=Modal.js.map

package/dist/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-modal' }} />\n\n<script lang=\"ts\">\n  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n  /**\n   * A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.\n   *\n   * @slot icon - Use this slot to insert an icon next to the title of the modal.\n   * @slot default - Use this slot to insert the content of the modal.\n   * @slot link - Use this slot to insert a link in the footer.\n   * @slot footer - Use this slot to insert buttons in the footer.\n   * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.\n   */\n  interface Props {\n    /**\n     * if `true`, display the modal.\n     */\n    open?: boolean;\n    /**\n     * Title of the modal.\n     */\n    title: string;\n    /**\n     * Description of the modal.\n     */\n    description?: string;\n    /**\n     * if `true`, display the close button.\n     */\n    closable?: boolean;\n  }\n\n  let { open, title, description, closable = true }: Props = $props();\n  let element: HTMLElement;\n\n  function onClose() {\n    open = false;\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  }\n</script>\n\n<section\n  class={['mc-modal', open && 'is-open']}\n  tabindex=\"-1\"\n  aria-labelledby=\"modalTitle\"\n  aria-hidden={!open}\n  bind:this={element}\n>\n  <div class=\"mc-modal__dialog\" role=\"document\">\n    <header class=\"mc-modal__header\">\n      <span class=\"mc-modal__icon\">\n        <slot name=\"icon\" />\n      </span>\n      <h2 class=\"mc-modal__title\" id=\"modalTitle\">{title}</h2>\n      {#if closable}\n        <button\n          type=\"button\"\n          class=\"mc-modal__close mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Close\"\n          onclick={onClose}\n        >\n          <Cross24 class=\"mc-modal__close\" aria-hidden=\"true\" />\n        </button>\n      {/if}\n    </header>\n\n    <main class=\"mc-modal__body\">\n      {#if description}\n        <p>{description}</p>\n      {/if}\n      <slot />\n    </main>\n\n    <footer class=\"mc-modal__footer\">\n      <span class=\"mc-modal__link\">\n        <slot name=\"link\" />\n      </span>\n      <slot name=\"footer\" />\n    </footer>\n  </div>\n\n  <MOverlay isvisible={open} dialoglabel=\"modal\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/modal';\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-modal__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["open","$.prop","$$props","title","description","closable","element","onClose","event","$$render","consequent","consequent_1","$.bind_this","section","$$value"],"mappings":";;;;;;;;;;;;;;izEAAA,qBAiCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EAAEG,mBAAW,EAAI,EAC3CC,EAEK,SAAAC,GAAU,CACjBP,EAAO,EAAK,EAEN,MAAAQ,EAAK,IAAO,YAAY,eAC5B,OAAQR,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBM,EAAQ,cAAcE,CAAK,CAC7B,yMAZ2C,GAAI,6IAiC9BD,sFALRF,EAAQ,GAAAI,EAAAC,CAAA,2EAcPN,EAAW,CAAA,CAAA,kBADZA,EAAW,GAAAK,EAAAE,CAAA,qLAcCX,EAAI,8BAnCdY,EAAAC,EAAAC,GAAAR,QAAAA,CAAO,kBAJV,WAAYN,KAAQ,SAAS,CAAA,EAAA,gBAAA,qBAGvBA,EAAI,CAAA,MAQ+BG,GAAK,eAdxD"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-modal' }} />\n\n<script lang=\"ts\">\n  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n  /**\n   * A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.\n   *\n   * @slot icon - Use this slot to insert an icon next to the title of the modal.\n   * @slot default - Use this slot to insert the content of the modal.\n   * @slot link - Use this slot to insert a link in the footer.\n   * @slot footer - Use this slot to insert buttons in the footer.\n   * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.\n   */\n  interface Props {\n    /**\n     * if `true`, display the modal.\n     */\n    open?: boolean;\n    /**\n     * Title of the modal.\n     */\n    title: string;\n    /**\n     * Description of the modal.\n     */\n    description?: string;\n    /**\n     * if `true`, display the close button.\n     */\n    closable?: boolean;\n  }\n\n  let { open, title, description, closable = true }: Props = $props();\n  let element: HTMLElement;\n\n  function onClose() {\n    open = false;\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  }\n</script>\n\n<section\n  class={['mc-modal', open && 'is-open']}\n  tabindex=\"-1\"\n  aria-labelledby=\"modalTitle\"\n  aria-hidden={!open}\n  bind:this={element}\n>\n  <div class=\"mc-modal__dialog\" role=\"document\">\n    <header class=\"mc-modal__header\">\n      <span class=\"mc-modal__icon\">\n        <slot name=\"icon\" />\n      </span>\n      <h2 class=\"mc-modal__title\" id=\"modalTitle\">{title}</h2>\n      {#if closable}\n        <button\n          type=\"button\"\n          class=\"mc-modal__close mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Close\"\n          onclick={onClose}\n        >\n          <Cross24 class=\"mc-modal__close\" aria-hidden=\"true\" />\n        </button>\n      {/if}\n    </header>\n\n    <main class=\"mc-modal__body\">\n      {#if description}\n        <p>{description}</p>\n      {/if}\n      <slot />\n    </main>\n\n    <footer class=\"mc-modal__footer\">\n      <span class=\"mc-modal__link\">\n        <slot name=\"link\" />\n      </span>\n      <slot name=\"footer\" />\n    </footer>\n  </div>\n\n  <MOverlay isvisible={open} dialoglabel=\"modal\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/modal';\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-modal__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["open","$.prop","$$props","title","description","closable","element","onClose","event","$$render","consequent","consequent_1","$.bind_this","section","$$value"],"mappings":";;;;;;;;;;;;;;i0EAAA,qBAiCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EAAEG,mBAAW,EAAI,EAC3CC,EAEK,SAAAC,GAAU,CACjBP,EAAO,EAAK,EAEN,MAAAQ,EAAK,IAAO,YAAY,eAC5B,OAAQR,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBM,EAAQ,cAAcE,CAAK,CAC7B,yMAZ2C,GAAI,6IAiC9BD,sFALRF,EAAQ,GAAAI,EAAAC,CAAA,2EAcPN,EAAW,CAAA,CAAA,kBADZA,EAAW,GAAAK,EAAAE,CAAA,qLAcCX,EAAI,8BAnCdY,EAAAC,EAAAC,GAAAR,QAAAA,CAAO,kBAJV,WAAYN,KAAQ,SAAS,CAAA,EAAA,gBAAA,qBAGvBA,EAAI,CAAA,MAQ+BG,GAAK,eAdxD"}

package/dist/components/modal/Modal.svelte

@@ -119,13 +119,13 @@
   transition: visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease;
   visibility: hidden;
   width: 100%;
-  border-radius: var(--radius-l, 1rem) var(--radius-l, 1rem) 0 0;
+  border-radius: var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;
   z-index: 3;
 }
 @media (width >= 680px) {
   .mc-modal__dialog {
     width: 38rem;
-    border-radius: var(--radius-l, 1rem);
+    border-radius: var(--border-radius-l, 1rem);
   }
 }
 .mc-modal.is-open .mc-modal__dialog {
@@ -238,7 +238,7 @@
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: var(--button-radius, 0.25rem);
+  border-radius: var(--button-border-radius-s, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -402,7 +402,7 @@
   cursor: not-allowed;
 }
 .mc-button--icon-button {
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   padding: 0;
 }
 .mc-button--loading .mc-button__loader {

package/dist/components/numberbadge/NumberBadge.js

@@ -1,4 +1,4 @@
 import{c as i,p as m,a as g,b as o,f,t as u,i as v,j as p,k as b,d as h,r as x,e as z,g as k,h as _}from"../../custom-element.js";var w=f("<div> </div>");const y={hash:"svelte-sb883",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-number-badge.svelte-sb883 {color:var(--number-badge-color-text-standard, #ffffff);background-color:var(--number-badge-color-background-standard, #464e63);height:1rem;min-width:1rem;padding-inline:0.125rem;font-size:var(--font-size-25, 0.625rem);border-radius:var(--radius-l, 1rem);font-weight:var(--font-weight-semi-bold, 600);display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;line-height:1;}.mc-number-badge--m.svelte-sb883 {height:1.5rem;min-width:1.5rem;padding-inline:0.25rem;font-size:var(--font-size-50, 0.75rem);}.mc-number-badge--accent.svelte-sb883 {color:var(--number-badge-color-text-accent, #ffffff);background-color:var(--number-badge-color-background-accent, #117f03);}.mc-number-badge--danger.svelte-sb883 {color:var(--number-badge-color-text-danger, #ffffff);background-color:var(--number-badge-color-background-danger, #c61112);}.mc-number-badge--inverse.svelte-sb883 {color:var(--number-badge-color-text-inverse, #464e63);background-color:var(--number-badge-color-background-inverse, #ffffff);}`};function j(d,r){m(r,!0),g(d,y);let t=o(r,"label",7),n=o(r,"appearance",7,"standard"),s=o(r,"size",7,"s");var c={get label(){return t()},set label(e){t(e),b()},get appearance(){return n()},set appearance(e="standard"){n(e),b()},get size(){return s()},set size(e="s"){s(e),b()}},a=w(),l=h(a,!0);return x(a),u(()=>{z(a,1,k(["mc-number-badge",`mc-number-badge--${n()}`,`mc-number-badge--${s()}`]),"svelte-sb883"),_(l,t())}),v(d,a),p(c)}customElements.define("m-number-badge",i(j,{label:{},appearance:{},size:{}},[],[],!0));export{j as N};
+ */.mc-number-badge.svelte-sb883 {color:var(--number-badge-color-text-standard, #ffffff);background-color:var(--number-badge-color-background-standard, #464e63);height:1rem;min-width:1rem;padding-inline:0.125rem;font-size:var(--font-size-25, 0.625rem);border-radius:var(--border-radius-l, 1rem);font-weight:var(--font-weight-semi-bold, 600);display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;line-height:1;}.mc-number-badge--m.svelte-sb883 {height:1.5rem;min-width:1.5rem;padding-inline:0.25rem;font-size:var(--font-size-50, 0.75rem);}.mc-number-badge--accent.svelte-sb883 {color:var(--number-badge-color-text-accent, #ffffff);background-color:var(--number-badge-color-background-accent, #117f03);}.mc-number-badge--danger.svelte-sb883 {color:var(--number-badge-color-text-danger, #ffffff);background-color:var(--number-badge-color-background-danger, #c61112);}.mc-number-badge--inverse.svelte-sb883 {color:var(--number-badge-color-text-inverse, #464e63);background-color:var(--number-badge-color-background-inverse, #ffffff);}`};function j(d,r){m(r,!0),g(d,y);let t=o(r,"label",7),n=o(r,"appearance",7,"standard"),s=o(r,"size",7,"s");var c={get label(){return t()},set label(e){t(e),b()},get appearance(){return n()},set appearance(e="standard"){n(e),b()},get size(){return s()},set size(e="s"){s(e),b()}},a=w(),l=h(a,!0);return x(a),u(()=>{z(a,1,k(["mc-number-badge",`mc-number-badge--${n()}`,`mc-number-badge--${s()}`]),"svelte-sb883"),_(l,t())}),v(d,a),p(c)}customElements.define("m-number-badge",i(j,{label:{},appearance:{},size:{}},[],[],!0));export{j as N};
 //# sourceMappingURL=NumberBadge.js.map

package/dist/components/numberbadge/NumberBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberBadge.js","sources":["../../../src/components/numberbadge/NumberBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-number-badge' }} />\n\n<script lang=\"ts\">\n  /**\n   * A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.\n   */\n  interface Props {\n    /**\n     * Content of the badge.\n     */\n    label: number;\n    /**\n     * Allows to define the badge appearance.\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n\n    /**\n     * Allows to define the badge size.\n     */\n    size?: 's' | 'm';\n  }\n\n  let { label, appearance = 'standard', size = 's' }: Props = $props();\n</script>\n\n<div class={['mc-number-badge', `mc-number-badge--${appearance}`, `mc-number-badge--${size}`]}>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/number-badge';\n</style>\n"],"names":["label","$.prop","$$props","appearance","size"],"mappings":";;+iCAAA,oBAsBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,sGAAtB,WAAU,6CAAS,IAAG,wDAGrC,sCAAuCD,EAAU,CAAA,uBAAwBC,GAAI,yBACvFJ,GAAK,eAHR"}
+{"version":3,"file":"NumberBadge.js","sources":["../../../src/components/numberbadge/NumberBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-number-badge' }} />\n\n<script lang=\"ts\">\n  /**\n   * A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.\n   */\n  interface Props {\n    /**\n     * Content of the badge.\n     */\n    label: number;\n    /**\n     * Allows to define the badge appearance.\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n\n    /**\n     * Allows to define the badge size.\n     */\n    size?: 's' | 'm';\n  }\n\n  let { label, appearance = 'standard', size = 's' }: Props = $props();\n</script>\n\n<div class={['mc-number-badge', `mc-number-badge--${appearance}`, `mc-number-badge--${size}`]}>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/number-badge';\n</style>\n"],"names":["label","$.prop","$$props","appearance","size"],"mappings":";;sjCAAA,oBAsBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,sGAAtB,WAAU,6CAAS,IAAG,wDAGrC,sCAAuCD,EAAU,CAAA,uBAAwBC,GAAI,yBACvFJ,GAAK,eAHR"}

package/dist/components/numberbadge/NumberBadge.svelte

@@ -37,7 +37,7 @@
   min-width: 1rem;
   padding-inline: 0.125rem;
   font-size: var(--font-size-25, 0.625rem);
-  border-radius: var(--radius-l, 1rem);
+  border-radius: var(--border-radius-l, 1rem);
   font-weight: var(--font-weight-semi-bold, 600);
   display: inline-flex;
   align-items: center;

package/dist/components/pagination/Pagination.js

@@ -1,14 +1,14 @@
-import{c as I,p as S,b as o,A as U,t as _,i as h,j as D,k as i,e as V,g as W,v as ne,a as ce,w as y,l as de,f as z,d as N,s as K,m as l,L as k,r as w,x as B,h as O}from"../../custom-element.js";import{i as M}from"../../if.js";import{e as ue,i as fe}from"../../each.js";import{s as x,a as X,d as ve,f as ge}from"../../attributes.js";import"../../legacy.js";import{B as Q}from"../button/Button.js";import{I as T}from"../iconbutton/IconButton.js";import"../../slot.js";import"../loader/Loader.js";var me=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function j(g,a){S(a,!1);let d=o(a,"id",12,void 0),u=o(a,"style",12,void 0),c=o(a,"className",12,void 0),f=o(a,"fill",12,void 0),v=o(a,"size",12,"1.5rem");var m={get id(){return d()},set id(t){d(t),i()},get style(){return u()},set style(t){u(t),i()},get className(){return c()},set className(t){c(t),i()},get fill(){return f()},set fill(t){f(t),i()},get size(){return v()},set size(t){v(t),i()}},n=me();return _(()=>{x(n,"id",d()),X(n,u()),V(n,0,W(c())),x(n,"fill",f())}),h(g,n),D(m)}customElements.define("chevron-left-24",I(j,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var pe=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414"></path></svg>');function A(g,a){S(a,!1);let d=o(a,"id",12,void 0),u=o(a,"style",12,void 0),c=o(a,"className",12,void 0),f=o(a,"fill",12,void 0),v=o(a,"size",12,"1.5rem");var m={get id(){return d()},set id(t){d(t),i()},get style(){return u()},set style(t){u(t),i()},get className(){return c()},set className(t){c(t),i()},get fill(){return f()},set fill(t){f(t),i()},get size(){return v()},set size(t){v(t),i()}},n=pe();return _(()=>{x(n,"id",d()),X(n,u()),V(n,0,W(c())),x(n,"fill",f())}),h(g,n),D(m)}customElements.define("chevron-right-24",I(A,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function be(g,a){const d=Number(g.target.value);a(d)}var he=z("<option> </option>"),xe=z('<div class="mc-pagination__field"><select class="mc-select mc-pagination__select svelte-19eta05"></select></div>'),we=z('<span class="mc-pagination__label svelte-19eta05" aria-current="page"> </span>'),_e=z('<nav class="mc-pagination svelte-19eta05" aria-label="pagination"><!> <!> <!></nav>');const ye={hash:"svelte-19eta05",code:`/**
+import{c as S,p as A,b as i,z as U,t as _,i as h,j as D,k as o,e as V,g as W,v as ce,a as de,w as y,l as ue,f as z,d as N,s as K,m as l,C as k,r as w,x as B,h as O}from"../../custom-element.js";import{i as M}from"../../if.js";import{e as fe,i as ve}from"../../each.js";import{s as x,a as X,c as me,f as ge}from"../../attributes.js";import"../../legacy.js";import{B as Q}from"../button/Button.js";import{I as T}from"../iconbutton/IconButton.js";import"../../slot.js";import"../loader/Loader.js";var be=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function j(b,a){A(a,!1);let f=i(a,"id",12,void 0),d=i(a,"style",12,void 0),c=i(a,"className",12,void 0),u=i(a,"fill",12,void 0),v=i(a,"size",12,"1.5rem");var m={get id(){return f()},set id(t){f(t),o()},get style(){return d()},set style(t){d(t),o()},get className(){return c()},set className(t){c(t),o()},get fill(){return u()},set fill(t){u(t),o()},get size(){return v()},set size(t){v(t),o()}},n=be();return _(()=>{x(n,"id",f()),X(n,d()),V(n,0,W(c())),x(n,"fill",u())}),h(b,n),D(m)}customElements.define("chevron-left-24",S(j,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var pe=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414"></path></svg>');function I(b,a){A(a,!1);let f=i(a,"id",12,void 0),d=i(a,"style",12,void 0),c=i(a,"className",12,void 0),u=i(a,"fill",12,void 0),v=i(a,"size",12,"1.5rem");var m={get id(){return f()},set id(t){f(t),o()},get style(){return d()},set style(t){d(t),o()},get className(){return c()},set className(t){c(t),o()},get fill(){return u()},set fill(t){u(t),o()},get size(){return v()},set size(t){v(t),o()}},n=pe();return _(()=>{x(n,"id",f()),X(n,d()),V(n,0,W(c())),x(n,"fill",u())}),h(b,n),D(m)}customElements.define("chevron-right-24",S(I,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var he=z("<option> </option>"),xe=z('<div class="mc-pagination__field"><select class="mc-select mc-pagination__select svelte-19eta05"></select></div>'),we=z('<span class="mc-pagination__label svelte-19eta05" aria-current="page"> </span>'),_e=z('<nav class="mc-pagination svelte-19eta05" aria-label="pagination"><!> <!> <!></nav>');const ye={hash:"svelte-19eta05",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-pagination.svelte-19eta05 {align-items:center;display:flex;justify-content:center;gap:0.5rem;}.mc-pagination__label.svelte-19eta05 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}
 
-/* stylelint-disable string-no-newline */.mc-select.svelte-19eta05 {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);height:3rem;padding:0 3rem 0 0.75rem;background-position:right 1rem center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");border:var(--border-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--radius-s, 0.25rem);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;background-repeat:no-repeat;background-size:1rem;}.mc-select.svelte-19eta05:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-select.svelte-19eta05: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-select.svelte-19eta05:disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}
+/* stylelint-disable string-no-newline */.mc-select.svelte-19eta05 {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);height:3rem;padding:0 3rem 0 0.75rem;background-position:right 1rem center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;background-repeat:no-repeat;background-size:1rem;border-radius:var(--border-radius-s, 0.25rem);}.mc-select.svelte-19eta05:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-select.svelte-19eta05: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-select.svelte-19eta05:disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}
 
-/* stylelint-enable string-no-newline */`};function Ne(g,a){S(a,!0),ce(g,ye);let d=o(a,"id",7),u=o(a,"value",15,1),c=o(a,"total",7,10),f=o(a,"compact",7),v=o(a,"selectLabel",7,"Page selector"),m=o(a,"prefixlabel",7,"Page"),n=o(a,"pagelabel",7,"of"),t=y(de(Number(u())));const P=y(()=>l(t)<=1),L=y(()=>l(t)>=c()),Y=y(()=>Array.from({length:c()},(e,s)=>s+1));function F(){l(P)()||B(t,Number(l(t))-1)}function R(){l(L)()||B(t,Number(l(t))+1)}var Z={get id(){return d()},set id(e){d(e),i()},get value(){return u()},set value(e=1){u(e),i()},get total(){return c()},set total(e=10){c(e),i()},get compact(){return f()},set compact(e){f(e),i()},get selectLabel(){return v()},set selectLabel(e="Page selector"){v(e),i()},get prefixlabel(){return m()},set prefixlabel(e="Page"){m(e),i()},get pagelabel(){return n()},set pagelabel(e="of"){n(e),i()}},C=_e(),q=N(C);{var $=e=>{{let s=k(()=>l(P)());Q(e,{iconposition:"only","aria-label":"Previous page",get disabled(){return l(s)},onclick:F,$$slots:{icon:(r,p)=>{j(r,{slot:"icon"})}}})}},ee=e=>{{let s=k(()=>l(P)());T(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:F,$$slots:{icon:(r,p)=>{j(r,{slot:"icon"})}}})}};M(q,e=>{f()?e(ee,!1):e($)})}var G=K(q,2);{var te=e=>{var s=xe(),r=N(s);r.__change=[be,u],ue(r,21,()=>l(Y)(),fe,(p,E)=>{var b=he(),oe=N(b);w(b);var H={};_((ie,J)=>{ge(b,ie),O(oe,`${m()??""}
+/* stylelint-enable string-no-newline */`};function Ne(b,a){A(a,!0),de(b,ye);let f=i(a,"id",7),d=i(a,"value",15,1),c=i(a,"total",7,10),u=i(a,"compact",7),v=i(a,"selectLabel",7,"Page selector"),m=i(a,"prefixlabel",7,"Page"),n=i(a,"pagelabel",7,"of"),t=y(ue(Number(d())));const P=y(()=>l(t)<=1),L=y(()=>l(t)>=c()),Y=y(()=>Array.from({length:c()},(e,s)=>s+1));function F(){l(P)()||B(t,Number(l(t))-1)}function R(){l(L)()||B(t,Number(l(t))+1)}function Z(e){const s=Number(e.target.value);d(s)}var $={get id(){return f()},set id(e){f(e),o()},get value(){return d()},set value(e=1){d(e),o()},get total(){return c()},set total(e=10){c(e),o()},get compact(){return u()},set compact(e){u(e),o()},get selectLabel(){return v()},set selectLabel(e="Page selector"){v(e),o()},get prefixlabel(){return m()},set prefixlabel(e="Page"){m(e),o()},get pagelabel(){return n()},set pagelabel(e="of"){n(e),o()}},C=_e(),q=N(C);{var ee=e=>{{let s=k(()=>l(P)());Q(e,{iconposition:"only","aria-label":"Previous page",get disabled(){return l(s)},onclick:F,$$slots:{icon:(r,g)=>{j(r,{slot:"icon"})}}})}},te=e=>{{let s=k(()=>l(P)());T(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:F,$$slots:{icon:(r,g)=>{j(r,{slot:"icon"})}}})}};M(q,e=>{u()?e(te,!1):e(ee)})}var G=K(q,2);{var ae=e=>{var s=xe(),r=N(s);r.__change=Z,fe(r,21,()=>l(Y)(),ve,(g,E)=>{var p=he(),oe=N(p);w(p);var H={};_((ne,J)=>{ge(p,ne),O(oe,`${m()??""}
             ${l(E)??""}
             ${n()??""}
-            ${c()??""}`),H!==(H=J)&&(b.value=(b.__value=J)??"")},[()=>Number(l(E))==Number(l(t)),()=>Number(l(E))]),h(p,b)}),w(r),w(s),_(()=>{x(r,"id",d()),x(r,"aria-label",v()),r.disabled=c()<=1}),ve(r,()=>l(t),p=>B(t,p)),h(e,s)},ae=e=>{var s=we(),r=N(s);w(s),_(()=>O(r,`${m()??""}
-      ${u()??""}
+            ${c()??""}`),H!==(H=J)&&(p.value=(p.__value=J)??"")},[()=>Number(l(E))==Number(l(t)),()=>Number(l(E))]),h(g,p)}),w(r),w(s),_(()=>{x(r,"id",f()),x(r,"aria-label",v()),r.disabled=c()<=1}),me(r,()=>l(t),g=>B(t,g)),h(e,s)},le=e=>{var s=we(),r=N(s);w(s),_(()=>O(r,`${m()??""}
+      ${d()??""}
       ${n()??""}
-      ${c()??""}`)),h(e,s)};M(G,e=>{f()?e(ae,!1):e(te)})}var le=K(G,2);{var se=e=>{{let s=k(()=>l(L)());Q(e,{iconposition:"only","aria-label":"Next page",get disabled(){return l(s)},onclick:R,$$slots:{icon:(r,p)=>{A(r,{slot:"icon"})}}})}},re=e=>{{let s=k(()=>l(L)());T(e,{outlined:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:R,$$slots:{icon:(r,p)=>{A(r,{slot:"icon"})}}})}};M(le,e=>{f()?e(re,!1):e(se)})}return w(C),h(g,C),D(Z)}ne(["change"]);customElements.define("m-pagination",I(Ne,{id:{},value:{},total:{},compact:{},selectLabel:{},prefixlabel:{},pagelabel:{}},[],[],!0));
+      ${c()??""}`)),h(e,s)};M(G,e=>{u()?e(le,!1):e(ae)})}var se=K(G,2);{var re=e=>{{let s=k(()=>l(L)());Q(e,{iconposition:"only","aria-label":"Next page",get disabled(){return l(s)},onclick:R,$$slots:{icon:(r,g)=>{I(r,{slot:"icon"})}}})}},ie=e=>{{let s=k(()=>l(L)());T(e,{outlined:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:R,$$slots:{icon:(r,g)=>{I(r,{slot:"icon"})}}})}};M(se,e=>{u()?e(ie,!1):e(re)})}return w(C),h(b,C),D($)}ce(["change"]);customElements.define("m-pagination",S(Ne,{id:{},value:{},total:{},compact:{},selectLabel:{},prefixlabel:{},pagelabel:{}},[],[],!0));
 //# sourceMappingURL=Pagination.js.map