@mozaic-ds/web-components 1.2.0 → 1.4.0

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

@@ -1 +1 @@
-{"version":3,"file":"Flag.js","sources":["../../../src/components/flag/Flag.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-flag' }} />\n\n<script lang=\"ts\">\n  /**\n   * A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content. It is typically placed at the top of an element to ensure immediate visibility.\n   */\n  interface Props {\n    /**\n     * Label of the Flag.\n     */\n    label: string;\n    /**\n     * Allows to define the Flag appearance.\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n  }\n\n  let { appearance = 'standard', label }: Props = $props();\n</script>\n\n<div class={['mc-flag', `mc-flag--${appearance}`]}>\n  <span class=\"mc-flag__label\">\n    {label}\n  </span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/flag';\n</style>\n"],"names":["appearance","label","$.prop","$$props","$.set_class","div","$.clsx"],"mappings":";;40BAAA,gBAiBQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,uDAAjB,WAAU,0GAGlBC,EAAAC,EAAA,EAAAC,EAAA,CAAA,sBAAuBN,EAAU,CAAA,EAAA,CAAA,EAAA,gBAAA,MAEzCC,GAAK,eAJV"}
+{"version":3,"file":"Flag.js","sources":["../../../src/components/flag/Flag.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-flag' }} />\n\n<script lang=\"ts\">\n  /**\n   * A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content. It is typically placed at the top of an element to ensure immediate visibility.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Label of the Flag.\n     */\n    label: string;\n    /**\n     * Allows to define the Flag appearance.\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n  }\n\n  let { appearance = 'standard', label, ...attrs }: Props = $props();\n</script>\n\n<div class={['mc-flag', `mc-flag--${appearance}`]} {...attrs}>\n  <span class=\"mc-flag__label\">\n    {label}\n  </span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/flag';\n</style>\n"],"names":["appearance","label","$.prop","$$props","attrs","$.rest_props","div","root","$.attribute_effect","span"],"mappings":";;40BAEA,gBAgBQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAKC,EAAKC,EAAAF,EAAA,sHAA3B,WAAU,2DAG9BG,EAAGC,EAAA,EAAHC,EAAAF,EAAG,KAAA,CAAA,MAAA,CAAS,UAAS,YAAcN,EAAU,QAASI,IAAK,OAAA,OAAA,OAAA,gBAAA,EACzD,IAAAK,IADFH,CAAG,MACDG,EAAI,EAAA,WAAJA,CAAI,IADNH,CAAG,YAECL,EAAK,CAAA,CAAA,MAFTK,CAAG,MAFI"}

package/dist/components/flag/Flag.stories.d.ts

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

