@mozaic-ds/web-components 1.0.0-beta.6 → 1.0.0

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

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Textarea from './Textarea.svelte';
+describe('m-textarea component', () => {
+    const baseProps = {
+        id: 'test-textarea',
+        name: 'comments',
+        value: 'Initial text',
+    };
+    it('renders textarea with correct initial value', () => {
+        const { container } = render(Textarea, { props: baseProps });
+        const textarea = container.querySelector('textarea');
+        expect(textarea).toBeTruthy();
+        expect(textarea.value).toBe('Initial text');
+        expect(textarea.getAttribute('name')).toBe('comments');
+        expect(textarea.getAttribute('id')).toBe('test-textarea');
+    });
+    it('updates value on user input', async () => {
+        const { container } = render(Textarea, { props: baseProps });
+        const textarea = container.querySelector('textarea');
+        await fireEvent.input(textarea, { target: { value: 'Updated text' } });
+        expect(textarea.value).toBe('Updated text');
+    });
+    it('applies placeholder text', () => {
+        const { container } = render(Textarea, {
+            props: { ...baseProps, placeholder: 'Enter text here' },
+        });
+        const textarea = container.querySelector('textarea');
+        expect(textarea.placeholder).toBe('Enter text here');
+    });
+    it('applies disabled prop', () => {
+        const { container } = render(Textarea, {
+            props: { ...baseProps, disabled: true },
+        });
+        const textarea = container.querySelector('textarea');
+        expect(textarea.disabled).toBe(true);
+    });
+    it('applies readonly prop', () => {
+        const { container } = render(Textarea, {
+            props: { ...baseProps, readonly: true },
+        });
+        const textarea = container.querySelector('textarea');
+        expect(textarea.readOnly).toBe(true);
+    });
+    it('applies is-invalid class when isinvalid is true', () => {
+        const { container } = render(Textarea, {
+            props: { ...baseProps, isinvalid: true },
+        });
+        const textarea = container.querySelector('textarea');
+        expect(textarea.classList.contains('is-invalid')).toBe(true);
+        expect(textarea.getAttribute('aria-invalid')).toBe('true');
+    });
+    it('applies rows, minlength and maxlength props', () => {
+        const { container } = render(Textarea, {
+            props: { ...baseProps, rows: 5, minlength: 10, maxlength: 100 },
+        });
+        const textarea = container.querySelector('textarea');
+        expect(textarea.rows).toBe(5);
+        expect(textarea.minLength).toBe(10);
+        expect(textarea.maxLength).toBe(100);
+    });
+    it('defaults to 2 rows if not specified', () => {
+        const { container } = render(Textarea, { props: baseProps });
+        const textarea = container.querySelector('textarea');
+        expect(textarea.rows).toBe(2);
+    });
+});

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

@@ -1,14 +1,10 @@
-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;
+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 Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
 //# sourceMappingURL=Textarea.stories.d.ts.map

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

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

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

