@synergy-design-system/components 1.16.0 → 1.17.1

package/dist/synergy.js

@@ -5,134 +5,134 @@ import {
 import "./chunks/chunk.NKIYFJN2.js";
 import {
   tag_default
-} from "./chunks/chunk.WMYFFFHI.js";
+} from "./chunks/chunk.PMOBYFH4.js";
 import {
   textarea_default
-} from "./chunks/chunk.SAHA7Z3T.js";
-import "./chunks/chunk.LOUVN7OA.js";
+} from "./chunks/chunk.HUQCIRSQ.js";
+import "./chunks/chunk.FTRRW7BY.js";
 import "./chunks/chunk.YBIBWRKC.js";
 import "./chunks/chunk.2EI3TNL7.js";
 import {
   switch_default
-} from "./chunks/chunk.HZTZOBNJ.js";
-import "./chunks/chunk.CNKXQN5I.js";
+} from "./chunks/chunk.K6IWMQLX.js";
+import "./chunks/chunk.3SWYKVFY.js";
 import "./chunks/chunk.W5JK7V7K.js";
 import "./chunks/chunk.TAO5QIIQ.js";
 import {
   select_default
-} from "./chunks/chunk.D63XRN3X.js";
-import "./chunks/chunk.7NH6SYGG.js";
-import "./chunks/chunk.ZM72G6GO.js";
+} from "./chunks/chunk.3MN7CL5O.js";
+import "./chunks/chunk.7WONMCAA.js";
+import "./chunks/chunk.MLOCMG7P.js";
 import "./chunks/chunk.B6R3IVGO.js";
 import "./chunks/chunk.BGHK4NQA.js";
 import "./chunks/chunk.OWMT6OL2.js";
 import "./chunks/chunk.QNQNR3RY.js";
 import {
   side_nav_default
-} from "./chunks/chunk.OCH36GVS.js";
-import "./chunks/chunk.UHVHULGW.js";
+} from "./chunks/chunk.IFTZRRKK.js";
+import "./chunks/chunk.T3QC4HBG.js";
 import "./chunks/chunk.GO3CCKC3.js";
 import {
   radio_default
-} from "./chunks/chunk.SOAZXMVH.js";
+} from "./chunks/chunk.FZMSA37J.js";
 import {
   radio_button_default
-} from "./chunks/chunk.CXLJMDBV.js";
-import "./chunks/chunk.7PYQKCMR.js";
+} from "./chunks/chunk.QB7JXPOJ.js";
+import "./chunks/chunk.SLEBWGLP.js";
 import "./chunks/chunk.QPK7SLOE.js";
 import {
   radio_group_default
-} from "./chunks/chunk.Q7WVOJG4.js";
-import "./chunks/chunk.TWZC4LT2.js";
+} from "./chunks/chunk.ZBXAGDRO.js";
+import "./chunks/chunk.H6P6GQTH.js";
 import "./chunks/chunk.F4MRQLNL.js";
 import "./chunks/chunk.XIUSSERX.js";
 import {
   popup_default
-} from "./chunks/chunk.ABSGP4AA.js";
+} from "./chunks/chunk.LOQELUB7.js";
 import {
   prio_nav_default
-} from "./chunks/chunk.SHOXPF5L.js";
-import "./chunks/chunk.U2H36O5J.js";
+} from "./chunks/chunk.NQZIVK2T.js";
+import "./chunks/chunk.XYYYZKI4.js";
 import "./chunks/chunk.74N5WLM5.js";
 import "./chunks/chunk.XNP4OTUB.js";
-import "./chunks/chunk.OEMIM5RD.js";
+import "./chunks/chunk.RPLFWYFN.js";
 import "./chunks/chunk.V6VND4OF.js";
 import "./chunks/chunk.PKO6FEOM.js";
 import {
   optgroup_default
-} from "./chunks/chunk.4RMP4EST.js";
+} from "./chunks/chunk.3B43OFWN.js";
 import {
   option_default
-} from "./chunks/chunk.EHMIJIZ2.js";
-import "./chunks/chunk.LFNAPJXT.js";
+} from "./chunks/chunk.VGVPTXN4.js";
+import "./chunks/chunk.BXP2ONKH.js";
 import "./chunks/chunk.3B24TYVN.js";
 import "./chunks/chunk.CFIQXXMW.js";
 import {
   menu_label_default
-} from "./chunks/chunk.XADGSL34.js";
-import "./chunks/chunk.5OV7FNMN.js";
+} from "./chunks/chunk.RWCHFIED.js";
+import "./chunks/chunk.QUSHMT6V.js";
 import "./chunks/chunk.X6GR6IA2.js";
 import "./chunks/chunk.3FOVDOJX.js";
 import {
   nav_item_default
-} from "./chunks/chunk.EQ2W2Z5B.js";
-import "./chunks/chunk.ONVWJKVD.js";
+} from "./chunks/chunk.CA75CAFI.js";
+import "./chunks/chunk.ZU5SISDS.js";
 import "./chunks/chunk.L4UUXVRZ.js";
