@aquera/nile-elements 1.8.1 → 1.8.3

package/src/nile-slider/nile-slider.ts

@@ -10,9 +10,9 @@ import NileElement from '../internal/nile-element';
 import { classMap } from 'lit/directives/class-map.js';
 import { html, CSSResultArray, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { TooltipPosition } from './types/nile-slider.types';
+import { TooltipPosition, ValueLabelMode } from './types/nile-slider.types';
 import { NileSliderEvents } from './types/nile-slider.enums';
-import { rangeSlider, singleSlider, lableContaier } from './nile-slider.template';
+import { rangeSlider, singleSlider, lableContaier, fieldHeader, bottomValueLabels } from './nile-slider.template';
 import { 
   handleSingleSlider, 
   handleRangeOne, 
@@ -46,6 +46,10 @@ export class NileSlider extends NileElement {
   @property({ type: Boolean}) rangeSlider: boolean = false;
   @property({ type: String }) labelPosition: string = "top";
   @property({ type: String }) tooltipPosition: TooltipPosition = "top";
+  @property({ type: String }) label  = "";
+  @property({ type: Boolean, reflect: true }) disabled  = false;
+  @property({ type: Boolean, reflect: true }) error = false;
+  @property({ type: String, reflect: true }) valueLabel: ValueLabelMode = 'tooltip';
 
   public buttonOne!: HTMLElement;
   public buttonTwo!: HTMLElement;
@@ -88,7 +92,7 @@ export class NileSlider extends NileElement {
   }
 
   checkValueValidity(value: number, min: number, max: number): number {
-    if(max - min <= 1) { 
+    if(max - min <= 1) {
       return Math.max(min, Math.min(value, max));
     }
     return Math.floor(Math.max(min, Math.min(value, max)));
@@ -109,6 +113,7 @@ export class NileSlider extends NileElement {
   }  
 
   public onMouseMove = (e: MouseEvent): void => {
+    if (this.disabled) return;
     const rect = this.range.getBoundingClientRect();
 
     if (!this.rangeSlider) {
@@ -143,6 +148,7 @@ export class NileSlider extends NileElement {
   };
 
   public onMouseDown = (e: MouseEvent): void => {
+    if (this.disabled) return;
     const rect = this.range.getBoundingClientRect();
     const clickX = e.clientX - rect.left;
     const percent = (clickX / rect.width) * 100;
@@ -166,6 +172,7 @@ export class NileSlider extends NileElement {
     const ariaLabelledby = hasLabels ? 'label-start label-end' : undefined;
   
     return html`
+      ${this.label ? fieldHeader(this) : html``}
       <div
         part="base"
         class=${classMap({
@@ -192,6 +199,7 @@ export class NileSlider extends NileElement {
           >
             <span class="range-completed" part="range-completed"></span>
             ${this.rangeSlider ? rangeSlider(this) : singleSlider(this)}
+            ${this.valueLabel === 'bottom' ? bottomValueLabels(this) : html``}
           </div>
         </div>
   

package/src/nile-slider/types/nile-slider.types.ts

@@ -1,3 +1,5 @@
+export type ValueLabelMode = 'tooltip' | 'bottom' | 'none';
+
 export type TooltipPosition =
   | 'top'
   | 'top-start'

package/src/nile-slider/utils/nile-slider.utils.ts

@@ -80,11 +80,13 @@ export const getHtmlElements = (nileSlider: NileSlider) => {
   nileSlider.range.addEventListener('mousedown', nileSlider.onMouseDown);
 
   nileSlider.buttonOne?.addEventListener('mousedown', () => {
+    if (nileSlider.disabled) return;
     nileSlider.activeThumb = 'one';
     addMoveListeners(nileSlider);
   });
 
   nileSlider.buttonTwo?.addEventListener('mousedown', () => {
+    if (nileSlider.disabled) return;
     nileSlider.activeThumb = 'two';
     addMoveListeners(nileSlider);
   });

package/vscode-html-custom-data.json

@@ -1896,7 +1896,7 @@
     },
     {
       "name": "nile-detail",
-      "description": "Events:\n\n  * `nile-page-load` {`CustomEvent<{ pageIndex: number; offset: number; limit: number; rows: any; }>`} - \n\n  * `nile-page-error` {`CustomEvent<{ pageIndex: number; offset: number; limit: number; error: any; }>`} - \n\n  * `nile-change` {`CustomEvent<{ selected: string[]; }>`} - \n\n  * `nile-search` {`CustomEvent<{ value: string; }>`} - \n\nAttributes:\n\n  * `open` {`boolean`} - \n\n  * `heading` {`string`} - \n\n  * `description` {`string`} - \n\n  * `expandIconPlacement` {`\"left\" | \"right\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `variant` {`NileDetailVariant`} - \n\n  * `allow-html-label` {`boolean`} - \n\n  * `disable-local-search` {`boolean`} - \n\n  * `total-count` {`number | undefined`} - \n\n  * `page-size` {`number`} - \n\n  * `placeholder-label` {`string`} - \n\n  * `search-placeholder` {`string`} - \n\n  * `items-label` {`string`} - \n\n  * `restore-label` {`string`} - \n\n  * `clear-label` {`string`} - \n\n  * `grid-rows` {`number`} - \n\n  * `grid-columns` {`number`} - \n\n  * `min-column-width` {`string`} - \n\n  * `lane-height` {`number`} - \n\n  * `orientation` {`\"vertical\" | \"horizontal\" | \"both\"`} - \n\n  * `max-height` {`string`} - \n\n  * `matrix-columns` {`number`} - \n\n  * `virtualize` {`boolean`} - \n\n  * `virtualize-threshold` {`number`} - \n\n  * `overscan` {`number`} - \n\n  * `show-selected-toggle` {`boolean`} - \n\n  * `selected-only-label` {`string`} - \n\n  * `show-all-label` {`string`} - \n\nProperties:\n\n  * `styles` - \n\n  * `detail` {`HTMLDetailsElement`} - \n\n  * `header` {`HTMLElement`} - \n\n  * `body` {`HTMLElement`} - \n\n  * `open` {`boolean`} - \n\n  * `heading` {`string`} - \n\n  * `description` {`string`} - \n\n  * `expandIconPlacement` {`\"left\" | \"right\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `variant` {`NileDetailVariant`} - \n\n  * `items` {`SelectionItem[]`} - \n\n  * `selected` {`string[]`} - \n\n  * `renderItemConfig` {`NileDetailRenderItemConfig | undefined`} - \n\n  * `allowHtmlLabel` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `totalCount` {`number | undefined`} - \n\n  * `pageSize` {`number`} - \n\n  * `fetchPage` - \n\n  * `placeholderLabel` {`string`} - \n\n  * `config` {`NileDetailSelectionConfig | undefined`} - \n\n  * `searchPlaceholder` {`string`} - \n\n  * `itemsLabel` {`string`} - \n\n  * `restoreLabel` {`string`} - \n\n  * `clearLabel` {`string`} - \n\n  * `gridRows` {`number`} - \n\n  * `gridColumns` {`number`} - \n\n  * `minColumnWidth` {`string`} - \n\n  * `laneHeight` {`number`} - \n\n  * `orientation` {`\"vertical\" | \"horizontal\" | \"both\"`} - \n\n  * `maxHeight` {`string`} - \n\n  * `matrixColumns` {`number`} - \n\n  * `virtualize` {`boolean`} - \n\n  * `virtualizeThreshold` {`number`} - \n\n  * `overscan` {`number`} - \n\n  * `_detailOpen` {`boolean`} - \n\n  * `_hasSlottedContent` {`boolean`} - \n\n  * `_searchTerm` {`string`} - \n\n  * `_selectedSet` {`Set<string>`} - \n\n  * `_showSelectedOnly` {`boolean`} - \n\n  * `showSelectedToggle` {`boolean`} - \n\n  * `selectedOnlyLabel` {`string`} - \n\n  * `showAllLabel` {`string`} - \n\n  * `_restoreDefaults` {`string[] | null`} - \n\n  * `_gridResizeObserver` - \n\n  * `_virtCtrl` - \n\n  * `_rowVirtCtrl` - \n\n  * `_colVirtCtrl` - \n\n  * `_pageCache` - \n\n  * `_pendingPages` - \n\n  * `_isSelectionVariant` {`boolean`} - True for any variant that renders the selection UI/behavior.\n\n  * `_isLightVariant` {`boolean`} - True for any variant that applies the light styling.\n\n  * `_isInfiniteMode` {`boolean`} - \n\n  * `_isVirtualized` {`boolean`} - \n\n  * `_columnWidthPx` {`number`} - \n\n  * `_filteredItems` {`SelectionItem[]`} - \n\n  * `_allChecked` {`boolean`} - \n\n  * `_indeterminate` {`boolean`} - \n\n  * `_countLabel` {`string`} - \n\n  * `_summaryLabel` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Events:\n\n  * `nile-page-load` {`CustomEvent<{ pageIndex: number; offset: number; limit: number; rows: any; }>`} - \n\n  * `nile-page-error` {`CustomEvent<{ pageIndex: number; offset: number; limit: number; error: any; }>`} - \n\n  * `nile-change` {`CustomEvent<{ selected: string[]; }>`} - \n\n  * `nile-search` {`CustomEvent<{ value: string; }>`} - \n\nAttributes:\n\n  * `open` {`boolean`} - \n\n  * `heading` {`string`} - \n\n  * `description` {`string`} - \n\n  * `expandIconPlacement` {`\"left\" | \"right\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `preview` {`boolean`} - When set, the closed state shows a preview of the body content instead of hiding it.\n\n  * `preview-percentage` {`number`} - Percentage (0–100) of the content height shown while previewing.\n\n  * `variant` {`NileDetailVariant`} - \n\n  * `allow-html-label` {`boolean`} - \n\n  * `disable-local-search` {`boolean`} - \n\n  * `total-count` {`number | undefined`} - \n\n  * `page-size` {`number`} - \n\n  * `placeholder-label` {`string`} - \n\n  * `search-placeholder` {`string`} - \n\n  * `items-label` {`string`} - \n\n  * `restore-label` {`string`} - \n\n  * `clear-label` {`string`} - \n\n  * `grid-rows` {`number`} - \n\n  * `grid-columns` {`number`} - \n\n  * `min-column-width` {`string`} - \n\n  * `lane-height` {`number`} - \n\n  * `orientation` {`\"vertical\" | \"horizontal\" | \"both\"`} - \n\n  * `max-height` {`string`} - \n\n  * `matrix-columns` {`number`} - \n\n  * `virtualize` {`boolean`} - \n\n  * `virtualize-threshold` {`number`} - \n\n  * `overscan` {`number`} - \n\n  * `show-selected-toggle` {`boolean`} - \n\n  * `selected-only-label` {`string`} - \n\n  * `show-all-label` {`string`} - \n\nProperties:\n\n  * `styles` - \n\n  * `detail` {`HTMLDetailsElement`} - \n\n  * `header` {`HTMLElement`} - \n\n  * `body` {`HTMLElement`} - \n\n  * `open` {`boolean`} - \n\n  * `heading` {`string`} - \n\n  * `description` {`string`} - \n\n  * `expandIconPlacement` {`\"left\" | \"right\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `preview` {`boolean`} - When set, the closed state shows a preview of the body content instead of hiding it.\n\n  * `previewPercentage` {`number`} - Percentage (0–100) of the content height shown while previewing.\n\n  * `variant` {`NileDetailVariant`} - \n\n  * `items` {`SelectionItem[]`} - \n\n  * `selected` {`string[]`} - \n\n  * `renderItemConfig` {`NileDetailRenderItemConfig | undefined`} - \n\n  * `allowHtmlLabel` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `totalCount` {`number | undefined`} - \n\n  * `pageSize` {`number`} - \n\n  * `fetchPage` - \n\n  * `placeholderLabel` {`string`} - \n\n  * `config` {`NileDetailSelectionConfig | undefined`} - \n\n  * `searchPlaceholder` {`string`} - \n\n  * `itemsLabel` {`string`} - \n\n  * `restoreLabel` {`string`} - \n\n  * `clearLabel` {`string`} - \n\n  * `gridRows` {`number`} - \n\n  * `gridColumns` {`number`} - \n\n  * `minColumnWidth` {`string`} - \n\n  * `laneHeight` {`number`} - \n\n  * `orientation` {`\"vertical\" | \"horizontal\" | \"both\"`} - \n\n  * `maxHeight` {`string`} - \n\n  * `matrixColumns` {`number`} - \n\n  * `virtualize` {`boolean`} - \n\n  * `virtualizeThreshold` {`number`} - \n\n  * `overscan` {`number`} - \n\n  * `_detailOpen` {`boolean`} - \n\n  * `_hasSlottedContent` {`boolean`} - \n\n  * `_searchTerm` {`string`} - \n\n  * `_selectedSet` {`Set<string>`} - \n\n  * `_showSelectedOnly` {`boolean`} - \n\n  * `showSelectedToggle` {`boolean`} - \n\n  * `selectedOnlyLabel` {`string`} - \n\n  * `showAllLabel` {`string`} - \n\n  * `_restoreDefaults` {`string[] | null`} - \n\n  * `_gridResizeObserver` - \n\n  * `_virtCtrl` - \n\n  * `_rowVirtCtrl` - \n\n  * `_colVirtCtrl` - \n\n  * `_pageCache` - \n\n  * `_pendingPages` - \n\n  * `_isSelectionVariant` {`boolean`} - True for any variant that renders the selection UI/behavior.\n\n  * `_isLightVariant` {`boolean`} - True for any variant that applies the light styling.\n\n  * `_previewEnabled` {`boolean`} - True when preview mode is on with a usable percentage.\n\n  * `_isPreviewActive` {`boolean`} - True when the closed state should currently render the preview.\n\n  * `_isInfiniteMode` {`boolean`} - \n\n  * `_isVirtualized` {`boolean`} - \n\n  * `_columnWidthPx` {`number`} - \n\n  * `_filteredItems` {`SelectionItem[]`} - \n\n  * `_allChecked` {`boolean`} - \n\n  * `_indeterminate` {`boolean`} - \n\n  * `_countLabel` {`string`} - \n\n  * `_summaryLabel` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "open",
@@ -1928,6 +1928,15 @@
           "description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "preview",
+          "description": "`preview` {`boolean`} - When set, the closed state shows a preview of the body content instead of hiding it.\n\nProperty: preview\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "preview-percentage",
+          "description": "`preview-percentage` {`number`} - Percentage (0–100) of the content height shown while previewing.\n\nProperty: previewPercentage\n\nDefault: 30"
+        },
         {
           "name": "variant",
           "description": "`variant` {`NileDetailVariant`} - \n\nProperty: variant\n\nDefault: default",
@@ -3645,7 +3654,7 @@
     },
     {
       "name": "nile-input",
-      "description": "Nile icon component.\n\nAttributes:\n\n  * `title` {`string`} - \n\n  * `type` {`\"number\" | \"text\" | \"time\" | \"date\" | \"datetime-local\" | \"email\" | \"password\" | \"search\" | \"tel\" | \"url\"`} - The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.\n\n  * `checkNonPrintableChar` {`boolean`} - \n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The input's size.\n\n  * `filled` {`boolean`} - Draws a filled input.\n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `destructive` {`boolean`} - Sets the input to a Destructive state, changing its visual appearance.\n\n  * `pill` {`boolean`} - Draws a pill-style input with rounded edges.\n\n  * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `readonly` {`boolean`} - Makes the input readonly.\n\n  * `password-toggle` {`boolean`} - Adds a button to toggle the password's visibility. Only applies to password types.\n\n  * `password-visible` {`boolean`} - Determines whether or not the password is currently visible. Only applies to password input types.\n\n  * `no-spin-buttons` {`boolean`} - Hides the browser's built-in increment/decrement spin buttons for number inputs.\n\n  * `autocapitalize` {`\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\n  * `autocorrect` {`\"off\" | \"on\"`} - Indicates whether the browser's autocorrect feature is on or off.\n\n  * `autocomplete` {`string`} - 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  * `autofocus` {`boolean`} - Indicates that the input should receive focus on page load.\n\n  * `enterkeyhint` {`\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"`} - Used to customize the label or icon of the Enter key on virtual keyboards.\n\n  * `spellcheck` {`boolean`} - Enables spell checking on the input.\n\n  * `canSavePassword` {`boolean`} - \n\n  * `inputmode` {`\"text\" | \"none\" | \"numeric\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"decimal\"`} - Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.\n\n  * `noOutline` - \n\n  * `noPadding` - \n\n  * `name` {`string`} - The name of the input, submitted as a name/value pair with form data.\n\n  * `value` {`string`} - The current value of the input, submitted as a name/value pair with form data.\n\n  * `disabled` {`boolean`} - Disables the input.\n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `pattern` {`string`} - A regular expression pattern to validate input against.\n\n  * `min` {`string | number`} - The input's minimum value. Only applies to date and number input types.\n\n  * `max` {`string | number`} - The input's maximum value. Only applies to date and number input types.\n\n  * `step` {`number | \"any\"`} - Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value. Only applies to date and number input types.\n\n  * `required` {`boolean`} - Makes the input a required field.\n\n  * `minlength` {`number`} - The minimum length of input that will be considered valid.\n\n  * `maxlength` {`number`} - The maximum length of input that will be considered valid.\n\nProperties:\n\n  * `styles` - \n\n  * `formControlController` - \n\n  * `hasSlotController` - \n\n  * `input` {`HTMLInputElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `type` {`\"number\" | \"text\" | \"time\" | \"date\" | \"datetime-local\" | \"email\" | \"password\" | \"search\" | \"tel\" | \"url\"`} - The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.\n\n  * `checkNonPrintableChar` {`boolean`} - \n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The input's size.\n\n  * `filled` {`boolean`} - Draws a filled input.\n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `destructive` {`boolean`} - Sets the input to a Destructive state, changing its visual appearance.\n\n  * `pill` {`boolean`} - Draws a pill-style input with rounded edges.\n\n  * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `readonly` {`boolean`} - Makes the input readonly.\n\n  * `passwordToggle` {`boolean`} - Adds a button to toggle the password's visibility. Only applies to password types.\n\n  * `passwordVisible` {`boolean`} - Determines whether or not the password is currently visible. Only applies to password input types.\n\n  * `noSpinButtons` {`boolean`} - Hides the browser's built-in increment/decrement spin buttons for number inputs.\n\n  * `autocapitalize` {`\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\n  * `autocorrect` {`\"off\" | \"on\"`} - Indicates whether the browser's autocorrect feature is on or off.\n\n  * `autocomplete` {`string`} - 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  * `autofocus` {`boolean`} - Indicates that the input should receive focus on page load.\n\n  * `enterkeyhint` {`\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"`} - Used to customize the label or icon of the Enter key on virtual keyboards.\n\n  * `spellcheck` {`boolean`} - Enables spell checking on the input.\n\n  * `canSavePassword` {`boolean`} - \n\n  * `inputmode` {`\"text\" | \"none\" | \"numeric\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"decimal\"`} - Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.\n\n  * `hasPrintableCharacters` {`boolean`} - \n\n  * `markedValue` {`string`} - \n\n  * `noOutline` - \n\n  * `noPadding` - \n\n  * `valueAsDate` {`Date | null`} - Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted.\n\n  * `valueAsNumber` {`number`} - Gets or sets the current value as a number. Returns `NaN` if the value can't be converted.\n\n  * `name` {`string`} - The name of the input, submitted as a name/value pair with form data.\n\n  * `value` {`string`} - The current value of the input, submitted as a name/value pair with form data.\n\n  * `disabled` {`boolean`} - Disables the input.\n\n  * `defaultValue` {`string`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `defaultChecked` {`boolean | undefined`} - \n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `pattern` {`string`} - A regular expression pattern to validate input against.\n\n  * `min` {`string | number`} - The input's minimum value. Only applies to date and number input types.\n\n  * `max` {`string | number`} - The input's maximum value. Only applies to date and number input types.\n\n  * `step` {`number | \"any\"`} - Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value. Only applies to date and number input types.\n\n  * `required` {`boolean`} - Makes the input a required field.\n\n  * `minlength` {`number`} - The minimum length of input that will be considered valid.\n\n  * `maxlength` {`number`} - The maximum length of input that will be considered valid.\n\n  * `validity` {`ValidityState`} - Gets the validity state object\n\n  * `validationMessage` {`string`} - Gets the validation message\n\n  * `checkValidity` - \n\n  * `getForm` - \n\n  * `reportValidity` - \n\n  * `setCustomValidity` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nAttributes:\n\n  * `title` {`string`} - \n\n  * `type` {`\"number\" | \"text\" | \"time\" | \"date\" | \"datetime-local\" | \"email\" | \"password\" | \"search\" | \"tel\" | \"url\"`} - The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.\n\n  * `checkNonPrintableChar` {`boolean`} - \n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The input's size.\n\n  * `filled` {`boolean`} - Draws a filled input.\n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `destructive` {`boolean`} - Sets the input to a Destructive state, changing its visual appearance.\n\n  * `pill` {`boolean`} - Draws a pill-style input with rounded edges.\n\n  * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `readonly` {`boolean`} - Makes the input readonly.\n\n  * `password-toggle` {`boolean`} - Adds a button to toggle the password's visibility. Only applies to password types.\n\n  * `password-visible` {`boolean`} - Determines whether or not the password is currently visible. Only applies to password input types.\n\n  * `no-spin-buttons` {`boolean`} - Hides the browser's built-in increment/decrement spin buttons for number inputs.\n\n  * `autocapitalize` {`\"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\n  * `autocorrect` {`\"off\" | \"on\"`} - Indicates whether the browser's autocorrect feature is on or off.\n\n  * `autocomplete` {`string`} - 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  * `autofocus` {`boolean`} - Indicates that the input should receive focus on page load.\n\n  * `enterkeyhint` {`\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"`} - Used to customize the label or icon of the Enter key on virtual keyboards.\n\n  * `spellcheck` {`boolean`} - Enables spell checking on the input.\n\n  * `canSavePassword` {`boolean`} - \n\n  * `inputmode` {`\"text\" | \"none\" | \"numeric\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"decimal\"`} - Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.\n\n  * `noOutline` - \n\n  * `noPadding` - \n\n  * `name` {`string`} - The name of the input, submitted as a name/value pair with form data.\n\n  * `value` {`string`} - The current value of the input, submitted as a name/value pair with form data.\n\n  * `disabled` {`boolean`} - Disables the input.\n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `pattern` {`string`} - A regular expression pattern to validate input against.\n\n  * `min` {`string | number`} - The input's minimum value. Only applies to date and number input types.\n\n  * `max` {`string | number`} - The input's maximum value. Only applies to date and number input types.\n\n  * `step` {`number | \"any\"`} - Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value. Only applies to date and number input types.\n\n  * `required` {`boolean`} - Makes the input a required field.\n\n  * `minlength` {`number`} - The minimum length of input that will be considered valid.\n\n  * `maxlength` {`number`} - The maximum length of input that will be considered valid.\n\nProperties:\n\n  * `styles` - \n\n  * `formControlController` - \n\n  * `hasSlotController` - \n\n  * `input` {`HTMLInputElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `type` {`\"number\" | \"text\" | \"time\" | \"date\" | \"datetime-local\" | \"email\" | \"password\" | \"search\" | \"tel\" | \"url\"`} - The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.\n\n  * `checkNonPrintableChar` {`boolean`} - \n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The input's size.\n\n  * `filled` {`boolean`} - Draws a filled input.\n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `destructive` {`boolean`} - Sets the input to a Destructive state, changing its visual appearance.\n\n  * `pill` {`boolean`} - Draws a pill-style input with rounded edges.\n\n  * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `readonly` {`boolean`} - Makes the input readonly.\n\n  * `passwordToggle` {`boolean`} - Adds a button to toggle the password's visibility. Only applies to password types.\n\n  * `passwordVisible` {`boolean`} - Determines whether or not the password is currently visible. Only applies to password input types.\n\n  * `noSpinButtons` {`boolean`} - Hides the browser's built-in increment/decrement spin buttons for number inputs.\n\n  * `autocapitalize` {`\"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\n  * `autocorrect` {`\"off\" | \"on\"`} - Indicates whether the browser's autocorrect feature is on or off.\n\n  * `autocomplete` {`string`} - 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  * `autofocus` {`boolean`} - Indicates that the input should receive focus on page load.\n\n  * `enterkeyhint` {`\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"`} - Used to customize the label or icon of the Enter key on virtual keyboards.\n\n  * `spellcheck` {`boolean`} - Enables spell checking on the input.\n\n  * `canSavePassword` {`boolean`} - \n\n  * `inputmode` {`\"text\" | \"none\" | \"numeric\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"decimal\"`} - Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.\n\n  * `hasPrintableCharacters` {`boolean`} - \n\n  * `markedValue` {`string`} - \n\n  * `noOutline` - \n\n  * `noPadding` - \n\n  * `valueAsDate` {`Date | null`} - Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted.\n\n  * `valueAsNumber` {`number`} - Gets or sets the current value as a number. Returns `NaN` if the value can't be converted.\n\n  * `name` {`string`} - The name of the input, submitted as a name/value pair with form data.\n\n  * `value` {`string`} - The current value of the input, submitted as a name/value pair with form data.\n\n  * `disabled` {`boolean`} - Disables the input.\n\n  * `defaultValue` {`string`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `defaultChecked` {`boolean | undefined`} - \n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `pattern` {`string`} - A regular expression pattern to validate input against.\n\n  * `min` {`string | number`} - The input's minimum value. Only applies to date and number input types.\n\n  * `max` {`string | number`} - The input's maximum value. Only applies to date and number input types.\n\n  * `step` {`number | \"any\"`} - Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value. Only applies to date and number input types.\n\n  * `required` {`boolean`} - Makes the input a required field.\n\n  * `minlength` {`number`} - The minimum length of input that will be considered valid.\n\n  * `maxlength` {`number`} - The maximum length of input that will be considered valid.\n\n  * `validity` {`ValidityState`} - Gets the validity state object\n\n  * `validationMessage` {`string`} - Gets the validation message\n\n  * `checkValidity` - \n\n  * `getForm` - \n\n  * `reportValidity` - \n\n  * `setCustomValidity` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "title",
@@ -3780,13 +3789,13 @@
         },
         {
           "name": "autocapitalize",
-          "description": "`autocapitalize` {`\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\nProperty: autocapitalize",
+          "description": "`autocapitalize` {`\"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\nProperty: autocapitalize",
           "values": [
             {
-              "name": "off"
+              "name": "none"
             },
             {
-              "name": "none"
+              "name": "off"
             },
             {
               "name": "on"
@@ -6358,7 +6367,7 @@
     },
     {
       "name": "nile-slider",
-      "description": "Nile slider component.\n\nAttributes:\n\n  * `minValue` {`number`} - \n\n  * `value` {`number`} - \n\n  * `maxValue` {`number`} - \n\n  * `rangeOneValue` {`number`} - \n\n  * `rangeTwoValue` {`number`} - \n\n  * `showLabel` {`boolean`} - \n\n  * `labelStart` {`string`} - \n\n  * `labelEnd` {`string`} - \n\n  * `rangeSlider` {`boolean`} - \n\n  * `labelPosition` {`string`} - \n\n  * `tooltipPosition` {`TooltipPosition`} - \n\nProperties:\n\n  * `minValue` {`number`} - \n\n  * `value` {`number`} - \n\n  * `maxValue` {`number`} - \n\n  * `rangeOneValue` {`number`} - \n\n  * `rangeTwoValue` {`number`} - \n\n  * `showLabel` {`boolean`} - \n\n  * `labelStart` {`string`} - \n\n  * `labelEnd` {`string`} - \n\n  * `rangeSlider` {`boolean`} - \n\n  * `labelPosition` {`string`} - \n\n  * `tooltipPosition` {`TooltipPosition`} - \n\n  * `buttonOne` {`HTMLElement`} - \n\n  * `buttonTwo` {`HTMLElement`} - \n\n  * `range` {`HTMLElement`} - \n\n  * `completed` {`HTMLElement`} - \n\n  * `activeThumb` {`\"one\" | \"two\" | null`} - \n\n  * `onMouseMove` - \n\n  * `onMouseUp` - \n\n  * `onMouseDown` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile slider component.\n\nAttributes:\n\n  * `minValue` {`number`} - \n\n  * `value` {`number`} - \n\n  * `maxValue` {`number`} - \n\n  * `rangeOneValue` {`number`} - \n\n  * `rangeTwoValue` {`number`} - \n\n  * `showLabel` {`boolean`} - \n\n  * `labelStart` {`string`} - \n\n  * `labelEnd` {`string`} - \n\n  * `rangeSlider` {`boolean`} - \n\n  * `labelPosition` {`string`} - \n\n  * `tooltipPosition` {`TooltipPosition`} - \n\n  * `label` {`string`} - \n\n  * `disabled` {`boolean`} - \n\n  * `error` {`boolean`} - \n\n  * `valueLabel` {`ValueLabelMode`} - \n\nProperties:\n\n  * `minValue` {`number`} - \n\n  * `value` {`number`} - \n\n  * `maxValue` {`number`} - \n\n  * `rangeOneValue` {`number`} - \n\n  * `rangeTwoValue` {`number`} - \n\n  * `showLabel` {`boolean`} - \n\n  * `labelStart` {`string`} - \n\n  * `labelEnd` {`string`} - \n\n  * `rangeSlider` {`boolean`} - \n\n  * `labelPosition` {`string`} - \n\n  * `tooltipPosition` {`TooltipPosition`} - \n\n  * `label` {`string`} - \n\n  * `disabled` {`boolean`} - \n\n  * `error` {`boolean`} - \n\n  * `valueLabel` {`ValueLabelMode`} - \n\n  * `buttonOne` {`HTMLElement`} - \n\n  * `buttonTwo` {`HTMLElement`} - \n\n  * `range` {`HTMLElement`} - \n\n  * `completed` {`HTMLElement`} - \n\n  * `activeThumb` {`\"one\" | \"two\" | null`} - \n\n  * `onMouseMove` - \n\n  * `onMouseUp` - \n\n  * `onMouseDown` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "minValue",
@@ -6443,6 +6452,35 @@
               "name": "left-end"
             }
           ]
+        },
+        {
+          "name": "label",
+          "description": "`label` {`string`} - \n\nProperty: label\n\nDefault: "
+        },
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "error",
+          "description": "`error` {`boolean`} - \n\nProperty: error\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "valueLabel",
+          "description": "`valueLabel` {`ValueLabelMode`} - \n\nProperty: valueLabel\n\nDefault: tooltip",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "tooltip"
+            },
+            {
+              "name": "none"
+            }
+          ]
         }
       ]
     },
@@ -6896,7 +6934,7 @@
     },
     {
       "name": "nile-textarea",
-      "description": "Events:\n\n  * `nile-blur` {} - Emitted when the control loses focus.\n\n  * `nile-change` {} - Emitted when an alteration to the control's value is committed by the user.\n\n  * `nile-focus` {} - Emitted when the control gains focus.\n\n  * `nile-input` {} - Emitted when the control receives input.\n\nSlots:\n\n  * `label` {} - The textarea's label. Alternatively, you can use the `label` attribute.\n\n  * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n  * `title` {`string`} - \n\n  * `name` {`string`} - The name of the textarea, submitted as a name/value pair with form data.\n\n  * `value` {`string`} - The current value of the textarea, submitted as a name/value pair with form data.\n\n  * `size` {`string`} - The textarea's size.\n\n  * `filled` {`boolean`} - Draws a filled textarea.\n\n  * `label` {`string`} - The textarea's label. If you need to display HTML, use the `label` slot instead.\n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `rows` {`number`} - The number of rows to display by default.\n\n  * `resize` {`\"none\" | \"vertical\" | \"auto\"`} - Controls how the textarea can be resized.\n\n  * `disabled` {`boolean`} - Disables the textarea.\n\n  * `readonly` {`boolean`} - Makes the textarea readonly.\n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `required` {`boolean`} - Makes the textarea a required field.\n\n  * `minlength` {`number`} - \n\n  * `maxlength` {`number`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `autocapitalize` {`\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\n  * `autocorrect` {`string`} - Indicates whether the browser's autocorrect feature is on or off.\n\n  * `autocomplete` {`string`} - 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  * `autofocus` {`boolean`} - Indicates that the input should receive focus on page load.\n\n  * `enterkeyhint` {`\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"`} - Used to customize the label or icon of the Enter key on virtual keyboards.\n\n  * `spellcheck` {`boolean`} - Enables spell checking on the textarea.\n\n  * `inputmode` {`\"text\" | \"none\" | \"numeric\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"decimal\"`} - Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.\n\n  * `fullHeight` {`boolean`} - \n\n  * `checkNonPrintableChar` {`boolean`} - \n\nProperties:\n\n  * `styles` - \n\n  * `hasSlotController` - \n\n  * `resizeObserver` - \n\n  * `input` {`HTMLTextAreaElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `name` {`string`} - The name of the textarea, submitted as a name/value pair with form data.\n\n  * `value` {`string`} - The current value of the textarea, submitted as a name/value pair with form data.\n\n  * `size` {`string`} - The textarea's size.\n\n  * `filled` {`boolean`} - Draws a filled textarea.\n\n  * `label` {`string`} - The textarea's label. If you need to display HTML, use the `label` slot instead.\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `rows` {`number`} - The number of rows to display by default.\n\n  * `resize` {`\"none\" | \"vertical\" | \"auto\"`} - Controls how the textarea can be resized.\n\n  * `disabled` {`boolean`} - Disables the textarea.\n\n  * `readonly` {`boolean`} - Makes the textarea readonly.\n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `required` {`boolean`} - Makes the textarea a required field.\n\n  * `minlength` {`number`} - \n\n  * `maxlength` {`number`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `autocapitalize` {`\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\n  * `autocorrect` {`string`} - Indicates whether the browser's autocorrect feature is on or off.\n\n  * `autocomplete` {`string`} - 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  * `autofocus` {`boolean`} - Indicates that the input should receive focus on page load.\n\n  * `enterkeyhint` {`\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"`} - Used to customize the label or icon of the Enter key on virtual keyboards.\n\n  * `spellcheck` {`boolean`} - Enables spell checking on the textarea.\n\n  * `inputmode` {`\"text\" | \"none\" | \"numeric\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"decimal\"`} - Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.\n\n  * `defaultValue` {`string`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `fullHeight` {`boolean`} - \n\n  * `checkNonPrintableChar` {`boolean`} - \n\n  * `hasPrintableCharacters` {`boolean`} - \n\n  * `markedValue` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Events:\n\n  * `nile-blur` {} - Emitted when the control loses focus.\n\n  * `nile-change` {} - Emitted when an alteration to the control's value is committed by the user.\n\n  * `nile-focus` {} - Emitted when the control gains focus.\n\n  * `nile-input` {} - Emitted when the control receives input.\n\nSlots:\n\n  * `label` {} - The textarea's label. Alternatively, you can use the `label` attribute.\n\n  * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n  * `title` {`string`} - \n\n  * `name` {`string`} - The name of the textarea, submitted as a name/value pair with form data.\n\n  * `value` {`string`} - The current value of the textarea, submitted as a name/value pair with form data.\n\n  * `size` {`string`} - The textarea's size.\n\n  * `filled` {`boolean`} - Draws a filled textarea.\n\n  * `label` {`string`} - The textarea's label. If you need to display HTML, use the `label` slot instead.\n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `rows` {`number`} - The number of rows to display by default.\n\n  * `resize` {`\"none\" | \"vertical\" | \"auto\"`} - Controls how the textarea can be resized.\n\n  * `disabled` {`boolean`} - Disables the textarea.\n\n  * `readonly` {`boolean`} - Makes the textarea readonly.\n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `required` {`boolean`} - Makes the textarea a required field.\n\n  * `minlength` {`number`} - \n\n  * `maxlength` {`number`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `autocapitalize` {`\"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\n  * `autocorrect` {`string`} - Indicates whether the browser's autocorrect feature is on or off.\n\n  * `autocomplete` {`string`} - 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  * `autofocus` {`boolean`} - Indicates that the input should receive focus on page load.\n\n  * `enterkeyhint` {`\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"`} - Used to customize the label or icon of the Enter key on virtual keyboards.\n\n  * `spellcheck` {`boolean`} - Enables spell checking on the textarea.\n\n  * `inputmode` {`\"text\" | \"none\" | \"numeric\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"decimal\"`} - Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.\n\n  * `fullHeight` {`boolean`} - \n\n  * `checkNonPrintableChar` {`boolean`} - \n\nProperties:\n\n  * `styles` - \n\n  * `hasSlotController` - \n\n  * `resizeObserver` - \n\n  * `input` {`HTMLTextAreaElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `name` {`string`} - The name of the textarea, submitted as a name/value pair with form data.\n\n  * `value` {`string`} - The current value of the textarea, submitted as a name/value pair with form data.\n\n  * `size` {`string`} - The textarea's size.\n\n  * `filled` {`boolean`} - Draws a filled textarea.\n\n  * `label` {`string`} - The textarea's label. If you need to display HTML, use the `label` slot instead.\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `rows` {`number`} - The number of rows to display by default.\n\n  * `resize` {`\"none\" | \"vertical\" | \"auto\"`} - Controls how the textarea can be resized.\n\n  * `disabled` {`boolean`} - Disables the textarea.\n\n  * `readonly` {`boolean`} - Makes the textarea readonly.\n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `required` {`boolean`} - Makes the textarea a required field.\n\n  * `minlength` {`number`} - \n\n  * `maxlength` {`number`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `autocapitalize` {`\"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\n  * `autocorrect` {`string`} - Indicates whether the browser's autocorrect feature is on or off.\n\n  * `autocomplete` {`string`} - 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  * `autofocus` {`boolean`} - Indicates that the input should receive focus on page load.\n\n  * `enterkeyhint` {`\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"`} - Used to customize the label or icon of the Enter key on virtual keyboards.\n\n  * `spellcheck` {`boolean`} - Enables spell checking on the textarea.\n\n  * `inputmode` {`\"text\" | \"none\" | \"numeric\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"decimal\"`} - Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.\n\n  * `defaultValue` {`string`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `fullHeight` {`boolean`} - \n\n  * `checkNonPrintableChar` {`boolean`} - \n\n  * `hasPrintableCharacters` {`boolean`} - \n\n  * `markedValue` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "title",
@@ -6998,13 +7036,13 @@
         },
         {
           "name": "autocapitalize",
-          "description": "`autocapitalize` {`\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\nProperty: autocapitalize",
+          "description": "`autocapitalize` {`\"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\nProperty: autocapitalize",
           "values": [
             {
-              "name": "off"
+              "name": "none"
             },
             {
-              "name": "none"
+              "name": "off"
             },
             {
               "name": "on"