@mozaic-ds/web-components 1.0.0-beta.4 → 1.0.0-beta.6

package/dist/components/overlayloader/OverlayLoader.svelte

@@ -20,8 +20,11 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
 .mc-loader {
-  color: var(--loader-color-standard, #464e63);
+  color: #464e63;
   align-items: center;
   display: inline-flex;
   flex-direction: column;
@@ -51,7 +54,7 @@
   animation: animate-dash-loader 2s ease-in-out infinite;
 }
 .mc-loader__text {
-  font-size: var(--font-size-150, 1rem);
+  font-size: 1rem;
   color: currentcolor;
 }
 .mc-loader:not(.mc-loader--text-visible) .mc-loader__text {
@@ -86,13 +89,13 @@
   stroke-width: 8;
 }
 .mc-loader--accent {
-  color: var(--loader-color-accent, #117f03);
+  color: #117f03;
 }
 .mc-loader--accent .mc-loader__path {
   stroke: currentColor;
 }
 .mc-loader--inverse {
-  color: var(--loader-color-inverse, #ffffff);
+  color: #ffffff;
 }
 .mc-loader--inverse .mc-loader__path {
   stroke: currentColor;
@@ -121,7 +124,7 @@
   }
 }
 .mc-overlay {
-  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
+  background-color: rgba(0, 0, 0, 0.5);
   inset: 0;
   opacity: 0;
   position: fixed;
@@ -137,7 +140,7 @@
 }
 
 .mc-overlay-loader {
-  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
+  background-color: rgba(0, 0, 0, 0.5);
   inset: 0;
   opacity: 0;
   position: fixed;

package/dist/components/pagination/Pagination.js

@@ -1,14 +1,17 @@
-import{c as I,p as O,b as i,A as U,t as _,h,i as S,j as o,e as V,B as W,n as oe,a as ne,C as y,l as de,f as z,s as J,d as N,r as w,m as l,v as k,g as K,_ as B}from"../../custom-element.js";import{i as M}from"../../if.js";import{e as ce,i as ue}from"../../each.js";import{s as x,c as X,f as ve,d as ge}from"../../attributes.js";import"../../legacy.js";import{B as Q}from"../button/Button.js";import{I as T}from"../iconbutton/IconButton.js";import"../../slot.js";import"../loader/Loader.js";var fe=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function j(m,t){O(t,!1);let c=i(t,"id",12,void 0),u=i(t,"style",12,void 0),d=i(t,"className",12,void 0),v=i(t,"fill",12,void 0),g=i(t,"size",12,"1.5rem");var n=fe();return _(()=>{x(n,"id",c()),X(n,u()),V(n,0,W(d())),x(n,"fill",v())}),h(m,n),S({get id(){return c()},set id(a){c(a),o()},get style(){return u()},set style(a){u(a),o()},get className(){return d()},set className(a){d(a),o()},get fill(){return v()},set fill(a){v(a),o()},get size(){return g()},set size(a){g(a),o()}})}customElements.define("chevron-left-24",I(j,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var me=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414"></path></svg>');function A(m,t){O(t,!1);let c=i(t,"id",12,void 0),u=i(t,"style",12,void 0),d=i(t,"className",12,void 0),v=i(t,"fill",12,void 0),g=i(t,"size",12,"1.5rem");var n=me();return _(()=>{x(n,"id",c()),X(n,u()),V(n,0,W(d())),x(n,"fill",v())}),h(m,n),S({get id(){return c()},set id(a){c(a),o()},get style(){return u()},set style(a){u(a),o()},get className(){return d()},set className(a){d(a),o()},get fill(){return v()},set fill(a){v(a),o()},get size(){return g()},set size(a){g(a),o()}})}customElements.define("chevron-right-24",I(A,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function pe(m,t){const c=Number(m.target.value);t(c)}var be=z("<option> </option>"),he=z('<div class="mc-pagination__field"><select class="mc-select mc-pagination__select svelte-1xgspvt"></select></div>'),xe=z('<span class="mc-pagination__label svelte-1xgspvt" aria-current="page"> </span>'),we=z('<nav class="mc-pagination svelte-1xgspvt" aria-label="pagination"><!> <!> <!></nav>');const _e={hash:"svelte-1xgspvt",code:`/**
+import{c as I,p as O,b as r,q as U,t as _,h as b,i as S,j as n,e as V,u as W,n as ne,a as oe,v as y,l as ce,f as k,s as J,d as N,r as w,m as l,z,g as K,w as B}from"../../custom-element.js";import{i as M}from"../../if.js";import{e as de,i as ue}from"../../each.js";import{s as x,a as X,f as ge,d as fe}from"../../attributes.js";import"../../legacy.js";import{B as Q}from"../button/Button.js";import{I as T}from"../iconbutton/IconButton.js";import"../../slot.js";import"../loader/Loader.js";var me=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function j(v,t){O(t,!1);let d=r(t,"id",12,void 0),u=r(t,"style",12,void 0),c=r(t,"className",12,void 0),g=r(t,"fill",12,void 0),f=r(t,"size",12,"1.5rem");var o=me();return _(()=>{x(o,"id",d()),X(o,u()),V(o,0,W(c())),x(o,"fill",g())}),b(v,o),S({get id(){return d()},set id(a){d(a),n()},get style(){return u()},set style(a){u(a),n()},get className(){return c()},set className(a){c(a),n()},get fill(){return g()},set fill(a){g(a),n()},get size(){return f()},set size(a){f(a),n()}})}customElements.define("chevron-left-24",I(j,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var ve=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414"></path></svg>');function D(v,t){O(t,!1);let d=r(t,"id",12,void 0),u=r(t,"style",12,void 0),c=r(t,"className",12,void 0),g=r(t,"fill",12,void 0),f=r(t,"size",12,"1.5rem");var o=ve();return _(()=>{x(o,"id",d()),X(o,u()),V(o,0,W(c())),x(o,"fill",g())}),b(v,o),S({get id(){return d()},set id(a){d(a),n()},get style(){return u()},set style(a){u(a),n()},get className(){return c()},set className(a){c(a),n()},get fill(){return g()},set fill(a){g(a),n()},get size(){return f()},set size(a){f(a),n()}})}customElements.define("chevron-right-24",I(D,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function pe(v,t){const d=Number(v.target.value);t(d)}var he=k("<option> </option>"),be=k('<div class="mc-pagination__field"><select class="mc-select mc-pagination__select svelte-1se9xc3"></select></div>'),xe=k('<span class="mc-pagination__label svelte-1se9xc3" aria-current="page"> </span>'),we=k('<nav class="mc-pagination svelte-1se9xc3" aria-label="pagination"><!> <!> <!></nav>');const _e={hash:"svelte-1se9xc3",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-pagination.svelte-1xgspvt {align-items:center;display:flex;justify-content:center;gap:0.5rem;}.mc-pagination__label.svelte-1xgspvt {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-pagination.svelte-1se9xc3 {align-items:center;display:flex;justify-content:center;gap:0.5rem;}.mc-pagination__label.svelte-1se9xc3 {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-1xgspvt {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;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' 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");border:var(--border-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--radius-s, 0.25rem);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;background-repeat:no-repeat;background-size:1rem;}.mc-select.svelte-1xgspvt:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-select.svelte-1xgspvt: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.svelte-1xgspvt:disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' 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");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-disable string-no-newline */.mc-select.svelte-1se9xc3 {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;font-size:1rem;line-height:1.3;height:3rem;padding:0 3rem 0 0.75rem;background-position:right 1rem center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23000000' 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");border:1px solid #666666;border-radius:0.25rem;display:block;width:100%;color:#000000;background-color:#ffffff;text-overflow:ellipsis;background-repeat:no-repeat;background-size:1rem;}.mc-select.svelte-1se9xc3:hover {border-color:#4d4d4d;box-shadow:0 0 0 1px #4d4d4d;}.mc-select.svelte-1se9xc3:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-select.svelte-1se9xc3:disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23737373' 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");background-color:#d9d9d9;border-color:transparent;cursor:not-allowed;box-shadow:none;color:#737373;}
 
-/* stylelint-enable string-no-newline */`};function ye(m,t){O(t,!0),ne(m,_e);let c=i(t,"id",7),u=i(t,"value",15,1),d=i(t,"total",7,10),v=i(t,"compact",7,!1),g=i(t,"selectLabel",7,"Page selector"),n=i(t,"pagelabel",7,"of"),a=i(t,"prefixlabel",7,"Page"),f=y(de(Number(u())));const P=y(()=>l(f)<=1),L=y(()=>l(f)>=d()),Y=y(()=>Array.from({length:d()},(e,s)=>s+1));function D(){l(P)()||B(f,Number(l(f))-1)}function F(){l(L)()||B(f,Number(l(f))+1)}var C=we(),R=N(C);{var Z=e=>{{let s=k(()=>l(P)());Q(e,{iconOnly:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:D,children:(r,p)=>{j(r,{})},$$slots:{default:!0}})}},$=e=>{{let s=k(()=>l(P)());T(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:D,$$slots:{icon:(r,p)=>{j(r,{slot:"icon"})}}})}};M(R,e=>{v()?e($,!1):e(Z)})}var q=J(R,2);{var ee=e=>{var s=he(),r=N(s);r.__change=[pe,u],ce(r,21,()=>l(Y)(),ue,(p,E)=>{var b=be(),re=N(b);w(b);var G={};_((ie,H)=>{ve(b,ie),K(re,`${a()??""}
+/* stylelint-enable string-no-newline */`};function ye(v,t){O(t,!0),oe(v,_e);let d=r(t,"id",7),u=r(t,"value",15,1),c=r(t,"total",7,10),g=r(t,"compact",7,!1),f=r(t,"selectLabel",7,"Page selector"),o=r(t,"pagelabel",7,"of"),a=r(t,"prefixlabel",7,"Page"),m=y(ce(Number(u())));const P=y(()=>l(m)<=1),L=y(()=>l(m)>=c()),Y=y(()=>Array.from({length:c()},(e,s)=>s+1));function q(){l(P)()||B(m,Number(l(m))-1)}function A(){l(L)()||B(m,Number(l(m))+1)}var C=we(),F=N(C);{var Z=e=>{{let s=z(()=>l(P)());Q(e,{iconOnly:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:q,children:(i,p)=>{j(i,{})},$$slots:{default:!0}})}},$=e=>{{let s=z(()=>l(P)());T(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:q,$$slots:{icon:(i,p)=>{j(i,{slot:"icon"})}}})}};M(F,e=>{g()?e($,!1):e(Z)})}var R=J(F,2);{var ee=e=>{var s=be(),i=N(s);i.__change=[pe,u],de(i,21,()=>l(Y)(),ue,(p,E)=>{var h=he(),ie=N(h);w(h);var G={};_((re,H)=>{ge(h,re),K(ie,`${a()??""}
             ${l(E)??""}
-            ${n()??""}
-            ${d()??""}`),G!==(G=H)&&(b.value=(b.__value=H)??"")},[()=>Number(l(E))==Number(l(f)),()=>Number(l(E))]),h(p,b)}),w(r),w(s),_(()=>{x(r,"id",c()),x(r,"aria-label",g()),r.disabled=d()<=1}),ge(r,()=>l(f),p=>B(f,p)),h(e,s)},te=e=>{var s=xe(),r=N(s);w(s),_(()=>K(r,`${a()??""}
+            ${o()??""}
+            ${c()??""}`),G!==(G=H)&&(h.value=(h.__value=H)??"")},[()=>Number(l(E))==Number(l(m)),()=>Number(l(E))]),b(p,h)}),w(i),w(s),_(()=>{x(i,"id",d()),x(i,"aria-label",f()),i.disabled=c()<=1}),fe(i,()=>l(m),p=>B(m,p)),b(e,s)},te=e=>{var s=xe(),i=N(s);w(s),_(()=>K(i,`${a()??""}
       ${u()??""}
-      ${n()??""}
-      ${d()??""}`)),h(e,s)};M(q,e=>{v()?e(te,!1):e(ee)})}var ae=J(q,2);{var le=e=>{{let s=k(()=>l(L)());Q(e,{iconOnly:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:F,children:(r,p)=>{A(r,{})},$$slots:{default:!0}})}},se=e=>{{let s=k(()=>l(L)());T(e,{outlined:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:F,$$slots:{icon:(r,p)=>{A(r,{slot:"icon"})}}})}};M(ae,e=>{v()?e(se,!1):e(le)})}return w(C),h(m,C),S({get id(){return c()},set id(e){c(e),o()},get value(){return u()},set value(e=1){u(e),o()},get total(){return d()},set total(e=10){d(e),o()},get compact(){return v()},set compact(e=!1){v(e),o()},get selectLabel(){return g()},set selectLabel(e="Page selector"){g(e),o()},get pagelabel(){return n()},set pagelabel(e="of"){n(e),o()},get prefixlabel(){return a()},set prefixlabel(e="Page"){a(e),o()}})}oe(["change"]);customElements.define("m-pagination",I(ye,{id:{},value:{},total:{},compact:{},selectLabel:{},pagelabel:{},prefixlabel:{}},[],[],!0));
+      ${o()??""}
+      ${c()??""}`)),b(e,s)};M(R,e=>{g()?e(te,!1):e(ee)})}var ae=J(R,2);{var le=e=>{{let s=z(()=>l(L)());Q(e,{iconOnly:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:A,children:(i,p)=>{D(i,{})},$$slots:{default:!0}})}},se=e=>{{let s=z(()=>l(L)());T(e,{outlined:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:A,$$slots:{icon:(i,p)=>{D(i,{slot:"icon"})}}})}};M(ae,e=>{g()?e(se,!1):e(le)})}return w(C),b(v,C),S({get id(){return d()},set id(e){d(e),n()},get value(){return u()},set value(e=1){u(e),n()},get total(){return c()},set total(e=10){c(e),n()},get compact(){return g()},set compact(e=!1){g(e),n()},get selectLabel(){return f()},set selectLabel(e="Page selector"){f(e),n()},get pagelabel(){return o()},set pagelabel(e="of"){o(e),n()},get prefixlabel(){return a()},set prefixlabel(e="Page"){a(e),n()}})}ne(["change"]);customElements.define("m-pagination",I(ye,{id:{},value:{},total:{},compact:{},selectLabel:{},pagelabel:{},prefixlabel:{}},[],[],!0));
 //# sourceMappingURL=Pagination.js.map