package/dist/components/flag/Flag.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/flag/Flag.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAeX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
+{"version":3,"file":"Flag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/flag/Flag.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,eAAe,CAAC;AAEvB,QAAA,MAAM,IAAI,EAAE,IAeX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

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

@@ -5,6 +5,7 @@
    * A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content. It is typically placed at the top of an element to ensure immediate visibility.
    */
   interface Props {
+    [key: string]: any;
     /**
      * Label of the Flag.
      */
@@ -15,10 +16,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>

package/dist/components/flag/Flag.svelte.d.ts

@@ -2,6 +2,7 @@
  * A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content. It is typically placed at the top of an element to ensure immediate visibility.
  */
 interface Props {
+    [key: string]: any;
     /**
      * Label of the Flag.
      */

package/dist/components/flag/Flag.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flag.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/flag/Flag.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;CAC3D;AAmBH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Flag.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/flag/Flag.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;CAC3D;AAmBH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

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,D as p,d as w,i as y,j as x,k as e,r as _}from"../../custom-element.js";import{s as z}from"../../slot.js";import{b as j}from"../../attributes.js";var D=k("<button><!></button>");const I={hash:"svelte-3c0lhf",code:`/**
+import{c as E,p as S,a as q,b as r,s as A,f as u,g as F,h as G,i as H,d as J,j as e,k as h,l as k,r as K}from"../../custom-element.js";import{s as M}from"../../snippet.js";import{i as p}from"../../if.js";import{s as N}from"../../slot.js";import{a as O}from"../../attributes.js";import{L as P}from"../loader/Loader.js";var Q=G("<button><!> <!></button>");const R={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-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 B(s,t){h(t,!0),m(s,I);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=D();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(B,{appearance:{},size:{},type:{},ghost:{},outlined:{},disabled:{}},["icon"],[],!0));export{B 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 T(w,t){S(t,!0),q(w,R);let b=r(t,"appearance",7,"standard"),s=r(t,"size",7,"m"),i=r(t,"type",7,"button"),v=r(t,"ghost",7),g=r(t,"outlined",7),f=r(t,"disabled",7),n=r(t,"isloading",7),l=r(t,"icon",7),x=H(t,["$$slots","$$events","$$legacy","$$host","appearance","size","type","ghost","outlined","disabled","isloading","icon"]);var z={get appearance(){return b()},set appearance(o="standard"){b(o),e()},get size(){return s()},set size(o="m"){s(o),e()},get type(){return i()},set type(o="button"){i(o),e()},get ghost(){return v()},set ghost(o){v(o),e()},get outlined(){return g()},set outlined(o){g(o),e()},get disabled(){return f()},set disabled(o){f(o),e()},get isloading(){return n()},set isloading(o){n(o),e()},get icon(){return l()},set icon(o){l(o),e()}},d=Q();O(d,()=>({class:["mc-button","mc-button--icon-button",`mc-button--${s()}`,`mc-button--${b()}`,v()&&"mc-button--ghost",g()&&"mc-button--outlined",n()&&"mc-button--loading"],disabled:f(),type:i(),...x}),void 0,void 0,void 0,"svelte-3c0lhf");var y=J(d);{var B=o=>{P(o,{style:"color: currentColor",size:"s"})};p(y,o=>{n()&&o(B)})}var j=A(y,2);{var I=o=>{var _=h(),L=k(_);{var C=c=>{var a=h(),m=k(a);M(m,l),u(c,a)},D=c=>{var a=h(),m=k(a);N(m,t,"icon",{},null),u(c,a)};p(L,c=>{l()?c(C):c(D,!1)})}u(o,_)};p(j,o=>{n()||o(I)})}return K(d),u(w,d),F(z)}customElements.define("m-icon-button",E(T,{disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},outlined:{attribute:"outlined",reflect:!0,type:"Boolean"},ghost:{attribute:"ghost",reflect:!0,type:"Boolean"},isloading:{attribute:"isloading",reflect:!0,type:"Boolean"},appearance:{},size:{},type:{},icon:{}},["icon"],[],!0));export{T 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":";;qoWAAA,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,6FAbN"}
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/iconbutton/IconButton.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-icon-button',\n    props: {\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      outlined: { reflect: true, type: 'Boolean', attribute: 'outlined' },\n      ghost: { reflect: true, type: 'Boolean', attribute: 'ghost' },\n      isloading: { reflect: true, type: 'Boolean', attribute: 'isloading' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n  import type { Snippet } from 'svelte';\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     * If `true`, a loading state is displayed.\n     */\n    isloading?: boolean;\n    /**\n     * Specifies the button's HTML `type` attribute.\n     */\n    type?: 'button' | 'reset' | 'submit';\n    /**\n     * Use this snippet to insert an icon for the Button.\n     */\n    icon?: Snippet;\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    type = 'button',\n    ghost,\n    outlined,\n    disabled,\n    isloading,\n    icon,\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    isloading && 'mc-button--loading',\n  ]}\n  {disabled}\n  {type}\n  {...attrs}\n>\n  {#if isloading}\n    <Loader style=\"color: currentColor\" size=\"s\" />\n  {/if}\n  {#if !isloading}\n    {#if icon}\n      {@render icon()}\n    {:else}\n      <slot name=\"icon\" />\n    {/if}\n  {/if}\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","isloading","icon","attrs","$.rest_props","button","root","node","$.child","Loader","$$anchor","$$render","consequent","consequent_1","alternate","consequent_2","$.reset","$.append"],"mappings":";;qoWAYA,gBA6CI,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,EACRG,EAASJ,EAAAC,EAAA,YAAA,CAAA,EACTI,EAAIL,EAAAC,EAAA,OAAA,CAAA,EACDK,EAAAC,EAAAN,EAAA,6KARU,WAAU,6CAChB,IAAG,6CACH,SAAQ,yQAUlBO,EAAAC,EAAA,IAAAD,eAEG,YACA,uCACcX,EAAI,CAAA,iBACJD,EAAU,CAAA,GACxBG,EAAK,GAAI,mBACTG,EAAQ,GAAI,sBACZE,KAAa,+BAEdD,EAAQ,OACRL,EAAI,KACDQ,0CAZL,IAAAI,EAAAC,EAAAH,CAAA,aAeII,EAAMC,EAAA,CAAA,MAAA,sBAAA,KAAA,IAAA,WADJT,EAAS,GAAAU,EAAAC,CAAA,6EAKDV,CAAI,uEADVA,EAAI,EAAAS,EAAAE,CAAA,EAAAF,EAAAG,EAAA,EAAA,oBADLb,EAAS,GAAAU,EAAAI,CAAA,IAjBhBC,OAAAA,EAAAX,CAAA,EAAAY,EAAAP,EAAAL,CAAA,MAFO"}

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

@@ -1,12 +1,20 @@
 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/components/ChevronRight20/ChevronRight20.svelte';
+import '@mozaic-ds/icons-svelte/components/ChevronRight24/ChevronRight24.svelte';
+import '@mozaic-ds/icons-svelte/components/ChevronRight32/ChevronRight32.svelte';
+import './IconButton.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
-export declare const Standard: Story;
-export declare const Outline: Story;
+export declare const Filled: Story;
+export declare const Outlined: Story;
 export declare const Ghost: Story;
-export declare const SizeS: Story;
-export declare const SizeL: Story;
+export declare const Loading: Story;
+export declare const Standard: Story;
+export declare const Accent: Story;
+export declare const Danger: Story;
+export declare const Inverse: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
 //# sourceMappingURL=IconButton.stories.d.ts.map

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,yEAAyE,CAAC;AACjF,OAAO,yEAAyE,CAAC;AACjF,OAAO,yEAAyE,CAAC;AACjF,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAkCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAanB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAapB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAanB,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/components/ChevronRight20/ChevronRight20.svelte';
+import '@mozaic-ds/icons-svelte/components/ChevronRight24/ChevronRight24.svelte';
+import '@mozaic-ds/icons-svelte/components/ChevronRight32/ChevronRight32.svelte';
+import './IconButton.svelte';
 const meta = {
     title: 'Action/Icon Button',
     component: 'm-icon-button',
@@ -28,9 +30,10 @@ const meta = {
     <m-icon-button
       appearance=${ifDefined(args.appearance)}
       size=${ifDefined(args.size)}
-      disabled=${ifDefined(args.disabled)}
-      ghost=${ifDefined(args.ghost)}
-      outlined=${ifDefined(args.outlined)}
+      ?disabled=${args.disabled}
+      ?ghost=${args.ghost}
+      ?outlined=${args.outlined}
+      ?isloading=${args.isloading}
       type=${ifDefined(args.type)}
     >
       ${unsafeHTML(ifDefined(args.icon))}
@@ -38,22 +41,124 @@ const meta = {
   `,
 };
 export default meta;
-export const Standard = {};
-export const Outline = {
+export const Filled = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Most visible variant, used to emphasize the primary action on a page or a section.',
+            },
+        },
+    },
+};
+export const Outlined = {
     args: { outlined: true },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Complements the filled button for secondary actions that require less attention. It can also be used when multiple actions are available, without one standing out as more important.',
+            },
+        },
+    },
 };
 export const Ghost = {
     args: { ghost: true },
+    parameters: {
+        docs: {
+            description: {
+                story: 'More discreet, should be used exclusively for canceling or ignoring a task or action.',
+            },
+        },
+    },
 };
