@ni/nimble-components 18.8.3 → 18.9.0

package/dist/all-components-bundle.js

@@ -13821,69 +13821,6 @@
     ], TextArea$1.prototype, "defaultSlottedNodes", void 0);
     applyMixins(TextArea$1, DelegatesARIATextbox);
 
-    /**
-     * The template for the {@link @microsoft/fast-foundation#(TextArea:class)} component.
-     * @public
-     */
-    const textAreaTemplate = (context, definition) => html `
-    <template
-        class="
-            ${x => (x.readOnly ? "readonly" : "")}
-            ${x => (x.resize !== TextAreaResize.none ? `resize-${x.resize}` : "")}"
-    >
-        <label
-            part="label"
-            for="control"
-            class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length
-    ? "label"
-    : "label label__hidden"}"
-        >
-            <slot ${slotted("defaultSlottedNodes")}></slot>
-        </label>
-        <textarea
-            part="control"
-            class="control"
-            id="control"
-            ?autofocus="${x => x.autofocus}"
-            cols="${x => x.cols}"
-            ?disabled="${x => x.disabled}"
-            form="${x => x.form}"
-            list="${x => x.list}"
-            maxlength="${x => x.maxlength}"
-            minlength="${x => x.minlength}"
-            name="${x => x.name}"
-            placeholder="${x => x.placeholder}"
-            ?readonly="${x => x.readOnly}"
-            ?required="${x => x.required}"
-            rows="${x => x.rows}"
-            ?spellcheck="${x => x.spellcheck}"
-            :value="${x => x.value}"
-            aria-atomic="${x => x.ariaAtomic}"
-            aria-busy="${x => x.ariaBusy}"
-            aria-controls="${x => x.ariaControls}"
-            aria-current="${x => x.ariaCurrent}"
-            aria-describedby="${x => x.ariaDescribedby}"
-            aria-details="${x => x.ariaDetails}"
-            aria-disabled="${x => x.ariaDisabled}"
-            aria-errormessage="${x => x.ariaErrormessage}"
-            aria-flowto="${x => x.ariaFlowto}"
-            aria-haspopup="${x => x.ariaHaspopup}"
-            aria-hidden="${x => x.ariaHidden}"
-            aria-invalid="${x => x.ariaInvalid}"
-            aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-            aria-label="${x => x.ariaLabel}"
-            aria-labelledby="${x => x.ariaLabelledby}"
-            aria-live="${x => x.ariaLive}"
-            aria-owns="${x => x.ariaOwns}"
-            aria-relevant="${x => x.ariaRelevant}"
-            aria-roledescription="${x => x.ariaRoledescription}"
-            @input="${(x, c) => x.handleTextInput()}"
-            @change="${x => x.handleChange()}"
-            ${ref("control")}
-        ></textarea>
-    </template>
-`;
-
     /**
      * The template for the {@link @microsoft/fast-foundation#(TextField:class)} component.
      * @public
@@ -16807,7 +16744,7 @@
         return `${prefix}${uniqueIdCounter++}`;
     }
 
-    const template$l = html `<slot></slot>`;
+    const template$m = html `<slot></slot>`;
 
     const styles$K = css `
     :host {
@@ -16866,7 +16803,7 @@
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
         styles: styles$K,
-        template: template$l
+        template: template$m
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -17133,7 +17070,7 @@
 `;
 
     // prettier-ignore
-    const template$k = (context, definition) => html `
+    const template$l = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17206,7 +17143,7 @@
     const nimbleAnchor = Anchor.compose({
         baseName: 'anchor',
         baseClass: Anchor$1,
-        template: template$k,
+        template: template$l,
         styles: styles$J,
         shadowOptions: {
             delegatesFocus: true
@@ -17583,7 +17520,7 @@
     }
 `;
 
-    const template$j = (context, definition) => html `
+    const template$k = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17665,7 +17602,7 @@
     ], AnchorButton.prototype, "disabled", void 0);
     const nimbleAnchorButton = AnchorButton.compose({
         baseName: 'anchor-button',
-        template: template$j,
+        template: template$k,
         styles: styles$H,
         shadowOptions: {
             delegatesFocus: true
@@ -17751,13 +17688,15 @@
     }
 `;
 
-    const template$i = (context, definition) => html `
+    const template$j = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
     ? `indent-${x.startColumnCount}`
     : '')}"
         aria-disabled="${x => x.disabled}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+        @keydown="${(x, c) => x.keydownHandler(c.event)}"
     >
         <a
             ${ref('anchor')}
@@ -17769,8 +17708,6 @@
             rel="${x => x.rel}"
             target="${x => x.target}"
             type="${x => x.type}"
-            @click="${(x, c) => x.clickHandler(c.event)}"
-            @keydown="${(x, c) => x.keydownHandler(c.event)}"
         >
             ${startSlotTemplate(context, definition)}
             <span class="content" part="content">
@@ -17804,7 +17741,7 @@
          * @internal
          */
         clickHandler(e) {
-            e.stopImmediatePropagation();
+            e.stopPropagation();
             return true;
         }
         /**
@@ -17816,7 +17753,7 @@
             }
             switch (e.key) {
                 case keyEnter:
-                    e.stopImmediatePropagation();
+                    e.stopPropagation();
                     break;
             }
             return true;
@@ -17856,7 +17793,7 @@
     ], AnchorMenuItem.prototype, "startColumnCount", void 0);
     const nimbleAnchorMenuItem = AnchorMenuItem.compose({
         baseName: 'anchor-menu-item',
-        template: template$i,
+        template: template$j,
         styles: styles$G,
         shadowOptions: {
             delegatesFocus: true
@@ -17999,7 +17936,7 @@
     }
 `;
 
-    const template$h = () => html `
+    const template$i = () => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -18037,7 +17974,7 @@
     ], AnchorTab.prototype, "disabled", void 0);
     const nimbleAnchorTab = AnchorTab.compose({
         baseName: 'anchor-tab',
-        template: template$h,
+        template: template$i,
         styles: styles$E
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
@@ -18061,7 +17998,7 @@
     }
 `;
 
-    const template$g = (context, definition) => html `
+    const template$h = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18258,7 +18195,7 @@
     applyMixins(AnchorTabs, StartEnd);
     const nimbleAnchorTabs = AnchorTabs.compose({
         baseName: 'anchor-tabs',
-        template: template$g,
+        template: template$h,
         styles: styles$D,
         shadowOptions: {
             delegatesFocus: false
@@ -19198,7 +19135,7 @@
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8.033 14.026 4.9 10.866 6.277 9.53l1.744 1.81 4.562-4.507 1.307 1.363Zm1.155-10.68-1.321-1.32-2.312 2.311-2.311-2.311-1.321 1.32 2.311 2.312L1.923 7.97l1.32 1.32 2.312-2.31 2.312 2.31 1.32-1.32-2.31-2.312Z"/></svg>`
     };
 
-    const template$f = html `
+    const template$g = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
@@ -19257,7 +19194,7 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$f,
+            template: template$g,
             styles: styles$z,
             baseClass: iconClass
         });
@@ -19324,7 +19261,7 @@
     };
 
     // prettier-ignore
-    const template$e = html `
+    const template$f = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19443,7 +19380,7 @@
     applyMixins(Banner, ARIAGlobalStatesAndProperties);
     const nimbleBanner = Banner.compose({
         baseName: 'banner',
-        template: template$e,
+        template: template$f,
         styles: styles$B
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
@@ -19898,7 +19835,7 @@
     }
 `;
 
-    const template$d = (context, definition) => html `
+    const template$e = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -19973,7 +19910,7 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$d,
+        template: template$e,
         styles: styles$u,
         shadowOptions: {
             delegatesFocus: true
@@ -20264,17 +20201,13 @@
         color: ${failColor};
         width: 100%;
         position: absolute;
-        top: ${controlHeight};
+        bottom: calc(-1 * ${errorTextFontLineHeight});
         left: 0px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
 
-    :host([error-visible][readonly]:not([disabled])) .error-text {
-        top: calc(${controlHeight} - ${borderWidth});
-    }
-
     :host([error-visible]) .error-text:empty {
         display: none;
     }
@@ -20679,7 +20612,7 @@
             }
         `));
 
-    const template$c = html `
+    const template$d = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -20805,7 +20738,7 @@
     applyMixins(Dialog, ARIAGlobalStatesAndProperties);
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
-        template: template$c,
+        template: template$d,
         styles: styles$q,
         baseClass: Dialog
     });
@@ -20965,7 +20898,7 @@
             }
         `));
 
-    const template$b = html `
+    const template$c = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -21079,7 +21012,7 @@
     applyMixins(Drawer, ARIAGlobalStatesAndProperties);
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
-        template: template$b,
+        template: template$c,
         styles: styles$p
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
@@ -23037,7 +22970,7 @@
 `;
 
     // prettier-ignore
-    const template$a = html `
+    const template$b = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -23292,7 +23225,7 @@
     ], MenuButton.prototype, "slottedMenus", void 0);
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
-        template: template$a,
+        template: template$b,
         styles: styles$m,
         shadowOptions: {
             delegatesFocus: true
@@ -24056,7 +23989,7 @@
             }
         `));
 
-    const template$9 = html `
+    const template$a = html `
     <template role="progressbar">
         <div class="container">
             <div class="bit1"></div>
@@ -24073,7 +24006,7 @@
     }
     const nimbleSpinner = Spinner.compose({
         baseName: 'spinner',
-        template: template$9,
+        template: template$a,
         styles: styles$g
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
@@ -24242,7 +24175,7 @@
         `));
 
     // prettier-ignore
-    const template$8 = html `
+    const template$9 = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -24286,7 +24219,7 @@
     const nimbleSwitch = Switch.compose({
         baseClass: Switch$1,
         baseName: 'switch',
-        template: template$8,
+        template: template$9,
         styles: styles$f
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
@@ -27688,7 +27621,7 @@
 `;
 
     // prettier-ignore
-    const template$7 = html `
+    const template$8 = html `
     <template role="columnheader" aria-sort="${x => x.ariaSort}">
         <slot></slot>
 
@@ -27738,7 +27671,7 @@
     ], TableHeader.prototype, "firstSortedColumn", void 0);
     const nimbleTableHeader = TableHeader.compose({
         baseName: 'table-header',
-        template: template$7,
+        template: template$8,
         styles: styles$c
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
@@ -27794,7 +27727,7 @@
 `;
 
     // prettier-ignore
-    const template$6 = html `
+    const template$7 = html `
     <template role="cell">
         <div ${ref('cellContentContainer')} class="cell-content-container"></div>
 
@@ -27880,14 +27813,14 @@
     ], TableCell.prototype, "actionMenuLabel", void 0);
     const nimbleTableCell = TableCell.compose({
         baseName: 'table-cell',
-        template: template$6,
+        template: template$7,
         styles: styles$a
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
     const tableCellTag = DesignSystem.tagFor(TableCell);
 
     // prettier-ignore
-    const template$5 = html `
+    const template$6 = html `
     <template role="row">
         ${repeat(x => x.columnStates, html `
             ${when(x => !x.column.columnHidden, html `
@@ -27987,14 +27920,14 @@
     ], TableRow.prototype, "columnStates", null);
     const nimbleTableRow = TableRow.compose({
         baseName: 'table-row',
-        template: template$5,
+        template: template$6,
         styles: styles$b
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
     const tableRowTag = DesignSystem.tagFor(TableRow);
 
     // prettier-ignore
-    const template$4 = html `
+    const template$5 = html `
     <template role="table" ${children$1({ property: 'childItems', filter: elements() })}>
         <div class="table-container" style="
             --ni-private-table-scroll-x: -${x => x.scrollX}px;
@@ -29213,7 +29146,7 @@
     ], Table.prototype, "firstSortedColumn", void 0);
     const nimbleTable = Table.compose({
         baseName: 'table',
-        template: template$4,
+        template: template$5,
         styles: styles$d
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
@@ -29231,7 +29164,7 @@
     }
 `;
 
-    const template$3 = html `
+    const template$4 = html `
     <template>
         <span class="header-content">
             <slot></slot>
@@ -29347,7 +29280,7 @@
     }
     const nimbleTableColumnText = TableColumnText.compose({
         baseName: 'table-column-text',
-        template: template$3,
+        template: template$4,
         styles: styles$9
     });
     DesignSystem.getOrCreate()
@@ -29419,7 +29352,7 @@
     }
 `;
 
-    const template$2 = html `
+    const template$3 = html `
     <template slot="end">
         <div class="separator"></div>
         <slot></slot>
@@ -29433,7 +29366,7 @@
     }
     const nimbleTabsToolbar = TabsToolbar.compose({
         baseName: 'tabs-toolbar',
-        template: template$2,
+        template: template$3,
         styles: styles$7
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
@@ -29446,6 +29379,7 @@
 
     const styles$6 = css `
     ${display('inline-flex')}
+    ${styles$s}
 
     :host {
         font: ${bodyFont};
@@ -29454,6 +29388,7 @@
         color: ${bodyFontColor};
         flex-direction: column;
         vertical-align: top;
+        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
     }
 
     :host([disabled]) {
@@ -29470,10 +29405,47 @@
         color: ${controlLabelDisabledFontColor};
     }
 
+    .container {
+        display: flex;
+        justify-content: center;
+        position: relative;
+        height: 100%;
+        width: 100%;
+    }
+
+    .container::after {
+        content: ' ';
+        position: absolute;
+        bottom: calc(-1 * ${borderWidth});
+        width: 0px;
+        height: 0px;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-hover-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        .container::after {
+            transition-duration: 0s;
+        }
+    }
+
+    :host([error-visible]) .container::after {
+        border-bottom-color: ${failColor};
+    }
+
+    :host(:hover) .container::after {
+        width: 100%;
+    }
+
+    :host([disabled]:hover) .container::after,
+    :host([readonly]:hover) .container::after {
+        width: 0px;
+    }
+
     .control {
         -webkit-appearance: none;
         font: inherit;
-        width: 100%;
         flex-grow: 1;
         outline: none;
         box-sizing: border-box;
@@ -29482,8 +29454,13 @@
         border-radius: 0px;
         align-items: flex-end;
         border: ${borderWidth} solid transparent;
+        min-width: 100px;
+        min-height: calc(${iconSize} + ${standardPadding});
         padding: 8px;
-        transition: box-shadow ${smallDelay}, border ${smallDelay};
+        ${
+/* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''}
+        padding-right: calc(${iconSize});
+        margin: 0px;
         resize: none;
     }
 
@@ -29493,13 +29470,8 @@
         }
     }
 
-    .control:hover {
-        border-color: ${borderHoverColor};
-        box-shadow: 0px 0px 0px 1px ${borderHoverColor};
-    }
-
     .control:focus-within {
-        border-color: ${borderHoverColor};
+        border-bottom-color: ${borderHoverColor};
     }
 
     .control[readonly],
@@ -29508,23 +29480,22 @@
     .control[disabled],
     .control[disabled]:hover {
         border-color: rgba(${borderRgbPartialColor}, 0.1);
-        box-shadow: none;
     }
 
-    .control::placeholder {
-        color: ${controlLabelFontColor};
+    :host([error-visible]) .control {
+        border-bottom-color: ${failColor};
     }
 
-    .control[disabled]::placeholder {
-        color: ${controlLabelDisabledFontColor};
+    :host([error-visible]) .control[readonly]:hover:focus-within {
+        border-bottom-color: ${failColor};
     }
 
-    :host([cols]) .control {
-        width: auto;
+    .control::placeholder {
+        color: ${controlLabelFontColor};
     }
 
-    :host([rows]) .control {
-        flex: none;
+    .control[disabled]::placeholder {
+        color: ${controlLabelDisabledFontColor};
     }
 
     :host([resize='both']) .control {
@@ -29536,6 +29507,17 @@
     :host([resize='vertical']) .control {
         resize: vertical;
     }
+
+    :host([error-visible]) .error-icon {
+        display: none;
+    }
+
+    :host([error-visible]) .error-icon.scrollbar-width-calculated {
+        display: inline-flex;
+        position: absolute;
+        top: calc(${standardPadding} / 2);
+        right: var(--ni-private-scrollbar-width);
+    }
 `.withBehaviors(appearanceBehavior(TextAreaAppearance.outline, css `
             .control {
                 border-color: rgba(${borderRgbPartialColor}, 0.3);
@@ -29554,8 +29536,71 @@
                 border-color: transparent;
                 background-color: rgba(${borderRgbPartialColor}, 0.1);
             }
+
+            :host([error-visible][disabled]) .control {
+                border-bottom-color: ${failColor};
+            }
         `));
 
+    const template$2 = () => html `
+    <label
+        part="label"
+        for="control"
+        class="${x => (x.defaultSlottedNodes?.length ? 'label' : 'label label__hidden')}"
+    >
+        <slot ${slotted('defaultSlottedNodes')}></slot>
+    </label>
+    <div class="container">
+        <textarea
+            part="control"
+            class="control"
+            id="control"
+            ?autofocus="${x => x.autofocus}"
+            cols="${x => x.cols}"
+            ?disabled="${x => x.disabled}"
+            form="${x => x.form}"
+            list="${x => x.list}"
+            maxlength="${x => x.maxlength}"
+            minlength="${x => x.minlength}"
+            name="${x => x.name}"
+            placeholder="${x => x.placeholder}"
+            ?readonly="${x => x.readOnly}"
+            ?required="${x => x.required}"
+            rows="${x => x.rows}"
+            ?spellcheck="${x => x.spellcheck}"
+            :value="${x => x.value}"
+            aria-atomic="${x => x.ariaAtomic}"
+            aria-busy="${x => x.ariaBusy}"
+            aria-controls="${x => x.ariaControls}"
+            aria-current="${x => x.ariaCurrent}"
+            aria-describedby="${x => x.ariaDescribedby}"
+            aria-details="${x => x.ariaDetails}"
+            aria-disabled="${x => x.ariaDisabled}"
+            aria-errormessage="${x => x.ariaErrormessage}"
+            aria-flowto="${x => x.ariaFlowto}"
+            aria-haspopup="${x => x.ariaHaspopup}"
+            aria-hidden="${x => x.ariaHidden}"
+            aria-invalid="${x => x.ariaInvalid}"
+            aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+            aria-label="${x => x.ariaLabel}"
+            aria-labelledby="${x => x.ariaLabelledby}"
+            aria-live="${x => x.ariaLive}"
+            aria-owns="${x => x.ariaOwns}"
+            aria-relevant="${x => x.ariaRelevant}"
+            aria-roledescription="${x => x.ariaRoledescription}"
+            @input="${x => x.onTextAreaInput()}"
+            @change="${x => x.handleChange()}"
+            ${ref('control')}
+        ></textarea>
+        <${iconExclamationMarkTag}
+            severity="error"
+            class="error-icon ${x => (x.scrollbarWidth >= 0 ? 'scrollbar-width-calculated' : '')}"
+            style="--ni-private-scrollbar-width: ${x => x.scrollbarWidth}px;"
+        ></${iconExclamationMarkTag}>
+        ${errorTextTemplate}
+    </div>
+`;
+
     /**
      * A nimble-styed HTML text area
      */