package/dist/components/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronLeft24/ChevronLeft24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronRight24/ChevronRight24.svelte","../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'chevron-left-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'chevron-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-pagination',\n  }}\n/>\n\n<script lang=\"ts\">\n  import ChevronLeft24 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';\n  import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n\n  interface Props {\n    id: string;\n    value?: number;\n    total?: number;\n    compact?: boolean;\n    selectLabel?: string;\n    pagelabel?: string;\n    prefixlabel?: string;\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    total = 10,\n    compact = false,\n    selectLabel = 'Page selector',\n    pagelabel = 'of',\n    prefixlabel = 'Page',\n    ...events\n  }: Props = $props();\n\n  let selected = $state(Number(value));\n\n  const isFirstPage = $state(() => selected <= 1);\n  const isLastPage = $state(() => selected >= total);\n\n  const pages = $state(() => Array.from({ length: total }, (_, i) => i + 1));\n\n  function previous() {\n    if (!isFirstPage()) {\n      selected = Number(selected) - 1;\n    }\n  }\n\n  function next() {\n    if (!isLastPage()) {\n      selected = Number(selected) + 1;\n    }\n  }\n\n  function onSelectChange(event: Event) {\n    const selected = Number((event.target as HTMLSelectElement).value);\n    value = selected;\n  }\n</script>\n\n<nav class=\"mc-pagination\" aria-label=\"pagination\">\n  {#if !compact}\n    <Button\n      iconOnly\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 />\n    </Button>\n  {:else}\n    <IconButton\n      outlined\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n\n  {#if !compact}\n    <div class=\"mc-pagination__field\">\n      <select\n        {id}\n        class=\"mc-select mc-pagination__select\"\n        aria-label={selectLabel}\n        disabled={total <= 1}\n        bind:value={selected}\n        onchange={onSelectChange}\n      >\n        {#each pages() as page}\n          <option\n            value={Number(page)}\n            selected={Number(page) == Number(selected)}\n          >\n            {prefixlabel}\n            {page}\n            {pagelabel}\n            {total}\n          </option>\n        {/each}\n      </select>\n    </div>\n  {:else}\n    <span class=\"mc-pagination__label\" aria-current=\"page\">\n      {prefixlabel}\n      {value}\n      {pagelabel}\n      {total}\n    </span>\n  {/if}\n\n  {#if !compact}\n    <Button\n      iconOnly\n      aria-label=\"Next page\"\n      disabled={isLastPage()}\n      onclick={next}\n    >\n      <ChevronRight24 />\n    </Button>\n  {:else}\n    <IconButton\n      outlined\n      aria-label=\"Next page\"\n      disabled={isLastPage()}\n      onclick={next}\n    >\n      <ChevronRight24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pagination';\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","style","className","fill","size","onSelectChange","event","value","selected","$.prop","$$props","total","compact","selectLabel","pagelabel","prefixlabel","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","$$render","alternate","consequent","$.each","select","page","$.bind_select_value","$$value","alternate_1","consequent_1","alternate_2","consequent_2"],"mappings":"kxBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,+YCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,gHC8CWE,GAAeC,EAAcC,EAAA,CAC9B,MAAAC,EAAW,OAAQF,EAAM,OAA6B,KAAK,EACjEC,EAAQC,CAAQ,CAClB;;;;;;2DAxDF,sBAwBIR,EAAES,EAAAC,EAAA,KAAA,CAAA,EACFH,iBAAkB,CAAC,EACnBI,gBAAQ,EAAE,EACVC,kBAAU,EAAK,EACfC,sBAAc,eAAe,EAC7BC,oBAAY,IAAI,EAChBC,sBAAc,MAAM,EAIlBP,EAAQQ,EAAAC,GAAU,OAAOV,EAAK,CAAA,CAAA,CAAA,QAE5BW,EAAWF,EAAA,IAAAG,EAAgBX,CAAQ,GAAI,CAAC,EACxCY,EAAUJ,EAAA,IAAAG,EAAgBX,CAAQ,GAAIG,GAAK,EAE3CU,EAAqBL,EAAA,IAAA,MAAM,MAAO,OAAQL,EAAK,CAAA,EAAA,CAAKW,EAAGC,IAAMA,EAAI,CAAC,CAAA,EAE/D,SAAAC,GAAW,CACbL,EAAAD,CAAW,KACdO,EAAAjB,EAAW,OAAOW,EAAAX,CAAQ,GAAI,CAAC,CAEnC,CAES,SAAAkB,GAAO,CACTP,EAAAC,CAAU,KACbK,EAAAjB,EAAW,OAAOW,EAAAX,CAAQ,GAAI,CAAC,CAEnC,6CAacU,CAAW,EAAA,CAAA,oFACZM,0EAQCN,CAAW,EAAA,CAAA,oFACZM,yDAdPZ,EAAO,EAAAe,EAAAC,EAAA,EAAA,EAAAD,EAAAE,CAAA,2DA4BGxB,GAAcE,CAAA,EAEjBuB,GAAAC,EAAA,GAAA,IAAAZ,EAAAE,CAAK,UAAMW,IAAI,8DAKjBjB,EAAW,GAAA,EAAA;AAAA,gBACXiB,CAAI,GAAA,EAAA;AAAA,cACJlB,EAAS,GAAA,EAAA;AAAA,cACTH,EAAK,GAAA,EAAA,EAAA,2CALI,IAAA,OAAOQ,EAAAa,CAAI,CAAK,GAAA,SAAOxB,CAAQ,CAAA,EADlC,IAAA,SAAOwB,CAAI,CAAA,6DAPVnB,GAAW,EACbkB,EAAA,SAAApB,EAAK,GAAI,IACPsB,GAAAF,EAAA,IAAAZ,EAAAX,CAAQ,OAARA,EAAQ0B,CAAA,CAAA,qDAkBrBnB,EAAW,GAAA,EAAA;AAAA,QACXR,EAAK,GAAA,EAAA;AAAA,QACLO,EAAS,GAAA,EAAA;AAAA,QACTH,EAAK,GAAA,EAAA,EAAA,CAAA,kBA5BJC,EAAO,EAAAe,EAAAQ,GAAA,EAAA,EAAAR,EAAAS,EAAA,6CAoCChB,CAAU,EAAA,CAAA,gFACXM,2EAQCN,CAAU,EAAA,CAAA,gFACXM,0DAdPd,EAAO,EAAAe,EAAAU,GAAA,EAAA,EAAAV,EAAAW,EAAA,uGAvFO,EAAC,+CACX,GAAE,mDACA,GAAK,2DACD,gBAAe,uDACjB,KAAI,2DACF,OAAM,YA2BxB","x_google_ignoreList":[0,1]}
+{"version":3,"file":"Pagination.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronLeft24/ChevronLeft24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronRight24/ChevronRight24.svelte","../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'chevron-left-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'chevron-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-pagination',\n  }}\n/>\n\n<script lang=\"ts\">\n  import ChevronLeft24 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';\n  import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n\n  interface Props {\n    id: string;\n    value?: number;\n    total?: number;\n    compact?: boolean;\n    selectLabel?: string;\n    pagelabel?: string;\n    prefixlabel?: string;\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    total = 10,\n    compact = false,\n    selectLabel = 'Page selector',\n    pagelabel = 'of',\n    prefixlabel = 'Page',\n    ...events\n  }: Props = $props();\n\n  let selected = $state(Number(value));\n\n  const isFirstPage = $state(() => selected <= 1);\n  const isLastPage = $state(() => selected >= total);\n\n  const pages = $state(() => Array.from({ length: total }, (_, i) => i + 1));\n\n  function previous() {\n    if (!isFirstPage()) {\n      selected = Number(selected) - 1;\n    }\n  }\n\n  function next() {\n    if (!isLastPage()) {\n      selected = Number(selected) + 1;\n    }\n  }\n\n  function onSelectChange(event: Event) {\n    const selected = Number((event.target as HTMLSelectElement).value);\n    value = selected;\n  }\n</script>\n\n<nav class=\"mc-pagination\" aria-label=\"pagination\">\n  {#if !compact}\n    <Button\n      iconOnly\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 />\n    </Button>\n  {:else}\n    <IconButton\n      outlined\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n\n  {#if !compact}\n    <div class=\"mc-pagination__field\">\n      <select\n        {id}\n        class=\"mc-select mc-pagination__select\"\n        aria-label={selectLabel}\n        disabled={total <= 1}\n        bind:value={selected}\n        onchange={onSelectChange}\n      >\n        {#each pages() as page}\n          <option\n            value={Number(page)}\n            selected={Number(page) == Number(selected)}\n          >\n            {prefixlabel}\n            {page}\n            {pagelabel}\n            {total}\n          </option>\n        {/each}\n      </select>\n    </div>\n  {:else}\n    <span class=\"mc-pagination__label\" aria-current=\"page\">\n      {prefixlabel}\n      {value}\n      {pagelabel}\n      {total}\n    </span>\n  {/if}\n\n  {#if !compact}\n    <Button\n      iconOnly\n      aria-label=\"Next page\"\n      disabled={isLastPage()}\n      onclick={next}\n    >\n      <ChevronRight24 />\n    </Button>\n  {:else}\n    <IconButton\n      outlined\n      aria-label=\"Next page\"\n      disabled={isLastPage()}\n      onclick={next}\n    >\n      <ChevronRight24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pagination';\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","style","className","fill","size","onSelectChange","event","value","selected","$.prop","$$props","total","compact","selectLabel","pagelabel","prefixlabel","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","$$render","alternate","consequent","$.each","select","page","$.bind_select_value","$$value","alternate_1","consequent_1","alternate_2","consequent_2"],"mappings":"kxBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,+YCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,gHC8CWE,GAAeC,EAAcC,EAAA,CAC9B,MAAAC,EAAW,OAAQF,EAAM,OAA6B,KAAK,EACjEC,EAAQC,CAAQ,CAClB;;;;;;;;;2DAxDF,sBAwBIR,EAAES,EAAAC,EAAA,KAAA,CAAA,EACFH,iBAAkB,CAAC,EACnBI,gBAAQ,EAAE,EACVC,kBAAU,EAAK,EACfC,sBAAc,eAAe,EAC7BC,oBAAY,IAAI,EAChBC,sBAAc,MAAM,EAIlBP,EAAQQ,EAAAC,GAAU,OAAOV,EAAK,CAAA,CAAA,CAAA,QAE5BW,EAAWF,EAAA,IAAAG,EAAgBX,CAAQ,GAAI,CAAC,EACxCY,EAAUJ,EAAA,IAAAG,EAAgBX,CAAQ,GAAIG,GAAK,EAE3CU,EAAqBL,EAAA,IAAA,MAAM,MAAO,OAAQL,EAAK,CAAA,EAAA,CAAKW,EAAGC,IAAMA,EAAI,CAAC,CAAA,EAE/D,SAAAC,GAAW,CACbL,EAAAD,CAAW,KACdO,EAAAjB,EAAW,OAAOW,EAAAX,CAAQ,GAAI,CAAC,CAEnC,CAES,SAAAkB,GAAO,CACTP,EAAAC,CAAU,KACbK,EAAAjB,EAAW,OAAOW,EAAAX,CAAQ,GAAI,CAAC,CAEnC,6CAacU,CAAW,EAAA,CAAA,oFACZM,0EAQCN,CAAW,EAAA,CAAA,oFACZM,yDAdPZ,EAAO,EAAAe,EAAAC,EAAA,EAAA,EAAAD,EAAAE,CAAA,2DA4BGxB,GAAcE,CAAA,EAEjBuB,GAAAC,EAAA,GAAA,IAAAZ,EAAAE,CAAK,UAAMW,IAAI,8DAKjBjB,EAAW,GAAA,EAAA;AAAA,gBACXiB,CAAI,GAAA,EAAA;AAAA,cACJlB,EAAS,GAAA,EAAA;AAAA,cACTH,EAAK,GAAA,EAAA,EAAA,2CALI,IAAA,OAAOQ,EAAAa,CAAI,CAAK,GAAA,SAAOxB,CAAQ,CAAA,EADlC,IAAA,SAAOwB,CAAI,CAAA,6DAPVnB,GAAW,EACbkB,EAAA,SAAApB,EAAK,GAAI,IACPsB,GAAAF,EAAA,IAAAZ,EAAAX,CAAQ,OAARA,EAAQ0B,CAAA,CAAA,qDAkBrBnB,EAAW,GAAA,EAAA;AAAA,QACXR,EAAK,GAAA,EAAA;AAAA,QACLO,EAAS,GAAA,EAAA;AAAA,QACTH,EAAK,GAAA,EAAA,EAAA,CAAA,kBA5BJC,EAAO,EAAAe,EAAAQ,GAAA,EAAA,EAAAR,EAAAS,EAAA,6CAoCChB,CAAU,EAAA,CAAA,gFACXM,2EAQCN,CAAU,EAAA,CAAA,gFACXM,0DAdPd,EAAO,EAAAe,EAAAU,GAAA,EAAA,EAAAV,EAAAW,EAAA,uGAvFO,EAAC,+CACX,GAAE,mDACA,GAAK,2DACD,gBAAe,uDACjB,KAAI,2DACF,OAAM,YA2BxB","x_google_ignoreList":[0,1]}

