@mozaic-ds/web-components 1.1.0 → 1.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronLeft24/ChevronLeft24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronRight24/ChevronRight24.svelte","../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'chevron-left-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'chevron-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-pagination',\n  }}\n/>\n\n<script lang=\"ts\">\n  import ChevronLeft24 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';\n  import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  /**\n   * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pagination.\n     */\n    id: string;\n    /**\n     * The current value of the selected page.\n     */\n    value: number;\n    /**\n     * If `true`, display a compact version without the select.\n     */\n    compact?: boolean;\n    /**\n     * Total number of pages.\n     */\n    total?: number;\n    /**\n     * Accessible label for the select of the pagination.\n     */\n    selectLabel?: string;\n    /**\n     * Word displayed before the current page number.\n     */\n    prefixlabel?: string;\n    /**\n     * Word displayed between the current page number and total page number.\n     */\n    pagelabel?: string;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    total = 10,\n    compact,\n    selectLabel = 'Page selector',\n    prefixlabel = 'Page',\n    pagelabel = 'of',\n  }: Props = $props();\n\n  let selected = $state(Number(value));\n\n  const isFirstPage = $state(() => selected <= 1);\n  const isLastPage = $state(() => selected >= total);\n\n  const pages = $state(() => Array.from({ length: total }, (_, i) => i + 1));\n\n  function previous() {\n    if (!isFirstPage()) {\n      selected = Number(selected) - 1;\n    }\n  }\n\n  function next() {\n    if (!isLastPage()) {\n      selected = Number(selected) + 1;\n    }\n  }\n\n  function onSelectChange(event: Event) {\n    const selected = Number((event.target as HTMLSelectElement).value);\n    value = selected;\n  }\n</script>\n\n<nav class=\"mc-pagination\" aria-label=\"pagination\">\n  {#if !compact}\n    <Button\n      iconposition=\"only\"\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 slot=\"icon\" />\n    </Button>\n  {:else}\n    <IconButton outlined aria-label=\"Previous page\" disabled={isFirstPage()} onclick={previous}>\n      <ChevronLeft24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n\n  {#if !compact}\n    <div class=\"mc-pagination__field\">\n      <select\n        {id}\n        class=\"mc-select mc-pagination__select\"\n        aria-label={selectLabel}\n        disabled={total <= 1}\n        bind:value={selected}\n        onchange={onSelectChange}\n      >\n        {#each pages() as page, index (index)}\n          <option value={Number(page)} selected={Number(page) == Number(selected)}>\n            {prefixlabel}\n            {page}\n            {pagelabel}\n            {total}\n          </option>\n        {/each}\n      </select>\n    </div>\n  {:else}\n    <span class=\"mc-pagination__label\" aria-current=\"page\">\n      {prefixlabel}\n      {value}\n      {pagelabel}\n      {total}\n    </span>\n  {/if}\n\n  {#if !compact}\n    <Button iconposition=\"only\" aria-label=\"Next page\" disabled={isLastPage()} onclick={next}>\n      <ChevronRight24 slot=\"icon\" />\n    </Button>\n  {:else}\n    <IconButton outlined aria-label=\"Next page\" disabled={isLastPage()} onclick={next}>\n      <ChevronRight24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pagination';\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","style","className","fill","size","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,uEAK+CN,CAAW,EAAA,CAAA,oFAAaM,yDAV9EZ,EAAO,EAAAe,EAAAC,GAAA,EAAA,EAAAD,EAAAE,CAAA,2DAuBGxB,GAAcE,CAAA,EAEjBuB,GAAAC,EAAA,GAAA,IAAAZ,EAAAE,CAAK,UAAMW,IAAI,8DAEjBlB,EAAW,GAAA,EAAA;AAAA,gBACXkB,CAAI,GAAA,EAAA;AAAA,cACJjB,EAAS,GAAA,EAAA;AAAA,cACTJ,EAAK,GAAA,EAAA,EAAA,2CAJ+B,IAAA,OAAMQ,EAACa,CAAI,CAAA,GAAK,SAAOxB,CAAQ,CAAA,EAAvD,IAAA,SAAOwB,CAAI,CAAA,6DANhBnB,GAAW,EACbkB,EAAA,SAAApB,EAAK,GAAI,IACPsB,GAAAF,EAAA,IAAAZ,EAAAX,CAAQ,OAARA,EAAQ0B,CAAA,CAAA,qDAerBpB,EAAW,GAAA,EAAA;AAAA,QACXP,EAAK,GAAA,EAAA;AAAA,QACLQ,EAAS,GAAA,EAAA;AAAA,QACTJ,EAAK,GAAA,EAAA,EAAA,CAAA,kBAzBJC,EAAO,EAAAe,EAAAQ,GAAA,EAAA,EAAAR,EAAAS,EAAA,6CA8BkDhB,CAAU,EAAA,CAAA,wFAAaM,uEAI9BN,CAAU,EAAA,CAAA,gFAAaM,0DALzEd,EAAO,EAAAe,EAAAU,GAAA,EAAA,EAAAV,EAAAW,EAAA,2BA/Cf","x_google_ignoreList":[0,1]}
+{"version":3,"file":"Pagination.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronLeft24/ChevronLeft24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronRight24/ChevronRight24.svelte","../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'chevron-left-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'chevron-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-pagination',\n  }}\n/>\n\n<script lang=\"ts\">\n  import ChevronLeft24 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';\n  import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  /**\n   * 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.svelte

@@ -165,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);
@@ -174,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));
@@ -198,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