@@ -1,100 +1,69 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-import { userEvent, expect } from 'storybook/test';
-/**
- * A 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/).
- */
-export default {
+const meta = {
     title: 'Form Elements/Textarea',
-    tags: ['autodocs', 'beta'],
-    argTypes: {
-        name: {
-            description: 'Specify the textarea name',
-            control: 'text',
-        },
-        value: {
-            description: 'Specify the textarea value',
-            control: 'text',
-        },
-        placeholder: {
-            description: 'Specify the textarea placeholder',
-            control: 'text',
-        },
-        isinvalid: {
-            description: 'Specify whether the textarea is invalid',
-            control: 'boolean',
-        },
-        disabled: {
-            description: 'Specify whether the textarea is disabled',
-            control: 'boolean',
-        },
-        rows: {
-            description: 'Specify the number of rows in the textarea',
-            control: 'number',
-        },
-        minlength: {
-            description: 'Specify the minimum length for input',
-            control: 'number',
-        },
-        maxlength: {
-            description: 'Specify the maximum length for input',
-            control: 'number',
-        },
-        readonly: {
-            description: 'Specify whether the textarea is read-only',
-            control: 'boolean',
-        },
+    component: 'm-textarea',
+    args: {
+        id: 'textareaId',
+        placeholder: 'Placeholder',
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-textarea
+        id=${ifDefined(args.id)}
+        name=${ifDefined(args.name)}
+        value=${ifDefined(args.value)}
+        placeholder=${ifDefined(args.placeholder)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        disabled=${ifDefined(args.disabled)}
+        rows=${ifDefined(args.rows)}
+        minlength=${ifDefined(args.minlength)}
+        maxlength=${ifDefined(args.maxlength)}
+        readonly=${ifDefined(args.readonly)}
+        @input=${(event) => {
+            onInput(event);
+        }}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-textarea>
+    `;
     },
 };
-const Template = (args) => {
-    const MTextArea = document.createElement('m-textarea');
-    if (args.name)
-        MTextArea.setAttribute('name', args.name);
-    if (args.value)
-        MTextArea.setAttribute('value', args.value);
-    if (args.placeholder)
-        MTextArea.setAttribute('placeholder', args.placeholder);
-    if (args.rows)
-        MTextArea.setAttribute('rows', args.rows.toString());
-    if (args.isinvalid)
-        MTextArea.setAttribute('isinvalid', 'true');
-    if (args.disabled)
-        MTextArea.setAttribute('disabled', 'true');
-    if (args.minlength)
-        MTextArea.setAttribute('minlength', args.minlength.toString());
-    if (args.maxlength)
-        MTextArea.setAttribute('maxlength', args.maxlength.toString());
-    if (args.readonly)
-        MTextArea.setAttribute('readonly', 'true');
-    MTextArea.addEventListener('input', action('input'));
-    return MTextArea;
-};
-export const Default = Template.bind({});
-Default.args = { placeholder: 'This is a default textarea' };
-Default.play = async ({ canvasElement }) => {
-    const textarea = canvasElement.querySelector('m-textarea');
-    const input = textarea?.shadowRoot.querySelector('textarea');
-    expect(textarea).not.toBeNull();
-    await userEvent.type(input, 'Testing input');
-    expect(input).toHaveValue('Testing input');
+export default meta;
+export const WithValue = {
+    args: {
+        id: 'withValueId',
+        value: 'Value of the textarea component',
+    },
 };
-export const Invalid = Template.bind({});
-Invalid.args = { isinvalid: true, placeholder: 'This is an invalid textarea' };
-Invalid.play = async ({ canvasElement }) => {
-    const textarea = canvasElement.querySelector('m-textarea');
-    expect(textarea).toHaveAttribute('isinvalid', 'true');
+export const Default = {};
+export const Disabled = {
+    args: {
+        id: 'disabledId',
+        disabled: true,
+    },
 };
-export const ReadOnly = Template.bind({});
-ReadOnly.args = { readonly: true, placeholder: 'This is a read-only textarea' };
-ReadOnly.play = async ({ canvasElement }) => {
-    const textarea = canvasElement.querySelector('m-textarea');
-    expect(textarea).toHaveAttribute('readonly', 'true');
+export const ReadOnly = {
+    args: {
+        id: 'readonlyId',
+        readonly: true,
+    },
 };
-export const Disabled = Template.bind({});
-Disabled.args = { disabled: true, placeholder: 'This is a disabled textarea' };
-Disabled.play = async ({ canvasElement }) => {
-    const textarea = canvasElement.querySelector('m-textarea');
-    expect(textarea).toBeDisabled();
+export const Invalid = {
+    args: {
+        id: 'invalidId',
+        isinvalid: true,
+    },
 };

package/dist/components/textarea/Textarea.svelte

@@ -1,176 +1,129 @@
-<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.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
-/* stylelint-disable string-no-newline */
-.mc-field__label, .mc-field__legend {
-  font-size: 0.875rem;
-  line-height: 1.3;
-  font-weight: 400;
-  color: #000000;
-}
-.mc-field__legend {
-  padding-inline: 0;
-}
-.mc-field__requirement, .mc-field__help {
-  font-size: 0.75rem;
-  line-height: 1.5;
-  font-weight: 400;
-  vertical-align: top;
-  color: #666666;
-}
-.mc-field__help {
-  display: block;
-  margin-top: 0.125rem;
-}
-.mc-field__content {
-  margin-top: 0.5rem;
-}
-.mc-field__validation-message {
-  font-size: 0.875rem;
-  line-height: 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: #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='%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: #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='%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: #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;
-  background-color: #ffffff;
-  border: 1px solid #666666;
-  border-radius: 0.25rem;
+  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: #000000;
+  color: var(--forms-color-text-default, #000000);
   display: block;
   width: 100%;
-  font-size: 1rem;
-  line-height: 1.5;
+  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: #666666;
+  color: var(--forms-color-placeholder, #666666);
 }
 .mc-textarea:hover {
-  border-color: #4d4d4d;
-  box-shadow: 0 0 0 1px #4d4d4d;
+  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, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  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: #d9d9d9;
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
   border-color: transparent;
   box-shadow: none;
-  color: #737373;
+  color: var(--forms-color-text-disabled, #737373);
 }
 .mc-textarea[readonly] {
-  border-color: #cccccc;
+  border-color: var(--forms-color-border-read-only, #cccccc);
   pointer-events: none;
 }
 .mc-textarea.is-invalid {
-  border-color: #ea302d;
-  box-shadow: 0 0 0 1px #ea302d;
+  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: #c61112;
-  box-shadow: 0 0 0 1px #c61112;
+  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

@@ -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` |   |
+| `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. |
+