-export const SizeS = {
+export const Loading = {
+    args: { isloading: true },
+    parameters: {
+        docs: {
+            description: {
+                story: 'A loader replaces the icon to indicate that an action is in progress. Mouse events are prohibited.',
+            },
+        },
+    },
+};
+export const Standard = {
+    args: { appearance: 'standard' },
+    parameters: {
+        docs: {
+            description: {
+                story: 'The standard style is a neutral variant used for general actions that don’t require special attention, ensuring a consistent and accessible look.',
+            },
+        },
+    },
+};
+export const Accent = {
+    args: { appearance: 'accent' },
+    parameters: {
+        docs: {
+            description: {
+                story: 'The accent style is a more prominent variant used for engaging actions that require attention, such as conversions or highlighting specific tasks, ensuring a vibrant and accessible appearance.',
+            },
+        },
+    },
+};
+export const Danger = {
+    args: { appearance: 'danger' },
+    parameters: {
+        docs: {
+            description: {
+                story: 'The danger style is intended for critical or irreversible actions, such as deleting sensitive data (e.g., deleting a profile picture is not considered sensitive), ensuring that users are clearly warned before proceeding.',
+            },
+        },
+    },
+};
+export const Inverse = {
+    globals: {
+        backgrounds: { value: 'inverse' },
+    },
+    args: { appearance: 'inverse' },
+    parameters: {
+        docs: {
+            description: {
+                story: 'The inverse style must be used exclusively on dark backgrounds, providing contrast and clarity.',
+            },
+        },
+    },
+};
+export const Small = {
     args: {
         size: 's',
         icon: '<chevron-right-20 slot="icon"></chevron-right-20>',
     },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Exclusively used on desktop interfaces. Ideal for complex interfaces with a high volume of content.',
+            },
+        },
+    },
 };
