@mozaic-ds/web-components 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/components/textarea/Textarea.js

@@ -1,7 +1,7 @@
-import{c as u,a as b,b as x,d as r,f as _,x as w,j as z,l as p,m as l,z as y}from"../../custom-element.js";import{b as k,C}from"../../attributes.js";import{a as E}from"../../input.js";var Z=_("<textarea></textarea>");const M={hash:"svelte-m9azs8",code:`/**
+import{c as _,p as w,a as z,b as r,f as p,h as y,i as k,j as l,y as C}from"../../custom-element.js";import{a as E,C as Z}from"../../attributes.js";import{c as M}from"../../input.js";var S=p("<textarea></textarea>");const q={hash:"svelte-m9azs8",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-field__label.svelte-m9azs8, .mc-field__legend.svelte-m9azs8 {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000);}.mc-field__legend.svelte-m9azs8 {padding-inline:0;}.mc-field__requirement.svelte-m9azs8, .mc-field__help.svelte-m9azs8 {font-size:var(--font-size-50, 0.75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666);}.mc-field__help.svelte-m9azs8 {display:block;margin-top:0.125rem;}.mc-field__content.svelte-m9azs8 {margin-top:0.5rem;}.mc-field__validation-message.svelte-m9azs8 {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:0.25rem;margin-top:0.25rem;}.mc-field__validation-message.is-valid.svelte-m9azs8::before, .mc-field__validation-message.is-invalid.svelte-m9azs8::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-m9azs8 {color:var(--field-color-validation-valid, #117f03);}.mc-field__validation-message.is-valid.svelte-m9azs8::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");}.mc-field__validation-message.is-invalid.svelte-m9azs8 {color:var(--field-color-validation-invalid, #c61112);}.mc-field__validation-message.is-invalid.svelte-m9azs8::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");}.mc-field__validation-message.is-loading.svelte-m9azs8 {color:var(--field-color-validation-loading, #666666);}.mc-field--group.svelte-m9azs8 {border-width:0;margin-inline:0;padding:0;}
 
-/* stylelint-enable string-no-newline */.mc-textarea.svelte-m9azs8 {font-family:inherit;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%;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);min-height:4rem;padding:0.5rem 0.75rem;}.mc-textarea.svelte-m9azs8::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-textarea.svelte-m9azs8:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-textarea.svelte-m9azs8:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-textarea.svelte-m9azs8: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);}.mc-textarea[readonly].svelte-m9azs8 {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-textarea.is-invalid.svelte-m9azs8 {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-textarea.is-invalid.svelte-m9azs8: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);}`};function S(g,a){b(a,!0),x(g,M);let o=r(a,"name",7),s=r(a,"value",15),d=r(a,"placeholder",7),n=r(a,"rows",7,2),i=r(a,"isinvalid",7),m=r(a,"disabled",7,!1),v=r(a,"minlength",7),c=r(a,"maxlength",7),f=r(a,"readonly",7),h=w(a,["$$slots","$$events","$$legacy","$$host","name","value","placeholder","rows","isinvalid","disabled","minlength","maxlength","readonly"]);var t=Z();return y(t),k(t,e=>({class:"mc-textarea","aria-invalid":i(),name:o(),id:o(),placeholder:d(),rows:n(),disabled:m(),minlength:v(),maxlength:c(),readonly:f(),spellcheck:"false",...h,[C]:e}),[()=>({"is-invalid":i()})],void 0,"svelte-m9azs8"),E(t,s),z(g,t),p({get name(){return o()},set name(e){o(e),l()},get value(){return s()},set value(e){s(e),l()},get placeholder(){return d()},set placeholder(e){d(e),l()},get rows(){return n()},set rows(e=2){n(e),l()},get isinvalid(){return i()},set isinvalid(e){i(e),l()},get disabled(){return m()},set disabled(e=!1){m(e),l()},get minlength(){return v()},set minlength(e){v(e),l()},get maxlength(){return c()},set maxlength(e){c(e),l()},get readonly(){return f()},set readonly(e){f(e),l()}})}customElements.define("m-textarea",u(S,{name:{},value:{},placeholder:{},rows:{},isinvalid:{},disabled:{},minlength:{},maxlength:{},readonly:{}},[],[],!0));
+/* stylelint-enable string-no-newline */.mc-textarea.svelte-m9azs8 {font-family:inherit;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%;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);min-height:4rem;padding:0.5rem 0.75rem;}.mc-textarea.svelte-m9azs8::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-textarea.svelte-m9azs8:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-textarea.svelte-m9azs8:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-textarea.svelte-m9azs8: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);}.mc-textarea[readonly].svelte-m9azs8 {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-textarea.is-invalid.svelte-m9azs8 {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-textarea.is-invalid.svelte-m9azs8: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);}`};function B(x,a){w(a,!0),z(x,q);let o=r(a,"name",7),n=r(a,"value",15),s=r(a,"placeholder",7),d=r(a,"rows",7,2),m=r(a,"isvalid",7),i=r(a,"isinvalid",7),v=r(a,"disabled",7,!1),c=r(a,"minlength",7),f=r(a,"maxlength",7),g=r(a,"readonly",7),h=r(a,"oninput",7),u=r(a,"onchange",7),b=r(a,"onblur",7);var t=S();return C(t),E(t,e=>({class:"mc-textarea","aria-invalid":i(),name:o(),id:o(),placeholder:s(),rows:d(),disabled:v(),minlength:c(),maxlength:f(),...g()?{readonly:!0}:{},spellcheck:"false",oninput:h(),onchange:u(),onblur:b(),[Z]:e}),[()=>({"is-invalid":i(),"is-valid":m()})],void 0,"svelte-m9azs8"),M(t,n),y(x,t),k({get name(){return o()},set name(e){o(e),l()},get value(){return n()},set value(e){n(e),l()},get placeholder(){return s()},set placeholder(e){s(e),l()},get rows(){return d()},set rows(e=2){d(e),l()},get isvalid(){return m()},set isvalid(e){m(e),l()},get isinvalid(){return i()},set isinvalid(e){i(e),l()},get disabled(){return v()},set disabled(e=!1){v(e),l()},get minlength(){return c()},set minlength(e){c(e),l()},get maxlength(){return f()},set maxlength(e){f(e),l()},get readonly(){return g()},set readonly(e){g(e),l()},get oninput(){return h()},set oninput(e){h(e),l()},get onchange(){return u()},set onchange(e){u(e),l()},get onblur(){return b()},set onblur(e){b(e),l()}})}customElements.define("m-textarea",_(B,{name:{},value:{},placeholder:{},rows:{},isvalid:{},isinvalid:{},disabled:{},minlength:{},maxlength:{},readonly:{},oninput:{},onchange:{},onblur:{}},[],[],!0));
 //# sourceMappingURL=Textarea.js.map

package/dist/components/textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options customElement=\"m-textarea\" />\n\n<script lang=\"ts\">\n  interface Props {\n    name: string;\n    value: string;\n    placeholder: string;\n    rows?: number;\n    isinvalid: boolean;\n    disabled?: boolean;\n    minlength: number;\n    maxlength: number;\n    readonly: boolean;\n  }\n\n  let {\n    name,\n    value = $bindable(),\n    placeholder,\n    rows = 2,\n    isinvalid,\n    disabled = false,\n    minlength,\n    maxlength,\n    readonly,\n    ...events\n  }: Props = $props();\n</script>\n\n<textarea\n  bind:value\n  class=\"mc-textarea\"\n  class:is-invalid={isinvalid}\n  aria-invalid={isinvalid}\n  {name}\n  id={name}\n  {placeholder}\n  {rows}\n  {disabled}\n  {minlength}\n  {maxlength}\n  {readonly}\n  spellcheck=\"false\"\n  {...events}\n></textarea>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n  @use '@mozaic-ds/styles/components/textarea';\n</style>\n"],"names":["name","$.prop","$$props","value","placeholder","rows","isinvalid","disabled","minlength","maxlength","readonly","events","$.rest_props"],"mappings":";;;;;suDAAA,oBAgBIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAKF,EAAAC,EAAA,QAAA,EAAA,EACLE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,eAAO,CAAC,EACRC,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,mBAAW,EAAK,EAChBC,EAASP,EAAAC,EAAA,YAAA,CAAA,EACTO,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAQT,EAAAC,EAAA,WAAA,CAAA,EACLS,EAAAC,EAAAV,EAAA,4MAQSI,EAAS,cAEnBN,EAAI,uGAQJW,8BAXcL,EAAS,CAAA,EAAA,oOAblB,EAAC,4GAEG,GAAK,+KAMpB"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options customElement=\"m-textarea\" />\n\n<script lang=\"ts\">\n  interface Props {\n    name: string;\n    value: string;\n    placeholder: string;\n    rows?: number;\n    isvalid: boolean;\n    isinvalid: boolean;\n    disabled?: boolean;\n    minlength: number;\n    maxlength: number;\n    readonly: boolean;\n    oninput?: (event: Event) => void;\n    onchange?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  let {\n    name,\n    value = $bindable(),\n    placeholder,\n    rows = 2,\n    isvalid,\n    isinvalid,\n    disabled = false,\n    minlength,\n    maxlength,\n    readonly,\n    oninput,\n    onchange,\n    onblur,\n  }: Props = $props();\n</script>\n\n<textarea\n  bind:value\n  class=\"mc-textarea\"\n  class:is-invalid={isinvalid}\n  class:is-valid={isvalid}\n  aria-invalid={isinvalid}\n  {name}\n  id={name}\n  {placeholder}\n  {rows}\n  {disabled}\n  {minlength}\n  {maxlength}\n  {...readonly ? { readonly: true } : {}}\n  spellcheck=\"false\"\n  {oninput}\n  {onchange}\n  {onblur}\n></textarea>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n  @use '@mozaic-ds/styles/components/textarea';\n</style>\n"],"names":["name","$.prop","$$props","value","placeholder","rows","isvalid","isinvalid","disabled","minlength","maxlength","readonly","oninput","onchange","onblur"],"mappings":";;;;;suDAAA,oBAoBIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAKF,EAAAC,EAAA,QAAA,EAAA,EACLE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,eAAO,CAAC,EACRC,EAAOL,EAAAC,EAAA,UAAA,CAAA,EACPK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,mBAAW,EAAK,EAChBC,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAST,EAAAC,EAAA,YAAA,CAAA,EACTS,EAAQV,EAAAC,EAAA,WAAA,CAAA,EACRU,EAAOX,EAAAC,EAAA,UAAA,CAAA,EACPW,EAAQZ,EAAAC,EAAA,WAAA,CAAA,EACRY,EAAMb,EAAAC,EAAA,SAAA,CAAA,oEASMK,EAAS,cAEnBP,EAAI,uEAMJW,EAAQ,EAAA,CAAK,SAAU,EAAI,EAAA,CAAA,iEAVb,CAAA,KAAA,CAAA,aAAAJ,EAAS,aACXD,EAAO,CAAA,EAAA,oOAjBd,EAAC,+JAGG,GAAK,wUAQpB"}

package/dist/components/textarea/Textarea.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta } from '@storybook/html-vite';
+/**
+ * A textarea is used for multi-line text input, sharing appearance and states with text inputs.
+ *
+ * The `MTextArea` component is the **Svelte / WebComponent** implementation of the **Text Area** component of Mozaic Design System.
+ * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/text-area/).
+ */
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const Invalid: any;
+export declare const ReadOnly: any;
+export declare const Disabled: any;
+//# sourceMappingURL=Textarea.stories.d.ts.map

package/dist/components/textarea/Textarea.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/Textarea.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBA2CE,IAAI;AAzCT,wBAyCU;AAmBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAOzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAO1C,eAAO,MAAM,QAAQ,KAAoB,CAAC"}

package/dist/components/textarea/Textarea.svelte

@@ -1,55 +1,44 @@
-<svelte:options tag={null} />
+<svelte:options customElement="m-textarea" />
 
 <script lang="ts">
-  import {
-    createEventDispatcher,
-    get_current_component,
-  } from 'svelte/internal';
-  import { createEventForwarder } from '../../utilities/EventForward';
-  import { EventHandler } from '../../utilities/EventHandler';
-  export let name: string;
-  export let value: string;
-  export let placeholder: string;
-  export let rows = 3;
-  export let isvalid: boolean;
-  export let isinvalid: boolean;
-  export let disabled = false;
-  export let minlength: number;
-  export let maxlength: number;
-
-  const forwardEvents = createEventForwarder(get_current_component());
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-  $: userClass = $$props.class;
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
-
-  function getClasses(isValid: boolean, isInvalid: boolean): string {
-    const classes = ['mc-textarea'];
-
-    if (isValid) {
-      classes.push('is-valid');
-    }
-
-    if (isInvalid) {
-      classes.push('is-invalid');
-    }
-
-    return classes.join(' ');
+  interface Props {
+    name: string;
+    value: string;
+    placeholder: string;
+    rows?: number;
+    isvalid: boolean;
+    isinvalid: boolean;
+    disabled?: boolean;
+    minlength: number;
+    maxlength: number;
+    readonly: boolean;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
   }
 
-  function onInput(e: Event) {
-    let value = (e.target as HTMLInputElement).value;
-    eventHandler.dispatch('on-input', value);
-  }
+  let {
+    name,
+    value = $bindable(),
+    placeholder,
+    rows = 2,
+    isvalid,
+    isinvalid,
+    disabled = false,
+    minlength,
+    maxlength,
+    readonly,
+    oninput,
+    onchange,
+    onblur,
+  }: Props = $props();
 </script>
 
 <textarea
-  use:forwardEvents
   bind:value
-  class="{getClasses(isvalid, isinvalid)} {userClass}"
+  class="mc-textarea"
+  class:is-invalid={isinvalid}
+  class:is-valid={isvalid}
   aria-invalid={isinvalid}
   {name}
   id={name}
@@ -58,13 +47,127 @@
   {disabled}
   {minlength}
   {maxlength}
+  {...readonly ? { readonly: true } : {}}
   spellcheck="false"
-  {...attributes}
-  on:input={onInput}
-/>
+  {oninput}
+  {onchange}
+  {onblur}
+></textarea>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/* stylelint-disable string-no-newline */
+.mc-field__label, .mc-field__legend {
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-s, 1.3);
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--field-color-label, #000000);
+}
+.mc-field__legend {
+  padding-inline: 0;
+}
+.mc-field__requirement, .mc-field__help {
+  font-size: var(--font-size-50, 0.75rem);
+  line-height: var(--line-height-m, 1.5);
+  font-weight: var(--font-weight-regular, 400);
+  vertical-align: top;
+  color: var(--field-color-requirement, #666666);
+}
+.mc-field__help {
+  display: block;
+  margin-top: 0.125rem;
+}
+.mc-field__content {
+  margin-top: 0.5rem;
+}
+.mc-field__validation-message {
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-m, 1.5);
+  display: inline-flex;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+}
+.mc-field__validation-message.is-valid::before, .mc-field__validation-message.is-invalid::before {
+  content: "";
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.mc-field__validation-message.is-valid {
+  color: var(--field-color-validation-valid, #117f03);
+}
+.mc-field__validation-message.is-valid::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");
+}
+.mc-field__validation-message.is-invalid {
+  color: var(--field-color-validation-invalid, #c61112);
+}
+.mc-field__validation-message.is-invalid::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");
+}
+.mc-field__validation-message.is-loading {
+  color: var(--field-color-validation-loading, #666666);
+}
+.mc-field--group {
+  border-width: 0;
+  margin-inline: 0;
+  padding: 0;
+}
+.mc-field--group .mc-field__content {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: 0.25rem;
+}
+.mc-field--group .mc-field__content:where(.mc-field__content--inline) {
+  flex-flow: row wrap;
+  gap: 0.25rem 1rem;
+}
 
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/c.textarea';
-  @import '@mozaic-ds/styles/components/c.fields';
-</style>
+/* stylelint-enable string-no-newline */
+.mc-textarea {
+  font-family: inherit;
+  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%;
+  font-size: var(--font-size-150, 1rem);
+  line-height: var(--line-height-m, 1.5);
+  min-height: 4rem;
+  padding: 0.5rem 0.75rem;
+}
+.mc-textarea::placeholder {
+  color: var(--forms-color-placeholder, #666666);
+}
+.mc-textarea:hover {
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
+}
+.mc-textarea:focus {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-textarea: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);
+}
+.mc-textarea[readonly] {
+  border-color: var(--forms-color-border-read-only, #cccccc);
+  pointer-events: none;
+}
+.mc-textarea.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);
+}
+.mc-textarea.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);
+}</style>

package/dist/components/textarea/Textarea.svelte.d.ts

@@ -3,11 +3,15 @@ interface Props {
     value: string;
     placeholder: string;
     rows?: number;
+    isvalid: boolean;
     isinvalid: boolean;
     disabled?: boolean;
     minlength: number;
     maxlength: number;
     readonly: boolean;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
 }
 declare const Textarea: import("svelte").Component<Props, {}, "value">;
 type Textarea = ReturnType<typeof Textarea>;

package/dist/components/textarea/Textarea.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/Textarea.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AA0BH,QAAA,MAAM,QAAQ,gDAAsC,CAAC;AACrD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/Textarea.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AA6BH,QAAA,MAAM,QAAQ,gDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/textinput/Textinput.js

@@ -1,4 +1,4 @@
-import{v as A,w as R,u as U,c as X,a as Y,b as $,d as n,f as E,t as K,i as ee,j as B,l as te,m as r,g as b,s as D,x as ne,h as T,y as V,r as d,k as re}from"../../custom-element.js";import{i as W}from"../../if.js";import{s as oe}from"../../slot.js";import{b as ie,r as le}from"../../attributes.js";import{a as se}from"../../input.js";function ae(c,t,o){A(()=>{var i=R(()=>t(c,o==null?void 0:o())||{});if(i!=null&&i.destroy)return()=>i.destroy()})}function ce(c,t,o){t(""),o()("onclear")}var me=E('<span class="mc-text-input__icon svelte-1byhm3b"><!></span>'),be=E('<div class="mc-controls-options js-control-options svelte-1byhm3b"><button type="button" class="mc-controls-options__button svelte-1byhm3b"><svg class="mc-controls-options__icon svelte-1byhm3b" 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-1byhm3b"></path></svg> <span class="mc-controls-options__label svelte-1byhm3b"> </span></button></div>'),de=E("<div><!> <input/> <!></div>");const he={hash:"svelte-1byhm3b",code:`/**
+import{q as X,u as oe,n as ie,c as le,p as ae,a as se,b as n,f as N,t as Q,m as x,v as A,e as ce,h as v,i as me,j as r,d as f,s as H,r as p,g as be,w as R,x as U}from"../../custom-element.js";import{s as de}from"../../snippet.js";import{i as J}from"../../if.js";import{s as he}from"../../slot.js";import{a as ue,r as ve}from"../../attributes.js";import{c as fe}from"../../input.js";function pe(b,t,i){X(()=>{var o=oe(()=>t(b,i==null?void 0:i())||{});if(o!=null&&o.destroy)return()=>o.destroy()})}function ge(b,t,i){var o;t(""),(o=i())==null||o("onclear")}var ye=N('<span class="mc-text-input__icon svelte-1byhm3b"><!></span>'),xe=N('<div class="mc-controls-options js-control-options svelte-1byhm3b"><button type="button" class="mc-controls-options__button svelte-1byhm3b"><svg class="mc-controls-options__icon svelte-1byhm3b" 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-1byhm3b"></path></svg> <span class="mc-controls-options__label svelte-1byhm3b"> </span></button></div>'),_e=N("<div><!> <input/> <!></div>");const we={hash:"svelte-1byhm3b",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-controls-options.svelte-1byhm3b {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-1byhm3b {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-1byhm3b:hover .mc-controls-options__icon:where(.svelte-1byhm3b) {fill:var(--forms-color-icon-clear-hover, #4d4d4d);}.mc-controls-options__button.svelte-1byhm3b: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-1byhm3b {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-1byhm3b, .mc-controls-options__icon.svelte-1byhm3b {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-1byhm3b {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-1byhm3b {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);}
 
@@ -6,5 +6,5 @@ import{v as A,w as R,u as U,c as X,a as Y,b as $,d as n,f as E,t as K,i as ee,j
   /* For Blink & WebKit rendering engines */
   /* For Gecko rendering engine */appearance:textfield;}.mc-text-input__control[type=number].svelte-1byhm3b::-webkit-inner-spin-button, .mc-text-input__control[type=number].svelte-1byhm3b::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-text-input__control[type=search].svelte-1byhm3b::-webkit-search-decoration, .mc-text-input__control[type=search].svelte-1byhm3b::-webkit-search-cancel-button {appearance:none;}.mc-text-input__control.svelte-1byhm3b::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__icon.svelte-1byhm3b {fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-1byhm3b: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-1byhm3b: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-1byhm3b:has(input:where(.svelte-1byhm3b):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-1byhm3b:has(input[readonly]:where(.svelte-1byhm3b)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-1byhm3b:has(.mc-text-input__icon:where(.svelte-1byhm3b)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-1byhm3b:has(.mc-text-input__icon:where(.svelte-1byhm3b)) .mc-text-input__control:where(.svelte-1byhm3b) {padding-inline-start:0;}.mc-text-input.svelte-1byhm3b:has(.mc-controls-options:where(.svelte-1byhm3b)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-1byhm3b:has(.mc-controls-options:where(.svelte-1byhm3b)) .mc-text-input__control:where(.svelte-1byhm3b) {padding-inline-end:0;}.mc-text-input--s.svelte-1byhm3b {height:2rem;}.mc-text-input--s.svelte-1byhm3b .mc-text-input__control:where(.svelte-1byhm3b) {padding:0.375rem 0.6875rem;font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);}.mc-text-input--s.svelte-1byhm3b:has(.mc-text-input__icon:where(.svelte-1byhm3b)) {padding-inline-start:0.4375rem;}.mc-text-input--s.svelte-1byhm3b:has(.mc-controls-options:where(.svelte-1byhm3b)) {padding-inline-end:0.4375rem;}.mc-text-input.is-invalid.svelte-1byhm3b {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-1byhm3b: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-1byhm3b :where(.svelte-1byhm3b) {box-sizing:border-box;}
 
-/* stylelint-enable string-no-newline */.right-align.svelte-1byhm3b {text-align:right;}`};function ue(c,t){Y(t,!0),$(c,he);let o=n(t,"name",7),i=n(t,"value",7),p=n(t,"placeholder",7),f=n(t,"inputtype",7,"text"),g=n(t,"isvalid",7),h=n(t,"isinvalid",7),y=n(t,"disabled",7,!1),x=n(t,"size",7,"m"),_=n(t,"iconname",7),w=n(t,"rightalign",7),k=n(t,"min",7),z=n(t,"max",7),q=n(t,"minlength",7),C=n(t,"maxlength",7),j=n(t,"required",7,!1),L=n(t,"clearlabel",7,"Clear content"),F=n(t,"isclearable",7,!1),M=n(t,"onclear",7),S=n(t,"hasicon",7,!1),H=ne(t,["$$slots","$$events","$$legacy","$$host","name","value","placeholder","inputtype","isvalid","isinvalid","disabled","size","iconname","rightalign","min","max","minlength","maxlength","required","clearlabel","isclearable","onclear","hasicon"]),I=V(f),J=V(()=>!!(F()&&i()));function N(e,l,a,v){const s=["mc-text-input","mc-field__input"];return e&&s.push("is-valid"),l&&s.push("is-invalid"),a==="s"&&s.push("mc-text-input--s"),v&&s.push("mc-left-icon-input__input"),w()&&s.push("right-align"),s.join(" ")}const Z=e=>{e.type=T(I)};var u=de(),G=b(u);{var O=e=>{var l=me(),a=b(l);oe(a,t,"icon",{}),d(l),B(e,l)};W(G,e=>{S()&&e(O)})}var m=D(G,2);le(m),ie(m,()=>({class:"mc-text-input__control","aria-invalid":h(),name:o(),id:o(),placeholder:p(),disabled:y(),min:k(),max:z(),minlength:q(),maxlength:C(),spellcheck:"false",required:j(),...H}),void 0,void 0,"svelte-1byhm3b"),A(()=>se(m,i)),ae(m,e=>Z==null?void 0:Z(e));var P=D(m,2);{var Q=e=>{var l=be(),a=b(l);a.__click=[ce,i,M];var v=D(b(a),2),s=b(v,!0);d(v),d(a),d(l),K(()=>re(s,L())),B(e,l)};W(P,e=>{T(J)&&e(Q)})}return d(u),K(e=>ee(u,1,`${e??""} `,"svelte-1byhm3b"),[()=>N(g(),h(),x(),_())]),B(c,u),te({get name(){return o()},set name(e){o(e),r()},get value(){return i()},set value(e){i(e),r()},get placeholder(){return p()},set placeholder(e){p(e),r()},get inputtype(){return f()},set inputtype(e="text"){f(e),r()},get isvalid(){return g()},set isvalid(e){g(e),r()},get isinvalid(){return h()},set isinvalid(e){h(e),r()},get disabled(){return y()},set disabled(e=!1){y(e),r()},get size(){return x()},set size(e="m"){x(e),r()},get iconname(){return _()},set iconname(e){_(e),r()},get rightalign(){return w()},set rightalign(e){w(e),r()},get min(){return k()},set min(e){k(e),r()},get max(){return z()},set max(e){z(e),r()},get minlength(){return q()},set minlength(e){q(e),r()},get maxlength(){return C()},set maxlength(e){C(e),r()},get required(){return j()},set required(e=!1){j(e),r()},get clearlabel(){return L()},set clearlabel(e="Clear content"){L(e),r()},get isclearable(){return F()},set isclearable(e=!1){F(e),r()},get onclear(){return M()},set onclear(e){M(e),r()},get hasicon(){return S()},set hasicon(e=!1){S(e),r()}})}U(["click"]);customElements.define("m-textinput",X(ue,{name:{},value:{},placeholder:{},inputtype:{},isvalid:{},isinvalid:{},disabled:{},size:{},iconname:{},rightalign:{},min:{},max:{},minlength:{},maxlength:{},required:{},clearlabel:{},isclearable:{},onclear:{},hasicon:{}},["icon"],[],!0));
+/* stylelint-enable string-no-newline */.right-align.svelte-1byhm3b {text-align:right;}`};function ke(b,t){ae(t,!0),se(b,we);let i=n(t,"name",7),o=n(t,"value",7),_=n(t,"placeholder",7),w=n(t,"inputtype",7,"text"),k=n(t,"isvalid",7),g=n(t,"isinvalid",7),z=n(t,"disabled",7,!1),q=n(t,"readonly",7,!1),C=n(t,"size",7,"m"),j=n(t,"hasicon",7,!1),d=n(t,"icon",7),L=n(t,"rightalign",7),F=n(t,"min",7),M=n(t,"max",7),S=n(t,"minlength",7),Z=n(t,"maxlength",7),B=n(t,"required",7,!1),D=n(t,"clearlabel",7,"Clear content"),E=n(t,"isclearable",7,!1),G=n(t,"onclear",7),I=n(t,"oninput",7),K=n(t,"onchange",7),T=n(t,"onblur",7),Y=A(w),$=A(()=>!!(E()&&o())),O=A(()=>!!j()||!!d());function ee(e,a,s,c){const l=["mc-text-input","mc-field__input"];return e&&l.push("is-valid"),a&&l.push("is-invalid"),s==="s"&&l.push("mc-text-input--s"),c&&l.push("mc-left-icon-input__input"),L()&&l.push("right-align"),l.join(" ")}const V=e=>{e.type=x(Y)};var y=_e(),P=f(y);{var te=e=>{var a=ye(),s=f(a);{var c=m=>{var u=R(),W=U(u);de(W,d),v(m,u)},l=m=>{var u=R(),W=U(u);he(W,t,"icon",{}),v(m,u)};J(s,m=>{d()?m(c):m(l,!1)})}p(a),v(e,a)};J(P,e=>{x(O)&&e(te)})}var h=H(P,2);ve(h),ue(h,()=>({class:"mc-text-input__control","aria-invalid":g(),name:i(),id:i(),placeholder:_(),disabled:z(),min:F(),max:M(),minlength:S(),maxlength:Z(),spellcheck:"false",required:B(),...q()?{readonly:!0}:{},oninput:I(),onchange:K(),onblur:T()}),void 0,void 0,"svelte-1byhm3b"),X(()=>fe(h,o)),pe(h,e=>V==null?void 0:V(e));var ne=H(h,2);{var re=e=>{var a=xe(),s=f(a);s.__click=[ge,o,G];var c=H(f(s),2),l=f(c,!0);p(c),p(s),p(a),Q(()=>be(l,D())),v(e,a)};J(ne,e=>{x($)&&e(re)})}return p(y),Q(e=>ce(y,1,`${e??""} `,"svelte-1byhm3b"),[()=>ee(k(),g(),C(),x(O))]),v(b,y),me({get name(){return i()},set name(e){i(e),r()},get value(){return o()},set value(e){o(e),r()},get placeholder(){return _()},set placeholder(e){_(e),r()},get inputtype(){return w()},set inputtype(e="text"){w(e),r()},get isvalid(){return k()},set isvalid(e){k(e),r()},get isinvalid(){return g()},set isinvalid(e){g(e),r()},get disabled(){return z()},set disabled(e=!1){z(e),r()},get readonly(){return q()},set readonly(e=!1){q(e),r()},get size(){return C()},set size(e="m"){C(e),r()},get hasicon(){return j()},set hasicon(e=!1){j(e),r()},get icon(){return d()},set icon(e){d(e),r()},get rightalign(){return L()},set rightalign(e){L(e),r()},get min(){return F()},set min(e){F(e),r()},get max(){return M()},set max(e){M(e),r()},get minlength(){return S()},set minlength(e){S(e),r()},get maxlength(){return Z()},set maxlength(e){Z(e),r()},get required(){return B()},set required(e=!1){B(e),r()},get clearlabel(){return D()},set clearlabel(e="Clear content"){D(e),r()},get isclearable(){return E()},set isclearable(e=!1){E(e),r()},get onclear(){return G()},set onclear(e){G(e),r()},get oninput(){return I()},set oninput(e){I(e),r()},get onchange(){return K()},set onchange(e){K(e),r()},get onblur(){return T()},set onblur(e){T(e),r()}})}ie(["click"]);customElements.define("m-textinput",le(ke,{name:{},value:{},placeholder:{},inputtype:{},isvalid:{},isinvalid:{},disabled:{},readonly:{},size:{},hasicon:{},icon:{},rightalign:{},min:{},max:{},minlength:{},maxlength:{},required:{},clearlabel:{},isclearable:{},onclear:{},oninput:{},onchange:{},onblur:{}},["icon"],[],!0));
 //# sourceMappingURL=Textinput.js.map

package/dist/components/textinput/Textinput.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textinput.js","sources":["../../../node_modules/svelte/src/internal/client/dom/elements/actions.js","../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["/** @import { ActionPayload } from '#client' */\nimport { effect, render_effect } from '../../reactivity/effects.js';\nimport { safe_not_equal } from '../../reactivity/equality.js';\nimport { deep_read_state, untrack } from '../../runtime.js';\n\n/**\n * @template P\n * @param {Element} dom\n * @param {(dom: Element, value?: P) => ActionPayload<P>} action\n * @param {() => P} [get_value]\n * @returns {void}\n */\nexport function action(dom, action, get_value) {\n\teffect(() => {\n\t\tvar payload = untrack(() => action(dom, get_value?.()) || {});\n\n\t\tif (get_value && payload?.update) {\n\t\t\tvar inited = false;\n\t\t\t/** @type {P} */\n\t\t\tvar prev = /** @type {any} */ ({}); // initialize with something so it's never equal on first run\n\n\t\t\trender_effect(() => {\n\t\t\t\tvar value = get_value();\n\n\t\t\t\t// Action's update method is coarse-grained, i.e. when anything in the passed value changes, update.\n\t\t\t\t// This works in legacy mode because of mutable_source being updated as a whole, but when using $state\n\t\t\t\t// together with actions and mutation, it wouldn't notice the change without a deep read.\n\t\t\t\tdeep_read_state(value);\n\n\t\t\t\tif (inited && safe_not_equal(prev, value)) {\n\t\t\t\t\tprev = value;\n\t\t\t\t\t/** @type {Function} */ (payload.update)(value);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tinited = true;\n\t\t}\n\n\t\tif (payload?.destroy) {\n\t\t\treturn () => /** @type {Function} */ (payload.destroy)();\n\t\t}\n\t});\n}\n","<svelte:options customElement=\"m-textinput\" />\n\n<script lang=\"ts\">\n  import type { TextInputSize, TextInputType } from './textinput.types';\n\n  interface Props {\n    name: string;\n    value: string;\n    placeholder: string;\n    inputtype?: TextInputType;\n    isvalid: boolean;\n    isinvalid: boolean;\n    disabled?: boolean;\n    size?: TextInputSize;\n    iconname: string;\n    rightalign: boolean;\n    min: string;\n    max: string;\n    minlength: number;\n    maxlength: number;\n    required?: boolean;\n    clearlabel?: string;\n    isclearable?: boolean;\n    hasicon?: boolean;\n    onclear?: (arg: string) => void;\n  }\n\n  let {\n    name,\n    value,\n    placeholder,\n    inputtype = 'text',\n    isvalid,\n    isinvalid,\n    disabled = false,\n    size = 'm',\n    iconname,\n    rightalign,\n    min,\n    max,\n    minlength,\n    maxlength,\n    required = false,\n    clearlabel = 'Clear content',\n    isclearable = false,\n    onclear,\n    hasicon = false,\n    ...events\n  }: Props = $props();\n\n  let inputType = $derived(inputtype);\n  let displayClear = $derived(isclearable && value ? true : false);\n\n  function getClasses(\n    isValid: boolean,\n    isInvalid: boolean,\n    size: TextInputSize,\n    iconname: string,\n  ): string {\n    const classes = ['mc-text-input', 'mc-field__input'];\n\n    if (isValid) {\n      classes.push('is-valid');\n    }\n\n    if (isInvalid) {\n      classes.push('is-invalid');\n    }\n\n    if (size === 's') {\n      classes.push('mc-text-input--s');\n    }\n\n    if (iconname) {\n      classes.push('mc-left-icon-input__input');\n    }\n\n    if (rightalign) {\n      classes.push('right-align');\n    }\n\n    return classes.join(' ');\n  }\n\n  const setType = (node: any) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    node.type = inputType;\n  };\n\n  function resetValue() {\n    value = '';\n    onclear('onclear');\n  }\n</script>\n\n{#snippet icon()}\n  <span class=\"mc-text-input__icon\">\n    <slot name=\"icon\" />\n  </span>\n{/snippet}\n<div class=\"{getClasses(isvalid, isinvalid, size, iconname)} \">\n  {#if hasicon}\n    <span class=\"mc-text-input__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <input\n    bind:value\n    use:setType\n    class=\"mc-text-input__control\"\n    aria-invalid={isinvalid}\n    {name}\n    id={name}\n    {placeholder}\n    {disabled}\n    {min}\n    {max}\n    {minlength}\n    {maxlength}\n    spellcheck=\"false\"\n    {required}\n    {...events}\n  />\n  <!-- Control options -->\n  {#if displayClear}\n    <div class=\"mc-controls-options js-control-options\">\n      <!-- Clear Button -->\n      <button\n        type=\"button\"\n        class=\"mc-controls-options__button\"\n        onclick={resetValue}\n      >\n        <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n          />\n        </svg>\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/controls-options';\n  @use '@mozaic-ds/styles/components/text-input';\n\n  .right-align {\n    text-align: right;\n  }\n</style>\n"],"names":["action","dom","get_value","effect","payload","untrack","resetValue","_","value","onclear","name","$.prop","$$props","placeholder","inputtype","isvalid","isinvalid","disabled","size","iconname","rightalign","min","max","minlength","maxlength","required","clearlabel","isclearable","hasicon","events","$.rest_props","inputType","displayClear","getClasses","isValid","isInvalid","classes","setType","node","$.get","$$render","consequent","consequent_1","$.template_effect","$0","$.set_class","div"],"mappings":"6UAYO,SAASA,GAAOC,EAAKD,EAAQE,EAAW,CAC9CC,EAAO,IAAM,CACZ,IAAIC,EAAUC,EAAQ,IAAML,EAAOC,EAAKC,GAAA,YAAAA,GAAa,GAAK,EAAE,EAwB5D,GAAIE,GAAA,MAAAA,EAAS,QACZ,MAAO,IAA+BA,EAAQ,QAAU,CAE3D,CAAE,CACF,CC+CW,SAAAE,GAAaC,EAAAC,EAAAC,EAAA,CACpBD,EAAQ,EAAE,EACVC,EAAO,EAAC,SAAS,CACnB;;;;;;;;0GA5FF,qBA4BIC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJJ,EAAKG,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EACXE,oBAAY,MAAM,EAClBC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EACPI,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,EAAQR,EAAAC,EAAA,WAAA,CAAA,EACRQ,EAAUT,EAAAC,EAAA,aAAA,CAAA,EACVS,EAAGV,EAAAC,EAAA,MAAA,CAAA,EACHU,EAAGX,EAAAC,EAAA,MAAA,CAAA,EACHW,EAASZ,EAAAC,EAAA,YAAA,CAAA,EACTY,EAASb,EAAAC,EAAA,YAAA,CAAA,EACTa,mBAAW,EAAK,EAChBC,qBAAa,eAAe,EAC5BC,sBAAc,EAAK,EACnBlB,EAAOE,EAAAC,EAAA,UAAA,CAAA,EACPgB,kBAAU,EAAK,EACZC,EAAAC,GAAAlB,EAAA,mPAGDmB,IAAqBjB,CAAS,EAC9BkB,QAAwB,GAAAL,EAAW,GAAInB,EAAQ,EAAY,WAEtDyB,EACPC,EACAC,EACAjB,EACAC,EACQ,OACFiB,EAAO,CAAI,gBAAiB,iBAAiB,EAE/C,OAAAF,GACFE,EAAQ,KAAK,UAAU,EAGrBD,GACFC,EAAQ,KAAK,YAAY,EAGvBlB,IAAS,KACXkB,EAAQ,KAAK,kBAAkB,EAG7BjB,GACFiB,EAAQ,KAAK,2BAA2B,EAGtChB,EAAU,GACZgB,EAAQ,KAAK,aAAa,EAGrBA,EAAQ,KAAK,GAAG,CACzB,OAEMC,EAAWC,GAAc,CAE7BA,EAAK,KAAIC,EAAGR,CAAS,CACtB,wFAcIH,EAAO,GAAAY,EAAAC,CAAA,gFASIzB,EAAS,cAEnBN,EAAI,8GASJmB,qIASSvB,GAAUE,EAAAC,CAAA,sDAQuBiB,EAAU,CAAA,CAAA,oBAdrDM,CAAY,GAAAQ,EAAAE,CAAA,gBAxBNC,EAAAC,GAAAC,GAAAC,EAAA,EAAA,GAAAF,GAAA,EAAA,IAAA,gBAAA,EAAA,CAAA,IAAAX,EAAWlB,IAASC,EAAW,EAAAE,IAAMC,EAAQ,CAAA,CAAA,CAAA,gNArE1C,OAAM,+JAGP,GAAK,6CACT,IAAG,uWAOC,GAAK,yDACH,gBAAe,2DACd,GAAK,sGAET,GAAK,YA+CnB","x_google_ignoreList":[0]}
+{"version":3,"file":"Textinput.js","sources":["../../../node_modules/svelte/src/internal/client/dom/elements/actions.js","../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["/** @import { ActionPayload } from '#client' */\nimport { effect, render_effect } from '../../reactivity/effects.js';\nimport { safe_not_equal } from '../../reactivity/equality.js';\nimport { deep_read_state, untrack } from '../../runtime.js';\n\n/**\n * @template P\n * @param {Element} dom\n * @param {(dom: Element, value?: P) => ActionPayload<P>} action\n * @param {() => P} [get_value]\n * @returns {void}\n */\nexport function action(dom, action, get_value) {\n\teffect(() => {\n\t\tvar payload = untrack(() => action(dom, get_value?.()) || {});\n\n\t\tif (get_value && payload?.update) {\n\t\t\tvar inited = false;\n\t\t\t/** @type {P} */\n\t\t\tvar prev = /** @type {any} */ ({}); // initialize with something so it's never equal on first run\n\n\t\t\trender_effect(() => {\n\t\t\t\tvar value = get_value();\n\n\t\t\t\t// Action's update method is coarse-grained, i.e. when anything in the passed value changes, update.\n\t\t\t\t// This works in legacy mode because of mutable_source being updated as a whole, but when using $state\n\t\t\t\t// together with actions and mutation, it wouldn't notice the change without a deep read.\n\t\t\t\tdeep_read_state(value);\n\n\t\t\t\tif (inited && safe_not_equal(prev, value)) {\n\t\t\t\t\tprev = value;\n\t\t\t\t\t/** @type {Function} */ (payload.update)(value);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tinited = true;\n\t\t}\n\n\t\tif (payload?.destroy) {\n\t\t\treturn () => /** @type {Function} */ (payload.destroy)();\n\t\t}\n\t});\n}\n","<svelte:options customElement=\"m-textinput\" />\n\n<script lang=\"ts\">\n  import type { TextInputSize, TextInputType } from './textinput.types';\n  import type { Snippet } from 'svelte';\n\n  interface Props {\n    name: string;\n    value: string;\n    placeholder: string;\n    inputtype?: TextInputType;\n    isvalid: boolean;\n    isinvalid: boolean;\n    disabled?: boolean;\n    readonly?: boolean;\n    size?: TextInputSize;\n    hasicon?: boolean;\n    icon?: Snippet;\n    rightalign: boolean;\n    min: string;\n    max: string;\n    minlength: number;\n    maxlength: number;\n    required?: boolean;\n    clearlabel?: string;\n    isclearable?: boolean;\n    onclear?: (arg: string) => void;\n    oninput?: (event: Event) => void;\n    onchange?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  let {\n    name,\n    value,\n    placeholder,\n    inputtype = 'text',\n    isvalid,\n    isinvalid,\n    disabled = false,\n    readonly = false,\n    size = 'm',\n    hasicon = false,\n    icon,\n    rightalign,\n    min,\n    max,\n    minlength,\n    maxlength,\n    required = false,\n    clearlabel = 'Clear content',\n    isclearable = false,\n    onclear,\n    oninput,\n    onchange,\n    onblur,\n  }: Props = $props();\n\n  let inputType = $derived(inputtype);\n  let displayClear = $derived(isclearable && value ? true : false);\n  let hasIcon = $derived(!!hasicon || !!icon)\n\n  function getClasses(\n    isValid: boolean,\n    isInvalid: boolean,\n    size: TextInputSize,\n    hasIcon: boolean,\n  ): string {\n    const classes = ['mc-text-input', 'mc-field__input'];\n\n    if (isValid) {\n      classes.push('is-valid');\n    }\n\n    if (isInvalid) {\n      classes.push('is-invalid');\n    }\n\n    if (size === 's') {\n      classes.push('mc-text-input--s');\n    }\n\n    if (hasIcon) {\n      classes.push('mc-left-icon-input__input');\n    }\n\n    if (rightalign) {\n      classes.push('right-align');\n    }\n\n    return classes.join(' ');\n  }\n\n  const setType = (node: any) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    node.type = inputType;\n  };\n\n  function resetValue() {\n    value = '';\n    onclear?.('onclear');\n  }\n</script>\n\n<div class=\"{getClasses(isvalid, isinvalid, size, hasIcon)} \">\n  {#if hasIcon}\n    <span class=\"mc-text-input__icon\">\n      {#if icon}\n       {@render icon()}\n      {:else}\n        <slot name=\"icon\" />\n      {/if}\n    </span>\n  {/if}\n  <input\n    bind:value\n    use:setType\n    class=\"mc-text-input__control\"\n    aria-invalid={isinvalid}\n    {name}\n    id={name}\n    {placeholder}\n    {disabled}\n    {min}\n    {max}\n    {minlength}\n    {maxlength}\n    spellcheck=\"false\"\n    {required}\n    {...readonly ? { readonly: true } : {}}\n    {oninput}\n    {onchange}\n    {onblur}\n  />\n  <!-- Control options -->\n  {#if displayClear}\n    <div class=\"mc-controls-options js-control-options\">\n      <!-- Clear Button -->\n      <button\n        type=\"button\"\n        class=\"mc-controls-options__button\"\n        onclick={resetValue}\n      >\n        <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n          />\n        </svg>\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/controls-options';\n  @use '@mozaic-ds/styles/components/text-input';\n\n  .right-align {\n    text-align: right;\n  }\n</style>\n"],"names":["action","dom","get_value","effect","payload","untrack","resetValue","_","value","onclear","_a","name","$.prop","$$props","placeholder","inputtype","isvalid","isinvalid","disabled","readonly","size","hasicon","icon","rightalign","min","max","minlength","maxlength","required","clearlabel","isclearable","oninput","onchange","onblur","inputType","displayClear","hasIcon","$.derived","getClasses","isValid","isInvalid","classes","setType","node","$.get","$$render","consequent","alternate","consequent_1","consequent_2"],"mappings":"8XAYO,SAASA,GAAOC,EAAKD,EAAQE,EAAW,CAC9CC,EAAO,IAAM,CACZ,IAAIC,EAAUC,GAAQ,IAAML,EAAOC,EAAKC,GAAA,YAAAA,GAAa,GAAK,EAAE,EAwB5D,GAAIE,GAAA,MAAAA,EAAS,QACZ,MAAO,IAA+BA,EAAQ,QAAU,CAE3D,CAAE,CACF,CCwDW,SAAAE,GAAaC,EAAAC,EAAAC,EAAA,OACpBD,EAAQ,EAAE,GACVE,EAAAD,EAAO,IAAP,MAAAC,EAAU,UACZ;;;;;;;;0GArGF,uBAiCIC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJL,EAAKI,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EACXE,oBAAY,MAAM,EAClBC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EACPI,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,mBAAW,EAAK,EAChBC,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,kBAAU,EAAK,EACfC,EAAIV,EAAAC,EAAA,OAAA,CAAA,EACJU,EAAUX,EAAAC,EAAA,aAAA,CAAA,EACVW,EAAGZ,EAAAC,EAAA,MAAA,CAAA,EACHY,EAAGb,EAAAC,EAAA,MAAA,CAAA,EACHa,EAASd,EAAAC,EAAA,YAAA,CAAA,EACTc,EAASf,EAAAC,EAAA,YAAA,CAAA,EACTe,mBAAW,EAAK,EAChBC,qBAAa,eAAe,EAC5BC,sBAAc,EAAK,EACnBrB,EAAOG,EAAAC,EAAA,UAAA,CAAA,EACPkB,EAAOnB,EAAAC,EAAA,UAAA,CAAA,EACPmB,EAAQpB,EAAAC,EAAA,WAAA,CAAA,EACRoB,EAAMrB,EAAAC,EAAA,SAAA,CAAA,EAGJqB,IAAqBnB,CAAS,EAC9BoB,QAAwB,GAAAL,EAAW,GAAItB,EAAQ,EAAY,EAC3D4B,EAAOC,EAAA,IAAA,CAAA,CAAchB,KAAO,CAAA,CAAMC,GAAI,WAEjCgB,GACPC,EACAC,EACApB,EACAgB,EACQ,OACFK,EAAO,CAAI,gBAAiB,iBAAiB,EAE/C,OAAAF,GACFE,EAAQ,KAAK,UAAU,EAGrBD,GACFC,EAAQ,KAAK,YAAY,EAGvBrB,IAAS,KACXqB,EAAQ,KAAK,kBAAkB,EAG7BL,GACFK,EAAQ,KAAK,2BAA2B,EAGtClB,EAAU,GACZkB,EAAQ,KAAK,aAAa,EAGrBA,EAAQ,KAAK,GAAG,CACzB,OAEMC,EAAWC,GAAc,CAE7BA,EAAK,KAAIC,EAAGV,CAAS,CACtB,mFAYaZ,CAAI,mEADTA,EAAI,EAAAuB,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,2BAFRX,CAAO,GAAAS,EAAAG,EAAA,gFAaI/B,EAAS,cAEnBN,EAAI,8GASJQ,EAAQ,EAAA,CAAK,SAAU,EAAI,EAAA,CAAA,2KAYlBb,GAAUE,EAAAC,CAAA,sDAQuBoB,EAAU,CAAA,CAAA,qBAdrDM,CAAY,GAAAU,EAAAI,EAAA,2DA/BN,IAAAX,GAAWtB,IAASC,EAAW,EAAAG,MAAMgB,CAAO,CAAA,kNApEzC,OAAM,+JAGP,GAAK,qDACL,GAAK,6CACT,IAAG,mDACA,GAAK,+VAOJ,GAAK,yDACH,gBAAe,2DACd,GAAK,wNAmDvB","x_google_ignoreList":[0]}

package/dist/components/textinput/Textinput.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/html-vite';
+/**
+ * Inputs are used to create input fields with text on a single line. Their states depend on the user interaction or the context.
+ *
+ * The `MTextInput` component is the **Svelte / WebComponent** implementation of the **Text Input** component of Mozaic Design System.
+ * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/text-input/).
+ */
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const Invalid: any;
+export declare const Disabled: any;
+//# sourceMappingURL=Textinput.stories.d.ts.map

package/dist/components/textinput/Textinput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textinput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBA2EE,IAAI;AA1ET,wBA0EU;AAyBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AA4BzC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,QAAQ,KAAoB,CAAC"}

package/dist/components/textinput/Textinput.stories.js

@@ -0,0 +1,154 @@
+import { action } from 'storybook/actions';
+import { userEvent, expect } from 'storybook/test';
+/**
+ * Inputs are used to create input fields with text on a single line. Their states depend on the user interaction or the context.
+ *
+ * The `MTextInput` component is the **Svelte / WebComponent** implementation of the **Text Input** component of Mozaic Design System.
+ * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/text-input/).
+ */
+export default {
+    title: 'Form Elements/TextInput',
+    tags: ['autodocs', 'beta'],
+    argTypes: {
+        name: {
+            description: 'Specify the text input name',
+            control: 'text',
+        },
+        value: {
+            description: 'Specify the text input value',
+            control: 'text',
+        },
+        placeholder: {
+            description: 'Specify the text input placeholder',
+            control: 'text',
+        },
+        inputtype: {
+            description: 'Specify the text input type',
+            control: { type: 'radio' },
+            options: ['date', 'email', 'number', 'password', 'search', 'tel', 'text'],
+        },
+        isinvalid: {
+            description: 'Specify whether the text input is invalid',
+            control: 'boolean',
+        },
+        required: {
+            description: 'Specify whether the text input is required',
+            control: 'boolean',
+        },
+        readonly: {
+            description: 'Specify whether the text input is readonly',
+            control: 'boolean',
+        },
+        disabled: {
+            description: 'Specify whether the text input is disabled',
+            control: 'boolean',
+        },
+        isclearable: {
+            description: 'Specify whether the text input is clearable',
+            control: 'boolean',
+        },
+        rightalign: {
+            description: 'Specify whether the text input has the text is align on the right',
+            control: 'boolean',
+        },
+        min: {
+            description: 'Specify the min value for the imput',
+            control: 'boolean',
+        },
+        max: {
+            description: 'Specify the max value for the imput',
+            control: 'boolean',
+        },
+        minLength: {
+            description: 'Minimum number of characters required for the input (used with text type).',
+            control: 'boolean',
+        },
+        maxLength: {
+            description: 'Maximum number of characters allowed in the input (used with text type).',
+            control: 'boolean',
+        },
+        clearlabel: {
+            description: 'The label text for the clear button',
+            control: 'text',
+        },
+        size: {
+            description: 'Specify the text input size',
+            control: { type: 'radio' },
+            options: ['s', 'm'],
+        },
+    },
+};
+// Function to emulate pausing between interactions
+function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+const Template = (args) => {
+    const MTextInput = document.createElement('m-textinput');
+    MTextInput.setAttribute('inputtype', args.inputtype || 'text');
+    if (args.name)
+        MTextInput.setAttribute('name', args.name);
+    if (args.value)
+        MTextInput.setAttribute('value', args.value);
+    if (args.placeholder)
+        MTextInput.setAttribute('placeholder', args.placeholder);
+    if (args.isinvalid)
+        MTextInput.setAttribute('isinvalid', 'true');
+    if (args.require)
+        MTextInput.setAttribute('require', 'true');
+    if (args.disabled)
+        MTextInput.setAttribute('disabled', 'true');
+    if (args.readonly)
+        MTextInput.setAttribute('readonly', 'true');
+    if (args.isclearable)
+        MTextInput.setAttribute('isclearable', 'true');
+    if (args.size)
+        MTextInput.setAttribute('size', args.size);
+    MTextInput.addEventListener('input', action('input'));
+    MTextInput.onkeyup = action('onkeyup');
+    return MTextInput;
+};
+export const Default = Template.bind({});
+Default.args = { placeholder: 'This is a default text input' };
+Default.play = async ({ canvasElement, step }) => {
+    const textinput = canvasElement.querySelector('m-textinput');
+    const input = textinput?.shadowRoot.querySelector('input');
+    await sleep(1500);
+    await step('Focus input', async () => {
+        await userEvent.click(input);
+        await sleep(1500);
+        expect(input).not.toBeNull();
+        await sleep(1500);
+        await expect(input).toBeVisible();
+        await sleep(1500);
+    });
+    await step('Fill out input', async () => {
+        await userEvent.type(input, 'Testing input');
+        await sleep(1500);
+        expect(input).toHaveValue('Testing input');
+        await sleep(1500);
+    });
+    await step('Clear input', async () => {
+        await userEvent.keyboard('{Backspace>15}');
+        await sleep(1500);
+        expect(input).toHaveValue('');
+        await sleep(1500);
+    });
+};
+export const Invalid = Template.bind({});
+Invalid.args = {
+    isinvalid: true,
+    placeholder: 'This is an invalid text input',
+};
+Invalid.play = async ({ canvasElement }) => {
+    const textinput = canvasElement.querySelector('m-textinput');
+    expect(textinput).toHaveAttribute('isinvalid', 'true');
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+    disabled: true,
+    placeholder: 'This is a disabled text input',
+};
+Disabled.play = async ({ canvasElement }) => {
+    const textinput = canvasElement.querySelector('m-textinput');
+    expect(textinput).toBeDisabled();
+};