@ni/nimble-components 18.8.4 → 18.9.1

package/dist/esm/table-column/text/cell-view/index.js

@@ -0,0 +1,35 @@
+import { __decorate } from "tslib";
+import { observable, volatile } from '@microsoft/fast-element';
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { TableCellView } from '../../base/cell-view';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A cell view for displaying strings
+ */
+export 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([
+    observable
+], TableColumnTextCellView.prototype, "isValidContentAndHasOverflow", void 0);
+__decorate([
+    volatile
+], TableColumnTextCellView.prototype, "content", null);
+const textCellView = TableColumnTextCellView.compose({
+    baseName: 'table-column-text-cell-view',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
+export const tableColumnTextCellViewTag = DesignSystem.tagFor(TableColumnTextCellView);
+//# sourceMappingURL=index.js.map

package/dist/esm/table-column/text/cell-view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/text/cell-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAK1D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,uBAAwB,SAAQ,aAG5C;IAHD;;QAII,gBAAgB;QAET,iCAA4B,GAAG,KAAK,CAAC;IAWhD,CAAC;IALG,IAAW,OAAO;QACd,OAAO,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,QAAQ;YAC5C,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;YACvB,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;IACxC,CAAC;CACJ;AAXG;IADC,UAAU;6EACiC;AAM5C;IADC,QAAQ;sDAKR;AAGL,MAAM,YAAY,GAAG,uBAAuB,CAAC,OAAO,CAAC;IACjD,QAAQ,EAAE,6BAA6B;IACvC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,0BAA0B,GAAG,YAAY,CAAC,MAAM,CACzD,uBAAuB,CAC1B,CAAC"}

package/dist/esm/table-column/text/cell-view/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/table-column/text/{styles.js → cell-view/styles.js}

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { bodyFont, bodyFontColor, controlLabelFontColor } from '../../theme-provider/design-tokens';
-export const cellStyles = css `
+import { bodyFont, bodyFontColor, controlLabelFontColor } from '../../../theme-provider/design-tokens';
+export const styles = css `
     span {
         font: ${bodyFont};
         color: ${bodyFontColor};

package/dist/esm/table-column/text/cell-view/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/text/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,QAAQ,EACR,aAAa,EACb,qBAAqB,EACxB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;gBAET,QAAQ;iBACP,aAAa;;;;;;;iBAOb,qBAAqB;;CAErC,CAAC"}

package/dist/esm/table-column/text/cell-view/template.d.ts

@@ -0,0 +1,2 @@
+import type { TableColumnTextCellView } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<TableColumnTextCellView, any>;

package/dist/esm/table-column/text/cell-view/template.js

@@ -0,0 +1,17 @@
+import { html, ref } from '@microsoft/fast-element';
+export const template = html `
+    <span
+        ${ref('textSpan')}
+        class="${x => (typeof x.cellRecord.value === 'string' ? '' : 'placeholder')}"
+        @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 => x.content}
+    </span>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/table-column/text/cell-view/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/text/cell-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAIpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAyB;;UAE3C,GAAG,CAAC,UAAU,CAAC;iBACR,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC;sBAC7D,CAAC,CAAC,EAAE;IAClB,CAAC,CAAC,4BAA4B,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,WAAW,GAAG,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC;AACpG,CAAC;qBACgB,CAAC,CAAC,EAAE;IACjB,CAAC,CAAC,4BAA4B,GAAG,KAAK,CAAC;AAC3C,CAAC;gBACW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;;UAE9D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;;CAEvB,CAAC"}

package/dist/esm/table-column/text/index.d.ts

@@ -12,12 +12,11 @@ declare global {
 /**
  * The base class for a table column for displaying strings.
  */
-declare class TableColumnTextBase extends TableColumn<TableColumnTextCellRecord, TableColumnTextColumnConfig> {
+declare class TableColumnTextBase extends TableColumn<TableColumnTextColumnConfig> {
     cellRecordFieldNames: readonly ["value"];
     fieldName?: string;
     placeholder?: string;
-    readonly cellStyles: import("@microsoft/fast-element").ElementStyles;
-    readonly cellTemplate: import("@microsoft/fast-element").ViewTemplate<import("../base/types").TableCellState<TableColumnTextCellRecord, TableColumnTextColumnConfig>, any>;
+    readonly cellViewTag: string;
     constructor();
     protected fieldNameChanged(): void;
     protected placeholderChanged(): void;

package/dist/esm/table-column/text/index.js

@@ -7,8 +7,7 @@ import { template } from '../base/template';
 import { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';
 import { TableColumn } from '../base';
 import { TableColumnSortOperation } from '../base/types';
-import { cellStyles } from './styles';
-import { cellTemplate } from './template';
+import { tableColumnTextCellViewTag } from './cell-view';
 /**
  * The base class for a table column for displaying strings.
  */
@@ -16,8 +15,7 @@ class TableColumnTextBase extends TableColumn {
     constructor() {
         super();
         this.cellRecordFieldNames = ['value'];
-        this.cellStyles = cellStyles;
-        this.cellTemplate = cellTemplate;
+        this.cellViewTag = tableColumnTextCellViewTag;
         this.sortOperation = TableColumnSortOperation.localeAwareCaseSensitive;
     }
     fieldNameChanged() {

package/dist/esm/table-column/text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/text/index.ts"],"names":[],"mappings":";AAAA,yCAAyC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAa1C;;GAEG;AACH,MAAM,mBAAoB,SAAQ,WAGjC;IAaG;QACI,KAAK,EAAE,CAAC;QAbL,yBAAoB,GAAG,CAAC,OAAO,CAAU,CAAC;QAQjC,eAAU,GAAG,UAAU,CAAC;QAExB,iBAAY,GAAG,YAAY,CAAC;QAIxC,IAAI,CAAC,aAAa,GAAG,wBAAwB,CAAC,wBAAwB,CAAC;IAC3E,CAAC;IAES,gBAAgB;QACtB,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,SAAS,CAAU,CAAC;QACtD,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC,SAAS,CAAC;IACrD,CAAC;IAES,kBAAkB;QACxB,IAAI,CAAC,YAAY,GAAG,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,EAAE,EAAE,CAAC;IAChE,CAAC;CACJ;AAtBG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;sDACR;AAG1B;IADC,IAAI;wDACuB;AAqBhC;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,6BAA6B,CAC9D,mBAAmB,CACtB;CAAG;AAEJ,MAAM,qBAAqB,GAAG,eAAe,CAAC,OAAO,CAAC;IAClD,QAAQ,EAAE,mBAAmB;IAC7B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,qBAAqB,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,MAAM,kBAAkB,GAAG,YAAY,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/text/index.ts"],"names":[],"mappings":";AAAA,yCAAyC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAazD;;GAEG;AACH,MAAM,mBAAoB,SAAQ,WAAwC;IAWtE;QACI,KAAK,EAAE,CAAC;QAXL,yBAAoB,GAAG,CAAC,OAAO,CAAU,CAAC;QAQjC,gBAAW,GAAG,0BAA0B,CAAC;QAIrD,IAAI,CAAC,aAAa,GAAG,wBAAwB,CAAC,wBAAwB,CAAC;IAC3E,CAAC;IAES,gBAAgB;QACtB,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,SAAS,CAAU,CAAC;QACtD,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC,SAAS,CAAC;IACrD,CAAC;IAES,kBAAkB;QACxB,IAAI,CAAC,YAAY,GAAG,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,EAAE,EAAE,CAAC;IAChE,CAAC;CACJ;AApBG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;sDACR;AAG1B;IADC,IAAI;wDACuB;AAmBhC;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,6BAA6B,CAC9D,mBAAmB,CACtB;CAAG;AAEJ,MAAM,qBAAqB,GAAG,eAAe,CAAC,OAAO,CAAC;IAClD,QAAQ,EAAE,mBAAmB;IAC7B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,qBAAqB,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,MAAM,kBAAkB,GAAG,YAAY,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC"}

package/dist/esm/text-area/index.d.ts

@@ -1,4 +1,5 @@
 import { TextArea as FoundationTextArea } from '@microsoft/fast-foundation';
+import type { ErrorPattern } from '../patterns/error/types';
 import { TextAreaAppearance } from './types';
 declare global {
     interface HTMLElementTagNameMap {
@@ -8,7 +9,7 @@ declare global {
 /**
  * A nimble-styed HTML text area
  */
-export declare class TextArea extends FoundationTextArea {
+export declare class TextArea extends FoundationTextArea implements ErrorPattern {
     /**
      * The appearance the text area should have.
      *
@@ -17,5 +18,51 @@ export declare class TextArea extends FoundationTextArea {
      * HTML Attribute: appearance
      */
     appearance: TextAreaAppearance;
+    /**
+     * A message explaining why the value is invalid.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: error-text
+     */
+    errorText?: string;
+    /**
+     * Whether to display the error state.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: error-visible
+     */
+    errorVisible: boolean;
+    /**
+     * The width of the vertical scrollbar, if displayed.
+     * @internal
+     */
+    scrollbarWidth: number;
+    private resizeObserver?;
+    private updateScrollbarWidthQueued;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    onTextAreaInput(): void;
+    /**
+     * @internal
+     */
+    placeholderChanged(): void;
+    /**
+     * @internal
+     */
+    valueChanged(previous: string, next: string): void;
+    private onResize;
+    private queueUpdateScrollbarWidth;
+    private updateScrollbarWidth;
 }
 export declare const textAreaTag: string;

package/dist/esm/text-area/index.js

@@ -1,7 +1,8 @@
 import { __decorate } from "tslib";
-import { attr } from '@microsoft/fast-element';
-import { DesignSystem, TextArea as FoundationTextArea, textAreaTemplate as template } from '@microsoft/fast-foundation';
+import { attr, DOM, observable } from '@microsoft/fast-element';
+import { DesignSystem, TextArea as FoundationTextArea } from '@microsoft/fast-foundation';
 import { styles } from './styles';
+import { template } from './template';
 import { TextAreaAppearance } from './types';
 /**
  * A nimble-styed HTML text area
@@ -17,11 +18,92 @@ export class TextArea extends FoundationTextArea {
          * 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([
     attr
 ], TextArea.prototype, "appearance", void 0);
+__decorate([
+    attr({ attribute: 'error-text' })
+], TextArea.prototype, "errorText", void 0);
+__decorate([
+    attr({ attribute: 'error-visible', mode: 'boolean' })
+], TextArea.prototype, "errorVisible", void 0);
+__decorate([
+    observable
+], TextArea.prototype, "scrollbarWidth", void 0);
 const nimbleTextArea = TextArea.compose({
     baseName: 'text-area',
     baseClass: FoundationTextArea,

package/dist/esm/text-area/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-area/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAC9B,gBAAgB,IAAI,QAAQ,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAQ7C;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;IAAhD;;QACI;;;;;;WAMG;QAEI,eAAU,GAAuB,kBAAkB,CAAC,OAAO,CAAC;IACvE,CAAC;CAAA;AADG;IADC,IAAI;4CAC8D;AAGvE,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-area/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/text-area/styles.js

@@ -1,10 +1,12 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { borderRgbPartialColor, borderHoverColor, borderWidth, smallDelay, bodyFontColor, bodyDisabledFontColor, controlLabelFont, controlLabelFontColor, bodyFont, controlLabelDisabledFontColor } from '../theme-provider/design-tokens';
+import { borderRgbPartialColor, borderHoverColor, borderWidth, smallDelay, bodyFontColor, bodyDisabledFontColor, controlLabelFont, controlLabelFontColor, bodyFont, controlLabelDisabledFontColor, iconSize, failColor, standardPadding } from '../theme-provider/design-tokens';
 import { appearanceBehavior } from '../utilities/style/appearance';
 import { TextAreaAppearance } from './types';
+import { styles as errorStyles } from '../patterns/error/styles';
 export const styles = css `
     ${display('inline-flex')}
+    ${errorStyles}
 
     :host {
         font: ${bodyFont};
@@ -13,6 +15,7 @@ export const styles = css `
         color: ${bodyFontColor};
         flex-direction: column;
         vertical-align: top;
+        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
     }
 
     :host([disabled]) {
@@ -29,10 +32,47 @@ export const styles = css `
         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;
@@ -41,8 +81,13 @@ export const styles = css `
         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;
     }
 
@@ -52,13 +97,8 @@ export const styles = css `
         }
     }
 
-    .control:hover {
-        border-color: ${borderHoverColor};
-        box-shadow: 0px 0px 0px 1px ${borderHoverColor};
-    }
-
     .control:focus-within {
-        border-color: ${borderHoverColor};
+        border-bottom-color: ${borderHoverColor};
     }
 
     .control[readonly],
@@ -67,23 +107,22 @@ export const styles = css `
     .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 {
@@ -95,6 +134,17 @@ export const styles = css `
     :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);
@@ -113,5 +163,9 @@ export const styles = css `
                 border-color: transparent;
                 background-color: rgba(${borderRgbPartialColor}, 0.1);
             }
+
+            :host([error-visible][disabled]) .control {
+                border-bottom-color: ${failColor};
+            }
         `));
 //# sourceMappingURL=styles.js.map

