@mozaic-ds/web-components 1.6.0 → 1.7.0

package/dist/components/overlay/Overlay.js

@@ -1,4 +1,4 @@
-import{c as m,e as p,a as y,p as r,t as u,b as f,d as g,f as _,j as v,i as n,r as d,s as h,h as x}from"../../custom-element.js";import{s as k}from"../../slot.js";import{s as z}from"../../attributes.js";var O=_('<div><div role="dialog" tabindex="-1"><!></div></div>');const j={hash:"svelte-smp867",code:`/**
+import{c as m,e as p,a as y,p as r,t as u,b as f,d as g,f as _,h as v,m as n,r as d,j as h,l as x}from"../../custom-element.js";import{s as k}from"../../slot.js";import{s as z}from"../../attributes.js";var O=_('<div><div role="dialog" tabindex="-1"><!></div></div>');const j={hash:"svelte-smp867",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-overlay.svelte-smp867 {background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:var(--overlay-z-index, 2);}.mc-overlay.is-visible.svelte-smp867 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function w(o,e){p(e,!0),y(o,j);let s=r(e,"isvisible",7),a=r(e,"dialoglabel",7);var b={get isvisible(){return s()},set isvisible(l){s(l),n()},get dialoglabel(){return a()},set dialoglabel(l){a(l),n()}},i=O(),t=v(i),c=v(t);return k(c,e,"default",{},null),d(t),d(i),u(()=>{h(i,1,x(["mc-overlay",s()&&"is-visible"]),"svelte-smp867"),z(t,"aria-labelledby",a())}),f(o,i),g(b)}customElements.define("m-overlay",m(w,{isvisible:{attribute:"isvisible",reflect:!0,type:"Boolean"},dialoglabel:{}},["default"],[],{mode:"open"}));export{w as O};
+ */.mc-overlay.svelte-smp867 {background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:var(--overlay-z-index, 4);}.mc-overlay.is-visible.svelte-smp867 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function w(o,e){p(e,!0),y(o,j);let s=r(e,"isvisible",7),a=r(e,"dialoglabel",7);var b={get isvisible(){return s()},set isvisible(l){s(l),n()},get dialoglabel(){return a()},set dialoglabel(l){a(l),n()}},i=O(),t=v(i),c=v(t);return k(c,e,"default",{},null),d(t),d(i),u(()=>{h(i,1,x(["mc-overlay",s()&&"is-visible"]),"svelte-smp867"),z(t,"aria-labelledby",a())}),f(o,i),g(b)}customElements.define("m-overlay",m(w,{isvisible:{attribute:"isvisible",reflect:!0,type:"Boolean"},dialoglabel:{}},["default"],[],{mode:"open"}));export{w as O};
 //# sourceMappingURL=Overlay.js.map

package/dist/components/overlay/Overlay.svelte

@@ -43,7 +43,7 @@
   position: fixed;
   pointer-events: none;
   transition: opacity 0.4s ease, visibility 0ms 0.4s;
-  z-index: var(--overlay-z-index, 2);
+  z-index: var(--overlay-z-index, 4);
 }
 .mc-overlay.is-visible {
   opacity: 1;
@@ -59,7 +59,7 @@
   position: fixed;
   pointer-events: none;
   transition: opacity 0.4s ease, visibility 0ms 0.4s;
-  z-index: var(--overlay-z-index, 2);
+  z-index: var(--overlay-z-index, 4);
 }
 .mc-overlay-loader.is-visible {
   opacity: 1;

package/dist/components/pageheader/PageHeader.js

@@ -1,4 +1,4 @@
-import{c as Z,e as $,a as ee,p as s,k as i,t as F,b as E,d as te,f as P,j as a,i as o,r as n,s as ae,h as ne,m as G}from"../../custom-element.js";import{i as g}from"../../if.js";import{s as j}from"../../slot.js";import{b as re}from"../../this.js";import{I as J}from"../iconbutton/IconButton.js";import{S as se}from"../statusbadge/StatusBadge.js";import{t as oe,A as le}from"../../Condition20.js";import"../../branches.js";import"../../attributes.js";import"../loader/Loader.js";import"../statusdot/StatusDot.js";var ie=P('<span class="mc-page-header__extra-info svelte-nslnrx"> </span>'),de=P('<div class="mc-page-header__info-wrapper svelte-nslnrx"><!> <!></div>'),ce=P('<div><div class="mc-page-header__top-wrapper svelte-nslnrx"><div class="mc-page-header__top-content svelte-nslnrx"><!> <div class="mc-page-header__content-wrapper svelte-nslnrx"><span class="mc-page-header__title svelte-nslnrx"> </span> <!> <!></div></div> <div class="mc-page-header__actions-wrapper svelte-nslnrx"><span class="mc-page-header__burger-menu svelte-nslnrx"><!></span> <div class="mc-page-header__actions-content svelte-nslnrx"><!></div></div></div> <div class="mc-page-header__tabs svelte-nslnrx"><!></div></div>');const me={hash:"svelte-nslnrx",code:`/**
+import{c as Z,e as $,a as ee,p as s,s as i,t as F,b as E,d as te,f as P,h as a,m as o,r as n,j as ae,l as ne,k as G}from"../../custom-element.js";import{i as g}from"../../if.js";import{s as j}from"../../slot.js";import{b as re}from"../../this.js";import{I as J}from"../iconbutton/IconButton.js";import{S as se}from"../statusbadge/StatusBadge.js";import{t as oe,A as le}from"../../Condition20.js";import"../../branches.js";import"../../attributes.js";import"../loader/Loader.js";import"../statusdot/StatusDot.js";var ie=P('<span class="mc-page-header__extra-info svelte-nslnrx"> </span>'),de=P('<div class="mc-page-header__info-wrapper svelte-nslnrx"><!> <!></div>'),ce=P('<div><div class="mc-page-header__top-wrapper svelte-nslnrx"><div class="mc-page-header__top-content svelte-nslnrx"><!> <div class="mc-page-header__content-wrapper svelte-nslnrx"><span class="mc-page-header__title svelte-nslnrx"> </span> <!> <!></div></div> <div class="mc-page-header__actions-wrapper svelte-nslnrx"><span class="mc-page-header__burger-menu svelte-nslnrx"><!></span> <div class="mc-page-header__actions-content svelte-nslnrx"><!></div></div></div> <div class="mc-page-header__tabs svelte-nslnrx"><!></div></div>');const me={hash:"svelte-nslnrx",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-page-header.svelte-nslnrx,
 .mc-page-header.svelte-nslnrx :host {--tabs-list-padding: 0.5rem 1rem;}

package/dist/components/pagination/Pagination.js

@@ -1,14 +1,14 @@
-import{o as oe,c as re,e as le,a as se,p as n,v as b,g as ie,k as D,b as h,d as ne,f as x,j as u,i as c,l as t,r as m,t as $,u as ce,q as E,m as F,w as _}from"../../custom-element.js";import{i as B}from"../../if.js";import{e as de,i as me}from"../../each.js";import{s as R,d as ve,f as pe}from"../../attributes.js";import{s as Y,g as G}from"../../Condition20.js";import{B as H}from"../button/Button.js";import{I as J}from"../iconbutton/IconButton.js";import"../../branches.js";import"../../slot.js";import"../../this.js";import"../loader/Loader.js";var ue=x("<option> </option>"),ge=x('<div class="mc-pagination__field"><div class="mc-select mc-pagination__select svelte-19eta05"><select class="mc-select__control svelte-19eta05"></select></div></div>'),fe=x('<span class="mc-pagination__label svelte-19eta05" aria-current="page"> </span>'),be=x('<nav class="mc-pagination svelte-19eta05" aria-label="pagination"><!> <!> <!></nav>');const he={hash:"svelte-19eta05",code:`/**
+import{o as oe,c as re,e as le,a as se,p as n,v as b,g as ie,s as D,b as h,d as ne,f as x,h as u,m as c,i as t,r as m,t as $,k as F,u as ce,q as E,w as _}from"../../custom-element.js";import{i as B}from"../../if.js";import{e as de,i as me}from"../../each.js";import{f as ve,s as R,d as pe}from"../../attributes.js";import{s as Y,g as G}from"../../Condition20.js";import{B as H}from"../button/Button.js";import{I as J}from"../iconbutton/IconButton.js";import"../../branches.js";import"../../slot.js";import"../../this.js";import"../loader/Loader.js";var ue=x("<option> </option>"),ge=x('<div class="mc-pagination__field"><div class="mc-select mc-pagination__select svelte-19eta05"><select class="mc-select__control svelte-19eta05"></select></div></div>'),fe=x('<span class="mc-pagination__label svelte-19eta05" aria-current="page"> </span>'),be=x('<nav class="mc-pagination svelte-19eta05" aria-label="pagination"><!> <!> <!></nav>');const he={hash:"svelte-19eta05",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-pagination.svelte-19eta05 {align-items:center;display:flex;justify-content:center;gap:0.5rem;}.mc-pagination__label.svelte-19eta05 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}
 
 /* stylelint-disable string-no-newline */.mc-select.svelte-19eta05 {position:relative;display:block;width:100%;}.mc-select.svelte-19eta05::after {content:"";pointer-events:none;position:absolute;top:50%;right:1rem;transform:translateY(-50%);width:1rem;height:1rem;background-color:var(--forms-color-icon-interactive, #000000);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E") no-repeat center/contain;}.mc-select__control.svelte-19eta05 {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);height:3rem;padding:0 3rem 0 0.75rem;background-position:right 1rem center;border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;border-radius:var(--border-radius-s, 0.25rem);}.mc-select__control.svelte-19eta05: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-select__control.svelte-19eta05: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-select__control.svelte-19eta05:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}
 
-/* stylelint-enable string-no-newline */`};function _e(z,s){le(s,!0),se(z,he);let w=n(s,"id",7),v=n(s,"value",15,1),i=n(s,"total",7,10),p=n(s,"compact",7),k=n(s,"selectLabel",7,"Page selector"),g=n(s,"prefixlabel",7,"Page"),f=n(s,"pagelabel",7,"of"),l=b(ie(Number(v())));const y=b(()=>t(l)<=1),P=b(()=>t(l)>=i()),K=b(()=>Array.from({length:i()},(e,a)=>a+1));function j(){t(y)()||E(l,Number(t(l))-1)}function I(){t(P)()||E(l,Number(t(l))+1)}function O(e){const a=Number(e.target.value);v(a)}var Q={get id(){return w()},set id(e){w(e),c()},get value(){return v()},set value(e=1){v(e),c()},get total(){return i()},set total(e=10){i(e),c()},get compact(){return p()},set compact(e){p(e),c()},get selectLabel(){return k()},set selectLabel(e="Page selector"){k(e),c()},get prefixlabel(){return g()},set prefixlabel(e="Page"){g(e),c()},get pagelabel(){return f()},set pagelabel(e="of"){f(e),c()}},C=be(),M=u(C);{var T=e=>{{let a=_(()=>t(y)());H(e,{iconposition:"only","aria-label":"Previous page",get disabled(){return t(a)},onclick:j,$$slots:{icon:(o,r)=>{Y(o,{slot:"icon"})}}})}},U=e=>{{let a=_(()=>t(y)());J(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return t(a)},onclick:j,$$slots:{icon:(o,r)=>{Y(o,{slot:"icon"})}}})}};B(M,e=>{p()?e(U,!1):e(T)})}var S=D(M,2);{var V=e=>{var a=ge(),o=u(a),r=u(o);de(r,21,()=>t(K)(),me,(L,N)=>{var d=ue(),te=u(d);m(d);var q={};$((ae,A)=>{pe(d,ae),F(te,`${g()??""}
+/* stylelint-enable string-no-newline */`};function _e(z,s){le(s,!0),se(z,he);let w=n(s,"id",7),v=n(s,"value",15,1),i=n(s,"total",7,10),p=n(s,"compact",7),k=n(s,"selectLabel",7,"Page selector"),g=n(s,"prefixlabel",7,"Page"),f=n(s,"pagelabel",7,"of"),l=b(ie(Number(v())));const y=b(()=>t(l)<=1),P=b(()=>t(l)>=i()),K=b(()=>Array.from({length:i()},(e,a)=>a+1));function I(){t(y)()||E(l,Number(t(l))-1)}function M(){t(P)()||E(l,Number(t(l))+1)}function O(e){const a=Number(e.target.value);v(a)}var Q={get id(){return w()},set id(e){w(e),c()},get value(){return v()},set value(e=1){v(e),c()},get total(){return i()},set total(e=10){i(e),c()},get compact(){return p()},set compact(e){p(e),c()},get selectLabel(){return k()},set selectLabel(e="Page selector"){k(e),c()},get prefixlabel(){return g()},set prefixlabel(e="Page"){g(e),c()},get pagelabel(){return f()},set pagelabel(e="of"){f(e),c()}},C=be(),S=u(C);{var T=e=>{{let a=_(()=>t(y)());H(e,{iconposition:"only","aria-label":"Previous page",get disabled(){return t(a)},onclick:I,$$slots:{icon:(o,r)=>{Y(o,{slot:"icon"})}}})}},U=e=>{{let a=_(()=>t(y)());J(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return t(a)},onclick:I,$$slots:{icon:(o,r)=>{Y(o,{slot:"icon"})}}})}};B(S,e=>{p()?e(U,-1):e(T)})}var j=D(S,2);{var V=e=>{var a=ge(),o=u(a),r=u(o);de(r,21,()=>t(K)(),me,(L,N)=>{var d=ue(),te=u(d);m(d);var q={};$((ae,A)=>{ve(d,ae),F(te,`${g()??""}
               ${t(N)??""}
               ${f()??""}
-              ${i()??""}`),q!==(q=A)&&(d.value=(d.__value=A)??"")},[()=>Number(t(N))==Number(t(l)),()=>Number(t(N))]),h(L,d)}),m(r),m(o),m(a),$(()=>{R(r,"id",w()),R(r,"aria-label",k()),r.disabled=i()<=1}),ce("change",r,O),ve(r,()=>t(l),L=>E(l,L)),h(e,a)},W=e=>{var a=fe(),o=u(a);m(a),$(()=>F(o,`${g()??""}
+              ${i()??""}`),q!==(q=A)&&(d.value=(d.__value=A)??"")},[()=>Number(t(N))==Number(t(l)),()=>Number(t(N))]),h(L,d)}),m(r),m(o),m(a),$(()=>{R(r,"id",w()),R(r,"aria-label",k()),r.disabled=i()<=1}),ce("change",r,O),pe(r,()=>t(l),L=>E(l,L)),h(e,a)},W=e=>{var a=fe(),o=u(a);m(a),$(()=>F(o,`${g()??""}
       ${v()??""}
       ${f()??""}
-      ${i()??""}`)),h(e,a)};B(S,e=>{p()?e(W,!1):e(V)})}var X=D(S,2);{var Z=e=>{{let a=_(()=>t(P)());H(e,{iconposition:"only","aria-label":"Next page",get disabled(){return t(a)},onclick:I,$$slots:{icon:(o,r)=>{G(o,{slot:"icon"})}}})}},ee=e=>{{let a=_(()=>t(P)());J(e,{outlined:!0,"aria-label":"Next page",get disabled(){return t(a)},onclick:I,$$slots:{icon:(o,r)=>{G(o,{slot:"icon"})}}})}};B(X,e=>{p()?e(ee,!1):e(Z)})}return m(C),h(z,C),ne(Q)}oe(["change"]);customElements.define("m-pagination",re(_e,{compact:{attribute:"compact",reflect:!0,type:"Boolean"},id:{},value:{},total:{},selectLabel:{},prefixlabel:{},pagelabel:{}},[],[],{mode:"open"}));
+      ${i()??""}`)),h(e,a)};B(j,e=>{p()?e(W,-1):e(V)})}var X=D(j,2);{var Z=e=>{{let a=_(()=>t(P)());H(e,{iconposition:"only","aria-label":"Next page",get disabled(){return t(a)},onclick:M,$$slots:{icon:(o,r)=>{G(o,{slot:"icon"})}}})}},ee=e=>{{let a=_(()=>t(P)());J(e,{outlined:!0,"aria-label":"Next page",get disabled(){return t(a)},onclick:M,$$slots:{icon:(o,r)=>{G(o,{slot:"icon"})}}})}};B(X,e=>{p()?e(ee,-1):e(Z)})}return m(C),h(z,C),ne(Q)}oe(["change"]);customElements.define("m-pagination",re(_e,{compact:{attribute:"compact",reflect:!0,type:"Boolean"},id:{},value:{},total:{},selectLabel:{},prefixlabel:{},pagelabel:{}},[],[],{mode:"open"}));
 //# sourceMappingURL=Pagination.js.map