-import "./chunks/chunk.BQ3U6CVQ.js";
+import "./chunks/chunk.G2JHDTSW.js";
 import "./chunks/chunk.KG52EHDB.js";
 import {
   menu_default
-} from "./chunks/chunk.4MBMY5UE.js";
+} from "./chunks/chunk.46OEO4FL.js";
 import {
   menu_item_default
-} from "./chunks/chunk.5I7DR4UT.js";
-import "./chunks/chunk.H3GKRGN6.js";
+} from "./chunks/chunk.QKWCOGVC.js";
+import "./chunks/chunk.GMHLIBZF.js";
 import "./chunks/chunk.OOABXWCW.js";
 import "./chunks/chunk.PDHVYHXD.js";
 import "./chunks/chunk.JDBDBGQP.js";
 import {
   icon_button_default
-} from "./chunks/chunk.WM7IMLTR.js";
+} from "./chunks/chunk.HURNZMFX.js";
 import {
   input_default
-} from "./chunks/chunk.BKRTJVKH.js";
-import "./chunks/chunk.6V72DOSV.js";
+} from "./chunks/chunk.7S6UOMFJ.js";
+import "./chunks/chunk.G5MCCYXW.js";
 import "./chunks/chunk.3A65FBTX.js";
 import "./chunks/chunk.AW2HNLNP.js";
-import "./chunks/chunk.PCI22DJU.js";
+import "./chunks/chunk.INBFTHEA.js";
 import "./chunks/chunk.PILX7LVU.js";
 import "./chunks/chunk.RSSY7KPD.js";
 import {
   drawer_default
-} from "./chunks/chunk.NLWT6VZN.js";
+} from "./chunks/chunk.M4OWT7VQ.js";
 import {
   dropdown_default
-} from "./chunks/chunk.WZWI3VYU.js";
-import "./chunks/chunk.2URWP5LD.js";
-import "./chunks/chunk.IVHB4EQ6.js";
+} from "./chunks/chunk.XP6EXNZG.js";
+import "./chunks/chunk.KEWHWQ6V.js";
+import "./chunks/chunk.TKVHMQRR.js";
 import "./chunks/chunk.MIMALEWP.js";
 import "./chunks/chunk.2KYFCKCK.js";
 import "./chunks/chunk.SLCYXMHB.js";
 import {
   header_default
-} from "./chunks/chunk.NOB4TQLJ.js";
-import "./chunks/chunk.K6AHAO25.js";
+} from "./chunks/chunk.ZIHKZYPB.js";
+import "./chunks/chunk.EVXPBUU4.js";
 import {
   icon_default
-} from "./chunks/chunk.JJZKPNJZ.js";
+} from "./chunks/chunk.WOUGGNEO.js";
 import "./chunks/chunk.AOKNP4QD.js";
 import {
   checkbox_default
-} from "./chunks/chunk.PGM6WEYY.js";
+} from "./chunks/chunk.D2SZ3D2F.js";
 import {
   divider_default
-} from "./chunks/chunk.J3HTR5NX.js";
-import "./chunks/chunk.TUFBQA52.js";
+} from "./chunks/chunk.QUN5XCOI.js";
+import "./chunks/chunk.NNZRZ4QS.js";
 import "./chunks/chunk.FA6V2WD6.js";
 import "./chunks/chunk.ACTJFDNK.js";
-import "./chunks/chunk.3M6IVPMZ.js";
+import "./chunks/chunk.SSFTA4MM.js";
 import "./chunks/chunk.RIJKFEYZ.js";
-import "./chunks/chunk.O3AC2EVL.js";
+import "./chunks/chunk.ZN3ASMNH.js";
 import "./chunks/chunk.ZHH2AHOZ.js";
 import "./chunks/chunk.LJQ7LEPV.js";
 import "./chunks/chunk.2QOQY4ZG.js";
@@ -140,32 +140,23 @@ import "./chunks/chunk.7BEVGRQ2.js";
 import "./chunks/chunk.QAUTITK3.js";
 import "./chunks/chunk.KZMWNTUS.js";
 import "./chunks/chunk.PHSJD47V.js";