package/dist/esm/text-area/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-area/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACR,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,QAAQ;;;iBAGP,aAAa;;;;;;iBAMb,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;kBAc5B,WAAW;;iCAEI,UAAU,YAAY,UAAU;;;;;;;;;;;wBAWzC,gBAAgB;sCACF,gBAAgB;;;;wBAI9B,gBAAgB;;;;;;;;6BAQX,qBAAqB;;;;;iBAKjC,qBAAqB;;;;iBAIrB,6BAA6B;;;;;;;;;;;;;;;;;;;;CAoB7C,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;qCAE0B,qBAAqB;;;SAGjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;;;;;yCASrB,qBAAqB;;SAErD,CACJ,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-area/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACR,6BAA6B,EAC7B,QAAQ,EACR,SAAS,EACT,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;;;gBAGD,QAAQ;;;iBAGP,aAAa;;;mDAGqB,WAAW;;;;iBAI7C,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;4BAclB,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;kBAsBtB,WAAW;;2BAEF,QAAQ,MAAM,eAAe;;UAE9C;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;;;;;;;+BAYP,gBAAgB;;;;;;;;6BAQlB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,SAAS;;;;iBAIvB,qBAAqB;;;;iBAIrB,6BAA6B;;;;;;;;;;;;;;;;;;;;oBAoB1B,eAAe;;;CAGlC,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;qCAE0B,qBAAqB;;;SAGjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;;;;;yCASrB,qBAAqB;;;;uCAIvB,SAAS;;SAEvC,CACJ,CACJ,CAAC"}

