@mozaic-ds/web-components 1.2.0 → 1.4.0

package/dist/components/overlay/Overlay.svelte

@@ -1,6 +1,14 @@
-<svelte:options customElement={{ tag: 'm-overlay' }} />
+<svelte:options
+  customElement={{
+    tag: 'm-overlay',
+    props: {
+      isvisible: { reflect: true, type: 'Boolean', attribute: 'isvisible' },
+    },
+  }}
+/>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   /**
    * An overlay is a semi-transparent layer that appears on top of the main content, typically used to dim the background and focus user attention on a specific element. It is often combined with modals, popovers, or loading states to create a visual separation between the foreground and background. Overlays help prevent unintended interactions while keeping the primary content accessible.
    *
@@ -15,14 +23,22 @@
      * Accessible label for the overlay dialog.
      */
     dialoglabel: string;
+    /**
+     * Use this snippet to insert a centered content inside the overlay.
+     */
+    children?: Snippet;
   }
 
-  let { isvisible, dialoglabel }: Props = $props();
+  let { isvisible, dialoglabel, children }: Props = $props();
 </script>
 
 <div class={['mc-overlay', isvisible && 'is-visible']}>
   <div role="dialog" tabindex="-1" aria-labelledby={dialoglabel}>
-    <slot />
+    {#if children}
+      {@render children()}
+    {:else}
+      <slot />
+    {/if}
   </div>
 </div>
 

package/dist/components/overlay/Overlay.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 /**
  * An overlay is a semi-transparent layer that appears on top of the main content, typically used to dim the background and focus user attention on a specific element. It is often combined with modals, popovers, or loading states to create a visual separation between the foreground and background. Overlays help prevent unintended interactions while keeping the primary content accessible.
  *
@@ -12,6 +13,10 @@ interface Props {
      * Accessible label for the overlay dialog.
      */
     dialoglabel: string;
+    /**
+     * Use this snippet to insert a centered content inside the overlay.
+     */
+    children?: Snippet;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/components/overlay/Overlay.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/Overlay.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;CACrB;AAmBH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,OAAO;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Overlay.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/Overlay.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEpC;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6BH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,OAAO;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/components/overlay/README.md

@@ -8,6 +8,7 @@ An overlay is a semi-transparent layer that appears on top of the main content,
 |------|-------------|------|---------|
 | `isvisible` | Controls the visibility of the overlay. | `boolean` |   |
 | `dialoglabel*` | Accessible label for the overlay dialog. | `string` |   |
+| `children` | Use this snippet to insert a centered content inside the overlay. | `Snippet` |   |
 
 ## Slots
 

package/dist/components/pagination/Pagination.js

@@ -1,14 +1,14 @@
-import{c as S,p as A,b as i,z as U,t as _,i as h,j as D,k as o,e as V,g as W,v as ce,a as de,w as y,l as ue,f as z,d as N,s as K,m as l,C as k,r as w,x as B,h as O}from"../../custom-element.js";import{i as M}from"../../if.js";import{e as fe,i as ve}from"../../each.js";import{s as x,a as X,c as me,f 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 be=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(b,a){A(a,!1);let f=i(a,"id",12,void 0),d=i(a,"style",12,void 0),c=i(a,"className",12,void 0),u=i(a,"fill",12,void 0),v=i(a,"size",12,"1.5rem");var m={get id(){return f()},set id(t){f(t),o()},get style(){return d()},set style(t){d(t),o()},get className(){return c()},set className(t){c(t),o()},get fill(){return u()},set fill(t){u(t),o()},get size(){return v()},set size(t){v(t),o()}},n=be();return _(()=>{x(n,"id",f()),X(n,d()),V(n,0,W(c())),x(n,"fill",u())}),h(b,n),D(m)}customElements.define("chevron-left-24",S(j,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var pe=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 I(b,a){A(a,!1);let f=i(a,"id",12,void 0),d=i(a,"style",12,void 0),c=i(a,"className",12,void 0),u=i(a,"fill",12,void 0),v=i(a,"size",12,"1.5rem");var m={get id(){return f()},set id(t){f(t),o()},get style(){return d()},set style(t){d(t),o()},get className(){return c()},set className(t){c(t),o()},get fill(){return u()},set fill(t){u(t),o()},get size(){return v()},set size(t){v(t),o()}},n=pe();return _(()=>{x(n,"id",f()),X(n,d()),V(n,0,W(c())),x(n,"fill",u())}),h(b,n),D(m)}customElements.define("chevron-right-24",S(I,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var he=z("<option> </option>"),xe=z('<div class="mc-pagination__field"><select class="mc-select mc-pagination__select svelte-19eta05"></select></div>'),we=z('<span class="mc-pagination__label svelte-19eta05" aria-current="page"> </span>'),_e=z('<nav class="mc-pagination svelte-19eta05" aria-label="pagination"><!> <!> <!></nav>');const ye={hash:"svelte-19eta05",code:`/**
+import{u as ae,c as re,p as oe,a as le,b as n,w as p,m as se,s as D,f as b,g as ie,h as _,d as h,j as c,q as t,r as v,t as P,v as E,e as F,x}from"../../custom-element.js";import{i as B}from"../../if.js";import{e as ne,i as ce}from"../../each.js";import{s as R,c as de,e as me}from"../../attributes.js";import{m as $,f as G}from"../../Condition20.js";import{B as H}from"../button/Button.js";import{I as J}from"../iconbutton/IconButton.js";import"../../snippet.js";import"../../slot.js";import"../loader/Loader.js";var ue=_("<option> </option>"),ve=_('<div class="mc-pagination__field"><select class="mc-select mc-pagination__select svelte-19eta05"></select></div>'),ge=_('<span class="mc-pagination__label svelte-19eta05" aria-current="page"> </span>'),fe=_('<nav class="mc-pagination svelte-19eta05" aria-label="pagination"><!> <!> <!></nav>');const pe={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 {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-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;background-repeat:no-repeat;background-size:1rem;border-radius:var(--border-radius-s, 0.25rem);}.mc-select.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.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.svelte-19eta05: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-enable string-no-newline */`};function Ne(b,a){A(a,!0),de(b,ye);let f=i(a,"id",7),d=i(a,"value",15,1),c=i(a,"total",7,10),u=i(a,"compact",7),v=i(a,"selectLabel",7,"Page selector"),m=i(a,"prefixlabel",7,"Page"),n=i(a,"pagelabel",7,"of"),t=y(ue(Number(d())));const P=y(()=>l(t)<=1),L=y(()=>l(t)>=c()),Y=y(()=>Array.from({length:c()},(e,s)=>s+1));function F(){l(P)()||B(t,Number(l(t))-1)}function R(){l(L)()||B(t,Number(l(t))+1)}function Z(e){const s=Number(e.target.value);d(s)}var $={get id(){return f()},set id(e){f(e),o()},get value(){return d()},set value(e=1){d(e),o()},get total(){return c()},set total(e=10){c(e),o()},get compact(){return u()},set compact(e){u(e),o()},get selectLabel(){return v()},set selectLabel(e="Page selector"){v(e),o()},get prefixlabel(){return m()},set prefixlabel(e="Page"){m(e),o()},get pagelabel(){return n()},set pagelabel(e="of"){n(e),o()}},C=_e(),q=N(C);{var ee=e=>{{let s=k(()=>l(P)());Q(e,{iconposition:"only","aria-label":"Previous page",get disabled(){return l(s)},onclick:F,$$slots:{icon:(r,g)=>{j(r,{slot:"icon"})}}})}},te=e=>{{let s=k(()=>l(P)());T(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:F,$$slots:{icon:(r,g)=>{j(r,{slot:"icon"})}}})}};M(q,e=>{u()?e(te,!1):e(ee)})}var G=K(q,2);{var ae=e=>{var s=xe(),r=N(s);r.__change=Z,fe(r,21,()=>l(Y)(),ve,(g,E)=>{var p=he(),oe=N(p);w(p);var H={};_((ne,J)=>{ge(p,ne),O(oe,`${m()??""}
-            ${l(E)??""}
-            ${n()??""}
-            ${c()??""}`),H!==(H=J)&&(p.value=(p.__value=J)??"")},[()=>Number(l(E))==Number(l(t)),()=>Number(l(E))]),h(g,p)}),w(r),w(s),_(()=>{x(r,"id",f()),x(r,"aria-label",v()),r.disabled=c()<=1}),me(r,()=>l(t),g=>B(t,g)),h(e,s)},le=e=>{var s=we(),r=N(s);w(s),_(()=>O(r,`${m()??""}
-      ${d()??""}
-      ${n()??""}
-      ${c()??""}`)),h(e,s)};M(G,e=>{u()?e(le,!1):e(ae)})}var se=K(G,2);{var re=e=>{{let s=k(()=>l(L)());Q(e,{iconposition:"only","aria-label":"Next page",get disabled(){return l(s)},onclick:R,$$slots:{icon:(r,g)=>{I(r,{slot:"icon"})}}})}},ie=e=>{{let s=k(()=>l(L)());T(e,{outlined:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:R,$$slots:{icon:(r,g)=>{I(r,{slot:"icon"})}}})}};M(se,e=>{u()?e(ie,!1):e(re)})}return w(C),h(b,C),D($)}ce(["change"]);customElements.define("m-pagination",S(Ne,{id:{},value:{},total:{},compact:{},selectLabel:{},prefixlabel:{},pagelabel:{}},[],[],!0));
+/* stylelint-enable string-no-newline */`};function be(z,s){oe(s,!0),le(z,pe);let w=n(s,"id",7),m=n(s,"value",15,1),i=n(s,"total",7,10),u=n(s,"compact",7),k=n(s,"selectLabel",7,"Page selector"),g=n(s,"prefixlabel",7,"Page"),f=n(s,"pagelabel",7,"of"),l=p(se(Number(m())));const y=p(()=>t(l)<=1),C=p(()=>t(l)>=i()),K=p(()=>Array.from({length:i()},(e,a)=>a+1));function j(){t(y)()||E(l,Number(t(l))-1)}function I(){t(C)()||E(l,Number(t(l))+1)}function O(e){const a=Number(e.target.value);m(a)}var Q={get id(){return w()},set id(e){w(e),c()},get value(){return m()},set value(e=1){m(e),c()},get total(){return i()},set total(e=10){i(e),c()},get compact(){return u()},set compact(e){u(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()}},L=fe(),M=h(L);{var T=e=>{{const a=o=>{$(o,{})};let r=x(()=>t(y)());H(e,{iconposition:"only","aria-label":"Previous page",get disabled(){return t(r)},onclick:j,icon:a,$$slots:{icon:!0}})}},U=e=>{{const a=o=>{$(o,{})};let r=x(()=>t(y)());J(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return t(r)},onclick:j,icon:a,$$slots:{icon:!0}})}};B(M,e=>{u()?e(U,!1):e(T)})}var S=D(M,2);{var V=e=>{var a=ve(),r=h(a);r.__change=O,ne(r,21,()=>t(K)(),ce,(o,N)=>{var d=ue(),ee=h(d);v(d);var q={};P((te,A)=>{me(d,te),F(ee,`${g()??""}
+            ${t(N)??""}
+            ${f()??""}
+            ${i()??""}`),q!==(q=A)&&(d.value=(d.__value=A)??"")},[()=>Number(t(N))==Number(t(l)),()=>Number(t(N))]),b(o,d)}),v(r),v(a),P(()=>{R(r,"id",w()),R(r,"aria-label",k()),r.disabled=i()<=1}),de(r,()=>t(l),o=>E(l,o)),b(e,a)},W=e=>{var a=ge(),r=h(a);v(a),P(()=>F(r,`${g()??""}
+      ${m()??""}
+      ${f()??""}
+      ${i()??""}`)),b(e,a)};B(S,e=>{u()?e(W,!1):e(V)})}var X=D(S,2);{var Y=e=>{{const a=o=>{G(o,{})};let r=x(()=>t(C)());H(e,{iconposition:"only","aria-label":"Next page",get disabled(){return t(r)},onclick:I,icon:a,$$slots:{icon:!0}})}},Z=e=>{{const a=o=>{G(o,{})};let r=x(()=>t(C)());J(e,{outlined:!0,"aria-label":"Next page",get disabled(){return t(r)},onclick:I,icon:a,$$slots:{icon:!0}})}};B(X,e=>{u()?e(Z,!1):e(Y)})}return v(L),b(z,L),ie(Q)}ae(["change"]);customElements.define("m-pagination",re(be,{compact:{attribute:"compact",reflect:!0,type:"Boolean"},id:{},value:{},total:{},selectLabel:{},prefixlabel:{},pagelabel:{}},[],[],!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   * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pagination.\n     */\n    id: string;\n    /**\n     * The current value of the selected page.\n     */\n    value: number;\n    /**\n     * If `true`, display a compact version without the select.\n     */\n    compact?: boolean;\n    /**\n     * Total number of pages.\n     */\n    total?: number;\n    /**\n     * Accessible label for the select of the pagination.\n     */\n    selectLabel?: string;\n    /**\n     * Word displayed before the current page number.\n     */\n    prefixlabel?: string;\n    /**\n     * Word displayed between the current page number and total page number.\n     */\n    pagelabel?: string;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    total = 10,\n    compact,\n    selectLabel = 'Page selector',\n    prefixlabel = 'Page',\n    pagelabel = 'of',\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      iconposition=\"only\"\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 slot=\"icon\" />\n    </Button>\n  {:else}\n    <IconButton outlined aria-label=\"Previous page\" disabled={isFirstPage()} onclick={previous}>\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, index (index)}\n          <option value={Number(page)} selected={Number(page) == Number(selected)}>\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 iconposition=\"only\" aria-label=\"Next page\" disabled={isLastPage()} onclick={next}>\n      <ChevronRight24 slot=\"icon\" />\n    </Button>\n  {:else}\n    <IconButton outlined aria-label=\"Next page\" disabled={isLastPage()} onclick={next}>\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","$.prop","$$props","value","total","compact","selectLabel","prefixlabel","pagelabel","selected","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","onSelectChange","event","$$render","alternate","consequent","$.each","select","page","$.bind_select_value","$$value","alternate_1","consequent_1","alternate_2","consequent_2"],"mappings":"uxBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,+YCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E;;;;;;2DCPA,sBA8CIH,EAAEK,EAAAC,EAAA,KAAA,CAAA,EACFC,iBAAkB,CAAC,EACnBC,gBAAQ,EAAE,EACVC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EACPI,sBAAc,eAAe,EAC7BC,sBAAc,MAAM,EACpBC,oBAAY,IAAI,EAGdC,EAAQC,EAAAC,GAAU,OAAOR,EAAK,CAAA,CAAA,CAAA,QAE5BS,EAAWF,EAAA,IAAAG,EAAgBJ,CAAQ,GAAI,CAAC,EACxCK,EAAUJ,EAAA,IAAAG,EAAgBJ,CAAQ,GAAIL,GAAK,EAE3CW,EAAKL,EAAA,IAAgB,MAAM,MAAO,OAAQN,EAAK,CAAA,EAAA,CAAKY,EAAGC,IAAMA,EAAI,CAAC,CAAA,EAE/D,SAAAC,GAAW,CACbL,EAAAD,CAAW,KACdO,EAAAV,EAAW,OAAMI,EAACJ,CAAQ,GAAI,CAAC,CAEnC,CAES,SAAAW,GAAO,CACTP,EAAAC,CAAU,KACbK,EAAAV,EAAW,OAAMI,EAACJ,CAAQ,GAAI,CAAC,CAEnC,UAESY,EAAeC,EAAc,CAC9B,MAAAb,EAAW,OAAQa,EAAM,OAA6B,KAAK,EACjEnB,EAAQM,CAAQ,CAClB,qFA9BoB,EAAC,+CACX,GAAE,8GAEI,gBAAe,2DACf,OAAM,uDACR,KAAI,qDAiCJG,CAAW,EAAA,CAAA,4FACZM,uEAK+CN,CAAW,EAAA,CAAA,oFAAaM,yDAV9Eb,EAAO,EAAAkB,EAAAC,GAAA,EAAA,EAAAD,EAAAE,EAAA,0DAuBGJ,EAEHK,GAAAC,EAAA,GAAA,IAAAd,EAAAE,CAAK,UAAMa,IAAI,8DAEjBrB,EAAW,GAAA,EAAA;AAAA,gBACXqB,CAAI,GAAA,EAAA;AAAA,cACJpB,EAAS,GAAA,EAAA;AAAA,cACTJ,EAAK,GAAA,EAAA,EAAA,2CAJ+B,IAAA,OAAMS,EAACe,CAAI,CAAA,GAAK,SAAOnB,CAAQ,CAAA,EAAvD,IAAA,SAAOmB,CAAI,CAAA,6DANhBtB,GAAW,EACbqB,EAAA,SAAAvB,EAAK,GAAI,IACPyB,GAAAF,EAAA,IAAAd,EAAAJ,CAAQ,OAARA,EAAQqB,CAAA,CAAA,qDAerBvB,EAAW,GAAA,EAAA;AAAA,QACXJ,EAAK,GAAA,EAAA;AAAA,QACLK,EAAS,GAAA,EAAA;AAAA,QACTJ,EAAK,GAAA,EAAA,EAAA,CAAA,kBAzBJC,EAAO,EAAAkB,EAAAQ,GAAA,EAAA,EAAAR,EAAAS,EAAA,6CA8BkDlB,CAAU,EAAA,CAAA,wFAAaM,uEAI9BN,CAAU,EAAA,CAAA,gFAAaM,0DALzEf,EAAO,EAAAkB,EAAAU,GAAA,EAAA,EAAAV,EAAAW,EAAA,2BA/Cf","x_google_ignoreList":[0,1]}
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-pagination',\n    props: {\n      compact: { reflect: true, type: 'Boolean', attribute: 'compact' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { ChevronLeft24, ChevronRight24 } from '@mozaic-ds/icons-svelte';\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  /**\n   * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pagination.\n     */\n    id: string;\n    /**\n     * The current value of the selected page.\n     */\n    value: number;\n    /**\n     * If `true`, display a compact version without the select.\n     */\n    compact?: boolean;\n    /**\n     * Total number of pages.\n     */\n    total?: number;\n    /**\n     * Accessible label for the select of the pagination.\n     */\n    selectLabel?: string;\n    /**\n     * Word displayed before the current page number.\n     */\n    prefixlabel?: string;\n    /**\n     * Word displayed between the current page number and total page number.\n     */\n    pagelabel?: string;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    total = 10,\n    compact,\n    selectLabel = 'Page selector',\n    prefixlabel = 'Page',\n    pagelabel = 'of',\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      iconposition=\"only\"\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      {#snippet icon()}\n        <ChevronLeft24 />\n      {/snippet}\n    </Button>\n  {:else}\n    <IconButton outlined aria-label=\"Previous page\" disabled={isFirstPage()} onclick={previous}>\n      {#snippet icon()}\n        <ChevronLeft24 />\n      {/snippet}\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, index (index)}\n          <option value={Number(page)} selected={Number(page) == Number(selected)}>\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 iconposition=\"only\" aria-label=\"Next page\" disabled={isLastPage()} onclick={next}>\n      {#snippet icon()}\n        <ChevronRight24 />\n      {/snippet}\n    </Button>\n  {:else}\n    <IconButton outlined aria-label=\"Next page\" disabled={isLastPage()} onclick={next}>\n      {#snippet icon()}\n        <ChevronRight24 />\n      {/snippet}\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","$.prop","$$props","value","total","compact","selectLabel","prefixlabel","pagelabel","selected","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","onSelectChange","event","nav","root","icon","$$anchor","ChevronLeft24","Button","IconButton","$$render","alternate","consequent","div","root_5","select","$.child","page","option","root_6","$0","$1","$.reset","$.set_attribute","$$value","span","root_7","alternate_1","consequent_1","ChevronRight24","alternate_2","consequent_2"],"mappings":";;;;;;2DASA,uBAuCIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,iBAAkB,CAAC,EACnBC,gBAAQ,EAAE,EACVC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EACPI,sBAAc,eAAe,EAC7BC,sBAAc,MAAM,EACpBC,oBAAY,IAAI,EAGdC,EAAWC,EAAMC,GAAC,OAAOR,EAAK,CAAA,CAAA,CAAA,EAE5B,MAAAS,EAAcF,EAAM,IAAAG,EAAOJ,CAAQ,GAAI,CAAC,EACxCK,EAAaJ,EAAM,IAAAG,EAAOJ,CAAQ,GAAIL,GAAK,EAE3CW,EAAQL,EAAM,IAAO,MAAM,KAAI,CAAG,OAAQN,EAAK,IAAKY,EAAGC,IAAMA,EAAI,CAAC,CAAA,EAE/D,SAAAC,GAAW,CACbL,EAAAD,CAAW,KACdO,EAAAV,EAAW,OAAMI,EAACJ,CAAQ,GAAI,CAAC,CAEnC,CAES,SAAAW,GAAO,CACTP,EAAAC,CAAU,KACbK,EAAAV,EAAW,OAAMI,EAACJ,CAAQ,GAAI,CAAC,CAEnC,UAESY,EAAeC,EAAc,CAC9B,MAAAb,EAAW,OAAQa,EAAM,OAA6B,KAAK,EACjEnB,EAAQM,CAAQ,CAClB,qFA9BoB,EAAC,+CACX,GAAE,8GAEI,gBAAe,2DACf,OAAM,uDACR,KAAI,YA4BnBc,EAAGC,GAAA,MAAHD,CAAG,oBAQYE,EAAIC,GAAA,CACXC,EAAaD,EAAA,EAAA,iBAJNd,CAAW,EAAA,CAAA,EAHtBgB,EAAAF,EAAA,sFAIUR,EAEC,KAAAO,qCAMAA,EAAIC,GAAA,CACXC,EAAaD,EAAA,EAAA,iBAFwCd,CAAW,EAAA,CAAA,EAApEiB,EAAUH,EAAA,8EAAuER,EACtE,KAAAO,gCAbRpB,EAAO,EAAAyB,EAAAC,EAAA,EAAA,EAAAD,EAAAE,CAAA,gCAoBVC,EAAGC,GAAA,EACDC,EAAAC,EADFH,CAAG,EACDE,EAMC,SAAUd,KANXc,EAAA,GAAA,IAAAtB,EAQQE,CAAK,UAAMsB,IAAI,KACnBC,EAAMC,GAAA,OAAND,CAAM,IAANA,CAAM,yBAANA,EAAME,EAAA,UACJjC,EAAW,GAAA,EAAA;AAAA,gBACX8B,CAAI,GAAA,EAAA;AAAA,cACJ7B,EAAS,GAAA,EAAA;AAAA,cACTJ,EAAK,GAAA,EAAA,EAAA,cAJPkC,SAAAA,EAAM,QAAAG,IAAA,MAAgC,IAAA,OAAM5B,EAACwB,CAAI,CAAA,GAAK,SAAO5B,CAAQ,CAAA,EAAvD,IAAA,SAAO4B,CAAI,CAAA,QAAzBC,CAAM,IATVI,EAAAP,CAAA,IADFF,CAAG,SACDU,EAAAR,EAAA,KACEnC,GAAE,EADJ2C,EAAAR,EAAA,aAGa7B,GAAW,EAHxB6B,EAAA,SAIW/B,EAAK,GAAI,OAJpB+B,EAAA,IAAAtB,EAKaJ,CAAQ,OAARA,EAAQmC,CAAA,CAAA,MANvBX,CAAG,aAoBHY,EAAIC,GAAA,MAAJD,CAAI,IAAJA,CAAI,eACFtC,EAAW,GAAA,EAAA;AAAA,QACXJ,EAAK,GAAA,EAAA;AAAA,QACLK,EAAS,GAAA,EAAA;AAAA,QACTJ,EAAK,GAAA,EAAA,EAAA,CAAA,MAJPyC,CAAI,WArBDxC,EAAO,EAAAyB,EAAAiB,EAAA,EAAA,EAAAjB,EAAAkB,CAAA,mCA+BCvB,EAAIC,GAAA,CACXuB,EAAcvB,EAAA,EAAA,iBAF0CZ,CAAU,EAAA,CAAA,EAAtEc,EAAMF,EAAA,kFAA6EN,EACxE,KAAAK,qCAMAA,EAAIC,GAAA,CACXuB,EAAcvB,EAAA,EAAA,iBAFmCZ,CAAU,EAAA,CAAA,EAA/De,EAAUH,EAAA,0EAAkEN,EACjE,KAAAK,gCARRpB,EAAO,EAAAyB,EAAAoB,EAAA,EAAA,EAAApB,EAAAqB,CAAA,aAjDd5B,CAAG,MAAHA,CAAG,OAFI"}

package/dist/components/pagination/Pagination.stories.d.ts

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

package/dist/components/pagination/Pagination.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAoBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
+{"version":3,"file":"Pagination.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAoBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

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

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import './Pagination.svelte';
 const meta = {
     title: 'Navigation/Pagination',
     component: 'm-pagination',
@@ -13,7 +14,7 @@ const meta = {
     <m-pagination
       id=${ifDefined(args.id)}
       value=${ifDefined(args.value)}
-      compact=${ifDefined(args.compact)}
+      ?compact=${args.compact}
       total=${ifDefined(args.total)}
       selectLabel=${ifDefined(args.selectLabel)}
       prefixlabel=${ifDefined(args.prefixlabel)}

package/dist/components/pagination/Pagination.svelte

@@ -1,12 +1,14 @@
 <svelte:options
   customElement={{
     tag: 'm-pagination',
+    props: {
+      compact: { reflect: true, type: 'Boolean', attribute: 'compact' },
+    },
   }}
 />
 
 <script lang="ts">
-  import ChevronLeft24 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';
-  import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';
+  import { ChevronLeft24, ChevronRight24 } from '@mozaic-ds/icons-svelte';
   import Button from '../button/Button.svelte';
   import IconButton from '../iconbutton/IconButton.svelte';
   /**
@@ -86,11 +88,15 @@
       disabled={isFirstPage()}
       onclick={previous}
     >
-      <ChevronLeft24 slot="icon" />
+      {#snippet icon()}
+        <ChevronLeft24 />
+      {/snippet}
     </Button>
   {:else}
     <IconButton outlined aria-label="Previous page" disabled={isFirstPage()} onclick={previous}>
-      <ChevronLeft24 slot="icon" />
+      {#snippet icon()}
+        <ChevronLeft24 />
+      {/snippet}
     </IconButton>
   {/if}
 
@@ -125,11 +131,15 @@
 
   {#if !compact}
     <Button iconposition="only" aria-label="Next page" disabled={isLastPage()} onclick={next}>
-      <ChevronRight24 slot="icon" />
+      {#snippet icon()}
+        <ChevronRight24 />
+      {/snippet}
     </Button>
   {:else}
     <IconButton outlined aria-label="Next page" disabled={isLastPage()} onclick={next}>
-      <ChevronRight24 slot="icon" />
+      {#snippet icon()}
+        <ChevronRight24 />
+      {/snippet}
     </IconButton>
   {/if}
 </nav>

package/dist/components/pagination/Pagination.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAQE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+FH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAOE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyGH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/passwordinput/PasswordInput.js

@@ -1,8 +1,9 @@
-import{v as B,c as G,p as J,a as K,b as r,f as D,s as z,d as n,e as E,g as V,t as H,i as M,j as N,x as Q,m as f,w as R,k as l,r as s,h as Z}from"../../custom-element.js";import{i as T}from"../../if.js";import{r as U,s as c}from"../../attributes.js";import{c as W}from"../../input.js";import{c as X}from"../../custom-element-forward-events.js";var Y=D('<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>'),$=D('<div><input class="mc-password-input__control mc-text-input__control svelte-1luc9tv"/> <!> <button type="button" role="switch" tabindex="0"><span class="svelte-1luc9tv"> </span></button></div>');const tt={hash:"svelte-1luc9tv",code:`/**
+import{u as A,c as J,p as K,a as N,b as e,q as v,s as y,n as j,o as C,t as E,f as V,g as O,h as H,i as Q,w as R,d as n,v as T,j as r,r as c,e as F}from"../../custom-element.js";import{i as U}from"../../if.js";import{a as W,s as X}from"../../attributes.js";import{c as Y}from"../../input.js";import{c as $}from"../../custom-element-forward-events.js";var tt=H('<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>'),ot=H('<div><input/> <!> <button type="button" role="switch" tabindex="0"><span class="svelte-1luc9tv"> </span></button></div>');const et={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.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);flex-grow:1;}.mc-text-input__control.svelte-1luc9tv::placeholder {color:var(--forms-color-placeholder, #666666);}.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-controls-options: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) {padding-inline-end:0;}.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-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 {
+  /* 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);flex-grow:1;}.mc-text-input__control.svelte-1luc9tv::placeholder {color:var(--forms-color-placeholder, #666666);}.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)) {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) {padding-inline-start:0;}.mc-text-input.svelte-1luc9tv:has(.mc-controls-options: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) {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;}.mc-button.svelte-1luc9tv {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button.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;}.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-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;}`};function et(L,e){J(e,!0),K(L,tt);let h=r(e,"id",7),p=r(e,"name",7),i=r(e,"value",15),g=r(e,"placeholder",7),u=r(e,"isinvalid",7),v=r(e,"disabled",7),w=r(e,"readonly",7),_=r(e,"isclearable",7),x=r(e,"clearlabel",7,"Clear content"),b=r(e,"buttonlabel",23,()=>({show:"Show",hide:"Hide"})),d=R(!1);function F(){Q(d,!f(d))}const I=()=>i("");var O={get id(){return h()},set id(t){h(t),l()},get name(){return p()},set name(t){p(t),l()},get value(){return i()},set value(t){i(t),l()},get placeholder(){return g()},set placeholder(t){g(t),l()},get isinvalid(){return u()},set isinvalid(t){u(t),l()},get disabled(){return v()},set disabled(t){v(t),l()},get readonly(){return w()},set readonly(t){w(t),l()},get isclearable(){return _()},set isclearable(t){_(t),l()},get clearlabel(){return x()},set clearlabel(t="Clear content"){x(t),l()},get buttonlabel(){return b()},set buttonlabel(t={show:"Show",hide:"Hide"}){b(t),l()}},m=$(),o=n(m);U(o);var S=z(o,2);{var P=t=>{var k=Y(),y=n(k);y.__click=I;var C=z(n(y),2),A=n(C,!0);s(C),s(y),s(k),H(()=>Z(A,x())),M(t,k)};T(S,t=>{_()&&i()&&t(P)})}var a=z(S,2);E(a,1,V(["mc-button","mc-button--s","mc-button--ghost"]),"svelte-1luc9tv"),a.__click=F;var j=n(a),q=n(j,!0);return s(j),s(a),s(m),H(()=>{E(m,1,V(["mc-password-input","mc-text-input",u()&&"is-invalid"]),"svelte-1luc9tv"),c(o,"id",h()),c(o,"name",p()),c(o,"type",f(d)?"text":"password"),c(o,"placeholder",g()),o.disabled=v(),o.readOnly=w(),c(o,"aria-invalid",u()),a.disabled=v(),c(a,"aria-checked",f(d)),Z(q,f(d)?b().hide:b().show)}),W(o,i),M(L,m),N(O)}B(["click"]);customElements.define("m-password-input",G(et,{id:{},name:{},value:{},placeholder:{},isinvalid:{},disabled:{},readonly:{},isclearable:{},clearlabel:{},buttonlabel:{}},[],[],!0,X));
+/* 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;}.mc-button.svelte-1luc9tv {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-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;}.mc-button--m.svelte-1luc9tv {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-1luc9tv {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.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--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 rt(z,o){K(o,!0),N(z,et);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"})),M=Q(o,["$$slots","$$events","$$legacy","$$host","id","name","value","placeholder","isinvalid","disabled","readonly","isclearable","clearlabel","buttonlabel"]),d=R(!1);function Z(){T(d,!v(d))}const q=()=>a("");var D={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()}},b=ot(),w=n(b);W(w,()=>({class:"mc-password-input__control mc-text-input__control",id:m(),name:g(),type:v(d)?"text":"password",placeholder:f(),disabled:s(),readonly:h(),"aria-invalid":u(),...M}),void 0,void 0,void 0,"svelte-1luc9tv",!0);var B=y(w,2);{var G=t=>{var _=tt(),x=n(_);x.__click=q;var S=y(n(x),2),P=n(S,!0);c(S),c(x),c(_),E(()=>F(P,k())),V(t,_)};U(B,t=>{p()&&a()&&t(G)})}var l=y(B,2);j(l,1,C(["mc-button","mc-button--s","mc-button--ghost"]),"svelte-1luc9tv"),l.__click=Z;var L=n(l),I=n(L,!0);return c(L),c(l),c(b),E(()=>{j(b,1,C(["mc-password-input","mc-text-input",u()&&"is-invalid"]),"svelte-1luc9tv"),l.disabled=s(),X(l,"aria-checked",v(d)),F(I,v(d)?i().hide:i().show)}),Y(w,a),V(z,b),O(D)}A(["click"]);customElements.define("m-password-input",J(rt,{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:{}},[],[],!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    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    /**\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  }: 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  />\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","isVisible","toggleVisibility","$.set","resetValue","$$value","$$render","consequent","$.set_text","text_1","$.get","customElementForwardEvents"],"mappings":";;;;;;g8GAAA,qBA2DIA,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,EAGxCC,IAAmB,EAAK,EAEnB,SAAAC,GAAmB,CAC1BC,EAAAF,KAAaA,CAAS,CAAA,CACxB,OAEMG,EAAU,IAAUX,EAAQ,EAAE,mdAVrB,gBAAe,yCACZ,IAAA,YAAAY,EAAA,CAAA,KAAM,OAAQ,KAAM,QAAM,iFA0B2BD,qDAOvBL,EAAU,CAAA,CAAA,kBATrDD,EAAW,GAAIL,KAAKa,EAAAC,CAAA,0BAef,YAAa,eAAgB,kBAAkB,CAAA,EAAA,gBAAA,YAM9CL,6DAjCA,oBAAqB,gBAAiBP,KAAa,4EAKtDM,CAAS,EAAG,OAAS,UAAU,0EAKvBN,GAAS,sCAsBTM,CAAS,CAAA,EAGhBO,EAAAC,EAAAC,EAAAT,CAAS,EAAGD,EAAW,EAAC,KAAOA,EAAW,EAAC,IAAI,sBArC1D,8LA3EYW"}
+{"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","$$render","consequent","button_1","$.set_class","$.clsx","span_1","$.reset","$.set_attribute","$.get","$.set_text","text_1","$.bind_value","customElementForwardEvents"],"mappings":";;;;;;;8kZAaA,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,EACDE,EAAyD,QAASV,EAOhE,IAAAW,MAPFD,CAAM,EAAA,CAAA,MAOJC,EAAI,EAAA,IAAJA,CAAI,IAPND,CAAM,IADRF,CAAG,YAQ0ChB,EAAU,CAAA,CAAA,MARvDgB,CAAG,WADDjB,EAAW,GAAIL,KAAK0B,EAAAC,CAAA,IAcxB,IAAAC,EAAAP,EAAAD,EAAA,CAAA,EAAAS,EAAAD,EAAA,EAAAE,EAAA,CACS,YAAa,eAAgB,kBAAkB,CAAA,EAAA,gBAAA,EADxDF,EAOC,QAAShB,EAER,IAAAmB,EAAIZ,EATNS,CAAA,MASEG,EAAI,EAAA,WAAJA,CAAI,EATNC,EAAAJ,CAAA,IA3BFZ,CAAG,WAAHA,OAAY,oBAAqB,gBAAiBd,KAAa,iCA2B7D0B,EAAA,SAKEzB,EAAQ,EALV8B,EAAAL,EAAA,eAAAM,EAMexB,CAAS,CAAA,EAGhByB,EAAAC,EAAAF,EAAAxB,CAAS,EAAGH,EAAW,EAAC,KAAOA,EAAW,EAAC,IAAI,IAnCvD8B,EAAAnB,EAAAlB,CAAA,MADFgB,CAAG,MAFI,0XA7EIsB"}

package/dist/components/passwordinput/PasswordInput.stories.d.ts

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

package/dist/components/passwordinput/PasswordInput.stories.d.ts.map

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

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

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
+import './PasswordInput.svelte';
 const meta = {
     title: 'Form Elements/PasswordInput',
     component: 'm-password-input',
@@ -19,10 +20,10 @@ const meta = {
         name=${ifDefined(args.name)}
         value=${ifDefined(args.value)}
         placeholder=${ifDefined(args.placeholder)}
-        isinvalid=${ifDefined(args.isinvalid)}
-        disabled=${ifDefined(args.disabled)}
-        readonly=${ifDefined(args.readonly)}
-        isclearable=${ifDefined(args.isclearable)}
+        ?isinvalid=${args.isinvalid}
+        ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
+        ?isclearable=${args.isclearable}
         clearlabel=${ifDefined(args.clearlabel)}
         @input=${(event) => {
             onInput(event);

package/dist/components/passwordinput/PasswordInput.svelte

@@ -1,6 +1,12 @@
 <svelte:options
   customElement={{
     tag: 'm-password-input',
+    props: {
+      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },
+      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
+      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },
+      isclearable: { reflect: true, type: 'Boolean', attribute: 'isclearable' },
+    },
     extend: customElementForwardEvents,
   }}
 />
@@ -11,6 +17,7 @@
    * 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.
    */
   interface Props {
+    [key: string]: any;
     /**
      * A unique identifier for the password input element, used to associate the label with the form element.
      */
@@ -67,6 +74,7 @@
     isclearable,
     clearlabel = 'Clear content',
     buttonlabel = { show: 'Show', hide: 'Hide' },
+    ...attrs
   }: Props = $props();
 
   let isVisible = $state(false);
@@ -89,6 +97,7 @@
     {disabled}
     {readonly}
     aria-invalid={isinvalid}
+    {...attrs}
   />
   {#if isclearable && value}
     <div class="mc-controls-options">

package/dist/components/passwordinput/PasswordInput.svelte.d.ts

@@ -2,6 +2,7 @@
  * 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.
  */
 interface Props {
+    [key: string]: any;
     /**
      * A unique identifier for the password input element, used to associate the label with the form element.
      */

package/dist/components/passwordinput/PasswordInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/passwordinput/PasswordInput.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH;AAsDH,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/passwordinput/PasswordInput.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH;AA6DH,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}