@mozaic-ds/web-components 1.1.0 → 1.3.0

package/dist/components/flag/Flag.stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import './Flag.svelte';
 const meta = {
     title: 'Indicators/Flag',
     component: 'm-flag',

package/dist/components/flag/Flag.svelte

@@ -15,10 +15,10 @@
     appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
   }
 
-  let { appearance = 'standard', label }: Props = $props();
+  let { appearance = 'standard', label, ...attrs }: Props = $props();
 </script>
 
-<div class={['mc-flag', `mc-flag--${appearance}`]}>
+<div class={['mc-flag', `mc-flag--${appearance}`]} {...attrs}>
   <span class="mc-flag__label">
     {label}
   </span>
@@ -29,7 +29,7 @@
  */
 .mc-flag {
   padding: 0 0.5rem;
-  border-radius: var(--radius-xs, 0.125rem);
+  border-radius: var(--border-radius-xs, 0.125rem);
   white-space: nowrap;
   font-size: var(--font-size-100, 0.875rem);
   font-weight: var(--font-weight-regular, 400);

package/dist/components/iconbutton/IconButton.js

@@ -1,4 +1,4 @@
-import{c as f,p as h,a as m,b as r,f as k,z as p,d as w,i as y,j as x,k as e,r as z}from"../../custom-element.js";import{s as _}from"../../slot.js";import{b as j}from"../../attributes.js";var I=k("<button><!></button>");const B={hash:"svelte-3c0lhf",code:`/**
+import{c as f,p as h,a as m,b as r,f as k,r as p,d as w,h as y,i as x,j as e,e as _}from"../../custom-element.js";import{s as z}from"../../slot.js";import{a as j}from"../../attributes.js";var I=k("<button><!></button>");const B={hash:"svelte-3c0lhf",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-button.svelte-3c0lhf {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-3c0lhf:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-3c0lhf:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-3c0lhf: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-3c0lhf {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-3c0lhf {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__label.svelte-3c0lhf {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-3c0lhf {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-3c0lhf: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-3c0lhf: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--s.svelte-3c0lhf {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-3c0lhf {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-3c0lhf {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-3c0lhf {padding:0.25rem;}.mc-button--outlined.svelte-3c0lhf {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-3c0lhf:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-3c0lhf:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-3c0lhf:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-3c0lhf {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-3c0lhf:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-3c0lhf:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-3c0lhf {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-3c0lhf:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-3c0lhf:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-3c0lhf {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-3c0lhf:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-3c0lhf:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-3c0lhf: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-3c0lhf {border-radius:var(--radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-3c0lhf {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-3c0lhf:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-3c0lhf:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-3c0lhf {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-3c0lhf:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-3c0lhf:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-3c0lhf {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-3c0lhf:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-3c0lhf:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-3c0lhf {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-3c0lhf:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-3c0lhf:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-3c0lhf {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.mc-button--standard.svelte-3c0lhf:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-3c0lhf:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-3c0lhf {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-3c0lhf:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-3c0lhf:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-3c0lhf {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-3c0lhf:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-3c0lhf:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-3c0lhf {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-3c0lhf:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-3c0lhf:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function D(s,t){h(t,!0),m(s,B);let n=r(t,"appearance",7,"standard"),a=r(t,"size",7,"m"),l=r(t,"type",7,"button"),d=r(t,"ghost",7),b=r(t,"outlined",7),u=r(t,"disabled",7),i=p(t,["$$slots","$$events","$$legacy","$$host","appearance","size","type","ghost","outlined","disabled"]);var v={get appearance(){return n()},set appearance(o="standard"){n(o),e()},get size(){return a()},set size(o="m"){a(o),e()},get type(){return l()},set type(o="button"){l(o),e()},get ghost(){return d()},set ghost(o){d(o),e()},get outlined(){return b()},set outlined(o){b(o),e()},get disabled(){return u()},set disabled(o){u(o),e()}},c=I();j(c,()=>({class:["mc-button","mc-button--icon-button",`mc-button--${a()}`,`mc-button--${n()}`,d()&&"mc-button--ghost",b()&&"mc-button--outlined"],disabled:u(),type:l(),...i}),void 0,void 0,"svelte-3c0lhf");var g=w(c);return _(g,t,"icon",{}),z(c),y(s,c),x(v)}customElements.define("m-icon-button",f(D,{appearance:{},size:{},type:{},ghost:{},outlined:{},disabled:{}},["icon"],[],!0));export{D as I};
+ */.mc-button.svelte-3c0lhf {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-3c0lhf:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-3c0lhf:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-3c0lhf: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-3c0lhf {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-3c0lhf {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__label.svelte-3c0lhf {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-3c0lhf {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-3c0lhf: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-3c0lhf: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--s.svelte-3c0lhf {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-3c0lhf {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-3c0lhf {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-3c0lhf {padding:0.25rem;}.mc-button--outlined.svelte-3c0lhf {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-3c0lhf:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-3c0lhf:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-3c0lhf {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-3c0lhf:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-3c0lhf:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-3c0lhf {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-3c0lhf:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-3c0lhf:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-3c0lhf {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-3c0lhf:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-3c0lhf:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-3c0lhf {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-3c0lhf:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-3c0lhf:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-3c0lhf: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-3c0lhf {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-3c0lhf {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-3c0lhf:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-3c0lhf:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-3c0lhf {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-3c0lhf:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-3c0lhf:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-3c0lhf {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-3c0lhf:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-3c0lhf:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-3c0lhf {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-3c0lhf:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-3c0lhf:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-3c0lhf {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.mc-button--standard.svelte-3c0lhf:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-3c0lhf:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-3c0lhf {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-3c0lhf:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-3c0lhf:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-3c0lhf {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-3c0lhf:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-3c0lhf:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-3c0lhf {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-3c0lhf:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-3c0lhf:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function D(s,t){h(t,!0),m(s,B);let n=r(t,"appearance",7,"standard"),a=r(t,"size",7,"m"),l=r(t,"type",7,"button"),d=r(t,"ghost",7),b=r(t,"outlined",7),u=r(t,"disabled",7),i=p(t,["$$slots","$$events","$$legacy","$$host","appearance","size","type","ghost","outlined","disabled"]);var v={get appearance(){return n()},set appearance(o="standard"){n(o),e()},get size(){return a()},set size(o="m"){a(o),e()},get type(){return l()},set type(o="button"){l(o),e()},get ghost(){return d()},set ghost(o){d(o),e()},get outlined(){return b()},set outlined(o){b(o),e()},get disabled(){return u()},set disabled(o){u(o),e()}},c=I();j(c,()=>({class:["mc-button","mc-button--icon-button",`mc-button--${a()}`,`mc-button--${n()}`,d()&&"mc-button--ghost",b()&&"mc-button--outlined"],disabled:u(),type:l(),...i}),void 0,void 0,void 0,"svelte-3c0lhf");var g=w(c);return z(g,t,"icon",{}),_(c),y(s,c),x(v)}customElements.define("m-icon-button",f(D,{appearance:{},size:{},type:{},ghost:{},outlined:{},disabled:{}},["icon"],[],!0));export{D as I};
 //# sourceMappingURL=IconButton.js.map

package/dist/components/iconbutton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../src/components/iconbutton/IconButton.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-icon-button' }} />\n\n<script lang=\"ts\">\n  /**\n   * Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.\n   *\n   * @slot icon - Use this slot to insert an icon for the Button.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Defines the visual style of the icon button.\n     */\n    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';\n    /**\n     * Determines the size of the icon button.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * If `true`, disables the icon button, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, applies a \"ghost\" style to the icon button.\n     */\n    ghost?: boolean;\n    /**\n     * If `true`, the icon button gets an outlined style.\n     */\n    outlined?: boolean;\n    /**\n     * Specifies the button's HTML `type` attribute.\n     */\n    type?: 'button' | 'reset' | 'submit';\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    type = 'button',\n    ghost,\n    outlined,\n    disabled,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<button\n  class={[\n    'mc-button',\n    'mc-button--icon-button',\n    `mc-button--${size}`,\n    `mc-button--${appearance}`,\n    ghost && 'mc-button--ghost',\n    outlined && 'mc-button--outlined',\n  ]}\n  {disabled}\n  {type}\n  {...attrs}\n>\n  <slot name=\"icon\" />\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["appearance","size","type","ghost","$.prop","$$props","outlined","disabled","attrs","$.rest_props"],"mappings":";;qnWAAA,gBAqCI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,eAAO,QAAQ,EACfC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACLG,EAAAC,EAAAJ,EAAA,0JANU,WAAU,6CAChB,IAAG,6CACH,SAAQ,4LAUf,YACA,uCACcJ,EAAI,CAAA,iBACJD,EAAU,CAAA,GACxBG,EAAK,GAAI,mBACTG,KAAY,gDAIVE,sFAbN"}
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/iconbutton/IconButton.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-icon-button' }} />\n\n<script lang=\"ts\">\n  /**\n   * Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.\n   *\n   * @slot icon - Use this slot to insert an icon for the Button.\n   */\n  interface Props {\n    /**\n     * Defines the visual style of the icon button.\n     */\n    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';\n    /**\n     * Determines the size of the icon button.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * If `true`, disables the icon button, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, applies a \"ghost\" style to the icon button.\n     */\n    ghost?: boolean;\n    /**\n     * If `true`, the icon button gets an outlined style.\n     */\n    outlined?: boolean;\n    /**\n     * Specifies the button's HTML `type` attribute.\n     */\n    type?: 'button' | 'reset' | 'submit';\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    type = 'button',\n    ghost,\n    outlined,\n    disabled,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<button\n  class={[\n    'mc-button',\n    'mc-button--icon-button',\n    `mc-button--${size}`,\n    `mc-button--${appearance}`,\n    ghost && 'mc-button--ghost',\n    outlined && 'mc-button--outlined',\n  ]}\n  {disabled}\n  {type}\n  {...attrs}\n>\n  <slot name=\"icon\" />\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["appearance","size","type","ghost","$.prop","$$props","outlined","disabled","attrs","$.rest_props"],"mappings":";;qoWAAA,gBAoCI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,eAAO,QAAQ,EACfC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACLG,EAAAC,EAAAJ,EAAA,0JANU,WAAU,6CAChB,IAAG,6CACH,SAAQ,4LAUf,YACA,uCACcJ,EAAI,CAAA,iBACJD,EAAU,CAAA,GACxBG,EAAK,GAAI,mBACTG,KAAY,gDAIVE,6FAbN"}

package/dist/components/iconbutton/IconButton.stories.d.ts

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import '@mozaic-ds/icons-svelte/custom-elements/ChevronRight20/ChevronRight20.js';
-import '@mozaic-ds/icons-svelte/custom-elements/ChevronRight32/ChevronRight32.js';
+import '@mozaic-ds/icons-svelte/svelte/ChevronRight20/ChevronRight20.svelte';
+import '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';
+import '@mozaic-ds/icons-svelte/svelte/ChevronRight32/ChevronRight32.svelte';
+import './IconButton.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/iconbutton/IconButton.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/iconbutton/IconButton.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,0EAA0E,CAAC;AAClF,OAAO,0EAA0E,CAAC;AAElF,QAAA,MAAM,IAAI,EAAE,IAiCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC"}
+{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/iconbutton/IconButton.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,qEAAqE,CAAC;AAC7E,OAAO,qEAAqE,CAAC;AAC7E,OAAO,qEAAqE,CAAC;AAC7E,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAiCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC"}

package/dist/components/iconbutton/IconButton.stories.js

@@ -1,8 +1,10 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import '@mozaic-ds/icons-svelte/custom-elements/ChevronRight20/ChevronRight20.js';
-import '@mozaic-ds/icons-svelte/custom-elements/ChevronRight32/ChevronRight32.js';
+import '@mozaic-ds/icons-svelte/svelte/ChevronRight20/ChevronRight20.svelte';
+import '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';
+import '@mozaic-ds/icons-svelte/svelte/ChevronRight32/ChevronRight32.svelte';
+import './IconButton.svelte';
 const meta = {
     title: 'Action/Icon Button',
     component: 'm-icon-button',

package/dist/components/iconbutton/IconButton.svelte

@@ -7,7 +7,6 @@
    * @slot icon - Use this slot to insert an icon for the Button.
    */
   interface Props {
-    [key: string]: any;
     /**
      * Defines the visual style of the icon button.
      */
@@ -95,7 +94,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;
@@ -259,7 +258,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/iconbutton/IconButton.svelte.d.ts

@@ -4,7 +4,6 @@
  * @slot icon - Use this slot to insert an icon for the Button.
  */
 interface Props {
-    [key: string]: any;
     /**
      * Defines the visual style of the icon button.
      */

package/dist/components/iconbutton/IconButton.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/iconbutton/IconButton.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC1D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CACtC;AAgCH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,UAAU;;;;UAAqF,CAAC;AACpF,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/iconbutton/IconButton.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC1D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CACtC;AAgCH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,UAAU;;;;UAAqF,CAAC;AACpF,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}

package/dist/components/kpiitem/KpiItem.js

@@ -0,0 +1,5 @@
+import{c as C,p as E,b as t,A as S,t as _,h as p,i as D,j as l,l as T,m as q,a as ae,f as y,r as se,n as h,D as N,d as f,s as L,e as b,g as j,B as oe,C as ce}from"../../custom-element.js";import{i as x}from"../../if.js";import{c as ne}from"../../svelte-component.js";import{s as B,b as F,a as me}from"../../attributes.js";import"../../legacy.js";import{L as de}from"../../Less24.js";var ve=S('<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="M4.293 4.293a1 1 0 0 1 1.414 0L18 16.586V9a1 1 0 1 1 2 0v10a1 1 0 0 1-1 1H9a1 1 0 1 1 0-2h7.586L4.293 5.707a1 1 0 0 1 0-1.414"></path></svg>');function G(u,r){E(r,!1);let c=t(r,"id",12,void 0),a=t(r,"style",12,void 0),s=t(r,"className",12,void 0),n=t(r,"fill",12,void 0),m=t(r,"size",12,"1.5rem");var v={get id(){return c()},set id(i){c(i),l()},get style(){return a()},set style(i){a(i),l()},get className(){return s()},set className(i){s(i),l()},get fill(){return n()},set fill(i){n(i),l()},get size(){return m()},set size(i){m(i),l()}},o=ve();return _(()=>{B(o,"id",c()),F(o,a()),T(o,0,q(s())),B(o,"fill",n())}),p(u,o),D(v)}customElements.define("arrow-bottom-right-24",C(G,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var fe=S('<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="M8 5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v10a1 1 0 1 1-2 0V7.414L5.707 19.707a1 1 0 0 1-1.414-1.414L16.586 6H9a1 1 0 0 1-1-1"></path></svg>');function J(u,r){E(r,!1);let c=t(r,"id",12,void 0),a=t(r,"style",12,void 0),s=t(r,"className",12,void 0),n=t(r,"fill",12,void 0),m=t(r,"size",12,"1.5rem");var v={get id(){return c()},set id(i){c(i),l()},get style(){return a()},set style(i){a(i),l()},get className(){return s()},set className(i){s(i),l()},get fill(){return n()},set fill(i){n(i),l()},get size(){return m()},set size(i){m(i),l()}},o=fe();return _(()=>{B(o,"id",c()),F(o,a()),T(o,0,q(s())),B(o,"fill",n())}),p(u,o),D(v)}customElements.define("arrow-top-right-24",C(J,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var be=y('<span class="mc-kpi__label svelte-1fbscw7"> </span>'),pe=y('<span class="mc-kpi__label svelte-1fbscw7"> </span>'),ke=y('<span class="mc-kpi__detail svelte-1fbscw7"> </span>'),ue=y('<div class="mc-kpi__aside svelte-1fbscw7"><!> <!></div>'),ge=y('<div><!> <div class="mc-kpi__content svelte-1fbscw7"><div class="mc-kpi__main svelte-1fbscw7"><!> <span class="mc-kpi__value svelte-1fbscw7"> </span></div> <!></div></div>');const we={hash:"svelte-1fbscw7",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-kpi.svelte-1fbscw7,
+.mc-kpi.svelte-1fbscw7 :where(.svelte-1fbscw7) {box-sizing:border-box;}.mc-kpi.svelte-1fbscw7 {display:inline-block;}.mc-kpi.svelte-1fbscw7:not(.mc-kpi--s) {min-width:10rem;}.mc-kpi__label.svelte-1fbscw7 {font-size:var(--font-body-s, 0.875rem);font-weight:var(--font-weight-semi-bold, 600);display:block;}.mc-kpi__content.svelte-1fbscw7 {line-height:var(--line-height-s, 1.3);display:flex;}.mc-kpi__main.svelte-1fbscw7 {align-items:center;display:flex;justify-content:center;}.mc-kpi__value.svelte-1fbscw7 {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.svelte-1fbscw7 {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.svelte-1fbscw7 {font-size:var(--font-body-s, 0.875rem);}.mc-kpi__icon.svelte-1fbscw7 {display:block;height:1rem;width:1rem;}.mc-kpi--s.svelte-1fbscw7 .mc-kpi__content:where(.svelte-1fbscw7) {gap:0.25rem;}.mc-kpi--s.svelte-1fbscw7 .mc-kpi__main:where(.svelte-1fbscw7) {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.svelte-1fbscw7 .mc-kpi__aside:where(.svelte-1fbscw7) {background-color:transparent;}.mc-kpi--m.svelte-1fbscw7 .mc-kpi__label:where(.svelte-1fbscw7) {color:var(--color-kpi-label-medium, var(--kpi-item-color-label-info-medium, #000000));margin-bottom:0.25rem;}.mc-kpi--m.svelte-1fbscw7 .mc-kpi__content:where(.svelte-1fbscw7) {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.svelte-1fbscw7 .mc-kpi__main:where(.svelte-1fbscw7) {flex-grow:1;height:2.5rem;}.mc-kpi--m.svelte-1fbscw7 .mc-kpi__value:where(.svelte-1fbscw7) {font-size:var(--font-body-l, 1.125rem);}.mc-kpi--m.svelte-1fbscw7 .mc-kpi__aside:where(.svelte-1fbscw7) {padding:0 0.5rem;height:2.5rem;width:2.5rem;}.mc-kpi--l.svelte-1fbscw7 {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.svelte-1fbscw7 .mc-kpi__content:where(.svelte-1fbscw7) {flex-direction:column;width:100%;height:100%;justify-content:space-between;}.mc-kpi--l.svelte-1fbscw7 .mc-kpi__main:where(.svelte-1fbscw7) {flex-direction:column;flex-grow:1;}.mc-kpi--l.svelte-1fbscw7 .mc-kpi__label:where(.svelte-1fbscw7) {font-size:var(--font-body-m, 1rem);color:var(--color-kpi-label-large, var(--kpi-item-color-label-info-large, #0074aa));}.mc-kpi--l.svelte-1fbscw7 .mc-kpi__value:where(.svelte-1fbscw7) {font-size:var(--font-heading-l, 2rem);}.mc-kpi--l.svelte-1fbscw7 .mc-kpi__aside:where(.svelte-1fbscw7) {gap:0.5rem;height:2.5rem;padding:0 0.5rem;font-size:var(--font-body-s, 0.875rem);}.mc-kpi--warning.svelte-1fbscw7 {--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.svelte-1fbscw7 {--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.svelte-1fbscw7 {--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.svelte-1fbscw7 {--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);}`};function _e(u,r){E(r,!0),ae(u,we);let c=t(r,"value",7),a=t(r,"trend",7),s=t(r,"label",7),n=t(r,"status",7,"info"),m=t(r,"information",7),v=t(r,"size",7,"s"),o=se(r,["$$slots","$$events","$$legacy","$$host","value","trend","label","status","information","size"]);const i=N(()=>v()==="m"),H=N(()=>v()==="l"),O={increasing:J,decreasing:G,stable:de},P=N(()=>a()?O[a()]:void 0),Q=N(()=>`mc-kpi mc-kpi--${v()} mc-kpi--${n()}`);var U={get value(){return c()},set value(e){c(e),l()},get trend(){return a()},set trend(e){a(e),l()},get label(){return s()},set label(e){s(e),l()},get status(){return n()},set status(e="info"){n(e),l()},get information(){return m()},set information(e){m(e),l()},get size(){return v()},set size(e="s"){v(e),l()}},z=ge();me(z,()=>({class:h(Q),...o}),void 0,void 0,void 0,"svelte-1fbscw7");var I=f(z);{var W=e=>{var d=be(),g=f(d,!0);b(d),_(()=>j(g,s())),p(e,d)};x(I,e=>{h(i)&&s()&&e(W)})}var R=L(I,2),M=f(R),V=f(M);{var X=e=>{var d=pe(),g=f(d,!0);b(d),_(()=>j(g,s())),p(e,d)};x(V,e=>{h(H)&&s()&&e(X)})}var K=L(V,2),Y=f(K,!0);b(K),b(M);var Z=L(M,2);{var $=e=>{var d=ue(),g=f(d);{var ee=k=>{var w=ke(),A=f(w,!0);b(w),_(()=>j(A,m())),p(k,w)};x(g,k=>{h(H)&&m()&&k(ee)})}var re=L(g,2);{var ie=k=>{var w=oe(),A=ce(w);ne(A,()=>h(P),(te,le)=>{le(te,{className:"mc-kpi__icon",color:"black"})}),p(k,w)};x(re,k=>{a()&&k(ie)})}b(d),p(e,d)};x(Z,e=>{(a()||m())&&e($)})}return b(R),b(z),_(()=>j(Y,c())),p(u,z),D(U)}customElements.define("m-kpi-item",C(_e,{value:{},trend:{},label:{},status:{},information:{},size:{}},[],[],!0));
+//# sourceMappingURL=KpiItem.js.map

package/dist/components/kpiitem/KpiItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiItem.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ArrowBottomRight24/ArrowBottomRight24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ArrowTopRight24/ArrowTopRight24.svelte","../../../src/components/kpiitem/KpiItem.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'arrow-bottom-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 0 1 1.414 0L18 16.586V9a1 1 0 1 1 2 0v10a1 1 0 0 1-1 1H9a1 1 0 1 1 0-2h7.586L4.293 5.707a1 1 0 0 1 0-1.414\"/></svg>","<svelte:options customElement={{ tag: 'arrow-top-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M8 5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v10a1 1 0 1 1-2 0V7.414L5.707 19.707a1 1 0 0 1-1.414-1.414L16.586 6H9a1 1 0 0 1-1-1\"/></svg>","<svelte:options customElement={{ tag: 'm-kpi-item' }} />\n\n<script lang=\"ts\">\n  import type { Component } from 'svelte';\n  import ArrowBottomRight24 from '@mozaic-ds/icons-svelte/svelte/ArrowBottomRight24/ArrowBottomRight24.svelte';\n  import ArrowTopRight24 from '@mozaic-ds/icons-svelte/svelte/ArrowTopRight24/ArrowTopRight24.svelte';\n  import Less24 from '@mozaic-ds/icons-svelte/svelte/Less24/Less24.svelte';\n  /**\n   * 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.\n   */\n  interface Props {\n    /**\n     * The current value of the kpi item.\n     */\n    value: string;\n    /**\n     * Defines the evolution of the kpi.\n     */\n    trend?: 'increasing' | 'decreasing' | 'stable';\n    /**\n     * Label of the kpi item.\n     */\n    label?: string;\n    /**\n     * Allows to define the kpi item status.\n     */\n    status?: 'info' | 'warning' | 'error' | 'success' | 'neutral';\n    /**\n     * The evolution information defining the kpi.\n     */\n    information?: string;\n    /**\n     * Allows to define the kpi item size.\n     */\n    size?: 's' | 'm' | 'l';\n  }\n\n  let { value, trend, label, status = 'info', information, size = 's', ...attrs }: Props = $props();\n\n  const isMedium = $derived(size === 'm');\n  const isLarge = $derived(size === 'l');\n\n  const iconMap: Record<NonNullable<Props['trend']>, Component> = {\n    increasing: ArrowTopRight24,\n    decreasing: ArrowBottomRight24,\n    stable: Less24,\n  };\n\n  const IconComponent = $derived(trend ? iconMap[trend] : undefined);\n\n  const rootClasses = $derived(`mc-kpi mc-kpi--${size} mc-kpi--${status}`);\n</script>\n\n<div class={rootClasses} {...attrs}>\n  {#if isMedium && label}\n    <span class=\"mc-kpi__label\">\n      {label}\n    </span>\n  {/if}\n  <div class=\"mc-kpi__content\">\n    <div class=\"mc-kpi__main\">\n      {#if isLarge && label}\n        <span class=\"mc-kpi__label\">\n          {label}\n        </span>\n      {/if}\n      <span class=\"mc-kpi__value\">{value}</span>\n    </div>\n    {#if trend || information}\n      <div class=\"mc-kpi__aside\">\n        {#if isLarge && information}\n          <span class=\"mc-kpi__detail\">\n            {information}\n          </span>\n        {/if}\n\n        {#if trend}\n          <IconComponent className=\"mc-kpi__icon\" color=\"black\" />\n        {/if}\n      </div>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/kpi-item';\n</style>\n"],"names":["id","style","className","fill","size","value","$.prop","$$props","trend","label","status","information","attrs","$.rest_props","isMedium","$.derived","isLarge","iconMap","ArrowTopRight24","ArrowBottomRight24","Less24","IconComponent","rootClasses","$.attribute_effect","div","$.get","$$render","consequent","consequent_1","consequent_2","consequent_3","consequent_4"],"mappings":"8qBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,oZCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E;;;gyJCPA,sBAqCQE,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EAAEG,iBAAS,MAAM,EAAEC,EAAWL,EAAAC,EAAA,cAAA,CAAA,EAAEH,eAAO,GAAG,EAAKQ,EAAKC,GAAAN,EAAA,wGAEvEO,EAAQC,EAAA,IAAYX,EAAI,IAAK,GAAG,EAChCY,EAAOD,EAAA,IAAYX,EAAI,IAAK,GAAG,EAE/Ba,EAAuD,CAC3D,WAAYC,EACZ,WAAYC,EACZ,OAAQC,IAGJC,QAAyBb,EAAK,EAAGS,EAAQT,EAAK,GAAI,MAAS,EAE3Dc,EAAWP,EAAA,IAAA,kBAA8BX,EAAI,CAAA,YAAYM,EAAM,CAAA,EAAA,4LAbjC,OAAM,wGAAsB,IAAG,mBAgBzDa,GAAAC,EAAA,KAAA,CAAA,MAAAC,EAAAH,CAAW,KAAMV,CAAK,GAAA,OAAA,OAAA,OAAA,gBAAA,4DAG3BH,EAAK,CAAA,CAAA,kBAFLgB,EAAAX,CAAQ,GAAIL,EAAK,GAAAiB,EAAAC,CAAA,8EASblB,EAAK,CAAA,CAAA,kBAFLgB,EAAAT,CAAO,GAAIP,EAAK,GAAAiB,EAAAE,CAAA,+HAWdjB,EAAW,CAAA,CAAA,kBAFXc,EAAAT,CAAO,GAAIL,EAAW,GAAAe,EAAAG,EAAA,4IAMtBrB,EAAK,GAAAkB,EAAAI,EAAA,0BARTtB,EAAK,GAAIG,MAAWe,EAAAK,CAAA,+BAFM1B,EAAK,CAAA,CAAA,aAfxC","x_google_ignoreList":[0,1]}