package/dist/components/pagination/Pagination.svelte

@@ -134,6 +134,9 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
 .mc-pagination {
   align-items: center;
   display: flex;
@@ -156,54 +159,54 @@
   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);
+  font-size: 1rem;
+  line-height: 1.3;
   height: 3rem;
   padding: 0 3rem 0 0.75rem;
   background-position: right 1rem center;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' 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");
-  border: var(--border-s, 1px) solid var(--forms-color-border-default, #666666);
-  border-radius: var(--radius-s, 0.25rem);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23000000' 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");
+  border: 1px solid #666666;
+  border-radius: 0.25rem;
   display: block;
   width: 100%;
-  color: var(--forms-color-text-default, #000000);
-  background-color: var(--forms-color-background-default, #ffffff);
+  color: #000000;
+  background-color: #ffffff;
   text-overflow: ellipsis;
   background-repeat: no-repeat;
   background-size: 1rem;
 }
 .mc-select:hover {
-  border-color: var(--forms-color-border-hover, #4d4d4d);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
+  border-color: #4d4d4d;
+  box-shadow: 0 0 0 1px #4d4d4d;
 }
 .mc-select: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));
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
   outline: 0.125rem solid transparent;
   outline-offset: 0.125rem;
 }
 .mc-select:disabled {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' 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");
-  background-color: var(--forms-color-background-disabled, #d9d9d9);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23737373' 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");
+  background-color: #d9d9d9;
   border-color: transparent;
   cursor: not-allowed;
   box-shadow: none;
-  color: var(--forms-color-text-disabled, #737373);
+  color: #737373;
 }
 .mc-select--readonly {
-  border-color: var(--forms-color-border-read-only, #cccccc);
+  border-color: #cccccc;
   pointer-events: none;
 }
 .mc-select.is-invalid {
-  border-color: var(--forms-color-border-invalid, #ea302d);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
+  border-color: #ea302d;
+  box-shadow: 0 0 0 1px #ea302d;
 }
 .mc-select.is-invalid:hover {
-  border-color: var(--forms-color-border-invalid-hover, #c61112);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);
+  border-color: #c61112;
+  box-shadow: 0 0 0 1px #c61112;
 }
 .mc-select--s {
-  font-size: var(--font-size-100, 0.875rem);
-  line-height: var(--line-height-s, 1.3);
+  font-size: 0.875rem;
+  line-height: 1.3;
   height: 2rem;
   padding: 0 2rem 0 0.5rem;
   background-position: right 0.5rem center;

package/dist/components/passwordinput/PasswordInput.js

@@ -1,10 +1,13 @@
-import{n as D,c as E,p as G,a as I,b as o,f as B,z as K,m as i,C as W,d as c,s as C,t as L,h as S,i as A,j as r,_ as J,r as d,g as j,e as N}from"../../custom-element.js";import{i as O}from"../../if.js";import{a as Q,r as R}from"../../attributes.js";import{c as T}from"../../input.js";import{B as U}from"../button/Button.js";import"../../slot.js";import"../loader/Loader.js";function X(y,t,s){t(""),s()()}var Y=B('<div class="mc-controls-options svelte-1yhuhqf"><button class="mc-controls-options__button svelte-1yhuhqf" type="button"><svg class="mc-controls-options__icon svelte-1yhuhqf" 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-1yhuhqf"></path></svg> <span class="mc-controls-options__label svelte-1yhuhqf"> </span></button></div>'),$=B('<span class="svelte-1yhuhqf"> </span>'),ee=B("<div><input/> <!> <!></div>");const te={hash:"svelte-1yhuhqf",code:`/**
+import{n as E,c as G,p as I,a as K,b as n,f as D,D as W,m as a,v as q,d as c,s as S,t as B,h as C,i as A,j as s,w as J,r as d,g as j,e as N}from"../../custom-element.js";import{i as O}from"../../if.js";import{b as Q,r as R}from"../../attributes.js";import{c as T}from"../../input.js";import{B as U}from"../button/Button.js";import"../../slot.js";import"../loader/Loader.js";function X(f,t,i){t(""),i()()}var Y=D('<div class="mc-controls-options svelte-134wnsv"><button class="mc-controls-options__button svelte-134wnsv" type="button"><svg class="mc-controls-options__icon svelte-134wnsv" 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-134wnsv"></path></svg> <span class="mc-controls-options__label svelte-134wnsv"> </span></button></div>'),$=D('<span class="svelte-134wnsv"> </span>'),ee=D("<div><input/> <!> <!></div>");const te={hash:"svelte-134wnsv",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-password-input.svelte-1yhuhqf .mc-button:where(.svelte-1yhuhqf) {min-width:4rem;margin:0.5rem;}
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-password-input.svelte-134wnsv .mc-button:where(.svelte-134wnsv) {min-width:4rem;margin:0.5rem;}
 
-/* stylelint-disable string-no-newline */.mc-text-input.svelte-1yhuhqf {transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-radius-border, 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-1yhuhqf {background-color:transparent;border-width:0;font-family:inherit;outline:none;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[type=number].svelte-1yhuhqf {
+/* stylelint-disable string-no-newline */.mc-text-input.svelte-134wnsv {transition:box-shadow 200ms ease;background-color:#ffffff;border:1px solid #666666;border-radius:0.25rem;transition:all ease 200ms;color:#000000;display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:0.5rem;}.mc-text-input__control.svelte-134wnsv {background-color:transparent;border-width:0;font-family:inherit;outline:none;padding:0.75rem 0.6875rem;font-size:1rem;line-height:1.3;font-weight:400;flex-grow:1;}.mc-text-input__control[type=number].svelte-134wnsv {
   /* For Blink & WebKit rendering engines */
-  /* For Gecko rendering engine */appearance:textfield;}.mc-text-input__control[type=number].svelte-1yhuhqf::-webkit-inner-spin-button, .mc-text-input__control[type=number].svelte-1yhuhqf::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-text-input__control[type=search].svelte-1yhuhqf::-webkit-search-decoration, .mc-text-input__control[type=search].svelte-1yhuhqf::-webkit-search-cancel-button {appearance:none;}.mc-text-input__control.svelte-1yhuhqf::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__icon.svelte-1yhuhqf {fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-1yhuhqf: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-1yhuhqf:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-text-input.svelte-1yhuhqf:has(input:where(.svelte-1yhuhqf):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-1yhuhqf:has(input[readonly]:where(.svelte-1yhuhqf)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-1yhuhqf:has(.mc-text-input__icon:where(.svelte-1yhuhqf)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-1yhuhqf:has(.mc-text-input__icon:where(.svelte-1yhuhqf)) .mc-text-input__control:where(.svelte-1yhuhqf) {padding-inline-start:0;}.mc-text-input.svelte-1yhuhqf:has(.mc-controls-options:where(.svelte-1yhuhqf)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-1yhuhqf:has(.mc-controls-options:where(.svelte-1yhuhqf)) .mc-text-input__control:where(.svelte-1yhuhqf) {padding-inline-end:0;}.mc-text-input--s.svelte-1yhuhqf {height:2rem;}.mc-text-input.is-invalid.svelte-1yhuhqf {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-text-input.is-invalid.svelte-1yhuhqf:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);}.mc-text-input.svelte-1yhuhqf :where(.svelte-1yhuhqf) {box-sizing:border-box;}
+  /* For Gecko rendering engine */appearance:textfield;}.mc-text-input__control[type=number].svelte-134wnsv::-webkit-inner-spin-button, .mc-text-input__control[type=number].svelte-134wnsv::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-text-input__control[type=search].svelte-134wnsv::-webkit-search-decoration, .mc-text-input__control[type=search].svelte-134wnsv::-webkit-search-cancel-button {appearance:none;}.mc-text-input__control.svelte-134wnsv::placeholder {color:#666666;}.mc-text-input__icon.svelte-134wnsv {fill:#666666;height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-134wnsv:focus-within {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-text-input.svelte-134wnsv:hover:not(:focus-within) {border-color:#4d4d4d;box-shadow:0 0 0 1px #4d4d4d;}.mc-text-input.svelte-134wnsv:has(input:where(.svelte-134wnsv):disabled) {background-color:#d9d9d9;cursor:not-allowed;border-color:transparent;box-shadow:none;color:#737373;pointer-events:none;}.mc-text-input.svelte-134wnsv:has(input[readonly]:where(.svelte-134wnsv)) {border-color:#cccccc;pointer-events:none;}.mc-text-input.svelte-134wnsv:has(.mc-text-input__icon:where(.svelte-134wnsv)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-134wnsv:has(.mc-text-input__icon:where(.svelte-134wnsv)) .mc-text-input__control:where(.svelte-134wnsv) {padding-inline-start:0;}.mc-text-input.svelte-134wnsv:has(.mc-controls-options:where(.svelte-134wnsv)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-134wnsv:has(.mc-controls-options:where(.svelte-134wnsv)) .mc-text-input__control:where(.svelte-134wnsv) {padding-inline-end:0;}.mc-text-input--s.svelte-134wnsv {height:2rem;}.mc-text-input.is-invalid.svelte-134wnsv {border-color:#ea302d;box-shadow:0 0 0 1px #ea302d;}.mc-text-input.is-invalid.svelte-134wnsv:hover:not(:focus-within) {border-color:#c61112;box-shadow:0 0 0 1px #c61112;}.mc-text-input.svelte-134wnsv :where(.svelte-134wnsv) {box-sizing:border-box;}
 
-/* stylelint-enable string-no-newline */.mc-controls-options.svelte-1yhuhqf {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-1yhuhqf {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--radius-full, 100%);}.mc-controls-options__button.svelte-1yhuhqf:hover .mc-controls-options__icon:where(.svelte-1yhuhqf) {fill:var(--forms-color-icon-clear-hover, #4d4d4d);}.mc-controls-options__button.svelte-1yhuhqf: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-1yhuhqf {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-1yhuhqf, .mc-controls-options__icon.svelte-1yhuhqf {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-1yhuhqf {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-1yhuhqf {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 oe(y,t){G(t,!0),I(y,te);let s=o(t,"id",7),g=o(t,"name",7),a=o(t,"value",15,""),_=o(t,"placeholder",7,""),h=o(t,"isinvalid",7,!1),u=o(t,"disabled",7,!1),x=o(t,"readonly",7,!1),w=o(t,"isclearable",7,!1),q=o(t,"clearlabel",7,"Clear content"),f=o(t,"buttonlabel",23,()=>({show:"Show",hide:"Hide"})),k=o(t,"onclear",7),z=o(t,"ontoggle",7),F=K(t,["$$slots","$$events","$$legacy","$$host","id","name","value","placeholder","isinvalid","disabled","readonly","isclearable","clearlabel","buttonlabel","onclear","ontoggle"]),n=W(!1);function H(){J(n,!i(n)),z()(i(n))}var v=ee(),m=c(v);R(m),Q(m,()=>({class:"mc-password-input__control mc-text-input__control",id:s(),name:g(),type:i(n)?"text":"password",placeholder:_(),disabled:u(),readonly:x(),"aria-invalid":h(),...F}),void 0,void 0,"svelte-1yhuhqf");var V=C(m,2);{var M=e=>{var p=Y(),l=c(p);l.__click=[X,a,k];var b=C(c(l),2),Z=c(b,!0);d(b),d(l),d(p),L(()=>j(Z,q())),S(e,p)};O(V,e=>{w()&&a()&&e(M)})}var P=C(V,2);return U(P,{type:"button",role:"switch",tabindex:"0",get"aria-checked"(){return i(n)},size:"s",ghost:!0,get disabled(){return u()},onclick:H,children:(e,p)=>{var l=$(),b=c(l,!0);d(l),L(()=>j(b,i(n)?f().hide:f().show)),S(e,l)},$$slots:{default:!0}}),d(v),L(()=>N(v,1,`mc-password-input mc-text-input ${h()?"is-invalid":""}`,"svelte-1yhuhqf")),T(m,a),S(y,v),A({get id(){return s()},set id(e){s(e),r()},get name(){return g()},set name(e){g(e),r()},get value(){return a()},set value(e=""){a(e),r()},get placeholder(){return _()},set placeholder(e=""){_(e),r()},get isinvalid(){return h()},set isinvalid(e=!1){h(e),r()},get disabled(){return u()},set disabled(e=!1){u(e),r()},get readonly(){return x()},set readonly(e=!1){x(e),r()},get isclearable(){return w()},set isclearable(e=!1){w(e),r()},get clearlabel(){return q()},set clearlabel(e="Clear content"){q(e),r()},get buttonlabel(){return f()},set buttonlabel(e={show:"Show",hide:"Hide"}){f(e),r()},get onclear(){return k()},set onclear(e){k(e),r()},get ontoggle(){return z()},set ontoggle(e){z(e),r()}})}D(["click"]);customElements.define("m-password-input",E(oe,{id:{},name:{},value:{},placeholder:{},isinvalid:{},disabled:{},readonly:{},isclearable:{},clearlabel:{},buttonlabel:{},onclear:{},ontoggle:{}},[],[],!0));
+/* stylelint-enable string-no-newline */.mc-controls-options.svelte-134wnsv {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-134wnsv {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:100%;}.mc-controls-options__button.svelte-134wnsv:hover .mc-controls-options__icon:where(.svelte-134wnsv) {fill:#4d4d4d;}.mc-controls-options__button.svelte-134wnsv:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-controls-options__icon.svelte-134wnsv {fill:#666666;}.mc-controls-options__button.svelte-134wnsv, .mc-controls-options__icon.svelte-134wnsv {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-134wnsv {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-134wnsv {font-size:1rem;line-height:1.3;font-weight:600;color:#000000;}`};function ne(f,t){I(t,!0),K(f,te);let i=n(t,"id",7),_=n(t,"name",7),r=n(t,"value",15,""),g=n(t,"placeholder",7,""),v=n(t,"isinvalid",7,!1),u=n(t,"disabled",7,!1),x=n(t,"readonly",7,!1),y=n(t,"isclearable",7,!1),k=n(t,"clearlabel",7,"Clear content"),p=n(t,"buttonlabel",23,()=>({show:"Show",hide:"Hide"})),z=n(t,"onclear",7),L=n(t,"ontoggle",7),F=W(t,["$$slots","$$events","$$legacy","$$host","id","name","value","placeholder","isinvalid","disabled","readonly","isclearable","clearlabel","buttonlabel","onclear","ontoggle"]),l=q(!1);function H(){J(l,!a(l)),L()(a(l))}var m=ee(),w=c(m);R(w),Q(w,()=>({class:"mc-password-input__control mc-text-input__control",id:i(),name:_(),type:a(l)?"text":"password",placeholder:g(),disabled:u(),readonly:x(),"aria-invalid":v(),...F}),void 0,void 0,"svelte-134wnsv");var V=S(w,2);{var M=e=>{var b=Y(),o=c(b);o.__click=[X,r,z];var h=S(c(o),2),Z=c(h,!0);d(h),d(o),d(b),B(()=>j(Z,k())),C(e,b)};O(V,e=>{y()&&r()&&e(M)})}var P=S(V,2);return U(P,{type:"button",role:"switch",tabindex:"0",get"aria-checked"(){return a(l)},size:"s",ghost:!0,get disabled(){return u()},onclick:H,children:(e,b)=>{var o=$(),h=c(o,!0);d(o),B(()=>j(h,a(l)?p().hide:p().show)),C(e,o)},$$slots:{default:!0}}),d(m),B(()=>N(m,1,`mc-password-input mc-text-input ${v()?"is-invalid":""}`,"svelte-134wnsv")),T(w,r),C(f,m),A({get id(){return i()},set id(e){i(e),s()},get name(){return _()},set name(e){_(e),s()},get value(){return r()},set value(e=""){r(e),s()},get placeholder(){return g()},set placeholder(e=""){g(e),s()},get isinvalid(){return v()},set isinvalid(e=!1){v(e),s()},get disabled(){return u()},set disabled(e=!1){u(e),s()},get readonly(){return x()},set readonly(e=!1){x(e),s()},get isclearable(){return y()},set isclearable(e=!1){y(e),s()},get clearlabel(){return k()},set clearlabel(e="Clear content"){k(e),s()},get buttonlabel(){return p()},set buttonlabel(e={show:"Show",hide:"Hide"}){p(e),s()},get onclear(){return z()},set onclear(e){z(e),s()},get ontoggle(){return L()},set ontoggle(e){L(e),s()}})}E(["click"]);customElements.define("m-password-input",G(ne,{id:{},name:{},value:{},placeholder:{},isinvalid:{},disabled:{},readonly:{},isclearable:{},clearlabel:{},buttonlabel:{},onclear:{},ontoggle:{}},[],[],!0));
 //# 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  }}\n/>\n\n<script lang=\"ts\">\n  import Button from '../button/Button.svelte';\n  interface Props {\n    id: string;\n    name?: string;\n    value?: string | number;\n    placeholder?: string;\n    isinvalid?: boolean;\n    disabled?: boolean;\n    readonly?: boolean;\n    isclearable?: boolean;\n    clearlabel?: string;\n    buttonlabel?: {\n      show: string;\n      hide: string;\n    };\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(''),\n    placeholder = '',\n    isinvalid = false,\n    disabled = false,\n    readonly = false,\n    isclearable = false,\n    clearlabel = 'Clear content',\n    buttonlabel = { show: 'Show', hide: 'Hide' },\n    onclear,\n    ontoggle,\n    ...events\n  }: Props = $props();\n\n  let isVisible = $state(false);\n\n  function toggleVisibility() {\n    isVisible = !isVisible;\n    ontoggle(isVisible);\n  }\n\n  function clearValue() {\n    value = '';\n    onclear();\n  }\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    {...events}\n  />\n  {#if isclearable && value}\n    <div class=\"mc-controls-options\">\n      <button\n        class=\"mc-controls-options__button\"\n        type=\"button\"\n        onclick={clearValue}\n      >\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    type=\"button\"\n    role=\"switch\"\n    tabindex=\"0\"\n    aria-checked={isVisible}\n    size=\"s\"\n    ghost={true}\n    {disabled}\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/controls-options';\n</style>\n"],"names":["clearValue","_","value","onclear","id","$.prop","$$props","name","placeholder","isinvalid","disabled","readonly","isclearable","clearlabel","buttonlabel","ontoggle","events","$.rest_props","isVisible","toggleVisibility","$.set","$$render","consequent","$.template_effect","$.set_text","text_1","$.get","$$value"],"mappings":"sXAgDW,SAAAA,EAAaC,EAAAC,EAAAC,EAAA,CACpBD,EAAQ,EAAE,EACVC,IAAO,CACT;;;;;;;;o5CAnDF,qBA0BIC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJJ,iBAAkB,EAAE,EACpBM,sBAAc,EAAE,EAChBC,oBAAY,EAAK,EACjBC,mBAAW,EAAK,EAChBC,mBAAW,EAAK,EAChBC,sBAAc,EAAK,EACnBC,qBAAa,eAAe,EAC5BC,6BAAgB,KAAM,OAAQ,KAAM,MAAM,EAAA,EAC1CX,EAAOE,EAAAC,EAAA,UAAA,CAAA,EACPS,EAAQV,EAAAC,EAAA,WAAA,CAAA,EACLU,EAAAC,EAAAX,EAAA,8KAGDY,IAAmB,EAAK,EAEnB,SAAAC,GAAmB,CAC1BC,EAAAF,KAAaA,CAAS,CAAA,EACtBH,MAASG,CAAS,CAAA,CACpB,mHAaQA,CAAS,EAAG,OAAS,oEAKbT,EAAS,KACnBO,wFAOShB,EAAUE,EAAAC,CAAA,qDAQuBU,EAAU,CAAA,CAAA,kBAbrDD,EAAW,GAAIV,KAAKmB,EAAAC,CAAA,mGAsBTJ,CAAS,kBAEhB,sCAEEC,4CAEFI,EAAA,IAAAC,EAAAC,EAAAC,EAAAR,CAAS,EAAGJ,EAAW,EAAC,KAAOA,IAAY,IAAI,CAAA,qFAzCbL,EAAS,EAAG,aAAe,EAAE,GAAA,gBAAA,CAAA,6IA1BpD,GAAE,2DACN,GAAE,uDACJ,GAAK,qDACN,GAAK,qDACL,GAAK,2DACF,GAAK,yDACN,gBAAe,yCACZ,IAAA,YAAAkB,EAAA,CAAA,KAAM,OAAQ,KAAM,QAAM,oHAiB9C"}
+{"version":3,"file":"PasswordInput.js","sources":["../../../src/components/passwordinput/PasswordInput.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-password-input',\n  }}\n/>\n\n<script lang=\"ts\">\n  import Button from '../button/Button.svelte';\n  interface Props {\n    id: string;\n    name?: string;\n    value?: string | number;\n    placeholder?: string;\n    isinvalid?: boolean;\n    disabled?: boolean;\n    readonly?: boolean;\n    isclearable?: boolean;\n    clearlabel?: string;\n    buttonlabel?: {\n      show: string;\n      hide: string;\n    };\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(''),\n    placeholder = '',\n    isinvalid = false,\n    disabled = false,\n    readonly = false,\n    isclearable = false,\n    clearlabel = 'Clear content',\n    buttonlabel = { show: 'Show', hide: 'Hide' },\n    onclear,\n    ontoggle,\n    ...events\n  }: Props = $props();\n\n  let isVisible = $state(false);\n\n  function toggleVisibility() {\n    isVisible = !isVisible;\n    ontoggle(isVisible);\n  }\n\n  function clearValue() {\n    value = '';\n    onclear();\n  }\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    {...events}\n  />\n  {#if isclearable && value}\n    <div class=\"mc-controls-options\">\n      <button\n        class=\"mc-controls-options__button\"\n        type=\"button\"\n        onclick={clearValue}\n      >\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    type=\"button\"\n    role=\"switch\"\n    tabindex=\"0\"\n    aria-checked={isVisible}\n    size=\"s\"\n    ghost={true}\n    {disabled}\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/controls-options';\n</style>\n"],"names":["clearValue","_","value","onclear","id","$.prop","$$props","name","placeholder","isinvalid","disabled","readonly","isclearable","clearlabel","buttonlabel","ontoggle","events","$.rest_props","isVisible","toggleVisibility","$.set","$$render","consequent","$.template_effect","$.set_text","text_1","$.get","$$value"],"mappings":"sXAgDW,SAAAA,EAAaC,EAAAC,EAAAC,EAAA,CACpBD,EAAQ,EAAE,EACVC,IAAO,CACT;;;;;;;;;;;+oCAnDF,qBA0BIC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJJ,iBAAkB,EAAE,EACpBM,sBAAc,EAAE,EAChBC,oBAAY,EAAK,EACjBC,mBAAW,EAAK,EAChBC,mBAAW,EAAK,EAChBC,sBAAc,EAAK,EACnBC,qBAAa,eAAe,EAC5BC,6BAAgB,KAAM,OAAQ,KAAM,MAAM,EAAA,EAC1CX,EAAOE,EAAAC,EAAA,UAAA,CAAA,EACPS,EAAQV,EAAAC,EAAA,WAAA,CAAA,EACLU,EAAAC,EAAAX,EAAA,8KAGDY,IAAmB,EAAK,EAEnB,SAAAC,GAAmB,CAC1BC,EAAAF,KAAaA,CAAS,CAAA,EACtBH,MAASG,CAAS,CAAA,CACpB,mHAaQA,CAAS,EAAG,OAAS,oEAKbT,EAAS,KACnBO,wFAOShB,EAAUE,EAAAC,CAAA,qDAQuBU,EAAU,CAAA,CAAA,kBAbrDD,EAAW,GAAIV,KAAKmB,EAAAC,CAAA,mGAsBTJ,CAAS,kBAEhB,sCAEEC,4CAEFI,EAAA,IAAAC,EAAAC,EAAAC,EAAAR,CAAS,EAAGJ,EAAW,EAAC,KAAOA,IAAY,IAAI,CAAA,qFAzCbL,EAAS,EAAG,aAAe,EAAE,GAAA,gBAAA,CAAA,6IA1BpD,GAAE,2DACN,GAAE,uDACJ,GAAK,qDACN,GAAK,qDACL,GAAK,2DACF,GAAK,yDACN,gBAAe,yCACZ,IAAA,YAAAkB,EAAA,CAAA,KAAM,OAAQ,KAAM,QAAM,oHAiB9C"}

package/dist/components/passwordinput/PasswordInput.svelte

@@ -100,6 +100,9 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
 .mc-password-input .mc-button {
   min-width: 4rem;
   margin: 0.5rem;
@@ -108,11 +111,11 @@
 /* stylelint-disable string-no-newline */
 .mc-text-input {
   transition: box-shadow 200ms ease;
-  background-color: var(--forms-color-background-default, #ffffff);
-  border: var(--border-s, 1px) solid var(--forms-color-border-default, #666666);
-  border-radius: var(--forms-radius-border, 0.25rem);
+  background-color: #ffffff;
+  border: 1px solid #666666;
+  border-radius: 0.25rem;
   transition: all ease 200ms;
-  color: var(--forms-color-text-default, #000000);
+  color: #000000;
   display: block;
   width: 100%;
   height: 3rem;
@@ -127,9 +130,9 @@
   font-family: inherit;
   outline: none;
   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);
+  font-size: 1rem;
+  line-height: 1.3;
+  font-weight: 400;
   flex-grow: 1;
 }
 .mc-text-input__control[type=number] {
@@ -145,33 +148,33 @@
   appearance: none;
 }
 .mc-text-input__control::placeholder {
-  color: var(--forms-color-placeholder, #666666);
+  color: #666666;
 }
 .mc-text-input__icon {
-  fill: var(--forms-color-icon-default, #666666);
+  fill: #666666;
   height: 1.5rem;
   width: 1.5rem;
   flex-shrink: 0;
 }
 .mc-text-input: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));
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
   outline: 0.125rem solid transparent;
   outline-offset: 0.125rem;
 }
 .mc-text-input:hover:not(:focus-within) {
-  border-color: var(--forms-color-border-hover, #4d4d4d);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
+  border-color: #4d4d4d;
+  box-shadow: 0 0 0 1px #4d4d4d;
 }
 .mc-text-input:has(input:disabled) {
-  background-color: var(--forms-color-background-disabled, #d9d9d9);
+  background-color: #d9d9d9;
   cursor: not-allowed;
   border-color: transparent;
   box-shadow: none;
-  color: var(--forms-color-text-disabled, #737373);
+  color: #737373;
   pointer-events: none;
 }
 .mc-text-input:has(input[readonly]) {
-  border-color: var(--forms-color-border-read-only, #cccccc);
+  border-color: #cccccc;
   pointer-events: none;
 }
 .mc-text-input:has(.mc-text-input__icon) {
@@ -191,8 +194,8 @@
 }
 .mc-text-input--s .mc-text-input__control {
   padding: 0.375rem 0.6875rem;
-  font-size: var(--font-size-100, 0.875rem);
-  line-height: var(--line-height-s, 1.3);
+  font-size: 0.875rem;
+  line-height: 1.3;
 }
 .mc-text-input--s:has(.mc-text-input__icon) {
   padding-inline-start: 0.4375rem;
@@ -201,12 +204,12 @@
   padding-inline-end: 0.4375rem;
 }
 .mc-text-input.is-invalid {
-  border-color: var(--forms-color-border-invalid, #ea302d);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
+  border-color: #ea302d;
+  box-shadow: 0 0 0 1px #ea302d;
 }
 .mc-text-input.is-invalid:hover:not(:focus-within) {
-  border-color: var(--forms-color-border-invalid-hover, #c61112);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);
+  border-color: #c61112;
+  box-shadow: 0 0 0 1px #c61112;
 }
 .mc-text-input * {
   box-sizing: border-box;
@@ -228,18 +231,18 @@
   appearance: none;
   cursor: pointer;
   padding: 0;
-  border-radius: var(--radius-full, 100%);
+  border-radius: 100%;
 }
 .mc-controls-options__button:hover .mc-controls-options__icon {
-  fill: var(--forms-color-icon-clear-hover, #4d4d4d);
+  fill: #4d4d4d;
 }
 .mc-controls-options__button: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));
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
   outline: 0.125rem solid transparent;
   outline-offset: 0.125rem;
 }
 .mc-controls-options__icon {
-  fill: var(--forms-color-icon-clear, #666666);
+  fill: #666666;
 }
 .mc-controls-options__button, .mc-controls-options__icon {
   height: 1.5rem;
@@ -256,8 +259,8 @@
   width: 1px;
 }
 .mc-controls-options__unit {
-  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);
+  font-size: 1rem;
+  line-height: 1.3;
+  font-weight: 600;
+  color: #000000;
 }</style>

package/dist/components/pincode/Pincode.js

@@ -1,6 +1,9 @@
-import{$ as T,a0 as K,a1 as R,q as Y,a2 as F,u as G,a3 as H,a4 as J,c as N,p as Q,a as U,b as p,C as A,l as S,m as a,v as V,a5 as W,f as j,z as X,o as I,h as E,i as Z,j as h,_ as z,r as $,t as ee,e as te}from"../../custom-element.js";import{e as re,i as oe}from"../../each.js";import{a as ae,C as se,r as ne,s as C,e as ie}from"../../attributes.js";function le(r,t,{bubbles:c=!1,cancelable:d=!1}={}){return new CustomEvent(r,{detail:t,bubbles:c,cancelable:d})}function ce(){const r=K;return r===null&&T(),(t,c,d)=>{var i;const s=(i=r.s.$$events)==null?void 0:i[t];if(s){const b=R(s)?s.slice():[s],v=le(t,c,d);for(const g of b)g.call(r.x,v);return!v.defaultPrevented}return!0}}function L(r,t){return r===t||(r==null?void 0:r[J])===t}function de(r={},t,c,d){return Y(()=>{var s,i;return F(()=>{s=i,i=(d==null?void 0:d())||[],G(()=>{r!==c(...i)&&(t(r,...i),s&&L(c(...s),r)&&t(null,...s))})}),()=>{H(()=>{i&&L(c(...i),r)&&t(null,...i)})}}),r}function ue(r){return function(...t){var c=t[0];return c.preventDefault(),r==null?void 0:r.apply(this,t)}}var fe=j('<input type="text" inputmode="numeric" maxlength="1" pattern="\\d*" autocomplete="one-time-code"/>'),ve=j("<div></div>");const me={hash:"svelte-u9qvms",code:`/**
+import{x as T,$ as K,y as R,a0 as Y,a1 as F,c as G,p as H,a as J,b as p,v as S,l as E,m as s,z as N,a2 as Q,w as L,f as q,D as U,o as A,h as j,i as V,j as g,r as W,t as X,e as Z}from"../../custom-element.js";import{c as $}from"../../index-client.js";import{e as ee,i as te}from"../../each.js";import{b as ne,C as ae,r as se,s as z,e as re}from"../../attributes.js";function M(a,n){return a===n||(a==null?void 0:a[F])===n}function ie(a={},n,d,f){return T(()=>{var l,o;return K(()=>{l=o,o=(f==null?void 0:f())||[],R(()=>{a!==d(...o)&&(n(a,...o),l&&M(d(...l),a)&&n(null,...l))})}),()=>{Y(()=>{o&&M(d(...o),a)&&n(null,...o)})}}),a}function oe(a){return function(...n){var d=n[0];return d.preventDefault(),a==null?void 0:a.apply(this,n)}}var le=q('<input type="text" inputmode="numeric" maxlength="1" pattern="\\d*" autocomplete="one-time-code"/>'),ce=q("<div></div>");const de={hash:"svelte-kgmgk5",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-pincode-input.svelte-u9qvms {display:inline-flex;column-gap:0.5rem;}
-@media screen and (width <= 1024px) {.mc-pincode-input.svelte-u9qvms {flex-wrap:wrap;row-gap:0.75rem;}
-}.mc-pincode-input__control.svelte-u9qvms {font-size:var(--font-size-400, 1.75rem);transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-radius-border, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:3rem;box-sizing:border-box;height:4rem;text-align:center;line-height:var(--line-height-s, 1.3);}.mc-pincode-input__control.svelte-u9qvms::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-pincode-input__control.svelte-u9qvms: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-pincode-input__control.svelte-u9qvms:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-pincode-input__control.svelte-u9qvms: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-pincode-input__control.is-invalid.svelte-u9qvms {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-pincode-input__control.is-invalid.svelte-u9qvms:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);}`};function pe(r,t){Q(t,!0),U(r,me);const c=ce();let d=p(t,"id",7),s=p(t,"length",7,6),i=p(t,"name",7),b=p(t,"value",7,""),v=p(t,"isInvalid",7,!1),g=p(t,"disabled",7,!1),q=p(t,"readonly",7,!1),M=X(t,["$$slots","$$events","$$legacy","$$host","id","length","name","value","isInvalid","disabled","readonly"]);const f=V(()=>typeof s()=="string"?parseInt(s(),10)||6:s());let m=A(S(Array(a(f)).fill(""))),k=A(S([]));W(()=>{const e=String(b()??"");z(m,Array.from({length:a(f)},(o,l)=>e[l]??""),!0)});function _(e){queueMicrotask(()=>{var o,l;return(l=(o=a(k))==null?void 0:o[e])==null?void 0:l.focus()})}function D(){const e=a(m).join("");c("input",{value:e}),c("change",{value:e})}function P(e,o){const n=e.target.value.replace(/\D/g,"").slice(0,1);a(m)[o]=n,D(),n&&o+1<a(f)&&_(o+1)}function B(e,o){e.key==="ArrowLeft"&&o>0?(e.preventDefault(),_(o-1)):e.key==="ArrowRight"&&o<a(f)-1?(e.preventDefault(),_(o+1)):e.key==="Backspace"&&a(m)[o]===""&&o>0&&(a(m)[o-1]="",D(),_(o-1))}function O(e){var l;e.preventDefault();const o=(((l=e.clipboardData)==null?void 0:l.getData("text"))??"").replace(/\D/g,"").slice(0,a(f));z(m,Array.from({length:a(f)},(n,w)=>o[w]??""),!0),D(),_(Math.min(o.length,a(f)-1))}var y=ve();return ae(y,e=>({class:"mc-pincode-input",...M,[se]:e}),[()=>({"is-invalid":v()})],void 0,"svelte-u9qvms"),re(y,21,()=>Array(a(f)),oe,(e,o,l)=>{var n=fe();ne(n),C(n,"id",`pincodeItem${l}`);let w;de(n,(u,x)=>a(k)[x]=u,u=>{var x;return(x=a(k))==null?void 0:x[u]},()=>[l]),ee(u=>{w=te(n,1,"mc-pincode-input__control svelte-u9qvms",null,w,u),C(n,"name",i()??`pincode-${d()}`),n.disabled=g(),n.readOnly=q(),ie(n,a(m)[l])},[()=>({"is-invalid":v()})]),I("input",n,u=>P(u,l)),I("keydown",n,u=>B(u,l)),E(e,n)}),$(y),I("paste",y,ue(O)),E(r,y),Z({get id(){return d()},set id(e){d(e),h()},get length(){return s()},set length(e=6){s(e),h()},get name(){return i()},set name(e){i(e),h()},get value(){return b()},set value(e=""){b(e),h()},get isInvalid(){return v()},set isInvalid(e=!1){v(e),h()},get disabled(){return g()},set disabled(e=!1){g(e),h()},get readonly(){return q()},set readonly(e=!1){q(e),h()}})}customElements.define("m-pincode",N(pe,{id:{},length:{},name:{},value:{},isInvalid:{},disabled:{},readonly:{}},[],[],!0));
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-pincode-input.svelte-kgmgk5 {display:inline-flex;column-gap:0.5rem;}
+@media screen and (width <= 1024px) {.mc-pincode-input.svelte-kgmgk5 {flex-wrap:wrap;row-gap:0.75rem;}
+}.mc-pincode-input__control.svelte-kgmgk5 {font-size:1.75rem;transition:box-shadow 200ms ease;background-color:#ffffff;border:1px solid #666666;border-radius:0.25rem;transition:all ease 200ms;color:#000000;display:block;width:3rem;box-sizing:border-box;height:4rem;text-align:center;line-height:1.3;}.mc-pincode-input__control.svelte-kgmgk5::placeholder {color:#666666;}.mc-pincode-input__control.svelte-kgmgk5:focus-within {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-pincode-input__control.svelte-kgmgk5:hover:not(:focus-within) {border-color:#4d4d4d;box-shadow:0 0 0 1px #4d4d4d;}.mc-pincode-input__control.svelte-kgmgk5:disabled {background-color:#d9d9d9;cursor:not-allowed;border-color:transparent;box-shadow:none;color:#737373;pointer-events:none;}.mc-pincode-input__control.is-invalid.svelte-kgmgk5 {border-color:#ea302d;box-shadow:0 0 0 1px #ea302d;}.mc-pincode-input__control.is-invalid.svelte-kgmgk5:hover:not(:focus-within) {border-color:#c61112;box-shadow:0 0 0 1px #c61112;}`};function ue(a,n){H(n,!0),J(a,de);const d=$();let f=p(n,"id",7),l=p(n,"length",7,6),o=p(n,"name",7),w=p(n,"value",7,""),k=p(n,"isInvalid",7,!1),_=p(n,"disabled",7,!1),D=p(n,"readonly",7,!1),B=U(n,["$$slots","$$events","$$legacy","$$host","id","length","name","value","isInvalid","disabled","readonly"]);const u=N(()=>typeof l()=="string"?parseInt(l(),10)||6:l());let m=S(E(Array(s(u)).fill(""))),x=S(E([]));Q(()=>{const e=String(w()??"");L(m,Array.from({length:s(u)},(t,i)=>e[i]??""),!0)});function v(e){queueMicrotask(()=>{var t,i;return(i=(t=s(x))==null?void 0:t[e])==null?void 0:i.focus()})}function I(){const e=s(m).join("");d("input",{value:e}),d("change",{value:e})}function C(e,t){const r=e.target.value.replace(/\D/g,"").slice(0,1);s(m)[t]=r,I(),r&&t+1<s(u)&&v(t+1)}function O(e,t){e.key==="ArrowLeft"&&t>0?(e.preventDefault(),v(t-1)):e.key==="ArrowRight"&&t<s(u)-1?(e.preventDefault(),v(t+1)):e.key==="Backspace"&&s(m)[t]===""&&t>0&&(s(m)[t-1]="",I(),v(t-1))}function P(e){var i;e.preventDefault();const t=(((i=e.clipboardData)==null?void 0:i.getData("text"))??"").replace(/\D/g,"").slice(0,s(u));L(m,Array.from({length:s(u)},(r,b)=>t[b]??""),!0),I(),v(Math.min(t.length,s(u)-1))}var h=ce();return ne(h,e=>({class:"mc-pincode-input",...B,[ae]:e}),[()=>({"is-invalid":k()})],void 0,"svelte-kgmgk5"),ee(h,21,()=>Array(s(u)),te,(e,t,i)=>{var r=le();se(r),z(r,"id",`pincodeItem${i}`);let b;ie(r,(c,y)=>s(x)[y]=c,c=>{var y;return(y=s(x))==null?void 0:y[c]},()=>[i]),X(c=>{b=Z(r,1,"mc-pincode-input__control svelte-kgmgk5",null,b,c),z(r,"name",o()??`pincode-${f()}`),r.disabled=_(),r.readOnly=D(),re(r,s(m)[i])},[()=>({"is-invalid":k()})]),A("input",r,c=>C(c,i)),A("keydown",r,c=>O(c,i)),j(e,r)}),W(h),A("paste",h,oe(P)),j(a,h),V({get id(){return f()},set id(e){f(e),g()},get length(){return l()},set length(e=6){l(e),g()},get name(){return o()},set name(e){o(e),g()},get value(){return w()},set value(e=""){w(e),g()},get isInvalid(){return k()},set isInvalid(e=!1){k(e),g()},get disabled(){return _()},set disabled(e=!1){_(e),g()},get readonly(){return D()},set readonly(e=!1){D(e),g()}})}customElements.define("m-pincode",G(ue,{id:{},length:{},name:{},value:{},isInvalid:{},disabled:{},readonly:{}},[],[],!0));
 //# sourceMappingURL=Pincode.js.map