@mozaic-ds/web-components 1.0.0 → 1.2.0

package/dist/components/field/Field.spec.js

@@ -7,20 +7,18 @@ describe('m-field component', () => {
         label: 'Email Address',
     };
     it('renders label with for attribute', () => {
-        const { getByText } = render(Field, {
-            props: baseProps,
-        });
+        const { getByText } = render(Field, { props: baseProps });
         const label = getByText('Email Address');
         expect(label).toBeInTheDocument();
+        expect(label.getAttribute('for')).toBe('email');
     });
     it('renders requirement text when provided', () => {
         const { getByText } = render(Field, {
-            props: {
-                ...baseProps,
-                requirementtext: '(required)',
-            },
+            props: { ...baseProps, requirementtext: '(required)' },
         });
-        expect(getByText('(required)')).toBeInTheDocument();
+        const req = getByText('(required)');
+        expect(req).toBeInTheDocument();
+        expect(req.classList.contains('mc-field__requirement')).toBe(true);
     });
     it('renders help text when helpid and helptext are provided', () => {
         const { getByText } = render(Field, {
@@ -33,8 +31,9 @@ describe('m-field component', () => {
         const helpText = getByText('We will not share your email.');
         expect(helpText).toBeInTheDocument();
         expect(helpText.id).toBe('email-help');
+        expect(helpText.classList.contains('mc-field__help')).toBe(true);
     });
-    it('shows validation message with correct state', () => {
+    it('shows validation message with invalid state', () => {
         const { getByText } = render(Field, {
             props: {
                 ...baseProps,
@@ -47,5 +46,53 @@ describe('m-field component', () => {
         expect(validation).toBeInTheDocument();
         expect(validation.id).toBe('validation-msg');
         expect(validation.classList.contains('is-invalid')).toBe(true);
+        expect(validation.classList.contains('is-valid')).toBe(false);
+    });
+    it('shows validation message with valid state', () => {
+        const { getByText } = render(Field, {
+            props: {
+                ...baseProps,
+                message: 'Looks good!',
+                messageid: 'validation-msg-valid',
+                isvalid: true,
+            },
+        });
+        const validation = getByText('Looks good!');
+        expect(validation).toBeInTheDocument();
+        expect(validation.id).toBe('validation-msg-valid');
+        expect(validation.classList.contains('is-valid')).toBe(true);
+        expect(validation.classList.contains('is-invalid')).toBe(false);
+    });
+    it('renders loader when isloading is true', () => {
+        const { container, getByText } = render(Field, {
+            props: {
+                ...baseProps,
+                message: 'Loading...',
+                messageid: 'loading-msg',
+                isloading: true,
+            },
+        });
+        const validation = getByText('Loading...');
+        expect(validation).toBeInTheDocument();
+        const loader = container.querySelector('m-loader, .mc-loader');
+        expect(loader).toBeTruthy();
+    });
+    it('does not render validation message if not valid, invalid, or loading', () => {
+        const { container } = render(Field, {
+            props: {
+                ...baseProps,
+                message: 'Should not appear',
+                messageid: 'msg-id',
+            },
+        });
+        const validation = container.querySelector('.mc-field__validation-message');
+        expect(validation).toBeNull();
+    });
+    it('does not render help text when helpid is missing', () => {
+        const { container } = render(Field, {
+            props: { ...baseProps, helptext: 'Missing ID!' },
+        });
+        const help = container.querySelector('.mc-field__help');
+        expect(help).toBeNull();
     });
 });

package/dist/components/field/Field.stories.d.ts

@@ -7,4 +7,5 @@ export declare const Input: Story;
 export declare const InputFull: Story;
 export declare const InputValid: Story;
 export declare const InputInvalid: Story;
+export declare const InputLoading: Story;
 //# sourceMappingURL=Field.stories.d.ts.map

package/dist/components/field/Field.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.stories.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IA4BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAC"}
+{"version":3,"file":"Field.stories.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IA6BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC"}

package/dist/components/field/Field.stories.js

@@ -23,6 +23,7 @@ const meta = {
       helpid=${ifDefined(args.helpid)}
       isvalid=${ifDefined(args.isvalid)}
       isinvalid=${ifDefined(args.isinvalid)}
+      isloading=${ifDefined(args.isloading)}
       messageid=${ifDefined(args.messageid)}
       message=${ifDefined(args.message)}
     >
@@ -91,3 +92,17 @@ export const InputInvalid = {
     `,
     },
 };
+export const InputLoading = {
+    args: {
+        label: 'Label',
+        id: 'inputLoadingId',
+        isloading: true,
+        message: 'Loading message (Be concise and use comprehensive words).',
+        default: `
+      <m-textinput
+        id="inputInvalidId"
+        placeholder="Placeholder"
+      ></m-textinput>
+    `,
+    },
+};

package/dist/components/field/Field.svelte

@@ -5,6 +5,8 @@
 />
 
 <script lang="ts">
+  import Loader from '../loader/Loader.svelte';
+
   /**
    * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.
    *
@@ -39,6 +41,10 @@
      * If `true`, applies an invalid state to the form field.
      */
     isinvalid?: boolean;
+    /**
+     * If `true`, applies a loading state to the form field.
+     */
+    isloading?: boolean;
     /**
      * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._
      */
@@ -59,6 +65,7 @@
     message,
     isinvalid,
     isvalid,
+    isloading,
   }: Props = $props();
 </script>
 
@@ -82,15 +89,14 @@
     <slot />
   </div>
 
-  {#if isinvalid || isvalid}
+  {#if isinvalid || isvalid || isloading}
     <span
       id={messageid}
-      class={[
-        'mc-field__validation-message',
-        isvalid && 'is-valid',
-        isinvalid && 'is-invalid',
-      ]}
+      class={['mc-field__validation-message', isvalid && 'is-valid', isinvalid && 'is-invalid']}
     >
+      {#if isloading}
+        <Loader size="xs" />
+      {/if}
       {message}
     </span>
   {/if}

package/dist/components/field/Field.svelte.d.ts

@@ -32,6 +32,10 @@ interface Props {
      * If `true`, applies an invalid state to the form field.
      */
     isinvalid?: boolean;
+    /**
+     * If `true`, applies a loading state to the form field.
+     */
+    isloading?: boolean;
     /**
      * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._
      */

package/dist/components/field/Field.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAwDH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;UAAqF,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Field.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.svelte.ts"],"names":[],"mappings":"AAME;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAyDH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;UAAqF,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}

package/dist/components/field/README.md

@@ -13,6 +13,7 @@ A field label is a text element that identifies the purpose of an input field, p
 | `helpid` | The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._ | `string` |   |
 | `isvalid` | If `true`, applies a valid state to the form field. | `boolean` |   |
 | `isinvalid` | If `true`, applies an invalid state to the form field. | `boolean` |   |
+| `isloading` | If `true`, applies a loading state to the form field. | `boolean` |   |
 | `messageid` | The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._ | `string` |   |
 | `message` | message displayed when the form field has a valid or invalid state, usually indicating validation or errors. | `string` |   |
 

package/dist/components/flag/Flag.js

@@ -1,4 +1,4 @@
-import{c as v,p,a as u,b as c,f as m,t as b,i as h,j as x,k as o,d as f,r as g,e as k,g as _,h as w}from"../../custom-element.js";var y=m('<div><span class="mc-flag__label"> </span></div>');const z={hash:"svelte-1e4tn4t",code:`/**
+import{c as v,p,a as u,b as o,f as m,t as b,i as h,j as x,k as c,d as f,r as g,e as k,g as _,h as w}from"../../custom-element.js";var y=m('<div><span class="mc-flag__label"> </span></div>');const z={hash:"svelte-1e4tn4t",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-flag.svelte-1e4tn4t {padding:0 0.5rem;border-radius:var(--radius-xs, 0.125rem);white-space:nowrap;font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);height:1.5rem;display:inline-flex;align-items:center;color:var(--flag-color-text-standard, #ffffff);background-color:var(--flag-color-background-standard, #191919);}.mc-flag--accent.svelte-1e4tn4t {color:var(--flag-color-text-accent, #ffffff);background-color:var(--flag-color-background-accent, #117f03);}.mc-flag--danger.svelte-1e4tn4t {color:var(--flag-color-text-danger, #ffffff);background-color:var(--flag-color-background-danger, #c61112);}.mc-flag--inverse.svelte-1e4tn4t {color:var(--flag-color-text-inverse, #000000);background-color:var(--flag-color-background-inverse, #ffffff);}`};function j(n,a){p(a,!0),u(n,z);let r=c(a,"appearance",7,"standard"),t=c(a,"label",7);var d={get appearance(){return r()},set appearance(l="standard"){r(l),o()},get label(){return t()},set label(l){t(l),o()}},e=y(),s=f(e),i=f(s,!0);return g(s),g(e),b(()=>{k(e,1,_(["mc-flag",`mc-flag--${r()}`]),"svelte-1e4tn4t"),w(i,t())}),h(n,e),x(d)}customElements.define("m-flag",v(j,{appearance:{},label:{}},[],[],!0));
+ */.mc-flag.svelte-1e4tn4t {padding:0 0.5rem;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);line-height:var(--line-height-s, 1.3);height:1.5rem;display:inline-flex;align-items:center;color:var(--flag-color-text-standard, #ffffff);background-color:var(--flag-color-background-standard, #191919);}.mc-flag--accent.svelte-1e4tn4t {color:var(--flag-color-text-accent, #ffffff);background-color:var(--flag-color-background-accent, #117f03);}.mc-flag--danger.svelte-1e4tn4t {color:var(--flag-color-text-danger, #ffffff);background-color:var(--flag-color-background-danger, #c61112);}.mc-flag--inverse.svelte-1e4tn4t {color:var(--flag-color-text-inverse, #000000);background-color:var(--flag-color-background-inverse, #ffffff);}`};function j(n,a){p(a,!0),u(n,z);let r=o(a,"appearance",7,"standard"),t=o(a,"label",7);var d={get appearance(){return r()},set appearance(l="standard"){r(l),c()},get label(){return t()},set label(l){t(l),c()}},e=y(),s=f(e),i=f(s,!0);return g(s),g(e),b(()=>{k(e,1,_(["mc-flag",`mc-flag--${r()}`]),"svelte-1e4tn4t"),w(i,t())}),h(n,e),x(d)}customElements.define("m-flag",v(j,{appearance:{},label:{}},[],[],!0));
 //# sourceMappingURL=Flag.js.map

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":";;q0BAAA,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    /**\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"}

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,IAkBX,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;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"}

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

@@ -13,10 +13,7 @@ const meta = {
         label: 'Flag label',
     },
     render: (args) => html `
-    <m-flag
-      label=${ifDefined(args.label)}
-      appearance=${ifDefined(args.appearance)}
-    ></m-flag>
+    <m-flag label=${ifDefined(args.label)} appearance=${ifDefined(args.appearance)}></m-flag>
   `,
 };
 export default meta;

package/dist/components/flag/Flag.svelte

@@ -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,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:`/**
  * 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 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};
 //# 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    [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"}

package/dist/components/iconbutton/IconButton.svelte

@@ -95,7 +95,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 +259,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/kpiitem/KpiItem.js

@@ -0,0 +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:`/**
+ * 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));
+//# 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","../../../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]}

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,8 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+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;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"}

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

@@ -0,0 +1,56 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+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',
+    },
+};