-export const SizeL = {
+export const Medium = {
+    args: {
+        size: 'm',
+        icon: '<chevron-right-24 slot="icon"></chevron-right-24>',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'This is the minimum size recommended for mobile use, and it is the default size based on standard height. It provides an adequate touch area for mobile devices.',
+            },
+        },
+    },
+};
+export const Large = {
     args: {
         size: 'l',
         icon: '<chevron-right-32 slot="icon"></chevron-right-32>',
     },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Primarily used on landing pages or layouts with generous spacing. It may also be applicable in more complex scenarios, such as for small mobile devices used by warehouse employees.',
+            },
+        },
+    },
 };

package/dist/components/iconbutton/IconButton.svelte

@@ -1,6 +1,18 @@
-<svelte:options customElement={{ tag: 'm-icon-button' }} />
+<svelte:options
+  customElement={{
+    tag: 'm-icon-button',
+    props: {
+      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
+      outlined: { reflect: true, type: 'Boolean', attribute: 'outlined' },
+      ghost: { reflect: true, type: 'Boolean', attribute: 'ghost' },
+      isloading: { reflect: true, type: 'Boolean', attribute: 'isloading' },
+    },
+  }}
+/>
 
 <script lang="ts">
+  import Loader from '../loader/Loader.svelte';
+  import type { Snippet } from 'svelte';
   /**
    * 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.
    *
@@ -28,10 +40,18 @@
      * If `true`, the icon button gets an outlined style.
      */
     outlined?: boolean;
+    /**
+     * If `true`, a loading state is displayed.
+     */
+    isloading?: boolean;
     /**
      * Specifies the button's HTML `type` attribute.
      */
     type?: 'button' | 'reset' | 'submit';
+    /**
+     * Use this snippet to insert an icon for the Button.
+     */
+    icon?: Snippet;
   }
 
   let {
@@ -41,6 +61,8 @@
     ghost,
     outlined,
     disabled,
+    isloading,
+    icon,
     ...attrs
   }: Props = $props();
 </script>
