@mozaic-ds/web-components 1.5.1 → 1.7.0

package/dist/components/pagination/Pagination.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-pagination',\n    props: {\n      compact: { reflect: true, type: 'Boolean', attribute: 'compact' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { ChevronLeft24, ChevronRight24 } from '@mozaic-ds/icons-svelte';\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  /**\n   * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pagination.\n     */\n    id: string;\n    /**\n     * The current value of the selected page.\n     */\n    value: number;\n    /**\n     * If `true`, display a compact version without the select.\n     */\n    compact?: boolean;\n    /**\n     * Total number of pages.\n     */\n    total?: number;\n    /**\n     * Accessible label for the select of the pagination.\n     */\n    selectLabel?: string;\n    /**\n     * Word displayed before the current page number.\n     */\n    prefixlabel?: string;\n    /**\n     * Word displayed between the current page number and total page number.\n     */\n    pagelabel?: string;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    total = 10,\n    compact,\n    selectLabel = 'Page selector',\n    prefixlabel = 'Page',\n    pagelabel = 'of',\n  }: Props = $props();\n\n  let selected = $state(Number(value));\n\n  const isFirstPage = $state(() => selected <= 1);\n  const isLastPage = $state(() => selected >= total);\n\n  const pages = $state(() => Array.from({ length: total }, (_, i) => i + 1));\n\n  function previous() {\n    if (!isFirstPage()) {\n      selected = Number(selected) - 1;\n    }\n  }\n\n  function next() {\n    if (!isLastPage()) {\n      selected = Number(selected) + 1;\n    }\n  }\n\n  function onSelectChange(event: Event) {\n    const selected = Number((event.target as HTMLSelectElement).value);\n    value = selected;\n  }\n</script>\n\n<nav class=\"mc-pagination\" aria-label=\"pagination\">\n  {#if !compact}\n    <Button\n      iconposition=\"only\"\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 slot=\"icon\" />\n    </Button>\n  {:else}\n    <IconButton outlined aria-label=\"Previous page\" disabled={isFirstPage()} onclick={previous}>\n      <ChevronLeft24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n\n  {#if !compact}\n    <div class=\"mc-pagination__field\">\n      <select\n        {id}\n        class=\"mc-select mc-pagination__select\"\n        aria-label={selectLabel}\n        disabled={total <= 1}\n        bind:value={selected}\n        onchange={onSelectChange}\n      >\n        {#each pages() as page, index (index)}\n          <option value={Number(page)} selected={Number(page) == Number(selected)}>\n            {prefixlabel}\n            {page}\n            {pagelabel}\n            {total}\n          </option>\n        {/each}\n      </select>\n    </div>\n  {:else}\n    <span class=\"mc-pagination__label\" aria-current=\"page\">\n      {prefixlabel}\n      {value}\n      {pagelabel}\n      {total}\n    </span>\n  {/if}\n\n  {#if !compact}\n    <Button iconposition=\"only\" aria-label=\"Next page\" disabled={isLastPage()} onclick={next}>\n      <ChevronRight24 slot=\"icon\" />\n    </Button>\n  {:else}\n    <IconButton outlined aria-label=\"Next page\" disabled={isLastPage()} onclick={next}>\n      <ChevronRight24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pagination';\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","$.prop","$$props","value","total","compact","selectLabel","prefixlabel","pagelabel","selected","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","onSelectChange","event","nav","root","Button","$$anchor","ChevronLeft24","IconButton","$$render","alternate","consequent","div","root_5","select","$.child","page","option","root_6","$0","$1","$.reset","$.set_attribute","$$value","span","root_7","alternate_1","consequent_1","ChevronRight24","alternate_2","consequent_2"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-pagination',\n    props: {\n      compact: { reflect: true, type: 'Boolean', attribute: 'compact' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { ChevronLeft24, ChevronRight24 } from '@mozaic-ds/icons-svelte';\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  /**\n   * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pagination.\n     */\n    id: string;\n    /**\n     * The current value of the selected page.\n     */\n    value: number;\n    /**\n     * If `true`, display a compact version without the select.\n     */\n    compact?: boolean;\n    /**\n     * Total number of pages.\n     */\n    total?: number;\n    /**\n     * Accessible label for the select of the pagination.\n     */\n    selectLabel?: string;\n    /**\n     * Word displayed before the current page number.\n     */\n    prefixlabel?: string;\n    /**\n     * Word displayed between the current page number and total page number.\n     */\n    pagelabel?: string;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    total = 10,\n    compact,\n    selectLabel = 'Page selector',\n    prefixlabel = 'Page',\n    pagelabel = 'of',\n  }: Props = $props();\n\n  let selected = $state(Number(value));\n\n  const isFirstPage = $state(() => selected <= 1);\n  const isLastPage = $state(() => selected >= total);\n\n  const pages = $state(() => Array.from({ length: total }, (_, i) => i + 1));\n\n  function previous() {\n    if (!isFirstPage()) {\n      selected = Number(selected) - 1;\n    }\n  }\n\n  function next() {\n    if (!isLastPage()) {\n      selected = Number(selected) + 1;\n    }\n  }\n\n  function onSelectChange(event: Event) {\n    const selected = Number((event.target as HTMLSelectElement).value);\n    value = selected;\n  }\n</script>\n\n<nav class=\"mc-pagination\" aria-label=\"pagination\">\n  {#if !compact}\n    <Button\n      iconposition=\"only\"\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 slot=\"icon\" />\n    </Button>\n  {:else}\n    <IconButton outlined aria-label=\"Previous page\" disabled={isFirstPage()} onclick={previous}>\n      <ChevronLeft24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n\n  {#if !compact}\n    <div class=\"mc-pagination__field\">\n      <div class=\"mc-select mc-pagination__select\">\n        <select\n          {id}\n          class=\"mc-select__control\"\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    </div>\n  {:else}\n    <span class=\"mc-pagination__label\" aria-current=\"page\">\n      {prefixlabel}\n      {value}\n      {pagelabel}\n      {total}\n    </span>\n  {/if}\n\n  {#if !compact}\n    <Button iconposition=\"only\" aria-label=\"Next page\" disabled={isLastPage()} onclick={next}>\n      <ChevronRight24 slot=\"icon\" />\n    </Button>\n  {:else}\n    <IconButton outlined aria-label=\"Next page\" disabled={isLastPage()} onclick={next}>\n      <ChevronRight24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pagination';\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","$.prop","$$props","value","total","compact","selectLabel","prefixlabel","pagelabel","selected","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","onSelectChange","event","nav","root","Button","$$anchor","ChevronLeft24","IconButton","$$render","alternate","consequent","div","root_5","div_1","select","$.child","page","option","root_6","$0","$1","$.reset","$.set_attribute","$.delegated","$$value","span","root_7","alternate_1","consequent_1","ChevronRight24","alternate_2","consequent_2"],"mappings":"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"}

