npm - @mozaic-ds/web-components - Versions diffs - 1.2.0 → 1.3.0 - Mend

@mozaic-ds/web-components 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (324) hide show

package/dist/components/divider/Divider.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{c as m,p as f,a as h,b as d,f as p,s as u,d as g,t as y,i as z,j as b,k as o,r as k,e as _,g as w}from"../../custom-element.js";import{s as x}from"../../slot.js";var D=p('<div class="mc-divider svelte-a5fs23"><div></div> <!></div>');const j={hash:"svelte-a5fs23",code:`/**
+import{c as m,p as f,a as h,b as d,f as p,s as u,d as g,t as y,h as z,i as b,j as o,e as k,l as _,m as w}from"../../custom-element.js";import{s as x}from"../../slot.js";var D=p('<div class="mc-divider svelte-a5fs23"><div></div> <!></div>');const j={hash:"svelte-a5fs23",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-divider.svelte-a5fs23 {position:relative;}.mc-divider-horizontal.svelte-a5fs23 {background:var(--divider-color-primary, #cccccc);height:0.0625rem;}.mc-divider-horizontal--secondary.svelte-a5fs23 {background:var(--divider-color-secondary, #999999);}.mc-divider-horizontal--tertiary.svelte-a5fs23 {background:var(--divider-color-tertiary, #333333);}.mc-divider-horizontal--inverse.svelte-a5fs23 {background:var(--divider-color-inverse, #ffffff);}.mc-divider-horizontal--m.svelte-a5fs23 {height:0.25rem;}.mc-divider-horizontal--l.svelte-a5fs23 {height:0.5rem;}.mc-divider-vertical.svelte-a5fs23 {background:var(--divider-color-primary, #cccccc);width:0.0625rem;}.mc-divider-vertical--secondary.svelte-a5fs23 {background:var(--divider-color-secondary, #999999);}.mc-divider-vertical--tertiary.svelte-a5fs23 {background:var(--divider-color-tertiary, #333333);}.mc-divider-vertical--inverse.svelte-a5fs23 {background:var(--divider-color-inverse, #ffffff);}.mc-divider-vertical--m.svelte-a5fs23 {height:0.25rem;}.mc-divider-vertical--l.svelte-a5fs23 {height:0.5rem;}.mc-divider-vertical.svelte-a5fs23 {content:"";display:block;height:100%;position:absolute;top:50%;transform:translateY(-50%);}`};function E(c,e){f(e,!0),h(c,j);let i=d(e,"orientation",7,"horizontal"),a=d(e,"appearance",7,"primary"),t=d(e,"size",7,"s");var l={get orientation(){return i()},set orientation(r="horizontal"){i(r),o()},get appearance(){return a()},set appearance(r="primary"){a(r),o()},get size(){return t()},set size(r="s"){t(r),o()}},s=D(),v=g(s),n=u(v,2);return x(n,e,"default",{}),k(s),y(()=>_(v,1,w([`mc-divider-${i()}`,`mc-divider-horizontal--${a()}`,`mc-divider-horizontal--${t()}`]),"svelte-a5fs23")),z(c,s),b(l)}customElements.define("m-divider",m(E,{orientation:{},appearance:{},size:{}},["default"],[],!0));
 //# sourceMappingURL=Divider.js.map

package/dist/components/divider/Divider.stories.d.ts CHANGED Viewed

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

