feat(text-area): add calcite-text-area component

src/components/label/label.stories.ts

@@ -77,6 +77,10 @@ export const simple = (): string => html`
         <calcite-option>c</calcite-option>
       </calcite-select>
     </calcite-label>
+    <calcite-label>
+      Add Notes
+      <calcite-text-area></calcite-text-area>
+    </calcite-label>
   </div>
 `;
 
@@ -139,6 +143,10 @@ export const darkModeRTL_TestOnly = (): string => html`
       <calcite-checkbox></calcite-checkbox>
       Text trailing inline-space-between
     </calcite-label>
+    <calcite-label>
+      Add Notes
+      <calcite-text-area></calcite-text-area>
+    </calcite-label>
   </div>
 `;
 
@@ -175,4 +183,8 @@ export const spacingWithLabel_TestOnly = (): string => html`
     I should not have a bottom margin because I have the CSS variable set.
     <calcite-input></calcite-input>
   </calcite-label>
+  <calcite-label>
+    Add Notes
+    <calcite-text-area></calcite-text-area>
+  </calcite-label>
 `;

src/components/text-area/assets/text-area/t9n/messages.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Invalid",
+  "tooLong": "Character limit exceeded"
+}

src/components/text-area/assets/text-area/t9n/messages_ar.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "غير صالح",
+  "tooLong": "تم تجاوز حد الأحرف"
+}

src/components/text-area/assets/text-area/t9n/messages_bg.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Невалидно",
+  "tooLong": "Превишен лимит за символи"
+}

src/components/text-area/assets/text-area/t9n/messages_bs.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Nevažeće",
+  "tooLong": "Premašeno je ograničenje znakova"
+}

src/components/text-area/assets/text-area/t9n/messages_ca.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "No vàlid",
+  "tooLong": "S'ha excedit el límit de caràcters"
+}

src/components/text-area/assets/text-area/t9n/messages_cs.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Neplatný",
+  "tooLong": "Překročen limit počtu znaků"
+}

src/components/text-area/assets/text-area/t9n/messages_da.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Ugyldig",
+  "tooLong": "Grænsen for antallet af tegn er overskredet"
+}

src/components/text-area/assets/text-area/t9n/messages_de.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Ungültig",
+  "tooLong": "Zeichenlimit wurde überschritten"
+}

src/components/text-area/assets/text-area/t9n/messages_el.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Μη έγκυρο",
+  "tooLong": "Υπέρβαση ορίου χαρακτήρων"
+}

src/components/text-area/assets/text-area/t9n/messages_en.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Invalid",
+  "tooLong": "Character limit exceeded"
+}

src/components/text-area/assets/text-area/t9n/messages_es.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "No válido",
+  "tooLong": "Se superó el límite de caracteres"
+}

src/components/text-area/assets/text-area/t9n/messages_et.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Sobimatu",
+  "tooLong": "Tähemärkide piirang on ületatud"
+}

src/components/text-area/assets/text-area/t9n/messages_fi.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Virheellinen",
+  "tooLong": "Merkkien määrä ylitetty"
+}

src/components/text-area/assets/text-area/t9n/messages_fr.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Non valide",
+  "tooLong": "Limite de caractères dépassée"
+}

src/components/text-area/assets/text-area/t9n/messages_he.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "לא תקין",
+  "tooLong": "חריגה ממגבלת מספר התווים"
+}

src/components/text-area/assets/text-area/t9n/messages_hr.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Nevažeće",
+  "tooLong": "Premašeno je ograničenje znakova"
+}

src/components/text-area/assets/text-area/t9n/messages_hu.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Érvénytelen",
+  "tooLong": "Karakterkorlát túllépve"
+}

src/components/text-area/assets/text-area/t9n/messages_id.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Tidak valid",
+  "tooLong": "Batas karakter terlampaui"
+}

src/components/text-area/assets/text-area/t9n/messages_it.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Non valido",
+  "tooLong": "Limite di caratteri superato"
+}

src/components/text-area/assets/text-area/t9n/messages_ja.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "無効",
+  "tooLong": "文字制限を超えています"
+}

src/components/text-area/assets/text-area/t9n/messages_ko.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "잘못됨",
+  "tooLong": "문자 제한을 초과함"
+}