package/dist/components/kpiitem/KpiItem.spec.js

@@ -0,0 +1,60 @@
+import { render } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import KpiItem from './KpiItem.svelte';
+describe('MKpiItem component', () => {
+    it('renders the large size correctly', () => {
+        const { getByText } = render(KpiItem, {
+            props: {
+                value: '85%',
+                label: 'Completion Rate',
+                trend: 'increasing',
+                information: 'Above target',
+                size: 'l',
+            },
+        });
+        expect(getByText('85%')).toBeTruthy();
+        expect(getByText('Completion Rate')).toBeTruthy();
+        expect(getByText('Above target')).toBeTruthy();
+        expect(document.querySelector('.mc-kpi__icon')).toBeTruthy();
+    });
+    it('renders the medium size component correctly', () => {
+        const { getByText, queryByText } = render(KpiItem, {
+            props: {
+                value: '85%',
+                label: 'Completion Rate',
+                information: 'Above target',
+                trend: 'increasing',
+                size: 'm',
+            },
+        });
+        expect(getByText('85%')).toBeTruthy();
+        expect(getByText('Completion Rate')).toBeTruthy();
+        expect(queryByText('Above target')).toBeNull();
+        expect(document.querySelector('.mc-kpi__icon')).toBeTruthy();
+    });
+    it('renders the small size component correctly', () => {
+        const { getByText, queryByText } = render(KpiItem, {
+            props: {
+                value: '85%',
+                label: 'Completion Rate',
+                information: 'Above target',
+                trend: 'increasing',
+                size: 's',
+            },
+        });
+        expect(getByText('85%')).toBeTruthy();
+        expect(queryByText('Completion Rate')).toBeNull();
+        expect(queryByText('Above target')).toBeNull();
+        expect(document.querySelector('.mc-kpi__icon')).toBeTruthy();
+    });
+    describe('evolution icon', () => {
+        it('does not render the icon when trend prop is not provided', () => {
+            const { container } = render(KpiItem, { props: { value: '123' } });
+            expect(container.querySelector('.mc-kpi__icon')).toBeNull();
+        });
+        it('renders the icon when trend prop is provided', () => {
+            const { container } = render(KpiItem, { props: { value: '123', trend: 'increasing' } });
+            expect(container.querySelector('.mc-kpi__icon')).toBeTruthy();
+        });
+    });
+});

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './KpiItem.svelte';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const LargeWithIconAndInformation: Story;
+export declare const MediumWithIconAndLabel: Story;
+export declare const SmallWithIcon: Story;
+//# sourceMappingURL=KpiItem.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KpiItem.stories.d.ts","sourceRoot":"","sources":["../../../src/components/kpiitem/KpiItem.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,kBAAkB,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IAiCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,2BAA2B,EAAE,KAMzC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAKpC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC"}