package/dist/components/divider/Divider.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Divider.stories.d.ts","sourceRoot":"","sources":["../../../src/components/divider/Divider.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,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC"}
1	+ {"version":3,"file":"Divider.stories.d.ts","sourceRoot":"","sources":["../../../src/components/divider/Divider.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,kBAAkB,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IA6BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC"}

package/dist/components/divider/Divider.stories.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './Divider.svelte';
 const meta = {
     title: 'Structure/Divider',
     component: 'm-divider',

package/dist/components/drawer/Drawer.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{c as M,p as S,b as d,z as Z,t as T,i as j,j as q,k as a,e as F,g as G,v as $,a as oo,f as C,d as n,s as g,r as c,h as H}from"../../custom-element.js";import{i as A}from"../../if.js";import{s as L}from"../../slot.js";import{s as w,a as to}from"../../attributes.js";import{b as eo}from"../../this.js";import"../../legacy.js";import{C as ro}from"../../Cross24.js";import{O as ao}from"../overlay/Overlay.js";var no=Z('<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.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function I(h,t){S(t,!1);let e=d(t,"id",12,void 0),i=d(t,"style",12,void 0),u=d(t,"className",12,void 0),v=d(t,"fill",12,void 0),f=d(t,"size",12,"1.5rem");var m={get id(){return e()},set id(r){e(r),a()},get style(){return i()},set style(r){i(r),a()},get className(){return u()},set className(r){u(r),a()},get fill(){return v()},set fill(r){v(r),a()},get size(){return f()},set size(r){f(r),a()}},l=no();return T(()=>{w(l,"id",e()),to(l,i()),F(l,0,G(u())),w(l,"fill",v())}),j(h,l),q(m)}customElements.define("arrow-back-24",M(I,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var co=C('<button class="mc-drawer__back mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Back"><!></button>'),lo=C('<h2 class="mc-drawer__content__title svelte-1d2fooj"> </h2>'),so=C('<div role="dialog" aria-labelledby="drawerTitle" tabindex="-1"><div class="mc-drawer__dialog svelte-1d2fooj" role="document"><div class="mc-drawer__header svelte-1d2fooj"><!> <h2 class="mc-drawer__title svelte-1d2fooj" id="drawerTitle"> </h2> <button class="mc-drawer__close mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Close"><!></button></div> <div class="mc-drawer__body svelte-1d2fooj"><div class="mc-drawer__content svelte-1d2fooj"><!> <!></div></div> <div class="mc-drawer__footer svelte-1d2fooj"><!></div></div> <!></div>');const bo={hash:"svelte-1d2fooj",code:`/**
+import{c as M,p as S,b as d,A as Z,t as B,h as j,i as q,j as a,l as $,m as oo,w as to,a as eo,f as T,r as ro,d as n,s as m,e as c,g as A}from"../../custom-element.js";import{i as D}from"../../if.js";import{s as H}from"../../slot.js";import{s as L,b as ao,a as no}from"../../attributes.js";import{b as co}from"../../this.js";import"../../legacy.js";import{C as lo}from"../../Cross24.js";import{O as so}from"../overlay/Overlay.js";var io=Z('<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.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function F(h,t){S(t,!1);let e=d(t,"id",12,void 0),i=d(t,"style",12,void 0),b=d(t,"className",12,void 0),u=d(t,"fill",12,void 0),v=d(t,"size",12,"1.5rem");var f={get id(){return e()},set id(r){e(r),a()},get style(){return i()},set style(r){i(r),a()},get className(){return b()},set className(r){b(r),a()},get fill(){return u()},set fill(r){u(r),a()},get size(){return v()},set size(r){v(r),a()}},l=io();return B(()=>{L(l,"id",e()),ao(l,i()),$(l,0,oo(b())),L(l,"fill",u())}),j(h,l),q(f)}customElements.define("arrow-back-24",M(F,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var bo=T('<button class="mc-drawer__back mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Back"><!></button>'),uo=T('<h2 class="mc-drawer__content__title svelte-1d2fooj"> </h2>'),vo=T('<div><div class="mc-drawer__dialog svelte-1d2fooj" role="document"><div class="mc-drawer__header svelte-1d2fooj"><!> <h2 class="mc-drawer__title svelte-1d2fooj" id="drawerTitle"> </h2> <button class="mc-drawer__close mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Close"><!></button></div> <div class="mc-drawer__body svelte-1d2fooj"><div class="mc-drawer__content svelte-1d2fooj"><!> <!></div></div> <div class="mc-drawer__footer svelte-1d2fooj"><!></div></div> <!></div>');const fo={hash:"svelte-1d2fooj",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-drawer.svelte-1d2fooj {box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:0.5rem;justify-content:flex-end;}
 @media (width >= 680px) {.mc-drawer.svelte-1d2fooj {padding:1rem;}
@@ -10,5 +10,5 @@ import{c as M,p as S,b as d,z as Z,t as T,i as j,j as q,k as a,e as F,g as G,v a
 @media (width >= 680px) {.mc-drawer__content.svelte-1d2fooj {padding:1.5rem;}
 }.mc-drawer__content__title.svelte-1d2fooj {font-size:var(--font-title-m, 1.5rem);margin:0 0 0.5rem;}.mc-drawer__footer.svelte-1d2fooj {display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, 0.0625rem) solid var(--divider-color-primary, #cccccc);}
 @media (width >= 680px) {.mc-drawer__footer.svelte-1d2fooj {justify-content:center;flex-direction:row;}
-}.mc-drawer-open.svelte-1d2fooj {overflow:hidden;}.mc-drawer.is-open.svelte-1d2fooj .mc-drawer__dialog:where(.svelte-1d2fooj) {pointer-events:all;transform:translate3d(0, 0, 0);transition:visibility 0s linear 0s, transform 0.4s;visibility:visible;}.mc-button.svelte-1d2fooj {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1d2fooj:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1d2fooj:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1d2fooj: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-1d2fooj {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1d2fooj {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-1d2fooj {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-1d2fooj {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-1d2fooj: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-1d2fooj: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-1d2fooj {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-1d2fooj {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-1d2fooj {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-1d2fooj {padding:0.25rem;}.mc-button--outlined.svelte-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1d2fooj:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1d2fooj:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1d2fooj: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-1d2fooj {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-1d2fooj:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-1d2fooj: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-1d2fooj {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-1d2fooj:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-1d2fooj: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-1d2fooj {--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-1d2fooj:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-1d2fooj: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-1d2fooj {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function io(h,t){S(t,!0),oo(h,bo);let e=d(t,"open",7),i=d(t,"position",7),u=d(t,"extended",7),v=d(t,"back",7),f=d(t,"title",7),m=d(t,"contentTitle",7),l=d(t,"onUpdateOpen",7),r=d(t,"onBack",7),k;const E=()=>{e(!1),l()?.(e());const o=new CustomEvent("update:open",{detail:e(),bubbles:!0,composed:!0});k.dispatchEvent(o)},J=()=>{r()?.();const o=new CustomEvent("back",{bubbles:!0,composed:!0});k.dispatchEvent(o)};var K={get open(){return e()},set open(o){e(o),a()},get position(){return i()},set position(o){i(o),a()},get extended(){return u()},set extended(o){u(o),a()},get back(){return v()},set back(o){v(o),a()},get title(){return f()},set title(o){f(o),a()},get contentTitle(){return m()},set contentTitle(o){m(o),a()},get onUpdateOpen(){return l()},set onUpdateOpen(o){l(o),a()},get onBack(){return r()},set onBack(o){r(o),a()}},s=so();s.__keydown=o=>o.key==="Escape"&&E();var _=n(s),p=n(_),O=n(p);{var P=o=>{var b=co();b.__click=J;var B=n(b);I(B,{"aria-hidden":"true"}),c(b),j(o,b)};A(O,o=>{v()&&o(P)})}var x=g(O,2),Q=n(x,!0);c(x);var y=g(x,2);y.__click=E;var R=n(y);ro(R,{"aria-hidden":"true"}),c(y),c(p);var z=g(p,2),N=n(z),U=n(N);{var V=o=>{var b=lo(),B=n(b,!0);c(b),T(()=>H(B,m())),j(o,b)};A(U,o=>{m()&&o(V)})}var W=g(U,2);L(W,t,"default",{}),c(N),c(z);var D=g(z,2),X=n(D);L(X,t,"footer",{}),c(D),c(_);var Y=g(_,2);return ao(Y,{get isvisible(){return e()},dialoglabel:"drawerTitle"}),c(s),eo(s,o=>k=o,()=>k),T(()=>{F(s,1,G(["mc-drawer",`mc-drawer--${i()}`,e()&&"is-open",u()&&"mc-drawer--extend"]),"svelte-1d2fooj"),w(s,"aria-modal",e()?"true":"false"),w(s,"aria-hidden",!e()),H(Q,f())}),j(h,s),q(K)}$(["keydown","click"]);customElements.define("m-drawer",M(io,{open:{},position:{},extended:{},back:{},title:{},contentTitle:{},onUpdateOpen:{},onBack:{}},["default","footer"],[],!0));
+}.mc-drawer-open.svelte-1d2fooj {overflow:hidden;}.mc-drawer.is-open.svelte-1d2fooj .mc-drawer__dialog:where(.svelte-1d2fooj) {pointer-events:all;transform:translate3d(0, 0, 0);transition:visibility 0s linear 0s, transform 0.4s;visibility:visible;}.mc-button.svelte-1d2fooj {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1d2fooj:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1d2fooj:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1d2fooj: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-1d2fooj {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1d2fooj {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-1d2fooj {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-1d2fooj {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-1d2fooj: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-1d2fooj: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-1d2fooj {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-1d2fooj {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-1d2fooj {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-1d2fooj {padding:0.25rem;}.mc-button--outlined.svelte-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1d2fooj:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1d2fooj:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1d2fooj: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-1d2fooj {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-1d2fooj:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-1d2fooj: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-1d2fooj {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-1d2fooj:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-1d2fooj: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-1d2fooj {--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-1d2fooj:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-1d2fooj: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-1d2fooj {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function mo(h,t){S(t,!0),eo(h,fo);let e=d(t,"open",7),i=d(t,"position",7),b=d(t,"extended",7),u=d(t,"back",7),v=d(t,"title",7),f=d(t,"contentTitle",7),l=d(t,"onUpdateOpen",7),r=d(t,"onBack",7),G=ro(t,["$$slots","$$events","$$legacy","$$host","open","position","extended","back","title","contentTitle","onUpdateOpen","onBack"]),k;const O=()=>{e(!1),l()?.(e());const o=new CustomEvent("update:open",{detail:e(),bubbles:!0,composed:!0});k.dispatchEvent(o)},I=()=>{r()?.();const o=new CustomEvent("back",{bubbles:!0,composed:!0});k.dispatchEvent(o)};var J={get open(){return e()},set open(o){e(o),a()},get position(){return i()},set position(o){i(o),a()},get extended(){return b()},set extended(o){b(o),a()},get back(){return u()},set back(o){u(o),a()},get title(){return v()},set title(o){v(o),a()},get contentTitle(){return f()},set contentTitle(o){f(o),a()},get onUpdateOpen(){return l()},set onUpdateOpen(o){l(o),a()},get onBack(){return r()},set onBack(o){r(o),a()}},g=vo(),K=o=>o.key==="Escape"&&O();no(g,()=>({class:["mc-drawer",`mc-drawer--${i()}`,e()&&"is-open",b()&&"mc-drawer--extend"],role:"dialog","aria-labelledby":"drawerTitle","aria-modal":e()?"true":"false",tabindex:"-1","aria-hidden":!e(),onkeydown:K,...G}),void 0,void 0,void 0,"svelte-1d2fooj");var w=n(g),_=n(w),C=n(_);{var P=o=>{var s=bo();s.__click=I;var z=n(s);F(z,{"aria-hidden":"true"}),c(s),j(o,s)};D(C,o=>{u()&&o(P)})}var p=m(C,2),Q=n(p,!0);c(p);var x=m(p,2);x.__click=O;var R=n(x);lo(R,{"aria-hidden":"true"}),c(x),c(_);var y=m(_,2),E=n(y),U=n(E);{var V=o=>{var s=uo(),z=n(s,!0);c(s),B(()=>A(z,f())),j(o,s)};D(U,o=>{f()&&o(V)})}var W=m(U,2);H(W,t,"default",{}),c(E),c(y);var N=m(y,2),X=n(N);H(X,t,"footer",{}),c(N),c(w);var Y=m(w,2);return so(Y,{get isvisible(){return e()},dialoglabel:"drawerTitle"}),c(g),co(g,o=>k=o,()=>k),B(()=>A(Q,v())),j(h,g),q(J)}to(["click"]);customElements.define("m-drawer",M(mo,{open:{},position:{},extended:{},back:{},title:{},contentTitle:{},onUpdateOpen:{},onBack:{}},["default","footer"],[],!0));
 //# sourceMappingURL=Drawer.js.map

package/dist/components/drawer/Drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ArrowBack24/ArrowBack24.svelte","../../../src/components/drawer/Drawer.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'arrow-back-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.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'm-drawer' }} />\n\n<script lang=\"ts\">\n import ArrowBack24 from '@mozaic-ds/icons-svelte/svelte/ArrowBack24/ArrowBack24.svelte';\n import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n import MOverlay from '../overlay/Overlay.svelte';\n /*\n A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality.\n \n @slot default - Use this slot to insert the content of the drawer\n * @slot footer - Use this slot to insert buttons in the footer\n * @event update:open {CustomEvent<boolean>} - Emits when the drawer open state changes.\n * @event back {CustomEvent<void>} - Emits when click back button of the drawer.\n /\n interface Props {\n /\n If `true`, display the drawer.\n /\n open?: boolean;\n /\n Position of the drawer.\n /\n position?: 'left' \| 'right';\n /\n If `true`, the drawer have a bigger width.\n /\n extended?: boolean;\n /\n If `true`, display the back button.\n /\n back?: boolean;\n /\n Title of the drawer.\n /\n title: string;\n /\n Title of the content of the drawer.\n /\n contentTitle?: string;\n /\n Callback fired when the drawer open state changes.\n /\n onUpdateOpen?: (open: boolean) => void;\n /\n Callback fired when the back button is clicked.\n */\n onBack?: () => void;\n }\n\n let { open, position, extended, back, title, contentTitle, onUpdateOpen, onBack }: Props ~~=\n~~ $props();\n let element: HTMLElement;\n\n const onClose = () => {\n open = false;\n\n onUpdateOpen?.(open);\n\n const event = new CustomEvent('update:open', {\n detail: open,\n bubbles: true,\n composed: true,\n });\n element.dispatchEvent(event);\n };\n\n const onClickBack = () => {\n onBack?.();\n\n const event = new CustomEvent('back', {\n bubbles: true,\n composed: true,\n });\n element.dispatchEvent(event);\n };\n</script>\n\n<div\n class={[\n 'mc-drawer',\n `mc-drawer--${position}`,\n open && 'is-open',\n extended && 'mc-drawer--extend',\n ]}\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n aria-modal={open ? 'true' : 'false'}\n tabindex=\"-1\"\n aria-hidden={!open}\n onkeydown={(e) => e.key === 'Escape' && onClose()}\n bind:this={element}\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n {#if back}\n <button\n class=\"mc-drawer__back mc-button mc-button--icon-button mc-button--ghost\"\n aria-label=\"Back\"\n onclick={onClickBack}\n >\n <ArrowBack24 aria-hidden=\"true\" />\n </button>\n {/if}\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{title}</h2>\n <button\n class=\"mc-drawer__close mc-button mc-button--icon-button mc-button--ghost\"\n aria-label=\"Close\"\n onclick={onClose}\n >\n <Cross24 aria-hidden=\"true\" />\n </button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\">\n {#if contentTitle}\n <h2 class=\"mc-drawer__content__title\">{contentTitle}</h2>\n {/if}\n <slot />\n </div>\n </div>\n\n <div class=\"mc-drawer__footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n <MOverlay isvisible={open} dialoglabel=\"drawerTitle\" />\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/drawer';\n @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["id","style","className","fill","size","open","$.prop","$$props","position","extended","back","title","contentTitle","onUpdateOpen","onBack","element","onClose","event","onClickBack","~~div~~","e","$$render","consequent","consequent_1","$.bind_this","$$value"],"mappings":"~~0tBAAA~~,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,OAAUC,GAAK,~~UAASC~~,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E;;;;;;;;;;;;87WCPA,~~sBAiDQE~~,EAAIC,EAAAC,EAAA,OAAA,CAAA,~~EAAEC~~,EAAQF,EAAAC,EAAA,WAAA,CAAA,~~EAAEE~~,EAAQH,EAAAC,EAAA,WAAA,CAAA,~~EAAEG~~,EAAIJ,EAAAC,EAAA,OAAA,CAAA,~~EAAEI~~,EAAKL,EAAAC,EAAA,QAAA,CAAA,~~EAAEK~~,EAAYN,EAAAC,EAAA,eAAA,CAAA,~~EAAEM~~,EAAYP,EAAAC,EAAA,eAAA,CAAA,~~EAAEO~~,EAAMR,EAAAC,EAAA,SAAA,CAAA,~~EAE3EQ~~,EAEE,MAAAC,EAAO,IAAS,~~CACpBX~~,EAAO,EAAK,EAEZQ,EAAY,IAAGR,GAAI,EAEb,~~MAAAY~~,EAAK,IAAO,YAAY,eAC5B,~~OAAQZ~~,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,~~EAEhBU~~,EAAQ,cAAcE,CAAK,CAC7B,EAEMC,EAAW,IAAS,~~CACxBJ~~,MAAM,~~QAEAG~~,EAAK,IAAO,YAAY,OAAM,CAClC,QAAS,GACT,SAAU,GAAI,EAEhBF,EAAQ,cAAcE,CAAK,CAC7B,+aAeYE,~~EAAA~~,~~UAAAC,~~GAAMA,EAAE,MAAQ,UAAYJ,EAAO,~~2DAS9BE~~,~~8DAJRR~~,EAAI,~~GAAAW~~,EAAAC,CAAA,uDAaEN,~~8HASgCJ~~,EAAY,CAAA,CAAA,kBADhDA,EAAY,~~GAAAS~~,EAAAE,CAAA,~~iJAWFlB~~,EAAI,~~oCApCdmB~~,~~GAAAL~~,~~EAAAM~~,~~GAAAV~~,QAAAA,CAAO,~~kBAXhB~~,~~0BACcP~~,~~EAAQ,~~CAAA,~~GACtBH,EAAI,GAAI,UACRI,KAAY,yDAIFJ,EAAI,EAAG,OAAS,OAAO,qBAErBA,EAAI,~~CAAA,~~MAeiCM,GAAK,eA5B1D~~","x_google_ignoreList":[0]}
1	+ {"version":3,"file":"Drawer.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ArrowBack24/ArrowBack24.svelte","../../../src/components/drawer/Drawer.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'arrow-back-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.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'm-drawer' }} />\n\n<script lang=\"ts\">\n import ArrowBack24 from '@mozaic-ds/icons-svelte/svelte/ArrowBack24/ArrowBack24.svelte';\n import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n import MOverlay from '../overlay/Overlay.svelte';\n /*\n A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality.\n \n @slot default - Use this slot to insert the content of the drawer\n * @slot footer - Use this slot to insert buttons in the footer\n * @event update:open {CustomEvent<boolean>} - Emits when the drawer open state changes.\n * @event back {CustomEvent<void>} - Emits when click back button of the drawer.\n /\n interface Props {\n /\n If `true`, display the drawer.\n /\n open?: boolean;\n /\n Position of the drawer.\n /\n position?: 'left' \| 'right';\n /\n If `true`, the drawer have a bigger width.\n /\n extended?: boolean;\n /\n If `true`, display the back button.\n /\n back?: boolean;\n /\n Title of the drawer.\n /\n title: string;\n /\n Title of the content of the drawer.\n /\n contentTitle?: string;\n /\n Callback fired when the drawer open state changes.\n /\n onUpdateOpen?: (open: boolean) => void;\n /\n Callback fired when the back button is clicked.\n */\n onBack?: () => void;\n }\n\n let {\n open,\n position,\n extended,\n back,\n title,\n contentTitle,\n onUpdateOpen,\n onBack,\n ...attrs\n }: Props = $props();\n let element: HTMLElement;\n\n const onClose = () => {\n open = false;\n\n onUpdateOpen?.(open);\n\n const event = new CustomEvent('update:open', {\n detail: open,\n bubbles: true,\n composed: true,\n });\n element.dispatchEvent(event);\n };\n\n const onClickBack = () => {\n onBack?.();\n\n const event = new CustomEvent('back', {\n bubbles: true,\n composed: true,\n });\n element.dispatchEvent(event);\n };\n</script>\n\n<div\n class={[\n 'mc-drawer',\n `mc-drawer--${position}`,\n open && 'is-open',\n extended && 'mc-drawer--extend',\n ]}\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n aria-modal={open ? 'true' : 'false'}\n tabindex=\"-1\"\n aria-hidden={!open}\n onkeydown={(e) => e.key === 'Escape' && onClose()}\n bind:this={element}\n {...attrs}\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n {#if back}\n <button\n class=\"mc-drawer__back mc-button mc-button--icon-button mc-button--ghost\"\n aria-label=\"Back\"\n onclick={onClickBack}\n >\n <ArrowBack24 aria-hidden=\"true\" />\n </button>\n {/if}\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{title}</h2>\n <button\n class=\"mc-drawer__close mc-button mc-button--icon-button mc-button--ghost\"\n aria-label=\"Close\"\n onclick={onClose}\n >\n <Cross24 aria-hidden=\"true\" />\n </button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\">\n {#if contentTitle}\n <h2 class=\"mc-drawer__content__title\">{contentTitle}</h2>\n {/if}\n <slot />\n </div>\n </div>\n\n <div class=\"mc-drawer__footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n <MOverlay isvisible={open} dialoglabel=\"drawerTitle\" />\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/drawer';\n @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["id","style","className","fill","size","open","$.prop","$$props","position","extended","back","title","contentTitle","onUpdateOpen","onBack","attrs","$.rest_props","element","onClose","event","onClickBack","event_handler","e","$$render","consequent","consequent_1","$.bind_this","div","$$value"],"mappings":"4uBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,OAAUC,GAAK,WAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E;;;;;;;;;;;;87WCPA,sBAkDIE,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACRG,EAAIJ,EAAAC,EAAA,OAAA,CAAA,EACJI,EAAKL,EAAAC,EAAA,QAAA,CAAA,EACLK,EAAYN,EAAAC,EAAA,eAAA,CAAA,EACZM,EAAYP,EAAAC,EAAA,eAAA,CAAA,EACZO,EAAMR,EAAAC,EAAA,SAAA,CAAA,EACHQ,EAAAC,GAAAT,EAAA,+HAEDU,EAEE,MAAAC,EAAO,IAAS,CACpBb,EAAO,EAAK,EAEZQ,EAAY,IAAGR,GAAI,EAEb,MAAAc,EAAK,IAAO,YAAY,eAC5B,OAAQd,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBY,EAAQ,cAAcE,CAAK,CAC7B,EAEMC,EAAW,IAAS,CACxBN,MAAM,QAEAK,EAAK,IAAO,YAAY,OAAM,CAClC,QAAS,GACT,SAAU,GAAI,EAEhBF,EAAQ,cAAcE,CAAK,CAC7B,+aAeYE,EAAAC,GAAMA,EAAE,MAAQ,UAAYJ,EAAO,oBAV7C,0BACcV,EAAQ,CAAA,GACtBH,EAAI,GAAI,UACRI,KAAY,gFAIFJ,IAAO,OAAS,qCAEdA,EAAI,iBAGdU,oGAQaK,8DAJRV,EAAI,GAAAa,EAAAC,CAAA,uDAaEN,8HASgCN,EAAY,CAAA,CAAA,kBADhDA,EAAY,GAAAW,EAAAE,CAAA,iJAWFpB,EAAI,oCArCdqB,GAAAC,EAAAC,GAAAX,QAAAA,CAAO,YAciCN,EAAK,CAAA,CAAA,aA7B1D","x_google_ignoreList":[0]}

package/dist/components/drawer/Drawer.stories.d.ts CHANGED Viewed

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

package/dist/components/drawer/Drawer.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;~~AAMrE~~,QAAA,MAAM,IAAI,EAAE,IA0EX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;CASlB,CAAC"}
1	+ {"version":3,"file":"Drawer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IA0EX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;CASlB,CAAC"}

package/dist/components/drawer/Drawer.stories.js CHANGED Viewed

@@ -2,6 +2,8 @@ import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { action } from 'storybook/actions';
+import './Drawer.svelte';
+import '../button/Button.svelte';
 const meta = {
     title: 'Overlay/Drawer',
     component: 'm-drawer',

package/dist/components/drawer/Drawer.svelte CHANGED Viewed

@@ -47,8 +47,17 @@
     onBack?: () => void;
   }
-  let { open, position, extended, back, title, contentTitle, onUpdateOpen, onBack }: Props =
-    $props();
+  let {
+    open,
+    position,
+    extended,
+    back,
+    title,
+    contentTitle,
+    onUpdateOpen,
+    onBack,
+    ...attrs
+  }: Props = $props();
   let element: HTMLElement;
   const onClose = () => {
@@ -89,6 +98,7 @@
   aria-hidden={!open}
   onkeydown={(e) => e.key === 'Escape' && onClose()}
   bind:this={element}
+  {...attrs}
 >
   <div class="mc-drawer__dialog" role="document">
     <div class="mc-drawer__header">

package/dist/components/drawer/Drawer.svelte.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAOE;;;;;;;GAOG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;~~AA4EH~~,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,MAAM;;;;;;;;UAAqF,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAOE;;;;;;;GAOG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAqFH,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,MAAM;;;;;;;;UAAqF,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}

package/dist/components/field/Field.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import{c as J,p as K,a as N,b as t,f as x,s as d,d as r,t as h,i as u,j as O,k as a,r as v,h as w,e as P,g as Q}from"../../custom-element.js";import{i as p}from"../../if.js";import{s as R}from"../../slot.js";import{s as k}from"../../attributes.js";import{L as T}from"../loader/Loader.js";var U=x('<span class="mc-field__requirement svelte-19i2lwv" aria-hidden="true"> </span>'),W=x('<span class="mc-field__help svelte-19i2lwv"> </span>'),X=x("<span><!> </span>"),Y=x('<div class="mc-field"><label class="mc-field__label svelte-19i2lwv"> <!></label> <!> <div class="mc-field__content svelte-19i2lwv"><!></div> <!></div>');const $={hash:"svelte-19i2lwv",code:`/**
+import{c as J,p as K,a as N,b as t,f as x,s as d,d as r,t as h,h as u,i as O,j as a,e as v,g as w,l as P,m as Q}from"../../custom-element.js";import{i as p}from"../../if.js";import{s as R}from"../../slot.js";import{s as M}from"../../attributes.js";import{L as T}from"../loader/Loader.js";var U=x('<span class="mc-field__requirement svelte-19i2lwv" aria-hidden="true"> </span>'),W=x('<span class="mc-field__help svelte-19i2lwv"> </span>'),X=x("<span><!> </span>"),Y=x('<div class="mc-field"><label class="mc-field__label svelte-19i2lwv"> <!></label> <!> <div class="mc-field__content svelte-19i2lwv"><!></div> <!></div>');const $={hash:"svelte-19i2lwv",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-field__label.svelte-19i2lwv {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000);}.mc-field__requirement.svelte-19i2lwv, .mc-field__help.svelte-19i2lwv {font-size:var(--font-size-50, 0.75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666);}.mc-field__help.svelte-19i2lwv {display:block;margin-top:0.125rem;}.mc-field__content.svelte-19i2lwv {margin-top:0.5rem;}.mc-field__validation-message.svelte-19i2lwv {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:0.25rem;margin-top:0.25rem;}.mc-field__validation-message.is-valid.svelte-19i2lwv::before, .mc-field__validation-message.is-invalid.svelte-19i2lwv::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-19i2lwv {color:var(--field-color-validation-valid, #117f03);}.mc-field__validation-message.is-valid.svelte-19i2lwv::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");}.mc-field__validation-message.is-invalid.svelte-19i2lwv {color:var(--field-color-validation-invalid, #c61112);}.mc-field__validation-message.is-invalid.svelte-19i2lwv::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");}
-/* stylelint-enable string-no-newline */`};function ee(M,l){K(l,!0),N(M,$);let b=t(l,"id",7),q=t(l,"label",7),n=t(l,"requirementtext",7),o=t(l,"helpid",7),m=t(l,"helptext",7),y=t(l,"messageid",7),z=t(l,"message",7),g=t(l,"isinvalid",7),c=t(l,"isvalid",7),f=t(l,"isloading",7);var j={get id(){return b()},set id(e){b(e),a()},get label(){return q()},set label(e){q(e),a()},get requirementtext(){return n()},set requirementtext(e){n(e),a()},get helpid(){return o()},set helpid(e){o(e),a()},get helptext(){return m()},set helptext(e){m(e),a()},get messageid(){return y()},set messageid(e){y(e),a()},get message(){return z()},set message(e){z(e),a()},get isinvalid(){return g()},set isinvalid(e){g(e),a()},get isvalid(){return c()},set isvalid(e){c(e),a()},get isloading(){return f()},set isloading(e){f(e),a()}},E=Y(),_=r(E),L=r(_),D=d(L);{var F=e=>{var i=U(),s=r(i,!0);v(i),h(()=>w(s,n())),u(e,i)};p(D,e=>{n()&&e(F)})}v(_);var B=d(_,2);{var S=e=>{var i=W(),s=r(i,!0);v(i),h(()=>{k(i,"id",o()),w(s,m())}),u(e,i)};p(B,e=>{o()&&m()&&e(S)})}var Z=d(B,2),V=r(Z);R(V,l,"default",{}),v(Z);var A=d(Z,2);{var G=e=>{var i=X(),s=r(i);{var H=C=>{T(C,{size:"xs"})};p(s,C=>{f()&&C(H)})}var I=d(s);v(i),h(()=>{k(i,"id",y()),P(i,1,Q(["mc-field__validation-message",c()&&"is-valid",g()&&"is-invalid"]),"svelte-19i2lwv"),w(I,` ${z()??""}`)}),u(e,i)};p(A,e=>{(g()||c()||f())&&e(G)})}return v(E),h(()=>{k(_,"for",b()),w(L,`${q()??""} `)}),u(M,E),O(j)}customElements.define("m-field",J(ee,{id:{},label:{},requirementtext:{},helpid:{},helptext:{},messageid:{},message:{},isinvalid:{},isvalid:{},isloading:{}},["default"],[],!0));
+/* stylelint-enable string-no-newline */`};function ee(k,l){K(l,!0),N(k,$);let b=t(l,"id",7),q=t(l,"label",7),n=t(l,"requirementtext",7),o=t(l,"helpid",7),m=t(l,"helptext",7),y=t(l,"messageid",7),z=t(l,"message",7),g=t(l,"isinvalid",7),c=t(l,"isvalid",7),f=t(l,"isloading",7);var j={get id(){return b()},set id(e){b(e),a()},get label(){return q()},set label(e){q(e),a()},get requirementtext(){return n()},set requirementtext(e){n(e),a()},get helpid(){return o()},set helpid(e){o(e),a()},get helptext(){return m()},set helptext(e){m(e),a()},get messageid(){return y()},set messageid(e){y(e),a()},get message(){return z()},set message(e){z(e),a()},get isinvalid(){return g()},set isinvalid(e){g(e),a()},get isvalid(){return c()},set isvalid(e){c(e),a()},get isloading(){return f()},set isloading(e){f(e),a()}},E=Y(),_=r(E),L=r(_),D=d(L);{var F=e=>{var i=U(),s=r(i,!0);v(i),h(()=>w(s,n())),u(e,i)};p(D,e=>{n()&&e(F)})}v(_);var B=d(_,2);{var S=e=>{var i=W(),s=r(i,!0);v(i),h(()=>{M(i,"id",o()),w(s,m())}),u(e,i)};p(B,e=>{o()&&m()&&e(S)})}var Z=d(B,2),V=r(Z);R(V,l,"default",{}),v(Z);var A=d(Z,2);{var G=e=>{var i=X(),s=r(i);{var H=C=>{T(C,{size:"xs"})};p(s,C=>{f()&&C(H)})}var I=d(s);v(i),h(()=>{M(i,"id",y()),P(i,1,Q(["mc-field__validation-message",c()&&"is-valid",g()&&"is-invalid"]),"svelte-19i2lwv"),w(I,` ${z()??""}`)}),u(e,i)};p(A,e=>{(g()||c()||f())&&e(G)})}return v(E),h(()=>{M(_,"for",b()),w(L,`${q()??""} `)}),u(k,E),O(j)}customElements.define("m-field",J(ee,{id:{},label:{},requirementtext:{},helpid:{},helptext:{},messageid:{},message:{},isinvalid:{},isvalid:{},isloading:{}},["default"],[],!0));
 //# sourceMappingURL=Field.js.map

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

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

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

	@@ -1 +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,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"}
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;AAIrE,OAAO,gBAAgB,CAAC;AACxB,OAAO,+BAA+B,CAAC;AAEvC,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 CHANGED Viewed

@@ -1,6 +1,8 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './Field.svelte';
+import '../textinput/Textinput.svelte';
 const meta = {
     title: 'Form Elements/Field',
     component: 'm-field',

package/dist/components/flag/Flag.js CHANGED Viewed

@@ -1,4 +1,4 @@
-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:`/**
+import{c as p,p as m,a as u,b as n,f as b,r as h,t as _,h as x,i as k,j as c,d as f,e as d,g as w}from"../../custom-element.js";import{a as y}from"../../attributes.js";var $=b('<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(--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));
+ */.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(o,e){m(e,!0),u(o,z);let t=n(e,"appearance",7,"standard"),r=n(e,"label",7),g=h(e,["$$slots","$$events","$$legacy","$$host","appearance","label"]);var i={get appearance(){return t()},set appearance(l="standard"){t(l),c()},get label(){return r()},set label(l){r(l),c()}},a=$();y(a,()=>({class:["mc-flag",`mc-flag--${t()}`],...g}),void 0,void 0,void 0,"svelte-1e4tn4t");var s=f(a),v=f(s,!0);return d(s),d(a),_(()=>w(v,r())),x(o,a),k(i)}customElements.define("m-flag",p(j,{appearance:{},label:{}},[],[],!0));
 //# sourceMappingURL=Flag.js.map

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

	@@ -1 +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~~"}
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, ...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"],"mappings":";;40BAAA,gBAiBQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAKC,EAAKC,EAAAF,EAAA,sHAA3B,WAAU,kFAGlB,UAAS,YAAcH,EAAU,CAAA,EAAA,EAAA,GAASI,IAAK,OAAA,OAAA,OAAA,gBAAA,kDAEvDH,EAAK,CAAA,CAAA,aAJV"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -15,10 +15,10 @@
     appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
   }
-  let { appearance = 'standard', label }: Props = $props();
+  let { appearance = 'standard', label, ...attrs }: Props = $props();
 </script>
-<div class={['mc-flag', `mc-flag--${appearance}`]}>
+<div class={['mc-flag', `mc-flag--${appearance}`]} {...attrs}>
   <span class="mc-flag__label">
     {label}
   </span>

package/dist/components/iconbutton/IconButton.js CHANGED Viewed

@@ -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 f,p as h,a as m,b as r,f as k,r as p,d as w,h as y,i as x,j as e,e as _}from"../../custom-element.js";import{s as z}from"../../slot.js";import{a as j}from"../../attributes.js";var I=k("<button><!></button>");const B={hash:"svelte-3c0lhf",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-button.svelte-3c0lhf {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-3c0lhf:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-3c0lhf:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-3c0lhf:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-3c0lhf {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-3c0lhf {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-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 D(s,t){h(t,!0),m(s,B);let n=r(t,"appearance",7,"standard"),a=r(t,"size",7,"m"),l=r(t,"type",7,"button"),d=r(t,"ghost",7),b=r(t,"outlined",7),u=r(t,"disabled",7),i=p(t,["$$slots","$$events","$$legacy","$$host","appearance","size","type","ghost","outlined","disabled"]);var v={get appearance(){return n()},set appearance(o="standard"){n(o),e()},get size(){return a()},set size(o="m"){a(o),e()},get type(){return l()},set type(o="button"){l(o),e()},get ghost(){return d()},set ghost(o){d(o),e()},get outlined(){return b()},set outlined(o){b(o),e()},get disabled(){return u()},set disabled(o){u(o),e()}},c=I();j(c,()=>({class:["mc-button","mc-button--icon-button",`mc-button--${a()}`,`mc-button--${n()}`,d()&&"mc-button--ghost",b()&&"mc-button--outlined"],disabled:u(),type:l(),...i}),void 0,void 0,void 0,"svelte-3c0lhf");var g=w(c);return z(g,t,"icon",{}),_(c),y(s,c),x(v)}customElements.define("m-icon-button",f(D,{appearance:{},size:{},type:{},ghost:{},outlined:{},disabled:{}},["icon"],[],!0));export{D as I};
 //# sourceMappingURL=IconButton.js.map

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

	@@ -1 +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"}
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 /\n Defines the visual style of the icon button.\n /\n appearance?: 'standard' \| 'accent' \| 'danger' \| 'inverse';\n /\n Determines the size of the icon button.\n /\n size?: 's' \| 'm' \| 'l';\n /\n If `true`, disables the icon button, making it non-interactive.\n /\n disabled?: boolean;\n /\n If `true`, applies a \"ghost\" style to the icon button.\n /\n ghost?: boolean;\n /\n If `true`, the icon button gets an outlined style.\n /\n outlined?: boolean;\n /\n Specifies the button's HTML `type` attribute.\n */\n type?: 'button' \| 'reset' \| 'submit';\n }\n\n let {\n appearance = 'standard',\n size = 'm',\n type = 'button',\n ghost,\n outlined,\n disabled,\n ...attrs\n }: Props = $props();\n</script>\n\n<button\n class={[\n 'mc-button',\n 'mc-button--icon-button',\n `mc-button--${size}`,\n `mc-button--${appearance}`,\n ghost && 'mc-button--ghost',\n outlined && 'mc-button--outlined',\n ]}\n {disabled}\n {type}\n {...attrs}\n>\n <slot name=\"icon\" />\n</button>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["appearance","size","type","ghost","$.prop","$$props","outlined","disabled","attrs","$.rest_props"],"mappings":";;qoWAAA,gBAoCI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,eAAO,QAAQ,EACfC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACLG,EAAAC,EAAAJ,EAAA,0JANU,WAAU,6CAChB,IAAG,6CACH,SAAQ,4LAUf,YACA,uCACcJ,EAAI,CAAA,iBACJD,EAAU,CAAA,GACxBG,EAAK,GAAI,mBACTG,KAAY,gDAIVE,6FAbN"}

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

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

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

	@@ -1 +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"}
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,qEAAqE,CAAC;AAC7E,OAAO,qEAAqE,CAAC;AAC7E,OAAO,qEAAqE,CAAC;AAC7E,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAiCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC"}

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

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

package/dist/components/iconbutton/IconButton.svelte CHANGED Viewed

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

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

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

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

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

package/dist/components/kpiitem/KpiItem.js CHANGED Viewed

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