@@ -29570,15 +29615,96 @@
              * HTML Attribute: appearance
              */
             this.appearance = TextAreaAppearance.outline;
+            /**
+             * Whether to display the error state.
+             *
+             * @public
+             * @remarks
+             * HTML Attribute: error-visible
+             */
+            this.errorVisible = false;
+            /**
+             * The width of the vertical scrollbar, if displayed.
+             * @internal
+             */
+            this.scrollbarWidth = -1;
+            this.updateScrollbarWidthQueued = false;
+        }
+        /**
+         * @internal
+         */
+        connectedCallback() {
+            super.connectedCallback();
+            this.resizeObserver = new ResizeObserver(() => this.onResize());
+            this.resizeObserver.observe(this);
+        }
+        /**
+         * @internal
+         */
+        disconnectedCallback() {
+            this.resizeObserver?.disconnect();
+        }
+        /**
+         * @internal
+         */
+        onTextAreaInput() {
+            this.handleTextInput();
+            this.queueUpdateScrollbarWidth();
+        }
+        // If a property can affect whether a scrollbar is visible, we need to
+        // call queueUpdateScrollbarWidth() when it changes. The exceptions are
+        // properties that affect size (e.g. height, width, cols, rows), because
+        // we already have a ResizeObserver handling those changes. Also,
+        // a change to errorVisible cannot cause scrollbar visibility to change,
+        // because we always reserve space for the error icon.
+        /**
+         * @internal
+         */
+        placeholderChanged() {
+            this.queueUpdateScrollbarWidth();
+        }
+        /**
+         * @internal
+         */
+        valueChanged(previous, next) {
+            super.valueChanged(previous, next);
+            this.queueUpdateScrollbarWidth();
+        }
+        onResize() {
+            // Do this directly instead of calling updateScrollbarWidth, b/c we don't want to
+            // interfere with queue.
+            this.scrollbarWidth = this.control.offsetWidth - this.control.clientWidth;
+        }
+        queueUpdateScrollbarWidth() {
+            if (!this.$fastController.isConnected) {
+                return;
+            }
+            if (!this.updateScrollbarWidthQueued) {
+                this.updateScrollbarWidthQueued = true;
+                DOM.queueUpdate(() => this.updateScrollbarWidth());
+            }
+        }
+        updateScrollbarWidth() {
+            this.updateScrollbarWidthQueued = false;
+            this.scrollbarWidth = this.control.offsetWidth - this.control.clientWidth;
         }
     }
     __decorate$1([
         attr
     ], TextArea.prototype, "appearance", void 0);
+    __decorate$1([
+        attr({ attribute: 'error-text' })
+    ], TextArea.prototype, "errorText", void 0);
+    __decorate$1([
+        attr({ attribute: 'error-visible', mode: 'boolean' })
+    ], TextArea.prototype, "errorVisible", void 0);
+    __decorate$1([
+        observable
+    ], TextArea.prototype, "scrollbarWidth", void 0);
     const nimbleTextArea = TextArea.compose({
         baseName: 'text-area',
         baseClass: TextArea$1,
-        template: textAreaTemplate,
+        template: template$2,
         styles: styles$6,
         shadowOptions: {
             delegatesFocus: true