-import {
-  button_default
-} from "./chunks/chunk.3EONOQ2P.js";
 import {
   button_group_default
-} from "./chunks/chunk.INLTRHSF.js";
-import "./chunks/chunk.CCITL3IY.js";
-import "./chunks/chunk.A7IIJ2LL.js";
-import "./chunks/chunk.K2H37OYP.js";
-import "./chunks/chunk.WFAJR3FN.js";
-import "./chunks/chunk.TTL762VF.js";
-import "./chunks/chunk.2XZKXVMR.js";
-import "./chunks/chunk.NIYKFSPR.js";
+} from "./chunks/chunk.AYHN5IHC.js";
 import {
-  badge_default
-} from "./chunks/chunk.E3MWAHV4.js";
-import "./chunks/chunk.WPAPTZLW.js";
-import "./chunks/chunk.WQJRBFZA.js";
-import "./chunks/chunk.II4PANKR.js";
-import "./chunks/chunk.ENAW6YL5.js";
-import "./chunks/chunk.KJ7V3TWI.js";
+  button_default
+} from "./chunks/chunk.4J4COJQ5.js";
+import "./chunks/chunk.6CKICZEF.js";
+import "./chunks/chunk.CZJJW4XX.js";
 import "./chunks/chunk.OSBC36KQ.js";
+import "./chunks/chunk.K55MKNUR.js";
 import "./chunks/chunk.Q4CRAGN3.js";
+import "./chunks/chunk.KT5KOCK5.js";
+import "./chunks/chunk.WFAJR3FN.js";
+import "./chunks/chunk.TTL762VF.js";
 import "./chunks/chunk.JUJZBRXD.js";
 import "./chunks/chunk.66WXVGAW.js";
-import "./chunks/chunk.I3SSNN7J.js";
+import "./chunks/chunk.TOMH57Y4.js";
 import "./chunks/chunk.PJO6TM3T.js";
 import "./chunks/chunk.2RF7KO5I.js";
 import {
@@ -175,14 +166,23 @@ import {
 import "./chunks/chunk.6C4JXZZN.js";
 import "./chunks/chunk.VTKIDI7N.js";
 import "./chunks/chunk.AVTU2BGE.js";
+import "./chunks/chunk.2XZKXVMR.js";
+import "./chunks/chunk.NIYKFSPR.js";
 import {
   getBasePath,
   setBasePath
 } from "./chunks/chunk.C7624ITA.js";
+import {
+  badge_default
+} from "./chunks/chunk.HYQJV2W6.js";
+import "./chunks/chunk.F2P6ULVR.js";
 import "./chunks/chunk.GEHO4WRP.js";
 import "./chunks/chunk.QY3GFWGZ.js";
-import "./chunks/chunk.VCFVQ6KS.js";
-import "./chunks/chunk.K55MKNUR.js";
+import "./chunks/chunk.WQJRBFZA.js";
+import "./chunks/chunk.II4PANKR.js";
+import "./chunks/chunk.2DOWCJLW.js";
+import "./chunks/chunk.2BEQWVZI.js";
+import "./chunks/chunk.A7IIJ2LL.js";
 import "./chunks/chunk.QNDC5KWA.js";
 export {
   badge_default as SynBadge,

package/dist/vscode.html-custom-data.json

@@ -2,46 +2,6 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "tags": [
-    {
-      "name": "syn-badge",
-      "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        {
-          "name": "variant",
-          "description": "The badge's theme variant.",
-          "values": [
-            { "name": "primary" },
-            { "name": "success" },
-            { "name": "neutral" },
-            { "name": "warning" },
-            { "name": "danger" }
-          ]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy.style/components/badge"
-        }
-      ]
-    },
-    {
-      "name": "syn-button-group",
-      "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<syn-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        {
-          "name": "label",
-          "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy.style/components/button-group"
-        }
-      ]
-    },
     {
       "name": "syn-button",
       "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the button loses focus.\n- **syn-focus** - Emitted when the button gains focus.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix.\n- **label** - The button's label.\n- **suffix** - The container that wraps the suffix.\n- **caret** - The button's caret icon, an `<syn-icon>` element.\n- **spinner** - The spinner that shows when the button is in the loading state.",
@@ -171,6 +131,46 @@
         }
       ]
     },
