npm - @mozaic-ds/web-components - Versions diffs - 1.4.0 → 1.5.1 - Mend

@mozaic-ds/web-components 1.4.0 → 1.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (241) hide show

package/dist/components/overlay/Overlay.js CHANGED Viewed

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

package/dist/components/overlay/Overlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.svelte"],"sourcesContent":["<svelte:options\n customElement={{\n tag: 'm-overlay',\n props: {\n isvisible: { reflect: true, type: 'Boolean', attribute: 'isvisible' },\n },\n }}\n/>\n\n<script lang=\"ts\">\n ~~import type { Snippet } from 'svelte';\n~~ /*\n 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.\n \n @slot default - Use this slot to insert a centered content inside the overlay.\n /\n interface Props {\n /\n Controls the visibility of the overlay.\n /\n isvisible?: boolean;\n /\n Accessible label for the overlay dialog.\n /\n dialoglabel: string;\n ~~/\n Use this snippet to insert a centered content inside the overlay.\n */\n children?: Snippet;\n~~ }\n\n let { isvisible, dialoglabel, ~~children~~ }: Props = $props();\n</script>\n\n<div class={['mc-overlay', isvisible && 'is-visible']}>\n <div role=\"dialog\" tabindex=\"-1\" aria-labelledby={dialoglabel}>\n ~~{#if children}\n {@render children()}\n {:else}\n~~ <slot />\n ~~{/if}\n~~ </div>\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/overlay';\n</style>\n"],"names":["isvisible","$.prop","$$props","dialoglabel","~~children","~~div","root","div_1","~~$$render","consequent","alternate","~~$.set_class","$.clsx","$.set_attribute"],"mappings":";;mYASA,~~oBAsBQA~~,EAASC,EAAAC,EAAA,YAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,~~EAAEE~~,~~EAAQH,EAAAC,EAAA,WAAA,CAAA,iLAGvCG,~~EAAGC,EAAA,EACDC,IADFF,CAAG,MACDE,CAAG,~~kCAESH~~,~~CAAQ,0EADdA,EAAQ,EAAAI,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,aADdH,~~CAAG,IADLF,CAAG,~~SAAHM~~,~~EAAAN~~,EAAG,~~EAAAO~~,EAAA,CAAS,~~aAAcZ~~,KAAa,YAAY,CAAA,EAAA,eAAA,~~EACjDa~~,~~EAAAN~~,~~oBAAiDJ~~,GAAW,~~QAD9DE~~,CAAG,MAFI"}
1	+ {"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.svelte"],"sourcesContent":["<svelte:options\n customElement={{\n tag: 'm-overlay',\n props: {\n isvisible: { reflect: true, type: 'Boolean', attribute: 'isvisible' },\n },\n }}\n/>\n\n<script lang=\"ts\">\n /*\n 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.\n \n @slot default - Use this slot to insert a centered content inside the overlay.\n /\n interface Props {\n /\n Controls the visibility of the overlay.\n /\n isvisible?: boolean;\n /\n Accessible label for the overlay dialog.\n */\n dialoglabel: string;\n }\n\n let { isvisible, dialoglabel }: Props = $props();\n</script>\n\n<div class={['mc-overlay', isvisible && 'is-visible']}>\n <div role=\"dialog\" tabindex=\"-1\" aria-labelledby={dialoglabel}>\n <slot />\n </div>\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/overlay';\n</style>\n"],"names":["isvisible","$.prop","$$props","dialoglabel","div","root","div_1","$.set_class","$.clsx","$.set_attribute"],"mappings":";;mYASA,oBAiBQA,EAASC,EAAAC,EAAA,YAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,4HAG7BE,EAAGC,EAAA,EACDC,IADFF,CAAG,MACDE,CAAG,oCAAHA,CAAG,IADLF,CAAG,SAAHG,EAAAH,EAAG,EAAAI,EAAA,CAAS,aAAcR,KAAa,YAAY,CAAA,EAAA,eAAA,EACjDS,EAAAH,oBAAiDH,GAAW,QAD9DC,CAAG,MAFI"}

