@mozaic-ds/web-components 1.0.0-beta.7 → 1.1.0

package/dist/components/pagination/Pagination.svelte

@@ -9,27 +9,48 @@
   import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';
   import Button from '../button/Button.svelte';
   import IconButton from '../iconbutton/IconButton.svelte';
-
+  /**
+   * 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.
+   */
   interface Props {
+    /**
+     * A unique identifier for the pagination.
+     */
     id: string;
-    value?: number;
-    total?: number;
+    /**
+     * The current value of the selected page.
+     */
+    value: number;
+    /**
+     * If `true`, display a compact version without the select.
+     */
     compact?: boolean;
+    /**
+     * Total number of pages.
+     */
+    total?: number;
+    /**
+     * Accessible label for the select of the pagination.
+     */
     selectLabel?: string;
-    pagelabel?: string;
+    /**
+     * Word displayed before the current page number.
+     */
     prefixlabel?: string;
-    [key: string]: any;
+    /**
+     * Word displayed between the current page number and total page number.
+     */
+    pagelabel?: string;
   }
 
   let {
     id,
     value = $bindable(1),
     total = 10,
-    compact = false,
+    compact,
     selectLabel = 'Page selector',
-    pagelabel = 'of',
     prefixlabel = 'Page',
-    ...events
+    pagelabel = 'of',
   }: Props = $props();
 
   let selected = $state(Number(value));