package/dist/esm/text-area/template.d.ts

@@ -0,0 +1,4 @@
+import { ViewTemplate } from '@microsoft/fast-element';
+import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { TextArea } from '.';
+export declare const template: FoundationElementTemplate<ViewTemplate<TextArea>>;

package/dist/esm/text-area/template.js

@@ -0,0 +1,62 @@
+import { html, ref, slotted } from '@microsoft/fast-element';
+import { iconExclamationMarkTag } from '../icons/exclamation-mark';
+import { errorTextTemplate } from '../patterns/error/template';
+export const template = () => 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>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/text-area/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/text-area/template.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "18.8.4",
+  "version": "18.9.1",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",

package/dist/esm/table-column/text/styles.d.ts

@@ -1 +0,0 @@
-export declare const cellStyles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/table-column/text/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/table-column/text/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,QAAQ,EACR,aAAa,EACb,qBAAqB,EACxB,MAAM,oCAAoC,CAAC;AAE5C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;gBAEb,QAAQ;iBACP,aAAa;;;;;;;iBAOb,qBAAqB;;CAErC,CAAC"}

package/dist/esm/table-column/text/template.d.ts

@@ -1,3 +0,0 @@
-import type { TableColumnTextCellRecord, TableColumnTextColumnConfig } from '.';
-import type { TableCellState } from '../base/types';
-export declare const cellTemplate: import("@microsoft/fast-element").ViewTemplate<TableCellState<TableColumnTextCellRecord, TableColumnTextColumnConfig>, any>;

