npm - @mozaic-ds/web-components - Versions diffs - 1.0.0 → 1.2.0 - Mend

@mozaic-ds/web-components 1.0.0 → 1.2.0

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 (326) hide show

package/dist/components/modal/Modal.js CHANGED Viewed

@@ -2,8 +2,8 @@ import{v as J,c as K,p as L,a as N,b as s,f as w,d as t,s as l,t as E,i as y,j a
  * Do not edit directly, this file was auto-generated.
  */.mc-modal.svelte-1tduk3b {box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 3);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto;}
 @media (width >= 680px) {.mc-modal.svelte-1tduk3b {align-items:center;}
-}.mc-modal__dialog.svelte-1tduk3b {background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease;visibility:hidden;width:100%;border-radius:var(--radius-l, 1rem) var(--radius-l, 1rem) 0 0;z-index:3;}
-@media (width >= 680px) {.mc-modal__dialog.svelte-1tduk3b {width:38rem;border-radius:var(--radius-l, 1rem);}
+}.mc-modal__dialog.svelte-1tduk3b {background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease;visibility:hidden;width:100%;border-radius:var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;z-index:3;}
+@media (width >= 680px) {.mc-modal__dialog.svelte-1tduk3b {width:38rem;border-radius:var(--border-radius-l, 1rem);}
 }.mc-modal.is-open.svelte-1tduk3b .mc-modal__dialog:where(.svelte-1tduk3b) {opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s, transform 0.4s ease, opacity 0.4s ease;visibility:visible;}.mc-modal__header.svelte-1tduk3b {align-items:center;display:flex;gap:0.5rem;min-height:3rem;padding:1rem;position:relative;}
 @media (width >= 680px) {.mc-modal__header.svelte-1tduk3b {padding:1.5rem 1.5rem 1rem 1.5rem;}
 }.mc-modal__icon.svelte-1tduk3b {width:2rem;height:2rem;}.mc-modal__title.svelte-1tduk3b {font-size:var(--font-title-m, 1.5rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--modal-color-title, #000000);margin-bottom:0.5rem;margin-top:0.5rem;padding-right:3rem;}.mc-modal__close.svelte-1tduk3b {position:absolute;top:0.75rem;right:0.75rem;}.mc-modal__body.svelte-1tduk3b {font-size:var(--font-size-150, 1rem);color:var(--modal-color-paragraph, #404040);padding:0 1rem;margin-bottom:1rem;}
@@ -12,5 +12,5 @@ import{v as J,c as K,p as L,a as N,b as s,f as w,d as t,s as l,t as E,i as y,j a
 @media (width >= 680px) {.mc-modal__footer.svelte-1tduk3b {flex-direction:row;padding:0.5rem 1.5rem 1.5rem 1.5rem;}
 }.mc-modal__link.svelte-1tduk3b {order:1;}
 @media (width >= 680px) {.mc-modal__link.svelte-1tduk3b {margin-right:auto;order:0;}
-}.mc-button.svelte-1tduk3b {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1tduk3b:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1tduk3b:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1tduk3b: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-1tduk3b {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1tduk3b {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-radius, 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-1tduk3b: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-1tduk3b: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--ghost.svelte-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1tduk3b:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1tduk3b: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-1tduk3b {border-radius:var(--radius-full, 100%);padding:0;}.mc-modal__icon.svelte-1tduk3b:empty {display:none;}`};function oe(z,r){L(r,!0),N(z,te);let d=s(r,"open",7),b=s(r,"title",7),n=s(r,"description",7),u=s(r,"closable",7,!0),v;function Y(){d(!1);const e=new CustomEvent("update:open",{detail:d(),bubbles:!0,composed:!0});v.dispatchEvent(e)}var D={get open(){return d()},set open(e){d(e),c()},get title(){return b()},set title(e){b(e),c()},get description(){return n()},set description(e){n(e),c()},get closable(){return u()},set closable(e=!0){u(e),c()}},i=ee(),f=t(i),g=t(f),p=t(g),M=t(p);m(M,r,"icon",{}),o(p);var k=l(p,2),S=t(k,!0);o(k);var q=l(k,2);{var A=e=>{var a=Z();a.__click=Y;var x=t(a);W(x,{class:"mc-modal__close","aria-hidden":"true"}),o(a),y(e,a)};T(q,e=>{u()&&e(A)})}o(g);var _=l(g,2),C=t(_);{var B=e=>{var a=$(),x=t(a,!0);o(a),E(()=>O(x,n())),y(e,a)};T(C,e=>{n()&&e(B)})}var F=l(C,2);m(F,r,"default",{}),o(_);var j=l(_,2),h=t(j),G=t(h);m(G,r,"link",{}),o(h);var H=l(h,2);m(H,r,"footer",{}),o(j),o(f);var I=l(f,2);return X(I,{get isvisible(){return d()},dialoglabel:"modal"}),o(i),V(i,e=>v=e,()=>v),E(()=>{Q(i,1,R(["mc-modal",d()&&"is-open"]),"svelte-1tduk3b"),U(i,"aria-hidden",!d()),O(S,b())}),y(z,i),P(D)}J(["click"]);customElements.define("m-modal",K(oe,{open:{},title:{},description:{},closable:{}},["icon","default","link","footer"],[],!0));
+}.mc-button.svelte-1tduk3b {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1tduk3b:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1tduk3b:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1tduk3b: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-1tduk3b {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1tduk3b {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-1tduk3b: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-1tduk3b: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--ghost.svelte-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1tduk3b:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1tduk3b: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-1tduk3b {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-modal__icon.svelte-1tduk3b:empty {display:none;}`};function oe(z,r){L(r,!0),N(z,te);let d=s(r,"open",7),b=s(r,"title",7),n=s(r,"description",7),u=s(r,"closable",7,!0),v;function Y(){d(!1);const e=new CustomEvent("update:open",{detail:d(),bubbles:!0,composed:!0});v.dispatchEvent(e)}var D={get open(){return d()},set open(e){d(e),c()},get title(){return b()},set title(e){b(e),c()},get description(){return n()},set description(e){n(e),c()},get closable(){return u()},set closable(e=!0){u(e),c()}},i=ee(),f=t(i),g=t(f),p=t(g),M=t(p);m(M,r,"icon",{}),o(p);var k=l(p,2),S=t(k,!0);o(k);var q=l(k,2);{var A=e=>{var a=Z();a.__click=Y;var x=t(a);W(x,{class:"mc-modal__close","aria-hidden":"true"}),o(a),y(e,a)};T(q,e=>{u()&&e(A)})}o(g);var _=l(g,2),C=t(_);{var B=e=>{var a=$(),x=t(a,!0);o(a),E(()=>O(x,n())),y(e,a)};T(C,e=>{n()&&e(B)})}var F=l(C,2);m(F,r,"default",{}),o(_);var j=l(_,2),h=t(j),G=t(h);m(G,r,"link",{}),o(h);var H=l(h,2);m(H,r,"footer",{}),o(j),o(f);var I=l(f,2);return X(I,{get isvisible(){return d()},dialoglabel:"modal"}),o(i),V(i,e=>v=e,()=>v),E(()=>{Q(i,1,R(["mc-modal",d()&&"is-open"]),"svelte-1tduk3b"),U(i,"aria-hidden",!d()),O(S,b())}),y(z,i),P(D)}J(["click"]);customElements.define("m-modal",K(oe,{open:{},title:{},description:{},closable:{}},["icon","default","link","footer"],[],!0));
 //# sourceMappingURL=Modal.js.map

package/dist/components/modal/Modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-modal' }} />\n\n<script lang=\"ts\">\n import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n import MOverlay from '../overlay/Overlay.svelte';\n /*\n A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.\n \n @slot icon - Use this slot to insert an icon next to the title of the modal.\n * @slot default - Use this slot to insert the content of the modal.\n * @slot link - Use this slot to insert a link in the footer.\n * @slot footer - Use this slot to insert buttons in the footer.\n * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.\n /\n interface Props {\n /\n if `true`, display the modal.\n /\n open?: boolean;\n /\n Title of the modal.\n /\n title: string;\n /\n Description of the modal.\n /\n description?: string;\n /\n if `true`, display the close button.\n */\n closable?: boolean;\n }\n\n let { open, title, description, closable = true }: Props = $props();\n let element: HTMLElement;\n\n function onClose() {\n open = false;\n\n const event = new CustomEvent('update:open', {\n detail: open,\n bubbles: true,\n composed: true,\n });\n element.dispatchEvent(event);\n }\n</script>\n\n<section\n class={['mc-modal', open && 'is-open']}\n tabindex=\"-1\"\n aria-labelledby=\"modalTitle\"\n aria-hidden={!open}\n bind:this={element}\n>\n <div class=\"mc-modal__dialog\" role=\"document\">\n <header class=\"mc-modal__header\">\n <span class=\"mc-modal__icon\">\n <slot name=\"icon\" />\n </span>\n <h2 class=\"mc-modal__title\" id=\"modalTitle\">{title}</h2>\n {#if closable}\n <button\n type=\"button\"\n class=\"mc-modal__close mc-button mc-button--icon-button mc-button--ghost\"\n aria-label=\"Close\"\n onclick={onClose}\n >\n <Cross24 class=\"mc-modal__close\" aria-hidden=\"true\" />\n </button>\n {/if}\n </header>\n\n <main class=\"mc-modal__body\">\n {#if description}\n <p>{description}</p>\n {/if}\n <slot />\n </main>\n\n <footer class=\"mc-modal__footer\">\n <span class=\"mc-modal__link\">\n <slot name=\"link\" />\n </span>\n <slot name=\"footer\" />\n </footer>\n </div>\n\n <MOverlay isvisible={open} dialoglabel=\"modal\" />\n</section>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/modal';\n @use '@mozaic-ds/styles/components/button';\n\n .mc-modal__icon:empty {\n display: none;\n }\n</style>\n"],"names":["open","$.prop","$$props","title","description","closable","element","onClose","event","$$render","consequent","consequent_1","$.bind_this","section","$$value"],"mappings":";;;;;;;;;;;;;;~~izEAAA~~,qBAiCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EAAEG,mBAAW,EAAI,EAC3CC,EAEK,SAAAC,GAAU,CACjBP,EAAO,EAAK,EAEN,MAAAQ,EAAK,IAAO,YAAY,eAC5B,OAAQR,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBM,EAAQ,cAAcE,CAAK,CAC7B,yMAZ2C,GAAI,6IAiC9BD,sFALRF,EAAQ,GAAAI,EAAAC,CAAA,2EAcPN,EAAW,CAAA,CAAA,kBADZA,EAAW,GAAAK,EAAAE,CAAA,qLAcCX,EAAI,8BAnCdY,EAAAC,EAAAC,GAAAR,QAAAA,CAAO,kBAJV,WAAYN,KAAQ,SAAS,CAAA,EAAA,gBAAA,qBAGvBA,EAAI,CAAA,MAQ+BG,GAAK,eAdxD"}
1	+ {"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-modal' }} />\n\n<script lang=\"ts\">\n import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n import MOverlay from '../overlay/Overlay.svelte';\n /*\n A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.\n \n @slot icon - Use this slot to insert an icon next to the title of the modal.\n * @slot default - Use this slot to insert the content of the modal.\n * @slot link - Use this slot to insert a link in the footer.\n * @slot footer - Use this slot to insert buttons in the footer.\n * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.\n /\n interface Props {\n /\n if `true`, display the modal.\n /\n open?: boolean;\n /\n Title of the modal.\n /\n title: string;\n /\n Description of the modal.\n /\n description?: string;\n /\n if `true`, display the close button.\n */\n closable?: boolean;\n }\n\n let { open, title, description, closable = true }: Props = $props();\n let element: HTMLElement;\n\n function onClose() {\n open = false;\n\n const event = new CustomEvent('update:open', {\n detail: open,\n bubbles: true,\n composed: true,\n });\n element.dispatchEvent(event);\n }\n</script>\n\n<section\n class={['mc-modal', open && 'is-open']}\n tabindex=\"-1\"\n aria-labelledby=\"modalTitle\"\n aria-hidden={!open}\n bind:this={element}\n>\n <div class=\"mc-modal__dialog\" role=\"document\">\n <header class=\"mc-modal__header\">\n <span class=\"mc-modal__icon\">\n <slot name=\"icon\" />\n </span>\n <h2 class=\"mc-modal__title\" id=\"modalTitle\">{title}</h2>\n {#if closable}\n <button\n type=\"button\"\n class=\"mc-modal__close mc-button mc-button--icon-button mc-button--ghost\"\n aria-label=\"Close\"\n onclick={onClose}\n >\n <Cross24 class=\"mc-modal__close\" aria-hidden=\"true\" />\n </button>\n {/if}\n </header>\n\n <main class=\"mc-modal__body\">\n {#if description}\n <p>{description}</p>\n {/if}\n <slot />\n </main>\n\n <footer class=\"mc-modal__footer\">\n <span class=\"mc-modal__link\">\n <slot name=\"link\" />\n </span>\n <slot name=\"footer\" />\n </footer>\n </div>\n\n <MOverlay isvisible={open} dialoglabel=\"modal\" />\n</section>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/modal';\n @use '@mozaic-ds/styles/components/button';\n\n .mc-modal__icon:empty {\n display: none;\n }\n</style>\n"],"names":["open","$.prop","$$props","title","description","closable","element","onClose","event","$$render","consequent","consequent_1","$.bind_this","section","$$value"],"mappings":";;;;;;;;;;;;;;i0EAAA,qBAiCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EAAEG,mBAAW,EAAI,EAC3CC,EAEK,SAAAC,GAAU,CACjBP,EAAO,EAAK,EAEN,MAAAQ,EAAK,IAAO,YAAY,eAC5B,OAAQR,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBM,EAAQ,cAAcE,CAAK,CAC7B,yMAZ2C,GAAI,6IAiC9BD,sFALRF,EAAQ,GAAAI,EAAAC,CAAA,2EAcPN,EAAW,CAAA,CAAA,kBADZA,EAAW,GAAAK,EAAAE,CAAA,qLAcCX,EAAI,8BAnCdY,EAAAC,EAAAC,GAAAR,QAAAA,CAAO,kBAJV,WAAYN,KAAQ,SAAS,CAAA,EAAA,gBAAA,qBAGvBA,EAAI,CAAA,MAQ+BG,GAAK,eAdxD"}

package/dist/components/modal/Modal.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,sEAAsE,CAAC;AAC9E,OAAO,0EAA0E,CAAC;AAElF,QAAA,MAAM,IAAI,EAAE,~~IAkDX~~,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAQlB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;CAahB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAOlB,CAAC"}
1	+ {"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,sEAAsE,CAAC;AAC9E,OAAO,0EAA0E,CAAC;AAElF,QAAA,MAAM,IAAI,EAAE,IAgDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAQlB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;CAahB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAOlB,CAAC"}

package/dist/components/modal/Modal.stories.js CHANGED Viewed

@@ -46,10 +46,8 @@ const meta = {
         closable=${ifDefined(args.closable)}
         @update:open=${handleUpdateOpen}
       >
-        ${unsafeHTML(ifDefined(args.icon))}
-        ${unsafeHTML(ifDefined(args.default))}
-        ${unsafeHTML(ifDefined(args.link))}
-        ${unsafeHTML(ifDefined(args.footer))}
+        ${unsafeHTML(ifDefined(args.icon))} ${unsafeHTML(ifDefined(args.default))}
+        ${unsafeHTML(ifDefined(args.link))} ${unsafeHTML(ifDefined(args.footer))}
       </m-modal>
     `;
     },

package/dist/components/modal/Modal.svelte CHANGED Viewed

@@ -119,13 +119,13 @@
   transition: visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease;
   visibility: hidden;
   width: 100%;
-  border-radius: var(--radius-l, 1rem) var(--radius-l, 1rem) 0 0;
+  border-radius: var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;
   z-index: 3;
 }
 @media (width >= 680px) {
   .mc-modal__dialog {
     width: 38rem;
-    border-radius: var(--radius-l, 1rem);
+    border-radius: var(--border-radius-l, 1rem);
   }
 }
 .mc-modal.is-open .mc-modal__dialog {
@@ -238,7 +238,7 @@
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: var(--button-radius, 0.25rem);
+  border-radius: var(--button-border-radius-s, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -402,7 +402,7 @@
   cursor: not-allowed;
 }
 .mc-button--icon-button {
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   padding: 0;
 }
 .mc-button--loading .mc-button__loader {

package/dist/components/numberbadge/NumberBadge.js CHANGED Viewed

@@ -1,4 +1,4 @@
 import{c as i,p as m,a as g,b as o,f,t as u,i as v,j as p,k as b,d as h,r as x,e as z,g as k,h as _}from"../../custom-element.js";var w=f("<div> </div>");const y={hash:"svelte-sb883",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-number-badge.svelte-sb883 {color:var(--number-badge-color-text-standard, #ffffff);background-color:var(--number-badge-color-background-standard, #464e63);height:1rem;min-width:1rem;padding-inline:0.125rem;font-size:var(--font-size-25, 0.625rem);border-radius:var(--radius-l, 1rem);font-weight:var(--font-weight-semi-bold, 600);display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;line-height:1;}.mc-number-badge--m.svelte-sb883 {height:1.5rem;min-width:1.5rem;padding-inline:0.25rem;font-size:var(--font-size-50, 0.75rem);}.mc-number-badge--accent.svelte-sb883 {color:var(--number-badge-color-text-accent, #ffffff);background-color:var(--number-badge-color-background-accent, #117f03);}.mc-number-badge--danger.svelte-sb883 {color:var(--number-badge-color-text-danger, #ffffff);background-color:var(--number-badge-color-background-danger, #c61112);}.mc-number-badge--inverse.svelte-sb883 {color:var(--number-badge-color-text-inverse, #464e63);background-color:var(--number-badge-color-background-inverse, #ffffff);}`};function j(d,r){m(r,!0),g(d,y);let t=o(r,"label",7),n=o(r,"appearance",7,"standard"),s=o(r,"size",7,"s");var c={get label(){return t()},set label(e){t(e),b()},get appearance(){return n()},set appearance(e="standard"){n(e),b()},get size(){return s()},set size(e="s"){s(e),b()}},a=w(),l=h(a,!0);return x(a),u(()=>{z(a,1,k(["mc-number-badge",`mc-number-badge--${n()}`,`mc-number-badge--${s()}`]),"svelte-sb883"),_(l,t())}),v(d,a),p(c)}customElements.define("m-number-badge",i(j,{label:{},appearance:{},size:{}},[],[],!0));export{j as N};
+ */.mc-number-badge.svelte-sb883 {color:var(--number-badge-color-text-standard, #ffffff);background-color:var(--number-badge-color-background-standard, #464e63);height:1rem;min-width:1rem;padding-inline:0.125rem;font-size:var(--font-size-25, 0.625rem);border-radius:var(--border-radius-l, 1rem);font-weight:var(--font-weight-semi-bold, 600);display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;line-height:1;}.mc-number-badge--m.svelte-sb883 {height:1.5rem;min-width:1.5rem;padding-inline:0.25rem;font-size:var(--font-size-50, 0.75rem);}.mc-number-badge--accent.svelte-sb883 {color:var(--number-badge-color-text-accent, #ffffff);background-color:var(--number-badge-color-background-accent, #117f03);}.mc-number-badge--danger.svelte-sb883 {color:var(--number-badge-color-text-danger, #ffffff);background-color:var(--number-badge-color-background-danger, #c61112);}.mc-number-badge--inverse.svelte-sb883 {color:var(--number-badge-color-text-inverse, #464e63);background-color:var(--number-badge-color-background-inverse, #ffffff);}`};function j(d,r){m(r,!0),g(d,y);let t=o(r,"label",7),n=o(r,"appearance",7,"standard"),s=o(r,"size",7,"s");var c={get label(){return t()},set label(e){t(e),b()},get appearance(){return n()},set appearance(e="standard"){n(e),b()},get size(){return s()},set size(e="s"){s(e),b()}},a=w(),l=h(a,!0);return x(a),u(()=>{z(a,1,k(["mc-number-badge",`mc-number-badge--${n()}`,`mc-number-badge--${s()}`]),"svelte-sb883"),_(l,t())}),v(d,a),p(c)}customElements.define("m-number-badge",i(j,{label:{},appearance:{},size:{}},[],[],!0));export{j as N};
 //# sourceMappingURL=NumberBadge.js.map

package/dist/components/numberbadge/NumberBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberBadge.js","sources":["../../../src/components/numberbadge/NumberBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-number-badge' }} />\n\n<script lang=\"ts\">\n /*\n A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.\n /\n interface Props {\n /\n Content of the badge.\n /\n label: number;\n /\n Allows to define the badge appearance.\n /\n appearance?: 'danger' \| 'accent' \| 'inverse' \| 'standard';\n\n /\n Allows to define the badge size.\n */\n size?: 's' \| 'm';\n }\n\n let { label, appearance = 'standard', size = 's' }: Props = $props();\n</script>\n\n<div\n class={[\n 'mc-number-badge'~~,\n~~ `mc-number-badge--${appearance}~~`,\n~~ `mc-number-badge--${size}~~`,\n~~ ]}\n>\n {label}\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/number-badge';\n</style>\n"],"names":["label","$.prop","$$props","appearance","size"],"mappings":"~~;;+iCAAA~~,oBAsBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,sGAAtB,WAAU,6CAAS,IAAG,~~wDAK9C~~,~~sCACoBD~~,EAAU,CAAA,~~uBACVC~~,GAAI,~~yBAGzBJ~~,GAAK,~~eATR~~"}
1	+ {"version":3,"file":"NumberBadge.js","sources":["../../../src/components/numberbadge/NumberBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-number-badge' }} />\n\n<script lang=\"ts\">\n /*\n A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.\n /\n interface Props {\n /\n Content of the badge.\n /\n label: number;\n /\n Allows to define the badge appearance.\n /\n appearance?: 'danger' \| 'accent' \| 'inverse' \| 'standard';\n\n /\n Allows to define the badge size.\n */\n size?: 's' \| 'm';\n }\n\n let { label, appearance = 'standard', size = 's' }: Props = $props();\n</script>\n\n<div class={['mc-number-badge', `mc-number-badge--${appearance}`, `mc-number-badge--${size}`]}>\n {label}\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/number-badge';\n</style>\n"],"names":["label","$.prop","$$props","appearance","size"],"mappings":";;sjCAAA,oBAsBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,sGAAtB,WAAU,6CAAS,IAAG,wDAGrC,sCAAuCD,EAAU,CAAA,uBAAwBC,GAAI,yBACvFJ,GAAK,eAHR"}

package/dist/components/numberbadge/NumberBadge.svelte CHANGED Viewed

@@ -23,13 +23,7 @@
   let { label, appearance = 'standard', size = 's' }: Props = $props();
 </script>
-<div
-  class={[
-    'mc-number-badge',
-    `mc-number-badge--${appearance}`,
-    `mc-number-badge--${size}`,
-  ]}
->
+<div class={['mc-number-badge', `mc-number-badge--${appearance}`, `mc-number-badge--${size}`]}>
   {label}
 </div>
@@ -43,7 +37,7 @@
   min-width: 1rem;
   padding-inline: 0.125rem;
   font-size: var(--font-size-25, 0.625rem);
-  border-radius: var(--radius-l, 1rem);
+  border-radius: var(--border-radius-l, 1rem);
   font-weight: var(--font-weight-semi-bold, 600);
   display: inline-flex;
   align-items: center;

package/dist/components/numberbadge/NumberBadge.svelte.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/numberbadge/NumberBadge.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAE1D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;~~AAqBH~~,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"NumberBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/numberbadge/NumberBadge.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAE1D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAiBH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/overlay/Overlay.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Overlay.stories.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/Overlay.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,~~IA+BX~~,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
1	+ {"version":3,"file":"Overlay.stories.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/Overlay.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IA4BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

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

@@ -25,10 +25,7 @@ const meta = {
         },
     },
     render: (args) => html `
-    <m-overlay
-      isvisible=${ifDefined(args.isvisible)}
-      dialoglabel=${ifDefined(args.dialoglabel)}
-    >
+    <m-overlay isvisible=${ifDefined(args.isvisible)} dialoglabel=${ifDefined(args.dialoglabel)}>
       ${unsafeHTML(ifDefined(args.default))}
     </m-overlay>
   `,

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

@@ -1,14 +1,14 @@
-import{c as I,p as S,b as o,A as U,t as _,i as h,j as D,k as i,e as V,g as W,v as ne,a as ce,w as y,l as de,f as z,d as N,s as K,m as l,L 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 ue,i as fe}from"../../each.js";import{s as x,a as X,d as ve,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 me=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function j(g,a){S(a,!1);let d=o(a,"id",12,void 0),u=o(a,"style",12,void 0),c=o(a,"className",12,void 0),f=o(a,"fill",12,void 0),v=o(a,"size",12,"1.5rem");var m={get id(){return d()},set id(t){d(t),i()},get style(){return u()},set style(t){u(t),i()},get className(){return c()},set className(t){c(t),i()},get fill(){return f()},set fill(t){f(t),i()},get size(){return v()},set size(t){v(t),i()}},n=me();return _(()=>{x(n,"id",d()),X(n,u()),V(n,0,W(c())),x(n,"fill",f())}),h(g,n),D(m)}customElements.define("chevron-left-24",I(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 A(g,a){S(a,!1);let d=o(a,"id",12,void 0),u=o(a,"style",12,void 0),c=o(a,"className",12,void 0),f=o(a,"fill",12,void 0),v=o(a,"size",12,"1.5rem");var m={get id(){return d()},set id(t){d(t),i()},get style(){return u()},set style(t){u(t),i()},get className(){return c()},set className(t){c(t),i()},get fill(){return f()},set fill(t){f(t),i()},get size(){return v()},set size(t){v(t),i()}},n=pe();return _(()=>{x(n,"id",d()),X(n,u()),V(n,0,W(c())),x(n,"fill",f())}),h(g,n),D(m)}customElements.define("chevron-right-24",I(A,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function be(g,a){const d=Number(g.target.value);a(d)}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{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:`/**
  * 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-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--radius-s, 0.25rem);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;background-repeat:no-repeat;background-size:1rem;}.mc-select.svelte-19eta05:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-select.svelte-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-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(g,a){S(a,!0),ce(g,ye);let d=o(a,"id",7),u=o(a,"value",15,1),c=o(a,"total",7,10),f=o(a,"compact",7),v=o(a,"selectLabel",7,"Page selector"),m=o(a,"prefixlabel",7,"Page"),n=o(a,"pagelabel",7,"of"),t=y(de(Number(u())));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)}var Z={get id(){return d()},set id(e){d(e),i()},get value(){return u()},set value(e=1){u(e),i()},get total(){return c()},set total(e=10){c(e),i()},get compact(){return f()},set compact(e){f(e),i()},get selectLabel(){return v()},set selectLabel(e="Page selector"){v(e),i()},get prefixlabel(){return m()},set prefixlabel(e="Page"){m(e),i()},get pagelabel(){return n()},set pagelabel(e="of"){n(e),i()}},C=_e(),q=N(C);{var $=e=>{{let s=k(()=>l(P)());Q(e,{iconposition:"only","aria-label":"Previous page",get disabled(){return l(s)},onclick:F,$$slots:{icon:(r,p)=>{j(r,{slot:"icon"})}}})}},ee=e=>{{let s=k(()=>l(P)());T(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:F,$$slots:{icon:(r,p)=>{j(r,{slot:"icon"})}}})}};M(q,e=>{f()?e(ee,!1):e($)})}var G=K(q,2);{var te=e=>{var s=xe(),r=N(s);r.__change=[be,u],ue(r,21,()=>l(Y)(),fe,(p,E)=>{var b=he(),oe=N(b);w(b);var H={};_((ie,J)=>{ge(b,ie),O(oe,`${m()??""}
+/* 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)&&(b.value=(b.__value=J)??"")},[()=>Number(l(E))==Number(l(t)),()=>Number(l(E))]),h(p,b)}),w(r),w(s),_(()=>{x(r,"id",d()),x(r,"aria-label",v()),r.disabled=c()<=1}),ve(r,()=>l(t),p=>B(t,p)),h(e,s)},ae=e=>{var s=we(),r=N(s);w(s),_(()=>O(r,`${m()??""}
-      ${u()??""}
+            ${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=>{f()?e(ae,!1):e(te)})}var le=K(G,2);{var se=e=>{{let s=k(()=>l(L)());Q(e,{iconposition:"only","aria-label":"Next page",get disabled(){return l(s)},onclick:R,$$slots:{icon:(r,p)=>{A(r,{slot:"icon"})}}})}},re=e=>{{let s=k(()=>l(L)());T(e,{outlined:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:R,$$slots:{icon:(r,p)=>{A(r,{slot:"icon"})}}})}};M(le,e=>{f()?e(re,!1):e(se)})}return w(C),h(g,C),D(Z)}ne(["change"]);customElements.define("m-pagination",I(Ne,{id:{},value:{},total:{},compact:{},selectLabel:{},prefixlabel:{},pagelabel:{}},[],[],!0));
+      ${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));
 //# sourceMappingURL=Pagination.js.map

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

	@@ -1 +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\n outlined\n aria-label=\"Previous page\"\n disabled={isFirstPage()}\n onclick={previous}\n >\n <ChevronLeft24 slot=\"icon\" />\n </IconButton>\n {/if}\n\n {#if !compact}\n <div class=\"mc-pagination__field\">\n <select\n {id}\n class=\"mc-select mc-pagination__select\"\n aria-label={selectLabel}\n disabled={total <= 1}\n bind:value={selected}\n onchange={onSelectChange}\n >\n {#each pages() as page}\n <option\n value={Number(page)}\n selected={Number(page) == Number(selected)}\n >\n {prefixlabel}\n {page}\n {pagelabel}\n {total}\n </option>\n {/each}\n </select>\n </div>\n {:else}\n <span class=\"mc-pagination__label\" aria-current=\"page\">\n {prefixlabel}\n {value}\n {pagelabel}\n {total}\n </span>\n {/if}\n\n {#if !compact}\n <Button\n iconposition=\"only\"\n aria-label=\"Next page\"\n disabled={isLastPage()}\n onclick={next}\n >\n <ChevronRight24 slot=\"icon\" />\n </Button>\n {:else}\n <IconButton\n outlined\n aria-label=\"Next page\"\n disabled={isLastPage()}\n onclick={next}\n >\n <ChevronRight24 slot=\"icon\" />\n </IconButton>\n {/if}\n</nav>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/pagination';\n @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","style","className","fill","size","~~onSelectChange~~","~~event~~","value","~~selected","$.prop","$$props","~~total","compact","selectLabel","prefixlabel","pagelabel","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","$$render","alternate","consequent","$.each","select","page","$.bind_select_value","$$value","alternate_1","consequent_1","alternate_2","consequent_2"],"mappings":"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~~,gHCmEWE,GAAeC,EAAYC,EAAE,CAC9B,MAAAC,EAAW,OAAQF,EAAM,OAA6B,KAAK,EACjEC,EAAQC,CAAQ,CAClB~~;;;;;;~~2DA7EF~~,~~sBA8CIR~~,~~EAAES~~,EAAAC,EAAA,KAAA,CAAA,~~EACFH~~,iBAAkB,CAAC,~~EACnBI~~,gBAAQ,EAAE,EACVC,~~EAAOH~~,EAAAC,EAAA,UAAA,CAAA,~~EACPG~~,sBAAc,eAAe,EAC7BC,sBAAc,MAAM,EACpBC,oBAAY,IAAI,~~EAGdP~~,~~EAAQQ~~,EAAAC,GAAU,~~OAAOV~~,EAAK,CAAA,CAAA,CAAA,~~QAE5BW~~,EAAWF,EAAA,IAAAG,~~EAAgBX~~,CAAQ,GAAI,CAAC,~~EACxCY~~,EAAUJ,EAAA,IAAAG,~~EAAgBX~~,CAAQ,~~GAAIG~~,GAAK,~~EAE3CU~~,EAAKL,EAAA,IAAgB,MAAM,MAAO,~~OAAQL~~,EAAK,CAAA,EAAA,~~CAAKW~~,EAAGC,IAAMA,EAAI,CAAC,CAAA,EAE/D,SAAAC,GAAW,CACbL,EAAAD,CAAW,KACdO,~~EAAAjB~~,EAAW,~~OAAMW~~,~~EAACX~~,CAAQ,GAAI,CAAC,CAEnC,CAES,~~SAAAkB~~,GAAO,CACTP,EAAAC,CAAU,KACbK,~~EAAAjB~~,EAAW,~~OAAMW~~,~~EAACX~~,CAAQ,GAAI,CAAC,CAEnC,~~qFAzBoB~~,EAAC,+CACX,GAAE,8GAEI,gBAAe,2DACf,OAAM,uDACR,KAAI,~~oDAiCJU~~,CAAW,EAAA,CAAA,4FACZM,~~uEAQCN~~,CAAW,EAAA,CAAA,~~oFACZM~~,~~yDAdPZ~~,EAAO,~~EAAAe~~,EAAAC,GAAA,EAAA,EAAAD,EAAAE,~~CAAA~~,~~2DA4BGxB~~,~~GAAcE~~,~~CAAA,EAEjBuB,~~GAAAC,EAAA,GAAA,~~IAAAZ~~,EAAAE,CAAK,~~UAAMW~~,IAAI,~~8DAKjBlB~~,EAAW,GAAA,EAAA;AAAA,~~gBACXkB~~,CAAI,GAAA,EAAA;AAAA,~~cACJjB~~,EAAS,GAAA,EAAA;AAAA,cACTJ,EAAK,GAAA,EAAA,EAAA,~~2CALI~~,IAAA,~~OAAMQ~~,~~EAACa~~,CAAI,CAAA,GAAK,~~SAAOxB~~,CAAQ,CAAA,~~EADlC~~,IAAA,~~SAAOwB~~,CAAI,CAAA,~~6DAPVnB~~,GAAW,~~EACbkB~~,EAAA,~~SAAApB~~,EAAK,GAAI,~~IACPsB~~,GAAAF,EAAA,~~IAAAZ~~,~~EAAAX~~,CAAQ,OAARA,~~EAAQ0B~~,CAAA,CAAA,~~qDAkBrBpB~~,EAAW,GAAA,EAAA;AAAA,~~QACXP~~,EAAK,GAAA,EAAA;AAAA,~~QACLQ~~,EAAS,GAAA,EAAA;AAAA,QACTJ,EAAK,GAAA,EAAA,EAAA,CAAA,~~kBA5BJC~~,EAAO,~~EAAAe~~,EAAAQ,GAAA,EAAA,EAAAR,EAAAS,EAAA,~~6CAoCChB~~,CAAU,EAAA,CAAA,~~wFACXM~~,~~uEAQCN~~,CAAU,EAAA,CAAA,~~gFACXM~~,~~0DAdPd~~,EAAO,~~EAAAe~~,EAAAU,GAAA,EAAA,EAAAV,EAAAW,EAAA,~~2BAvDf~~","x_google_ignoreList":[0,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]}

package/dist/components/pagination/Pagination.spec.js CHANGED Viewed

@@ -23,7 +23,7 @@ describe('m-pagination component', () => {
         expect(nextBtn).not.toBeDisabled();
     });
     it('updates value when select changes', async () => {
-        const { container, getByLabelText } = render(Pagination, {
+        const { getByLabelText } = render(Pagination, {
             props: baseProps,
         });
         const select = getByLabelText(baseProps.selectLabel);
@@ -50,7 +50,7 @@ describe('m-pagination component', () => {
     });
     it('disables next button on last page', async () => {
         const props = { ...baseProps, value: 5, total: 5 };
-        const { container, getByLabelText } = render(Pagination, { props });
+        const { container } = render(Pagination, { props });
         const nextBtn = container.querySelector('button[aria-label="Next page"]');
         expect(nextBtn.disabled).toBe(true);
         const prevBtn = container.querySelector('button[aria-label="Previous page"]');

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

@@ -89,12 +89,7 @@
       <ChevronLeft24 slot="icon" />
     </Button>
   {:else}
-    <IconButton
-      outlined
-      aria-label="Previous page"
-      disabled={isFirstPage()}
-      onclick={previous}
-    >
+    <IconButton outlined aria-label="Previous page" disabled={isFirstPage()} onclick={previous}>
       <ChevronLeft24 slot="icon" />
     </IconButton>
   {/if}
@@ -109,11 +104,8 @@
         bind:value={selected}
         onchange={onSelectChange}
       >
-        {#each pages() as page}
-          <option
-            value={Number(page)}
-            selected={Number(page) == Number(selected)}
-          >
+        {#each pages() as page, index (index)}
+          <option value={Number(page)} selected={Number(page) == Number(selected)}>
             {prefixlabel}
             {page}
             {pagelabel}
@@ -132,21 +124,11 @@
   {/if}
   {#if !compact}
-    <Button
-      iconposition="only"
-      aria-label="Next page"
-      disabled={isLastPage()}
-      onclick={next}
-    >
+    <Button iconposition="only" aria-label="Next page" disabled={isLastPage()} onclick={next}>
       <ChevronRight24 slot="icon" />
     </Button>
   {:else}
-    <IconButton
-      outlined
-      aria-label="Next page"
-      disabled={isLastPage()}
-      onclick={next}
-    >
+    <IconButton outlined aria-label="Next page" disabled={isLastPage()} onclick={next}>
       <ChevronRight24 slot="icon" />
     </IconButton>
   {/if}
@@ -183,8 +165,7 @@
   padding: 0 3rem 0 0.75rem;
   background-position: right 1rem center;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
-  border: var(--border-s, 1px) solid var(--forms-color-border-default, #666666);
-  border-radius: var(--radius-s, 0.25rem);
+  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);
@@ -192,10 +173,11 @@
   text-overflow: ellipsis;
   background-repeat: no-repeat;
   background-size: 1rem;
+  border-radius: var(--border-radius-s, 0.25rem);
 }
 .mc-select:hover {
   border-color: var(--forms-color-border-hover, #4d4d4d);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-select:focus {
   box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
@@ -216,11 +198,11 @@
 }
 .mc-select.is-invalid {
   border-color: var(--forms-color-border-invalid, #ea302d);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);
 }
 .mc-select.is-invalid:hover {
   border-color: var(--forms-color-border-invalid-hover, #c61112);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
 }
 .mc-select--s {
   font-size: var(--font-size-100, 0.875rem);

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

@@ -1,8 +1,8 @@
-import{v as q,c as A,p as B,a as G,b as r,f as D,s as L,d as n,e as E,g as H,w as J,t as M,i as V,j as K,x as N,m as p,k as l,r as s,h as Z}from"../../custom-element.js";import{i as Q}from"../../if.js";import{r as R,s as c}from"../../attributes.js";import{c as T}from"../../input.js";import{c as U}from"../../custom-element-forward-events.js";function W(d,e){N(e,!p(e))}const X=(d,e)=>e("");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{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:`/**
  * 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-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-radius-border, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:0.5rem;}.mc-text-input__control.svelte-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-s, 1px) 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-s, 1px) 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-s, 1px) 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.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-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-radius, 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(--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(d,e){B(e,!0),G(d,tt);let h=r(e,"id",7),g=r(e,"name",7),i=r(e,"value",7),_=r(e,"placeholder",7),u=r(e,"isinvalid",7),v=r(e,"disabled",7),w=r(e,"readonly",7),x=r(e,"isclearable",7),k=r(e,"clearlabel",7,"Clear content"),b=r(e,"buttonlabel",23,()=>({show:"Show",hide:"Hide"})),m=J(!1);var F={get id(){return h()},set id(t){h(t),l()},get name(){return g()},set name(t){g(t),l()},get value(){return i()},set value(t){i(t),l()},get placeholder(){return _()},set placeholder(t){_(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 x()},set isclearable(t){x(t),l()},get clearlabel(){return k()},set clearlabel(t="Clear content"){k(t),l()},get buttonlabel(){return b()},set buttonlabel(t={show:"Show",hide:"Hide"}){b(t),l()}},f=$(),o=n(f);R(o);var S=L(o,2);{var I=t=>{var y=Y(),z=n(y);z.__click=[X,i];var C=L(n(z),2),P=n(C,!0);s(C),s(z),s(y),M(()=>Z(P,k())),V(t,y)};Q(S,t=>{x()&&i()&&t(I)})}var a=L(S,2);E(a,1,H(["mc-button","mc-button--s","mc-button--ghost"]),"svelte-1luc9tv"),a.__click=[W,m];var j=n(a),O=n(j,!0);return s(j),s(a),s(f),M(()=>{E(f,1,H(["mc-password-input","mc-text-input",u()&&"is-invalid"]),"svelte-1luc9tv"),c(o,"id",h()),c(o,"name",g()),c(o,"type",p(m)?"text":"password"),c(o,"placeholder",_()),o.disabled=v(),o.readOnly=w(),c(o,"aria-invalid",u()),a.disabled=v(),c(a,"aria-checked",p(m)),Z(O,p(m)?b().hide:b().show)}),T(o,i),V(d,f),K(F)}q(["click"]);customElements.define("m-password-input",A(et,{id:{},name:{},value:{},placeholder:{},isinvalid:{},disabled:{},readonly:{},isclearable:{},clearlabel:{},buttonlabel:{}},[],[],!0,U));
+/* 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));
 //# 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 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,\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\n class=\"mc-controls-options__button\"\n type=\"button\"\n onclick={resetValue}\n >\n <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n />\n </svg>\n <span class=\"mc-controls-options__label\">{clearlabel}</span>\n </button>\n </div>\n {/if}\n\n <button\n 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":["~~toggleVisibility~~","~~_","isVisible","~~$.~~set~~","~~resetValue~~","~~__1~~","value","id","~~$.prop~~","~~$$props~~","~~name~~","~~placeholder~~","~~isinvalid~~","~~disabled~~","~~readonly~~","~~isclearable~~","~~clearlabel~~","~~buttonlabel~~","$$value","$$render","consequent","$.set_text","text_1","$.get","customElementForwardEvents"],"mappings":"~~uVAyEW,SAAAA,EAAgBC,EAAAC,EAAG,CAC1BC,EAAAD,KAAaA,CAAS,CAAA,CACxB,OAEME,EAAU,CAAAC,EAAAC,IAAUA,EAAQ,EAAE~~;;;;;;~~g7GA7EtC~~,~~qBA2DIC~~,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,~~EACJH~~,~~EAAKE~~,EAAAC,EAAA,QAAA,~~CAAA~~,~~EACLE~~,~~EAAWH~~,EAAAC,EAAA,cAAA,CAAA,~~EACXG~~,~~EAASJ~~,EAAAC,EAAA,YAAA,CAAA,~~EACTI~~,~~EAAQL~~,EAAAC,EAAA,WAAA,CAAA,~~EACRK~~,~~EAAQN~~,EAAAC,EAAA,WAAA,CAAA,~~EACRM~~,~~EAAWP~~,EAAAC,EAAA,cAAA,CAAA,~~EACXO~~,qBAAa,eAAe,EAC5BC,6BAAgB,KAAM,OAAQ,KAAM,MAAM,EAAA,~~EAGxCf~~,IAAmB,EAAK,~~mdAJb~~,gBAAe,yCACZ,IAAA,~~YAAAgB~~,EAAA,CAAA,KAAM,OAAQ,KAAM,QAAM,~~kFA6B7Bd~~,~~EAAUE~~,~~CAAA,qDAQuBU,~~EAAU,CAAA,CAAA,~~kBAbrDD~~,EAAW,~~GAAIT~~,KAAKa,EAAAC,CAAA,~~0BAmBf~~,YAAa,eAAgB,kBAAkB,CAAA,EAAA,gBAAA,~~aAM9CpB~~,~~EAAgBE~~,~~CAAA,6DArChB,~~oBAAqB,~~gBAAiBU~~,KAAa,~~4EAKtDV~~,CAAS,EAAG,OAAS,UAAU,~~0EAKvBU~~,GAAS,~~sCA0BTV~~,CAAS,CAAA,~~EAGhBmB~~,EAAAC,EAAAC,~~EAAArB~~,CAAS,~~EAAGe~~,EAAW,EAAC,KAAOA,EAAW,EAAC,IAAI,~~sBAzC1D~~,~~8LA3EYO~~"}
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"}

package/dist/components/passwordinput/PasswordInput.spec.js CHANGED Viewed

@@ -33,7 +33,7 @@ describe('m-password-input component', () => {
         expect(toggleBtn.getAttribute('aria-checked')).toBe('false');
     });
     it('shows clear button when isclearable is true and value is not empty', async () => {
-        const { container, component } = render(PasswordInput, {
+        const { container } = render(PasswordInput, {
             props: { ...baseProps, isclearable: true, value: 'secret' },
         });
         const clearBtn = container.querySelector('.mc-controls-options__button');

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

@@ -59,7 +59,7 @@
   let {
     id,
     name,
-    value,
+    value = $bindable(),
     placeholder,
     isinvalid,
     disabled,
@@ -92,11 +92,7 @@
   />
   {#if isclearable && value}
     <div class="mc-controls-options">
-      <button
-        class="mc-controls-options__button"
-        type="button"
-        onclick={resetValue}
-      >
+      <button class="mc-controls-options__button" type="button" onclick={resetValue}>
         <svg class="mc-controls-options__icon" aria-hidden="true">
           <path
             fill-rule="evenodd"
@@ -133,8 +129,8 @@
 .mc-text-input {
   transition: box-shadow 200ms ease;
   background-color: var(--forms-color-background-default, #ffffff);
-  border: var(--border-s, 1px) solid var(--forms-color-border-default, #666666);
-  border-radius: var(--forms-radius-border, 0.25rem);
+  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;
@@ -188,7 +184,7 @@
 }
 .mc-text-input:hover:not(:focus-within) {
   border-color: var(--forms-color-border-hover, #4d4d4d);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-text-input:has(input:disabled) {
   background-color: var(--forms-color-background-disabled, #d9d9d9);
@@ -230,11 +226,11 @@
 }
 .mc-text-input.is-invalid {
   border-color: var(--forms-color-border-invalid, #ea302d);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);
 }
 .mc-text-input.is-invalid:hover:not(:focus-within) {
   border-color: var(--forms-color-border-invalid-hover, #c61112);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
 }
 .mc-text-input * {
   box-sizing: border-box;
@@ -272,7 +268,7 @@
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: var(--button-radius, 0.25rem);
+  border-radius: var(--button-border-radius-s, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -436,7 +432,7 @@
   cursor: not-allowed;
 }
 .mc-button--icon-button {
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   padding: 0;
 }
 .mc-button--loading .mc-button__loader {
@@ -595,7 +591,7 @@
   appearance: none;
   cursor: pointer;
   padding: 0;
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
 }
 .mc-controls-options__button:hover .mc-controls-options__icon {
   fill: var(--forms-color-icon-clear-hover, #4d4d4d);

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

@@ -46,7 +46,7 @@ interface Props {
         hide: string;
     };
 }
-declare const PasswordInput: import("svelte").Component<Props, {}, "">;
+declare const PasswordInput: import("svelte").Component<Props, {}, "value">;
 type PasswordInput = ReturnType<typeof PasswordInput>;
 export default PasswordInput;
 //# sourceMappingURL=PasswordInput.svelte.d.ts.map