@ni/nimble-components 11.0.4 → 11.2.0

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

@@ -0,0 +1,193 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { applicationBackgroundColor, bodyFont, bodyFontColor, bodyDisabledFontColor, borderHoverColor, borderWidth, controlHeight, iconSize, popupBorderColor, popupBoxShadowColor, smallDelay, smallPadding, failColor, borderRgbPartialColor } from '../../theme-provider/design-tokens';
+import { focusVisible } from '../../utilities/style/focus';
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        box-sizing: border-box;
+        color: ${bodyFontColor};
+        font: ${bodyFont};
+        height: ${controlHeight};
+        position: relative;
+        justify-content: center;
+        user-select: none;
+        min-width: 250px;
+        outline: none;
+        vertical-align: top;
+        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
+        --ni-private-focus-indicator-width: 1px;
+        --ni-private-indicator-lines-gap: 1px;
+    }
+
+    :host::before {
+        content: '';
+        position: absolute;
+        bottom: calc(
+            var(--ni-private-hover-indicator-width) +
+                var(--ni-private-indicator-lines-gap)
+        );
+        width: 0px;
+        height: 0px;
+        justify-self: center;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-focus-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        :host::before {
+            transition-duration: 0s;
+        }
+    }
+
+    :host(${focusVisible})::before {
+        width: calc(100% - 8px);
+    }
+
+    :host::after {
+        content: '';
+        position: absolute;
+        bottom: calc(-1 * ${borderWidth});
+        width: 0px;
+        height: 0px;
+        justify-self: center;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-hover-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    :host(.invalid)::after {
+        border-bottom-color: ${failColor};
+    }
+
+    @media (prefers-reduced-motion) {
+        :host::after {
+            transition-duration: 0s;
+        }
+    }
+
+    :host(:hover)::after,
+    :host(${focusVisible})::after {
+        width: 100%;
+    }
+
+    :host([disabled]:hover)::after {
+        width: 0px;
+    }
+
+    .control {
+        align-items: center;
+        box-sizing: border-box;
+        cursor: pointer;
+        display: flex;
+        min-height: 100%;
+        width: 100%;
+        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
+        background-color: transparent;
+        padding-left: 8px;
+        padding-bottom: 1px;
+    }
+
+    :host(.open:not(:hover)) .control {
+        border-bottom-color: ${borderHoverColor};
+    }
+
+    :host([disabled]) .control {
+        cursor: default;
+        color: ${bodyDisabledFontColor};
+        border-color: rgba(${borderRgbPartialColor}, 0.1);
+    }
+
+    .listbox {
+        box-sizing: border-box;
+        display: inline-flex;
+        flex-direction: column;
+        left: 0;
+        overflow-y: auto;
+        position: absolute;
+        width: 100%;
+        --ni-private-listbox-padding: ${smallPadding};
+        max-height: calc(
+            var(--ni-private-select-max-height) - 2 *
+                var(--ni-private-listbox-padding)
+        );
+        z-index: 1;
+        padding: var(--ni-private-listbox-padding);
+        box-shadow: 0px 3px 3px ${popupBoxShadowColor};
+        border: 1px solid ${popupBorderColor};
+        background-color: ${applicationBackgroundColor};
+        background-clip: padding-box;
+    }
+
+    .listbox[hidden] {
+        display: none;
+    }
+
+    :host([open][position='above']) .listbox {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    :host([open][position='below']) .listbox {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+
+    :host([open][position='above']) .listbox {
+        bottom: ${controlHeight};
+    }
+
+    :host([open][position='below']) .listbox {
+        top: calc(${controlHeight} + ${smallPadding});
+    }
+
+    .selected-value {
+        flex: auto;
+        font-family: inherit;
+        text-align: start;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .indicator {
+        flex: none;
+        margin-inline-start: 1em;
+        padding-right: 8px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .indicator slot[name='indicator'] svg {
+        width: ${iconSize};
+        height: ${iconSize};
+        fill: ${bodyFontColor};
+    }
+
+    :host([disabled]) .indicator slot[name='indicator'] svg {
+        fill: ${bodyDisabledFontColor};
+    }
+
+    slot[name='listbox'] {
+        display: none;
+        width: 100%;
+    }
+
+    :host([open]) slot[name='listbox'] {
+        display: flex;
+        position: absolute;
+    }
+
+    .end {
+        margin-inline-start: auto;
+    }
+
+    ::slotted([role='option']),
+    ::slotted(option) {
+        flex: none;
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,SAAS,EACT,qBAAqB,EACxB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;;;;;mDAOoB,WAAW;;;;;;;;;;;;;;;yBAerC,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;4BAOI,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;+BAIP,SAAS;;;;;;;;;;YAU5B,YAAY;;;;;;;;;;;;;;;yBAeC,WAAW,UAAU,qBAAqB;;;;;;;+BAOpC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;;;;;;wCAWV,YAAY;;;;;;;kCAOlB,mBAAmB;4BACzB,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;;;;;;;kBAmBpC,aAAa;;;;oBAIX,aAAa,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;iBAsBlC,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;;;;;;;;;;;CAqBpC,CAAC"}

package/dist/esm/patterns/dropdown/types.d.ts

@@ -0,0 +1,5 @@
+export declare const DropdownPosition: {
+    readonly above: "above";
+    readonly below: "below";
+};
+export declare type DropdownPosition = typeof DropdownPosition[keyof typeof DropdownPosition];

package/dist/esm/patterns/dropdown/types.js

@@ -0,0 +1,6 @@
+import { SelectPosition } from '@microsoft/fast-foundation';
+export const DropdownPosition = {
+    above: SelectPosition.above,
+    below: SelectPosition.below
+};
+//# sourceMappingURL=types.js.map

package/dist/esm/patterns/dropdown/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,KAAK,EAAE,cAAc,CAAC,KAAK;CACrB,CAAC"}

package/dist/esm/patterns/error/styles.d.ts

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

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

@@ -0,0 +1,40 @@
+import { css } from '@microsoft/fast-element';
+import { controlHeight, failColor, errorTextFont, borderWidth, iconSize } from '../../theme-provider/design-tokens';
+export const styles = css `
+    .error-icon {
+        display: none;
+    }
+
+    :host(.invalid) .error-icon {
+        display: inline-flex;
+        width: ${iconSize};
+        height: ${iconSize};
+        flex: none;
+    }
+
+    .error-text {
+        display: none;
+    }
+
+    :host(.invalid) .error-text {
+        display: block;
+        font: ${errorTextFont};
+        color: ${failColor};
+        width: 100%;
+        position: absolute;
+        top: ${controlHeight};
+        left: 0px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    :host(.invalid[readonly]:not([disabled])) .error-text {
+        top: calc(${controlHeight} - ${borderWidth});
+    }
+
+    :host(.invalid) .error-text:empty {
+        display: none;
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +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"}

package/dist/esm/patterns/error/template.d.ts

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

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

@@ -0,0 +1,7 @@
+import { html } from '@microsoft/fast-element';
+export const errorTextTemplate = html `
+    <div class="error-text" title="${x => x.errorText}" aria-live="polite">
+        ${x => x.errorText}
+    </div>
+`;
+//# sourceMappingURL=template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/patterns/error/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAe;qCACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;UAC3C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;;CAEzB,CAAC"}

package/dist/esm/patterns/error/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This interface should be used by components that want to leverage the errorTextTemplate defined in templates.ts
+ */
+export interface IHasErrorText {
+    /**
+     * The error text that will be displayed when a component has the 'invalid' class set
+     */
+    errorText: string | undefined;
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/error/types.ts"],"names":[],"mappings":""}

package/dist/esm/select/styles.js

@@ -1,193 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import { applicationBackgroundColor, bodyFont, bodyFontColor, bodyDisabledFontColor, borderHoverColor, borderWidth, controlHeight, iconSize, popupBorderColor, popupBoxShadowColor, smallDelay, smallPadding } from '../theme-provider/design-tokens';
-import { focusVisible } from '../utilities/style/focus';
+import { styles as dropdownStyles } from '../patterns/dropdown/styles';
 export const styles = css `
-    ${display('inline-flex')}
-
-    :host {
-        box-sizing: border-box;
-        color: ${bodyFontColor};
-        font: ${bodyFont};
-        height: ${controlHeight};
-        position: relative;
-        justify-content: center;
-        user-select: none;
-        min-width: 250px;
-        outline: none;
-        vertical-align: top;
-        --ni-private-hover-indicator-width: 2px;
-        --ni-private-focus-indicator-width: 1px;
-        --ni-private-indicator-lines-gap: 1px;
-    }
-
-    :host::before {
-        content: '';
-        position: absolute;
-        bottom: calc(
-            var(--ni-private-hover-indicator-width) +
-                var(--ni-private-indicator-lines-gap)
-        );
-        width: 0px;
-        height: 0px;
-        justify-self: center;
-        border-bottom: ${borderHoverColor}
-            var(--ni-private-focus-indicator-width) solid;
-        transition: width ${smallDelay} ease-in;
-    }
-
-    @media (prefers-reduced-motion) {
-        :host::before {
-            transition-duration: 0s;
-        }
-    }
-
-    :host(${focusVisible})::before {
-        width: 100%;
-    }
-
-    :host::after {
-        content: '';
-        position: absolute;
-        bottom: 0px;
-        width: 0px;
-        height: 0px;
-        justify-self: center;
-        border-bottom: ${borderHoverColor}
-            var(--ni-private-hover-indicator-width) solid;
-        transition: width ${smallDelay} ease-in;
-    }
-
-    @media (prefers-reduced-motion) {
-        :host::after {
-            transition-duration: 0s;
-        }
-    }
-
-    :host(:hover)::after,
-    :host(${focusVisible})::after {
-        width: 100%;
-    }
-
-    :host([disabled]:hover)::after {
-        width: 0px;
-    }
-
-    .control {
-        align-items: center;
-        box-sizing: border-box;
-        cursor: pointer;
-        display: flex;
-        min-height: 100%;
-        width: 100%;
-        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
-        background-color: transparent;
-        padding-left: 8px;
-        padding-bottom: 1px;
-    }
-
-    :host([disabled]) .control {
-        cursor: default;
-    }
-
-    :host(.open:not(:hover)) .control {
-        border-bottom-color: ${borderHoverColor};
-    }
-
-    :host([disabled]) .control,
-    :host([disabled]) .control:hover {
-        border-bottom-color: ${bodyDisabledFontColor};
-        color: ${bodyDisabledFontColor};
-    }
-
-    .listbox {
-        box-sizing: border-box;
-        display: inline-flex;
-        flex-direction: column;
-        left: 0;
-        overflow-y: auto;
-        position: absolute;
-        width: 100%;
-        --ni-private-listbox-padding: ${smallPadding};
-        max-height: calc(
-            var(--ni-private-select-max-height) - 2 *
-                var(--ni-private-listbox-padding)
-        );
-        z-index: 1;
-        padding: var(--ni-private-listbox-padding);
-        box-shadow: 0px 3px 3px ${popupBoxShadowColor};
-        border: 1px solid ${popupBorderColor};
-        background-color: ${applicationBackgroundColor};
-        background-clip: padding-box;
-    }
-
-    .listbox[hidden] {
-        display: none;
-    }
-
-    :host([open][position='above']) .listbox {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    :host([open][position='below']) .listbox {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }
-
-    :host([open][position='above']) .listbox {
-        bottom: ${controlHeight};
-    }
-
-    :host([open][position='below']) .listbox {
-        top: calc(${controlHeight} + ${smallPadding});
-    }
-
-    .selected-value {
-        flex: 1 1 auto;
-        font-family: inherit;
-        text-align: start;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-
-    .indicator {
-        flex: 0 0 auto;
-        margin-inline-start: 1em;
-        padding-right: 8px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .indicator slot[name='indicator'] svg {
-        width: ${iconSize};
-        height: ${iconSize};
-        fill: ${bodyFontColor};
-    }
-
-    :host([disabled]) .indicator slot[name='indicator'] svg {
-        fill: ${bodyDisabledFontColor};
-    }
-
-    slot[name='listbox'] {
-        display: none;
-        width: 100%;
-    }
-
-    :host([open]) slot[name='listbox'] {
-        display: flex;
-        position: absolute;
-    }
-
-    .end {
-        margin-inline-start: auto;
-    }
-
-    ::slotted([role='option']),
-    ::slotted(option) {
-        flex: 0 0 auto;
-    }
+    ${dropdownStyles}
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/select/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACV,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;;;;;;;;;;;;;;;;;;;;yBAsBN,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;;yBAWC,gBAAgB;;4BAEb,UAAU;;;;;;;;;;YAU1B,YAAY;;;;;;;;;;;;;;;yBAeC,WAAW,UAAU,qBAAqB;;;;;;;;;;;+BAWpC,gBAAgB;;;;;+BAKhB,qBAAqB;iBACnC,qBAAqB;;;;;;;;;;;wCAWE,YAAY;;;;;;;kCAOlB,mBAAmB;4BACzB,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;;;;;;;kBAmBpC,aAAa;;;;oBAIX,aAAa,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;iBAsBlC,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;;;;;;;;;;;CAqBpC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEvE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;CACnB,CAAC"}

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

@@ -1,5 +1,7 @@
 import { TextField as FoundationTextField } from '@microsoft/fast-foundation';
+import '../icons/exclamation-mark';
 import { TextFieldAppearance } from './types';
+import type { IHasErrorText } from '../patterns/error/types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-text-field': TextField;
@@ -8,7 +10,7 @@ declare global {
 /**
  * A nimble-styed HTML text input
  */
-export declare class TextField extends FoundationTextField {
+export declare class TextField extends FoundationTextField implements IHasErrorText {
     /**
      * The appearance the text field should have.
      *
@@ -24,6 +26,6 @@ export declare class TextField extends FoundationTextField {
      * @remarks
      * HTML Attribute: error-text
      */
-    errorText: string;
+    errorText: string | undefined;
     connectedCallback(): void;
 }

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

@@ -1,9 +1,10 @@
 import { __decorate } from "tslib";
 import { attr, html } from '@microsoft/fast-element';
 import { DesignSystem, TextField as FoundationTextField, textFieldTemplate as template } from '@microsoft/fast-foundation';
-import { exclamationMark16X16 } from '@ni/nimble-tokens/dist/icons/js';
+import '../icons/exclamation-mark';
 import { styles } from './styles';
 import { TextFieldAppearance } from './types';
+import { errorTextTemplate } from '../patterns/error/template';
 /**
  * A nimble-styed HTML text input
  */
@@ -39,18 +40,13 @@ const nimbleTextField = TextField.compose({
         delegatesFocus: true
     },
     end: html `
-        <span class="error-content">${exclamationMark16X16.data}</span>
+        <nimble-icon-exclamation-mark
+            class="error-icon fail"
+        ></nimble-icon-exclamation-mark>
         <span part="actions">
             <slot name="actions"></slot>
         </span>
-        <div
-            id="errortext"
-            class="errortext error-content"
-            title="${x => x.errorText}"
-            aria-live="polite"
-        >
-            ${x => x.errorText}
-        </div>
+        ${errorTextTemplate}
     `
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEhC,iBAAiB,IAAI,QAAQ,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAQ9C;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,mBAAmB;IAAlD;;QACI;;;;;;WAMG;QAEI,eAAU,GAAwB,mBAAmB,CAAC,SAAS,CAAC;IAgB3E,CAAC;IAJmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,mBAAmB,EAAE,WAAW,CAAC,CAAC;IAChE,CAAC;CACJ;AAhBG;IADC,IAAI;6CACkE;AAUvE;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CACR;AAQ9B,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAmB;IACxD,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,mBAAmB;IAC9B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,GAAG,EAAE,IAAI,CAAW;sCACc,oBAAoB,CAAC,IAAI;;;;;;;qBAO1C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;;;cAGvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;;KAEzB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEhC,iBAAiB,IAAI,QAAQ,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAS/D;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,mBAAmB;IAAlD;;QACI;;;;;;WAMG;QAEI,eAAU,GAAwB,mBAAmB,CAAC,SAAS,CAAC;IAgB3E,CAAC;IAJmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,mBAAmB,EAAE,WAAW,CAAC,CAAC;IAChE,CAAC;CACJ;AAhBG;IADC,IAAI;6CACkE;AAUvE;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CACG;AAQzC,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAmB;IACxD,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,mBAAmB;IAC9B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,GAAG,EAAE,IAAI,CAAW;;;;;;;UAOd,iBAAiB;KACtB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC"}

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

@@ -1,12 +1,14 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, errorTextFont, failColor, fillSelectedRgbPartialColor, iconSize, labelHeight, smallDelay, controlLabelFont, bodyFont, controlLabelFontColor, controlLabelDisabledFontColor, standardPadding } from '../theme-provider/design-tokens';
+import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, failColor, fillSelectedRgbPartialColor, labelHeight, smallDelay, controlLabelFont, bodyFont, controlLabelFontColor, controlLabelDisabledFontColor, standardPadding } from '../theme-provider/design-tokens';
 import { appearanceBehavior } from '../utilities/style/appearance';
 import { TextFieldAppearance } from './types';
 import { Theme } from '../theme-provider/types';
 import { themeBehavior } from '../utilities/style/theme';
+import { styles as errorStyles } from '../patterns/error/styles';
 export const styles = css `
     ${display('inline-block')}
+    ${errorStyles}
 
     :host {
         font: ${bodyFont};
@@ -48,10 +50,6 @@ export const styles = css `
         gap: calc(${standardPadding} / 2);
     }
 
-    :host(.invalid) .root {
-        border-bottom-color: ${failColor};
-    }
-
     :host([readonly]) .root {
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
@@ -60,6 +58,10 @@ export const styles = css `
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
+    :host(.invalid) .root {
+        border-bottom-color: ${failColor};
+    }
+
     .root:focus-within {
         border-bottom-color: ${borderHoverColor};
     }
@@ -181,52 +183,6 @@ export const styles = css `
         width: 0px;
     }
 
-    .error-content {
-        display: none;
-    }
-
-    :host(.invalid) .error-content {
-        display: contents;
-    }
-
-    :host(.invalid) .error-content svg {
-        height: ${iconSize};
-        width: ${iconSize};
-        flex: none;
-    }
-
-    :host(.invalid) .error-content path {
-        fill: ${failColor};
-    }
-
-    :host([disabled]) .error-content path {
-        fill: ${bodyDisabledFontColor};
-    }
-
-    .errortext {
-        display: none;
-    }
-
-    :host(.invalid) .errortext {
-        display: block;
-        font: ${errorTextFont};
-        color: ${failColor};
-        width: 100%;
-        position: absolute;
-        top: ${controlHeight};
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    :host(.invalid) .error-text:empty {
-        display: none;
-    }
-
-    :host([disabled]) .errortext {
-        color: ${bodyDisabledFontColor};
-    }
-
     [part='actions'] {
         display: contents;
     }
@@ -281,10 +237,6 @@ export const styles = css `
             .control {
                 height: var(--ni-private-height-within-border);
             }
-
-            :host(.invalid) .errortext {
-                top: calc(${controlHeight} - ${borderWidth});
-            }
         `), appearanceBehavior(TextFieldAppearance.frameless, css `
             .control {
                 padding-left: ${borderWidth};

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,QAAQ,EACR,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;;iBAIP,aAAa;uBACP,WAAW,MAAM,aAAa;mDACF,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;iCAYb,qBAAqB;oBAClC,eAAe;;;;+BAIJ,SAAS;;;;6BAIX,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;;;;;;;;;UAY5C,CAAA,yCAA0C,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;kBAyBpC,aAAa;;;;;;;;;;;;;;;;UAgBrB;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;;;;;;4BAUV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;kBAqBtB,QAAQ;iBACT,QAAQ;;;;;gBAKT,SAAS;;;;gBAIT,qBAAqB;;;;;;;;;gBASrB,aAAa;iBACZ,SAAS;;;eAGX,aAAa;;;;;;;;;;;iBAWX,qBAAqB;;;;;;;;UAQ5B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACC,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAEgB,WAAW;;;;;+BAKnB,WAAW;gCACV,WAAW;iCACV,WAAW;;SAEnC,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAEkB,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;+BAKnB,aAAa,MAAM,WAAW;;;;yCAIpB,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAES,WAAW;;;;;;;;4BAQf,aAAa,MAAM,WAAW;;SAEjD,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAES,WAAW;iCACV,WAAW;;;;;;SAMnC,CACQ,EACD,aAAa,CACT,GAAG,CAAA;cACT,EAAE,CAAC,iBAAiB;;;;SAIzB,EACW,GAAG,CAAA;cACT,EAAE,CAAC,gBAAgB;;;;SAIxB;AACW,cAAc;AACd,KAAK,CAAC,IAAI,CACb,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;;;iBAIP,aAAa;uBACP,WAAW,MAAM,aAAa;mDACF,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;iCAYb,qBAAqB;oBAClC,eAAe;;;;6BAIN,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;;;;;;;;;UAY5C,CAAA,yCAA0C,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;kBAyBpC,aAAa;;;;;;;;;;;;;;;;UAgBrB;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;;;;;;4BAUV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;UAiB9B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACC,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAEgB,WAAW;;;;;+BAKnB,WAAW;gCACV,WAAW;iCACV,WAAW;;SAEnC,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAEkB,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;+BAKnB,aAAa,MAAM,WAAW;;;;yCAIpB,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAES,WAAW;;;;;;SAMlC,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAES,WAAW;iCACV,WAAW;;;;;;SAMnC,CACQ,EACD,aAAa,CACT,GAAG,CAAA;cACT,EAAE,CAAC,iBAAiB;;;;SAIzB,EACW,GAAG,CAAA;cACT,EAAE,CAAC,gBAAgB;;;;SAIxB;AACW,cAAc;AACd,KAAK,CAAC,IAAI,CACb,CACJ,CAAC"}