@ni/nimble-components 18.8.4 → 18.9.1

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,9 +16744,9 @@
         return `${prefix}${uniqueIdCounter++}`;
     }
 
-    const template$l = html `<slot></slot>`;
+    const template$n = html `<slot></slot>`;
 
-    const styles$K = css `
+    const styles$L = css `
     :host {
         display: contents;
     }
@@ -16865,8 +16802,8 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$K,
-        template: template$l
+        styles: styles$L,
+        template: template$n
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -17050,7 +16987,7 @@
         }
     }
 
-    const styles$J = css `
+    const styles$K = css `
     ${display('inline')}
 
     :host {
@@ -17133,7 +17070,7 @@
 `;
 
     // prettier-ignore
-    const template$k = (context, definition) => html `
+    const template$m = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17206,8 +17143,8 @@
     const nimbleAnchor = Anchor.compose({
         baseName: 'anchor',
         baseClass: Anchor$1,
-        template: template$k,
-        styles: styles$J,
+        template: template$m,
+        styles: styles$K,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17293,7 +17230,7 @@
         return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
     }
 
-    const styles$I = css `
+    const styles$J = css `
     ${display('inline-flex')}
 
     :host {
@@ -17574,8 +17511,8 @@
             }
         `));
 
-    const styles$H = css `
-    ${styles$I}
+    const styles$I = css `
+    ${styles$J}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17583,7 +17520,7 @@
     }
 `;
 
-    const template$j = (context, definition) => html `
+    const template$l = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17665,8 +17602,8 @@
     ], AnchorButton.prototype, "disabled", void 0);
     const nimbleAnchorButton = AnchorButton.compose({
         baseName: 'anchor-button',
-        template: template$j,
-        styles: styles$H,
+        template: template$l,
+        styles: styles$I,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17674,7 +17611,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
     DesignSystem.tagFor(AnchorButton);
 
-    const styles$G = css `
+    const styles$H = css `
     ${display('grid')}
 
     :host {
@@ -17751,7 +17688,7 @@
     }
 `;
 
-    const template$i = (context, definition) => html `
+    const template$k = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17856,8 +17793,8 @@
     ], AnchorMenuItem.prototype, "startColumnCount", void 0);
     const nimbleAnchorMenuItem = AnchorMenuItem.compose({
         baseName: 'anchor-menu-item',
-        template: template$i,
-        styles: styles$G,
+        template: template$k,
+        styles: styles$H,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17882,7 +17819,7 @@
         }
     });
 
-    const styles$F = css `
+    const styles$G = css `
     ${display('inline-flex')}
 
     :host {
@@ -17988,8 +17925,8 @@
     }
 `;
 
-    const styles$E = css `
-    ${styles$F}
+    const styles$F = css `
+    ${styles$G}
 
     a {
         text-decoration: none;
@@ -17999,7 +17936,7 @@
     }
 `;
 
-    const template$h = () => html `
+    const template$j = () => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -18037,13 +17974,13 @@
     ], AnchorTab.prototype, "disabled", void 0);
     const nimbleAnchorTab = AnchorTab.compose({
         baseName: 'anchor-tab',
-        template: template$h,
-        styles: styles$E
+        template: template$j,
+        styles: styles$F
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
     DesignSystem.tagFor(AnchorTab);
 
-    const styles$D = css `
+    const styles$E = css `
     ${display('grid')}
 
     :host {
@@ -18061,7 +17998,7 @@
     }
 `;
 
-    const template$g = (context, definition) => html `
+    const template$i = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18258,8 +18195,8 @@
     applyMixins(AnchorTabs, StartEnd);
     const nimbleAnchorTabs = AnchorTabs.compose({
         baseName: 'anchor-tabs',
-        template: template$g,
-        styles: styles$D,
+        template: template$i,
+        styles: styles$E,
         shadowOptions: {
             delegatesFocus: false
         }
@@ -18267,7 +18204,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
     DesignSystem.tagFor(AnchorTabs);
 
-    const styles$C = css `
+    const styles$D = css `
     :host {
         contain: layout;
         display: block;
@@ -18291,7 +18228,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$C
+        styles: styles$D
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -18371,7 +18308,7 @@
      */
     const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-    const styles$B = css `
+    const styles$C = css `
     ${display('flex')}
 
     :host {
@@ -18529,8 +18466,8 @@
             }
         `));
 
-    const styles$A = css `
-    ${styles$I}
+    const styles$B = css `
+    ${styles$J}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18576,7 +18513,7 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$A,
+        styles: styles$B,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -19198,13 +19135,13 @@
         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$h = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;
 
-    const styles$z = css `
+    const styles$A = css `
     ${display('inline-flex')}
 
     :host {
@@ -19257,8 +19194,8 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$f,
-            styles: styles$z,
+            template: template$h,
+            styles: styles$A,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19324,7 +19261,7 @@
     };
 
     // prettier-ignore
-    const template$e = html `
+    const template$g = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19443,13 +19380,13 @@
     applyMixins(Banner, ARIAGlobalStatesAndProperties);
     const nimbleBanner = Banner.compose({
         baseName: 'banner',
-        template: template$e,
-        styles: styles$B
+        template: template$g,
+        styles: styles$C
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
     DesignSystem.tagFor(Banner);
 
-    const styles$y = css `
+    const styles$z = css `
     ${display('inline-block')}
 
     :host {
@@ -19490,12 +19427,12 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$y
+        styles: styles$z
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
     DesignSystem.tagFor(Breadcrumb);
 
-    const styles$x = css `
+    const styles$y = css `
     ${display('inline-flex')}
 
     :host {
@@ -19571,7 +19508,7 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$x,
+        styles: styles$y,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
@@ -19579,7 +19516,7 @@
         .register(nimbleBreadcrumbItem());
     DesignSystem.tagFor(BreadcrumbItem);
 
-    const styles$w = css `
+    const styles$x = css `
     ${display('inline-flex')}
 
     :host {
@@ -19738,7 +19675,7 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$w,
+        styles: styles$x,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -19746,7 +19683,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
     DesignSystem.tagFor(CardButton);
 
-    const styles$v = css `
+    const styles$w = css `
     ${display('inline-flex')}
 
     :host {
@@ -19864,15 +19801,15 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$v,
+        styles: styles$w,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
     DesignSystem.tagFor(Checkbox);
 
-    const styles$u = css `
-    ${styles$I}
+    const styles$v = css `
+    ${styles$J}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -19898,7 +19835,7 @@
     }
 `;
 
-    const template$d = (context, definition) => html `
+    const template$f = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -19973,8 +19910,8 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$d,
-        styles: styles$u,
+        template: template$f,
+        styles: styles$v,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -20006,7 +19943,7 @@
         block: 'block'
     };
 
-    const styles$t = css `
+    const styles$u = css `
     ${display('inline-flex')}
 
     :host {
@@ -20242,7 +20179,7 @@
             }
         `));
 
-    const styles$s = css `
+    const styles$t = css `
     .error-icon {
         display: none;
     }
@@ -20264,25 +20201,21 @@
         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;
     }
 `;
 
-    const styles$r = css `
+    const styles$s = css `
+    ${styles$u}
     ${styles$t}
-    ${styles$s}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -20518,7 +20451,7 @@
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$r,
+        styles: styles$s,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -20563,7 +20496,7 @@
      */
     const UserDismissed = Symbol('user dismissed');
 
-    const styles$q = css `
+    const styles$r = css `
     ${display('grid')}
 
     dialog {
@@ -20679,7 +20612,7 @@
             }
         `));
 
-    const template$c = html `
+    const template$e = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -20805,14 +20738,14 @@
     applyMixins(Dialog, ARIAGlobalStatesAndProperties);
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
-        template: template$c,
-        styles: styles$q,
+        template: template$e,
+        styles: styles$r,
         baseClass: Dialog
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
     DesignSystem.tagFor(Dialog);
 
-    const styles$p = css `
+    const styles$q = css `
     ${display('block')}
 
     :host {
@@ -20965,7 +20898,7 @@
             }
         `));
 
-    const template$b = html `
+    const template$d = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -21079,8 +21012,8 @@
     applyMixins(Drawer, ARIAGlobalStatesAndProperties);
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
-        template: template$b,
-        styles: styles$p
+        template: template$d,
+        styles: styles$q
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
     DesignSystem.tagFor(Drawer);
@@ -22861,7 +22794,7 @@
     registerIcon('icon-xmark-check', IconXmarkCheck);
     DesignSystem.tagFor(IconXmarkCheck);
 
-    const styles$o = css `
+    const styles$p = css `
     ${display('flex')}
 
     :host {
@@ -22941,12 +22874,12 @@
         baseName: 'list-option',
         baseClass: ListboxOption,
         template: listboxOptionTemplate,
-        styles: styles$o
+        styles: styles$p
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
     DesignSystem.tagFor(ListOption);
 
-    const styles$n = css `
+    const styles$o = css `
     ${display('grid')}
 
     :host {
@@ -23013,12 +22946,12 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$n
+        styles: styles$o
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
     DesignSystem.tagFor(Menu);
 
-    const styles$m = css `
+    const styles$n = css `
     ${display('inline-block')}
 
     :host {
@@ -23037,7 +22970,7 @@
 `;
 
     // prettier-ignore
-    const template$a = html `
+    const template$c = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -23292,8 +23225,8 @@
     ], MenuButton.prototype, "slottedMenus", void 0);
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
-        template: template$a,
-        styles: styles$m,
+        template: template$c,
+        styles: styles$n,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -23301,7 +23234,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
     const menuButtonTag = DesignSystem.tagFor(MenuButton);
 
-    const styles$l = css `
+    const styles$m = css `
     ${display('grid')}
 
     :host {
@@ -23399,7 +23332,7 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$l,
+        styles: styles$m,
         expandCollapseGlyph: arrowExpanderRight16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -23414,9 +23347,9 @@
         block: 'block'
     };
 
-    const styles$k = css `
+    const styles$l = css `
     ${display('inline-block')}
-    ${styles$s}
+    ${styles$t}
 
     :host {
         font: ${bodyFont};
@@ -23630,7 +23563,7 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$k,
+        styles: styles$l,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -23672,7 +23605,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
     DesignSystem.tagFor(NumberField);
 
-    const styles$j = css `
+    const styles$k = css `
     ${display('inline-flex')}
 
     :host {
@@ -23772,13 +23705,13 @@
         baseName: 'radio',
         baseClass: Radio$1,
         template: radioTemplate,
-        styles: styles$j,
+        styles: styles$k,
         checkedIndicator: circleFilled16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
     DesignSystem.tagFor(Radio);
 
-    const styles$i = css `
+    const styles$j = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -23813,7 +23746,7 @@
         baseName: 'radio-group',
         baseClass: RadioGroup$1,
         template: radioGroupTemplate,
-        styles: styles$i,
+        styles: styles$j,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -23821,9 +23754,9 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());
     DesignSystem.tagFor(RadioGroup);
 
-    const styles$h = css `
+    const styles$i = css `
+    ${styles$u}
     ${styles$t}
-    ${styles$s}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -23899,7 +23832,7 @@
         baseName: 'select',
         baseClass: Select$1,
         template: selectTemplate,
-        styles: styles$h,
+        styles: styles$i,
         indicator: arrowExpanderDown16X16.data,
         end: html `
         <${iconExclamationMarkTag}
@@ -23912,7 +23845,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
     DesignSystem.tagFor(Select);
 
-    const styles$g = css `
+    const styles$h = css `
     ${display('inline-flex')}
 
     :host {
@@ -24056,7 +23989,7 @@
             }
         `));
 
-    const template$9 = html `
+    const template$b = html `
     <template role="progressbar">
         <div class="container">
             <div class="bit1"></div>
@@ -24073,13 +24006,13 @@
     }
     const nimbleSpinner = Spinner.compose({
         baseName: 'spinner',
-        template: template$9,
-        styles: styles$g
+        template: template$b,
+        styles: styles$h
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
     DesignSystem.tagFor(Spinner);
 
-    const styles$f = css `
+    const styles$g = css `
     ${display('inline-flex')}
 
     :host {
@@ -24242,7 +24175,7 @@
         `));
 
     // prettier-ignore
-    const template$8 = html `
+    const template$a = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -24286,8 +24219,8 @@
     const nimbleSwitch = Switch.compose({
         baseClass: Switch$1,
         baseName: 'switch',
-        template: template$8,
-        styles: styles$f
+        template: template$a,
+        styles: styles$g
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
     DesignSystem.tagFor(Switch);
@@ -24301,12 +24234,12 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$F
+        styles: styles$G
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
     DesignSystem.tagFor(Tab);
 
-    const styles$e = css `
+    const styles$f = css `
     ${display('block')}
 
     :host {
@@ -24326,7 +24259,7 @@
         baseName: 'tab-panel',
         baseClass: TabPanel$1,
         template: tabPanelTemplate,
-        styles: styles$e
+        styles: styles$f
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
     DesignSystem.tagFor(TabPanel);
@@ -27360,6 +27293,31 @@
       });
     }
 
+    // prettier-ignore
+    const template$9 = html `
+    <template role="cell">
+        ${x => x.cellViewTemplate}
+        ${when(x => x.hasActionMenu, html `
+            <${menuButtonTag} ${ref('actionMenuButton')}
+                content-hidden
+                appearance="${ButtonAppearance.ghost}"
+                @beforetoggle="${(x, c) => x.onActionMenuBeforeToggle(c.event)}"
+                @toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
+                class="action-menu"
+            >
+                <${iconThreeDotsLineTag} slot="start"></${iconThreeDotsLineTag}>
+                ${x => x.actionMenuLabel}
+                <slot name="cellActionMenu" slot="menu"></slot>
+            </${menuButtonTag}>
+        `)}
+    </template>
+`;
+    const createCellViewTemplate = (cellViewTag) => html `<${cellViewTag} class="cell-view"
+        :cellRecord="${y => y.cellState?.cellRecord}"
+        :columnConfig="${y => y.cellState?.columnConfig}"
+    >
+    </${cellViewTag}>`;
+
     /**
      * The possible directions a table column can be sorted in.
      */
@@ -27433,6 +27391,11 @@
             super.connectedCallback();
             this.setAttribute('slot', this.internalUniqueId);
         }
+        cellViewTagChanged() {
+            this.currentCellViewTemplate = this.cellViewTag
+                ? createCellViewTemplate(this.cellViewTag)
+                : undefined;
+        }
         internalFractionalWidthChanged() {
             this.currentFractionalWidth = this.internalFractionalWidth;
         }
@@ -27473,6 +27436,12 @@
     __decorate$1([
         observable
     ], TableColumn.prototype, "internalMinPixelWidth", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "cellViewTag", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "currentCellViewTemplate", void 0);
     __decorate$1([
         observable
     ], TableColumn.prototype, "dataRecordFieldNames", void 0);
@@ -27573,7 +27542,7 @@
         }
     }
 
-    const styles$d = css `
+    const styles$e = css `
     ${display('flex')}
 
     :host {
@@ -27669,7 +27638,7 @@
             }
         `));
 
-    const styles$c = css `
+    const styles$d = css `
     ${display('flex')}
 
     :host {
@@ -27688,7 +27657,7 @@
 `;
 
     // prettier-ignore
-    const template$7 = html `
+    const template$8 = html `
     <template role="columnheader" aria-sort="${x => x.ariaSort}">
         <slot></slot>
 
@@ -27738,13 +27707,13 @@
     ], TableHeader.prototype, "firstSortedColumn", void 0);
     const nimbleTableHeader = TableHeader.compose({
         baseName: 'table-header',
-        template: template$7,
-        styles: styles$c
+        template: template$8,
+        styles: styles$d
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
     const tableHeaderTag = DesignSystem.tagFor(TableHeader);
 
-    const styles$b = css `
+    const styles$c = css `
     ${display('grid')}
 
     :host {
@@ -27770,7 +27739,7 @@
     }
 `;
 
-    const styles$a = css `
+    const styles$b = css `
     ${display('grid')}
 
     :host {
@@ -27782,7 +27751,7 @@
         --ni-private-table-cell-action-menu-display: block;
     }
 
-    .cell-content-container {
+    .cell-view {
         overflow: hidden;
         display: flex;
         align-items: center;
@@ -27793,27 +27762,6 @@
     }
 `;
 
-    // prettier-ignore
-    const template$6 = html `
-    <template role="cell">
-        <div ${ref('cellContentContainer')} class="cell-content-container"></div>
-
-        ${when(x => x.hasActionMenu, html `
-            <${menuButtonTag}
-                content-hidden
-                appearance="${ButtonAppearance.ghost}"
-                @beforetoggle="${(x, c) => x.onActionMenuBeforeToggle(c.event)}"
-                @toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
-                class="action-menu"
-            >
-                <${iconThreeDotsLineTag} slot="start"></${iconThreeDotsLineTag}>
-                ${x => x.actionMenuLabel}
-                <slot name="cellActionMenu" slot="menu"></slot>
-            </${menuButtonTag}>
-        `)}
-    </template>
-`;
-
     /**
      * A styled cell that is used within the nimble-table-row.
      * @internal
@@ -27823,18 +27771,6 @@
             super(...arguments);
             this.hasActionMenu = false;
             this.menuOpen = false;
-            this.customCellView = undefined;
-        }
-        connectedCallback() {
-            super.connectedCallback();
-            this.customCellView = this.cellTemplate?.render(this.cellState, this.cellContentContainer);
-        }
-        disconnectedCallback() {
-            super.disconnectedCallback();
-            if (this.customCellView) {
-                this.customCellView.dispose();
-                this.customCellView = undefined;
-            }
         }
         onActionMenuBeforeToggle(event) {
             this.$emit('cell-action-menu-beforetoggle', event.detail);
@@ -27843,32 +27779,10 @@
             this.menuOpen = event.detail.newState;
             this.$emit('cell-action-menu-toggle', event.detail);
         }
-        cellStateChanged() {
-            this.customCellView?.bind(this.cellState, defaultExecutionContext);
-        }
-        cellTemplateChanged() {
-            if (this.$fastController.isConnected) {
-                this.customCellView = this.cellTemplate?.render(this.cellState, this.cellContentContainer);
-            }
-        }
-        cellStylesChanged(prev, next) {
-            if (prev) {
-                this.$fastController.removeStyles(prev);
-            }
-            if (next) {
-                this.$fastController.addStyles(next);
-            }
-        }
     }
     __decorate$1([
         observable
     ], TableCell.prototype, "cellState", void 0);
-    __decorate$1([
-        observable
-    ], TableCell.prototype, "cellTemplate", void 0);
-    __decorate$1([
-        observable
-    ], TableCell.prototype, "cellStyles", void 0);
     __decorate$1([
         attr({ attribute: 'has-action-menu', mode: 'boolean' })
     ], TableCell.prototype, "hasActionMenu", void 0);
@@ -27878,24 +27792,26 @@
     __decorate$1([
         attr({ attribute: 'action-menu-label' })
     ], TableCell.prototype, "actionMenuLabel", void 0);
+    __decorate$1([
+        observable
+    ], TableCell.prototype, "cellViewTemplate", void 0);
     const nimbleTableCell = TableCell.compose({
         baseName: 'table-cell',
-        template: template$6,
-        styles: styles$a
+        template: template$9,
+        styles: styles$b
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
     const tableCellTag = DesignSystem.tagFor(TableCell);
 
     // prettier-ignore
-    const template$5 = html `
+    const template$7 = html `
     <template role="row">
         ${repeat(x => x.columnStates, html `
             ${when(x => !x.column.columnHidden, html `
                 <${tableCellTag}
                     class="cell"
-                    :cellTemplate="${x => x.column.cellTemplate}"
-                    :cellStyles="${x => x.column.cellStyles}"
                     :cellState="${x => x.cellState}"
+                    :cellViewTemplate="${x => x.column.currentCellViewTemplate}"
                     ?has-action-menu="${x => !!x.column.actionMenuSlot}"
                     action-menu-label="${x => x.column.actionMenuLabel}"
                     @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x.column)}"
@@ -27954,6 +27870,14 @@
             this.menuOpen = event.detail.newState;
             this.emitToggleEvent('row-action-menu-toggle', event.detail, column);
         }
+        closeOpenActionMenus() {
+            if (this.menuOpen) {
+                const cellWithMenuOpen = Array.from(this.shadowRoot.children).find(c => c instanceof TableCell && c.menuOpen);
+                if (cellWithMenuOpen?.actionMenuButton?.open) {
+                    cellWithMenuOpen.actionMenuButton.toggleButton.control.click();
+                }
+            }
+        }
         emitToggleEvent(eventType, menuButtonEventDetail, column) {
             const detail = {
                 newState: menuButtonEventDetail.newState,
@@ -27987,14 +27911,14 @@
     ], TableRow.prototype, "columnStates", null);
     const nimbleTableRow = TableRow.compose({
         baseName: 'table-row',
-        template: template$5,
-        styles: styles$b
+        template: template$7,
+        styles: styles$c
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
     const tableRowTag = DesignSystem.tagFor(TableRow);
 
     // prettier-ignore
-    const template$4 = html `
+    const template$6 = html `
     <template role="table" ${children$1({ property: 'childItems', filter: elements() })}>
         <div class="table-container" style="
             --ni-private-table-scroll-x: -${x => x.scrollX}px;
@@ -28021,7 +27945,7 @@
             </div>
             <div class="table-viewport" ${ref('viewport')}>
                 <div class="table-scroll"></div>
-                <div class="table-row-container" 
+                <div class="table-row-container" ${children$1({ property: 'rowElements', filter: elements(tableRowTag) })}
                      role="rowgroup">
                     ${when(x => x.columns.length > 0 && x.canRenderRows, html `
                         ${repeat(x => x.virtualizer.visibleItems, html `
@@ -28675,6 +28599,25 @@
       };
     }
 
+    /**
+     * Base class for table cell views, which are used within the nimble-table-cell.
+     * Each TableColumn type has a corresponding TableCellView type (linked via TableColumn.cellViewTag).
+     */
+    class TableCellView extends FoundationElement {
+        /**
+         * Called if an element inside this cell view has focus, and this row/cell is being recycled.
+         * Expected implementation is to commit changes as needed, and blur the focusable element (or close
+         * the menu/popup/etc).
+         */
+        focusedRecycleCallback() { }
+    }
+    __decorate$1([
+        observable
+    ], TableCellView.prototype, "cellRecord", void 0);
+    __decorate$1([
+        observable
+    ], TableCellView.prototype, "columnConfig", void 0);
+
     /**
      * Helper class for the nimble-table for row virtualization.
      *
@@ -28739,6 +28682,7 @@
             };
         }
         handleVirtualizerChange() {
+            this.notifyFocusedCellRecycling();
             const virtualizer = this.virtualizer;
             this.visibleItems = virtualizer.getVirtualItems();
             this.allRowsHeight = virtualizer.getTotalSize();
@@ -28753,6 +28697,25 @@
             }
             this.rowContainerYOffset = rowContainerYOffset;
         }
+        notifyFocusedCellRecycling() {
+            let tableFocusedElement = this.table.shadowRoot.activeElement;
+            while (tableFocusedElement !== null
+                && !(tableFocusedElement instanceof TableCellView)) {
+                if (tableFocusedElement.shadowRoot) {
+                    tableFocusedElement = tableFocusedElement.shadowRoot.activeElement;
+                }
+                else {
+                    break;
+                }
+            }
+            if (tableFocusedElement instanceof TableCellView) {
+                tableFocusedElement.focusedRecycleCallback();
+            }
+            if (this.table.openActionMenuRecordId !== undefined) {
+                const activeRow = this.table.rowElements.find(row => row.recordId === this.table.openActionMenuRecordId);
+                activeRow?.closeOpenActionMenus();
+            }
+        }
     }
     __decorate$1([
         observable
@@ -28948,6 +28911,10 @@
              * @internal
              */
             this.childItems = [];
+            /**
+             * @internal
+             */
+            this.rowElements = [];
             /**
              * @internal
              */
@@ -29022,6 +28989,9 @@
         }
         onRowActionMenuToggle(event) {
             this.$emit('action-menu-toggle', event.detail);
+            if (!event.detail.newState) {
+                this.openActionMenuRecordId = undefined;
+            }
         }
         /**
          * @internal
@@ -29193,6 +29163,9 @@
     __decorate$1([
         observable
     ], Table.prototype, "childItems", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "rowElements", void 0);
     __decorate$1([
         observable
     ], Table.prototype, "actionMenuSlots", void 0);
@@ -29213,13 +29186,13 @@
     ], Table.prototype, "firstSortedColumn", void 0);
     const nimbleTable = Table.compose({
         baseName: 'table',
-        template: template$4,
-        styles: styles$d
+        template: template$6,
+        styles: styles$e
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
     DesignSystem.tagFor(Table);
 
-    const styles$9 = css `
+    const styles$a = css `
     :host {
         display: contents;
     }
@@ -29231,7 +29204,7 @@
     }
 `;
 
-    const template$3 = html `
+    const template$5 = html `
     <template>
         <span class="header-content">
             <slot></slot>
@@ -29278,7 +29251,7 @@
         return FractionalWidthColumn;
     }
 
-    const cellStyles = css `
+    const styles$9 = css `
     span {
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -29292,29 +29265,51 @@
     }
 `;
 
-    const getCellContent = (cellState) => {
-        return typeof cellState.cellRecord.value === 'string'
-            ? cellState.cellRecord.value
-            : cellState.columnConfig.placeholder;
-    };
-    const setTitleWhenOverflow = (span, title) => {
-        if (title && span.offsetWidth < span.scrollWidth) {
-            span.setAttribute('title', title);
-        }
-    };
-    const removeTitle = (span) => {
-        span.removeAttribute('title');
-    };
-    const cellTemplate = html `
+    const template$4 = html `
     <span
+        ${ref('textSpan')}
         class="${x => (typeof x.cellRecord.value === 'string' ? '' : 'placeholder')}"
-        @mouseover="${(x, c) => setTitleWhenOverflow(c.event.target, getCellContent(x))}"
-        @mouseout="${(_x, c) => removeTitle(c.event.target)}"
+        @mouseover="${x => {
+    x.isValidContentAndHasOverflow = !!x.content && x.textSpan.offsetWidth < x.textSpan.scrollWidth;
+}}"
+        @mouseout="${x => {
+    x.isValidContentAndHasOverflow = false;
+}}"
+        title=${x => (x.isValidContentAndHasOverflow ? x.content : null)}
     >
-        ${x => getCellContent(x)}
+        ${x => x.content}
     </span>
 `;
 
+    /**
+     * A cell view for displaying strings
+     */
+    class TableColumnTextCellView extends TableCellView {
+        constructor() {
+            super(...arguments);
+            /** @internal */
+            this.isValidContentAndHasOverflow = false;
+        }
+        get content() {
+            return typeof this.cellRecord.value === 'string'
+                ? this.cellRecord.value
+                : this.columnConfig.placeholder;
+        }
+    }
+    __decorate$1([
+        observable
+    ], TableColumnTextCellView.prototype, "isValidContentAndHasOverflow", void 0);
+    __decorate$1([
+        volatile
+    ], TableColumnTextCellView.prototype, "content", null);
+    const textCellView = TableColumnTextCellView.compose({
+        baseName: 'table-column-text-cell-view',
+        template: template$4,
+        styles: styles$9
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
+    const tableColumnTextCellViewTag = DesignSystem.tagFor(TableColumnTextCellView);
+
     /**
      * The base class for a table column for displaying strings.
      */
@@ -29322,8 +29317,7 @@
         constructor() {
             super();
             this.cellRecordFieldNames = ['value'];
-            this.cellStyles = cellStyles;
-            this.cellTemplate = cellTemplate;
+            this.cellViewTag = tableColumnTextCellViewTag;
             this.sortOperation = TableColumnSortOperation.localeAwareCaseSensitive;
         }
         fieldNameChanged() {
@@ -29347,8 +29341,8 @@
     }
     const nimbleTableColumnText = TableColumnText.compose({
         baseName: 'table-column-text',
-        template: template$3,
-        styles: styles$9
+        template: template$5,
+        styles: styles$a
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -29419,7 +29413,7 @@
     }
 `;
 
-    const template$2 = html `
+    const template$3 = html `
     <template slot="end">
         <div class="separator"></div>
         <slot></slot>
@@ -29433,7 +29427,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 +29440,7 @@
 
     const styles$6 = css `
     ${display('inline-flex')}
+    ${styles$t}
 
     :host {
         font: ${bodyFont};
@@ -29454,6 +29449,7 @@
         color: ${bodyFontColor};
         flex-direction: column;
         vertical-align: top;
+        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
     }
 
     :host([disabled]) {
@@ -29470,10 +29466,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 +29515,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 +29531,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 +29541,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 +29568,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 +29597,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 +29676,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
@@ -29599,7 +29786,7 @@
 
     const styles$5 = css `
     ${display('inline-block')}
-    ${styles$s}
+    ${styles$t}
 
     :host {
         font: ${bodyFont};