@ni/nimble-components 32.9.3 → 32.10.0

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

@@ -6,6 +6,10 @@ declare global {
     }
 }
 declare const TextArea_base: (abstract new (...args: any[]) => {
+    /**
+     * The width of the vertical scrollbar, if displayed.
+     * @internal
+     */
     errorText?: string | undefined;
     errorVisible: boolean;
     errorHasOverflow: boolean;
@@ -14,6 +18,13 @@ declare const TextArea_base: (abstract new (...args: any[]) => {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}) & (abstract new (...args: any[]) => {
+    requiredVisible: boolean;
+    readonly $fastController: import("@microsoft/fast-element").Controller;
+    $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
 }) & typeof FoundationTextArea;
 /**
  * A nimble-styed HTML text area

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

@@ -5,10 +5,11 @@ import { mixinErrorPattern } from '../patterns/error/types';
 import { styles } from './styles';
 import { template } from './template';
 import { TextAreaAppearance } from './types';
+import { mixinRequiredVisiblePattern } from '../patterns/required-visible/types';
 /**
  * A nimble-styed HTML text area
  */
-export class TextArea extends mixinErrorPattern(FoundationTextArea) {
+export class TextArea extends mixinErrorPattern(mixinRequiredVisiblePattern(FoundationTextArea)) {
     constructor() {
         super(...arguments);
         /**

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,GAAG,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EACjC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAQ7C;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,iBAAiB,CAAC,kBAAkB,CAAC;IAAnE;;QACI;;;;;;WAMG;QAEI,eAAU,GAAuB,kBAAkB,CAAC,OAAO,CAAC;QAEnE;;;WAGG;QAEI,mBAAc,GAAG,CAAC,CAAC,CAAC;QAGnB,+BAA0B,GAAG,KAAK,CAAC;IAqE/C,CAAC;IAnEG;;OAEG;IACa,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QAChE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC;IAED;;OAEG;IACa,oBAAoB;QAChC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,cAAc,EAAE,UAAU,EAAE,CAAC;IACtC,CAAC;IAED;;OAEG;IACI,eAAe;QAClB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACrC,CAAC;IAED,sEAAsE;IACtE,uEAAuE;IACvE,wEAAwE;IACxE,iEAAiE;IACjE,wEAAwE;IACxE,sDAAsD;IAEtD;;OAEG;IACI,kBAAkB;QACrB,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACrC,CAAC;IAED;;OAEG;IACa,YAAY,CAAC,QAAgB,EAAE,IAAY;QACvD,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QACnC,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACrC,CAAC;IAEO,QAAQ;QACZ,iFAAiF;QACjF,wBAAwB;QACxB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;IAC9E,CAAC;IAEO,yBAAyB;QAC7B,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;YACpC,OAAO;QACX,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,0BAA0B,EAAE,CAAC;YACnC,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC;YACvC,GAAG,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;QACvD,CAAC;IACL,CAAC;IAEO,oBAAoB;QACxB,IAAI,CAAC,0BAA0B,GAAG,KAAK,CAAC;QACxC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;IAC9E,CAAC;CACJ;AA/EU;IADN,IAAI;4CAC8D;AAO5D;IADN,UAAU;gDACgB;AA0E/B,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,kBAAkB,CAAC","sourcesContent":["import { attr, DOM, observable } from '@microsoft/fast-element';\nimport {\n    DesignSystem,\n    TextArea as FoundationTextArea\n} from '@microsoft/fast-foundation';\nimport { mixinErrorPattern } from '../patterns/error/types';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { TextAreaAppearance } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-text-area': TextArea;\n    }\n}\n\n/**\n * A nimble-styed HTML text area\n */\nexport class TextArea extends mixinErrorPattern(FoundationTextArea) {\n    /**\n     * The appearance the text area should have.\n     *\n     * @public\n     * @remarks\n     * HTML Attribute: appearance\n     */\n    @attr\n    public appearance: TextAreaAppearance = TextAreaAppearance.outline;\n\n    /**\n     * The width of the vertical scrollbar, if displayed.\n     * @internal\n     */\n    @observable\n    public scrollbarWidth = -1;\n\n    private resizeObserver?: ResizeObserver;\n    private updateScrollbarWidthQueued = false;\n\n    /**\n     * @internal\n     */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.resizeObserver = new ResizeObserver(() => this.onResize());\n        this.resizeObserver.observe(this);\n    }\n\n    /**\n     * @internal\n     */\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.resizeObserver?.disconnect();\n    }\n\n    /**\n     * @internal\n     */\n    public onTextAreaInput(): void {\n        this.handleTextInput();\n        this.queueUpdateScrollbarWidth();\n    }\n\n    // If a property can affect whether a scrollbar is visible, we need to\n    // call queueUpdateScrollbarWidth() when it changes. The exceptions are\n    // properties that affect size (e.g. height, width, cols, rows), because\n    // we already have a ResizeObserver handling those changes. Also,\n    // a change to errorVisible cannot cause scrollbar visibility to change,\n    // because we always reserve space for the error icon.\n\n    /**\n     * @internal\n     */\n    public placeholderChanged(): void {\n        this.queueUpdateScrollbarWidth();\n    }\n\n    /**\n     * @internal\n     */\n    public override valueChanged(previous: string, next: string): void {\n        super.valueChanged(previous, next);\n        this.queueUpdateScrollbarWidth();\n    }\n\n    private onResize(): void {\n        // Do this directly instead of calling updateScrollbarWidth, b/c we don't want to\n        // interfere with queue.\n        this.scrollbarWidth = this.control.offsetWidth - this.control.clientWidth;\n    }\n\n    private queueUpdateScrollbarWidth(): void {\n        if (!this.$fastController.isConnected) {\n            return;\n        }\n        if (!this.updateScrollbarWidthQueued) {\n            this.updateScrollbarWidthQueued = true;\n            DOM.queueUpdate(() => this.updateScrollbarWidth());\n        }\n    }\n\n    private updateScrollbarWidth(): void {\n        this.updateScrollbarWidthQueued = false;\n        this.scrollbarWidth = this.control.offsetWidth - this.control.clientWidth;\n    }\n}\n\nconst nimbleTextArea = TextArea.compose({\n    baseName: 'text-area',\n    baseClass: FoundationTextArea,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextArea());\nexport const textAreaTag = 'nimble-text-area';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-area/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, DOM, observable } from '@microsoft/fast-element';\nimport {\n    DesignSystem,\n    TextArea as FoundationTextArea\n} from '@microsoft/fast-foundation';\nimport { mixinErrorPattern } from '../patterns/error/types';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { TextAreaAppearance } from './types';\nimport { mixinRequiredVisiblePattern } from '../patterns/required-visible/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-text-area': TextArea;\n    }\n}\n\n/**\n * A nimble-styed HTML text area\n */\nexport class TextArea extends mixinErrorPattern(\n    mixinRequiredVisiblePattern(FoundationTextArea)\n) {\n    /**\n     * The appearance the text area should have.\n     *\n     * @public\n     * @remarks\n     * HTML Attribute: appearance\n     */\n    @attr\n    public appearance: TextAreaAppearance = TextAreaAppearance.outline;\n\n    /**\n     * The width of the vertical scrollbar, if displayed.\n     * @internal\n     */\n    @observable\n    public scrollbarWidth = -1;\n\n    private resizeObserver?: ResizeObserver;\n    private updateScrollbarWidthQueued = false;\n\n    /**\n     * @internal\n     */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.resizeObserver = new ResizeObserver(() => this.onResize());\n        this.resizeObserver.observe(this);\n    }\n\n    /**\n     * @internal\n     */\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.resizeObserver?.disconnect();\n    }\n\n    /**\n     * @internal\n     */\n    public onTextAreaInput(): void {\n        this.handleTextInput();\n        this.queueUpdateScrollbarWidth();\n    }\n\n    // If a property can affect whether a scrollbar is visible, we need to\n    // call queueUpdateScrollbarWidth() when it changes. The exceptions are\n    // properties that affect size (e.g. height, width, cols, rows), because\n    // we already have a ResizeObserver handling those changes. Also,\n    // a change to errorVisible cannot cause scrollbar visibility to change,\n    // because we always reserve space for the error icon.\n\n    /**\n     * @internal\n     */\n    public placeholderChanged(): void {\n        this.queueUpdateScrollbarWidth();\n    }\n\n    /**\n     * @internal\n     */\n    public override valueChanged(previous: string, next: string): void {\n        super.valueChanged(previous, next);\n        this.queueUpdateScrollbarWidth();\n    }\n\n    private onResize(): void {\n        // Do this directly instead of calling updateScrollbarWidth, b/c we don't want to\n        // interfere with queue.\n        this.scrollbarWidth = this.control.offsetWidth - this.control.clientWidth;\n    }\n\n    private queueUpdateScrollbarWidth(): void {\n        if (!this.$fastController.isConnected) {\n            return;\n        }\n        if (!this.updateScrollbarWidthQueued) {\n            this.updateScrollbarWidthQueued = true;\n            DOM.queueUpdate(() => this.updateScrollbarWidth());\n        }\n    }\n\n    private updateScrollbarWidth(): void {\n        this.updateScrollbarWidthQueued = false;\n        this.scrollbarWidth = this.control.offsetWidth - this.control.clientWidth;\n    }\n}\n\nconst nimbleTextArea = TextArea.compose({\n    baseName: 'text-area',\n    baseClass: FoundationTextArea,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextArea());\nexport const textAreaTag = 'nimble-text-area';\n"]}

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

@@ -4,10 +4,12 @@ import { borderRgbPartialColor, borderHoverColor, borderWidth, smallDelay, bodyF
 import { appearanceBehavior } from '../utilities/style/appearance';
 import { TextAreaAppearance } from './types';
 import { styles as errorStyles } from '../patterns/error/styles';
+import { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';
 import { userSelectNone } from '../utilities/style/user-select';
 export const styles = css `
     ${display('inline-flex')}
     ${errorStyles}
+    ${requiredVisibleStyles}
 
     :host {
         font: ${bodyFont};

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,EAC7B,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EAChB,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;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;;;gBAGD,QAAQ;;UAEd,cAAc;iBACP,aAAa;;;mDAGqB,WAAW;;;;iBAI7C,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;4BAclB,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;kBAqBtB,WAAW;;2BAEF,QAAQ,MAAM,eAAe;;UAE9C;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;;;;;;;+BAYP,gBAAgB;;;;;;;;6BAQlB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,SAAS;;;;iBAIvB,qBAAqB;;;;iBAIrB,6BAA6B;;;;;;;;;;;;;;;;;;;;eAoB/B,aAAa;;;CAG3B,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","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    smallDelay,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    bodyFont,\n    controlLabelDisabledFontColor,\n    iconSize,\n    failColor,\n    standardPadding,\n    mediumPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextAreaAppearance } from './types';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-flex')}\n    ${errorStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        ${userSelectNone}\n        color: ${bodyFontColor};\n        flex-direction: column;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .label {\n        display: block;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .container {\n        display: flex;\n        justify-content: center;\n        position: relative;\n        height: 100%;\n        width: 100%;\n    }\n\n    .container::after {\n        content: ' ';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        .container::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) .container::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .container::after {\n        width: 100%;\n    }\n\n    :host([disabled]:hover) .container::after,\n    :host([readonly]:hover) .container::after {\n        width: 0px;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        flex-grow: 1;\n        outline: none;\n        position: relative;\n        color: inherit;\n        border-radius: 0px;\n        align-items: flex-end;\n        border: ${borderWidth} solid transparent;\n        min-width: 100px;\n        min-height: calc(${iconSize} + ${standardPadding});\n        padding: 8px;\n        ${\n            /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''\n        }\n        padding-right: calc(${iconSize});\n        margin: 0px;\n        resize: none;\n    }\n\n    @media (prefers-reduced-motion) {\n        .control {\n            transition-duration: 0s;\n        }\n    }\n\n    .control:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    .control[readonly],\n    .control[readonly]:hover,\n    .control[readonly]:hover:focus-within,\n    .control[disabled],\n    .control[disabled]:hover {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([error-visible]) .control[readonly]:hover:focus-within {\n        border-bottom-color: ${failColor};\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .control[disabled]::placeholder {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    :host([resize='both']) .control {\n        resize: both;\n    }\n    :host([resize='horizontal']) .control {\n        resize: horizontal;\n    }\n    :host([resize='vertical']) .control {\n        resize: vertical;\n    }\n\n    :host([error-visible]) .error-icon {\n        display: none;\n    }\n\n    :host([error-visible]) .error-icon.scrollbar-width-calculated {\n        display: inline-flex;\n        position: absolute;\n        top: ${mediumPadding};\n        right: var(--ni-private-scrollbar-width);\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        TextAreaAppearance.outline,\n        css`\n            .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.3);\n                background-color: transparent;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextAreaAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            :host([readonly]) .control {\n                background-color: transparent;\n            }\n\n            :host([disabled]) .control {\n                border-color: transparent;\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            :host([error-visible][disabled]) .control {\n                border-bottom-color: ${failColor};\n            }\n        `\n    )\n);\n"]}
+{"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,EACf,aAAa,EAChB,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;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa;;;mDAGqB,WAAW;;;;iBAI7C,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;4BAclB,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;kBAqBtB,WAAW;;2BAEF,QAAQ,MAAM,eAAe;;UAE9C;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;;;;;;;+BAYP,gBAAgB;;;;;;;;6BAQlB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,SAAS;;;;iBAIvB,qBAAqB;;;;iBAIrB,6BAA6B;;;;;;;;;;;;;;;;;;;;eAoB/B,aAAa;;;CAG3B,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","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    smallDelay,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    bodyFont,\n    controlLabelDisabledFontColor,\n    iconSize,\n    failColor,\n    standardPadding,\n    mediumPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextAreaAppearance } from './types';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-flex')}\n    ${errorStyles}\n    ${requiredVisibleStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        ${userSelectNone}\n        color: ${bodyFontColor};\n        flex-direction: column;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .label {\n        display: block;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .container {\n        display: flex;\n        justify-content: center;\n        position: relative;\n        height: 100%;\n        width: 100%;\n    }\n\n    .container::after {\n        content: ' ';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        .container::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) .container::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .container::after {\n        width: 100%;\n    }\n\n    :host([disabled]:hover) .container::after,\n    :host([readonly]:hover) .container::after {\n        width: 0px;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        flex-grow: 1;\n        outline: none;\n        position: relative;\n        color: inherit;\n        border-radius: 0px;\n        align-items: flex-end;\n        border: ${borderWidth} solid transparent;\n        min-width: 100px;\n        min-height: calc(${iconSize} + ${standardPadding});\n        padding: 8px;\n        ${\n            /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''\n        }\n        padding-right: calc(${iconSize});\n        margin: 0px;\n        resize: none;\n    }\n\n    @media (prefers-reduced-motion) {\n        .control {\n            transition-duration: 0s;\n        }\n    }\n\n    .control:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    .control[readonly],\n    .control[readonly]:hover,\n    .control[readonly]:hover:focus-within,\n    .control[disabled],\n    .control[disabled]:hover {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([error-visible]) .control[readonly]:hover:focus-within {\n        border-bottom-color: ${failColor};\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .control[disabled]::placeholder {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    :host([resize='both']) .control {\n        resize: both;\n    }\n    :host([resize='horizontal']) .control {\n        resize: horizontal;\n    }\n    :host([resize='vertical']) .control {\n        resize: vertical;\n    }\n\n    :host([error-visible]) .error-icon {\n        display: none;\n    }\n\n    :host([error-visible]) .error-icon.scrollbar-width-calculated {\n        display: inline-flex;\n        position: absolute;\n        top: ${mediumPadding};\n        right: var(--ni-private-scrollbar-width);\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        TextAreaAppearance.outline,\n        css`\n            .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.3);\n                background-color: transparent;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextAreaAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            :host([readonly]) .control {\n                background-color: transparent;\n            }\n\n            :host([disabled]) .control {\n                border-color: transparent;\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            :host([error-visible][disabled]) .control {\n                border-bottom-color: ${failColor};\n            }\n        `\n    )\n);\n"]}

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

@@ -1,7 +1,8 @@
 import { html, ref, slotted } from '@microsoft/fast-element';
 import { iconExclamationMarkTag } from '../icons/exclamation-mark';
 import { errorTextTemplate } from '../patterns/error/template';
-export const template = () => html `
+import { createRequiredVisibleLabelTemplate } from '../patterns/required-visible/template';
+const labelTemplate = createRequiredVisibleLabelTemplate(html `
     <label
         part="label"
         for="control"
@@ -9,6 +10,9 @@ export const template = () => html `
     >
         <slot ${slotted('defaultSlottedNodes')}></slot>
     </label>
+`);
+export const template = () => html `
+    ${labelTemplate}
     <div class="container">
         <textarea
             part="control"
@@ -47,6 +51,7 @@ export const template = () => html `
             aria-owns="${x => x.ariaOwns}"
             aria-relevant="${x => x.ariaRelevant}"
             aria-roledescription="${x => x.ariaRoledescription}"
+            aria-required="${x => x.requiredVisible}"
             @input="${x => x.onTextAreaInput()}"
             @change="${x => x.handleChange()}"
             ${ref('control')}

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/text-area/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, slotted, ViewTemplate } from '@microsoft/fast-element';\nimport type { FoundationElementTemplate } from '@microsoft/fast-foundation';\nimport type { TextArea } from '.';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport { errorTextTemplate } from '../patterns/error/template';\n\nexport const template: FoundationElementTemplate<\nViewTemplate<TextArea>\n> = () => html<TextArea>`\n    <label\n        part=\"label\"\n        for=\"control\"\n        class=\"${x => (x.defaultSlottedNodes?.length ? 'label' : 'label label__hidden')}\"\n    >\n        <slot ${slotted('defaultSlottedNodes')}></slot>\n    </label>\n    <div class=\"container\">\n        <textarea\n            part=\"control\"\n            class=\"control\"\n            id=\"control\"\n            ?autofocus=\"${x => x.autofocus}\"\n            cols=\"${x => x.cols}\"\n            ?disabled=\"${x => x.disabled}\"\n            form=\"${x => x.form}\"\n            list=\"${x => x.list}\"\n            maxlength=\"${x => x.maxlength}\"\n            minlength=\"${x => x.minlength}\"\n            name=\"${x => x.name}\"\n            placeholder=\"${x => x.placeholder}\"\n            ?readonly=\"${x => x.readOnly}\"\n            ?required=\"${x => x.required}\"\n            rows=\"${x => x.rows}\"\n            ?spellcheck=\"${x => x.spellcheck}\"\n            :value=\"${x => x.value}\"\n            aria-atomic=\"${x => x.ariaAtomic}\"\n            aria-busy=\"${x => x.ariaBusy}\"\n            aria-controls=\"${x => x.ariaControls}\"\n            aria-current=\"${x => x.ariaCurrent}\"\n            aria-describedby=\"${x => x.ariaDescribedby}\"\n            aria-details=\"${x => x.ariaDetails}\"\n            aria-disabled=\"${x => x.ariaDisabled}\"\n            aria-errormessage=\"${x => x.ariaErrormessage}\"\n            aria-flowto=\"${x => x.ariaFlowto}\"\n            aria-haspopup=\"${x => x.ariaHaspopup}\"\n            aria-hidden=\"${x => x.ariaHidden}\"\n            aria-invalid=\"${x => x.ariaInvalid}\"\n            aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n            aria-label=\"${x => x.ariaLabel}\"\n            aria-labelledby=\"${x => x.ariaLabelledby}\"\n            aria-live=\"${x => x.ariaLive}\"\n            aria-owns=\"${x => x.ariaOwns}\"\n            aria-relevant=\"${x => x.ariaRelevant}\"\n            aria-roledescription=\"${x => x.ariaRoledescription}\"\n            @input=\"${x => x.onTextAreaInput()}\"\n            @change=\"${x => x.handleChange()}\"\n            ${ref('control')}\n        ></textarea>\n        <${iconExclamationMarkTag}\n            severity=\"error\"\n            class=\"error-icon ${x => (x.scrollbarWidth >= 0 ? 'scrollbar-width-calculated' : '')}\"\n            style=\"--ni-private-scrollbar-width: ${x => x.scrollbarWidth}px;\"\n        ></${iconExclamationMarkTag}>\n        ${errorTextTemplate}\n    </div>\n`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/text-area/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, slotted, ViewTemplate } from '@microsoft/fast-element';\nimport type { FoundationElementTemplate } from '@microsoft/fast-foundation';\nimport type { TextArea } from '.';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport { errorTextTemplate } from '../patterns/error/template';\nimport { createRequiredVisibleLabelTemplate } from '../patterns/required-visible/template';\n\nconst labelTemplate = createRequiredVisibleLabelTemplate(html<TextArea>`\n    <label\n        part=\"label\"\n        for=\"control\"\n        class=\"${x => (x.defaultSlottedNodes?.length ? 'label' : 'label label__hidden')}\"\n    >\n        <slot ${slotted('defaultSlottedNodes')}></slot>\n    </label>\n`);\n\nexport const template: FoundationElementTemplate<\nViewTemplate<TextArea>\n> = () => html<TextArea>`\n    ${labelTemplate}\n    <div class=\"container\">\n        <textarea\n            part=\"control\"\n            class=\"control\"\n            id=\"control\"\n            ?autofocus=\"${x => x.autofocus}\"\n            cols=\"${x => x.cols}\"\n            ?disabled=\"${x => x.disabled}\"\n            form=\"${x => x.form}\"\n            list=\"${x => x.list}\"\n            maxlength=\"${x => x.maxlength}\"\n            minlength=\"${x => x.minlength}\"\n            name=\"${x => x.name}\"\n            placeholder=\"${x => x.placeholder}\"\n            ?readonly=\"${x => x.readOnly}\"\n            ?required=\"${x => x.required}\"\n            rows=\"${x => x.rows}\"\n            ?spellcheck=\"${x => x.spellcheck}\"\n            :value=\"${x => x.value}\"\n            aria-atomic=\"${x => x.ariaAtomic}\"\n            aria-busy=\"${x => x.ariaBusy}\"\n            aria-controls=\"${x => x.ariaControls}\"\n            aria-current=\"${x => x.ariaCurrent}\"\n            aria-describedby=\"${x => x.ariaDescribedby}\"\n            aria-details=\"${x => x.ariaDetails}\"\n            aria-disabled=\"${x => x.ariaDisabled}\"\n            aria-errormessage=\"${x => x.ariaErrormessage}\"\n            aria-flowto=\"${x => x.ariaFlowto}\"\n            aria-haspopup=\"${x => x.ariaHaspopup}\"\n            aria-hidden=\"${x => x.ariaHidden}\"\n            aria-invalid=\"${x => x.ariaInvalid}\"\n            aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n            aria-label=\"${x => x.ariaLabel}\"\n            aria-labelledby=\"${x => x.ariaLabelledby}\"\n            aria-live=\"${x => x.ariaLive}\"\n            aria-owns=\"${x => x.ariaOwns}\"\n            aria-relevant=\"${x => x.ariaRelevant}\"\n            aria-roledescription=\"${x => x.ariaRoledescription}\"\n            aria-required=\"${x => x.requiredVisible}\"\n            @input=\"${x => x.onTextAreaInput()}\"\n            @change=\"${x => x.handleChange()}\"\n            ${ref('control')}\n        ></textarea>\n        <${iconExclamationMarkTag}\n            severity=\"error\"\n            class=\"error-icon ${x => (x.scrollbarWidth >= 0 ? 'scrollbar-width-calculated' : '')}\"\n            style=\"--ni-private-scrollbar-width: ${x => x.scrollbarWidth}px;\"\n        ></${iconExclamationMarkTag}>\n        ${errorTextTemplate}\n    </div>\n`;\n"]}

package/package.json

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