src/components/text-area/assets/text-area/t9n/messages_lt.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Neteisingas",
+  "tooLong": "Viršytas simbolių limitas"
+}

src/components/text-area/assets/text-area/t9n/messages_lv.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Nederīgs",
+  "tooLong": "Pārsniegts rakstzīmju skaita ierobežojums"
+}

src/components/text-area/assets/text-area/t9n/messages_nl.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Ongeldig",
+  "tooLong": "Tekenlimiet overschreden"
+}

src/components/text-area/assets/text-area/t9n/messages_no.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Ugyldig",
+  "tooLong": "Maksimumsgrensen for antall tegn er overskredet"
+}

src/components/text-area/assets/text-area/t9n/messages_pl.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Niepoprawny",
+  "tooLong": "Przekroczono limit liczby znaków"
+}

src/components/text-area/assets/text-area/t9n/messages_pt-BR.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Inválido",
+  "tooLong": "Limite de caracteres excedido"
+}

src/components/text-area/assets/text-area/t9n/messages_pt-PT.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Inválido",
+  "tooLong": "Limite de carateres ultrapassado"
+}

src/components/text-area/assets/text-area/t9n/messages_ro.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Nevalid",
+  "tooLong": "Limită de caractere depășită"
+}

src/components/text-area/assets/text-area/t9n/messages_ru.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Недопустимый",
+  "tooLong": "Превышен лимит символов"
+}

src/components/text-area/assets/text-area/t9n/messages_sk.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Neplatné",
+  "tooLong": "Bol prekročený limit počtu znakov"
+}

src/components/text-area/assets/text-area/t9n/messages_sl.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Neveljavno",
+  "tooLong": "Presežena je omejitev znakov"
+}

src/components/text-area/assets/text-area/t9n/messages_sr.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Nevažeće",
+  "tooLong": "Prekoračeno ograničenje znakova"
+}

src/components/text-area/assets/text-area/t9n/messages_sv.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Ogiltig",
+  "tooLong": "Teckengränsen överskriden"
+}

src/components/text-area/assets/text-area/t9n/messages_th.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "ไม่ถูกต้อง",
+  "tooLong": "เกินขีดจำกัดอักขระ"
+}

src/components/text-area/assets/text-area/t9n/messages_tr.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Geçersiz",
+  "tooLong": "Karakter sınırı aşıldı"
+}

src/components/text-area/assets/text-area/t9n/messages_uk.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Неприпустимий",
+  "tooLong": "Перевищено обмеження кількості символів"
+}

src/components/text-area/assets/text-area/t9n/messages_vi.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Không hợp lệ",
+  "tooLong": "Đã vượt quá giới hạn ký tự"
+}

src/components/text-area/assets/text-area/t9n/messages_zh-CN.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "无效",
+  "tooLong": "超出字符限制"
+}

src/components/text-area/assets/text-area/t9n/messages_zh-HK.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "無效",
+  "tooLong": "已超過字元限制"
+}

src/components/text-area/assets/text-area/t9n/messages_zh-TW.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "無效",
+  "tooLong": "已超過字元限制"
+}

src/components/text-area/readme.md