@@ -53,12 +75,22 @@
     `mc-button--${appearance}`,
     ghost && 'mc-button--ghost',
     outlined && 'mc-button--outlined',
+    isloading && 'mc-button--loading',
   ]}
   {disabled}
   {type}
   {...attrs}
 >
-  <slot name="icon" />
+  {#if isloading}
+    <Loader style="color: currentColor" size="s" />
+  {/if}
+  {#if !isloading}
+    {#if icon}
+      {@render icon()}
+    {:else}
+      <slot name="icon" />
+    {/if}
+  {/if}
 </button>
 
 <style>/**

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

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 /**
  * 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.
  *
@@ -25,10 +26,18 @@ interface Props {
      * If `true`, the icon button gets an outlined style.
      */
     outlined?: boolean;
+    /**
+     * If `true`, a loading state is displayed.
+     */
+    isloading?: boolean;
     /**
      * Specifies the button's HTML `type` attribute.
      */
     type?: 'button' | 'reset' | 'submit';
+    /**
+     * Use this snippet to insert an icon for the Button.
+     */
+    icon?: Snippet;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/components/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":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEpC;;;;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,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAsDH,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/iconbutton/README.md

@@ -11,7 +11,9 @@ Buttons are key interactive elements used to perform actions and can be used as
 | `disabled` | If `true`, disables the icon button, making it non-interactive. | `boolean` |   |
 | `ghost` | If `true`, applies a "ghost" style to the icon button. | `boolean` |   |
 | `outlined` | If `true`, the icon button gets an outlined style. | `boolean` |   |
+| `isloading` | If `true`, a loading state is displayed. | `boolean` |   |
 | `type` | Specifies the button's HTML `type` attribute. | `'button'` `'reset'` `'submit'` | `button` |
+| `icon` | Use this snippet to insert an icon for the Button. | `Snippet` |   |
 
 ## Slots
 

package/dist/components/kpiitem/KpiItem.js

@@ -1,5 +1,5 @@
-import{c as j,p as E,b as t,z as V,t as g,i as f,j as A,k as l,e as C,g as H,a as se,f as z,m as x,C as L,d as p,s as B,r as k,h as M,A as ae,B as oe}from"../../custom-element.js";import{i as y}from"../../if.js";import{c as ce}from"../../svelte-component.js";import"../../legacy.js";import{s as h,a as D}from"../../attributes.js";var ne=V('<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 F(b,r){E(r,!1);let c=t(r,"id",12,void 0),a=t(r,"style",12,void 0),o=t(r,"className",12,void 0),n=t(r,"fill",12,void 0),m=t(r,"size",12,"1.5rem");var d={get id(){return c()},set id(e){c(e),l()},get style(){return a()},set style(e){a(e),l()},get className(){return o()},set className(e){o(e),l()},get fill(){return n()},set fill(e){n(e),l()},get size(){return m()},set size(e){m(e),l()}},s=ne();return g(()=>{h(s,"id",c()),D(s,a()),C(s,0,H(o())),h(s,"fill",n())}),f(b,s),A(d)}customElements.define("arrow-bottom-right-24",j(F,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var me=V('<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 G(b,r){E(r,!1);let c=t(r,"id",12,void 0),a=t(r,"style",12,void 0),o=t(r,"className",12,void 0),n=t(r,"fill",12,void 0),m=t(r,"size",12,"1.5rem");var d={get id(){return c()},set id(e){c(e),l()},get style(){return a()},set style(e){a(e),l()},get className(){return o()},set className(e){o(e),l()},get fill(){return n()},set fill(e){n(e),l()},get size(){return m()},set size(e){m(e),l()}},s=me();return g(()=>{h(s,"id",c()),D(s,a()),C(s,0,H(o())),h(s,"fill",n())}),f(b,s),A(d)}customElements.define("arrow-top-right-24",j(G,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var de=V('<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="M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1"></path></svg>');function J(b,r){E(r,!1);let c=t(r,"id",12,void 0),a=t(r,"style",12,void 0),o=t(r,"className",12,void 0),n=t(r,"fill",12,void 0),m=t(r,"size",12,"1.5rem");var d={get id(){return c()},set id(e){c(e),l()},get style(){return a()},set style(e){a(e),l()},get className(){return o()},set className(e){o(e),l()},get fill(){return n()},set fill(e){n(e),l()},get size(){return m()},set size(e){m(e),l()}},s=de();return g(()=>{h(s,"id",c()),D(s,a()),C(s,0,H(o())),h(s,"fill",n())}),f(b,s),A(d)}customElements.define("less-24",j(J,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var ve=z('<span class="mc-kpi__label svelte-1fbscw7"> </span>'),fe=z('<span class="mc-kpi__label svelte-1fbscw7"> </span>'),be=z('<span class="mc-kpi__detail svelte-1fbscw7"> </span>'),pe=z('<div class="mc-kpi__aside svelte-1fbscw7"><!> <!></div>'),ke=z('<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 ue={hash:"svelte-1fbscw7",code:`/**
+import{c as W,p as X,a as Y,b as m,q as b,s as _,t as g,f as v,g as Z,h as u,i as $,x as h,d as o,j as p,r as a,e as x,k as ee,l as re}from"../../custom-element.js";import{i as k}from"../../if.js";import{c as ie}from"../../svelte-component.js";import{a as oe}from"../../attributes.js";import{L as ae,A as le,o as te}from"../../Condition20.js";var se=u('<span class="mc-kpi__label svelte-1fbscw7"> </span>'),ce=u('<span class="mc-kpi__label svelte-1fbscw7"> </span>'),ne=u('<span class="mc-kpi__detail svelte-1fbscw7"> </span>'),me=u('<div class="mc-kpi__aside svelte-1fbscw7"><!> <!></div>'),ve=u('<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 pe={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 ge(b,r){E(r,!0),se(b,ue);let c=t(r,"value",7),a=t(r,"trend",7),o=t(r,"label",7),n=t(r,"status",7,"info"),m=t(r,"information",7),d=t(r,"size",7,"s");const s=L(()=>d()==="m"),e=L(()=>d()==="l"),O={increasing:G,decreasing:F,stable:J},P=L(()=>a()?O[a()]:void 0),Q=L(()=>`mc-kpi mc-kpi--${d()} mc-kpi--${n()}`);var U={get value(){return c()},set value(i){c(i),l()},get trend(){return a()},set trend(i){a(i),l()},get label(){return o()},set label(i){o(i),l()},get status(){return n()},set status(i="info"){n(i),l()},get information(){return m()},set information(i){m(i),l()},get size(){return d()},set size(i="s"){d(i),l()}},N=ke(),K=p(N);{var W=i=>{var v=ve(),w=p(v,!0);k(v),g(()=>M(w,o())),f(i,v)};y(K,i=>{x(s)&&o()&&i(W)})}var S=B(K,2),I=p(S),T=p(I);{var X=i=>{var v=fe(),w=p(v,!0);k(v),g(()=>M(w,o())),f(i,v)};y(T,i=>{x(e)&&o()&&i(X)})}var q=B(T,2),Y=p(q,!0);k(q),k(I);var Z=B(I,2);{var $=i=>{var v=pe(),w=p(v);{var ee=u=>{var _=be(),R=p(_,!0);k(_),g(()=>M(R,m())),f(u,_)};y(w,u=>{x(e)&&m()&&u(ee)})}var re=B(w,2);{var ie=u=>{var _=ae(),R=oe(_);ce(R,()=>x(P),(te,le)=>{le(te,{className:"mc-kpi__icon",color:"black"})}),f(u,_)};y(re,u=>{a()&&u(ie)})}k(v),f(i,v)};y(Z,i=>{(a()||m())&&i($)})}return k(S),k(N),g(()=>{C(N,1,H(x(Q)),"svelte-1fbscw7"),M(Y,c())}),f(b,N),A(U)}customElements.define("m-kpi-item",j(ge,{value:{},trend:{},label:{},status:{},information:{},size:{}},[],[],!0));
+.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 de(L,i){X(i,!0),Y(L,pe);let y=m(i,"value",7),t=m(i,"trend",7),s=m(i,"label",7),z=m(i,"status",7,"info"),d=m(i,"information",7),f=m(i,"size",7,"s"),B=$(i,["$$slots","$$events","$$legacy","$$host","value","trend","label","status","information","size"]);const D=h(()=>f()==="m"),C=h(()=>f()==="l"),E={increasing:te,decreasing:le,stable:ae},K=h(()=>t()?E[t()]:void 0),N=h(()=>`mc-kpi mc-kpi--${f()} mc-kpi--${z()}`);var S={get value(){return y()},set value(e){y(e),p()},get trend(){return t()},set trend(e){t(e),p()},get label(){return s()},set label(e){s(e),p()},get status(){return z()},set status(e="info"){z(e),p()},get information(){return d()},set information(e){d(e),p()},get size(){return f()},set size(e="s"){f(e),p()}},w=ve();oe(w,()=>({class:b(N),...B}),void 0,void 0,void 0,"svelte-1fbscw7");var I=o(w);{var T=e=>{var r=se(),c=o(r,!0);a(r),g(()=>x(c,s())),v(e,r)};k(I,e=>{b(D)&&s()&&e(T)})}var M=_(I,2),j=o(M),R=o(j);{var F=e=>{var r=ce(),c=o(r,!0);a(r),g(()=>x(c,s())),v(e,r)};k(R,e=>{b(C)&&s()&&e(F)})}var q=_(R,2),G=o(q,!0);a(q),a(j);var H=_(j,2);{var J=e=>{var r=me(),c=o(r);{var O=l=>{var n=ne(),A=o(n,!0);a(n),g(()=>x(A,d())),v(l,n)};k(c,l=>{b(C)&&d()&&l(O)})}var P=_(c,2);{var Q=l=>{var n=ee(),A=re(n);ie(A,()=>b(K),(U,V)=>{V(U,{className:"mc-kpi__icon",color:"black"})}),v(l,n)};k(P,l=>{t()&&l(Q)})}a(r),v(e,r)};k(H,e=>{(t()||d())&&e(J)})}return a(M),a(w),g(()=>x(G,y())),v(L,w),Z(S)}customElements.define("m-kpi-item",W(de,{value:{},trend:{},label:{},status:{},information:{},size:{}},[],[],!0));
 //# sourceMappingURL=KpiItem.js.map

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

@@ -1 +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","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/Less24/Less24.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: 'less-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=\"M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 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' }: 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}>\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","isMedium","$.derived","isLarge","iconMap","ArrowTopRight24","ArrowBottomRight24","Less24","IconComponent","rootClasses","$.get","$$render","consequent","consequent_1","consequent_2","consequent_3","consequent_4"],"mappings":"ynBAAA,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,+UCPA,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,QAE7DQ,EAAQC,EAAA,IAAYT,EAAI,IAAK,GAAG,EAChCU,EAAOD,EAAA,IAAYT,EAAI,IAAK,GAAG,EAE/BW,EAAuD,CAC3D,WAAYC,EACZ,WAAYC,EACZ,OAAQC,GAGJC,QAAyBX,EAAK,EAAGO,EAAQP,EAAK,GAAI,MAAS,EAE3DY,EAAWP,EAAA,IAAA,kBAA8BT,EAAI,CAAA,YAAYM,EAAM,CAAA,EAAA,4LAbjC,OAAM,wGAAsB,IAAG,yEAmB9DD,EAAK,CAAA,CAAA,kBAFLY,EAAAT,CAAQ,GAAIH,EAAK,GAAAa,EAAAC,CAAA,8EASbd,EAAK,CAAA,CAAA,kBAFLY,EAAAP,CAAO,GAAIL,EAAK,GAAAa,EAAAE,CAAA,+HAWdb,EAAW,CAAA,CAAA,kBAFXU,EAAAP,CAAO,GAAIH,EAAW,GAAAW,EAAAG,EAAA,4IAMtBjB,EAAK,GAAAc,EAAAI,EAAA,0BARTlB,EAAK,GAAIG,MAAWW,EAAAK,CAAA,sCAfjBP,CAAW,CAAA,EAAA,gBAAA,MAaYf,GAAK,eAfxC","x_google_ignoreList":[0,1,2]}
+{"version":3,"file":"KpiItem.js","sources":["../../../src/components/kpiitem/KpiItem.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-kpi-item' }} />\n\n<script lang=\"ts\">\n  import type { Component } from 'svelte';\n  import { ArrowBottomRight24, ArrowTopRight24, Less24 } from '@mozaic-ds/icons-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    [key: string]: any;\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":["value","$.prop","$$props","trend","label","status","information","size","attrs","$.rest_props","isMedium","$.derived","isLarge","iconMap","ArrowTopRight24","ArrowBottomRight24","Less24","IconComponent","rootClasses","div","root","$.get","span","root_1","$$render","consequent","div_1","$.sibling","node","div_2","span_1","root_2","consequent_1","span_2","node_1","div_3","root_3","span_3","root_4","consequent_2","IconComponent_1","$$anchor","consequent_3","consequent_4"],"mappings":";;;gyJAEA,qBAkCQA,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,EAAEK,eAAO,GAAG,EAAKC,EAAKC,EAAAP,EAAA,wGAEvEQ,EAAQC,EAAA,IAAYJ,EAAI,IAAK,GAAG,EAChCK,EAAOD,EAAA,IAAYJ,EAAI,IAAK,GAAG,EAE/BM,EAAuD,CAC3D,WAAYC,GACZ,WAAYC,GACZ,OAAQC,IAGJC,QAAyBd,EAAK,EAAGU,EAAQV,EAAK,GAAI,MAAS,EAE3De,EAAWP,EAAA,IAAA,kBAA8BJ,EAAI,CAAA,YAAYF,EAAM,CAAA,EAAA,4LAbjC,OAAM,wGAAsB,IAAG,YAgBpEc,EAAGC,GAAA,KAAHD,EAAG,KAAA,CAAA,MAAAE,EAAQH,CAAW,EAAA,GAAMV,CAAK,GAAA,OAAA,OAAA,OAAA,gBAAA,UAAjCW,CAAG,iBAECG,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YACFlB,EAAK,CAAA,CAAA,MADPkB,CAAI,WADFD,EAAAX,CAAQ,GAAIN,EAAK,GAAAoB,EAAAC,CAAA,QAKrBC,EAAGC,EAAAC,EAAA,CAAA,EACDC,IADFH,CAAG,MACDG,CAAG,iBAECC,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YACF1B,EAAK,CAAA,CAAA,MADP0B,CAAI,WADFT,EAAAT,CAAO,GAAIR,EAAK,GAAAoB,EAAAQ,CAAA,QAKpBC,EAAIN,EAAAO,EAAA,CAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,IANNJ,CAAG,UAAHA,EAAG,CAAA,iBASDM,EAAGC,GAAA,MAAHD,CAAG,iBAECE,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YACF/B,EAAW,CAAA,CAAA,MADb+B,CAAI,WADFhB,EAAAT,CAAO,GAAIN,EAAW,GAAAkB,EAAAe,CAAA,qEAOxBC,EAAaC,EAAA,CAAA,UAAA,eAAA,MAAA,QAAA,oBADXtC,EAAK,GAAAqB,EAAAkB,CAAA,MAPXP,CAAG,MAAHA,CAAG,YADDhC,EAAK,GAAIG,MAAWkB,EAAAmB,CAAA,aAT1BjB,CAAG,IANLP,CAAG,YAa+BnB,EAAK,CAAA,CAAA,MAbvCmB,CAAG,MAFI"}

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

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

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

@@ -1 +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;AAIrE,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"}
+{"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,IAkCX,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

@@ -1,8 +1,10 @@
 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',
+    tags: ['v2'],
     argTypes: {
         status: {
             control: 'radio',