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

package/dist/components/textarea/Textarea.svelte

@@ -1,130 +1,84 @@
-<svelte:options customElement="m-textarea" />
+<svelte:options customElement={{ tag: 'm-textarea', extend: customElementForwardEvents }} />
 
 <script lang="ts">
+  import { customElementForwardEvents } from '../../utils';
+  /**
+   * A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.
+   */
   interface Props {
-    name: string;
-    value: string;
-    placeholder: string;
-    rows?: number;
-    isvalid: boolean;
-    isinvalid: boolean;
+    /**
+     * A unique identifier for the textarea, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the textarea element, used for form submission.
+     */
+    name?: string;
+    /**
+     * The current value of the textarea field.
+     */
+    value?: string | number;
+    /**
+     * Text displayed when the textarea is empty.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the textarea is marked as invalid.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, the textarea is disabled and non-interactive.
+     */
     disabled?: boolean;
-    minlength: number;
-    maxlength: number;
-    readonly: boolean;
-    oninput?: (event: Event) => void;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
+    /**
+     * The number of visible text lines in the textarea.
+     */
+    rows?: number;
+    /**
+     * Minimum number of characters required for the textarea.
+     */
+    minlength?: number;
+    /**
+     * Maximum number of characters allowed in the textarea.
+     */
+    maxlength?: number;
+    /**
+     * If `true`, the textarea is read-only (cannot be edited).
+     */
+    readonly?: boolean;
   }
 
   let {
+    id,
     name,
-    value = $bindable(),
+    value,
     placeholder,
-    rows = 2,
-    isvalid,
     isinvalid,
-    disabled = false,
+    disabled,
+    rows = 2,
     minlength,
     maxlength,
     readonly,
-    oninput,
-    onchange,
-    onblur,
   }: Props = $props();
 </script>
 
 <textarea
   bind:value
-  class="mc-textarea"
-  class:is-invalid={isinvalid}
-  class:is-valid={isvalid}
+  class={['mc-textarea', isinvalid && 'is-invalid']}
   aria-invalid={isinvalid}
   {name}
-  id={name}
+  {id}
   {placeholder}
   {rows}
   {disabled}
   {minlength}
   {maxlength}
-  {...readonly ? { readonly: true } : {}}
-  spellcheck="false"
-  {oninput}
-  {onchange}
-  {onblur}
+  {readonly}
 ></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;