package/dist/components/passwordinput/PasswordInput.js

@@ -1,9 +1,9 @@
-import{o as J,c as K,e as N,a as O,p as e,l as b,k as y,s as j,h as C,t as E,u as V,b as F,d as Q,f as M,n as R,v as T,j as n,q as U,i as r,r as c,m as H}from"../../custom-element.js";import{i as W}from"../../if.js";import{a as X,s as Y}from"../../attributes.js";import{c as $}from"../../input.js";import{c as tt}from"../../custom-element-forward-events.js";import"../../branches.js";var ot=M('<div class="mc-controls-options svelte-1luc9tv"><button class="mc-controls-options__button svelte-1luc9tv" type="button"><svg class="mc-controls-options__icon svelte-1luc9tv" 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-1luc9tv"></path></svg> <span class="mc-controls-options__label svelte-1luc9tv"> </span></button></div>'),et=M('<div><input/> <!> <button type="button" role="switch" tabindex="0"><span class="svelte-1luc9tv"> </span></button></div>');const rt={hash:"svelte-1luc9tv",code:`/**
+import{o as J,c as K,e as N,a as O,p as e,i as b,s as y,j,l as C,t as E,u as V,b as F,d as Q,f as M,n as R,v as T,h as n,q as U,m as r,r as c,k as H}from"../../custom-element.js";import{i as W}from"../../if.js";import{a as X,s as Y}from"../../attributes.js";import{c as $}from"../../input.js";import{c as tt}from"../../custom-element-forward-events.js";import"../../branches.js";var ot=M('<div class="mc-controls-options svelte-1luc9tv"><button class="mc-controls-options__button svelte-1luc9tv" type="button"><svg class="mc-controls-options__icon svelte-1luc9tv" 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-1luc9tv"></path></svg> <span class="mc-controls-options__label svelte-1luc9tv"> </span></button></div>'),et=M('<div><input/> <!> <button type="button" role="switch" tabindex="0"><span class="svelte-1luc9tv"> </span></button></div>');const rt={hash:"svelte-1luc9tv",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-password-input.svelte-1luc9tv .mc-button:where(.svelte-1luc9tv) {min-width:4rem;margin:0.5rem;}
 
-/* stylelint-disable string-no-newline */.mc-text-input.svelte-1luc9tv {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-1luc9tv {background-color:transparent;border-width:0;font-family:inherit;outline:none;}.mc-text-input__control[type=number].svelte-1luc9tv::-webkit-inner-spin-button, .mc-text-input__control[type=number].svelte-1luc9tv::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-text-input__control[type=number].svelte-1luc9tv {
+/* stylelint-disable string-no-newline */.mc-text-input.svelte-1luc9tv {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;display:flex;align-items:center;gap:0.5rem;box-sizing:border-box;}.mc-text-input__control.svelte-1luc9tv {background-color:transparent;border-width:0;font-family:inherit;outline:none;}.mc-text-input__control[type=number].svelte-1luc9tv::-webkit-inner-spin-button, .mc-text-input__control[type=number].svelte-1luc9tv::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-text-input__control[type=number].svelte-1luc9tv {
   /* For Gecko rendering engine */appearance:textfield;}.mc-text-input__control[type=search].svelte-1luc9tv::-webkit-search-decoration, .mc-text-input__control[type=search].svelte-1luc9tv::-webkit-search-cancel-button {appearance:none;}.mc-text-input__control.svelte-1luc9tv {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);color:var(--forms-color-text-default, #000000);flex-grow:1;}.mc-text-input__control.svelte-1luc9tv::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__addon.svelte-1luc9tv {font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);}.mc-text-input__icon.svelte-1luc9tv {fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-1luc9tv: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-1luc9tv: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-1luc9tv:has(input:where(.svelte-1luc9tv):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-1luc9tv:has(input[readonly]:where(.svelte-1luc9tv)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-1luc9tv:has(.mc-text-input__icon:where(.svelte-1luc9tv)), .mc-text-input.svelte-1luc9tv:has(.mc-text-input__addon:where(.svelte-1luc9tv)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-1luc9tv:has(.mc-text-input__icon:where(.svelte-1luc9tv)) .mc-text-input__control:where(.svelte-1luc9tv), .mc-text-input.svelte-1luc9tv:has(.mc-text-input__addon:where(.svelte-1luc9tv)) .mc-text-input__control:where(.svelte-1luc9tv) {padding-inline-start:0;}.mc-text-input.svelte-1luc9tv:has(.mc-controls-options:where(.svelte-1luc9tv)), .mc-text-input.svelte-1luc9tv:has(.mc-text-input__addon:where(.svelte-1luc9tv)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-1luc9tv:has(.mc-controls-options:where(.svelte-1luc9tv)) .mc-text-input__control:where(.svelte-1luc9tv), .mc-text-input.svelte-1luc9tv:has(.mc-text-input__addon:where(.svelte-1luc9tv)) .mc-text-input__control:where(.svelte-1luc9tv) {padding-inline-end:0;}.mc-text-input--s.svelte-1luc9tv {height:2rem;}.mc-text-input.is-invalid.svelte-1luc9tv {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-1luc9tv: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-1luc9tv :where(.svelte-1luc9tv) {box-sizing:border-box;}
 
-/* stylelint-enable string-no-newline */.mc-button.svelte-1luc9tv {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1luc9tv:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1luc9tv:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1luc9tv: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-1luc9tv {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, 0.25rem);}.mc-button.svelte-1luc9tv {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;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-1luc9tv {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-1luc9tv {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-1luc9tv: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-1luc9tv: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-1luc9tv {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, 0.25rem);}.mc-button--m.svelte-1luc9tv {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, 0.25rem);}.mc-button--l.svelte-1luc9tv {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, 0.25rem);}.mc-button--icon-only.svelte-1luc9tv {padding:0.25rem;}.mc-button--outlined.svelte-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1luc9tv:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1luc9tv: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-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1luc9tv:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1luc9tv: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-1luc9tv {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-1luc9tv:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-1luc9tv:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-1luc9tv: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-1luc9tv {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-1luc9tv:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-1luc9tv:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-1luc9tv: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-1luc9tv {--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-1luc9tv:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-1luc9tv:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-1luc9tv: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-1luc9tv {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--loading.svelte-1luc9tv {pointer-events:none;}.mc-button--outlined.mc-button--standard.svelte-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1luc9tv:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1luc9tv: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-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1luc9tv:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1luc9tv: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-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1luc9tv:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1luc9tv: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-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1luc9tv:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1luc9tv: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-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1luc9tv:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1luc9tv: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-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1luc9tv:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1luc9tv: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-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1luc9tv:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1luc9tv: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-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1luc9tv:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1luc9tv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-controls-options.svelte-1luc9tv {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-1luc9tv {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-1luc9tv:hover .mc-controls-options__icon:where(.svelte-1luc9tv) {fill:var(--forms-color-icon-clear-hover, #4d4d4d);}.mc-controls-options__button.svelte-1luc9tv: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-1luc9tv {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-1luc9tv, .mc-controls-options__icon.svelte-1luc9tv {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-1luc9tv {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-1luc9tv {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);}`};function lt(z,o){N(o,!0),O(z,rt);let m=e(o,"id",7),g=e(o,"name",7),a=e(o,"value",15),f=e(o,"placeholder",7),u=e(o,"isinvalid",7),s=e(o,"disabled",7),h=e(o,"readonly",7),p=e(o,"isclearable",7),k=e(o,"clearlabel",7,"Clear content"),i=e(o,"buttonlabel",23,()=>({show:"Show",hide:"Hide"})),Z=R(o,["$$slots","$$events","$$legacy","$$host","id","name","value","placeholder","isinvalid","disabled","readonly","isclearable","clearlabel","buttonlabel"]),d=T(!1);function q(){U(d,!b(d))}const D=()=>a("");var G={get id(){return m()},set id(t){m(t),r()},get name(){return g()},set name(t){g(t),r()},get value(){return a()},set value(t){a(t),r()},get placeholder(){return f()},set placeholder(t){f(t),r()},get isinvalid(){return u()},set isinvalid(t){u(t),r()},get disabled(){return s()},set disabled(t){s(t),r()},get readonly(){return h()},set readonly(t){h(t),r()},get isclearable(){return p()},set isclearable(t){p(t),r()},get clearlabel(){return k()},set clearlabel(t="Clear content"){k(t),r()},get buttonlabel(){return i()},set buttonlabel(t={show:"Show",hide:"Hide"}){i(t),r()}},v=et(),w=n(v);X(w,()=>({class:"mc-password-input__control mc-text-input__control",id:m(),name:g(),type:b(d)?"text":"password",placeholder:f(),disabled:s(),readonly:h(),"aria-invalid":u(),...Z}),void 0,void 0,void 0,"svelte-1luc9tv",!0);var B=y(w,2);{var I=t=>{var _=ot(),x=n(_),S=y(n(x),2),A=n(S,!0);c(S),c(x),c(_),E(()=>H(A,k())),V("click",x,D),F(t,_)};W(B,t=>{p()&&a()&&t(I)})}var l=y(B,2);j(l,1,C(["mc-button","mc-button--s","mc-button--ghost"]),"svelte-1luc9tv");var L=n(l),P=n(L,!0);return c(L),c(l),c(v),E(()=>{j(v,1,C(["mc-password-input","mc-text-input",u()&&"is-invalid"]),"svelte-1luc9tv"),l.disabled=s(),Y(l,"aria-checked",b(d)),H(P,b(d)?i().hide:i().show)}),$(w,a),V("click",l,q),F(z,v),Q(G)}J(["click"]);customElements.define("m-password-input",K(lt,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},isclearable:{attribute:"isclearable",reflect:!0,type:"Boolean"},id:{},name:{},value:{},placeholder:{},clearlabel:{},buttonlabel:{}},[],[],{mode:"open"},tt));
+/* stylelint-enable string-no-newline */.mc-button.svelte-1luc9tv {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1luc9tv:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1luc9tv:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1luc9tv: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-1luc9tv {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, 0.25rem);}.mc-button.svelte-1luc9tv {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;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-1luc9tv {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-1luc9tv {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-1luc9tv: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-1luc9tv: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-1luc9tv {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, 0.25rem);}.mc-button--m.svelte-1luc9tv {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, 0.25rem);}.mc-button--l.svelte-1luc9tv {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, 0.25rem);}.mc-button--icon-only.svelte-1luc9tv {padding:0.25rem;}.mc-button--outlined.svelte-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1luc9tv:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1luc9tv: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-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1luc9tv:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1luc9tv: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-1luc9tv {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-1luc9tv:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-1luc9tv:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-1luc9tv: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-1luc9tv {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-1luc9tv:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-1luc9tv:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-1luc9tv: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-1luc9tv {--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-1luc9tv:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-1luc9tv:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-1luc9tv: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-1luc9tv {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--loading.svelte-1luc9tv {pointer-events:none;}.mc-button--outlined.mc-button--standard.svelte-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1luc9tv:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1luc9tv: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-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1luc9tv:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1luc9tv: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-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1luc9tv:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1luc9tv: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-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1luc9tv:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1luc9tv: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-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1luc9tv:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1luc9tv: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-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1luc9tv:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1luc9tv: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-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1luc9tv:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1luc9tv: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-1luc9tv {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-1luc9tv:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1luc9tv:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1luc9tv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-controls-options.svelte-1luc9tv {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-1luc9tv {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-1luc9tv:hover .mc-controls-options__icon:where(.svelte-1luc9tv) {fill:var(--forms-color-icon-clear-hover, #4d4d4d);}.mc-controls-options__button.svelte-1luc9tv: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-1luc9tv {fill:var(--forms-color-icon-clear, #666666);color:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-1luc9tv, .mc-controls-options__icon.svelte-1luc9tv {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-1luc9tv {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-1luc9tv {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);}`};function lt(z,o){N(o,!0),O(z,rt);let m=e(o,"id",7),g=e(o,"name",7),a=e(o,"value",15),f=e(o,"placeholder",7),u=e(o,"isinvalid",7),s=e(o,"disabled",7),h=e(o,"readonly",7),p=e(o,"isclearable",7),k=e(o,"clearlabel",7,"Clear content"),i=e(o,"buttonlabel",23,()=>({show:"Show",hide:"Hide"})),Z=R(o,["$$slots","$$events","$$legacy","$$host","id","name","value","placeholder","isinvalid","disabled","readonly","isclearable","clearlabel","buttonlabel"]),d=T(!1);function q(){U(d,!b(d))}const D=()=>a("");var G={get id(){return m()},set id(t){m(t),r()},get name(){return g()},set name(t){g(t),r()},get value(){return a()},set value(t){a(t),r()},get placeholder(){return f()},set placeholder(t){f(t),r()},get isinvalid(){return u()},set isinvalid(t){u(t),r()},get disabled(){return s()},set disabled(t){s(t),r()},get readonly(){return h()},set readonly(t){h(t),r()},get isclearable(){return p()},set isclearable(t){p(t),r()},get clearlabel(){return k()},set clearlabel(t="Clear content"){k(t),r()},get buttonlabel(){return i()},set buttonlabel(t={show:"Show",hide:"Hide"}){i(t),r()}},v=et(),w=n(v);X(w,()=>({class:"mc-password-input__control mc-text-input__control",id:m(),name:g(),type:b(d)?"text":"password",placeholder:f(),disabled:s(),readonly:h(),"aria-invalid":u(),...Z}),void 0,void 0,void 0,"svelte-1luc9tv",!0);var B=y(w,2);{var I=t=>{var _=ot(),x=n(_),S=y(n(x),2),A=n(S,!0);c(S),c(x),c(_),E(()=>H(A,k())),V("click",x,D),F(t,_)};W(B,t=>{p()&&a()&&t(I)})}var l=y(B,2);j(l,1,C(["mc-button","mc-button--s","mc-button--ghost"]),"svelte-1luc9tv");var L=n(l),P=n(L,!0);return c(L),c(l),c(v),E(()=>{j(v,1,C(["mc-password-input","mc-text-input",u()&&"is-invalid"]),"svelte-1luc9tv"),l.disabled=s(),Y(l,"aria-checked",b(d)),H(P,b(d)?i().hide:i().show)}),$(w,a),V("click",l,q),F(z,v),Q(G)}J(["click"]);customElements.define("m-password-input",K(lt,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},isclearable:{attribute:"isclearable",reflect:!0,type:"Boolean"},id:{},name:{},value:{},placeholder:{},clearlabel:{},buttonlabel:{}},[],[],{mode:"open"},tt));
 //# sourceMappingURL=PasswordInput.js.map

package/dist/components/passwordinput/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","sources":["../../../src/components/passwordinput/PasswordInput.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-password-input',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n      isclearable: { reflect: true, type: 'Boolean', attribute: 'isclearable' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * A unique identifier for the password input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the password input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the password input field.\n     */\n    value?: string | number;\n    /**\n     * A placeholder text to show in the password input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, applies an invalid state to the password input.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the password input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the password input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the password input has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n    /**\n     * Labels of the button displayed when showing or hiding the password.\n     */\n    buttonlabel?: {\n      show: string;\n      hide: string;\n    };\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(),\n    placeholder,\n    isinvalid,\n    disabled,\n    readonly,\n    isclearable,\n    clearlabel = 'Clear content',\n    buttonlabel = { show: 'Show', hide: 'Hide' },\n    ...attrs\n  }: Props = $props();\n\n  let isVisible = $state(false);\n\n  function toggleVisibility() {\n    isVisible = !isVisible;\n  }\n\n  const resetValue = () => (value = '');\n</script>\n\n<div class={['mc-password-input', 'mc-text-input', isinvalid && 'is-invalid']}>\n  <input\n    class=\"mc-password-input__control mc-text-input__control\"\n    {id}\n    {name}\n    type={isVisible ? 'text' : 'password'}\n    bind:value\n    {placeholder}\n    {disabled}\n    {readonly}\n    aria-invalid={isinvalid}\n    {...attrs}\n  />\n  {#if isclearable && value}\n    <div class=\"mc-controls-options\">\n      <button class=\"mc-controls-options__button\" type=\"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\n  <button\n    class={['mc-button', 'mc-button--s', 'mc-button--ghost']}\n    type=\"button\"\n    role=\"switch\"\n    tabindex=\"0\"\n    {disabled}\n    aria-checked={isVisible}\n    onclick={toggleVisibility}\n  >\n    <span>{isVisible ? buttonlabel.hide : buttonlabel.show}</span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/password-input';\n  @use '@mozaic-ds/styles/components/text-input';\n  @use '@mozaic-ds/styles/components/button';\n  @use '@mozaic-ds/styles/components/controls-options';\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","isinvalid","disabled","readonly","isclearable","clearlabel","buttonlabel","attrs","$.rest_props","isVisible","$.state","toggleVisibility","$.set","resetValue","$$value","div","root","input","$.child","node","$.sibling","div_1","root_1","button","span","$.delegated","$$render","consequent","button_1","$.set_class","$.clsx","span_1","$.reset","$.set_attribute","$.get","$.set_text","text_1","$.bind_value","customElementForwardEvents"],"mappings":";;;;;;;syZAaA,qBAqDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,EAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAWR,EAAAC,EAAA,cAAA,CAAA,EACXQ,qBAAa,eAAe,EAC5BC,6BAAgB,KAAM,OAAQ,KAAM,MAAM,EAAA,EACvCC,EAAAC,EAAAX,EAAA,yJAGDY,EAAYC,EAAO,EAAK,EAEnB,SAAAC,GAAmB,CAC1BC,EAAAH,KAAaA,CAAS,CAAA,CACxB,OAEMI,EAAU,IAAUd,EAAQ,EAAE,mdAXrB,gBAAe,yCACZ,IAAA,YAAAe,EAAA,CAAA,KAAM,OAAQ,KAAM,QAAM,YAa7CC,EAAGC,GAAA,EACDC,EAAAC,EADFH,CAAG,IACDE,qEAEEtB,EAAE,OACFG,EAAI,SACCW,CAAS,EAAG,OAAS,uBAE1BT,EAAW,WACXE,EAAQ,WACRC,EAAQ,iBACKF,EAAS,KACnBM,8CAVL,IAAAY,EAAAC,EAAAH,EAAA,CAAA,iBAaEI,EAAGC,GAAA,EACDC,IADFF,CAAG,EAQCG,MAPFD,CAAM,EAAA,CAAA,MAOJC,EAAI,EAAA,IAAJA,CAAI,IAPND,CAAM,IADRF,CAAG,YAQ0ChB,EAAU,CAAA,CAAA,EAPrDoB,EAAA,QAAAF,EAAkEV,CAAU,MAD9EQ,CAAG,WADDjB,EAAW,GAAIL,KAAK2B,EAAAC,CAAA,IAcxB,IAAAC,EAAAR,EAAAD,EAAA,CAAA,EAAAU,EAAAD,EAAA,EAAAE,EAAA,CACS,YAAa,eAAgB,kBAAkB,CAAA,EAAA,gBAAA,EAQtD,IAAAC,EAAIb,EATNU,CAAA,MASEG,EAAI,EAAA,WAAJA,CAAI,EATNC,EAAAJ,CAAA,IA3BFb,CAAG,WAAHA,OAAY,oBAAqB,gBAAiBd,KAAa,iCA2B7D2B,EAAA,SAKE1B,EAAQ,EALV+B,EAAAL,EAAA,eAAAM,EAMezB,CAAS,CAAA,EAGhB0B,EAAAC,EAAAF,EAAAzB,CAAS,EAAGH,EAAW,EAAC,KAAOA,EAAW,EAAC,IAAI,IAnCvD+B,EAAApB,EAAAlB,CAAA,EA0BA0B,EAAA,QAAAG,EAOUjB,CAAgB,MAlC5BI,CAAG,MAFI,qYA7EIuB"}
+{"version":3,"file":"PasswordInput.js","sources":["../../../src/components/passwordinput/PasswordInput.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-password-input',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n      isclearable: { reflect: true, type: 'Boolean', attribute: 'isclearable' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * A unique identifier for the password input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the password input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the password input field.\n     */\n    value?: string | number;\n    /**\n     * A placeholder text to show in the password input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, applies an invalid state to the password input.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the password input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the password input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the password input has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n    /**\n     * Labels of the button displayed when showing or hiding the password.\n     */\n    buttonlabel?: {\n      show: string;\n      hide: string;\n    };\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(),\n    placeholder,\n    isinvalid,\n    disabled,\n    readonly,\n    isclearable,\n    clearlabel = 'Clear content',\n    buttonlabel = { show: 'Show', hide: 'Hide' },\n    ...attrs\n  }: Props = $props();\n\n  let isVisible = $state(false);\n\n  function toggleVisibility() {\n    isVisible = !isVisible;\n  }\n\n  const resetValue = () => (value = '');\n</script>\n\n<div class={['mc-password-input', 'mc-text-input', isinvalid && 'is-invalid']}>\n  <input\n    class=\"mc-password-input__control mc-text-input__control\"\n    {id}\n    {name}\n    type={isVisible ? 'text' : 'password'}\n    bind:value\n    {placeholder}\n    {disabled}\n    {readonly}\n    aria-invalid={isinvalid}\n    {...attrs}\n  />\n  {#if isclearable && value}\n    <div class=\"mc-controls-options\">\n      <button class=\"mc-controls-options__button\" type=\"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\n  <button\n    class={['mc-button', 'mc-button--s', 'mc-button--ghost']}\n    type=\"button\"\n    role=\"switch\"\n    tabindex=\"0\"\n    {disabled}\n    aria-checked={isVisible}\n    onclick={toggleVisibility}\n  >\n    <span>{isVisible ? buttonlabel.hide : buttonlabel.show}</span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/password-input';\n  @use '@mozaic-ds/styles/components/text-input';\n  @use '@mozaic-ds/styles/components/button';\n  @use '@mozaic-ds/styles/components/controls-options';\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","isinvalid","disabled","readonly","isclearable","clearlabel","buttonlabel","attrs","$.rest_props","isVisible","$.state","toggleVisibility","$.set","resetValue","$$value","div","root","input","$.child","node","$.sibling","div_1","root_1","button","span","$.delegated","$$render","consequent","button_1","$.set_class","$.clsx","span_1","$.reset","$.set_attribute","$.get","$.set_text","text_1","$.bind_value","customElementForwardEvents"],"mappings":";;;;;;;m1ZAaA,qBAqDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,EAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAWR,EAAAC,EAAA,cAAA,CAAA,EACXQ,qBAAa,eAAe,EAC5BC,6BAAgB,KAAM,OAAQ,KAAM,MAAM,EAAA,EACvCC,EAAAC,EAAAX,EAAA,yJAGDY,EAAYC,EAAO,EAAK,EAEnB,SAAAC,GAAmB,CAC1BC,EAAAH,KAAaA,CAAS,CAAA,CACxB,OAEMI,EAAU,IAAUd,EAAQ,EAAE,mdAXrB,gBAAe,yCACZ,IAAA,YAAAe,EAAA,CAAA,KAAM,OAAQ,KAAM,QAAM,YAa7CC,EAAGC,GAAA,EACDC,EAAAC,EADFH,CAAG,IACDE,qEAEEtB,EAAE,OACFG,EAAI,SACCW,CAAS,EAAG,OAAS,uBAE1BT,EAAW,WACXE,EAAQ,WACRC,EAAQ,iBACKF,EAAS,KACnBM,8CAVL,IAAAY,EAAAC,EAAAH,EAAA,CAAA,iBAaEI,EAAGC,GAAA,EACDC,IADFF,CAAG,EAQCG,MAPFD,CAAM,EAAA,CAAA,MAOJC,EAAI,EAAA,IAAJA,CAAI,IAPND,CAAM,IADRF,CAAG,YAQ0ChB,EAAU,CAAA,CAAA,EAPrDoB,EAAA,QAAAF,EAAkEV,CAAU,MAD9EQ,CAAG,WADDjB,EAAW,GAAIL,KAAK2B,EAAAC,CAAA,IAcxB,IAAAC,EAAAR,EAAAD,EAAA,CAAA,EAAAU,EAAAD,EAAA,EAAAE,EAAA,CACS,YAAa,eAAgB,kBAAkB,CAAA,EAAA,gBAAA,EAQtD,IAAAC,EAAIb,EATNU,CAAA,MASEG,EAAI,EAAA,WAAJA,CAAI,EATNC,EAAAJ,CAAA,IA3BFb,CAAG,WAAHA,OAAY,oBAAqB,gBAAiBd,KAAa,iCA2B7D2B,EAAA,SAKE1B,EAAQ,EALV+B,EAAAL,EAAA,eAAAM,EAMezB,CAAS,CAAA,EAGhB0B,EAAAC,EAAAF,EAAAzB,CAAS,EAAGH,EAAW,EAAC,KAAOA,EAAW,EAAC,IAAI,IAnCvD+B,EAAApB,EAAAlB,CAAA,EA0BA0B,EAAA,QAAAG,EAOUjB,CAAgB,MAlC5BI,CAAG,MAFI,qYA7EIuB"}

package/dist/components/passwordinput/PasswordInput.svelte

@@ -145,10 +145,10 @@
   display: block;
   width: 100%;
   height: 3rem;
-  box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  box-sizing: border-box;
 }
 .mc-text-input__control {
   background-color: transparent;
@@ -624,6 +624,7 @@
 }
 .mc-controls-options__icon {
   fill: var(--forms-color-icon-clear, #666666);
+  color: var(--forms-color-icon-clear, #666666);
 }
 .mc-controls-options__button, .mc-controls-options__icon {
   height: 1.5rem;