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

package/dist/components/tags/TagsInteractive.stories.js

@@ -2,7 +2,13 @@ import { userEvent, expect } from 'storybook/test';
 import { action } from 'storybook/actions';
 export default {
     title: 'Indicators/Tag/Interactive',
-    tags: ['autodocs', 'beta'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
+            },
+        },
+    },
     argTypes: {
         label: {
             control: 'text',

package/dist/components/tags/TagsRemovable.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagsRemovable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsRemovable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBA8BrD,IAAI;AA1BT,wBA0BU;AAgBV,eAAO,MAAM,SAAS,EAAE,OAA4C,CAAC"}
+{"version":3,"file":"TagsRemovable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsRemovable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAqCrD,IAAI;AAjCT,wBAiCU;AAgBV,eAAO,MAAM,SAAS,EAAE,OAA4C,CAAC"}

package/dist/components/tags/TagsRemovable.stories.js

@@ -2,7 +2,13 @@ import { userEvent, expect } from 'storybook/test';
 import { action } from 'storybook/actions';
 export default {
     title: 'Indicators/Tag/Removable',
-    tags: ['autodocs', 'beta'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
+            },
+        },
+    },
     argTypes: {
         label: {
             control: 'text',

package/dist/components/tags/TagsSelectable.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagsSelectable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsSelectable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAsCrD,IAAI;AAlCT,wBAkCU;AAiBV,eAAO,MAAM,OAAO,EAAE,OAA6C,CAAC"}
+{"version":3,"file":"TagsSelectable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsSelectable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBA6CrD,IAAI;AAzCT,wBAyCU;AAiBV,eAAO,MAAM,OAAO,EAAE,OAA6C,CAAC"}

package/dist/components/tags/TagsSelectable.stories.js

@@ -2,7 +2,13 @@ import { userEvent, expect } from 'storybook/test';
 import { action } from 'storybook/actions';
 export default {
     title: 'Indicators/Tag/Selectable',
-    tags: ['autodocs', 'beta'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
+            },
+        },
+    },
     argTypes: {
         label: {
             control: 'text',

package/dist/components/textarea/README.md

@@ -0,0 +1,19 @@
+# `m-textarea`
+
+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.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the textarea, used to associate the label with the form element. | `string` |   |
+| `name` | The name attribute for the textarea element, used for form submission. | `string` |   |
+| `value` | The current value of the textarea field. | `string` `number` |   |
+| `placeholder` | Text displayed when the textarea is empty. | `string` |   |
+| `isinvalid` | If `true`, the textarea is marked as invalid. | `boolean` |   |
+| `disabled` | If `true`, the textarea is disabled and non-interactive. | `boolean` |   |
+| `rows` | The number of visible text lines in the textarea. | `number` | `2` |
+| `minlength` | Minimum number of characters required for the textarea. | `number` |   |
+| `maxlength` | Maximum number of characters allowed in the textarea. | `number` |   |
+| `readonly` | If `true`, the textarea is read-only (cannot be edited). | `boolean` |   |
+

package/dist/components/textarea/Textarea.js

@@ -1,7 +1,4 @@
-import{c as w,p as z,a as p,b as r,f as q,h as j,i as y,j as a,C as k}from"../../custom-element.js";import{b as C,C as E}from"../../attributes.js";import{c as Z}from"../../input.js";var M=q("<textarea></textarea>");const S={hash:"svelte-1qbzujl",code:`/**
+import{c as g,p as w,a as y,b as o,f as p,t as z,i as j,j as q,k as t,y as _,e as k,g as E}from"../../custom-element.js";import{s as l}from"../../attributes.js";import{c as D}from"../../input.js";import{c as F}from"../../custom-element-forward-events.js";var O=p("<textarea></textarea>");const S={hash:"svelte-1qbzujl",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/* stylelint-disable string-no-newline */.mc-field__label.svelte-1qbzujl, .mc-field__legend.svelte-1qbzujl {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-1qbzujl {padding-inline:0;}.mc-field__requirement.svelte-1qbzujl, .mc-field__help.svelte-1qbzujl {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-1qbzujl {display:block;margin-top:0.125rem;}.mc-field__content.svelte-1qbzujl {margin-top:0.5rem;}.mc-field__validation-message.svelte-1qbzujl {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-1qbzujl::before, .mc-field__validation-message.is-invalid.svelte-1qbzujl::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-1qbzujl {color:var(--field-color-validation-valid, #117f03);}.mc-field__validation-message.is-valid.svelte-1qbzujl::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-1qbzujl {color:var(--field-color-validation-invalid, #c61112);}.mc-field__validation-message.is-invalid.svelte-1qbzujl::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-1qbzujl {color:var(--field-color-validation-loading, #666666);}.mc-field--group.svelte-1qbzujl {border-width:0;margin-inline:0;padding:0;}
-
-/* stylelint-enable string-no-newline */.mc-textarea.svelte-1qbzujl {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-1qbzujl::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-textarea.svelte-1qbzujl: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-1qbzujl: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-1qbzujl: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-1qbzujl {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-textarea.is-invalid.svelte-1qbzujl {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-1qbzujl: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,l){z(l,!0),p(x,S);let o=r(l,"name",7),n=r(l,"value",15),d=r(l,"placeholder",7),s=r(l,"rows",7,2),v=r(l,"isvalid",7),i=r(l,"isinvalid",7),c=r(l,"disabled",7,!1),m=r(l,"minlength",7),u=r(l,"maxlength",7),f=r(l,"readonly",7),g=r(l,"oninput",7),b=r(l,"onchange",7),h=r(l,"onblur",7);var _={get name(){return o()},set name(e){o(e),a()},get value(){return n()},set value(e){n(e),a()},get placeholder(){return d()},set placeholder(e){d(e),a()},get rows(){return s()},set rows(e=2){s(e),a()},get isvalid(){return v()},set isvalid(e){v(e),a()},get isinvalid(){return i()},set isinvalid(e){i(e),a()},get disabled(){return c()},set disabled(e=!1){c(e),a()},get minlength(){return m()},set minlength(e){m(e),a()},get maxlength(){return u()},set maxlength(e){u(e),a()},get readonly(){return f()},set readonly(e){f(e),a()},get oninput(){return g()},set oninput(e){g(e),a()},get onchange(){return b()},set onchange(e){b(e),a()},get onblur(){return h()},set onblur(e){h(e),a()}},t=M();return k(t),C(t,e=>({class:"mc-textarea","aria-invalid":i(),name:o(),id:o(),placeholder:d(),rows:s(),disabled:c(),minlength:m(),maxlength:u(),...f()?{readonly:!0}:{},spellcheck:"false",oninput:g(),onchange:b(),onblur:h(),[E]:e}),[()=>({"is-invalid":i(),"is-valid":v()})],void 0,"svelte-1qbzujl"),Z(t,n),j(x,t),y(_)}customElements.define("m-textarea",w(B,{name:{},value:{},placeholder:{},rows:{},isvalid:{},isinvalid:{},disabled:{},minlength:{},maxlength:{},readonly:{},oninput:{},onchange:{},onblur:{}},[],[],!0));
+ */.mc-textarea.svelte-1qbzujl {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-1qbzujl::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-textarea.svelte-1qbzujl: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-1qbzujl: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-1qbzujl: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-1qbzujl {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-textarea.is-invalid.svelte-1qbzujl {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-1qbzujl: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 T(h,a){w(a,!0),y(h,S);let s=o(a,"id",7),n=o(a,"name",7),i=o(a,"value",7),c=o(a,"placeholder",7),d=o(a,"isinvalid",7),m=o(a,"disabled",7),v=o(a,"rows",7,2),u=o(a,"minlength",7),b=o(a,"maxlength",7),f=o(a,"readonly",7);var x={get id(){return s()},set id(e){s(e),t()},get name(){return n()},set name(e){n(e),t()},get value(){return i()},set value(e){i(e),t()},get placeholder(){return c()},set placeholder(e){c(e),t()},get isinvalid(){return d()},set isinvalid(e){d(e),t()},get disabled(){return m()},set disabled(e){m(e),t()},get rows(){return v()},set rows(e=2){v(e),t()},get minlength(){return u()},set minlength(e){u(e),t()},get maxlength(){return b()},set maxlength(e){b(e),t()},get readonly(){return f()},set readonly(e){f(e),t()}},r=O();return _(r),z(()=>{k(r,1,E(["mc-textarea",d()&&"is-invalid"]),"svelte-1qbzujl"),l(r,"aria-invalid",d()),l(r,"name",n()),l(r,"id",s()),l(r,"placeholder",c()),l(r,"rows",v()),r.disabled=m(),l(r,"minlength",u()),l(r,"maxlength",b()),r.readOnly=f()}),D(r,i),j(h,r),q(x)}customElements.define("m-textarea",g(T,{id:{},name:{},value:{},placeholder:{},isinvalid:{},disabled:{},rows:{},minlength:{},maxlength:{},readonly:{}},[],[],!0,F));
 //# 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    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":";;;;;8uDAAA,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,kMATC,EAAC,+JAGG,GAAK,sYAeJK,EAAS,cAEnBP,EAAI,uEAMJW,EAAQ,EAAA,CAAK,SAAU,EAAI,EAAA,CAAA,iEAVb,CAAA,KAAA,CAAA,aAAAJ,EAAS,aACXD,EAAO,CAAA,EAAA,6CANzB"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options\n  customElement={{ tag: 'm-textarea', extend: customElementForwardEvents }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * 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.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the textarea, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the textarea element, used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the textarea field.\n     */\n    value?: string | number;\n    /**\n     * Text displayed when the textarea is empty.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the textarea is marked as invalid.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, the textarea is disabled and non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * The number of visible text lines in the textarea.\n     */\n    rows?: number;\n    /**\n     * Minimum number of characters required for the textarea.\n     */\n    minlength?: number;\n    /**\n     * Maximum number of characters allowed in the textarea.\n     */\n    maxlength?: number;\n    /**\n     * If `true`, the textarea is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let {\n    id,\n    name,\n    value,\n    placeholder,\n    isinvalid,\n    disabled,\n    rows = 2,\n    minlength,\n    maxlength,\n    readonly,\n  }: Props = $props();\n</script>\n\n<textarea\n  bind:value\n  class={['mc-textarea', isinvalid && 'is-invalid']}\n  aria-invalid={isinvalid}\n  {name}\n  {id}\n  {placeholder}\n  {rows}\n  {disabled}\n  {minlength}\n  {maxlength}\n  {readonly}\n></textarea>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/textarea';\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","isinvalid","disabled","rows","minlength","maxlength","readonly","customElementForwardEvents"],"mappings":";;ysDAAA,oBAqDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,eAAO,CAAC,EACRC,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAST,EAAAC,EAAA,YAAA,CAAA,EACTS,EAAQV,EAAAC,EAAA,WAAA,CAAA,uVAHD,EAAC,iNASF,cAAeI,KAAa,YAAY,CAAA,EAAA,gBAAA,qBAClCA,GAAS,mKALzB,gKA/D8CM"}

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,130 +1,86 @@
-<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