@mozaic-ds/web-components 1.1.0 → 1.2.0

package/dist/components/drawer/Drawer.js

@@ -1,14 +1,14 @@
-import{c as M,p as S,b as a,A as Z,t as T,i as j,j as q,k as n,e as F,g as G,v as $,a as oo,f as C,d as c,s as h,r as l,h as D}from"../../custom-element.js";import{i as H}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(f,t){S(t,!1);let r=a(t,"id",12,void 0),i=a(t,"style",12,void 0),u=a(t,"className",12,void 0),v=a(t,"fill",12,void 0),g=a(t,"size",12,"1.5rem");var m={get id(){return r()},set id(d){r(d),n()},get style(){return i()},set style(d){i(d),n()},get className(){return u()},set className(d){u(d),n()},get fill(){return v()},set fill(d){v(d),n()},get size(){return g()},set size(d){g(d),n()}},s=no();return T(()=>{w(s,"id",r()),to(s,i()),F(s,0,G(u())),w(s,"fill",v())}),j(f,s),q(m)}customElements.define("arrow-back-24",M(I,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var co=(f,t)=>f.key==="Escape"&&t(),lo=C('<button class="mc-drawer__back mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Back"><!></button>'),so=C('<h2 class="mc-drawer__content__title svelte-1d2fooj"> </h2>'),bo=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 io={hash:"svelte-1d2fooj",code:`/**
+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:`/**
  * 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;}
 }.mc-drawer--left.svelte-1d2fooj {justify-content:flex-start;}.mc-drawer--left.svelte-1d2fooj .mc-drawer__dialog:where(.svelte-1d2fooj) {transform:translate3d(-100%, 0, 0);}
 @media (width >= 680px) {.mc-drawer--extend.svelte-1d2fooj .mc-drawer__dialog:where(.svelte-1d2fooj) {max-width:39rem;}
-}.mc-drawer__dialog.svelte-1d2fooj {background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%, 0, 0);transition:visibility 0s linear 0.4s, transform 0.4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 3);border-radius:var(--radius-l, 1rem);}
+}.mc-drawer__dialog.svelte-1d2fooj {background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%, 0, 0);transition:visibility 0s linear 0.4s, transform 0.4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 3);border-radius:var(--border-radius-l, 1rem);}
 @media (width >= 680px) {.mc-drawer__dialog.svelte-1d2fooj {max-width:25rem;}
 }.mc-drawer__header.svelte-1d2fooj {display:flex;align-items:center;justify-content:center;height:4rem;}.mc-drawer__icon.svelte-1d2fooj {height:1.5rem;margin-right:0.75rem;width:1.5rem;}.mc-drawer__title.svelte-1d2fooj {font-size:var(--font-body-s, 0.875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;}.mc-drawer__title.svelte-1d2fooj:first-child {padding-left:4rem;}.mc-drawer__back.svelte-1d2fooj, .mc-drawer__close.svelte-1d2fooj {margin:0.5rem;}.mc-drawer__body.svelte-1d2fooj {flex:1 1;overflow:hidden;}.mc-drawer__body.svelte-1d2fooj:last-child {margin-bottom:1.5rem;padding-bottom:1.5rem;}.mc-drawer__content.svelte-1d2fooj {max-height:100%;overflow:hidden auto;padding:0.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000);}
 @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-s, 1px) solid var(--divider-color-primary, #cccccc);}
+}.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-radius, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-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(--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 uo(f,t){S(t,!0),oo(f,io);let r=a(t,"open",7),i=a(t,"position",7),u=a(t,"extended",7),v=a(t,"back",7),g=a(t,"title",7),m=a(t,"contentTitle",7),s=a(t,"onUpdateOpen",7),d=a(t,"onBack",7),k;const E=()=>{var e;r(!1),(e=s())==null||e(r());const o=new CustomEvent("update:open",{detail:r(),bubbles:!0,composed:!0});k.dispatchEvent(o)},J=()=>{var e;(e=d())==null||e();const o=new CustomEvent("back",{bubbles:!0,composed:!0});k.dispatchEvent(o)};var K={get open(){return r()},set open(o){r(o),n()},get position(){return i()},set position(o){i(o),n()},get extended(){return u()},set extended(o){u(o),n()},get back(){return v()},set back(o){v(o),n()},get title(){return g()},set title(o){g(o),n()},get contentTitle(){return m()},set contentTitle(o){m(o),n()},get onUpdateOpen(){return s()},set onUpdateOpen(o){s(o),n()},get onBack(){return d()},set onBack(o){d(o),n()}},b=bo();b.__keydown=[co,E];var _=c(b),p=c(_),O=c(p);{var P=o=>{var e=lo();e.__click=J;var B=c(e);I(B,{"aria-hidden":"true"}),l(e),j(o,e)};H(O,o=>{v()&&o(P)})}var x=h(O,2),Q=c(x,!0);l(x);var y=h(x,2);y.__click=E;var R=c(y);ro(R,{"aria-hidden":"true"}),l(y),l(p);var z=h(p,2),N=c(z),U=c(N);{var V=o=>{var e=so(),B=c(e,!0);l(e),T(()=>D(B,m())),j(o,e)};H(U,o=>{m()&&o(V)})}var W=h(U,2);L(W,t,"default",{}),l(N),l(z);var A=h(z,2),X=c(A);L(X,t,"footer",{}),l(A),l(_);var Y=h(_,2);return ao(Y,{get isvisible(){return r()},dialoglabel:"drawerTitle"}),l(b),eo(b,o=>k=o,()=>k),T(()=>{F(b,1,G(["mc-drawer",`mc-drawer--${i()}`,r()&&"is-open",u()&&"mc-drawer--extend"]),"svelte-1d2fooj"),w(b,"aria-modal",r()?"true":"false"),w(b,"aria-hidden",!r()),D(Q,g())}),j(f,b),q(K)}$(["keydown","click"]);customElements.define("m-drawer",M(uo,{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 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));
 //# sourceMappingURL=Drawer.js.map

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

@@ -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","on_keydown","e","onClose","open","$.prop","$$props","position","extended","back","title","contentTitle","onUpdateOpen","onBack","element","_a","event","onClickBack","$$render","consequent","consequent_1","$.bind_this","div","$$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,oGCkFc,IAAAE,GAAA,CAAAC,MAAMA,EAAE,MAAQ,UAAYC,EAAO;;;;;;;;;;;;86WAzFjD,sBAiDQC,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,MAAAX,EAAO,IAAS,OACpBC,EAAO,EAAK,GAEZW,EAAAH,EAAY,IAAZ,MAAAG,EAAeX,KAET,MAAAY,EAAK,IAAO,YAAY,eAC5B,OAAQZ,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBU,EAAQ,cAAcE,CAAK,CAC7B,EAEMC,EAAW,IAAS,QACxBF,EAAAF,MAAA,MAAAE,UAEMC,EAAK,IAAO,YAAY,OAAM,CAClC,QAAS,GACT,SAAU,GAAI,EAEhBF,EAAQ,cAAcE,CAAK,CAC7B,2fAwBiBC,8DAJRR,EAAI,GAAAS,EAAAC,CAAA,uDAaEhB,8HASgCQ,EAAY,CAAA,CAAA,kBADhDA,EAAY,GAAAO,EAAAE,CAAA,iJAWFhB,EAAI,oCApCdiB,GAAAC,EAAAC,GAAAT,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]}
+{"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]}

package/dist/components/drawer/Drawer.svelte

@@ -168,7 +168,7 @@
   visibility: hidden;
   width: 100%;
   z-index: var(--drawer-z-index, 3);
-  border-radius: var(--radius-l, 1rem);
+  border-radius: var(--border-radius-l, 1rem);
 }
 @media (width >= 680px) {
   .mc-drawer__dialog {
@@ -229,7 +229,7 @@
   flex-direction: column;
   gap: 1rem;
   padding: 1rem 1.5rem;
-  border-top: var(--border-s, 1px) solid var(--divider-color-primary, #cccccc);
+  border-top: var(--border-width-s, 0.0625rem) solid var(--divider-color-primary, #cccccc);
 }
 @media (width >= 680px) {
   .mc-drawer__footer {
@@ -278,7 +278,7 @@
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: var(--button-radius, 0.25rem);
+  border-radius: var(--button-border-radius-s, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -442,7 +442,7 @@
   cursor: not-allowed;
 }
 .mc-button--icon-button {
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   padding: 0;
 }
 .mc-button--loading .mc-button__loader {

package/dist/components/flag/Flag.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Flag.js","sources":["../../../src/components/flag/Flag.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-flag' }} />\n\n<script lang=\"ts\">\n  /**\n   * A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content. It is typically placed at the top of an element to ensure immediate visibility.\n   */\n  interface Props {\n    /**\n     * Label of the Flag.\n     */\n    label: string;\n    /**\n     * Allows to define the Flag appearance.\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n  }\n\n  let { appearance = 'standard', label }: Props = $props();\n</script>\n\n<div class={['mc-flag', `mc-flag--${appearance}`]}>\n  <span class=\"mc-flag__label\">\n    {label}\n  </span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/flag';\n</style>\n"],"names":["appearance","label","$.prop","$$props","$.set_class","div","$.clsx"],"mappings":";;q0BAAA,gBAiBQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,uDAAjB,WAAU,0GAGlBC,EAAAC,EAAA,EAAAC,EAAA,CAAA,sBAAuBN,EAAU,CAAA,EAAA,CAAA,EAAA,gBAAA,MAEzCC,GAAK,eAJV"}
+{"version":3,"file":"Flag.js","sources":["../../../src/components/flag/Flag.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-flag' }} />\n\n<script lang=\"ts\">\n  /**\n   * A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content. It is typically placed at the top of an element to ensure immediate visibility.\n   */\n  interface Props {\n    /**\n     * Label of the Flag.\n     */\n    label: string;\n    /**\n     * Allows to define the Flag appearance.\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n  }\n\n  let { appearance = 'standard', label }: Props = $props();\n</script>\n\n<div class={['mc-flag', `mc-flag--${appearance}`]}>\n  <span class=\"mc-flag__label\">\n    {label}\n  </span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/flag';\n</style>\n"],"names":["appearance","label","$.prop","$$props","$.set_class","div","$.clsx"],"mappings":";;40BAAA,gBAiBQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,uDAAjB,WAAU,0GAGlBC,EAAAC,EAAA,EAAAC,EAAA,CAAA,sBAAuBN,EAAU,CAAA,EAAA,CAAA,EAAA,gBAAA,MAEzCC,GAAK,eAJV"}

package/dist/components/flag/Flag.svelte

@@ -29,7 +29,7 @@
  */
 .mc-flag {
   padding: 0 0.5rem;
-  border-radius: var(--radius-xs, 0.125rem);
+  border-radius: var(--border-radius-xs, 0.125rem);
   white-space: nowrap;
   font-size: var(--font-size-100, 0.875rem);
   font-weight: var(--font-weight-regular, 400);

package/dist/components/iconbutton/IconButton.js

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

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

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

package/dist/components/iconbutton/IconButton.svelte

@@ -95,7 +95,7 @@
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: var(--button-radius, 0.25rem);
+  border-radius: var(--button-border-radius-s, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -259,7 +259,7 @@
   cursor: not-allowed;
 }
 .mc-button--icon-button {
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   padding: 0;
 }
 .mc-button--loading .mc-button__loader {

package/dist/components/kpiitem/KpiItem.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"KpiItem.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ArrowBottomRight24/ArrowBottomRight24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ArrowTopRight24/ArrowTopRight24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/Less24/Less24.svelte","../../../src/components/kpiitem/KpiItem.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'arrow-bottom-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 0 1 1.414 0L18 16.586V9a1 1 0 1 1 2 0v10a1 1 0 0 1-1 1H9a1 1 0 1 1 0-2h7.586L4.293 5.707a1 1 0 0 1 0-1.414\"/></svg>","<svelte:options customElement={{ tag: 'arrow-top-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M8 5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v10a1 1 0 1 1-2 0V7.414L5.707 19.707a1 1 0 0 1-1.414-1.414L16.586 6H9a1 1 0 0 1-1-1\"/></svg>","<svelte:options customElement={{ tag: 'less-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1\"/></svg>","<svelte:options customElement={{ tag: 'm-kpi-item' }} />\n\n<script lang=\"ts\">\n  import type { Component } from 'svelte';\n  import ArrowBottomRight24 from '@mozaic-ds/icons-svelte/svelte/ArrowBottomRight24/ArrowBottomRight24.svelte';\n  import ArrowTopRight24 from '@mozaic-ds/icons-svelte/svelte/ArrowTopRight24/ArrowTopRight24.svelte';\n  import Less24 from '@mozaic-ds/icons-svelte/svelte/Less24/Less24.svelte';\n  /**\n   * A KPI Item is used to display Key Performance Indicators (KPIs) within an interface, providing a quick and clear visualization of essential data. It often includes contextual elements such as labels, trends, or status indicators to help users interpret the information at a glance. KPI Items are commonly used in dashboards, reports, and analytics tools to highlight critical metrics and facilitate data-driven decision-making.\n   */\n  interface Props {\n    /**\n     * The current value of the kpi item.\n     */\n    value: string;\n    /**\n     * Defines the evolution of the kpi.\n     */\n    trend?: 'increasing' | 'decreasing' | 'stable';\n    /**\n     * Label of the kpi item.\n     */\n    label?: string;\n    /**\n     * Allows to define the kpi item status.\n     */\n    status?: 'info' | 'warning' | 'error' | 'success' | 'neutral';\n    /**\n     * The evolution information defining the kpi.\n     */\n    information?: string;\n    /**\n     * Allows to define the kpi item size.\n     */\n    size?: 's' | 'm' | 'l';\n  }\n\n  let { value, trend, label, status = 'info', information, size = 's' }: Props = $props();\n\n  const isMedium = $derived(size === 'm');\n  const isLarge = $derived(size === 'l');\n\n  const iconMap: Record<NonNullable<Props['trend']>, Component> = {\n    increasing: ArrowTopRight24,\n    decreasing: ArrowBottomRight24,\n    stable: Less24,\n  };\n\n  const IconComponent = $derived(trend ? iconMap[trend] : undefined);\n\n  const rootClasses = $derived(`mc-kpi mc-kpi--${size} mc-kpi--${status}`);\n</script>\n\n<div class={rootClasses}>\n  {#if isMedium && label}\n    <span class=\"mc-kpi__label\">\n      {label}\n    </span>\n  {/if}\n  <div class=\"mc-kpi__content\">\n    <div class=\"mc-kpi__main\">\n      {#if isLarge && label}\n        <span class=\"mc-kpi__label\">\n          {label}\n        </span>\n      {/if}\n      <span class=\"mc-kpi__value\">{value}</span>\n    </div>\n    {#if trend || information}\n      <div class=\"mc-kpi__aside\">\n        {#if isLarge && information}\n          <span class=\"mc-kpi__detail\">\n            {information}\n          </span>\n        {/if}\n\n        {#if trend}\n          <IconComponent className=\"mc-kpi__icon\" color=\"black\" />\n        {/if}\n      </div>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/kpi-item';\n</style>\n"],"names":["id","style","className","fill","size","value","$.prop","$$props","trend","label","status","information","isMedium","$.derived","isLarge","iconMap","ArrowTopRight24","ArrowBottomRight24","Less24","IconComponent","rootClasses","$.get","$$render","consequent","consequent_1","consequent_2","consequent_3","consequent_4"],"mappings":"ynBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,oZCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,+UCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E;;;gyJCPA,sBAqCQE,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EAAEG,iBAAS,MAAM,EAAEC,EAAWL,EAAAC,EAAA,cAAA,CAAA,EAAEH,eAAO,GAAG,QAE7DQ,EAAQC,EAAA,IAAYT,EAAI,IAAK,GAAG,EAChCU,EAAOD,EAAA,IAAYT,EAAI,IAAK,GAAG,EAE/BW,EAAuD,CAC3D,WAAYC,EACZ,WAAYC,EACZ,OAAQC,GAGJC,QAAyBX,EAAK,EAAGO,EAAQP,EAAK,GAAI,MAAS,EAE3DY,EAAWP,EAAA,IAAA,kBAA8BT,EAAI,CAAA,YAAYM,EAAM,CAAA,EAAA,4LAbjC,OAAM,wGAAsB,IAAG,yEAmB9DD,EAAK,CAAA,CAAA,kBAFLY,EAAAT,CAAQ,GAAIH,EAAK,GAAAa,EAAAC,CAAA,8EASbd,EAAK,CAAA,CAAA,kBAFLY,EAAAP,CAAO,GAAIL,EAAK,GAAAa,EAAAE,CAAA,+HAWdb,EAAW,CAAA,CAAA,kBAFXU,EAAAP,CAAO,GAAIH,EAAW,GAAAW,EAAAG,EAAA,4IAMtBjB,EAAK,GAAAc,EAAAI,EAAA,0BARTlB,EAAK,GAAIG,MAAWW,EAAAK,CAAA,sCAfjBP,CAAW,CAAA,EAAA,gBAAA,MAaYf,GAAK,eAfxC","x_google_ignoreList":[0,1,2]}

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

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

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

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

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

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

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

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