@ni/nimble-components 18.8.3 → 18.9.0

package/dist/esm/anchor-menu-item/index.js

@@ -28,7 +28,7 @@ export class AnchorMenuItem extends AnchorBase {
      * @internal
      */
     clickHandler(e) {
-        e.stopImmediatePropagation();
+        e.stopPropagation();
         return true;
     }
     /**
@@ -40,7 +40,7 @@ export class AnchorMenuItem extends AnchorBase {
         }
         switch (e.key) {
             case keyEnter:
-                e.stopImmediatePropagation();
+                e.stopPropagation();
                 break;
             default:
         }

package/dist/esm/anchor-menu-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-menu-item/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-menu-item/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/anchor-menu-item/template.js

@@ -7,6 +7,8 @@ export const template = (context, definition) => html `
     ? `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')}
@@ -18,8 +20,6 @@ export const template = (context, definition) => html `
             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">

package/dist/esm/anchor-menu-item/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/anchor-menu-item/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAgB,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAEH,eAAe,EAEf,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AAGpC,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAgB;;;iBAGhC,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,gBAAgB,KAAK,QAAQ;IACrD,CAAC,CAAC,UAAU,CAAC,CAAC,gBAAgB,EAAE;IAChC,CAAC,CAAC,EAAE,CAAC;yBACY,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;;cAG1B,GAAG,CAAC,QAAQ,CAAC;wBACH,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;mBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;wBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;oBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;8BACD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;mBAChC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;sBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;oBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;sBACT,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;wBAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;;cAE9D,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;;;cAItC,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;;CAGjD,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/anchor-menu-item/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAgB,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAEH,eAAe,EAEf,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AAGpC,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAgB;;;iBAGhC,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,gBAAgB,KAAK,QAAQ;IACrD,CAAC,CAAC,UAAU,CAAC,CAAC,gBAAgB,EAAE;IAChC,CAAC,CAAC,EAAE,CAAC;yBACY,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;kBACtB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;oBAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;;;cAG1D,GAAG,CAAC,QAAQ,CAAC;wBACH,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;mBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;wBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;oBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;8BACD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;mBAChC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;sBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;oBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;cAEjB,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;;;cAItC,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;;CAGjD,CAAC"}

package/dist/esm/patterns/error/styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { controlHeight, failColor, errorTextFont, borderWidth, iconSize } from '../../theme-provider/design-tokens';
+import { failColor, errorTextFont, iconSize, errorTextFontLineHeight } from '../../theme-provider/design-tokens';
 export const styles = css `
     .error-icon {
         display: none;
@@ -22,17 +22,13 @@ export const styles = css `
         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;
     }

package/dist/esm/patterns/error/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/error/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,aAAa,EACb,SAAS,EACT,aAAa,EACb,WAAW,EACX,QAAQ,EACX,MAAM,oCAAoC,CAAC;AAE5C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;iBAOR,QAAQ;kBACP,QAAQ;;;;;;;;;;gBAUV,aAAa;iBACZ,SAAS;;;eAGX,aAAa;;;;;;;;oBAQR,aAAa,MAAM,WAAW;;;;;;CAMjD,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/error/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,SAAS,EACT,aAAa,EACb,QAAQ,EACR,uBAAuB,EAC1B,MAAM,oCAAoC,CAAC;AAE5C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;iBAOR,QAAQ;kBACP,QAAQ;;;;;;;;;;gBAUV,aAAa;iBACZ,SAAS;;;4BAGE,uBAAuB;;;;;;;;;;CAUlD,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.3",
+  "version": "18.9.0",
   "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",