@mozaic-ds/web-components 1.0.0-beta.7 → 1.1.0

package/dist/components/datepicker/README.md

@@ -0,0 +1,18 @@
+# `m-datepicker`
+
+A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the datepicker element, used to associate the label with the form element. | `string` |   |
+| `name` | The name attribute for the datepicker element, typically used for form submission. | `string` |   |
+| `value` | The current value of the datepicker field. | `string` `number` | `$bindable()` |
+| `isinvalid` | If `true`, applies an invalid state to the datepicker. | `boolean` |   |
+| `disabled` | If `true`, disables the datepicker, making it non-interactive. | `boolean` |   |
+| `size` | Determines the size of the datepicker. | `'s'` `'m'` | `m` |
+| `readonly` | If `true`, the datepicker is read-only (cannot be edited). | `boolean` |   |
+| `isclearable` | If `true`, a clear button will appear when the datepicker has a value. | `boolean` |   |
+| `clearlabel` | The label text for the clear button. | `string` | `clear content` |
+

package/dist/components/drawer/Drawer.js

@@ -1,4 +1,4 @@
-import{c as S,p as F,b as r,q as $,t as E,h as k,i as G,j as a,e as I,u as oo,a as to,f as _,s as f,d as l,g as L,o as B,r as s}from"../../custom-element.js";import{i as C}from"../../if.js";import{a as eo,s as M}from"../../slot.js";import{s as w,a as ro}from"../../attributes.js";import"../../legacy.js";import{C as ao}from"../../Cross24.js";import{O as no}from"../overlay/Overlay.js";var co=$('<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 J(j,t){F(t,!1);let g=r(t,"id",12,void 0),n=r(t,"style",12,void 0),i=r(t,"className",12,void 0),b=r(t,"fill",12,void 0),v=r(t,"size",12,"1.5rem");var m={get id(){return g()},set id(e){g(e),a()},get style(){return n()},set style(e){n(e),a()},get className(){return i()},set className(e){i(e),a()},get fill(){return b()},set fill(e){b(e),a()},get size(){return v()},set size(e){v(e),a()}},c=co();return E(()=>{w(c,"id",g()),ro(c,n()),I(c,0,oo(i())),w(c,"fill",b())}),k(j,c),G(m)}customElements.define("arrow-back-24",S(J,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var lo=_('<button class="mc-drawer__back mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Back"><!></button>'),so=_('<h2 class="mc-drawer__content__title svelte-1d2fooj"> </h2>'),io=_('<div class="mc-drawer__footer svelte-1d2fooj"><!></div>'),bo=_('<section 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" tabindex="0"><!> <!></div></div> <!></div> <!></section>');const uo={hash:"svelte-1d2fooj",code:`/**
+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:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-drawer.svelte-1d2fooj {box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:0.5rem;justify-content:flex-end;}
 @media (width >= 680px) {.mc-drawer.svelte-1d2fooj {padding:1rem;}
@@ -10,5 +10,5 @@ import{c as S,p as F,b as r,q as $,t as E,h as k,i as G,j as a,e as I,u as oo,a
 @media (width >= 680px) {.mc-drawer__content.svelte-1d2fooj {padding:1.5rem;}
 }.mc-drawer__content__title.svelte-1d2fooj {font-size:var(--font-title-m, 1.5rem);margin:0 0 0.5rem;}.mc-drawer__footer.svelte-1d2fooj {display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-s, 1px) 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;}.mc-overlay.svelte-1d2fooj {filter:none;}`};function vo(j,t){const g=eo(t);F(t,!0),to(j,uo);let n=r(t,"open",7,!1),i=r(t,"position",7,"right"),b=r(t,"extended",7,!1),v=r(t,"back",7,!1),m=r(t,"title",7,""),c=r(t,"contentTitle",7,""),e=r(t,"updateopen",7,()=>{}),p=r(t,"backfn",7,()=>{});function D(){n(!1),e()(!1)}function K(){p()()}var P={get open(){return n()},set open(o=!1){n(o),a()},get position(){return i()},set position(o="right"){i(o),a()},get extended(){return b()},set extended(o=!1){b(o),a()},get back(){return v()},set back(o=!1){v(o),a()},get title(){return m()},set title(o=""){m(o),a()},get contentTitle(){return c()},set contentTitle(o=""){c(o),a()},get updateopen(){return e()},set updateopen(o=()=>{}){e(o),a()},get backfn(){return p()},set backfn(o=()=>{}){p(o),a()}},u=bo();let H;var x=l(u),y=l(x),O=l(y);{var Q=o=>{var d=lo(),h=l(d);J(h,{"aria-hidden":"true"}),s(d),B("click",d,K),k(o,d)};C(O,o=>{v()&&o(Q)})}var z=f(O,2),R=l(z,!0);s(z);var T=f(z,2),U=l(T);ao(U,{"aria-hidden":"true"}),s(T),s(y);var N=f(y,2),q=l(N),A=l(q);{var V=o=>{var d=so(),h=l(d,!0);s(d),E(()=>L(h,c())),k(o,d)};C(A,o=>{c()&&o(V)})}var W=f(A,2);M(W,t,"default",{}),s(q),s(N);var X=f(N,2);{var Y=o=>{var d=io(),h=l(d);M(h,t,"footer",{}),s(d),k(o,d)};C(X,o=>{g.footer&&o(Y)})}s(x);var Z=f(x,2);return no(Z,{get isvisible(){return n()},dialoglabel:"drawerTitle"}),s(u),E(o=>{H=I(u,1,`mc-drawer mc-drawer--${i()}`,"svelte-1d2fooj",H,o),w(u,"aria-modal",n()?"true":"false"),w(u,"aria-hidden",!n()),L(R,m())},[()=>({"is-open":n(),"mc-drawer--extend":b()})]),B("click",T,D),B("keydown",u,o=>o.key==="Escape"&&D()),k(j,u),G(P)}customElements.define("m-drawer",S(vo,{open:{},position:{},extended:{},back:{},title:{},contentTitle:{},updateopen:{},backfn:{}},["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-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));
 //# 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  interface Props {\n    open?: boolean;\n    position?: 'left' | 'right';\n    extended?: boolean;\n    back?: boolean;\n    title: string;\n    contentTitle?: string;\n    updateopen?: (value: boolean) => void;\n    backfn?: () => void;\n    [key: string]: any;\n  }\n\n  let {\n    open = false,\n    position = 'right',\n    extended = false,\n    back = false,\n    title = '',\n    contentTitle = '',\n    updateopen = () => {},\n    backfn = () => {},\n  }: Props = $props();\n\n  function onClose() {\n    open = false;\n    updateopen(false);\n  }\n\n  function onBack() {\n    backfn();\n  }\n</script>\n\n<section\n  class={`mc-drawer mc-drawer--${position}`}\n  class:is-open={open}\n  class:mc-drawer--extend={extended}\n  aria-labelledby=\"drawerTitle\"\n  aria-modal={open ? 'true' : 'false'}\n  tabindex=\"-1\"\n  aria-hidden={!open}\n  on:keydown={(e) => e.key === 'Escape' && onClose()}\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          on:click={onBack}\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        on:click={onClose}\n      >\n        <Cross24 aria-hidden=\"true\" />\n      </button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\" tabindex=\"0\">\n        {#if contentTitle}\n          <h2 class=\"mc-drawer__content__title\">{contentTitle}</h2>\n        {/if}\n        <slot />\n      </div>\n    </div>\n\n    {#if $$slots.footer}\n      <div class=\"mc-drawer__footer\">\n        <slot name=\"footer\" />\n      </div>\n    {/if}\n  </div>\n  <MOverlay isvisible={open} dialoglabel=\"drawerTitle\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/drawer';\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-overlay {\n    filter: none;\n  }\n</style>\n"],"names":["id","style","className","fill","size","open","position","extended","back","title","contentTitle","updateopen","$.prop","$$props","backfn","onClose","onBack","$$value","$$render","consequent","consequent_1","$$slots","consequent_2","classes","$0","$.event","section","e"],"mappings":"gsBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,OAAUC,GAAK,WAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E;;;;;;;;;;;;u9WCPA,gCAoBI,IAAAE,eAAO,EAAK,EACZC,mBAAW,OAAO,EAClBC,mBAAW,EAAK,EAChBC,eAAO,EAAK,EACZC,gBAAQ,EAAE,EACVC,uBAAe,EAAE,EACjBC,EAAUC,EAAAC,EAAA,aAAA,EAAA,IAAS,CAAC,CAAC,EACrBC,EAAMF,EAAAC,EAAA,SAAA,EAAA,IAAS,CAAC,CAAC,EAGV,SAAAE,GAAU,CACjBV,EAAO,EAAK,EACZM,EAAU,EAAC,EAAK,CAClB,CAES,SAAAK,GAAS,CAChBF,IAAM,CACR,0CAjBS,GAAK,qDACD,QAAO,qDACP,GAAK,6CACT,GAAK,+CACJ,GAAE,6DACK,GAAE,wCACE,IAAA,WAAAG,EAAA,IAAA,CAAC,EAAC,oCACN,IAAA,OAAAA,EAAA,IAAA,CAAC,EAAC,4HA6BDD,CAAM,kBAJfR,EAAI,GAAAU,EAAAC,CAAA,qKAsBkCT,EAAY,CAAA,CAAA,kBADhDA,EAAY,GAAAQ,EAAAE,CAAA,iIAOhBC,EAAQ,QAAMH,EAAAI,CAAA,0DAMAjB,EAAI,0EA7CMC,EAAQ,CAAA,GAAA,iBAAAiB,EAAAC,CAAA,mBAI3BnB,EAAI,EAAG,OAAS,OAAO,qBAErBA,EAAI,CAAA,MAciCI,GAAK,IAnBzC,KAAA,CAAA,UAAAJ,EAAI,sBACME,EAAQ,CAAA,iBAsBjBQ,CAAO,EAjBVU,EAAA,UAAAC,EAAAC,GAAMA,EAAE,MAAQ,UAAYZ,GAAO,aAVlD","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","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]}

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

@@ -0,0 +1,101 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Drawer from './Drawer.svelte';
+describe('m-drawer component', () => {
+    const title = 'My Drawer';
+    const contentTitle = 'Drawer Content Title';
+    it('renders with title and contentTitle', () => {
+        const { getByText } = render(Drawer, {
+            props: {
+                open: true,
+                title,
+                contentTitle,
+                position: 'right',
+            },
+        });
+        expect(getByText(title)).toBeInTheDocument();
+        expect(getByText(contentTitle)).toBeInTheDocument();
+    });
+    it('applies correct classes when open, extended, and position is set', () => {
+        const { container } = render(Drawer, {
+            props: {
+                open: true,
+                position: 'left',
+                extended: true,
+                title,
+            },
+        });
+        const drawer = container.querySelector('.mc-drawer');
+        expect(drawer.classList.contains('is-open')).toBe(true);
+        expect(drawer.classList.contains('mc-drawer--left')).toBe(true);
+        expect(drawer.classList.contains('mc-drawer--extend')).toBe(true);
+    });
+    it('sets proper accessibility attributes when open', () => {
+        const { container } = render(Drawer, {
+            props: {
+                open: true,
+                title,
+            },
+        });
+        const drawer = container.querySelector('.mc-drawer');
+        expect(drawer.getAttribute('role')).toBe('dialog');
+        expect(drawer.getAttribute('aria-modal')).toBe('true');
+        expect(drawer.getAttribute('aria-hidden')).toBe('false');
+        expect(drawer.getAttribute('aria-labelledby')).toBe('drawerTitle');
+    });
+    it('sets aria-hidden when not open', () => {
+        const { container } = render(Drawer, {
+            props: {
+                open: false,
+                title,
+            },
+        });
+        const drawer = container.querySelector('.mc-drawer');
+        expect(drawer.getAttribute('aria-hidden')).toBe('true');
+        expect(drawer.getAttribute('aria-modal')).toBe('false');
+    });
+    it('emits update:open event with false when close button clicked', async () => {
+        const { container } = render(Drawer, {
+            props: {
+                open: true,
+                title,
+            },
+        });
+        const drawer = container.querySelector('.mc-drawer');
+        const closeButton = container.querySelector('.mc-drawer__close');
+        const updateOpenHandler = vi.fn();
+        drawer.addEventListener('update:open', updateOpenHandler);
+        await fireEvent.click(closeButton);
+        expect(updateOpenHandler).toHaveBeenCalledOnce();
+        expect(updateOpenHandler.mock.calls[0][0].detail).toBe(false);
+    });
+    it('emits back event when back button clicked', async () => {
+        const { container } = render(Drawer, {
+            props: {
+                open: true,
+                title,
+                back: true,
+            },
+        });
+        const drawer = container.querySelector('.mc-drawer');
+        const backButton = container.querySelector('.mc-drawer__back');
+        const backHandler = vi.fn();
+        drawer.addEventListener('back', backHandler);
+        await fireEvent.click(backButton);
+        expect(backHandler).toHaveBeenCalledOnce();
+    });
+    it('closes drawer on Escape key press', async () => {
+        const { container } = render(Drawer, {
+            props: {
+                open: true,
+                title,
+            },
+        });
+        const drawer = container.querySelector('.mc-drawer');
+        const updateOpenHandler = vi.fn();
+        drawer.addEventListener('update:open', updateOpenHandler);
+        await fireEvent.keyDown(drawer, { key: 'Escape' });
+        expect(updateOpenHandler).toHaveBeenCalledOnce();
+        expect(updateOpenHandler.mock.calls[0][0].detail).toBe(false);
+    });
+});

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

@@ -1,11 +1,32 @@
-import type { Meta, StoryObj } from '@storybook/html-vite';
-declare const _default: Meta;
-export default _default;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
-export declare const Back: Story;
-export declare const Left: Story;
-export declare const Cancel: Story;
-export declare const ValidationOnly: Story;
-export declare const TwoOptions: Story;
+export declare const Left: {
+    args: {
+        position: string;
+    };
+};
+export declare const Back: {
+    args: {
+        back: boolean;
+    };
+};
+export declare const ValidationOnly: {
+    args: {
+        footer: string;
+    };
+};
+export declare const TwoOptions: {
+    args: {
+        footer: string;
+    };
+};
+export declare const Cancel: {
+    args: {
+        extended: boolean;
+        footer: string;
+    };
+};
 //# sourceMappingURL=Drawer.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;wBA6BtD,IAAI;AAzBT,wBAyBU;AAEV,KAAK,KAAK,GAAG,QAAQ,CAAC;AAsDtB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAWF,eAAO,MAAM,IAAI,EAAE,KASlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC"}
+{"version":3,"file":"Drawer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAMrE,QAAA,MAAM,IAAI,EAAE,IA0EX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;CASlB,CAAC"}

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

@@ -1,126 +1,124 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { action } from 'storybook/actions';
-import { within, userEvent, waitFor, expect } from 'storybook/test';
-export default {
+const meta = {
     title: 'Overlay/Drawer',
-    tags: ['autodocs', 'beta'],
+    component: 'm-drawer',
+    tags: ['v2'],
     parameters: {
         layout: 'fullscreen',
         docs: {
             story: { height: '600px' },
-            description: {
-                component: '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 enhances usability by keeping interfaces clean while offering expandable functionality.',
-            },
         },
     },
     args: {
         open: true,
-        title: 'Drawer title',
+        title: 'Drawer title (optionnal)',
         contentTitle: 'Content title',
+        default: `
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
+        odit, eligendi non, minus soluta dicta, excepturi harum tempora
+        possimus dignissimos dolor rerum natus voluptatum quia. Architecto
+        temporibus repellendus sed.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
+        odit, eligendi non, minus soluta dicta, excepturi harum tempora
+        possimus dignissimos dolor rerum natus voluptatum quia. Architecto
+        temporibus repellendus sed.
+      </p>
+    `,
         footer: `
-      <m-button>Primary action</m-button>
-      <m-button ghost="true">Cancel</m-button>
+      <m-button slot="footer">Button label</m-button>
+      <m-button ghost="true" slot="footer">Button label</m-button>
     `,
     },
     argTypes: {
-        $slots: { table: { disable: true } },
+        position: {
+            control: 'radio',
+            options: ['left', 'right'],
+        },
+        'update:open': {
+            control: false,
+        },
+        back: {
+            control: false,
+        },
+        '--drawer-z-index': {
+            description: 'Customise the z-index of the drawer',
+            control: false,
+            table: {
+                category: 'Custom Properties',
+                type: { summary: 'number' },
+                defaultValue: { summary: '3' },
+            },
+        },
+    },
+    render: (args) => {
+        const handleUpdateOpen = action('update:open');
+        const onBack = action('back');
+        return html `
+      <m-drawer
+        open=${ifDefined(args.open)}
+        title=${ifDefined(args.title)}
+        contentTitle=${ifDefined(args.contentTitle)}
+        position=${ifDefined(args.position)}
+        back=${ifDefined(args.back)}
+        extended=${ifDefined(args.extended)}
+        closable=${ifDefined(args.closable)}
+        @update:open=${handleUpdateOpen}
+        @back=${onBack}
+      >
+        ${unsafeHTML(ifDefined(args.default))} ${unsafeHTML(ifDefined(args.footer))}
+      </m-drawer>
+    `;
     },
 };
-const createDrawerTemplate = (args) => {
-    const wrapper = document.createElement('div');
-    const button = document.createElement('m-button');
-    button.textContent = 'Open Drawer';
-    const drawer = document.createElement('m-drawer');
-    drawer.setAttribute('title', args.title);
-    drawer.setAttribute('contentTitle', args.contentTitle);
-    if (args.open)
-        drawer.setAttribute('open', 'true');
-    if (args.extended)
-        drawer.setAttribute('extended', 'true');
-    if (args.position)
-        drawer.setAttribute('position', args.position);
-    if (args.back)
-        drawer.setAttribute('back', 'true');
-    // Provide function callbacks via props
-    drawer.updateopen = (val) => {
-        if (!val) {
-            drawer.removeAttribute('open');
-            action('updateopen')(val);
-        }
-    };
-    drawer.backfn = () => {
-        action('backfn')();
-    };
-    // Default slot content
-    const contentSlot = document.createElement('div');
-    contentSlot.innerHTML =
-        args.default ??
-            `<p>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque odit, eligendi non, minus soluta dicta, excepturi harum tempora possimus.
-    </p>`;
-    drawer.appendChild(contentSlot);
-    // Footer slot
-    if (args.footer) {
-        drawer.setAttribute('footer', 'true');
-        const footerSlot = document.createElement('div');
-        footerSlot.setAttribute('slot', 'footer');
-        footerSlot.innerHTML = args.footer;
-        drawer.appendChild(footerSlot);
-    }
-    button.onclick = () => drawer.setAttribute('open', 'true');
-    wrapper.appendChild(button);
-    wrapper.appendChild(drawer);
-    return wrapper;
-};
+export default meta;
 export const Default = {
-    render: (args) => createDrawerTemplate(args),
-};
-Default.play = async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const drawer = canvasElement.querySelector('m-drawer');
-    expect(drawer).toHaveAttribute('open');
-    await waitFor(() => {
-        expect(drawer?.hasAttribute('open')).toBe(true);
-    });
-};
-export const Back = {
     args: {
-        back: true,
-    },
-    render: (args) => createDrawerTemplate(args),
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        action('backfn')('called from play test');
+        default: `
+      <!-- All the code below must be replaced by a form element. -->
+      <div class="content-slot content-slot-full">
+        Insert a form element here to replace this slot.
+      </div>
+    `,
     },
 };
 export const Left = {
     args: {
         position: 'left',
     },
-    render: (args) => createDrawerTemplate(args),
 };
-export const Cancel = {
+export const Back = {
     args: {
-        extended: true,
-        footer: `
-      <m-button ghost="true">Cancel</m-button>
-      <m-button outlined="true">Secondary</m-button>
-      <m-button>Primary</m-button>
-    `,
+        back: true,
     },
-    render: (args) => createDrawerTemplate(args),
 };
 export const ValidationOnly = {
     args: {
-        footer: `<m-button>Primary action</m-button>`,
+        footer: `
+      <m-button slot="footer">Button label</m-button>
+    `,
     },
-    render: (args) => createDrawerTemplate(args),
 };
 export const TwoOptions = {
     args: {
         footer: `
-      <m-button outlined="true">Secondary</m-button>
-      <m-button>Primary</m-button>
+      <m-button outlined="true" slot="footer">Button label</m-button>
+      <m-button slot="footer">Button label</m-button>
+    `,
+    },
+};
+export const Cancel = {
+    args: {
+        extended: true,
+        footer: `
+      <m-button ghost="true" slot="footer">Button label</m-button>
+      <m-button outlined="true" slot="footer">Button label</m-button>
+      <m-button slot="footer">Button label</m-button>
     `,
     },
-    render: (args) => createDrawerTemplate(args),
 };