@@ -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",15),_=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

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","sources":["../../../src/components/passwordinput/PasswordInput.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-password-input',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the password input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the password input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the password input field.\n     */\n    value?: string | number;\n    /**\n     * A placeholder text to show in the password input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, applies an invalid state to the password input.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the password input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the password input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the password input has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n    /**\n     * Labels of the button displayed when showing or hiding the password.\n     */\n    buttonlabel?: {\n      show: string;\n      hide: string;\n    };\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(),\n    placeholder,\n    isinvalid,\n    disabled,\n    readonly,\n    isclearable,\n    clearlabel = 'Clear content',\n    buttonlabel = { show: 'Show', hide: 'Hide' },\n  }: Props = $props();\n\n  let isVisible = $state(false);\n\n  function toggleVisibility() {\n    isVisible = !isVisible;\n  }\n\n  const resetValue = () => (value = '');\n</script>\n\n<div class={['mc-password-input', 'mc-text-input', isinvalid && 'is-invalid']}>\n  <input\n    class=\"mc-password-input__control mc-text-input__control\"\n    {id}\n    {name}\n    type={isVisible ? 'text' : 'password'}\n    bind:value\n    {placeholder}\n    {disabled}\n    {readonly}\n    aria-invalid={isinvalid}\n  />\n  {#if isclearable && value}\n    <div class=\"mc-controls-options\">\n      <button class=\"mc-controls-options__button\" type=\"button\" onclick={resetValue}>\n        <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n          />\n        </svg>\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n\n  <button\n    class={['mc-button', 'mc-button--s', 'mc-button--ghost']}\n    type=\"button\"\n    role=\"switch\"\n    tabindex=\"0\"\n    {disabled}\n    aria-checked={isVisible}\n    onclick={toggleVisibility}\n  >\n    <span>{isVisible ? buttonlabel.hide : buttonlabel.show}</span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/password-input';\n  @use '@mozaic-ds/styles/components/text-input';\n  @use '@mozaic-ds/styles/components/button';\n  @use '@mozaic-ds/styles/components/controls-options';\n</style>\n"],"names":["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,EAAA,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,kFA0B2Bd,EAAUE,CAAA,qDAOjCU,EAAU,CAAA,CAAA,kBATrDD,EAAW,GAAIT,KAAKa,EAAAC,CAAA,0BAef,YAAa,eAAgB,kBAAkB,CAAA,EAAA,gBAAA,aAM9CpB,EAAgBE,CAAA,6DAjChB,oBAAqB,gBAAiBU,KAAa,4EAKtDV,CAAS,EAAG,OAAS,UAAU,0EAKvBU,GAAS,sCAsBTV,CAAS,CAAA,EAGhBmB,EAAAC,EAAAC,EAAArB,CAAS,EAAGe,EAAW,EAAC,KAAOA,EAAW,EAAC,IAAI,sBArC1D,8LA3EYO"}
+{"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.svelte

@@ -129,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;
@@ -184,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);
@@ -226,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;
@@ -268,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;
@@ -432,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 {
@@ -591,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/pincode/Pincode.js

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

package/dist/components/pincode/Pincode.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pincode.js","sources":["../../../src/components/pincode/Pincode.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-pincode' }} />\n\n<script lang=\"ts\">\n  /**\n   * A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.\n   *\n   * @event input {CustomEvent<{ value: string }>} - Emits when the pincode value changes.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pincode element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The number of input displayed in the pincode element.\n     */\n    length?: 4 | 5 | 6;\n    /**\n     * The name attribute for the pincode element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the pincode field.\n     */\n    value?: string | number;\n    /**\n     * If `true`, applies an invalid state to the pincode.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the pincode, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the pincode is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let { id, length = 6, name, value, isinvalid, disabled, readonly }: Props = $props();\n\n  const L = $derived(typeof length === 'string' ? parseInt(length, 10) || 6 : length);\n\n  let otp = $state<string[]>(Array(L).fill(''));\n  let inputs = $state<HTMLInputElement[]>([]);\n  let element: HTMLElement;\n\n  $effect(() => {\n    const incoming = String(value ?? '');\n    otp = Array.from({ length: L }, (_, i) => incoming[i] ?? '');\n  });\n\n  const focusInput = (i: number) => {\n    queueMicrotask(() => inputs?.[i]?.focus());\n  };\n\n  const emitInput = () => {\n    const joined = otp.join('');\n    const event = new CustomEvent('input', {\n      detail: { value: joined },\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n\n  const onInput = (e: Event, index: number) => {\n    const el = e.target as HTMLInputElement;\n    const digit = el.value.replace(/\\D/g, '').slice(0, 1);\n    otp[index] = digit;\n    emitInput();\n    if (digit && index + 1 < L) focusInput(index + 1);\n  };\n\n  const onKeyDown = (e: KeyboardEvent, index: number) => {\n    if (e.key === 'ArrowLeft' && index > 0) {\n      e.preventDefault();\n      focusInput(index - 1);\n    } else if (e.key === 'ArrowRight' && index < L - 1) {\n      e.preventDefault();\n      focusInput(index + 1);\n    } else if (e.key === 'Backspace' && otp[index] === '' && index > 0) {\n      otp[index - 1] = '';\n      emitInput();\n      focusInput(index - 1);\n    }\n  };\n\n  const onPaste = (e: ClipboardEvent) => {\n    e.preventDefault();\n    const pasted = (e.clipboardData?.getData('text') ?? '').replace(/\\D/g, '').slice(0, L);\n    otp = Array.from({ length: L }, (_, i) => pasted[i] ?? '');\n    emitInput();\n    focusInput(Math.min(pasted.length, L - 1));\n  };\n</script>\n\n<div class=\"mc-pincode-input\" onpaste={onPaste} bind:this={element}>\n  {#each [...Array(L).keys()] as i (i)}\n    <input\n      id={`pincodeItem${i}`}\n      bind:this={inputs[i]}\n      class={['mc-pincode-input__control', isinvalid && 'is-invalid']}\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"1\"\n      pattern=\"\\d*\"\n      autocomplete=\"one-time-code\"\n      name={name ?? `pincode-${id}`}\n      {disabled}\n      {readonly}\n      value={otp[i]}\n      oninput={(e) => onInput(e, i)}\n      onkeydown={(e) => onKeyDown(e as KeyboardEvent, i)}\n    />\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pincode-input';\n</style>\n"],"names":["on_input","e","onInput","i","on_keydown","onKeyDown","id","$.prop","$$props","length","name","value","isinvalid","disabled","readonly","L","$.derived","otp","$.get","inputs","$.state","$.proxy","element","$.user_effect","incoming","$.set","_","focusInput","emitInput","joined","event","index","digit","onPaste","pasted","_a","$$anchor","$$value","$.set_attribute","input","$.set_value","$.bind_this","div"],"mappings":"2SAgHgB,IAAAA,EAAA,CAAAC,EAACC,EAAAC,IAAKD,EAAQD,EAAGE,CAAC,EAChBC,EAAA,CAAAH,EAACI,EAAAF,IAAKE,EAAUJ,EAAoBE,CAAC;;;;0uDAjHvD,qBAuCQG,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,iBAAS,CAAC,EAAEC,EAAIH,EAAAC,EAAA,OAAA,CAAA,EAAEG,EAAKJ,EAAAC,EAAA,QAAA,CAAA,EAAEI,EAASL,EAAAC,EAAA,YAAA,CAAA,EAAEK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EAAEM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EAE1D,MAAAO,EAACC,EAAA,IAAA,OAAmBP,EAAM,GAAK,SAAW,SAASA,EAAM,EAAE,EAAE,GAAK,EAAIA,EAAM,CAAA,EAE9E,IAAAQ,MAAuB,MAAKC,EAACH,CAAC,CAAA,EAAE,KAAK,EAAE,CAAA,CAAA,EACvCI,EAAMC,EAAAC,EAAA,CAAA,CAAA,CAAA,EACNC,EAEJC,EAAO,IAAO,CACN,MAAAC,EAAW,OAAOb,EAAK,GAAI,EAAE,EACnCc,EAAAR,EAAM,MAAM,KAAI,CAAG,OAAMC,EAAEH,CAAC,CAAA,EAAA,CAAKW,EAAGvB,IAAMqB,EAASrB,CAAC,GAAK,EAAE,EAAA,EAAA,CAC7D,CAAC,QAEKwB,EAAcxB,GAAc,CAChC,eAAc,IAAA,SAAAe,OAAAA,GAAAA,EAAAA,EAAOC,CAAM,IAAbD,YAAAA,EAAgBf,KAAhBe,YAAAA,EAAoB,QAAK,CACzC,EAEMU,EAAS,IAAS,CAChB,MAAAC,EAAMX,EAAGD,CAAG,EAAC,KAAK,EAAE,EACpBa,MAAY,YAAY,QAAO,CACnC,OAAM,CAAI,MAAOD,CAAM,EACvB,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBP,EAAQ,cAAcQ,CAAK,CAC7B,EAEM5B,EAAO,CAAI,EAAU6B,IAAkB,CAErC,MAAAC,EADK,EAAE,OACI,MAAM,QAAQ,MAAO,EAAE,EAAE,MAAM,EAAG,CAAC,IACpDf,CAAG,EAACc,CAAK,EAAIC,EACbJ,EAAS,EACLI,GAASD,EAAQ,EAACb,EAAGH,CAAC,GAAEY,EAAWI,EAAQ,CAAC,CAClD,EAEM1B,EAAS,CAAI,EAAkB0B,IAAkB,CACjD,EAAE,MAAQ,aAAeA,EAAQ,GACnC,EAAE,eAAc,EAChBJ,EAAWI,EAAQ,CAAC,GACX,EAAE,MAAQ,cAAgBA,EAAKb,EAAGH,CAAC,EAAG,GAC/C,EAAE,eAAc,EAChBY,EAAWI,EAAQ,CAAC,GACX,EAAE,MAAQ,aAAWb,EAAID,CAAG,EAACc,CAAK,IAAM,IAAMA,EAAQ,IAC/Db,EAAAD,CAAG,EAACc,EAAQ,CAAC,EAAI,GACjBH,EAAS,EACTD,EAAWI,EAAQ,CAAC,EAExB,EAEME,EAAW,GAAsB,OACrC,EAAE,eAAc,QACVC,KAAUC,EAAA,EAAE,gBAAF,YAAAA,EAAiB,QAAQ,UAAW,IAAI,QAAQ,MAAO,EAAE,EAAE,MAAM,EAACjB,EAAEH,CAAC,CAAA,EACrFU,EAAAR,EAAM,MAAM,KAAI,CAAG,OAAMC,EAAEH,CAAC,CAAA,EAAA,CAAKW,EAAGvB,IAAM+B,EAAO/B,CAAC,GAAK,EAAE,EAAA,EAAA,EACzDyB,EAAS,EACTD,EAAW,KAAK,IAAIO,EAAO,OAAMhB,EAAEH,CAAC,EAAG,CAAC,CAAA,CAC1C,wFAvDmB,EAAC,qSA2DT,MAAKG,EAACH,CAAC,CAAA,EAAE,KAAI,GAAOZ,GAAGA,EAAC,CAAAiC,EAAJjC,IAAC,6DAGVA,IAACe,EAARC,CAAM,EAAChB,CAAC,EAAAkC,EAAD,GAAC,OAAAnB,OAAAA,EAAAA,EAARC,CAAM,IAAED,YAAAA,EAAD,IAAC,IAAA,CAADf,CAAC,CAAA,gCADDA,CAAC,EAAA,WAEX,4BAA6BS,KAAa,YAAY,CAAA,EAAA,eAAA,EAMxD0B,EAAAC,EAAA,OAAA7B,EAAI,cAAeJ,EAAE,CAAA,EAAA,gCAGpBkC,EAAAD,EAAArB,EAAAD,CAAG,EAACd,CAAC,CAAA,kBAdyCsC,EAAAC,EAAAL,GAAAf,QAAAA,CAAO,cAA3BW,CAAO,aAF9C"}
+{"version":3,"file":"Pincode.js","sources":["../../../src/components/pincode/Pincode.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-pincode' }} />\n\n<script lang=\"ts\">\n  /**\n   * A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.\n   *\n   * @event input {CustomEvent<{ value: string }>} - Emits when the pincode value changes.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pincode element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The number of input displayed in the pincode element.\n     */\n    length?: 4 | 5 | 6;\n    /**\n     * The name attribute for the pincode element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the pincode field.\n     */\n    value?: string | number;\n    /**\n     * If `true`, applies an invalid state to the pincode.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the pincode, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the pincode is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let { id, length = 6, name, value, isinvalid, disabled, readonly }: Props = $props();\n\n  const L = $derived(typeof length === 'string' ? parseInt(length, 10) || 6 : length);\n\n  let otp = $state<string[]>(Array(L).fill(''));\n  let inputs = $state<HTMLInputElement[]>([]);\n  let element: HTMLElement;\n\n  $effect(() => {\n    const incoming = String(value ?? '');\n    otp = Array.from({ length: L }, (_, i) => incoming[i] ?? '');\n  });\n\n  const focusInput = (i: number) => {\n    queueMicrotask(() => inputs?.[i]?.focus());\n  };\n\n  const emitInput = () => {\n    const joined = otp.join('');\n    const event = new CustomEvent('input', {\n      detail: { value: joined },\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n\n  const onInput = (e: Event, index: number) => {\n    const el = e.target as HTMLInputElement;\n    const digit = el.value.replace(/\\D/g, '').slice(0, 1);\n    otp[index] = digit;\n    emitInput();\n    if (digit && index + 1 < L) focusInput(index + 1);\n  };\n\n  const onKeyDown = (e: KeyboardEvent, index: number) => {\n    if (e.key === 'ArrowLeft' && index > 0) {\n      e.preventDefault();\n      focusInput(index - 1);\n    } else if (e.key === 'ArrowRight' && index < L - 1) {\n      e.preventDefault();\n      focusInput(index + 1);\n    } else if (e.key === 'Backspace' && otp[index] === '' && index > 0) {\n      otp[index - 1] = '';\n      emitInput();\n      focusInput(index - 1);\n    }\n  };\n\n  const onPaste = (e: ClipboardEvent) => {\n    e.preventDefault();\n    const pasted = (e.clipboardData?.getData('text') ?? '').replace(/\\D/g, '').slice(0, L);\n    otp = Array.from({ length: L }, (_, i) => pasted[i] ?? '');\n    emitInput();\n    focusInput(Math.min(pasted.length, L - 1));\n  };\n</script>\n\n<div class=\"mc-pincode-input\" onpaste={onPaste} bind:this={element}>\n  {#each [...Array(L).keys()] as i (i)}\n    <input\n      id={`pincodeItem${i}`}\n      bind:this={inputs[i]}\n      class={['mc-pincode-input__control', isinvalid && 'is-invalid']}\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"1\"\n      pattern=\"\\d*\"\n      autocomplete=\"one-time-code\"\n      name={name ?? `pincode-${id}`}\n      {disabled}\n      {readonly}\n      value={otp[i]}\n      oninput={(e) => onInput(e, i)}\n      onkeydown={(e) => onKeyDown(e as KeyboardEvent, i)}\n    />\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pincode-input';\n</style>\n"],"names":["id","$.prop","$$props","length","name","value","isinvalid","disabled","readonly","L","$.derived","otp","$.get","inputs","$.state","$.proxy","element","$.user_effect","incoming","$.set","_","i","focusInput","emitInput","joined","event","onInput","index","digit","onKeyDown","onPaste","pasted","$$anchor","input","e","$$value","$.set_attribute","$.set_value","$.bind_this","div"],"mappings":";;;;yxDAAA,oBAuCQA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,iBAAS,CAAC,EAAEC,EAAIH,EAAAC,EAAA,OAAA,CAAA,EAAEG,EAAKJ,EAAAC,EAAA,QAAA,CAAA,EAAEI,EAASL,EAAAC,EAAA,YAAA,CAAA,EAAEK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EAAEM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EAE1D,MAAAO,EAACC,EAAA,IAAA,OAAmBP,EAAM,GAAK,SAAW,SAASA,EAAM,EAAE,EAAE,GAAK,EAAIA,EAAM,CAAA,EAE9E,IAAAQ,MAAuB,MAAKC,EAACH,CAAC,CAAA,EAAE,KAAK,EAAE,CAAA,CAAA,EACvCI,EAAMC,EAAAC,EAAA,CAAA,CAAA,CAAA,EACNC,EAEJC,EAAO,IAAO,CACN,MAAAC,EAAW,OAAOb,EAAK,GAAI,EAAE,EACnCc,EAAAR,EAAM,MAAM,KAAI,CAAG,OAAMC,EAAEH,CAAC,CAAA,EAAA,CAAKW,EAAGC,IAAMH,EAASG,CAAC,GAAK,EAAE,EAAA,EAAA,CAC7D,CAAC,QAEKC,EAAcD,GAAc,CAChC,eAAc,IAAAT,EAAOC,CAAM,IAAGQ,CAAC,GAAG,OAAK,CACzC,EAEME,EAAS,IAAS,CAChB,MAAAC,EAAMZ,EAAGD,CAAG,EAAC,KAAK,EAAE,EACpBc,MAAY,YAAY,QAAO,CACnC,OAAM,CAAI,MAAOD,CAAM,EACvB,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBR,EAAQ,cAAcS,CAAK,CAC7B,EAEMC,EAAO,CAAI,EAAUC,IAAkB,CAErC,MAAAC,EADK,EAAE,OACI,MAAM,QAAQ,MAAO,EAAE,EAAE,MAAM,EAAG,CAAC,IACpDjB,CAAG,EAACgB,CAAK,EAAIC,EACbL,EAAS,EACLK,GAASD,EAAQ,EAACf,EAAGH,CAAC,GAAEa,EAAWK,EAAQ,CAAC,CAClD,EAEME,EAAS,CAAI,EAAkBF,IAAkB,CACjD,EAAE,MAAQ,aAAeA,EAAQ,GACnC,EAAE,eAAc,EAChBL,EAAWK,EAAQ,CAAC,GACX,EAAE,MAAQ,cAAgBA,EAAKf,EAAGH,CAAC,EAAG,GAC/C,EAAE,eAAc,EAChBa,EAAWK,EAAQ,CAAC,GACX,EAAE,MAAQ,aAAWf,EAAID,CAAG,EAACgB,CAAK,IAAM,IAAMA,EAAQ,IAC/Df,EAAAD,CAAG,EAACgB,EAAQ,CAAC,EAAI,GACjBJ,EAAS,EACTD,EAAWK,EAAQ,CAAC,EAExB,EAEMG,EAAW,GAAsB,CACrC,EAAE,eAAc,QACVC,GAAU,EAAE,eAAe,QAAQ,MAAM,GAAK,IAAI,QAAQ,MAAO,EAAE,EAAE,MAAM,EAACnB,EAAEH,CAAC,CAAA,EACrFU,EAAAR,EAAM,MAAM,KAAI,CAAG,OAAMC,EAAEH,CAAC,CAAA,EAAA,CAAKW,EAAGC,IAAMU,EAAOV,CAAC,GAAK,EAAE,EAAA,EAAA,EACzDE,EAAS,EACTD,EAAW,KAAK,IAAIS,EAAO,OAAMnB,EAAEH,CAAC,EAAG,CAAC,CAAA,CAC1C,wFAvDmB,EAAC,qSA2DT,MAAKG,EAACH,CAAC,CAAA,EAAE,KAAI,GAAOY,GAAGA,EAAC,CAAAW,EAAJX,IAAC,gBAclBY,EAAA,QAAAC,GAAMR,EAAQQ,EAAGb,CAAC,EAChBY,EAAA,UAAAC,GAAML,EAAUK,EAAoBb,CAAC,SAZ/BA,IAACT,EAARC,CAAM,EAACQ,CAAC,EAAAc,EAADd,GAACT,EAARC,CAAM,IAACQ,CAAC,EAAA,IAAA,CAADA,CAAC,CAAA,gCADDA,CAAC,EAAA,WAEX,4BAA6Bf,KAAa,YAAY,CAAA,EAAA,eAAA,EAMxD8B,EAAAH,EAAA,OAAA7B,EAAI,cAAeJ,EAAE,CAAA,EAAA,gCAGpBqC,EAAAJ,EAAArB,EAAAD,CAAG,EAACU,CAAC,CAAA,kBAdyCiB,EAAAC,EAAAJ,GAAAnB,QAAAA,CAAO,cAA3Bc,CAAO,aAF9C"}

package/dist/components/pincode/Pincode.svelte

@@ -133,8 +133,8 @@
   font-size: var(--font-size-400, 1.75rem);
   transition: box-shadow 200ms ease;
   background-color: var(--forms-color-background-default, #ffffff);
-  border: var(--border-s, 1px) solid var(--forms-color-border-default, #666666);
-  border-radius: var(--forms-radius-border, 0.25rem);
+  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;
@@ -154,7 +154,7 @@
 }
 .mc-pincode-input__control: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-pincode-input__control:disabled {
   background-color: var(--forms-color-background-disabled, #d9d9d9);
@@ -166,9 +166,9 @@
 }
 .mc-pincode-input__control.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-pincode-input__control.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);
 }</style>

package/dist/components/quantityselector/QuantitySelector.js

@@ -1,5 +1,5 @@
-import{c as E,p as D,b as n,A,t as S,i as V,j as I,k as a,e as M,g as j,v as R,a as T,f as U,d as p,s as g,r as f,h as H}from"../../custom-element.js";import{s as u,a as G,r as W}from"../../attributes.js";import{c as X}from"../../input.js";import{c as Y}from"../../custom-element-forward-events.js";import"../../legacy.js";var Z=A('<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="M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1"></path></svg>');function L(v,e){D(e,!1);let o=n(e,"id",12,void 0),t=n(e,"style",12,void 0),r=n(e,"className",12,void 0),i=n(e,"fill",12,void 0),m=n(e,"size",12,"1.5rem");var b={get id(){return o()},set id(s){o(s),a()},get style(){return t()},set style(s){t(s),a()},get className(){return r()},set className(s){r(s),a()},get fill(){return i()},set fill(s){i(s),a()},get size(){return m()},set size(s){m(s),a()}},d=Z();return S(()=>{u(d,"id",o()),G(d,t()),M(d,0,j(r())),u(d,"fill",i())}),V(v,d),I(b)}customElements.define("less-24",E(L,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var $=A('<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="M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6z"></path></svg>');function O(v,e){D(e,!1);let o=n(e,"id",12,void 0),t=n(e,"style",12,void 0),r=n(e,"className",12,void 0),i=n(e,"fill",12,void 0),m=n(e,"size",12,"1.5rem");var b={get id(){return o()},set id(s){o(s),a()},get style(){return t()},set style(s){t(s),a()},get className(){return r()},set className(s){r(s),a()},get fill(){return i()},set fill(s){i(s),a()},get size(){return m()},set size(s){m(s),a()}},d=$();return S(()=>{u(d,"id",o()),G(d,t()),M(d,0,j(r())),u(d,"fill",i())}),V(v,d),I(b)}customElements.define("more-24",E(O,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));const ee=(v,e,o,t)=>{const r=Number(e());r>o()?e(o()):r<t()?e(t()):e(r)},te=(v,e,o,t)=>{const r=Number(e()),i=Number(o());r+i<=t()?e(r+i):e(t())},re=(v,e,o,t)=>{const r=Number(e()),i=Number(o());r-i>=t()?e(r-i):e(t())};var se=U('<div><input type="number" class="mc-quantity-selector__control svelte-ptlds1"/> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--increase svelte-ptlds1" tabindex="-1"><span class="mc-quantity-selector__icon svelte-ptlds1"><!></span> <span class="mc-quantity-selector__label svelte-ptlds1"> </span></button> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--decrease svelte-ptlds1" tabindex="-1"><span class="mc-quantity-selector__icon svelte-ptlds1"><!></span> <span class="mc-quantity-selector__label svelte-ptlds1"> </span></button></div>');const le={hash:"svelte-ptlds1",code:`/**
+import{v as H,c as J,p as K,a as L,b as o,f as M,d as c,s as _,e as D,t as P,i as R,j as T,k as l,r as d,g as U,h as I}from"../../custom-element.js";import{r as W,s as i}from"../../attributes.js";import{c as X}from"../../input.js";import{c as Y}from"../../custom-element-forward-events.js";var Z=M('<div><input type="number" class="mc-quantity-selector__control svelte-ptlds1"/> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--increase svelte-ptlds1" tabindex="-1"><span class="mc-quantity-selector__icon svelte-ptlds1"><more-24></more-24></span> <span class="mc-quantity-selector__label svelte-ptlds1"> </span></button> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--decrease svelte-ptlds1" tabindex="-1"><span class="mc-quantity-selector__icon svelte-ptlds1"><less-24></less-24></span> <span class="mc-quantity-selector__label svelte-ptlds1"> </span></button></div>',2);const $={hash:"svelte-ptlds1",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-quantity-selector.svelte-ptlds1 {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;border-radius:var(--radius-s, 0.25rem);box-sizing:border-box;display:flex;gap:0.25rem;padding:0.1875rem;position:relative;}.mc-quantity-selector__control.svelte-ptlds1 {background-color:transparent;border-width:0;color:inherit;font-family:inherit;outline:none;}.mc-quantity-selector__control[type=number].svelte-ptlds1::-webkit-inner-spin-button, .mc-quantity-selector__control[type=number].svelte-ptlds1::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-quantity-selector__control[type=number].svelte-ptlds1 {
-  /* For Gecko rendering engine */appearance:textfield;}.mc-quantity-selector__control.svelte-ptlds1 {padding:0;font-size:inherit;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-semi-bold, 600);cursor:inherit;text-align:center;flex-grow:1;}.mc-quantity-selector__control.svelte-ptlds1::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-quantity-selector__button.svelte-ptlds1 {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;height:2.5rem;width:2.5rem;border-radius:var(--radius-full, 100%);color:var(--quantity-selector-color-button-text-default, #242938);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}.mc-quantity-selector__button.svelte-ptlds1:disabled {color:var(--quantity-selector-color-button-text-disabled, #d9d9d9);cursor:not-allowed;}.mc-quantity-selector__button.svelte-ptlds1:hover:not(:disabled) {background-color:var(--quantity-selector-color-button-background-hover, rgba(255, 255, 255, 0.1));}.mc-quantity-selector__button--decrease.svelte-ptlds1 {order:-1;}.mc-quantity-selector__icon.svelte-ptlds1 {height:1.5rem;width:1.5rem;fill:currentcolor;}.mc-quantity-selector__label.svelte-ptlds1 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-quantity-selector.svelte-ptlds1::after {transition:box-shadow 200ms ease;border-radius:var(--radius-s, 0.25rem);content:"";position:absolute;inset:-0.125rem var(--inset-x, 3rem);pointer-events:none;display:block;}.mc-quantity-selector.svelte-ptlds1: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-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):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-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):disabled) .mc-quantity-selector__button:where(.svelte-ptlds1):disabled {color:var(--forms-color-icon-disabled, #737373);}.mc-quantity-selector.svelte-ptlds1:has(input[readonly]:where(.svelte-ptlds1)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-quantity-selector.svelte-ptlds1:has(input[readonly]:where(.svelte-ptlds1)) .mc-quantity-selector__control[readonly]:where(.svelte-ptlds1) {text-align:left;padding-left:0.5rem;}.mc-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):focus)::after {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-quantity-selector--s.svelte-ptlds1 {--inset-x: 2rem;height:2rem;}.mc-quantity-selector--s.svelte-ptlds1 .mc-quantity-selector__button:where(.svelte-ptlds1) {height:1.5rem;width:1.5rem;}.mc-quantity-selector--s.svelte-ptlds1 .mc-quantity-selector__icon:where(.svelte-ptlds1) {height:1.25rem;width:1.25rem;}.mc-quantity-selector.is-invalid.svelte-ptlds1 {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-quantity-selector.is-invalid.svelte-ptlds1: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-quantity-selector.svelte-ptlds1 :where(.svelte-ptlds1) {box-sizing:border-box;}`};function ne(v,e){D(e,!0),T(v,le);let o=n(e,"id",7),t=n(e,"value",15,1),r=n(e,"min",7,1),i=n(e,"max",7,100),m=n(e,"step",7,1),b=n(e,"size",7,"m"),d=n(e,"disabled",7),s=n(e,"isinvalid",7,!1),x=n(e,"name",7,"quantity-selector-input"),w=n(e,"readonly",7),q=n(e,"decrementlabel",7,"Decrement"),z=n(e,"incrementlabel",7,"Increment");var Q={get id(){return o()},set id(l){o(l),a()},get value(){return t()},set value(l=1){t(l),a()},get min(){return r()},set min(l=1){r(l),a()},get max(){return i()},set max(l=100){i(l),a()},get step(){return m()},set step(l=1){m(l),a()},get size(){return b()},set size(l="m"){b(l),a()},get disabled(){return d()},set disabled(l){d(l),a()},get isinvalid(){return s()},set isinvalid(l=!1){s(l),a()},get name(){return x()},set name(l="quantity-selector-input"){x(l),a()},get readonly(){return w()},set readonly(l){w(l),a()},get decrementlabel(){return q()},set decrementlabel(l="Decrement"){q(l),a()},get incrementlabel(){return z()},set incrementlabel(l="Increment"){z(l),a()}},_=se(),c=p(_);W(c),c.__input=[ee,t,i,r];var h=g(c,2);h.__click=[te,t,m,i];var k=p(h),C=p(k);O(C,{}),f(k);var B=g(k,2),J=p(B,!0);f(B),f(h);var y=g(h,2);y.__click=[re,t,m,r];var N=p(y),K=p(N);L(K,{}),f(N);var F=g(N,2),P=p(F,!0);return f(F),f(y),f(_),S(()=>{M(_,1,j(["mc-quantity-selector",`mc-quantity-selector--${b()}`,s()&&"is-invalid"]),"svelte-ptlds1"),u(c,"id",o()),u(c,"name",x()),u(c,"aria-valuemin",r()),u(c,"aria-valuemax",i()),u(c,"aria-valuenow",t()),u(c,"aria-invalid",`${s()}`),c.readOnly=w(),c.disabled=d(),u(h,"aria-controls",o()),h.disabled=t()===i()||d(),H(J,z()),u(y,"aria-controls",o()),y.disabled=t()===r()||d(),H(P,q())}),X(c,t),V(v,_),I(Q)}R(["input","click"]);customElements.define("m-quantityselector",E(ne,{id:{},value:{},min:{},max:{},step:{},size:{},disabled:{},isinvalid:{},name:{},readonly:{},decrementlabel:{},incrementlabel:{}},[],[],!0,Y));
+ */.mc-quantity-selector.svelte-ptlds1 {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;gap:0.25rem;padding:0.1875rem;position:relative;border-radius:var(--border-radius-s, 0.25rem);}.mc-quantity-selector__control.svelte-ptlds1 {background-color:transparent;border-width:0;color:inherit;font-family:inherit;outline:none;}.mc-quantity-selector__control[type=number].svelte-ptlds1::-webkit-inner-spin-button, .mc-quantity-selector__control[type=number].svelte-ptlds1::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-quantity-selector__control[type=number].svelte-ptlds1 {
+  /* For Gecko rendering engine */appearance:textfield;}.mc-quantity-selector__control.svelte-ptlds1 {padding:0;font-size:inherit;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-semi-bold, 600);cursor:inherit;text-align:center;flex-grow:1;}.mc-quantity-selector__control.svelte-ptlds1::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-quantity-selector__button.svelte-ptlds1 {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;height:2.5rem;width:2.5rem;border-radius:var(--border-radius-full, 100%);color:var(--quantity-selector-color-button-text-default, #242938);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}.mc-quantity-selector__button.svelte-ptlds1:disabled {color:var(--quantity-selector-color-button-text-disabled, #d9d9d9);cursor:not-allowed;}.mc-quantity-selector__button.svelte-ptlds1:hover:not(:disabled) {background-color:var(--quantity-selector-color-button-background-hover, rgba(255, 255, 255, 0.1));}.mc-quantity-selector__button--decrease.svelte-ptlds1 {order:-1;}.mc-quantity-selector__icon.svelte-ptlds1 {height:1.5rem;width:1.5rem;fill:currentcolor;}.mc-quantity-selector__label.svelte-ptlds1 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-quantity-selector.svelte-ptlds1::after {transition:box-shadow 200ms ease;content:"";position:absolute;inset:-0.125rem var(--inset-x, 3rem);pointer-events:none;display:block;border-radius:var(--border-radius-s, 0.25rem);}.mc-quantity-selector.svelte-ptlds1: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-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):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-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):disabled) .mc-quantity-selector__button:where(.svelte-ptlds1):disabled {color:var(--forms-color-icon-disabled, #737373);}.mc-quantity-selector.svelte-ptlds1:has(input[readonly]:where(.svelte-ptlds1)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-quantity-selector.svelte-ptlds1:has(input[readonly]:where(.svelte-ptlds1)) .mc-quantity-selector__control[readonly]:where(.svelte-ptlds1) {text-align:left;padding-left:0.5rem;}.mc-quantity-selector.svelte-ptlds1:has(input:where(.svelte-ptlds1):focus)::after {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-quantity-selector--s.svelte-ptlds1 {--inset-x: 2rem;height:2rem;}.mc-quantity-selector--s.svelte-ptlds1 .mc-quantity-selector__button:where(.svelte-ptlds1) {height:1.5rem;width:1.5rem;}.mc-quantity-selector--s.svelte-ptlds1 .mc-quantity-selector__icon:where(.svelte-ptlds1) {height:1.25rem;width:1.25rem;}.mc-quantity-selector.is-invalid.svelte-ptlds1 {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-quantity-selector.is-invalid.svelte-ptlds1: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-quantity-selector.svelte-ptlds1 :where(.svelte-ptlds1) {box-sizing:border-box;}`};function ee(S,r){K(r,!0),L(S,$);let m=o(r,"id",7),t=o(r,"value",15,1),n=o(r,"min",7,1),a=o(r,"max",7,100),f=o(r,"step",7,1),g=o(r,"size",7,"m"),v=o(r,"disabled",7),h=o(r,"isinvalid",7,!1),q=o(r,"name",7,"quantity-selector-input"),w=o(r,"readonly",7),x=o(r,"decrementlabel",7,"Decrement"),k=o(r,"incrementlabel",7,"Increment");const j=()=>{const e=Number(t());e>a()?t(a()):e<n()?t(n()):t(e)},F=()=>{const e=Number(t()),p=Number(f());e+p<=a()?t(e+p):t(a())},G=()=>{const e=Number(t()),p=Number(f());e-p>=n()?t(e-p):t(n())};var O={get id(){return m()},set id(e){m(e),l()},get value(){return t()},set value(e=1){t(e),l()},get min(){return n()},set min(e=1){n(e),l()},get max(){return a()},set max(e=100){a(e),l()},get step(){return f()},set step(e=1){f(e),l()},get size(){return g()},set size(e="m"){g(e),l()},get disabled(){return v()},set disabled(e){v(e),l()},get isinvalid(){return h()},set isinvalid(e=!1){h(e),l()},get name(){return q()},set name(e="quantity-selector-input"){q(e),l()},get readonly(){return w()},set readonly(e){w(e),l()},get decrementlabel(){return x()},set decrementlabel(e="Decrement"){x(e),l()},get incrementlabel(){return k()},set incrementlabel(e="Increment"){k(e),l()}},y=Z(),s=c(y);W(s),s.__input=j;var u=_(s,2);u.__click=F;var z=c(u),Q=c(z);D(Q,1,"svelte-ptlds1"),d(z);var V=_(z,2),A=c(V,!0);d(V),d(u);var b=_(u,2);b.__click=G;var N=c(b),B=c(N);D(B,1,"svelte-ptlds1"),d(N);var E=_(N,2),C=c(E,!0);return d(E),d(b),d(y),P(()=>{D(y,1,U(["mc-quantity-selector",`mc-quantity-selector--${g()}`,h()&&"is-invalid"]),"svelte-ptlds1"),i(s,"id",m()),i(s,"name",q()),i(s,"aria-valuemin",n()),i(s,"aria-valuemax",a()),i(s,"aria-valuenow",t()),i(s,"aria-invalid",`${h()}`),s.readOnly=w(),s.disabled=v(),i(u,"aria-controls",m()),u.disabled=t()===a()||v(),I(A,k()),i(b,"aria-controls",m()),b.disabled=t()===n()||v(),I(C,x())}),X(s,t),R(S,y),T(O)}H(["input","click"]);customElements.define("m-quantityselector",J(ee,{id:{},value:{},min:{},max:{},step:{},size:{},disabled:{},isinvalid:{},name:{},readonly:{},decrementlabel:{},incrementlabel:{}},[],[],!0,Y));
 //# sourceMappingURL=QuantitySelector.js.map

package/dist/components/quantityselector/QuantitySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuantitySelector.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/Less24/Less24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/More24/More24.svelte","../../../src/components/quantityselector/QuantitySelector.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'less-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=\"M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1\"/></svg>","<svelte:options customElement={{ tag: 'more-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=\"M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6z\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-quantityselector',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import Less24 from '@mozaic-ds/icons-svelte/svelte/Less24/Less24.svelte';\n  import More24 from '@mozaic-ds/icons-svelte/svelte/More24/More24.svelte';\n  /**\n   * A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the quantity selector element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the quantity selector element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the quantity selector field.\n     */\n    value?: number;\n    /**\n     * If `true`, applies an invalid state to the quantity selector.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the quantity selector, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the quantity selector.\n     */\n    size?: 's' | 'm';\n    /**\n     * Minimum acceptable value for the quantity selector.\n     */\n    min?: number;\n    /**\n     * Maximum acceptable value for the quantity selector.\n     */\n    max?: number;\n    /**\n     * Determines how much the value will change per click when the quantity is increased or decreased.\n     */\n    step?: number;\n    /**\n     * If `true`, the quantity selector is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * The label text for the increment button.\n     */\n    incrementlabel?: string;\n    /**\n     * The label text for the decrement button.\n     */\n    decrementlabel?: string;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    min = 1,\n    max = 100,\n    step = 1,\n    size = 'm',\n    disabled,\n    isinvalid = false,\n    name = 'quantity-selector-input',\n    readonly,\n    decrementlabel = 'Decrement',\n    incrementlabel = 'Increment',\n  }: Props = $props();\n\n  const onValue = (): void => {\n    const numericValue = Number(value);\n    if (numericValue > max) {\n      value = max;\n    } else if (numericValue < min) {\n      value = min;\n    } else {\n      value = numericValue;\n    }\n  };\n\n  const onIncrement = (): void => {\n    const numericValue = Number(value);\n    const numericStep = Number(step);\n\n    if (numericValue + numericStep <= max) {\n      value = numericValue + numericStep;\n    } else {\n      value = max;\n    }\n  };\n\n  const onDecrement = (): void => {\n    const numericValue = Number(value);\n    const numericStep = Number(step);\n\n    if (numericValue - numericStep >= min) {\n      value = numericValue - numericStep;\n    } else {\n      value = min;\n    }\n  };\n</script>\n\n<div class={['mc-quantity-selector', `mc-quantity-selector--${size}`, isinvalid && 'is-invalid']}>\n  <input\n    type=\"number\"\n    {id}\n    {name}\n    bind:value\n    oninput={onValue}\n    class=\"mc-quantity-selector__control\"\n    aria-valuemin={min}\n    aria-valuemax={max}\n    aria-valuenow={value}\n    aria-invalid={`${isinvalid}`}\n    {readonly}\n    {disabled}\n  />\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--increase\"\n    tabindex=\"-1\"\n    disabled={value === max || disabled}\n    onclick={onIncrement}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <More24 />\n    </span>\n    <span class=\"mc-quantity-selector__label\">{incrementlabel}</span>\n  </button>\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--decrease\"\n    tabindex=\"-1\"\n    disabled={value === min || disabled}\n    onclick={onDecrement}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <Less24 />\n    </span>\n    <span class=\"mc-quantity-selector__label\">{decrementlabel}</span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/quantity-selector';\n</style>\n"],"names":["id","style","className","fill","size","onValue","_","value","max","min","numericValue","onIncrement","__1","step","numericStep","onDecrement","__2","$.prop","$$props","disabled","isinvalid","name","readonly","decrementlabel","incrementlabel","customElementForwardEvents"],"mappings":"wiBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,gRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,6VCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,gRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,8FCyEQ,MAAAE,GAAO,CAAAC,EAAAC,EAAAC,EAAAC,IAAe,OACpBC,EAAe,OAAOH,GAAK,EAC7BG,EAAeF,IACjBD,EAAQC,EAAG,CAAA,EACFE,EAAeD,IACxBF,EAAQE,EAAG,CAAA,EAEXF,EAAQG,CAAY,CAExB,EAEMC,GAAW,CAAAC,EAAAL,EAAAM,EAAAL,IAAe,OACxBE,EAAe,OAAOH,GAAK,EAC3BO,EAAc,OAAOD,GAAI,EAE3BH,EAAeI,GAAeN,IAChCD,EAAQG,EAAeI,CAAW,EAElCP,EAAQC,EAAG,CAAA,CAEf,EAEMO,GAAW,CAAAC,EAAAT,EAAAM,EAAAJ,IAAe,OACxBC,EAAe,OAAOH,GAAK,EAC3BO,EAAc,OAAOD,GAAI,EAE3BH,EAAeI,GAAeL,IAChCF,EAAQG,EAAeI,CAAW,EAElCP,EAAQE,EAAG,CAAA,CAEf;;;osHA/GF,qBAkEIT,EAAEiB,EAAAC,EAAA,KAAA,CAAA,EACFX,iBAAkB,CAAC,EACnBE,cAAM,CAAC,EACPD,cAAM,GAAG,EACTK,eAAO,CAAC,EACRT,eAAO,GAAG,EACVe,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,oBAAY,EAAK,EACjBC,eAAO,yBAAyB,EAChCC,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,yBAAiB,WAAW,EAC5BC,yBAAiB,WAAW,sFAVV,EAAC,2CACb,EAAC,2CACD,IAAG,6CACF,EAAC,6CACD,IAAG,4GAEE,GAAK,6CACV,0BAAyB,sHAEf,YAAW,iEACX,YAAW,0CA2CnBnB,GAAOE,EAAAC,EAAAC,CAAA,0BAePE,GAAWJ,EAAAM,EAAAL,CAAA,0FAaXO,GAAWR,EAAAM,EAAAJ,CAAA,8FAlCX,gDAAiDL,EAAI,CAAA,GAAIgB,KAAa,kFAQhEX,GAAG,sBACHD,GAAG,sBACHD,GAAK,wBACHa,EAAS,CAAA,EAAA,oDAMXpB,GAAE,aAGPO,EAAK,IAAKC,EAAG,GAAIW,EAAQ,MAMQK,GAAc,sBAI1CxB,GAAE,aAGPO,EAAK,IAAKE,EAAG,GAAIU,EAAQ,MAMQI,GAAc,sBAzC7D,+MA7GYE","x_google_ignoreList":[0,1]}
+{"version":3,"file":"QuantitySelector.js","sources":["../../../src/components/quantityselector/QuantitySelector.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-quantityselector',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the quantity selector element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the quantity selector element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the quantity selector field.\n     */\n    value?: number;\n    /**\n     * If `true`, applies an invalid state to the quantity selector.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the quantity selector, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the quantity selector.\n     */\n    size?: 's' | 'm';\n    /**\n     * Minimum acceptable value for the quantity selector.\n     */\n    min?: number;\n    /**\n     * Maximum acceptable value for the quantity selector.\n     */\n    max?: number;\n    /**\n     * Determines how much the value will change per click when the quantity is increased or decreased.\n     */\n    step?: number;\n    /**\n     * If `true`, the quantity selector is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * The label text for the increment button.\n     */\n    incrementlabel?: string;\n    /**\n     * The label text for the decrement button.\n     */\n    decrementlabel?: string;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    min = 1,\n    max = 100,\n    step = 1,\n    size = 'm',\n    disabled,\n    isinvalid = false,\n    name = 'quantity-selector-input',\n    readonly,\n    decrementlabel = 'Decrement',\n    incrementlabel = 'Increment',\n  }: Props = $props();\n\n  const onValue = (): void => {\n    const numericValue = Number(value);\n    if (numericValue > max) {\n      value = max;\n    } else if (numericValue < min) {\n      value = min;\n    } else {\n      value = numericValue;\n    }\n  };\n\n  const onIncrement = (): void => {\n    const numericValue = Number(value);\n    const numericStep = Number(step);\n\n    if (numericValue + numericStep <= max) {\n      value = numericValue + numericStep;\n    } else {\n      value = max;\n    }\n  };\n\n  const onDecrement = (): void => {\n    const numericValue = Number(value);\n    const numericStep = Number(step);\n\n    if (numericValue - numericStep >= min) {\n      value = numericValue - numericStep;\n    } else {\n      value = min;\n    }\n  };\n</script>\n\n<div class={['mc-quantity-selector', `mc-quantity-selector--${size}`, isinvalid && 'is-invalid']}>\n  <input\n    type=\"number\"\n    {id}\n    {name}\n    bind:value\n    oninput={onValue}\n    class=\"mc-quantity-selector__control\"\n    aria-valuemin={min}\n    aria-valuemax={max}\n    aria-valuenow={value}\n    aria-invalid={`${isinvalid}`}\n    {readonly}\n    {disabled}\n  />\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--increase\"\n    tabindex=\"-1\"\n    disabled={value === max || disabled}\n    onclick={onIncrement}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <more-24></more-24>\n    </span>\n    <span class=\"mc-quantity-selector__label\">{incrementlabel}</span>\n  </button>\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--decrease\"\n    tabindex=\"-1\"\n    disabled={value === min || disabled}\n    onclick={onDecrement}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <less-24></less-24>\n    </span>\n    <span class=\"mc-quantity-selector__label\">{decrementlabel}</span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/quantity-selector';\n</style>\n"],"names":["id","$.prop","$$props","value","min","max","step","size","disabled","isinvalid","name","readonly","decrementlabel","incrementlabel","onValue","numericValue","onIncrement","numericStep","onDecrement","customElementForwardEvents"],"mappings":";;;svHAAA,oBAgEIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,iBAAkB,CAAC,EACnBC,cAAM,CAAC,EACPC,cAAM,GAAG,EACTC,eAAO,CAAC,EACRC,eAAO,GAAG,EACVC,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,oBAAY,EAAK,EACjBC,eAAO,yBAAyB,EAChCC,EAAQV,EAAAC,EAAA,WAAA,CAAA,EACRU,yBAAiB,WAAW,EAC5BC,yBAAiB,WAAW,EAGxB,MAAAC,EAAO,IAAe,OACpBC,EAAe,OAAOZ,GAAK,EAC7BY,EAAeV,IACjBF,EAAQE,EAAG,CAAA,EACFU,EAAeX,IACxBD,EAAQC,EAAG,CAAA,EAEXD,EAAQY,CAAY,CAExB,EAEMC,EAAW,IAAe,OACxBD,EAAe,OAAOZ,GAAK,EAC3Bc,EAAc,OAAOX,GAAI,EAE3BS,EAAeE,GAAeZ,IAChCF,EAAQY,EAAeE,CAAW,EAElCd,EAAQE,EAAG,CAAA,CAEf,EAEMa,EAAW,IAAe,OACxBH,EAAe,OAAOZ,GAAK,EAC3Bc,EAAc,OAAOX,GAAI,EAE3BS,EAAeE,GAAeb,IAChCD,EAAQY,EAAeE,CAAW,EAElCd,EAAQC,EAAG,CAAA,CAEf,sFA5CoB,EAAC,2CACb,EAAC,2CACD,IAAG,6CACF,EAAC,6CACD,IAAG,4GAEE,GAAK,6CACV,0BAAyB,sHAEf,YAAW,iEACX,YAAW,wCA2CnBU,yBAeAE,wGAaAE,6GAlCA,gDAAiDX,EAAI,CAAA,GAAIE,KAAa,kFAQhEL,GAAG,sBACHC,GAAG,sBACHF,GAAK,wBACHM,EAAS,CAAA,EAAA,oDAMXT,GAAE,aAGPG,EAAK,IAAKE,EAAG,GAAIG,EAAQ,MAMQK,GAAc,sBAI1Cb,GAAE,aAGPG,EAAK,IAAKC,EAAG,GAAII,EAAQ,MAMQI,GAAc,sBAzC7D,+MA3GYO"}

package/dist/components/quantityselector/QuantitySelector.svelte

@@ -7,8 +7,6 @@
 
 <script lang="ts">
   import { customElementForwardEvents } from '../../utils';
-  import Less24 from '@mozaic-ds/icons-svelte/svelte/Less24/Less24.svelte';
-  import More24 from '@mozaic-ds/icons-svelte/svelte/More24/More24.svelte';
   /**
    * A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.
    */
@@ -136,7 +134,7 @@
     onclick={onIncrement}
   >
     <span class="mc-quantity-selector__icon">
-      <More24 />
+      <more-24></more-24>
     </span>
     <span class="mc-quantity-selector__label">{incrementlabel}</span>
   </button>
@@ -149,7 +147,7 @@
     onclick={onDecrement}
   >
     <span class="mc-quantity-selector__icon">
-      <Less24 />
+      <less-24></less-24>
     </span>
     <span class="mc-quantity-selector__label">{decrementlabel}</span>
   </button>
@@ -160,19 +158,19 @@
  */
 .mc-quantity-selector {
   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;
   width: 100%;
   height: 3rem;
-  border-radius: var(--radius-s, 0.25rem);
   box-sizing: border-box;
   display: flex;
   gap: 0.25rem;
   padding: 0.1875rem;
   position: relative;
+  border-radius: var(--border-radius-s, 0.25rem);
 }
 .mc-quantity-selector__control {
   background-color: transparent;
@@ -219,7 +217,7 @@
   padding: 0;
   height: 2.5rem;
   width: 2.5rem;
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   color: var(--quantity-selector-color-button-text-default, #242938);
   display: inline-flex;
   align-items: center;
@@ -253,16 +251,16 @@
 }
 .mc-quantity-selector::after {
   transition: box-shadow 200ms ease;
-  border-radius: var(--radius-s, 0.25rem);
   content: "";
   position: absolute;
   inset: -0.125rem var(--inset-x, 3rem);
   pointer-events: none;
   display: block;
+  border-radius: var(--border-radius-s, 0.25rem);
 }
 .mc-quantity-selector: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-quantity-selector:has(input:disabled) {
   background-color: var(--forms-color-background-disabled, #d9d9d9);
@@ -302,11 +300,11 @@
 }
 .mc-quantity-selector.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-quantity-selector.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-quantity-selector * {
   box-sizing: border-box;

package/dist/components/quantityselector/QuantitySelector.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuantitySelector.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/quantityselector/QuantitySelector.svelte.ts"],"names":[],"mappings":"AAOE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAiFH,QAAA,MAAM,gBAAgB,gDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"QuantitySelector.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/quantityselector/QuantitySelector.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA+EH,QAAA,MAAM,gBAAgB,gDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/radio/Radio.js

@@ -1,4 +1,4 @@
-import{c as k,p as w,a as g,b as a,f as q,s as x,d as f,t as y,i as E,j as z,k as t,r as _,e as j,g as B,h as D}from"../../custom-element.js";import{r as F,s as u,c as R}from"../../attributes.js";import{c as S}from"../../custom-element-forward-events.js";var A=q('<div class="mc-radio svelte-1bwbq3n"><input type="radio"/> <label class="mc-radio__label svelte-1bwbq3n"> </label></div>');const C={hash:"svelte-1bwbq3n",code:`/**
+import{c as w,p as k,a as g,b as a,f as q,s as x,d as f,t as y,i as E,j as z,k as t,r as _,e as j,g as B,h as D}from"../../custom-element.js";import{r as F,s as u,d as R}from"../../attributes.js";import{c as S}from"../../custom-element-forward-events.js";var A=q('<div class="mc-radio svelte-1bwbq3n"><input type="radio"/> <label class="mc-radio__label svelte-1bwbq3n"> </label></div>');const C={hash:"svelte-1bwbq3n",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-radio.svelte-1bwbq3n {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-radio__label.svelte-1bwbq3n {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-radio__input.svelte-1bwbq3n {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease 200ms;height:1.25rem;width:1.25rem;position:relative;}.mc-radio__input.svelte-1bwbq3n::before {border-radius:var(--radius-full, 100%);content:"";display:block;height:0.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:0.5rem;}.mc-radio__input.svelte-1bwbq3n:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-1bwbq3n: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-radio__input.svelte-1bwbq3n:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-1bwbq3n:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-1bwbq3n:checked, .mc-radio__input.svelte-1bwbq3n:disabled {border-color:transparent;}.mc-radio__input.svelte-1bwbq3n:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-1bwbq3n:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-1bwbq3n:disabled + .mc-radio__label:where(.svelte-1bwbq3n) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-1bwbq3n:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-1bwbq3n:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-1bwbq3n:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}`};function G(v,r){w(r,!0),g(v,C);let i=a(r,"id",7),d=a(r,"name",7),l=a(r,"label",7),s=a(r,"checked",15,!1),n=a(r,"disabled",7),c=a(r,"isinvalid",7);var h={get id(){return i()},set id(e){i(e),t()},get name(){return d()},set name(e){d(e),t()},get label(){return l()},set label(e){l(e),t()},get checked(){return s()},set checked(e=!1){s(e),t()},get disabled(){return n()},set disabled(e){n(e),t()},get isinvalid(){return c()},set isinvalid(e){c(e),t()}},b=A(),o=f(b);F(o);var m=x(o,2),p=f(m,!0);return _(m),_(b),y(()=>{u(o,"id",i()),j(o,1,B(["mc-radio__input",c()&&"is-invalid"]),"svelte-1bwbq3n"),u(o,"name",d()),o.disabled=n(),R(o,s()),u(m,"for",i()),D(p,l())}),E(v,b),z(h)}customElements.define("m-radio",k(G,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},id:{},name:{},label:{},disabled:{},isinvalid:{}},[],[],!0,S));
+ */.mc-radio.svelte-1bwbq3n {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-radio__label.svelte-1bwbq3n {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-radio__input.svelte-1bwbq3n {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease 200ms;height:1.25rem;width:1.25rem;position:relative;}.mc-radio__input.svelte-1bwbq3n::before {border-radius:var(--border-radius-full, 100%);content:"";display:block;height:0.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:0.5rem;}.mc-radio__input.svelte-1bwbq3n:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-1bwbq3n: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-radio__input.svelte-1bwbq3n:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-1bwbq3n:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-1bwbq3n:checked, .mc-radio__input.svelte-1bwbq3n:disabled {border-color:transparent;}.mc-radio__input.svelte-1bwbq3n:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-1bwbq3n:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-1bwbq3n:disabled + .mc-radio__label:where(.svelte-1bwbq3n) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-1bwbq3n:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-1bwbq3n:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-1bwbq3n:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}`};function G(v,r){k(r,!0),g(v,C);let d=a(r,"id",7),i=a(r,"name",7),l=a(r,"label",7),s=a(r,"checked",15,!1),n=a(r,"disabled",7),c=a(r,"isinvalid",7);var h={get id(){return d()},set id(e){d(e),t()},get name(){return i()},set name(e){i(e),t()},get label(){return l()},set label(e){l(e),t()},get checked(){return s()},set checked(e=!1){s(e),t()},get disabled(){return n()},set disabled(e){n(e),t()},get isinvalid(){return c()},set isinvalid(e){c(e),t()}},b=A(),o=f(b);F(o);var m=x(o,2),p=f(m,!0);return _(m),_(b),y(()=>{u(o,"id",d()),j(o,1,B(["mc-radio__input",c()&&"is-invalid"]),"svelte-1bwbq3n"),u(o,"name",i()),o.disabled=n(),R(o,s()),u(m,"for",d()),D(p,l())}),E(v,b),z(h)}customElements.define("m-radio",w(G,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},id:{},name:{},label:{},disabled:{},isinvalid:{}},[],[],!0,S));
 //# sourceMappingURL=Radio.js.map

package/dist/components/radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-radio',\n    props: {\n      checked: { reflect: true, type: 'Boolean', attribute: 'checked' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the radio, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the radio element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The text label displayed next to the radio.\n     */\n    label?: string;\n    /**\n     * The radio's checked state.\n     */\n    checked?: boolean;\n    /**\n     * If `true`, applies an invalid state to the radio.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the radio, making it non-interactive.\n     */\n    disabled?: boolean;\n  }\n\n  let { id, name, label, checked = $bindable(false), disabled, isinvalid }: Props = $props();\n</script>\n\n<div class=\"mc-radio\">\n  <input\n    {id}\n    type=\"radio\"\n    class={['mc-radio__input', isinvalid && 'is-invalid']}\n    {name}\n    {disabled}\n    {checked}\n  />\n  <label for={id} class=\"mc-radio__label\">{label}</label>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/radio';\n</style>\n"],"names":["id","$.prop","$$props","name","label","checked","disabled","isinvalid","customElementForwardEvents"],"mappings":";;ywEAAA,oBA0CQA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAEE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EAAEG,mBAAoB,EAAK,EAAGC,EAAQL,EAAAC,EAAA,WAAA,CAAA,EAAEK,EAASN,EAAAC,EAAA,YAAA,CAAA,sLAA3B,GAAK,gNAOtC,kBAAmBK,KAAa,YAAY,CAAA,EAAA,gBAAA,oDAK1CP,GAAE,MAA2BI,GAAK,eAXhD,wJArCYI"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-radio',\n    props: {\n      checked: { reflect: true, type: 'Boolean', attribute: 'checked' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the radio, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the radio element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The text label displayed next to the radio.\n     */\n    label?: string;\n    /**\n     * The radio's checked state.\n     */\n    checked?: boolean;\n    /**\n     * If `true`, applies an invalid state to the radio.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the radio, making it non-interactive.\n     */\n    disabled?: boolean;\n  }\n\n  let { id, name, label, checked = $bindable(false), disabled, isinvalid }: Props = $props();\n</script>\n\n<div class=\"mc-radio\">\n  <input\n    {id}\n    type=\"radio\"\n    class={['mc-radio__input', isinvalid && 'is-invalid']}\n    {name}\n    {disabled}\n    {checked}\n  />\n  <label for={id} class=\"mc-radio__label\">{label}</label>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/radio';\n</style>\n"],"names":["id","$.prop","$$props","name","label","checked","disabled","isinvalid","customElementForwardEvents"],"mappings":";;sxEAAA,oBA0CQA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAEE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EAAEG,mBAAoB,EAAK,EAAGC,EAAQL,EAAAC,EAAA,WAAA,CAAA,EAAEK,EAASN,EAAAC,EAAA,YAAA,CAAA,sLAA3B,GAAK,gNAOtC,kBAAmBK,KAAa,YAAY,CAAA,EAAA,gBAAA,oDAK1CP,GAAE,MAA2BI,GAAK,eAXhD,wJArCYI"}