+    {
+      "name": "syn-badge",
+      "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "The badge's theme variant.",
+          "values": [
+            { "name": "primary" },
+            { "name": "success" },
+            { "name": "neutral" },
+            { "name": "warning" },
+            { "name": "danger" }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/badge"
+        }
+      ]
+    },
+    {
+      "name": "syn-button-group",
+      "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<syn-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/button-group"
+        }
+      ]
+    },
     {
       "name": "syn-checkbox",
       "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the checkbox loses focus.\n- **syn-change** - Emitted when the checked state changes.\n- **syn-focus** - Emitted when the checkbox gains focus.\n- **syn-input** - Emitted when the checkbox receives input.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<syn-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<syn-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **form-control-help-text** - The help text's wrapper.",

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "1.16.0",
+  "version": "1.17.1",
   "description": "",
   "repository": {
     "type": "git",
@@ -89,9 +89,9 @@
     "user-agent-data-types": "^0.4.2",
     "vendorism": "^3.0.0",
     "vue-tsc": "^1.8.27",
-    "@synergy-design-system/eslint-config-syn": "0.1.0",
-    "@synergy-design-system/tokens": "1.11.0",
-    "@synergy-design-system/stylelint-config-syn": "0.1.0"
+    "@synergy-design-system/stylelint-config-syn": "0.1.0",
+    "@synergy-design-system/tokens": "1.12.0",
+    "@synergy-design-system/eslint-config-syn": "0.1.0"
   },
   "release": {
     "branches": [

package/dist/chunks/chunk.LOUVN7OA.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/textarea/textarea.component.ts"],
-  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport formControlCustomStyles from '../../styles/form-control.custom.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './textarea.styles.js';\nimport customStyles from './textarea.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\n\n/**\n * @summary Textareas collect data from the user and allow multiple lines of text.\n * @documentation https://synergy.style/components/textarea\n * @status stable\n * @since 2.0\n *\n * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart textarea - The internal `<textarea>` control.\n */\nexport default class SynTextarea extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n\n  private readonly formControlController = new FormControlController(this, {\n    assumeInteractionOn: ['syn-blur', 'syn-input']\n  });\n  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label', 'prefix', 'suffix');\n  private resizeObserver: ResizeObserver;\n\n  @query('.textarea__control') input: HTMLTextAreaElement;\n\n  @state() private hasFocus = false;\n  @property() title = ''; // make reactive to pass through\n\n  /** The name of the textarea, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The current value of the textarea, submitted as a name/value pair with form data. */\n  @property() value = '';\n\n  /** The textarea's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The textarea's label. If you need to display HTML, use the `label` slot instead. */\n  @property() label = '';\n\n  /** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** Placeholder text to show as a hint when the input is empty. */\n  @property() placeholder = '';\n\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n\n  /** Controls how the textarea can be resized. */\n  @property() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n  /** Disables the textarea. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** Makes the textarea a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @property({ type: Number }) minlength: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @property({ type: Number }) maxlength: number;\n\n  /** Controls whether and how text input is automatically capitalized as it is entered by the user. */\n  @property() autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';\n\n  /** Indicates whether the browser's autocorrect feature is on or off. */\n  @property() autocorrect: string;\n\n  /**\n   * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n   * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.\n   */\n  @property() autocomplete: string;\n\n  /** Indicates that the input should receive focus on page load. */\n  @property({ type: Boolean }) autofocus: boolean;\n\n  /** Used to customize the label or icon of the Enter key on virtual keyboards. */\n  @property() enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n  /** Enables spell checking on the textarea. */\n  @property({\n    type: Boolean,\n    converter: {\n      // Allow \"true|false\" attribute values but keep the property boolean\n      fromAttribute: value => (!value || value === 'false' ? false : true),\n      toAttribute: value => (value ? 'true' : 'false')\n    }\n  })\n  spellcheck = true;\n\n  /**\n   * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\n   * keyboard on supportive devices.\n   */\n  @property() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue() defaultValue = '';\n\n  /** Gets the validity state object */\n  get validity() {\n    return this.input.validity;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    return this.input.validationMessage;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n    this.updateComplete.then(() => {\n      this.setTextareaHeight();\n      this.resizeObserver.observe(this.input);\n    });\n  }\n\n  firstUpdated() {\n    this.formControlController.updateValidity();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver.unobserve(this.input);\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleChange() {\n    this.value = this.input.value;\n    this.setTextareaHeight();\n    this.emit('syn-change');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  private handleInput() {\n    this.value = this.input.value;\n    this.emit('syn-input');\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private setTextareaHeight() {\n    if (this.resize === 'auto') {\n      this.input.style.height = 'auto';\n      this.input.style.height = `${this.input.scrollHeight}px`;\n    } else {\n      (this.input.style.height as string | undefined) = undefined;\n    }\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Disabled form controls are always valid\n    this.formControlController.setValidity(this.disabled);\n  }\n\n  @watch('rows', { waitUntilFirstUpdate: true })\n  handleRowsChange() {\n    this.setTextareaHeight();\n  }\n\n  @watch('value', { waitUntilFirstUpdate: true })\n  async handleValueChange() {\n    await this.updateComplete;\n    this.formControlController.updateValidity();\n    this.setTextareaHeight();\n  }\n\n  /** Sets focus on the textarea. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the textarea. */\n  blur() {\n    this.input.blur();\n  }\n\n  /** Selects all the text in the textarea. */\n  select() {\n    this.input.select();\n  }\n\n  /** Gets or sets the textarea's scroll position. */\n  scrollPosition(position?: { top?: number; left?: number }): { top: number; left: number } | undefined {\n    if (position) {\n      if (typeof position.top === 'number') this.input.scrollTop = position.top;\n      if (typeof position.left === 'number') this.input.scrollLeft = position.left;\n      return undefined;\n    }\n\n    return {\n      top: this.input.scrollTop,\n      left: this.input.scrollTop\n    };\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Replaces a range of text with a new string. */\n  setRangeText(\n    replacement: string,\n    start?: number,\n    end?: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    const selectionStart = start ?? this.input.selectionStart;\n    const selectionEnd = end ?? this.input.selectionEnd;\n\n    this.input.setRangeText(replacement, selectionStart, selectionEnd, selectMode);\n\n    if (this.value !== this.input.value) {\n      this.value = this.input.value;\n      this.setTextareaHeight();\n    }\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.formControlController.updateValidity();\n  }\n\n  render() {\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasPrefixSlot = this.hasSlotController.test('prefix');\n    const hasSuffixSlot = this.hasSlotController.test('suffix');\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n    return html`\n      <div\n        part=\"form-control\"\n        class=${classMap({\n          'form-control': true,\n          'form-control--small': this.size === 'small',\n          'form-control--medium': this.size === 'medium',\n          'form-control--large': this.size === 'large',\n          'form-control--has-label': hasLabel,\n          'form-control--has-help-text': hasHelpText,\n          'form-control--has-prefix': hasPrefixSlot,\n          'form-control--has-suffix': hasSuffixSlot\n        })}\n      >\n        <label\n          part=\"form-control-label\"\n          class=\"form-control__label\"\n          for=\"input\"\n          aria-hidden=${hasLabel ? 'false' : 'true'}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div part=\"form-control-input\" class=\"form-control-input\">\n          <div\n            part=\"base\"\n            class=${classMap({\n              textarea: true,\n              'textarea--small': this.size === 'small',\n              'textarea--medium': this.size === 'medium',\n              'textarea--large': this.size === 'large',\n              'textarea--standard': !this.readonly,\n              'textarea--readonly': this.readonly,\n              'textarea--disabled': this.disabled,\n              'textarea--focused': this.hasFocus,\n              'textarea--empty': !this.value,\n              'textarea--resize-none': this.resize === 'none',\n              'textarea--resize-vertical': this.resize === 'vertical',\n              'textarea--resize-auto': this.resize === 'auto'\n            })}\n          >\n            <textarea\n              part=\"textarea\"\n              id=\"input\"\n              class=\"textarea__control\"\n              title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n              name=${ifDefined(this.name)}\n              .value=${live(this.value)}\n              ?disabled=${this.disabled}\n              ?readonly=${this.readonly}\n              ?required=${this.required}\n              placeholder=${ifDefined(this.placeholder)}\n              rows=${ifDefined(this.rows)}\n              minlength=${ifDefined(this.minlength)}\n              maxlength=${ifDefined(this.maxlength)}\n              autocapitalize=${ifDefined(this.autocapitalize)}\n              autocorrect=${ifDefined(this.autocorrect)}\n              ?autofocus=${this.autofocus}\n              spellcheck=${ifDefined(this.spellcheck)}\n              enterkeyhint=${ifDefined(this.enterkeyhint)}\n              inputmode=${ifDefined(this.inputmode)}\n              aria-describedby=\"help-text\"\n              @change=${this.handleChange}\n              @input=${this.handleInput}\n              @invalid=${this.handleInvalid}\n              @focus=${this.handleFocus}\n              @blur=${this.handleBlur}\n            ></textarea>\n          </div>\n        </div>\n\n        <div\n          part=\"form-control-help-text\"\n          id=\"help-text\"\n          class=\"form-control__help-text\"\n          aria-hidden=${hasHelpText ? 'false' : 'true'}\n        >\n          <slot name=\"help-text\">${this.helpText}</slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
-  "mappings": "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",
-  "names": []
-}