package/dist/components/pagination/Pagination.svelte

@@ -98,23 +98,25 @@
 
   {#if !compact}
     <div class="mc-pagination__field">
-      <select
-        {id}
-        class="mc-select mc-pagination__select"
-        aria-label={selectLabel}
-        disabled={total <= 1}
-        bind:value={selected}
-        onchange={onSelectChange}
-      >
-        {#each pages() as page, index (index)}
-          <option value={Number(page)} selected={Number(page) == Number(selected)}>
-            {prefixlabel}
-            {page}
-            {pagelabel}
-            {total}
-          </option>
-        {/each}
-      </select>
+      <div class="mc-select mc-pagination__select">
+        <select
+          {id}
+          class="mc-select__control"
+          aria-label={selectLabel}
+          disabled={total <= 1}
+          bind:value={selected}
+          onchange={onSelectChange}
+        >
+          {#each pages() as page, index (index)}
+            <option value={Number(page)} selected={Number(page) == Number(selected)}>
+              {prefixlabel}
+              {page}
+              {pagelabel}
+              {total}
+            </option>
+          {/each}
+        </select>
+      </div>
     </div>
   {:else}
     <span class="mc-pagination__label" aria-current="page">
@@ -158,6 +160,24 @@
 
 /* stylelint-disable string-no-newline */
 .mc-select {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+.mc-select::after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  right: 1rem;
+  transform: translateY(-50%);
+  width: 1rem;
+  height: 1rem;
+  background-color: var(--forms-color-icon-interactive, #000000);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E") no-repeat center/contain;
+}
+.mc-select__control {
   appearance: none;
   font-family: inherit;
   transition: box-shadow 200ms ease;
@@ -166,47 +186,43 @@
   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:hover {
+.mc-select__control: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:focus {
+.mc-select__control: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: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");
+.mc-select__control:disabled {
   background-color: var(--forms-color-background-disabled, #d9d9d9);
   border-color: transparent;
   cursor: not-allowed;
   box-shadow: none;
   color: var(--forms-color-text-disabled, #737373);
 }
-.mc-select--readonly {
+.mc-select__control--readonly {
   border-color: var(--forms-color-border-read-only, #cccccc);
   pointer-events: none;
 }
-.mc-select.is-invalid {
+.mc-select__control.is-invalid {
   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-select.is-invalid:hover {
+.mc-select__control.is-invalid:hover {
   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-select--s {
+.mc-select--s .mc-select__control {
   font-size: var(--font-size-100, 0.875rem);
   line-height: var(--line-height-s, 1.3);
   height: 2rem;

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

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

package/dist/components/passwordinput/PasswordInput.js

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

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

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

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

@@ -3,7 +3,7 @@ import './PasswordInput.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
-export declare const WithValue: Story;
+export declare const Value: Story;
 export declare const Default: Story;
 export declare const Clearable: Story;
 export declare const Disabled: Story;

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

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

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

@@ -5,7 +5,7 @@ import './PasswordInput.svelte';
 const meta = {
     title: 'Form Elements/PasswordInput',
     component: 'm-password-input',
-    subcomponents: { 'Field': 'm-field' },
+    subcomponents: { Field: 'm-field' },
     args: {
         id: 'passwordInputId',
         placeholder: 'Enter your password',
@@ -43,7 +43,7 @@ const meta = {
     },
 };
 export default meta;
-export const WithValue = {
+export const Value = {
     args: {
         id: 'withValueId',
         value: 'Magic-word-123',

package/dist/components/passwordinput/PasswordInput.svelte

@@ -145,10 +145,10 @@
   display: block;
   width: 100%;
   height: 3rem;
-  box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  box-sizing: border-box;
 }
 .mc-text-input__control {
   background-color: transparent;
@@ -175,11 +175,17 @@
   font-size: var(--font-size-150, 1rem);
   line-height: var(--line-height-s, 1.3);
   font-weight: var(--font-weight-regular, 400);
+  color: var(--forms-color-text-default, #000000);
   flex-grow: 1;
 }
 .mc-text-input__control::placeholder {
   color: var(--forms-color-placeholder, #666666);
 }
+.mc-text-input__addon {
+  font-size: var(--font-size-150, 1rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  color: var(--forms-color-text-default, #000000);
+}
 .mc-text-input__icon {
   fill: var(--forms-color-icon-default, #666666);
   height: 1.5rem;
@@ -207,16 +213,16 @@
   border-color: var(--forms-color-border-read-only, #cccccc);
   pointer-events: none;
 }
-.mc-text-input:has(.mc-text-input__icon) {
+.mc-text-input:has(.mc-text-input__icon), .mc-text-input:has(.mc-text-input__addon) {
   padding-inline-start: 0.6875rem;
 }
-.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control {
+.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control, .mc-text-input:has(.mc-text-input__addon) .mc-text-input__control {
   padding-inline-start: 0;
 }
-.mc-text-input:has(.mc-controls-options) {
+.mc-text-input:has(.mc-controls-options), .mc-text-input:has(.mc-text-input__addon) {
   padding-inline-end: 0.6875rem;
 }
-.mc-text-input:has(.mc-controls-options) .mc-text-input__control {
+.mc-text-input:has(.mc-controls-options) .mc-text-input__control, .mc-text-input:has(.mc-text-input__addon) .mc-text-input__control {
   padding-inline-end: 0;
 }
 .mc-text-input--s {
@@ -267,6 +273,7 @@
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
+  border-radius: var(--button-border-radius-m, 0.25rem);
 }
 .mc-button .mc-button__label {
   font-size: var(--font-size-150, 1rem);
@@ -277,7 +284,6 @@
   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;
@@ -310,6 +316,7 @@
   padding: 0 calc(0.75rem - 0.125rem);
   min-height: 2rem;
   min-width: 2rem;
+  border-radius: var(--button-border-radius-s, 0.25rem);
 }
 .mc-button--s .mc-button__label {
   font-size: var(--font-size-100, 0.875rem);
@@ -326,6 +333,7 @@
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
+  border-radius: var(--button-border-radius-m, 0.25rem);
 }
 .mc-button--m .mc-button__label {
   font-size: var(--font-size-150, 1rem);
@@ -342,6 +350,7 @@
   padding: 0 calc(1.25rem - 0.125rem);
   min-height: 4rem;
   min-width: 4rem;
+  border-radius: var(--button-border-radius-l, 0.25rem);
 }
 .mc-button--l .mc-button__label {
   font-size: var(--font-size-200, 1.125rem);
@@ -615,6 +624,7 @@
 }
 .mc-controls-options__icon {
   fill: var(--forms-color-icon-clear, #666666);
+  color: var(--forms-color-icon-clear, #666666);
 }
 .mc-controls-options__button, .mc-controls-options__icon {
   height: 1.5rem;