-}
-
-/* stylelint-enable string-no-newline */
 .mc-textarea {
   font-family: inherit;
   transition: box-shadow 200ms ease;

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

@@ -1,19 +1,49 @@
+/**
+ * A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.
+ */
 interface Props {
-    name: string;
-    value: string;
-    placeholder: string;
-    rows?: number;
-    isvalid: boolean;
-    isinvalid: boolean;
+    /**
+     * A unique identifier for the textarea, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the textarea element, used for form submission.
+     */
+    name?: string;
+    /**
+     * The current value of the textarea field.
+     */
+    value?: string | number;
+    /**
+     * Text displayed when the textarea is empty.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the textarea is marked as invalid.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, the textarea is disabled and non-interactive.
+     */
     disabled?: boolean;
-    minlength: number;
-    maxlength: number;
-    readonly: boolean;
-    oninput?: (event: Event) => void;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
+    /**
+     * The number of visible text lines in the textarea.
+     */
+    rows?: number;
+    /**
+     * Minimum number of characters required for the textarea.
+     */
+    minlength?: number;
+    /**
+     * Maximum number of characters allowed in the textarea.
+     */
+    maxlength?: number;
+    /**
+     * If `true`, the textarea is read-only (cannot be edited).
+     */
+    readonly?: boolean;
 }
-declare const Textarea: import("svelte").Component<Props, {}, "value">;
+declare const Textarea: import("svelte").Component<Props, {}, "">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;
 //# sourceMappingURL=Textarea.svelte.d.ts.map

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,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"}
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/Textarea.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2BH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/textinput/README.md

@@ -0,0 +1,26 @@
+# `m-textinput`
+
+A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the input element, used to associate the label with the form element. | `string` |   |
+| `name` | The name attribute for the input element, typically used for form submission. | `string` |   |
+| `value` | The current value of the input field. | `string` `number` | `$bindable()` |
+| `placeholder` | A placeholder text to show in the input when it is empty. | `string` |   |
+| `inputtype` | Defines the type of input. | `'date'` `'email'` `'number'` `'password'` `'search'` `'tel'` `'text'` | `text` |
+| `isinvalid` | If `true`, applies an invalid state to the input. | `boolean` |   |
+| `disabled` | If `true`, disables the input, making it non-interactive. | `boolean` |   |
+| `size` | Determines the size of the input. | `'s'` `'m'` | `m` |
+| `readonly` | If `true`, the input is read-only (cannot be edited). | `boolean` |   |
+| `isclearable` | If `true`, a clear button will appear when the input has a value. | `boolean` |   |
+| `clearlabel` | The label text for the clear button. | `string` | `Clear content` |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `icon` | Use this slot to insert an icon in the input. |
+

package/dist/components/textinput/Textinput.js

@@ -1,9 +1,9 @@
-import{x as X,y as ie,n as le,c as ae,p as se,a as ce,b as n,f as O,t as R,m as _,z as J,e as de,h as b,i as ue,j as r,d as h,s as K,r as f,g as me,A as U,B as W}from"../../custom-element.js";import{s as ve}from"../../snippet.js";import{i as N}from"../../if.js";import{s as be}from"../../slot.js";import{b as he}from"../../attributes.js";import{c as fe}from"../../input.js";function pe(u,t,i){X(()=>{var o=ie(()=>t(u,i==null?void 0:i())||{});if(o!=null&&o.destroy)return()=>o.destroy()})}function ge(u,t,i){var o;t(""),(o=i())==null||o("onclear")}var xe=O('<span class="mc-text-input__icon svelte-5c9enb"><!></span>'),_e=O('<div class="mc-controls-options js-control-options svelte-5c9enb"><button type="button" class="mc-controls-options__button svelte-5c9enb"><svg class="mc-controls-options__icon svelte-5c9enb" 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-5c9enb"></path></svg> <span class="mc-controls-options__label svelte-5c9enb"> </span></button></div>'),we=O("<div><!> <input/> <!></div>");const ye={hash:"svelte-5c9enb",code:`/**
+import{v as G,c as O,p as T,a as V,b as n,f as j,d as l,s as z,t as C,i as E,j as q,k as o,r as s,h as A,e as B,g as H}from"../../custom-element.js";import{i as I}from"../../if.js";import{s as J}from"../../slot.js";import{r as K,s as c}from"../../attributes.js";import{c as N}from"../../input.js";import{c as P}from"../../custom-element-forward-events.js";const Q=(v,t)=>t("");var R=j('<div class="mc-controls-options svelte-5c9enb"><button type="button" class="mc-controls-options__button svelte-5c9enb"><svg class="mc-controls-options__icon svelte-5c9enb" 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-5c9enb"></path></svg> <span class="mc-controls-options__label svelte-5c9enb"> </span></button></div>'),U=j('<div><span class="mc-text-input__icon svelte-5c9enb"><!></span> <input class="mc-text-input__control svelte-5c9enb"/> <!></div>');const W={hash:"svelte-5c9enb",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-controls-options.svelte-5c9enb {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-5c9enb {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-5c9enb:hover .mc-controls-options__icon:where(.svelte-5c9enb) {fill:var(--forms-color-icon-clear-hover, #4d4d4d);}.mc-controls-options__button.svelte-5c9enb: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-5c9enb {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-5c9enb, .mc-controls-options__icon.svelte-5c9enb {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-5c9enb {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-5c9enb {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);}
 
 /* stylelint-disable string-no-newline */.mc-text-input.svelte-5c9enb {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-5c9enb {background-color:transparent;border-width:0;font-family:inherit;outline:none;}.mc-text-input__control[type=number].svelte-5c9enb::-webkit-inner-spin-button, .mc-text-input__control[type=number].svelte-5c9enb::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-text-input__control[type=number].svelte-5c9enb {
   /* For Gecko rendering engine */appearance:textfield;}.mc-text-input__control[type=search].svelte-5c9enb::-webkit-search-decoration, .mc-text-input__control[type=search].svelte-5c9enb::-webkit-search-cancel-button {appearance:none;}.mc-text-input__control.svelte-5c9enb {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-5c9enb::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__icon.svelte-5c9enb {fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-5c9enb: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-5c9enb: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-5c9enb:has(input:where(.svelte-5c9enb):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-5c9enb:has(input[readonly]:where(.svelte-5c9enb)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-5c9enb:has(.mc-text-input__icon:where(.svelte-5c9enb)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-5c9enb:has(.mc-text-input__icon:where(.svelte-5c9enb)) .mc-text-input__control:where(.svelte-5c9enb) {padding-inline-start:0;}.mc-text-input.svelte-5c9enb:has(.mc-controls-options:where(.svelte-5c9enb)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-5c9enb:has(.mc-controls-options:where(.svelte-5c9enb)) .mc-text-input__control:where(.svelte-5c9enb) {padding-inline-end:0;}.mc-text-input--s.svelte-5c9enb {height:2rem;}.mc-text-input--s.svelte-5c9enb .mc-text-input__control:where(.svelte-5c9enb) {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-5c9enb:has(.mc-text-input__icon:where(.svelte-5c9enb)) {padding-inline-start:0.4375rem;}.mc-text-input--s.svelte-5c9enb:has(.mc-controls-options:where(.svelte-5c9enb)) {padding-inline-end:0.4375rem;}.mc-text-input.is-invalid.svelte-5c9enb {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-5c9enb: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-5c9enb :where(.svelte-5c9enb) {box-sizing:border-box;}
 
-/* stylelint-enable string-no-newline */.right-align.svelte-5c9enb {text-align:right;}`};function ke(u,t){se(t,!0),ce(u,ye);let i=n(t,"name",7),o=n(t,"value",7),w=n(t,"placeholder",7),y=n(t,"inputtype",7,"text"),k=n(t,"isvalid",7),p=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),m=n(t,"icon",7),L=n(t,"rightalign",7),M=n(t,"min",7),S=n(t,"max",7),Z=n(t,"minlength",7),A=n(t,"maxlength",7),B=n(t,"required",7,!1),D=n(t,"clearlabel",7,"Clear content"),E=n(t,"isclearable",7,!1),F=n(t,"onclear",7),G=n(t,"oninput",7),I=n(t,"onchange",7),T=n(t,"onblur",7),Y=J(y),$=J(()=>!!(E()&&o())),P=J(()=>!!j()||!!m());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=_(Y)};var te={get name(){return i()},set name(e){i(e),r()},get value(){return o()},set value(e){o(e),r()},get placeholder(){return w()},set placeholder(e){w(e),r()},get inputtype(){return y()},set inputtype(e="text"){y(e),r()},get isvalid(){return k()},set isvalid(e){k(e),r()},get isinvalid(){return p()},set isinvalid(e){p(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 m()},set icon(e){m(e),r()},get rightalign(){return L()},set rightalign(e){L(e),r()},get min(){return M()},set min(e){M(e),r()},get max(){return S()},set max(e){S(e),r()},get minlength(){return Z()},set minlength(e){Z(e),r()},get maxlength(){return A()},set maxlength(e){A(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 F()},set onclear(e){F(e),r()},get oninput(){return G()},set oninput(e){G(e),r()},get onchange(){return I()},set onchange(e){I(e),r()},get onblur(){return T()},set onblur(e){T(e),r()}},g=we(),Q=h(g);{var ne=e=>{var a=xe(),s=h(a);{var c=d=>{var v=U(),H=W(v);ve(H,m),b(d,v)},l=d=>{var v=U(),H=W(v);be(H,t,"icon",{}),b(d,v)};N(s,d=>{m()?d(c):d(l,!1)})}f(a),b(e,a)};N(Q,e=>{_(P)&&e(ne)})}var x=K(Q,2);he(x,()=>({class:"mc-text-input__control","aria-invalid":p(),name:i(),id:i(),placeholder:w(),disabled:z(),min:M(),max:S(),minlength:Z(),maxlength:A(),spellcheck:"false",required:B(),...q()?{readonly:!0}:{},oninput:G(),onchange:I(),onblur:T()}),void 0,void 0,"svelte-5c9enb",!0),X(()=>fe(x,o)),pe(x,e=>V==null?void 0:V(e));var re=K(x,2);{var oe=e=>{var a=_e(),s=h(a);s.__click=[ge,o,F];var c=K(h(s),2),l=h(c,!0);f(c),f(s),f(a),R(()=>me(l,D())),b(e,a)};N(re,e=>{_($)&&e(oe)})}return f(g),R(e=>de(g,1,`${e??""} `,"svelte-5c9enb"),[()=>ee(k(),p(),C(),_(P))]),b(u,g),ue(te)}le(["click"]);customElements.define("m-textinput",ae(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));
+/* stylelint-enable string-no-newline */.mc-text-input__icon.svelte-5c9enb:empty {display:none;}`};function X(v,t){T(t,!0),V(v,W);let b=n(t,"id",7),m=n(t,"name",7),i=n(t,"value",15),u=n(t,"placeholder",7),p=n(t,"inputtype",7,"text"),a=n(t,"isinvalid",7),f=n(t,"disabled",7),h=n(t,"readonly",7),_=n(t,"size",7,"m"),x=n(t,"clearlabel",7,"Clear content"),g=n(t,"isclearable",7);var F={get id(){return b()},set id(e){b(e),o()},get name(){return m()},set name(e){m(e),o()},get value(){return i()},set value(e){i(e),o()},get placeholder(){return u()},set placeholder(e){u(e),o()},get inputtype(){return p()},set inputtype(e="text"){p(e),o()},get isinvalid(){return a()},set isinvalid(e){a(e),o()},get disabled(){return f()},set disabled(e){f(e),o()},get readonly(){return h()},set readonly(e){h(e),o()},get size(){return _()},set size(e="m"){_(e),o()},get clearlabel(){return x()},set clearlabel(e="Clear content"){x(e),o()},get isclearable(){return g()},set isclearable(e){g(e),o()}},d=U(),w=l(d),M=l(w);J(M,t,"icon",{}),s(w);var r=z(w,2);K(r);var S=z(r,2);{var Z=e=>{var y=R(),k=l(y);k.__click=[Q,i];var L=z(l(k),2),D=l(L,!0);s(L),s(k),s(y),C(()=>A(D,x())),E(e,y)};I(S,e=>{g()&&i()&&e(Z)})}return s(d),C(()=>{B(d,1,H(["mc-text-input",`mc-text-input--${_()}`,a()&&"is-invalid"]),"svelte-5c9enb"),c(r,"aria-invalid",a()),c(r,"name",m()),c(r,"id",b()),c(r,"type",p()),c(r,"placeholder",u()),r.disabled=f(),r.readOnly=h()}),N(r,i),E(v,d),q(F)}G(["click"]);customElements.define("m-textinput",O(X,{id:{},name:{},value:{},placeholder:{},inputtype:{},isinvalid:{},disabled:{},readonly:{},size:{},clearlabel:{},isclearable:{}},["icon"],[],!0,P));
 //# 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  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":"sXAYO,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,QAAO,CAEvD,CAAC,CACF,CCwDW,SAAAE,GAAUC,EAAAC,EAAAC,EAAG,OACpBD,EAAQ,EAAE,GACVE,EAAAD,EAAO,IAAP,MAAAC,EAAU,UACZ;;;;;;;yGArGF,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,EAAK,EAAe,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,CACvB,6MA5Dc,OAAM,+JAGP,GAAK,qDACL,GAAK,6CACT,IAAG,mDACA,GAAK,+VAOJ,GAAK,yDACH,gBAAe,2DACd,GAAK,qSAyDPZ,CAAI,mEADTA,EAAI,EAAAuB,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,2BAFRX,CAAO,GAAAS,EAAAG,EAAA,0EAaI/B,EAAS,cAEnBN,EAAI,8GASJQ,EAAQ,EAAA,CAAK,SAAU,EAAI,EAAA,CAAA,6KAYlBb,GAAUE,EAAAC,CAAA,sDAQuBoB,EAAU,CAAA,CAAA,qBAdrDM,CAAY,GAAAU,EAAAI,EAAA,0DA/BN,IAAAX,GAAWtB,IAASC,EAAS,EAAEG,EAAI,IAAEgB,CAAO,CAAA,iBAFzD","x_google_ignoreList":[0]}
+{"version":3,"file":"Textinput.js","sources":["../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-textinput', extend: customElementForwardEvents }} />\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.\n   *\n   * @slot icon - Use this slot to insert an icon in the input.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the input field.\n     */\n    value?: string | number;\n    /**\n     * A placeholder text to show in the input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * Defines the type of input.\n     */\n    inputtype?: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';\n    /**\n     * If `true`, applies an invalid state to the input.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the input.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the input has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(),\n    placeholder,\n    inputtype = 'text',\n    isinvalid,\n    disabled,\n    readonly,\n    size = 'm',\n    clearlabel = 'Clear content',\n    isclearable,\n  }: Props = $props();\n\n  const resetValue = () => (value = '');\n</script>\n\n<div class={['mc-text-input', `mc-text-input--${size}`, isinvalid && 'is-invalid']}>\n  <span class=\"mc-text-input__icon\">\n    <slot name=\"icon\" />\n  </span>\n\n  <input\n    bind:value\n    class=\"mc-text-input__control\"\n    aria-invalid={isinvalid}\n    {name}\n    {id}\n    type={inputtype}\n    {placeholder}\n    {disabled}\n    {readonly}\n  />\n\n  {#if isclearable && value}\n    <div class=\"mc-controls-options\">\n      <button type=\"button\" class=\"mc-controls-options__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</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/controls-options';\n  @use '@mozaic-ds/styles/components/text-input';\n\n  .mc-text-input__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["resetValue","_","value","id","$.prop","$$props","name","placeholder","inputtype","isinvalid","disabled","readonly","size","clearlabel","isclearable","$$render","consequent","customElementForwardEvents"],"mappings":"0WAsEQA,EAAU,CAAAC,EAAAC,IAAUA,EAAQ,EAAE;;;;;;;kHAtEtC,oBAyDIC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJH,EAAKE,EAAAC,EAAA,QAAA,EAAA,EACLE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,oBAAY,MAAM,EAClBC,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,eAAO,GAAG,EACVC,qBAAa,eAAe,EAC5BC,EAAWV,EAAAC,EAAA,cAAA,CAAA,qPANC,OAAM,8MAIX,IAAG,yDACG,gBAAe,uLA0ByCL,EAAUE,CAAA,qDAOjCW,EAAU,CAAA,CAAA,kBATrDC,EAAW,GAAIZ,KAAKa,EAAAC,CAAA,gCAjBd,kCAAmCJ,EAAI,CAAA,GAAIH,KAAa,mDAQnDA,GAAS,2CAGjBD,GAAS,2EAbnB,oMAvE6DS"}

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

@@ -0,0 +1,89 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Textinput from './Textinput.svelte';
+describe('m-textinput component', () => {
+    const baseProps = {
+        id: 'textinput-id',
+        name: 'username',
+        value: 'JohnDoe',
+    };
+    it('renders input with correct attributes and value', () => {
+        const { container } = render(Textinput, { props: baseProps });
+        const input = container.querySelector('input');
+        expect(input).toBeTruthy();
+        expect(input.id).toBe('textinput-id');
+        expect(input.name).toBe('username');
+        expect(input.value).toBe('JohnDoe');
+        expect(input.type).toBe('text');
+    });
+    it('updates value on user input', async () => {
+        const { container } = render(Textinput, { props: baseProps });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: 'JaneDoe' } });
+        expect(input.value).toBe('JaneDoe');
+    });
+    it('renders placeholder if provided', () => {
+        const { container } = render(Textinput, {
+            props: { ...baseProps, placeholder: 'Enter your name' },
+        });
+        const input = container.querySelector('input');
+        expect(input.placeholder).toBe('Enter your name');
+    });
+    it('applies disabled and readonly props', () => {
+        const { container } = render(Textinput, {
+            props: { ...baseProps, disabled: true, readonly: true },
+        });
+        const input = container.querySelector('input');
+        expect(input.disabled).toBe(true);
+        expect(input.readOnly).toBe(true);
+    });
+    it('applies is-invalid class when isinvalid is true', () => {
+        const { container } = render(Textinput, {
+            props: { ...baseProps, isinvalid: true },
+        });
+        const wrapper = container.querySelector('.mc-text-input');
+        const input = container.querySelector('input');
+        expect(wrapper.classList.contains('is-invalid')).toBe(true);
+        expect(input.getAttribute('aria-invalid')).toBe('true');
+    });
+    it('applies correct input type and size class', () => {
+        const { container } = render(Textinput, {
+            props: { ...baseProps, inputtype: 'email', size: 's' },
+        });
+        const input = container.querySelector('input');
+        const wrapper = container.querySelector('.mc-text-input');
+        expect(input.type).toBe('email');
+        expect(wrapper.classList.contains('mc-text-input--s')).toBe(true);
+    });
+    it('shows and works clear button when isclearable is true and value exists', async () => {
+        const { container } = render(Textinput, {
+            props: { ...baseProps, isclearable: true, clearlabel: 'Clear input' },
+        });
+        const button = container.querySelector('button');
+        const input = container.querySelector('input');
+        expect(button).toBeTruthy();
+        expect(button.textContent).toContain('Clear input');
+        await fireEvent.click(button);
+        expect(input.value).toBe('');
+    });
+    it('does not show clear button when isclearable is false', () => {
+        const { container } = render(Textinput, {
+            props: { ...baseProps, isclearable: false },
+        });
+        const button = container.querySelector('button');
+        expect(button).toBeFalsy();
+    });
+    it('does not show clear button when value is empty', () => {
+        const { container } = render(Textinput, {
+            props: { ...baseProps, isclearable: true, value: '' },
+        });
+        const button = container.querySelector('button');
+        expect(button).toBeFalsy();
+    });
+    it('hides icon slot container if slot is empty', () => {
+        const { container } = render(Textinput, { props: baseProps });
+        const iconContainer = container.querySelector('.mc-text-input__icon');
+        expect(iconContainer.innerHTML.trim()).toBe('<!---->');
+        expect(getComputedStyle(iconContainer).display).toBe('none');
+    });
+});

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

@@ -1,13 +1,12 @@
-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;
+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 Small: Story;
+export declare const MinValue: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
 //# sourceMappingURL=Textinput.stories.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"Textinput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAmDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}