package/dist/components/kpiitem/KpiItem.stories.js

@@ -0,0 +1,57 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import './KpiItem.svelte';
+const meta = {
+    title: 'Status/Kpi Item',
+    component: 'm-kpi-item',
+    argTypes: {
+        status: {
+            control: 'radio',
+            options: ['info', 'success', 'warning', 'error', 'neutral'],
+        },
+        trend: {
+            control: { type: 'radio' },
+            options: [undefined, 'increasing', 'decreasing', 'stable'],
+        },
+        size: {
+            control: 'inline-radio',
+            options: ['s', 'm', 'l'],
+        },
+    },
+    args: {
+        value: '99.99%',
+        label: 'Label',
+        size: 's',
+    },
+    render: (args) => html `
+    <m-kpi-item
+      value=${args.value}
+      label=${ifDefined(args.label)}
+      information=${ifDefined(args.information)}
+      status=${ifDefined(args.status)}
+      trend=${ifDefined(args.trend)}
+      size=${ifDefined(args.size)}
+    >
+    </m-kpi-item>
+  `,
+};
+export default meta;
+export const LargeWithIconAndInformation = {
+    args: {
+        trend: 'increasing',
+        information: '> 10% expected',
+        size: 'l',
+    },
+};
+export const MediumWithIconAndLabel = {
+    args: {
+        trend: 'increasing',
+        size: 'm',
+    },
+};
+export const SmallWithIcon = {
+    args: {
+        trend: 'increasing',
+        size: 's',
+    },
+};

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', ...attrs }: 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} {...attrs}>
+  {#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"}