@@ -0,0 +1,78 @@
+# calcite-text-area
+
+<!-- Auto Generated Below -->
+
+## Usage
+
+### Basic
+
+```html
+<calcite-text-area placeholder="Add Notes"></calcite-text-area>
+```
+
+### Exceeding-max-length
+
+Renders text-area with
+
+```html
+<calcite-text-area placeholder="Add Notes" value="Rocky Mountains National Park" max-length="20"></calcite-text-area>
+```
+
+## Properties
+
+| Property           | Attribute          | Description                                                                                                       | Type                                                                                                                                                                                                                                    | Default     |
+| ------------------ | ------------------ | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `autofocus`        | `autofocus`        | When `true`, the component is focused on page load.                                                               | `boolean`                                                                                                                                                                                                                               | `false`     |
+| `columns`          | `columns`          | Specifies the number or columns allowed.                                                                          | `number`                                                                                                                                                                                                                                | `undefined` |
+| `disabled`         | `disabled`         | When `true`, interaction is prevented and the component is displayed with lower opacity.                          | `boolean`                                                                                                                                                                                                                               | `false`     |
+| `groupSeparator`   | `group-separator`  | When `true`, number values are displayed with a group separator corresponding to the language and country format. | `boolean`                                                                                                                                                                                                                               | `false`     |
+| `label`            | `label`            | Accessible name for the component.                                                                                | `string`                                                                                                                                                                                                                                | `undefined` |
+| `maxLength`        | `max-length`       | Specifies the maximum number of characters allowed.                                                               | `number`                                                                                                                                                                                                                                | `undefined` |
+| `messageOverrides` | --                 | Use this property to override individual strings used by the component.                                           | `{ invalid?: string; overLimit?: string; }`                                                                                                                                                                                             | `undefined` |
+| `name`             | `name`             | Specifies the name of the component                                                                               | `string`                                                                                                                                                                                                                                | `undefined` |
+| `numberingSystem`  | `numbering-system` | Specifies the Unicode numeral system used by the component for localization.                                      | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined` |
+| `placeholder`      | `placeholder`      | Specifies the placeholder text for the component.                                                                 | `string`                                                                                                                                                                                                                                | `undefined` |
+| `readonly`         | `readonly`         | When `true`, the component's value can be read, but cannot be modified.                                           | `boolean`                                                                                                                                                                                                                               | `false`     |
+| `required`         | `required`         | When `true`, the component must have a value in order for the form to submit.                                     | `boolean`                                                                                                                                                                                                                               | `false`     |
+| `resize`           | `resize`           | When `true`, disables horizontally and vertically resizing the component.                                         | `"both" \| "horizontal" \| "none" \| "vertical"`                                                                                                                                                                                        | `"both"`    |
+| `rows`             | `rows`             | Specifies the number or rows allowed.                                                                             | `number`                                                                                                                                                                                                                                | `undefined` |
+| `scale`            | `scale`            | Specifies the size of the component.                                                                              | `"l" \| "m" \| "s"`                                                                                                                                                                                                                     | `"m"`       |
+| `value`            | `value`            | The component's value.                                                                                            | `string`                                                                                                                                                                                                                                | `undefined` |
+| `wrap`             | `wrap`             | Specifies the wrapping mechanism for the text.                                                                    | `"hard" \| "soft"`                                                                                                                                                                                                                      | `"soft"`    |
+
+## Events
+
+| Event                   | Description                                           | Type                |
+| ----------------------- | ----------------------------------------------------- | ------------------- |
+| `calciteTextAreaChange` | Fires each time a new `value` is typed and committed. | `CustomEvent<void>` |
+| `calciteTextAreaInput`  | Fires each time a new `value` is typed.               | `CustomEvent<void>` |
+
+## Methods
+
+### `selectText() => Promise<void>`
+
+Selects all text of the component's `value`.
+
+#### Returns
+
+Type: `Promise<void>`
+
+### `setFocus() => Promise<void>`
+
+Sets focus on the component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+## Slots
+
+| Slot             | Description                          |
+| ---------------- | ------------------------------------ |
+|                  | A slot for adding text.              |
+| `"footer-end"`   | A slot for adding a trailing footer. |
+| `"footer-start"` | A slot for adding a leading footer.  |
+
+---
+
+_Built with [StencilJS](https://stenciljs.com/)_

src/components/text-area/resources.ts

@@ -0,0 +1,24 @@
+export const CSS = {
+  characterLimit: "character-limit",
+  content: "content",
+  container: "container",
+  footer: "footer",
+  resizeDisabled: "resize--disabled",
+  resizeDisabledX: "resize--disabled-x",
+  resizeDisabledY: "resize--disabled-y",
+  characterOverLimit: "character--over-limit",
+  readOnly: "readonly",
+  textAreaInvalid: "text-area--invalid",
+  footerSlotted: "footer--slotted",
+  borderColor: "border--color",
+  hide: "hide",
+  blockSizeFull: "block-size--full",
+  footerEndSlotOnly: "footer--end-only"
+};
+
+export const SLOTS = {
+  footerStart: "footer-start",
+  footerEnd: "footer-end"
+};
+
+export const RESIZE_TIMEOUT = 100;