@mozaic-ds/web-components 1.2.0 → 1.3.0

package/dist/components/tag/Tag.js

@@ -1,4 +1,4 @@
-import{c as Z,p as $,b as r,z as ce,t as L,i as v,j as ee,k as l,e as P,g as F,v as me,a as fe,A as j,B as A,f as R,d,s as N,r as i,h as M,m as ge,C as ue}from"../../custom-element.js";import{i as B}from"../../if.js";import{s as Y}from"../../slot.js";import{s as D,a as be,r as he}from"../../attributes.js";import{a as pe}from"../../input.js";import{b as _e}from"../../this.js";import{C as we}from"../../CrossCircleFilled24.js";import"../../legacy.js";import{N as xe}from"../numberbadge/NumberBadge.js";var ke=ce('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06"></path></svg>');function te(S,t){$(t,!1);let a=r(t,"id",12,void 0),o=r(t,"style",12,void 0),g=r(t,"className",12,void 0),k=r(t,"fill",12,void 0),c=r(t,"size",12,"1.25rem");var E={get id(){return a()},set id(s){a(s),l()},get style(){return o()},set style(s){o(s),l()},get className(){return g()},set className(s){g(s),l()},get fill(){return k()},set fill(s){k(s),l()},get size(){return c()},set size(s){c(s),l()}},n=ke();return L(()=>{D(n,"id",a()),be(n,o()),P(n,0,F(g())),D(n,"fill",k())}),v(S,n),ee(E)}customElements.define("cross-circle-filled-20",Z(te,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Ce=R('<label><!> <input type="checkbox" class="mc-tag__input svelte-1f9dt2v"/> <span class="mc-tag__label svelte-1f9dt2v"> </span></label>'),Ee=R('<button type="button"><!> <span class="mc-tag__label svelte-1f9dt2v"> </span></button>'),ze=R('<button type="button"><!> <span class="mc-tag__label svelte-1f9dt2v"> </span></button>'),ye=R('<span><span class="mc-tag__label svelte-1f9dt2v"> </span> <button class="mc-tag-removable__remove svelte-1f9dt2v" type="button"><span class="mc-tag-removable__icon svelte-1f9dt2v"><!></span> <span class="mc-tag-removable__text svelte-1f9dt2v"> </span></button></span>'),Ne=R('<span><span class="mc-tag__label svelte-1f9dt2v"> </span></span>');const Me={hash:"svelte-1f9dt2v",code:`/**
+import{c as Z,p as $,b as r,A as fe,t as L,h as n,i as ee,j as l,l as te,m as ae,w as ge,a as be,B as D,C as F,f as H,r as ue,d,s as N,e as i,g as M,n as he,D as pe}from"../../custom-element.js";import{i as B}from"../../if.js";import{s as Y}from"../../slot.js";import{s as G,b as _e,a as q,r as we}from"../../attributes.js";import{a as xe}from"../../input.js";import{b as ke}from"../../this.js";import{C as Ce}from"../../CrossCircleFilled24.js";import"../../legacy.js";import{N as Ee}from"../numberbadge/NumberBadge.js";var ye=fe('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06"></path></svg>');function re(j,t){$(t,!1);let a=r(t,"id",12,void 0),o=r(t,"style",12,void 0),f=r(t,"className",12,void 0),w=r(t,"fill",12,void 0),c=r(t,"size",12,"1.25rem");var E={get id(){return a()},set id(s){a(s),l()},get style(){return o()},set style(s){o(s),l()},get className(){return f()},set className(s){f(s),l()},get fill(){return w()},set fill(s){w(s),l()},get size(){return c()},set size(s){c(s),l()}},v=ye();return L(()=>{G(v,"id",a()),_e(v,o()),te(v,0,ae(f())),G(v,"fill",w())}),n(j,v),ee(E)}customElements.define("cross-circle-filled-20",Z(re,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var ze=H('<label><!> <input type="checkbox" class="mc-tag__input svelte-1f9dt2v"/> <span class="mc-tag__label svelte-1f9dt2v"> </span></label>'),Ne=H('<button><!> <span class="mc-tag__label svelte-1f9dt2v"> </span></button>'),Me=H('<button><!> <span class="mc-tag__label svelte-1f9dt2v"> </span></button>'),Be=H('<span><span class="mc-tag__label svelte-1f9dt2v"> </span> <button class="mc-tag-removable__remove svelte-1f9dt2v" type="button"><span class="mc-tag-removable__icon svelte-1f9dt2v"><!></span> <span class="mc-tag-removable__text svelte-1f9dt2v"> </span></button></span>'),Le=H('<span><span class="mc-tag__label svelte-1f9dt2v"> </span></span>');const Pe={hash:"svelte-1f9dt2v",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-tag.svelte-1f9dt2v {font-size:var(--font-size-100, 0.875rem);border-radius:2rem;height:2rem;padding-inline:0.75rem;box-sizing:border-box;display:inline-flex;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-width-s, 0.0625rem) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-1f9dt2v {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-1f9dt2v {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-1f9dt2v, .mc-tag.svelte-1f9dt2v:disabled {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-interactive.svelte-1f9dt2v {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-1f9dt2v:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-1f9dt2v: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-tag-contextualised.svelte-1f9dt2v {gap:0.25rem;text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:0.5rem;}.mc-tag-contextualised.svelte-1f9dt2v:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-1f9dt2v: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-tag-contextualised.mc-tag--s.svelte-1f9dt2v {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-1f9dt2v {padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-removable__remove.svelte-1f9dt2v {width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 0.125rem;padding:0.25rem;display:block;cursor:pointer;border-radius:var(--border-radius-full, 100%);}.mc-tag-removable__remove.svelte-1f9dt2v:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-1f9dt2v: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-tag-removable__icon.svelte-1f9dt2v {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-1f9dt2v {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-removable.mc-tag--s.svelte-1f9dt2v {padding:0 0 0 0.5rem;}.mc-tag-removable.mc-tag--s.svelte-1f9dt2v .mc-tag-removable__remove:where(.svelte-1f9dt2v) {width:1.5rem;height:1.5rem;padding:0.125rem;}.mc-tag-removable.mc-tag--s.svelte-1f9dt2v .mc-tag-removable__icon:where(.svelte-1f9dt2v) {width:1.25rem;height:1.25rem;}.mc-tag-removable.mc-tag--l.svelte-1f9dt2v .mc-tag-removable__remove:where(.svelte-1f9dt2v) {width:2.5rem;height:2.5rem;}.mc-tag-removable.mc-tag--l.svelte-1f9dt2v .mc-tag-removable__icon:where(.svelte-1f9dt2v) {width:2rem;height:2rem;}.mc-tag-selectable.svelte-1f9dt2v {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-selectable.svelte-1f9dt2v:hover {box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-1f9dt2v:has(:where(.svelte-1f9dt2v):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-tag-selectable.svelte-1f9dt2v:has(:where(.svelte-1f9dt2v):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-1f9dt2v:has(:where(.svelte-1f9dt2v):checked)::before {display:inline-block;content:"";height:1.25rem;width:1.25rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--tag-color-text-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-tag-selectable.svelte-1f9dt2v:has(:where(.svelte-1f9dt2v):checked):not(:has(:disabled)):hover {background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none;}.mc-tag-selectable.svelte-1f9dt2v:has(:where(.svelte-1f9dt2v):disabled) {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-selectable.svelte-1f9dt2v:has(:where(.svelte-1f9dt2v):disabled)::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--color-text-disabled, %23737373)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-tag-selectable.svelte-1f9dt2v .mc-tag__input:where(.svelte-1f9dt2v) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-selectable.svelte-1f9dt2v .mc-tag__label:where(.svelte-1f9dt2v) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-1f9dt2v {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-1f9dt2v {padding-inline-start:0.75rem;}.mc-tag-interactive.svelte-1f9dt2v {gap:0.25rem;}`};function Be(S,t){$(t,!0),fe(S,Me);let a=r(t,"type",7,"informative"),o=r(t,"size",7,"m"),g=r(t,"id",7),k=r(t,"name",7),c=r(t,"label",7),E=r(t,"checked",15),n=r(t,"disabled",7),s=r(t,"contextualisednumber",7,99),I=r(t,"removablelabel",7),J;const ae=()=>{const e=new CustomEvent("remove-tag",{detail:g(),bubbles:!0,composed:!0});J.dispatchEvent(e)};var re={get type(){return a()},set type(e="informative"){a(e),l()},get size(){return o()},set size(e="m"){o(e),l()},get id(){return g()},set id(e){g(e),l()},get name(){return k()},set name(e){k(e),l()},get label(){return c()},set label(e){c(e),l()},get checked(){return E()},set checked(e){E(e),l()},get disabled(){return n()},set disabled(e){n(e),l()},get contextualisednumber(){return s()},set contextualisednumber(e=99){s(e),l()},get removablelabel(){return I()},set removablelabel(e){I(e),l()}},W=j(),le=A(W);{var oe=e=>{var b=Ce(),T=d(b);{var K=p=>{var C=j(),H=A(C);Y(H,t,"icon",{}),v(p,C)};B(T,p=>{E()||p(K)})}var h=N(T,2);he(h);var u=N(h,2),m=d(u,!0);i(u),i(b),L(()=>{D(b,"for",g()),P(b,1,F(["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`]),"svelte-1f9dt2v"),D(h,"id",g()),D(h,"name",k()),h.disabled=n(),M(m,c())}),pe(h,E),v(e,b)},se=e=>{var b=j(),T=A(b);{var K=u=>{var m=Ee(),p=d(m);Y(p,t,"icon",{});var C=N(p,2),H=d(C,!0);i(C),i(m),L(()=>{P(m,1,F(["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`]),"svelte-1f9dt2v"),m.disabled=n(),M(H,c())}),v(u,m)},h=u=>{var m=j(),p=A(m);{var C=z=>{var _=ze(),q=d(_);{let w=ue(()=>o()==="l"?"m":void 0);xe(q,{appearance:"inverse",get label(){return s()},get size(){return ge(w)}})}var G=N(q,2),O=d(G,!0);i(G),i(_),L(()=>{P(_,1,F(["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`]),"svelte-1f9dt2v"),_.disabled=n(),M(O,c())}),v(z,_)},H=z=>{var _=j(),q=A(_);{var G=w=>{var f=ye(),y=d(f),Q=d(y,!0);i(y);var U=N(y,2);U.__click=ae;var V=d(U),de=d(V);{var ie=x=>{te(x,{"aria-hidden":"true"})},ne=x=>{we(x,{"aria-hidden":"true"})};B(de,x=>{o()==="s"?x(ie):x(ne,!1)})}i(V);var X=N(V,2),ve=d(X,!0);i(X),i(U),i(f),_e(f,x=>J=x,()=>J),L(()=>{P(f,1,F(["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`]),"svelte-1f9dt2v"),M(Q,c()),M(ve,I())}),v(w,f)},O=w=>{var f=Ne(),y=d(f),Q=d(y,!0);i(y),i(f),L(()=>{P(f,1,F(["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`]),"svelte-1f9dt2v"),M(Q,c())}),v(w,f)};B(q,w=>{a()==="removable"?w(G):w(O,!1)},!0)}v(z,_)};B(p,z=>{a()==="contextualised"?z(C):z(H,!1)},!0)}v(u,m)};B(T,u=>{a()==="interactive"?u(K):u(h,!1)},!0)}v(e,b)};B(le,e=>{a()==="selectable"?e(oe):e(se,!1)})}return v(S,W),ee(re)}me(["click"]);customElements.define("m-tag",Z(Be,{type:{},size:{},id:{},name:{},label:{},checked:{},disabled:{},contextualisednumber:{},removablelabel:{}},["icon"],[],!0));
+ */.mc-tag.svelte-1f9dt2v {font-size:var(--font-size-100, 0.875rem);border-radius:2rem;height:2rem;padding-inline:0.75rem;box-sizing:border-box;display:inline-flex;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-width-s, 0.0625rem) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-1f9dt2v {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-1f9dt2v {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-1f9dt2v, .mc-tag.svelte-1f9dt2v:disabled {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-interactive.svelte-1f9dt2v {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-1f9dt2v:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-1f9dt2v: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-tag-contextualised.svelte-1f9dt2v {gap:0.25rem;text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:0.5rem;}.mc-tag-contextualised.svelte-1f9dt2v:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-1f9dt2v: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-tag-contextualised.mc-tag--s.svelte-1f9dt2v {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-1f9dt2v {padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-removable__remove.svelte-1f9dt2v {width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 0.125rem;padding:0.25rem;display:block;cursor:pointer;border-radius:var(--border-radius-full, 100%);}.mc-tag-removable__remove.svelte-1f9dt2v:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-1f9dt2v: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-tag-removable__icon.svelte-1f9dt2v {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-1f9dt2v {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-removable.mc-tag--s.svelte-1f9dt2v {padding:0 0 0 0.5rem;}.mc-tag-removable.mc-tag--s.svelte-1f9dt2v .mc-tag-removable__remove:where(.svelte-1f9dt2v) {width:1.5rem;height:1.5rem;padding:0.125rem;}.mc-tag-removable.mc-tag--s.svelte-1f9dt2v .mc-tag-removable__icon:where(.svelte-1f9dt2v) {width:1.25rem;height:1.25rem;}.mc-tag-removable.mc-tag--l.svelte-1f9dt2v .mc-tag-removable__remove:where(.svelte-1f9dt2v) {width:2.5rem;height:2.5rem;}.mc-tag-removable.mc-tag--l.svelte-1f9dt2v .mc-tag-removable__icon:where(.svelte-1f9dt2v) {width:2rem;height:2rem;}.mc-tag-selectable.svelte-1f9dt2v {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-selectable.svelte-1f9dt2v:hover {box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-1f9dt2v:has(:where(.svelte-1f9dt2v):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-tag-selectable.svelte-1f9dt2v:has(:where(.svelte-1f9dt2v):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-1f9dt2v:has(:where(.svelte-1f9dt2v):checked)::before {display:inline-block;content:"";height:1.25rem;width:1.25rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--tag-color-text-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-tag-selectable.svelte-1f9dt2v:has(:where(.svelte-1f9dt2v):checked):not(:has(:disabled)):hover {background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none;}.mc-tag-selectable.svelte-1f9dt2v:has(:where(.svelte-1f9dt2v):disabled) {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-selectable.svelte-1f9dt2v:has(:where(.svelte-1f9dt2v):disabled)::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--color-text-disabled, %23737373)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-tag-selectable.svelte-1f9dt2v .mc-tag__input:where(.svelte-1f9dt2v) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-selectable.svelte-1f9dt2v .mc-tag__label:where(.svelte-1f9dt2v) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-1f9dt2v {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-1f9dt2v {padding-inline-start:0.75rem;}.mc-tag-interactive.svelte-1f9dt2v {gap:0.25rem;}`};function De(j,t){$(t,!0),be(j,Pe);let a=r(t,"type",7,"informative"),o=r(t,"size",7,"m"),f=r(t,"id",7),w=r(t,"name",7),c=r(t,"label",7),E=r(t,"checked",15),v=r(t,"disabled",7),s=r(t,"contextualisednumber",7,99),I=r(t,"removablelabel",7),A=ue(t,["$$slots","$$events","$$legacy","$$host","type","size","id","name","label","checked","disabled","contextualisednumber","removablelabel"]),J;const le=()=>{const e=new CustomEvent("remove-tag",{detail:f(),bubbles:!0,composed:!0});J.dispatchEvent(e)};var oe={get type(){return a()},set type(e="informative"){a(e),l()},get size(){return o()},set size(e="m"){o(e),l()},get id(){return f()},set id(e){f(e),l()},get name(){return w()},set name(e){w(e),l()},get label(){return c()},set label(e){c(e),l()},get checked(){return E()},set checked(e){E(e),l()},get disabled(){return v()},set disabled(e){v(e),l()},get contextualisednumber(){return s()},set contextualisednumber(e=99){s(e),l()},get removablelabel(){return I()},set removablelabel(e){I(e),l()}},W=D(),se=F(W);{var de=e=>{var x=ze();q(x,()=>({for:f(),class:["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`],...A}),void 0,void 0,void 0,"svelte-1f9dt2v");var R=d(x);{var K=h=>{var k=D(),P=F(k);Y(P,t,"icon",{}),n(h,k)};B(R,h=>{E()||h(K)})}var u=N(R,2);we(u);var g=N(u,2),b=d(g,!0);i(g),i(x),L(()=>{G(u,"id",f()),G(u,"name",w()),u.disabled=v(),M(b,c())}),xe(u,E),n(e,x)},ie=e=>{var x=D(),R=F(x);{var K=g=>{var b=Ne();q(b,()=>({class:["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`],type:"button",disabled:v(),...A}),void 0,void 0,void 0,"svelte-1f9dt2v");var h=d(b);Y(h,t,"icon",{});var k=N(h,2),P=d(k,!0);i(k),i(b),L(()=>M(P,c())),n(g,b)},u=g=>{var b=D(),h=F(b);{var k=y=>{var C=Me();q(C,()=>({class:["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`],type:"button",disabled:v(),...A}),void 0,void 0,void 0,"svelte-1f9dt2v");var S=d(C);{let p=pe(()=>o()==="l"?"m":void 0);Ee(S,{appearance:"inverse",get label(){return s()},get size(){return he(p)}})}var T=N(S,2),O=d(T,!0);i(T),i(C),L(()=>M(O,c())),n(y,C)},P=y=>{var C=D(),S=F(C);{var T=p=>{var m=Be();q(m,()=>({class:["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`],...A}),void 0,void 0,void 0,"svelte-1f9dt2v");var z=d(m),Q=d(z,!0);i(z);var U=N(z,2);U.__click=le;var V=d(U),ve=d(V);{var ne=_=>{re(_,{"aria-hidden":"true"})},ce=_=>{Ce(_,{"aria-hidden":"true"})};B(ve,_=>{o()==="s"?_(ne):_(ce,!1)})}i(V);var X=N(V,2),me=d(X,!0);i(X),i(U),i(m),ke(m,_=>J=_,()=>J),L(()=>{M(Q,c()),M(me,I())}),n(p,m)},O=p=>{var m=Le(),z=d(m),Q=d(z,!0);i(z),i(m),L(()=>{te(m,1,ae(["mc-tag",`mc-tag-${a()}`,`mc-tag--${o()}`]),"svelte-1f9dt2v"),M(Q,c())}),n(p,m)};B(S,p=>{a()==="removable"?p(T):p(O,!1)},!0)}n(y,C)};B(h,y=>{a()==="contextualised"?y(k):y(P,!1)},!0)}n(g,b)};B(R,g=>{a()==="interactive"?g(K):g(u,!1)},!0)}n(e,x)};B(se,e=>{a()==="selectable"?e(de):e(ie,!1)})}return n(j,W),ee(oe)}ge(["click"]);customElements.define("m-tag",Z(De,{type:{},size:{},id:{},name:{},label:{},checked:{},disabled:{},contextualisednumber:{},removablelabel:{}},["icon"],[],!0));
 //# sourceMappingURL=Tag.js.map

package/dist/components/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/CrossCircleFilled20/CrossCircleFilled20.svelte","../../../src/components/tag/Tag.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'cross-circle-filled-20', 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.25rem\";\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 20 20\" width=\"20px\" height=\"20px\"><path fill-rule=\"evenodd\" d=\"M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06\"/></svg>","<svelte:options customElement={{ tag: 'm-tag' }} />\n\n<script lang=\"ts\">\n  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';\n  import CrossCircleFilled20 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled20/CrossCircleFilled20.svelte';\n  import NumberBadge from '../numberbadge/NumberBadge.svelte';\n  /**\n   * A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).\n   *\n   * @event remove-tag {CustomEvent<string>} - Emits when the remove button of a tag is clicked, passing the tag's ID.\n   * @slot icon - Use this slot to insert an icon in the tag.\n   */\n  interface Props {\n    /**\n     * Defines the behavior and layout of the tag.\n     */\n    type?: 'informative' | 'interactive' | 'contextualised' | 'removable' | 'selectable';\n    /**\n     * Determines the size of the tag.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * A unique identifier for the tag, used to associate the label with the form element. **Required** when type is 'selectable' or 'removable'.\n     */\n    id?: string;\n    /**\n     * The name attribute for the tag element, typically used for form submission. (only relevant for type: 'selectable').\n     */\n    name?: string;\n    /**\n     * The text label displayed next to the tag.\n     */\n    label: string;\n    /**\n     * The tag's checked state. Used only for type: 'selectable'.\n     */\n    checked?: boolean;\n    /**\n     * If `true`, disables the tag, making it non-interactive. Applicable to selectable, interactive, and contextualised types.\n     */\n    disabled?: boolean;\n    /**\n     * A number displayed in the badge when the tag is contextualised.\n     */\n    contextualisednumber?: number;\n    /**\n     * Accessible label text for the remove button in removable tags.\n     */\n    removablelabel?: string;\n  }\n\n  let {\n    type = 'informative',\n    size = 'm',\n    id,\n    name,\n    label,\n    checked = $bindable(),\n    disabled,\n    contextualisednumber = 99,\n    removablelabel,\n  }: Props = $props();\n  let element: HTMLElement;\n\n  const onRemove = () => {\n    const event = new CustomEvent('remove-tag', {\n      detail: id,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n</script>\n\n{#if type === 'selectable'}\n  <label for={id} class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]}>\n    {#if !checked}\n      <slot name=\"icon\" />\n    {/if}\n    <input type=\"checkbox\" class=\"mc-tag__input\" {id} {name} {disabled} bind:checked />\n    <span class=\"mc-tag__label\">{label}</span>\n  </label>\n{:else if type === 'interactive'}\n  <button class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]} type=\"button\" {disabled}>\n    <slot name=\"icon\" />\n    <span class=\"mc-tag__label\">{label}</span>\n  </button>\n{:else if type === 'contextualised'}\n  <button class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]} type=\"button\" {disabled}>\n    <NumberBadge\n      appearance=\"inverse\"\n      label={contextualisednumber}\n      size={size === 'l' ? 'm' : undefined}\n    />\n    <span class=\"mc-tag__label\">{label}</span>\n  </button>\n{:else if type === 'removable'}\n  <span class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]} bind:this={element}>\n    <span class=\"mc-tag__label\">{label}</span>\n    <button class=\"mc-tag-removable__remove\" type=\"button\" onclick={onRemove}>\n      <span class=\"mc-tag-removable__icon\">\n        {#if size === 's'}\n          <CrossCircleFilled20 aria-hidden=\"true\" />\n        {:else}\n          <CrossCircleFilled24 aria-hidden=\"true\" />\n        {/if}\n      </span>\n      <span class=\"mc-tag-removable__text\">{removablelabel}</span>\n    </button>\n  </span>\n{:else}\n  <span class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]}>\n    <span class=\"mc-tag__label\">{label}</span>\n  </span>\n{/if}\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n\n  .mc-tag-interactive {\n    gap: 0.25rem;\n  }\n</style>\n"],"names":["id","style","className","fill","size","type","$.prop","$$props","name","label","checked","disabled","contextualisednumber","removablelabel","element","onRemove","event","$$render","consequent","$0","$.derived","consequent_4","alternate","$.bind_this","span_3","$$value","consequent_5","alternate_1","consequent_3","alternate_2","consequent_2","alternate_3","consequent_1","alternate_4"],"mappings":"m6BAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,SAAS,iRAGDJ,GAAE,OAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,gBAF3E;;u2NCPA,kBAoDI,IAAAE,eAAO,aAAa,EACpBD,eAAO,GAAG,EACVJ,EAAEM,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,EAAOJ,EAAAC,EAAA,UAAA,EAAA,EACPI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,+BAAuB,EAAE,EACzBC,EAAcP,EAAAC,EAAA,iBAAA,CAAA,EAEZO,EAEE,MAAAC,GAAQ,IAAS,CACf,MAAAC,EAAK,IAAO,YAAY,cAC5B,OAAQhB,EAAE,EACV,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBc,EAAQ,cAAcE,CAAK,CAC7B,4CAnBS,cAAa,6CACb,IAAG,0TAMa,GAAE,sLAiBnBN,EAAO,GAAAO,EAAAC,CAAA,yEADHlB,GAAE,WAAU,SAAQ,UAAYK,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,CAAA,EAAA,gBAAA,mDAKpCK,GAAK,2IAGpB,SAAQ,UAAYJ,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,CAAA,EAAA,gBAAA,qBAE5BK,GAAK,iEAO1B,IAAAU,EAAAC,GAAA,IAAAhB,EAAI,IAAK,IAAM,IAAM,MAAS,gDAD7BQ,EAAoB,+EAHf,SAAQ,UAAYP,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,CAAA,EAAA,gBAAA,qBAM5BK,GAAK,sGAK8BM,8GAEvDX,EAAI,IAAK,IAAGa,EAAAI,EAAA,EAAAJ,EAAAK,GAAA,EAAA,gDAJkDC,GAAAC,EAAAC,GAAAX,QAAAA,CAAO,kBAAlE,SAAQ,UAAYT,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,CAAA,EAAA,gBAAA,MAC1BK,GAAK,OASMI,GAAc,wEAI1C,SAAQ,UAAYR,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,CAAA,EAAA,gBAAA,MAC1BK,GAAK,oBAhB5BJ,EAAI,IAAK,YAAWY,EAAAS,CAAA,EAAAT,EAAAU,EAAA,EAAA,uBATpBtB,EAAI,IAAK,iBAAgBY,EAAAW,CAAA,EAAAX,EAAAY,EAAA,EAAA,uBALzBxB,EAAI,IAAK,cAAaY,EAAAa,CAAA,EAAAb,EAAAc,EAAA,EAAA,wBAR3B1B,EAAI,IAAK,aAAYY,EAAAe,EAAA,EAAAf,EAAAgB,GAAA,EAAA,wBAF1B","x_google_ignoreList":[0]}
+{"version":3,"file":"Tag.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/CrossCircleFilled20/CrossCircleFilled20.svelte","../../../src/components/tag/Tag.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'cross-circle-filled-20', 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.25rem\";\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 20 20\" width=\"20px\" height=\"20px\"><path fill-rule=\"evenodd\" d=\"M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06\"/></svg>","<svelte:options customElement={{ tag: 'm-tag' }} />\n\n<script lang=\"ts\">\n  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';\n  import CrossCircleFilled20 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled20/CrossCircleFilled20.svelte';\n  import NumberBadge from '../numberbadge/NumberBadge.svelte';\n  /**\n   * A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).\n   *\n   * @event remove-tag {CustomEvent<string>} - Emits when the remove button of a tag is clicked, passing the tag's ID.\n   * @slot icon - Use this slot to insert an icon in the tag.\n   */\n  interface Props {\n    /**\n     * Defines the behavior and layout of the tag.\n     */\n    type?: 'informative' | 'interactive' | 'contextualised' | 'removable' | 'selectable';\n    /**\n     * Determines the size of the tag.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * A unique identifier for the tag, used to associate the label with the form element. **Required** when type is 'selectable' or 'removable'.\n     */\n    id?: string;\n    /**\n     * The name attribute for the tag element, typically used for form submission. (only relevant for type: 'selectable').\n     */\n    name?: string;\n    /**\n     * The text label displayed next to the tag.\n     */\n    label: string;\n    /**\n     * The tag's checked state. Used only for type: 'selectable'.\n     */\n    checked?: boolean;\n    /**\n     * If `true`, disables the tag, making it non-interactive. Applicable to selectable, interactive, and contextualised types.\n     */\n    disabled?: boolean;\n    /**\n     * A number displayed in the badge when the tag is contextualised.\n     */\n    contextualisednumber?: number;\n    /**\n     * Accessible label text for the remove button in removable tags.\n     */\n    removablelabel?: string;\n  }\n\n  let {\n    type = 'informative',\n    size = 'm',\n    id,\n    name,\n    label,\n    checked = $bindable(),\n    disabled,\n    contextualisednumber = 99,\n    removablelabel,\n    ...attrs\n  }: Props = $props();\n  let element: HTMLElement;\n\n  const onRemove = () => {\n    const event = new CustomEvent('remove-tag', {\n      detail: id,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n</script>\n\n{#if type === 'selectable'}\n  <label for={id} class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]} {...attrs}>\n    {#if !checked}\n      <slot name=\"icon\" />\n    {/if}\n    <input type=\"checkbox\" class=\"mc-tag__input\" {id} {name} {disabled} bind:checked />\n    <span class=\"mc-tag__label\">{label}</span>\n  </label>\n{:else if type === 'interactive'}\n  <button\n    class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]}\n    type=\"button\"\n    {disabled}\n    {...attrs}\n  >\n    <slot name=\"icon\" />\n    <span class=\"mc-tag__label\">{label}</span>\n  </button>\n{:else if type === 'contextualised'}\n  <button\n    class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]}\n    type=\"button\"\n    {disabled}\n    {...attrs}\n  >\n    <NumberBadge\n      appearance=\"inverse\"\n      label={contextualisednumber}\n      size={size === 'l' ? 'm' : undefined}\n    />\n    <span class=\"mc-tag__label\">{label}</span>\n  </button>\n{:else if type === 'removable'}\n  <span class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]} bind:this={element} {...attrs}>\n    <span class=\"mc-tag__label\">{label}</span>\n    <button class=\"mc-tag-removable__remove\" type=\"button\" onclick={onRemove}>\n      <span class=\"mc-tag-removable__icon\">\n        {#if size === 's'}\n          <CrossCircleFilled20 aria-hidden=\"true\" />\n        {:else}\n          <CrossCircleFilled24 aria-hidden=\"true\" />\n        {/if}\n      </span>\n      <span class=\"mc-tag-removable__text\">{removablelabel}</span>\n    </button>\n  </span>\n{:else}\n  <span class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]}>\n    <span class=\"mc-tag__label\">{label}</span>\n  </span>\n{/if}\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n\n  .mc-tag-interactive {\n    gap: 0.25rem;\n  }\n</style>\n"],"names":["id","style","className","fill","size","type","$.prop","$$props","name","label","checked","disabled","contextualisednumber","removablelabel","attrs","$.rest_props","element","onRemove","event","$$render","consequent","$0","$.derived","consequent_4","alternate","$.bind_this","span_3","$$value","consequent_5","alternate_1","consequent_3","alternate_2","consequent_2","alternate_3","consequent_1","alternate_4"],"mappings":"o7BAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,SAAS,iRAGDJ,GAAE,OAAUC,GAAK,YAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,gBAF3E;;u2NCPA,kBAoDI,IAAAE,eAAO,aAAa,EACpBD,eAAO,GAAG,EACVJ,EAAEM,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,EAAOJ,EAAAC,EAAA,UAAA,EAAA,EACPI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,+BAAuB,EAAE,EACzBC,EAAcP,EAAAC,EAAA,iBAAA,CAAA,EACXO,EAAAC,GAAAR,EAAA,2IAEDS,EAEE,MAAAC,GAAQ,IAAS,CACf,MAAAC,EAAK,IAAO,YAAY,cAC5B,OAAQlB,EAAE,EACV,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBgB,EAAQ,cAAcE,CAAK,CAC7B,4CApBS,cAAa,6CACb,IAAG,0TAMa,GAAE,gIAiBflB,EAAE,SAAU,SAAQ,UAAYK,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,KAASU,mHACpEJ,EAAO,GAAAS,EAAAC,CAAA,gHAIgBX,GAAK,mFAI1B,SAAQ,UAAYJ,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,gCAG/CU,kHAGyBL,EAAK,CAAA,CAAA,wEAI1B,SAAQ,UAAYJ,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,gCAG/CU,uDAKI,IAAAO,EAAAC,GAAA,IAAAlB,EAAI,IAAK,IAAM,IAAM,MAAS,gDAD7BQ,EAAoB,yEAGAH,EAAK,CAAA,CAAA,wEAGtB,SAAQ,UAAYJ,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,KAA6BU,4FAEpBG,8GAEvDb,EAAI,IAAK,IAAGe,EAAAI,EAAA,EAAAJ,EAAAK,GAAA,EAAA,gDAJkDC,GAAAC,EAAAC,GAAAX,QAAAA,CAAO,aACjDP,GAAK,OASMI,GAAc,0EAI1C,SAAQ,UAAYR,EAAI,CAAA,GAAA,WAAeD,EAAI,CAAA,EAAA,CAAA,EAAA,gBAAA,MAC1BK,GAAK,oBAhB5BJ,EAAI,IAAK,YAAWc,EAAAS,CAAA,EAAAT,EAAAU,EAAA,EAAA,uBAdpBxB,EAAI,IAAK,iBAAgBc,EAAAW,CAAA,EAAAX,EAAAY,EAAA,EAAA,uBAVzB1B,EAAI,IAAK,cAAac,EAAAa,CAAA,EAAAb,EAAAc,EAAA,EAAA,wBAR3B5B,EAAI,IAAK,aAAYc,EAAAe,EAAA,EAAAf,EAAAgB,GAAA,EAAA,wBAF1B","x_google_ignoreList":[0]}

package/dist/components/tag/Tag.stories.d.ts

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

package/dist/components/tag/Tag.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAMrE,QAAA,MAAM,IAAI,EAAE,IAkCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC"}
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,cAAc,CAAC;AAEtB,QAAA,MAAM,IAAI,EAAE,IAkCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC"}

package/dist/components/tag/Tag.stories.js

@@ -2,6 +2,7 @@ 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 './Tag.svelte';
 const meta = {
     title: 'Indicators/Tag',
     component: 'm-tag',

package/dist/components/tag/Tag.svelte

@@ -59,6 +59,7 @@
     disabled,
     contextualisednumber = 99,
     removablelabel,
+    ...attrs
   }: Props = $props();
   let element: HTMLElement;
 
@@ -73,7 +74,7 @@
 </script>
 
 {#if type === 'selectable'}
-  <label for={id} class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]}>
+  <label for={id} class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]} {...attrs}>
     {#if !checked}
       <slot name="icon" />
     {/if}
@@ -81,12 +82,22 @@
     <span class="mc-tag__label">{label}</span>
   </label>
 {:else if type === 'interactive'}
-  <button class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]} type="button" {disabled}>
+  <button
+    class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]}
+    type="button"
+    {disabled}
+    {...attrs}
+  >
     <slot name="icon" />
     <span class="mc-tag__label">{label}</span>
   </button>
 {:else if type === 'contextualised'}
-  <button class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]} type="button" {disabled}>
+  <button
+    class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]}
+    type="button"
+    {disabled}
+    {...attrs}
+  >
     <NumberBadge
       appearance="inverse"
       label={contextualisednumber}
@@ -95,7 +106,7 @@
     <span class="mc-tag__label">{label}</span>
   </button>
 {:else if type === 'removable'}
-  <span class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]} bind:this={element}>
+  <span class={['mc-tag', `mc-tag-${type}`, `mc-tag--${size}`]} bind:this={element} {...attrs}>
     <span class="mc-tag__label">{label}</span>
     <button class="mc-tag-removable__remove" type="button" onclick={onRemove}>
       <span class="mc-tag-removable__icon">

package/dist/components/tag/Tag.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.svelte.ts"],"names":[],"mappings":"AAOE;;;;;GAKG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,GAAG,aAAa,GAAG,gBAAgB,GAAG,WAAW,GAAG,YAAY,CAAC;IACrF;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA0EH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,GAAG;;;;iBAAqF,CAAC;AAC7E,KAAK,GAAG,GAAG,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC;AACtC,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tag.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.svelte.ts"],"names":[],"mappings":"AAOE;;;;;GAKG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,GAAG,aAAa,GAAG,gBAAgB,GAAG,WAAW,GAAG,YAAY,CAAC;IACrF;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA2EH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,GAAG;;;;iBAAqF,CAAC;AAC7E,KAAK,GAAG,GAAG,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC;AACtC,eAAe,GAAG,CAAC"}

package/dist/components/textarea/Textarea.js

@@ -1,4 +1,4 @@
-import{c as x,p as w,a as y,b as o,f as z,t as j,i as q,j as _,k as t,y as p,e as k,g as E}from"../../custom-element.js";import{s as l}from"../../attributes.js";import{c as D}from"../../input.js";import{c as F}from"../../custom-element-forward-events.js";var O=z("<textarea></textarea>");const S={hash:"svelte-1qbzujl",code:`/**
+import{c as x,p as w,a as y,b as o,f as z,r as j,h as q,i as p,j as a,z as _}from"../../custom-element.js";import{a as k}from"../../attributes.js";import{c as E}from"../../input.js";import{c as D}from"../../custom-element-forward-events.js";var F=z("<textarea></textarea>");const S={hash:"svelte-1qbzujl",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-textarea.svelte-1qbzujl {font-family:inherit;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);min-height:4rem;padding:0.5rem 0.75rem;}.mc-textarea.svelte-1qbzujl::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-textarea.svelte-1qbzujl:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-textarea.svelte-1qbzujl:focus {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-textarea.svelte-1qbzujl:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-textarea[readonly].svelte-1qbzujl {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-textarea.is-invalid.svelte-1qbzujl {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-textarea.is-invalid.svelte-1qbzujl:hover {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}`};function T(h,a){w(a,!0),y(h,S);let s=o(a,"id",7),i=o(a,"name",7),n=o(a,"value",7),m=o(a,"placeholder",7),d=o(a,"isinvalid",7),c=o(a,"disabled",7),v=o(a,"rows",7,2),u=o(a,"minlength",7),b=o(a,"maxlength",7),f=o(a,"readonly",7);var g={get id(){return s()},set id(e){s(e),t()},get name(){return i()},set name(e){i(e),t()},get value(){return n()},set value(e){n(e),t()},get placeholder(){return m()},set placeholder(e){m(e),t()},get isinvalid(){return d()},set isinvalid(e){d(e),t()},get disabled(){return c()},set disabled(e){c(e),t()},get rows(){return v()},set rows(e=2){v(e),t()},get minlength(){return u()},set minlength(e){u(e),t()},get maxlength(){return b()},set maxlength(e){b(e),t()},get readonly(){return f()},set readonly(e){f(e),t()}},r=O();return p(r),j(()=>{k(r,1,E(["mc-textarea",d()&&"is-invalid"]),"svelte-1qbzujl"),l(r,"aria-invalid",d()),l(r,"name",i()),l(r,"id",s()),l(r,"placeholder",m()),l(r,"rows",v()),r.disabled=c(),l(r,"minlength",u()),l(r,"maxlength",b()),r.readOnly=f()}),D(r,n),q(h,r),_(g)}customElements.define("m-textarea",x(T,{id:{},name:{},value:{},placeholder:{},isinvalid:{},disabled:{},rows:{},minlength:{},maxlength:{},readonly:{}},[],[],!0,F));
+ */.mc-textarea.svelte-1qbzujl {font-family:inherit;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);min-height:4rem;padding:0.5rem 0.75rem;}.mc-textarea.svelte-1qbzujl::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-textarea.svelte-1qbzujl:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-textarea.svelte-1qbzujl:focus {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-textarea.svelte-1qbzujl:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-textarea[readonly].svelte-1qbzujl {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-textarea.is-invalid.svelte-1qbzujl {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-textarea.is-invalid.svelte-1qbzujl:hover {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}`};function T(b,r){w(r,!0),y(b,S);let d=o(r,"id",7),s=o(r,"name",7),i=o(r,"value",7),n=o(r,"placeholder",7),t=o(r,"isinvalid",7),m=o(r,"disabled",7),c=o(r,"rows",7,2),v=o(r,"minlength",7),u=o(r,"maxlength",7),h=o(r,"readonly",7),f=j(r,["$$slots","$$events","$$legacy","$$host","id","name","value","placeholder","isinvalid","disabled","rows","minlength","maxlength","readonly"]);var g={get id(){return d()},set id(e){d(e),a()},get name(){return s()},set name(e){s(e),a()},get value(){return i()},set value(e){i(e),a()},get placeholder(){return n()},set placeholder(e){n(e),a()},get isinvalid(){return t()},set isinvalid(e){t(e),a()},get disabled(){return m()},set disabled(e){m(e),a()},get rows(){return c()},set rows(e=2){c(e),a()},get minlength(){return v()},set minlength(e){v(e),a()},get maxlength(){return u()},set maxlength(e){u(e),a()},get readonly(){return h()},set readonly(e){h(e),a()}},l=F();return _(l),k(l,()=>({class:["mc-textarea",t()&&"is-invalid"],"aria-invalid":t(),name:s(),id:d(),placeholder:n(),rows:c(),disabled:m(),minlength:v(),maxlength:u(),readonly:h(),...f}),void 0,void 0,void 0,"svelte-1qbzujl"),E(l,i),q(b,l),p(g)}customElements.define("m-textarea",x(T,{id:{},name:{},value:{},placeholder:{},isinvalid:{},disabled:{},rows:{},minlength:{},maxlength:{},readonly:{}},[],[],!0,D));
 //# sourceMappingURL=Textarea.js.map

package/dist/components/textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-textarea', extend: customElementForwardEvents }} />\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the textarea, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the textarea element, used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the textarea field.\n     */\n    value?: string | number;\n    /**\n     * Text displayed when the textarea is empty.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the textarea is marked as invalid.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, the textarea is disabled and non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * The number of visible text lines in the textarea.\n     */\n    rows?: number;\n    /**\n     * Minimum number of characters required for the textarea.\n     */\n    minlength?: number;\n    /**\n     * Maximum number of characters allowed in the textarea.\n     */\n    maxlength?: number;\n    /**\n     * If `true`, the textarea is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let {\n    id,\n    name,\n    value,\n    placeholder,\n    isinvalid,\n    disabled,\n    rows = 2,\n    minlength,\n    maxlength,\n    readonly,\n  }: Props = $props();\n</script>\n\n<textarea\n  bind:value\n  class={['mc-textarea', isinvalid && 'is-invalid']}\n  aria-invalid={isinvalid}\n  {name}\n  {id}\n  {placeholder}\n  {rows}\n  {disabled}\n  {minlength}\n  {maxlength}\n  {readonly}\n></textarea>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/textarea';\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","isinvalid","disabled","rows","minlength","maxlength","readonly","customElementForwardEvents"],"mappings":";;yvDAAA,oBAmDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,eAAO,CAAC,EACRC,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAST,EAAAC,EAAA,YAAA,CAAA,EACTS,EAAQV,EAAAC,EAAA,WAAA,CAAA,uVAHD,EAAC,iNASF,cAAeI,KAAa,YAAY,CAAA,EAAA,gBAAA,qBAClCA,GAAS,mKALzB,gKA9D4DM"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-textarea', extend: customElementForwardEvents }} />\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the textarea, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the textarea element, used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the textarea field.\n     */\n    value?: string | number;\n    /**\n     * Text displayed when the textarea is empty.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the textarea is marked as invalid.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, the textarea is disabled and non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * The number of visible text lines in the textarea.\n     */\n    rows?: number;\n    /**\n     * Minimum number of characters required for the textarea.\n     */\n    minlength?: number;\n    /**\n     * Maximum number of characters allowed in the textarea.\n     */\n    maxlength?: number;\n    /**\n     * If `true`, the textarea is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let {\n    id,\n    name,\n    value,\n    placeholder,\n    isinvalid,\n    disabled,\n    rows = 2,\n    minlength,\n    maxlength,\n    readonly,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<textarea\n  bind:value\n  class={['mc-textarea', isinvalid && 'is-invalid']}\n  aria-invalid={isinvalid}\n  {name}\n  {id}\n  {placeholder}\n  {rows}\n  {disabled}\n  {minlength}\n  {maxlength}\n  {readonly}\n  {...attrs}\n></textarea>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/textarea';\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","isinvalid","disabled","rows","minlength","maxlength","readonly","attrs","$.rest_props","customElementForwardEvents"],"mappings":";;yvDAAA,oBAmDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,eAAO,CAAC,EACRC,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAST,EAAAC,EAAA,YAAA,CAAA,EACTS,EAAQV,EAAAC,EAAA,WAAA,CAAA,EACLU,EAAAC,EAAAX,EAAA,oeAJI,EAAC,kNAUF,cAAeI,EAAS,GAAI,YAAY,iBAClCA,EAAS,oGASnBM,6DAdN,gKA/D4DE"}

package/dist/components/textarea/Textarea.stories.d.ts

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

package/dist/components/textarea/Textarea.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/Textarea.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAwCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
+{"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/Textarea.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,mBAAmB,CAAC;AAE3B,QAAA,MAAM,IAAI,EAAE,IAwCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/textarea/Textarea.stories.js

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
+import './Textarea.svelte';
 const meta = {
     title: 'Form Elements/Textarea',
     component: 'm-textarea',

package/dist/components/textarea/Textarea.svelte

@@ -59,6 +59,7 @@
     minlength,
     maxlength,
     readonly,
+    ...attrs
   }: Props = $props();
 </script>
 
@@ -74,6 +75,7 @@
   {minlength}
   {maxlength}
   {readonly}
+  {...attrs}
 ></textarea>
 
 <style>/**

package/dist/components/textarea/Textarea.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/Textarea.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2BH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/Textarea.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA4BH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/textinput/Textinput.js

@@ -1,9 +1,9 @@
-import{v as O,c as T,p as V,a as q,b as n,f as j,d as l,s as k,t as C,i as E,j as A,k as o,r as s,h as B,e as H,g as I}from"../../custom-element.js";import{i as J}from"../../if.js";import{s as K}from"../../slot.js";import{r as N,s as c}from"../../attributes.js";import{c as P}from"../../input.js";import{c as Q}from"../../custom-element-forward-events.js";var R=j('<div class="mc-controls-options svelte-5c9enb"><button type="button" class="mc-controls-options__button svelte-5c9enb"><svg class="mc-controls-options__icon svelte-5c9enb" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" class="svelte-5c9enb"></path></svg> <span class="mc-controls-options__label svelte-5c9enb"> </span></button></div>'),U=j('<div><span class="mc-text-input__icon svelte-5c9enb"><!></span> <input class="mc-text-input__control svelte-5c9enb"/> <!></div>');const W={hash:"svelte-5c9enb",code:`/**
+import{w as T,c as V,p as q,a as A,b as n,f as E,d as i,s as y,r as B,t as L,h as C,i as H,j as o,e as l,g as I,l as J,m as K}from"../../custom-element.js";import{i as N}from"../../if.js";import{s as O}from"../../slot.js";import{a as P}from"../../attributes.js";import{c as Q}from"../../input.js";import{c as R}from"../../custom-element-forward-events.js";var U=E('<div class="mc-controls-options svelte-5c9enb"><button type="button" class="mc-controls-options__button svelte-5c9enb"><svg class="mc-controls-options__icon svelte-5c9enb" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" class="svelte-5c9enb"></path></svg> <span class="mc-controls-options__label svelte-5c9enb"> </span></button></div>'),W=E('<div><span class="mc-text-input__icon svelte-5c9enb"><!></span> <input/> <!></div>');const X={hash:"svelte-5c9enb",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-controls-options.svelte-5c9enb {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-5c9enb {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%);}.mc-controls-options__button.svelte-5c9enb:hover .mc-controls-options__icon:where(.svelte-5c9enb) {fill:var(--forms-color-icon-clear-hover, #4d4d4d);}.mc-controls-options__button.svelte-5c9enb: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-controls-options__icon.svelte-5c9enb {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-5c9enb, .mc-controls-options__icon.svelte-5c9enb {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-5c9enb {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-controls-options__unit.svelte-5c9enb {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);}
 
 /* stylelint-disable string-no-newline */.mc-text-input.svelte-5c9enb {transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:0.5rem;}.mc-text-input__control.svelte-5c9enb {background-color:transparent;border-width:0;font-family:inherit;outline:none;}.mc-text-input__control[type=number].svelte-5c9enb::-webkit-inner-spin-button, .mc-text-input__control[type=number].svelte-5c9enb::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-text-input__control[type=number].svelte-5c9enb {
   /* For Gecko rendering engine */appearance:textfield;}.mc-text-input__control[type=search].svelte-5c9enb::-webkit-search-decoration, .mc-text-input__control[type=search].svelte-5c9enb::-webkit-search-cancel-button {appearance:none;}.mc-text-input__control.svelte-5c9enb {padding:0.75rem 0.6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);flex-grow:1;}.mc-text-input__control.svelte-5c9enb::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__icon.svelte-5c9enb {fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-5c9enb:focus-within {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-text-input.svelte-5c9enb:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-text-input.svelte-5c9enb:has(input:where(.svelte-5c9enb):disabled) {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none;}.mc-text-input.svelte-5c9enb:has(input[readonly]:where(.svelte-5c9enb)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-5c9enb:has(.mc-text-input__icon:where(.svelte-5c9enb)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-5c9enb:has(.mc-text-input__icon:where(.svelte-5c9enb)) .mc-text-input__control:where(.svelte-5c9enb) {padding-inline-start:0;}.mc-text-input.svelte-5c9enb:has(.mc-controls-options:where(.svelte-5c9enb)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-5c9enb:has(.mc-controls-options:where(.svelte-5c9enb)) .mc-text-input__control:where(.svelte-5c9enb) {padding-inline-end:0;}.mc-text-input--s.svelte-5c9enb {height:2rem;}.mc-text-input--s.svelte-5c9enb .mc-text-input__control:where(.svelte-5c9enb) {padding:0.375rem 0.6875rem;font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);}.mc-text-input--s.svelte-5c9enb:has(.mc-text-input__icon:where(.svelte-5c9enb)) {padding-inline-start:0.4375rem;}.mc-text-input--s.svelte-5c9enb:has(.mc-controls-options:where(.svelte-5c9enb)) {padding-inline-end:0.4375rem;}.mc-text-input.is-invalid.svelte-5c9enb {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-text-input.is-invalid.svelte-5c9enb:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}.mc-text-input.svelte-5c9enb :where(.svelte-5c9enb) {box-sizing:border-box;}
 
-/* stylelint-enable string-no-newline */.mc-text-input__icon.svelte-5c9enb:empty {display:none;}`};function X(z,t){V(t,!0),q(z,W);let v=n(t,"id",7),b=n(t,"name",7),i=n(t,"value",15),m=n(t,"placeholder",7),u=n(t,"inputtype",7,"text"),a=n(t,"isinvalid",7),p=n(t,"disabled",7),h=n(t,"readonly",7),f=n(t,"size",7,"m"),_=n(t,"clearlabel",7,"Clear content"),x=n(t,"isclearable",7);const F=()=>i("");var M={get id(){return v()},set id(e){v(e),o()},get name(){return b()},set name(e){b(e),o()},get value(){return i()},set value(e){i(e),o()},get placeholder(){return m()},set placeholder(e){m(e),o()},get inputtype(){return u()},set inputtype(e="text"){u(e),o()},get isinvalid(){return a()},set isinvalid(e){a(e),o()},get disabled(){return p()},set disabled(e){p(e),o()},get readonly(){return h()},set readonly(e){h(e),o()},get size(){return f()},set size(e="m"){f(e),o()},get clearlabel(){return _()},set clearlabel(e="Clear content"){_(e),o()},get isclearable(){return x()},set isclearable(e){x(e),o()}},d=U(),g=l(d),S=l(g);K(S,t,"icon",{}),s(g);var r=k(g,2);N(r);var Z=k(r,2);{var D=e=>{var w=R(),y=l(w);y.__click=F;var L=k(l(y),2),G=l(L,!0);s(L),s(y),s(w),C(()=>B(G,_())),E(e,w)};J(Z,e=>{x()&&i()&&e(D)})}return s(d),C(()=>{H(d,1,I(["mc-text-input",`mc-text-input--${f()}`,a()&&"is-invalid"]),"svelte-5c9enb"),c(r,"aria-invalid",a()),c(r,"name",b()),c(r,"id",v()),c(r,"type",u()),c(r,"placeholder",m()),r.disabled=p(),r.readOnly=h()}),P(r,i),E(z,d),A(M)}O(["click"]);customElements.define("m-textinput",T(X,{id:{},name:{},value:{},placeholder:{},inputtype:{},isinvalid:{},disabled:{},readonly:{},size:{},clearlabel:{},isclearable:{}},["icon"],[],!0,Q));
+/* stylelint-enable string-no-newline */.mc-text-input__icon.svelte-5c9enb:empty {display:none;}`};function Y(k,t){q(t,!0),A(k,X);let c=n(t,"id",7),d=n(t,"name",7),r=n(t,"value",15),v=n(t,"placeholder",7),b=n(t,"inputtype",7,"text"),s=n(t,"isinvalid",7),m=n(t,"disabled",7),u=n(t,"readonly",7),p=n(t,"size",7,"m"),h=n(t,"clearlabel",7,"Clear content"),f=n(t,"isclearable",7),j=B(t,["$$slots","$$events","$$legacy","$$host","id","name","value","placeholder","inputtype","isinvalid","disabled","readonly","size","clearlabel","isclearable"]);const F=()=>r("");var M={get id(){return c()},set id(e){c(e),o()},get name(){return d()},set name(e){d(e),o()},get value(){return r()},set value(e){r(e),o()},get placeholder(){return v()},set placeholder(e){v(e),o()},get inputtype(){return b()},set inputtype(e="text"){b(e),o()},get isinvalid(){return s()},set isinvalid(e){s(e),o()},get disabled(){return m()},set disabled(e){m(e),o()},get readonly(){return u()},set readonly(e){u(e),o()},get size(){return p()},set size(e="m"){p(e),o()},get clearlabel(){return h()},set clearlabel(e="Clear content"){h(e),o()},get isclearable(){return f()},set isclearable(e){f(e),o()}},a=W(),_=i(a),S=i(_);O(S,t,"icon",{}),l(_);var x=y(_,2);P(x,()=>({class:"mc-text-input__control","aria-invalid":s(),name:d(),id:c(),type:b(),placeholder:v(),disabled:m(),readonly:u(),...j}),void 0,void 0,void 0,"svelte-5c9enb",!0);var Z=y(x,2);{var D=e=>{var g=U(),w=i(g);w.__click=F;var z=y(i(w),2),G=i(z,!0);l(z),l(w),l(g),L(()=>I(G,h())),C(e,g)};N(Z,e=>{f()&&r()&&e(D)})}return l(a),L(()=>J(a,1,K(["mc-text-input",`mc-text-input--${p()}`,s()&&"is-invalid"]),"svelte-5c9enb")),Q(x,r),C(k,a),H(M)}T(["click"]);customElements.define("m-textinput",V(Y,{id:{},name:{},value:{},placeholder:{},inputtype:{},isinvalid:{},disabled:{},readonly:{},size:{},clearlabel:{},isclearable:{}},["icon"],[],!0,R));
 //# sourceMappingURL=Textinput.js.map

package/dist/components/textinput/Textinput.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textinput.js","sources":["../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-textinput', extend: customElementForwardEvents }} />\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.\n   *\n   * @slot icon - Use this slot to insert an icon in the input.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the input field.\n     */\n    value?: string | number;\n    /**\n     * A placeholder text to show in the input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * Defines the type of input.\n     */\n    inputtype?: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';\n    /**\n     * If `true`, applies an invalid state to the input.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the input.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the input has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(),\n    placeholder,\n    inputtype = 'text',\n    isinvalid,\n    disabled,\n    readonly,\n    size = 'm',\n    clearlabel = 'Clear content',\n    isclearable,\n  }: Props = $props();\n\n  const resetValue = () => (value = '');\n</script>\n\n<div class={['mc-text-input', `mc-text-input--${size}`, isinvalid && 'is-invalid']}>\n  <span class=\"mc-text-input__icon\">\n    <slot name=\"icon\" />\n  </span>\n\n  <input\n    bind:value\n    class=\"mc-text-input__control\"\n    aria-invalid={isinvalid}\n    {name}\n    {id}\n    type={inputtype}\n    {placeholder}\n    {disabled}\n    {readonly}\n  />\n\n  {#if isclearable && value}\n    <div class=\"mc-controls-options\">\n      <button type=\"button\" class=\"mc-controls-options__button\" onclick={resetValue}>\n        <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n          />\n        </svg>\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/controls-options';\n  @use '@mozaic-ds/styles/components/text-input';\n\n  .mc-text-input__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","inputtype","isinvalid","disabled","readonly","size","clearlabel","isclearable","resetValue","$$render","consequent","customElementForwardEvents"],"mappings":";;;;;;;kHAAA,oBAyDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,EAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,oBAAY,MAAM,EAClBC,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAQR,EAAAC,EAAA,WAAA,CAAA,EACRQ,eAAO,GAAG,EACVC,qBAAa,eAAe,EAC5BC,EAAWX,EAAAC,EAAA,cAAA,CAAA,QAGPW,EAAU,IAAUT,EAAQ,EAAE,qPATtB,OAAM,8MAIX,IAAG,yDACG,gBAAe,sLA0ByCS,qDAOvBF,EAAU,CAAA,CAAA,kBATrDC,EAAW,GAAIR,KAAKU,EAAAC,CAAA,gCAjBd,kCAAmCL,EAAI,CAAA,GAAIH,KAAa,mDAQnDA,GAAS,2CAGjBD,GAAS,2EAbnB,oMAvE6DU"}
+{"version":3,"file":"Textinput.js","sources":["../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-textinput', extend: customElementForwardEvents }} />\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.\n   *\n   * @slot icon - Use this slot to insert an icon in the input.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the input field.\n     */\n    value?: string | number;\n    /**\n     * A placeholder text to show in the input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * Defines the type of input.\n     */\n    inputtype?: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';\n    /**\n     * If `true`, applies an invalid state to the input.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the input.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the input has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(),\n    placeholder,\n    inputtype = 'text',\n    isinvalid,\n    disabled,\n    readonly,\n    size = 'm',\n    clearlabel = 'Clear content',\n    isclearable,\n    ...attrs\n  }: Props = $props();\n\n  const resetValue = () => (value = '');\n</script>\n\n<div class={['mc-text-input', `mc-text-input--${size}`, isinvalid && 'is-invalid']}>\n  <span class=\"mc-text-input__icon\">\n    <slot name=\"icon\" />\n  </span>\n\n  <input\n    bind:value\n    class=\"mc-text-input__control\"\n    aria-invalid={isinvalid}\n    {name}\n    {id}\n    type={inputtype}\n    {placeholder}\n    {disabled}\n    {readonly}\n    {...attrs}\n  />\n\n  {#if isclearable && value}\n    <div class=\"mc-controls-options\">\n      <button type=\"button\" class=\"mc-controls-options__button\" onclick={resetValue}>\n        <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n          />\n        </svg>\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/controls-options';\n  @use '@mozaic-ds/styles/components/text-input';\n\n  .mc-text-input__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","inputtype","isinvalid","disabled","readonly","size","clearlabel","isclearable","attrs","$.rest_props","resetValue","$$render","consequent","customElementForwardEvents"],"mappings":";;;;;;;kHAAA,oBAyDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,EAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,oBAAY,MAAM,EAClBC,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAQR,EAAAC,EAAA,WAAA,CAAA,EACRQ,eAAO,GAAG,EACVC,qBAAa,eAAe,EAC5BC,EAAWX,EAAAC,EAAA,cAAA,CAAA,EACRW,EAAAC,EAAAZ,EAAA,oKAGCa,EAAU,IAAUX,EAAQ,EAAE,qPAVtB,OAAM,8MAIX,IAAG,yDACG,gBAAe,sLAgBdG,EAAS,uBAGjBD,EAAS,+CAIXO,gGAKiEE,qDAOvBJ,EAAU,CAAA,CAAA,kBATrDC,EAAW,GAAIR,KAAKY,EAAAC,CAAA,+BAlBd,kCAAmCP,EAAI,CAAA,GAAIH,KAAa,mDAFrE,oMAxE6DW"}

package/dist/components/textinput/Textinput.stories.d.ts

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

package/dist/components/textinput/Textinput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textinput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAmDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
+{"version":3,"file":"Textinput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,oBAAoB,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAmDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/textinput/Textinput.stories.js

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
+import './Textinput.svelte';
 const meta = {
     title: 'Form Elements/TextInput',
     component: 'm-textinput',

package/dist/components/textinput/Textinput.svelte

@@ -66,6 +66,7 @@
     size = 'm',
     clearlabel = 'Clear content',
     isclearable,
+    ...attrs
   }: Props = $props();
 
   const resetValue = () => (value = '');
@@ -86,6 +87,7 @@
     {placeholder}
     {disabled}
     {readonly}
+    {...attrs}
   />
 
   {#if isclearable && value}

package/dist/components/textinput/Textinput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textinput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.svelte.ts"],"names":[],"mappings":"AAKE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IACjF;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA+CH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,SAAS;;;;eAAqF,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Textinput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.svelte.ts"],"names":[],"mappings":"AAKE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IACjF;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAgDH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,SAAS;;;;eAAqF,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}

package/dist/components/toaster/Toaster.js

@@ -1,6 +1,6 @@
-import{n as k,o as Y,u as Z,q as V,v as $,c as oo,p as to,a as ro,b as a,w as j,l as eo,f as E,s as h,t as M,i as U,j as ao,k as n,x as S,m as v,d as s,r as l,e as no,g as co,h as so}from"../../custom-element.js";import{i as W}from"../../if.js";import{s as lo}from"../../slot.js";import{c as uo}from"../../svelte-component.js";import{a as io,s as q}from"../../attributes.js";import{b as bo}from"../../this.js";import{I as vo,C as mo,W as go,a as fo,b as ho}from"../../Cross20.js";import"../../legacy.js";function A(e){throw new Error("https://svelte.dev/e/lifecycle_outside_component")}function B(e){k===null&&A(),Y&&k.l!==null?po(k).m.push(e):Z(()=>{const t=V(e);if(typeof t=="function")return t})}function ko(e){k===null&&A(),B(()=>()=>V(e))}function po(e){var t=e.l;return t.u??={a:[],b:[],m:[]}}var _o=E('<button class="mc-toaster__close mc-button mc-button--icon-button mc-button--inverse mc-button--s mc-button--ghost svelte-h1mguv" type="button" aria-label="Close"><!></button>'),wo=E('<div class="mc-toaster__indicator mc-linear-progressbar-buffer mc-linear-progressbar-buffer--m svelte-h1mguv"><div class="mc-linear-progressbar-buffer__indicator svelte-h1mguv" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div></div>'),xo=E('<section role="status" tabindex="-1"><span class="mc-toaster__icon svelte-h1mguv" aria-hidden="true"><!></span> <div class="mc-toaster__content svelte-h1mguv"><p class="mc-toaster__message svelte-h1mguv"> </p> <div class="mc-toaster__action svelte-h1mguv"><!></div></div> <!> <!></section>');const yo={hash:"svelte-h1mguv",code:`/**
+import{o as p,q as Y,u as Z,v as q,w as $,c as oo,p as to,a as ro,b as a,x as j,k as eo,f as E,r as ao,s as h,t as M,h as D,i as no,j as n,y as S,n as v,d as s,e as l,g as co}from"../../custom-element.js";import{i as W}from"../../if.js";import{s as so}from"../../slot.js";import{c as lo}from"../../svelte-component.js";import{a as uo,b as io,s as bo}from"../../attributes.js";import{b as vo}from"../../this.js";import{I as go,C as mo,W as fo,a as ho,b as po}from"../../Cross20.js";import"../../legacy.js";function V(e){throw new Error("https://svelte.dev/e/lifecycle_outside_component")}function A(e){p===null&&V(),Y&&p.l!==null?_o(p).m.push(e):Z(()=>{const t=q(e);if(typeof t=="function")return t})}function ko(e){p===null&&V(),A(()=>()=>q(e))}function _o(e){var t=e.l;return t.u??={a:[],b:[],m:[]}}var wo=E('<button class="mc-toaster__close mc-button mc-button--icon-button mc-button--inverse mc-button--s mc-button--ghost svelte-h1mguv" type="button" aria-label="Close"><!></button>'),xo=E('<div class="mc-toaster__indicator mc-linear-progressbar-buffer mc-linear-progressbar-buffer--m svelte-h1mguv"><div class="mc-linear-progressbar-buffer__indicator svelte-h1mguv" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div></div>'),yo=E('<section><span class="mc-toaster__icon svelte-h1mguv" aria-hidden="true"><!></span> <div class="mc-toaster__content svelte-h1mguv"><p class="mc-toaster__message svelte-h1mguv"> </p> <div class="mc-toaster__action svelte-h1mguv"><!></div></div> <!> <!></section>');const Co={hash:"svelte-h1mguv",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-button.svelte-h1mguv {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-h1mguv:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-h1mguv:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-h1mguv: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-h1mguv {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-h1mguv {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-h1mguv {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-h1mguv {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-h1mguv: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-h1mguv: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-h1mguv {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-h1mguv {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-h1mguv {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-h1mguv {padding:0.25rem;}.mc-button--outlined.svelte-h1mguv {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-h1mguv:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-h1mguv:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-h1mguv: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-h1mguv {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-h1mguv:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-h1mguv:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-h1mguv: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-h1mguv {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-h1mguv:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-h1mguv:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-h1mguv: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-h1mguv {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-h1mguv:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-h1mguv:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-h1mguv: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-h1mguv {--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-h1mguv:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-h1mguv:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-h1mguv: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-h1mguv {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-h1mguv {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-h1mguv:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-h1mguv:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-h1mguv: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-h1mguv {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-h1mguv:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-h1mguv:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-h1mguv: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-h1mguv {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-h1mguv:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-h1mguv:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-h1mguv: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-h1mguv {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-h1mguv:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-h1mguv:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-h1mguv: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-h1mguv {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-h1mguv:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-h1mguv:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-h1mguv: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-h1mguv {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-h1mguv:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-h1mguv:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-h1mguv: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-h1mguv {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-h1mguv:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-h1mguv:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-h1mguv: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-h1mguv {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-h1mguv:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-h1mguv:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-h1mguv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-linear-progressbar-buffer.svelte-h1mguv {--progress-value: 40;background-color:var(--progressbar-color-background, #c9d0de);height:0.25rem;position:relative;min-width:6rem;border-radius:var(--border-radius-l, 1rem);}.mc-linear-progressbar-buffer__indicator.svelte-h1mguv {background-color:var(--progressbar-color-indicator, #464e63);height:100%;transition:width 0.4s ease;overflow:hidden;border-radius:var(--border-radius-l, 1rem);box-sizing:border-box;width:calc(var(--progress-value) * 1%);}.mc-linear-progressbar-buffer--s.svelte-h1mguv {height:0.125rem;}.mc-linear-progressbar-buffer--l.svelte-h1mguv {height:0.5rem;}.mc-toaster.svelte-h1mguv {border-radius:var(--border-radius-m, 0.5rem);background:var(--toaster-color-background-info, #002a41);display:flex;flex-flow:row wrap;align-items:flex-start;min-height:3.5rem;min-width:18rem;position:absolute;top:1.5rem;right:1.5rem;margin-left:1.5rem;box-sizing:border-box;color:var(--toaster-color-text, #ffffff);z-index:var(--toaster-z-index, 4);opacity:0;visibility:hidden;transform:translateX(25%);transition:visibility 0s linear 0.4s, transform 0.4s ease-in-out, opacity 0.4s ease-in-out;}.mc-toaster.is-open.svelte-h1mguv {opacity:1;visibility:visible;transform:translateX(0);}.mc-toaster__icon.svelte-h1mguv {width:2rem;height:2rem;margin:0.75rem;fill:var(--toaster-color-icon-info, #3facd7);}.mc-toaster__content.svelte-h1mguv {flex:1 1 0;flex-direction:column;align-self:stretch;display:flex;align-items:flex-start;gap:1rem;padding:0.75rem 1rem 0.75rem 0;}
 @media (width >= 680px) {.mc-toaster__content.svelte-h1mguv {flex-direction:row;align-items:center;}
-}.mc-toaster__message.svelte-h1mguv {flex:1 1 0;margin:0;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);}.mc-toaster--information.svelte-h1mguv {background:var(--toaster-color-background-info, #002a41);}.mc-toaster--information.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-info, #3facd7);}.mc-toaster--information.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);}.mc-toaster--success.svelte-h1mguv {background:var(--toaster-color-background-success, #023618);}.mc-toaster--success.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-success, #78be20);}.mc-toaster--success.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-success, #78be20);}.mc-toaster--warning.svelte-h1mguv {background:var(--toaster-color-background-warning, #360e00);}.mc-toaster--warning.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-warning, #ef934a);}.mc-toaster--warning.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-warning, #ef934a);}.mc-toaster--error.svelte-h1mguv {background:var(--toaster-color-background-error, #2d0000);}.mc-toaster--error.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-error, #ef5f5c);}.mc-toaster--error.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-error, #ef5f5c);}.mc-toaster--bottom.svelte-h1mguv {top:inherit;bottom:1.5rem;right:1.5rem;}.mc-toaster--top-center.svelte-h1mguv {top:1.5rem;right:50%;transform:translateX(50%) !important;}.mc-toaster--bottom-center.svelte-h1mguv {top:inherit;bottom:1.5rem;right:50%;transform:translateX(50%) !important;}.mc-toaster__indicator.svelte-h1mguv {width:100%;margin:0.5rem;--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);--progressbar-color-background: var(--color-background-primary, #ffffff);}.mc-toaster__close.svelte-h1mguv {margin:0.25rem;}.mc-toaster__action.svelte-h1mguv:empty {display:none;}`};function Co(e,t){to(t,!0),ro(e,yo);let c=a(t,"open",7),p=a(t,"position",7,"top"),_=a(t,"description",7),m=a(t,"status",7,"info"),w=a(t,"closable",7,!0),g=a(t,"progress",7),b=a(t,"timeout",7),x=a(t,"onUpdateOpen",7),y;const F=[{status:"info",component:vo},{status:"success",component:mo},{status:"warning",component:go},{status:"error",component:fo}];function G(o){return F.find(r=>r.status===o)||F[0]}let H=j(eo(G(m()))),u=j(0),f=null,C=null;const z=()=>{c(!1),x()?.(c());const o=new CustomEvent("update:open",{detail:c(),bubbles:!0,composed:!0});y.dispatchEvent(o)};B(()=>{if(b())if(g()){const i=100/(b()/100);f=setInterval(()=>{S(u,v(u)+i),v(u)>=100&&(S(u,100),clearInterval(f),z())},100)}else C=setTimeout(()=>{z()},b())}),ko(()=>{f&&clearInterval(f),C&&clearTimeout(C)});var J={get open(){return c()},set open(o){c(o),n()},get position(){return p()},set position(o="top"){p(o),n()},get description(){return _()},set description(o){_(o),n()},get status(){return m()},set status(o="info"){m(o),n()},get closable(){return w()},set closable(o=!0){w(o),n()},get progress(){return g()},set progress(o){g(o),n()},get timeout(){return b()},set timeout(o){b(o),n()},get onUpdateOpen(){return x()},set onUpdateOpen(o){x(o),n()}},d=xo(),I=s(d),K=s(I);uo(K,()=>v(H).component,(o,r)=>{r(o,{})}),l(I);var D=h(I,2),O=s(D),L=s(O,!0);l(O);var X=h(O,2),N=s(X);lo(N,t,"action",{}),l(X),l(D);var T=h(D,2);{var P=o=>{var r=_o();r.__click=z;var i=s(r);ho(i,{class:"mc-button__icon",slot:"icon","aria-hidden":"true"}),l(r),U(o,r)};W(T,o=>{w()&&o(P)})}var Q=h(T,2);{var R=o=>{var r=wo(),i=s(r);l(r),M(()=>{io(i,`--progress-value: ${v(u)};`),q(i,"aria-valuenow",v(u))}),U(o,r)};W(Q,o=>{g()&&o(R)})}return l(d),bo(d,o=>y=o,()=>y),M(()=>{no(d,1,co(["mc-toaster",c()&&"is-open",`mc-toaster--${m()}`,`mc-toaster--${p()}`]),"svelte-h1mguv"),q(d,"aria-hidden",!c()),so(L,_())}),U(e,d),ao(J)}$(["click"]);customElements.define("m-toaster",oo(Co,{open:{},position:{},description:{},status:{},closable:{},progress:{},timeout:{},onUpdateOpen:{}},["action"],[],!0));
+}.mc-toaster__message.svelte-h1mguv {flex:1 1 0;margin:0;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);}.mc-toaster--information.svelte-h1mguv {background:var(--toaster-color-background-info, #002a41);}.mc-toaster--information.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-info, #3facd7);}.mc-toaster--information.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);}.mc-toaster--success.svelte-h1mguv {background:var(--toaster-color-background-success, #023618);}.mc-toaster--success.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-success, #78be20);}.mc-toaster--success.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-success, #78be20);}.mc-toaster--warning.svelte-h1mguv {background:var(--toaster-color-background-warning, #360e00);}.mc-toaster--warning.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-warning, #ef934a);}.mc-toaster--warning.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-warning, #ef934a);}.mc-toaster--error.svelte-h1mguv {background:var(--toaster-color-background-error, #2d0000);}.mc-toaster--error.svelte-h1mguv .mc-toaster__icon:where(.svelte-h1mguv) {fill:var(--toaster-color-icon-error, #ef5f5c);}.mc-toaster--error.svelte-h1mguv .mc-toaster__indicator:where(.svelte-h1mguv) {--progressbar-color-indicator: var(--toaster-color-icon-error, #ef5f5c);}.mc-toaster--bottom.svelte-h1mguv {top:inherit;bottom:1.5rem;right:1.5rem;}.mc-toaster--top-center.svelte-h1mguv {top:1.5rem;right:50%;transform:translateX(50%) !important;}.mc-toaster--bottom-center.svelte-h1mguv {top:inherit;bottom:1.5rem;right:50%;transform:translateX(50%) !important;}.mc-toaster__indicator.svelte-h1mguv {width:100%;margin:0.5rem;--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);--progressbar-color-background: var(--color-background-primary, #ffffff);}.mc-toaster__close.svelte-h1mguv {margin:0.25rem;}.mc-toaster__action.svelte-h1mguv:empty {display:none;}`};function zo(e,t){to(t,!0),ro(e,Co);let c=a(t,"open",7),k=a(t,"position",7,"top"),_=a(t,"description",7),g=a(t,"status",7,"info"),w=a(t,"closable",7,!0),m=a(t,"progress",7),i=a(t,"timeout",7),x=a(t,"onUpdateOpen",7),B=ao(t,["$$slots","$$events","$$legacy","$$host","open","position","description","status","closable","progress","timeout","onUpdateOpen"]),y;const F=[{status:"info",component:go},{status:"success",component:mo},{status:"warning",component:fo},{status:"error",component:ho}];function G(o){return F.find(r=>r.status===o)||F[0]}let H=j(eo(G(g()))),u=j(0),f=null,C=null;const z=()=>{c(!1),x()?.(c());const o=new CustomEvent("update:open",{detail:c(),bubbles:!0,composed:!0});y.dispatchEvent(o)};A(()=>{if(i())if(m()){const d=100/(i()/100);f=setInterval(()=>{S(u,v(u)+d),v(u)>=100&&(S(u,100),clearInterval(f),z())},100)}else C=setTimeout(()=>{z()},i())}),ko(()=>{f&&clearInterval(f),C&&clearTimeout(C)});var J={get open(){return c()},set open(o){c(o),n()},get position(){return k()},set position(o="top"){k(o),n()},get description(){return _()},set description(o){_(o),n()},get status(){return g()},set status(o="info"){g(o),n()},get closable(){return w()},set closable(o=!0){w(o),n()},get progress(){return m()},set progress(o){m(o),n()},get timeout(){return i()},set timeout(o){i(o),n()},get onUpdateOpen(){return x()},set onUpdateOpen(o){x(o),n()}},b=yo();uo(b,()=>({class:["mc-toaster",c()&&"is-open",`mc-toaster--${g()}`,`mc-toaster--${k()}`],role:"status",tabindex:"-1","aria-hidden":!c(),...B}),void 0,void 0,void 0,"svelte-h1mguv");var I=s(b),K=s(I);lo(K,()=>v(H).component,(o,r)=>{r(o,{})}),l(I);var O=h(I,2),U=s(O),L=s(U,!0);l(U);var X=h(U,2),N=s(X);so(N,t,"action",{}),l(X),l(O);var T=h(O,2);{var P=o=>{var r=wo();r.__click=z;var d=s(r);po(d,{class:"mc-button__icon",slot:"icon","aria-hidden":"true"}),l(r),D(o,r)};W(T,o=>{w()&&o(P)})}var Q=h(T,2);{var R=o=>{var r=xo(),d=s(r);l(r),M(()=>{io(d,`--progress-value: ${v(u)};`),bo(d,"aria-valuenow",v(u))}),D(o,r)};W(Q,o=>{m()&&o(R)})}return l(b),vo(b,o=>y=o,()=>y),M(()=>co(L,_())),D(e,b),no(J)}$(["click"]);customElements.define("m-toaster",oo(zo,{open:{},position:{},description:{},status:{},closable:{},progress:{},timeout:{},onUpdateOpen:{}},["action"],[],!0));
 //# sourceMappingURL=Toaster.js.map