@@ -60,20 +81,15 @@
 <nav class="mc-pagination" aria-label="pagination">
   {#if !compact}
     <Button
-      iconOnly
+      iconposition="only"
       aria-label="Previous page"
       disabled={isFirstPage()}
       onclick={previous}
     >
-      <ChevronLeft24 />
+      <ChevronLeft24 slot="icon" />
     </Button>
   {:else}
-    <IconButton
-      outlined
-      aria-label="Previous page"
-      disabled={isFirstPage()}
-      onclick={previous}
-    >
+    <IconButton outlined aria-label="Previous page" disabled={isFirstPage()} onclick={previous}>
       <ChevronLeft24 slot="icon" />
     </IconButton>
   {/if}
@@ -88,11 +104,8 @@
         bind:value={selected}
         onchange={onSelectChange}
       >
-        {#each pages() as page}
-          <option
-            value={Number(page)}
-            selected={Number(page) == Number(selected)}
-          >
+        {#each pages() as page, index (index)}
+          <option value={Number(page)} selected={Number(page) == Number(selected)}>
             {prefixlabel}
             {page}
             {pagelabel}
@@ -111,21 +124,11 @@
   {/if}
 
   {#if !compact}
-    <Button
-      iconOnly
-      aria-label="Next page"
-      disabled={isLastPage()}
-      onclick={next}
-    >
-      <ChevronRight24 />
+    <Button iconposition="only" aria-label="Next page" disabled={isLastPage()} onclick={next}>
+      <ChevronRight24 slot="icon" />
     </Button>
   {:else}
-    <IconButton
-      outlined
-      aria-label="Next page"
-      disabled={isLastPage()}
-      onclick={next}
-    >
+    <IconButton outlined aria-label="Next page" disabled={isLastPage()} onclick={next}>
       <ChevronRight24 slot="icon" />
     </IconButton>
   {/if}

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

@@ -1,12 +1,35 @@
+/**
+ * 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.
+ */
 interface Props {
+    /**
+     * A unique identifier for the pagination.
+     */
     id: string;
-    value?: number;
-    total?: number;
+    /**
+     * The current value of the selected page.
+     */
+    value: number;
+    /**
+     * If `true`, display a compact version without the select.
+     */
     compact?: boolean;
+    /**
+     * Total number of pages.
+     */
+    total?: number;
+    /**
+     * Accessible label for the select of the pagination.
+     */
     selectLabel?: string;
-    pagelabel?: string;
+    /**
+     * Word displayed before the current page number.
+     */
     prefixlabel?: string;
-    [key: string]: any;
+    /**
+     * Word displayed between the current page number and total page number.
+     */
+    pagelabel?: string;
 }
 declare const Pagination: import("svelte").Component<Props, {}, "value">;
 type Pagination = ReturnType<typeof Pagination>;

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

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

package/dist/components/pagination/README.md

@@ -0,0 +1,16 @@
+# `m-pagination`
+
+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.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the pagination. | `string` |   |
+| `value*` | The current value of the selected page. | `number` | `$bindable(1)` |
+| `compact` | If `true`, display a compact version without the select. | `boolean` |   |
+| `total` | Total number of pages. | `number` | `10` |
+| `selectLabel` | Accessible label for the select of the pagination. | `string` | `Page selector` |
+| `prefixlabel` | Word displayed before the current page number. | `string` | `Page` |
+| `pagelabel` | Word displayed between the current page number and total page number. | `string` | `of` |
+

package/dist/components/passwordinput/PasswordInput.js

@@ -1,9 +1,8 @@
-import{n as G,c as I,p as q,a as A,b as o,f as j,D as J,m as i,v as K,d as c,s as S,t as C,h as V,i as N,w as O,j as l,r as d,g as D,e as Q}from"../../custom-element.js";import{i as R}from"../../if.js";import{b as T}from"../../attributes.js";import{c as U}from"../../input.js";import{B as W}from"../button/Button.js";import"../../slot.js";import"../loader/Loader.js";function X(h,t,s){t(""),s()()}var Y=j('<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>'),$=j('<span class="svelte-1luc9tv"> </span>'),ee=j("<div><input/> <!> <!></div>");const te={hash:"svelte-1luc9tv",code:`/**
+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:`/**
  * 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[type=number].svelte-1luc9tv::-webkit-inner-spin-button, .mc-text-input__control[type=number].svelte-1luc9tv::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-text-input__control[type=number].svelte-1luc9tv {
-  /* For Gecko rendering engine */appearance:textfield;}.mc-text-input__control[type=search].svelte-1luc9tv::-webkit-search-decoration, .mc-text-input__control[type=search].svelte-1luc9tv::-webkit-search-cancel-button {appearance:none;}.mc-text-input__control.svelte-1luc9tv {padding:0.75rem 0.6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);flex-grow:1;}.mc-text-input__control.svelte-1luc9tv::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__icon.svelte-1luc9tv {fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-1luc9tv:focus-within {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-text-input.svelte-1luc9tv:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-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-text-input__icon:where(.svelte-1luc9tv)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-1luc9tv:has(.mc-text-input__icon:where(.svelte-1luc9tv)) .mc-text-input__control:where(.svelte-1luc9tv) {padding-inline-start:0;}.mc-text-input.svelte-1luc9tv:has(.mc-controls-options:where(.svelte-1luc9tv)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-1luc9tv:has(.mc-controls-options:where(.svelte-1luc9tv)) .mc-text-input__control:where(.svelte-1luc9tv) {padding-inline-end:0;}.mc-text-input--s.svelte-1luc9tv {height:2rem;}.mc-text-input.is-invalid.svelte-1luc9tv {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-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-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-enable string-no-newline */.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;}.mc-controls-options__unit.svelte-1luc9tv {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);}`};function oe(h,t){q(t,!0),A(h,te);let s=o(t,"id",7),g=o(t,"name",7),a=o(t,"value",15,""),_=o(t,"placeholder",7,""),u=o(t,"isinvalid",7,!1),v=o(t,"disabled",7,!1),x=o(t,"readonly",7,!1),w=o(t,"isclearable",7,!1),y=o(t,"clearlabel",7,"Clear content"),m=o(t,"buttonlabel",23,()=>({show:"Show",hide:"Hide"})),k=o(t,"onclear",7),z=o(t,"ontoggle",7),H=J(t,["$$slots","$$events","$$legacy","$$host","id","name","value","placeholder","isinvalid","disabled","readonly","isclearable","clearlabel","buttonlabel","onclear","ontoggle"]),n=K(!1);function M(){O(n,!i(n)),z()(i(n))}var P={get id(){return s()},set id(e){s(e),l()},get name(){return g()},set name(e){g(e),l()},get value(){return a()},set value(e=""){a(e),l()},get placeholder(){return _()},set placeholder(e=""){_(e),l()},get isinvalid(){return u()},set isinvalid(e=!1){u(e),l()},get disabled(){return v()},set disabled(e=!1){v(e),l()},get readonly(){return x()},set readonly(e=!1){x(e),l()},get isclearable(){return w()},set isclearable(e=!1){w(e),l()},get clearlabel(){return y()},set clearlabel(e="Clear content"){y(e),l()},get buttonlabel(){return m()},set buttonlabel(e={show:"Show",hide:"Hide"}){m(e),l()},get onclear(){return k()},set onclear(e){k(e),l()},get ontoggle(){return z()},set ontoggle(e){z(e),l()}},p=ee(),L=c(p);T(L,()=>({class:"mc-password-input__control mc-text-input__control",id:s(),name:g(),type:i(n)?"text":"password",placeholder:_(),disabled:v(),readonly:x(),"aria-invalid":u(),...H}),void 0,void 0,"svelte-1luc9tv",!0);var B=S(L,2);{var Z=e=>{var b=Y(),r=c(b);r.__click=[X,a,k];var f=S(c(r),2),F=c(f,!0);d(f),d(r),d(b),C(()=>D(F,y())),V(e,b)};R(B,e=>{w()&&a()&&e(Z)})}var E=S(B,2);return W(E,{type:"button",role:"switch",tabindex:"0",get"aria-checked"(){return i(n)},size:"s",ghost:!0,get disabled(){return v()},onclick:M,children:(e,b)=>{var r=$(),f=c(r,!0);d(r),C(()=>D(f,i(n)?m().hide:m().show)),V(e,r)},$$slots:{default:!0}}),d(p),C(()=>Q(p,1,`mc-password-input mc-text-input ${u()?"is-invalid":""}`,"svelte-1luc9tv")),U(L,a),V(h,p),N(P)}G(["click"]);customElements.define("m-password-input",I(oe,{id:{},name:{},value:{},placeholder:{},isinvalid:{},disabled:{},readonly:{},isclearable:{},clearlabel:{},buttonlabel:{},onclear:{},ontoggle:{}},[],[],!0));
+/* stylelint-enable string-no-newline */.mc-button.svelte-1luc9tv {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1luc9tv:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1luc9tv:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1luc9tv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1luc9tv {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1luc9tv {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-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));
 //# 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  }}\n/>\n\n<script lang=\"ts\">\n  import Button from '../button/Button.svelte';\n  interface Props {\n    id: string;\n    name?: string;\n    value?: string | number;\n    placeholder?: string;\n    isinvalid?: boolean;\n    disabled?: boolean;\n    readonly?: boolean;\n    isclearable?: boolean;\n    clearlabel?: string;\n    buttonlabel?: {\n      show: string;\n      hide: string;\n    };\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(''),\n    placeholder = '',\n    isinvalid = false,\n    disabled = false,\n    readonly = false,\n    isclearable = false,\n    clearlabel = 'Clear content',\n    buttonlabel = { show: 'Show', hide: 'Hide' },\n    onclear,\n    ontoggle,\n    ...events\n  }: Props = $props();\n\n  let isVisible = $state(false);\n\n  function toggleVisibility() {\n    isVisible = !isVisible;\n    ontoggle(isVisible);\n  }\n\n  function clearValue() {\n    value = '';\n    onclear();\n  }\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    {...events}\n  />\n  {#if isclearable && value}\n    <div class=\"mc-controls-options\">\n      <button\n        class=\"mc-controls-options__button\"\n        type=\"button\"\n        onclick={clearValue}\n      >\n        <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n          />\n        </svg>\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n\n  <Button\n    type=\"button\"\n    role=\"switch\"\n    tabindex=\"0\"\n    aria-checked={isVisible}\n    size=\"s\"\n    ghost={true}\n    {disabled}\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/controls-options';\n</style>\n"],"names":["clearValue","_","value","onclear","id","$.prop","$$props","name","placeholder","isinvalid","disabled","readonly","isclearable","clearlabel","buttonlabel","ontoggle","events","$.rest_props","isVisible","toggleVisibility","$.set","$$value","$$render","consequent","$.template_effect","$.set_text","text_1","$.get"],"mappings":"+WAgDW,SAAAA,EAAUC,EAAAC,EAAAC,EAAG,CACpBD,EAAQ,EAAE,EACVC,IAAO,CACT;;;;;;;o5CAnDF,qBA0BIC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJJ,iBAAkB,EAAE,EACpBM,sBAAc,EAAE,EAChBC,oBAAY,EAAK,EACjBC,mBAAW,EAAK,EAChBC,mBAAW,EAAK,EAChBC,sBAAc,EAAK,EACnBC,qBAAa,eAAe,EAC5BC,6BAAgB,KAAM,OAAQ,KAAM,MAAM,EAAA,EAC1CX,EAAOE,EAAAC,EAAA,UAAA,CAAA,EACPS,EAAQV,EAAAC,EAAA,WAAA,CAAA,EACLU,EAAAC,EAAAX,EAAA,8KAGDY,IAAmB,EAAK,EAEnB,SAAAC,GAAmB,CAC1BC,EAAAF,KAAaA,CAAS,CAAA,EACtBH,EAAQ,IAACG,CAAS,CAAA,CACpB,kIAlBoB,GAAE,2DACN,GAAE,uDACJ,GAAK,qDACN,GAAK,qDACL,GAAK,2DACF,GAAK,yDACN,gBAAe,yCACZ,IAAA,YAAAG,EAAA,CAAA,KAAM,OAAQ,KAAM,QAAM,6NAwBpCH,CAAS,EAAG,OAAS,oEAKbT,EAAS,KACnBO,2FAOShB,EAAUE,EAAAC,CAAA,qDAQuBU,EAAU,CAAA,CAAA,kBAbrDD,EAAW,GAAIV,KAAKoB,EAAAC,CAAA,mGAsBTL,CAAS,kBAEhB,sCAEEC,4CAEFK,EAAA,IAAAC,EAAAC,EAAAC,EAAAT,CAAS,EAAGJ,EAAW,EAAC,KAAOA,EAAW,EAAC,IAAI,CAAA,qFAzCbL,EAAS,EAAG,aAAe,EAAE,GAAA,gBAAA,CAAA,oBAF1E"}
+{"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"}

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

@@ -0,0 +1,84 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import PasswordInput from './PasswordInput.svelte';
+import { tick } from 'svelte';
+describe('m-password-input component', () => {
+    const baseProps = {
+        id: 'password-input',
+        value: '',
+    };
+    it('renders input with type password initially', () => {
+        render(PasswordInput, { props: baseProps });
+        const input = document.querySelector('input');
+        expect(input).toBeTruthy();
+        expect(input.type).toBe('password');
+    });
+    it('toggles password visibility on button click', async () => {
+        const { getByRole, getByText } = render(PasswordInput, {
+            props: baseProps,
+        });
+        const toggleBtn = getByRole('switch');
+        const input = document.querySelector('input');
+        expect(input.type).toBe('password');
+        expect(toggleBtn.getAttribute('aria-checked')).toBe('false');
+        expect(getByText('Show')).toBeTruthy();
+        await fireEvent.click(toggleBtn);
+        await tick();
+        expect(input.type).toBe('text');
+        expect(toggleBtn.getAttribute('aria-checked')).toBe('true');
+        expect(getByText('Hide')).toBeTruthy();
+        await fireEvent.click(toggleBtn);
+        await tick();
+        expect(input.type).toBe('password');
+        expect(toggleBtn.getAttribute('aria-checked')).toBe('false');
+    });
+    it('shows clear button when isclearable is true and value is not empty', async () => {
+        const { container } = render(PasswordInput, {
+            props: { ...baseProps, isclearable: true, value: 'secret' },
+        });
+        const clearBtn = container.querySelector('.mc-controls-options__button');
+        expect(clearBtn).toBeTruthy();
+        await fireEvent.click(clearBtn);
+        await tick();
+        const input = container.querySelector('input');
+        expect(input.value).toBe('');
+    });
+    it('does not show clear button when value is empty even if isclearable is true', () => {
+        const { container } = render(PasswordInput, {
+            props: { ...baseProps, isclearable: true, value: '' },
+        });
+        const clearBtn = container.querySelector('.mc-controls-options__button');
+        expect(clearBtn).toBeNull();
+    });
+    it('respects disabled and readonly props', () => {
+        const { container } = render(PasswordInput, {
+            props: { ...baseProps, disabled: true, readonly: true },
+        });
+        const input = container.querySelector('input');
+        expect(input.disabled).toBe(true);
+        expect(input.readOnly).toBe(true);
+        const toggleBtn = container.querySelector('button[role="switch"]');
+        expect(toggleBtn.disabled).toBe(true);
+    });
+    it('adds is-invalid class when isinvalid is true', () => {
+        const { container } = render(PasswordInput, {
+            props: { ...baseProps, isinvalid: true },
+        });
+        expect(container.firstChild).toHaveClass('is-invalid');
+    });
+    it('uses custom clearlabel and buttonlabel props', () => {
+        const clearlabel = 'Clear password';
+        const buttonlabel = { show: 'Reveal', hide: 'Conceal' };
+        const { getByText } = render(PasswordInput, {
+            props: {
+                ...baseProps,
+                isclearable: true,
+                value: 'x',
+                clearlabel,
+                buttonlabel,
+            },
+        });
+        expect(getByText(clearlabel)).toBeTruthy();
+        expect(getByText(buttonlabel.show)).toBeTruthy();
+    });
+});

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

@@ -1,14 +1,11 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * A password input is used for entering secure information like passwords.
- * It supports visibility toggle and optional clear functionality.
- *
- * The `MPasswordInput` component is the **Svelte / WebComponent** implementation of the Mozaic Design System password input field.
- * Refer to the full specification in [the Mozaic documentation](https://mozaic.adeo.cloud/components/form/password-input).
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const WithClearButton: any;
-export declare const Disabled: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const WithValue: Story;
+export declare const Default: Story;
+export declare const Clearable: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
 //# sourceMappingURL=PasswordInput.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/passwordinput/PasswordInput.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;;GAMG;wBA6DE,IAAI;AA3DT,wBA2DU;AAsBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAazC,eAAO,MAAM,eAAe,KAAoB,CAAC;AAmBjD,eAAO,MAAM,QAAQ,KAAoB,CAAC"}
+{"version":3,"file":"PasswordInput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/passwordinput/PasswordInput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAuCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

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

@@ -1,132 +1,75 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-import { userEvent, expect } from 'storybook/test';
-/**
- * A password input is used for entering secure information like passwords.
- * It supports visibility toggle and optional clear functionality.
- *
- * The `MPasswordInput` component is the **Svelte / WebComponent** implementation of the Mozaic Design System password input field.
- * Refer to the full specification in [the Mozaic documentation](https://mozaic.adeo.cloud/components/form/password-input).
- */
-export default {
-    title: 'Form Elements/Password Input',
-    tags: ['autodocs', 'new'],
-    argTypes: {
-        id: {
-            description: 'Unique identifier for the input',
-            control: 'text',
-        },
-        name: {
-            description: 'Name attribute for form submission',
-            control: 'text',
-        },
-        value: {
-            description: 'Value of the password input',
-            control: 'text',
-        },
-        placeholder: {
-            description: 'Placeholder text',
-            control: 'text',
-        },
-        isinvalid: {
-            description: 'Displays input as invalid',
-            control: 'boolean',
-        },
-        disabled: {
-            description: 'Disables the input field',
-            control: 'boolean',
-        },
-        readonly: {
-            description: 'Makes the input read-only',
-            control: 'boolean',
-        },
-        isclearable: {
-            description: 'Show a clear button when value is set',
-            control: 'boolean',
-        },
-        clearLabel: {
-            description: 'Label for the clear button',
-            control: 'text',
-        },
-        buttonLabel: {
-            description: 'Show/Hide button labels',
-            control: 'object',
-        },
-        onclear: {
-            description: 'Event that occurs when the clear button is clicked',
-            action: 'onclear',
-            table: {
-                category: 'Events',
-            },
-        },
-        ontoggle: {
-            description: 'Event that occurs when the show/hide button is clicked',
-            action: 'ontoggle',
-            table: {
-                category: 'Events',
-            },
-        },
+const meta = {
+    title: 'Form Elements/PasswordInput',
+    component: 'm-password-input',
+    args: {
+        id: 'passwordInputId',
+        placeholder: 'Enter your password',
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-password-input
+        id=${ifDefined(args.id)}
+        name=${ifDefined(args.name)}
+        value=${ifDefined(args.value)}
+        placeholder=${ifDefined(args.placeholder)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        disabled=${ifDefined(args.disabled)}
+        readonly=${ifDefined(args.readonly)}
+        isclearable=${ifDefined(args.isclearable)}
+        clearlabel=${ifDefined(args.clearlabel)}
+        @input=${(event) => {
+            onInput(event);
+        }}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-password-input>
+    `;
     },
 };
-const Template = (args) => {
-    const input = document.createElement('m-password-input');
-    input.setAttribute('id', args.id || 'password-input');
-    if (args.name)
-        input.setAttribute('name', args.name);
-    if (args.placeholder)
-        input.setAttribute('placeholder', args.placeholder || 'Password input');
-    if (args.disabled)
-        input.setAttribute('disabled', args.disabled);
-    if (args.readonly)
-        input.setAttribute('readonly', args.readonly);
-    if (args.isinvalid)
-        input.setAttribute('isinvalid', args.isinvalid);
-    if (args.isclearable)
-        input.setAttribute('isclearable', args.isclearable);
-    if (args.clearlabel)
-        input.setAttribute('clearlabel', args.clearlabel);
-    if (args.buttonlabel)
-        input.setAttribute('buttonlabel', JSON.stringify(args.buttonlabel));
-    if (args.value)
-        input.setAttribute('value', args.value);
-    input.addEventListener('input', action('input'));
-    input.onclear = action('onclear');
-    input.ontoggle = action('ontoggle');
-    return input;
-};
-export const Default = Template.bind({});
-Default.args = {
-    placeholder: 'Enter password',
-};
-Default.play = async ({ canvasElement }) => {
-    const inputEl = canvasElement.querySelector('m-password-input');
-    const input = inputEl?.shadowRoot?.querySelector('input');
-    expect(input).not.toBeNull();
-    await userEvent.type(input, 'supersecret');
-    expect(input).toHaveValue('supersecret');
+export default meta;
+export const WithValue = {
+    args: {
+        id: 'withValueId',
+        value: 'Magic-word-123',
+    },
 };
-export const WithClearButton = Template.bind({});
-WithClearButton.args = {
-    placeholder: 'Enter password',
-    value: '123456',
-    isclearable: true,
-    clearlabel: 'Clear',
+export const Default = {};
+export const Clearable = {
+    args: {
+        id: 'clearableId',
+        value: 'Magic-word-123',
+        isclearable: true,
+    },
 };
-WithClearButton.play = async ({ canvasElement }) => {
-    const el = canvasElement.querySelector('m-password-input');
-    const clearBtn = el?.shadowRoot?.querySelector('.mc-controls-options__button');
-    const input = el?.shadowRoot?.querySelector('input');
-    expect(input).toHaveValue('123456');
-    await userEvent.click(clearBtn);
-    expect(input).toHaveValue('');
+export const Disabled = {
+    args: {
+        id: 'disableId',
+        disabled: true,
+    },
 };
-export const Disabled = Template.bind({});
-Disabled.args = {
-    disabled: true,
-    placeholder: 'Cannot edit',
+export const ReadOnly = {
+    args: {
+        id: 'readonlyId',
+        readonly: true,
+    },
 };
-Disabled.play = async ({ canvasElement }) => {
-    const input = canvasElement
-        .querySelector('m-password-input')
-        ?.shadowRoot?.querySelector('input');
-    expect(input).toBeDisabled();
+export const Invalid = {
+    args: {
+        id: 'invalidId',
+        isinvalid: true,
+    },
 };