package/dist/components/overlay/Overlay.svelte CHANGED Viewed

@@ -8,7 +8,6 @@
 />
 <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.
    *
@@ -23,22 +22,14 @@
      * Accessible label for the overlay dialog.
      */
     dialoglabel: string;
-    /**
-     * Use this snippet to insert a centered content inside the overlay.
-     */
-    children?: Snippet;
   }
-  let { isvisible, dialoglabel, children }: Props = $props();
+  let { isvisible, dialoglabel }: Props = $props();
 </script>
 <div class={['mc-overlay', isvisible && 'is-visible']}>
   <div role="dialog" tabindex="-1" aria-labelledby={dialoglabel}>
-    {#if children}
-      {@render children()}
-    {:else}
-      <slot />
-    {/if}
+    <slot />
   </div>
 </div>

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

@@ -1,4 +1,3 @@
-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.
  *
@@ -13,10 +12,6 @@ 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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
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;AAwBH,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 CHANGED Viewed

@@ -8,7 +8,6 @@ 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 CHANGED Viewed

@@ -1,14 +1,14 @@
-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:`/**
+import{o as ae,c as oe,p as re,a as le,b as n,u as p,k as se,s as A,f as b,g as ie,h as _,d as h,j as c,n as t,r as u,t as N,q as $,e as D,v as x}from"../../custom-element.js";import{i as E}from"../../if.js";import{e as ne,i as ce}from"../../each.js";import{s as F,c as de,e as me}from"../../attributes.js";import{m as R,f as G}from"../../Condition20.js";import{B as H}from"../button/Button.js";import{I as J}from"../iconbutton/IconButton.js";import"../../branches.js";import"../../slot.js";import"../loader/Loader.js";var ve=_("<option> </option>"),ue=_('<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 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)??""}
+/* stylelint-enable string-no-newline */`};function be(B,l){re(l,!0),le(B,pe);let w=n(l,"id",7),m=n(l,"value",15,1),s=n(l,"total",7,10),v=n(l,"compact",7),k=n(l,"selectLabel",7,"Page selector"),g=n(l,"prefixlabel",7,"Page"),f=n(l,"pagelabel",7,"of"),r=p(se(Number(m())));const y=p(()=>t(r)<=1),P=p(()=>t(r)>=s()),K=p(()=>Array.from({length:s()},(e,a)=>a+1));function z(){t(y)()||$(r,Number(t(r))-1)}function j(){t(P)()||$(r,Number(t(r))+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 s()},set total(e=10){s(e),c()},get compact(){return v()},set compact(e){v(e),c()},get selectLabel(){return k()},set selectLabel(e="Page selector"){k(e),c()},get prefixlabel(){return g()},set prefixlabel(e="Page"){g(e),c()},get pagelabel(){return f()},set pagelabel(e="of"){f(e),c()}},C=fe(),I=h(C);{var T=e=>{{let a=x(()=>t(y)());H(e,{iconposition:"only","aria-label":"Previous page",get disabled(){return t(a)},onclick:z,$$slots:{icon:(o,i)=>{R(o,{slot:"icon"})}}})}},U=e=>{{let a=x(()=>t(y)());J(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return t(a)},onclick:z,$$slots:{icon:(o,i)=>{R(o,{slot:"icon"})}}})}};E(I,e=>{v()?e(U,!1):e(T)})}var M=A(I,2);{var V=e=>{var a=ue(),o=h(a);o.__change=O,ne(o,21,()=>t(K)(),ce,(i,L)=>{var d=ve(),ee=h(d);u(d);var S={};N((te,q)=>{me(d,te),D(ee,`${g()??""}
+            ${t(L)??""}
             ${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()??""}
+            ${s()??""}`),S!==(S=q)&&(d.value=(d.__value=q)??"")},[()=>Number(t(L))==Number(t(r)),()=>Number(t(L))]),b(i,d)}),u(o),u(a),N(()=>{F(o,"id",w()),F(o,"aria-label",k()),o.disabled=s()<=1}),de(o,()=>t(r),i=>$(r,i)),b(e,a)},W=e=>{var a=ge(),o=h(a);u(a),N(()=>D(o,`${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));
+      ${s()??""}`)),b(e,a)};E(M,e=>{v()?e(W,!1):e(V)})}var X=A(M,2);{var Y=e=>{{let a=x(()=>t(P)());H(e,{iconposition:"only","aria-label":"Next page",get disabled(){return t(a)},onclick:j,$$slots:{icon:(o,i)=>{G(o,{slot:"icon"})}}})}},Z=e=>{{let a=x(()=>t(P)());J(e,{outlined:!0,"aria-label":"Next page",get disabled(){return t(a)},onclick:j,$$slots:{icon:(o,i)=>{G(o,{slot:"icon"})}}})}};E(X,e=>{v()?e(Z,!1):e(Y)})}return u(C),b(B,C),ie(Q)}ae(["change"]);customElements.define("m-pagination",oe(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 CHANGED Viewed

	@@ -1 +1 @@
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"}
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 <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","$.prop","$$props","value","total","compact","selectLabel","prefixlabel","pagelabel","selected","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","onSelectChange","event","nav","root","Button","$$anchor","ChevronLeft24","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,4BAKYX,CAAW,EAAA,CAAA,EAHtBa,EAAAC,EAAA,sFAIUR,wBAERS,EAAaD,EAAA,CAAA,KAAA,MAAA,CAAA,6BAG0Cd,CAAW,EAAA,CAAA,EAApEgB,EAAUF,EAAA,8EAAuER,wBAC/ES,EAAaD,EAAA,CAAA,KAAA,MAAA,CAAA,gBAXZrB,EAAO,EAAAwB,EAAAC,EAAA,EAAA,EAAAD,EAAAE,CAAA,gCAgBVC,EAAGC,GAAA,EACDC,EAAAC,EADFH,CAAG,EACDE,EAMC,SAAUb,KANXa,EAAA,GAAA,IAAArB,EAQQE,CAAK,UAAMqB,IAAI,KACnBC,EAAMC,GAAA,OAAND,CAAM,IAANA,CAAM,yBAANA,EAAME,EAAA,UACJhC,EAAW,GAAA,EAAA;AAAA,gBACX6B,CAAI,GAAA,EAAA;AAAA,cACJ5B,EAAS,GAAA,EAAA;AAAA,cACTJ,EAAK,GAAA,EAAA,EAAA,cAJPiC,SAAAA,EAAM,QAAAG,IAAA,MAAgC,IAAA,OAAM3B,EAACuB,CAAI,CAAA,GAAK,SAAO3B,CAAQ,CAAA,EAAvD,IAAA,SAAO2B,CAAI,CAAA,QAAzBC,CAAM,IATVI,EAAAP,CAAA,IADFF,CAAG,SACDU,EAAAR,EAAA,KACElC,GAAE,EADJ0C,EAAAR,EAAA,aAGa5B,GAAW,EAHxB4B,EAAA,SAIW9B,EAAK,GAAI,OAJpB8B,EAAA,IAAArB,EAKaJ,CAAQ,OAARA,EAAQkC,CAAA,CAAA,MANvBX,CAAG,aAoBHY,EAAIC,GAAA,MAAJD,CAAI,IAAJA,CAAI,eACFrC,EAAW,GAAA,EAAA;AAAA,QACXJ,EAAK,GAAA,EAAA;AAAA,QACLK,EAAS,GAAA,EAAA;AAAA,QACTJ,EAAK,GAAA,EAAA,EAAA,CAAA,MAJPwC,CAAI,WArBDvC,EAAO,EAAAwB,EAAAiB,EAAA,EAAA,EAAAjB,EAAAkB,CAAA,2CA8BkDjC,CAAU,EAAA,CAAA,EAAtEW,EAAMC,EAAA,kFAA6EN,wBACjF4B,EAActB,EAAA,CAAA,KAAA,MAAA,CAAA,6BAGqCZ,CAAU,EAAA,CAAA,EAA/Dc,EAAUF,EAAA,0EAAkEN,wBAC1E4B,EAActB,EAAA,CAAA,KAAA,MAAA,CAAA,gBANbrB,EAAO,EAAAwB,EAAAoB,EAAA,EAAA,EAAApB,EAAAqB,CAAA,aA7Cd3B,CAAG,MAAHA,CAAG,OAFI"}

package/dist/components/pagination/Pagination.svelte CHANGED Viewed

@@ -88,15 +88,11 @@
       disabled={isFirstPage()}
       onclick={previous}
     >
-      {#snippet icon()}
-        <ChevronLeft24 />
-      {/snippet}
+      <ChevronLeft24 slot="icon" />
     </Button>
   {:else}
     <IconButton outlined aria-label="Previous page" disabled={isFirstPage()} onclick={previous}>
-      {#snippet icon()}
-        <ChevronLeft24 />
-      {/snippet}
+      <ChevronLeft24 slot="icon" />
     </IconButton>
   {/if}
@@ -131,15 +127,11 @@
   {#if !compact}
     <Button iconposition="only" aria-label="Next page" disabled={isLastPage()} onclick={next}>
-      {#snippet icon()}
-        <ChevronRight24 />
-      {/snippet}
+      <ChevronRight24 slot="icon" />
     </Button>
   {:else}
     <IconButton outlined aria-label="Next page" disabled={isLastPage()} onclick={next}>
-      {#snippet icon()}
-        <ChevronRight24 />
-      {/snippet}
+      <ChevronRight24 slot="icon" />
     </IconButton>
   {/if}
 </nav>

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

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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;AAiGH,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 CHANGED Viewed

@@ -1,9 +1,9 @@
-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:`/**
+import{o as A,c as J,p as K,a as N,b as e,n as v,s as y,l as j,m as C,t as E,f as V,g as O,h as H,i as Q,u as R,d as n,q 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";import"../../branches.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[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__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,$));
+/* 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--loading.svelte-1luc9tv {pointer-events:none;}.mc-button--outlined.mc-button--standard.svelte-1luc9tv {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-1luc9tv:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1luc9tv:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1luc9tv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-1luc9tv {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-1luc9tv:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1luc9tv:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1luc9tv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-1luc9tv {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-1luc9tv:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1luc9tv:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1luc9tv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-1luc9tv {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-1luc9tv:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1luc9tv:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1luc9tv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-1luc9tv {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-1luc9tv:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1luc9tv:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1luc9tv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-1luc9tv {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-1luc9tv:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1luc9tv:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1luc9tv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-1luc9tv {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-1luc9tv:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1luc9tv:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1luc9tv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-1luc9tv {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-1luc9tv:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1luc9tv:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1luc9tv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-controls-options.svelte-1luc9tv {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-1luc9tv {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%);}.mc-controls-options__button.svelte-1luc9tv:hover .mc-controls-options__icon:where(.svelte-1luc9tv) {fill:var(--forms-color-icon-clear-hover, #4d4d4d);}.mc-controls-options__button.svelte-1luc9tv:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-controls-options__icon.svelte-1luc9tv {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-1luc9tv, .mc-controls-options__icon.svelte-1luc9tv {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-1luc9tv {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-controls-options__unit.svelte-1luc9tv {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);}`};function 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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordInput.js","sources":["../../../src/components/passwordinput/PasswordInput.svelte"],"sourcesContent":["<svelte:options\n customElement={{\n tag: 'm-password-input',\n props: {\n isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n isclearable: { reflect: true, type: 'Boolean', attribute: 'isclearable' },\n },\n extend: customElementForwardEvents,\n }}\n/>\n\n<script lang=\"ts\">\n import { customElementForwardEvents } from '../../utils';\n /*\n A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.\n /\n interface Props {\n [key: string]: any;\n /\n A unique identifier for the password input element, used to associate the label with the form element.\n /\n id: string;\n /\n The name attribute for the password input element, typically used for form submission.\n /\n name?: string;\n /\n The current value of the password input field.\n /\n value?: string \| number;\n /\n A placeholder text to show in the password input when it is empty.\n /\n placeholder?: string;\n /\n If `true`, applies an invalid state to the password input.\n /\n isinvalid?: boolean;\n /\n If `true`, disables the password input, making it non-interactive.\n /\n disabled?: boolean;\n /\n If `true`, the password input is read-only (cannot be edited).\n /\n readonly?: boolean;\n /\n If `true`, a clear button will appear when the password input has a value.\n /\n isclearable?: boolean;\n /\n The label text for the clear button.\n /\n clearlabel?: string;\n /\n Labels of the button displayed when showing or hiding the password.\n */\n buttonlabel?: {\n show: string;\n hide: string;\n };\n }\n\n let {\n id,\n name,\n value = $bindable(),\n placeholder,\n isinvalid,\n disabled,\n readonly,\n isclearable,\n clearlabel = 'Clear content',\n buttonlabel = { show: 'Show', hide: 'Hide' },\n ...attrs\n }: Props = $props();\n\n let isVisible = $state(false);\n\n function toggleVisibility() {\n isVisible = !isVisible;\n }\n\n const resetValue = () => (value = '');\n</script>\n\n<div class={['mc-password-input', 'mc-text-input', isinvalid && 'is-invalid']}>\n <input\n class=\"mc-password-input__control mc-text-input__control\"\n {id}\n {name}\n type={isVisible ? 'text' : 'password'}\n bind:value\n {placeholder}\n {disabled}\n {readonly}\n aria-invalid={isinvalid}\n {...attrs}\n />\n {#if isclearable && value}\n <div class=\"mc-controls-options\">\n <button class=\"mc-controls-options__button\" type=\"button\" onclick={resetValue}>\n <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n />\n </svg>\n <span class=\"mc-controls-options__label\">{clearlabel}</span>\n </button>\n </div>\n {/if}\n\n <button\n class={['mc-button', 'mc-button--s', 'mc-button--ghost']}\n type=\"button\"\n role=\"switch\"\n tabindex=\"0\"\n {disabled}\n aria-checked={isVisible}\n onclick={toggleVisibility}\n >\n <span>{isVisible ? buttonlabel.hide : buttonlabel.show}</span>\n </button>\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/password-input';\n @use '@mozaic-ds/styles/components/text-input';\n @use '@mozaic-ds/styles/components/button';\n @use '@mozaic-ds/styles/components/controls-options';\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","isinvalid","disabled","readonly","isclearable","clearlabel","buttonlabel","attrs","$.rest_props","isVisible","$.state","toggleVisibility","$.set","resetValue","$$value","div","root","input","$.child","node","$.sibling","div_1","root_1","button","span","$$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"}
1	+ {"version":3,"file":"PasswordInput.js","sources":["../../../src/components/passwordinput/PasswordInput.svelte"],"sourcesContent":["<svelte:options\n customElement={{\n tag: 'm-password-input',\n props: {\n isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n isclearable: { reflect: true, type: 'Boolean', attribute: 'isclearable' },\n },\n extend: customElementForwardEvents,\n }}\n/>\n\n<script lang=\"ts\">\n import { customElementForwardEvents } from '../../utils';\n /*\n A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.\n /\n interface Props {\n [key: string]: any;\n /\n A unique identifier for the password input element, used to associate the label with the form element.\n /\n id: string;\n /\n The name attribute for the password input element, typically used for form submission.\n /\n name?: string;\n /\n The current value of the password input field.\n /\n value?: string \| number;\n /\n A placeholder text to show in the password input when it is empty.\n /\n placeholder?: string;\n /\n If `true`, applies an invalid state to the password input.\n /\n isinvalid?: boolean;\n /\n If `true`, disables the password input, making it non-interactive.\n /\n disabled?: boolean;\n /\n If `true`, the password input is read-only (cannot be edited).\n /\n readonly?: boolean;\n /\n If `true`, a clear button will appear when the password input has a value.\n /\n isclearable?: boolean;\n /\n The label text for the clear button.\n /\n clearlabel?: string;\n /\n Labels of the button displayed when showing or hiding the password.\n */\n buttonlabel?: {\n show: string;\n hide: string;\n };\n }\n\n let {\n id,\n name,\n value = $bindable(),\n placeholder,\n isinvalid,\n disabled,\n readonly,\n isclearable,\n clearlabel = 'Clear content',\n buttonlabel = { show: 'Show', hide: 'Hide' },\n ...attrs\n }: Props = $props();\n\n let isVisible = $state(false);\n\n function toggleVisibility() {\n isVisible = !isVisible;\n }\n\n const resetValue = () => (value = '');\n</script>\n\n<div class={['mc-password-input', 'mc-text-input', isinvalid && 'is-invalid']}>\n <input\n class=\"mc-password-input__control mc-text-input__control\"\n {id}\n {name}\n type={isVisible ? 'text' : 'password'}\n bind:value\n {placeholder}\n {disabled}\n {readonly}\n aria-invalid={isinvalid}\n {...attrs}\n />\n {#if isclearable && value}\n <div class=\"mc-controls-options\">\n <button class=\"mc-controls-options__button\" type=\"button\" onclick={resetValue}>\n <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n />\n </svg>\n <span class=\"mc-controls-options__label\">{clearlabel}</span>\n </button>\n </div>\n {/if}\n\n <button\n class={['mc-button', 'mc-button--s', 'mc-button--ghost']}\n type=\"button\"\n role=\"switch\"\n tabindex=\"0\"\n {disabled}\n aria-checked={isVisible}\n onclick={toggleVisibility}\n >\n <span>{isVisible ? buttonlabel.hide : buttonlabel.show}</span>\n </button>\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/password-input';\n @use '@mozaic-ds/styles/components/text-input';\n @use '@mozaic-ds/styles/components/button';\n @use '@mozaic-ds/styles/components/controls-options';\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","isinvalid","disabled","readonly","isclearable","clearlabel","buttonlabel","attrs","$.rest_props","isVisible","$.state","toggleVisibility","$.set","resetValue","$$value","div","root","input","$.child","node","$.sibling","div_1","root_1","button","span","$$render","consequent","button_1","$.set_class","$.clsx","span_1","$.reset","$.set_attribute","$.get","$.set_text","text_1","$.bind_value","customElementForwardEvents"],"mappings":";;;;;;;uoZAaA,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.map CHANGED Viewed

	@@ -1 +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;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"}
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;AAIrE,OAAO,wBAAwB,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAwCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,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 CHANGED Viewed

@@ -5,6 +5,7 @@ import './PasswordInput.svelte';
 const meta = {
     title: 'Form Elements/PasswordInput',
     component: 'm-password-input',
+    subcomponents: { 'Field': 'm-field' },
     args: {
         id: 'passwordInputId',
         placeholder: 'Enter your password',

package/dist/components/passwordinput/PasswordInput.svelte CHANGED Viewed

@@ -444,6 +444,9 @@
   border-radius: var(--border-radius-full, 100%);
   padding: 0;
 }
+.mc-button--loading {
+  pointer-events: none;
+}
 .mc-button--loading .mc-button__loader {
   position: absolute;
   color: currentcolor;