package/dist/esm/table-column/text/template.js

@@ -1,24 +0,0 @@
-import { html } from '@microsoft/fast-element';
-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');
-};
-export const cellTemplate = html `
-    <span
-        class="${x => (typeof x.cellRecord.value === 'string' ? '' : 'placeholder')}"
-        @mouseover="${(x, c) => setTitleWhenOverflow(c.event.target, getCellContent(x))}"
-        @mouseout="${(_x, c) => removeTitle(c.event.target)}"
-    >
-        ${x => getCellContent(x)}
-    </span>
-`;
-//# sourceMappingURL=template.js.map

package/dist/esm/table-column/text/template.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/table-column/text/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAI/C,MAAM,cAAc,GAAG,CACnB,SAGC,EACK,EAAE;IACR,OAAO,OAAO,SAAS,CAAC,UAAU,CAAC,KAAK,KAAK,QAAQ;QACjD,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,KAAK;QAC5B,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC,WAAW,CAAC;AAC7C,CAAC,CAAC;AACF,MAAM,oBAAoB,GAAG,CAAC,IAAiB,EAAE,KAAa,EAAQ,EAAE;IACpE,IAAI,KAAK,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE;QAC9C,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;KACrC;AACL,CAAC,CAAC;AACF,MAAM,WAAW,GAAG,CAAC,IAAiB,EAAQ,EAAE;IAC5C,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;AAClC,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAE/B;;iBAEgB,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC;sBAC7D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,oBAAoB,CAC5C,CAAC,CAAC,KAAK,CAAC,MAAqB,EAC7B,cAAc,CAAC,CAAC,CAAC,CACpB;qBACgB,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,MAAqB,CAAC;;UAEhE,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;;CAE/B,CAAC"}