@ni/nimble-components 32.13.0 → 33.0.0

package/dist/esm/menu-item/index.d.ts

@@ -1,4 +1,4 @@
-import { MenuItem as FoundationMenuItem } from '@microsoft/fast-foundation';
+import { MenuItem as FoundationMenuItem } from '@ni/fast-foundation';
 import '../anchored-region';
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,4 +1,4 @@
-import { DesignSystem, MenuItem as FoundationMenuItem, menuItemTemplate as template } from '@microsoft/fast-foundation';
+import { DesignSystem, MenuItem as FoundationMenuItem, menuItemTemplate as template } from '@ni/fast-foundation';
 import { arrowExpanderRight16X16 } from '@ni/nimble-tokens/dist/icons/js';
 import { styles } from './styles';
 // FAST menu item template requires an anchored region is available using tagFor DI
@@ -11,7 +11,7 @@ export class MenuItem extends FoundationMenuItem {
 }
 /**
  * A function that returns a nimble-menu-item registration for configuring the component with a DesignSystem.
- * Implements {@link @microsoft/fast-foundation#menuItemTemplate}
+ * Implements {@link @ni/fast-foundation#menuItemTemplate}
  *
  * @public
  * @remarks

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAC9B,gBAAgB,IAAI,QAAQ,EAE/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,mFAAmF;AACnF,kFAAkF;AAClF,OAAO,oBAAoB,CAAC;AAQ5B;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;CAAG;AAEnD;;;;;;;;GAQG;AACH,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAkB;IACrD,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ;IACR,MAAM;IACN,mBAAmB,EAAE,uBAAuB,CAAC,IAAI;CACpD,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 {\n    DesignSystem,\n    MenuItem as FoundationMenuItem,\n    menuItemTemplate as template,\n    type MenuItemOptions\n} from '@microsoft/fast-foundation';\nimport { arrowExpanderRight16X16 } from '@ni/nimble-tokens/dist/icons/js';\nimport { styles } from './styles';\n\n// FAST menu item template requires an anchored region is available using tagFor DI\n// Register anchored region explicitly to make sure it is defined for the template\nimport '../anchored-region';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-menu-item': MenuItem;\n    }\n}\n\n/**\n * A nimble-styled menu-item\n */\nexport class MenuItem extends FoundationMenuItem {}\n\n/**\n * A function that returns a nimble-menu-item registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#menuItemTemplate}\n *\n * @public\n * @remarks\n * Generates HTML Element: \\<nimble-menu-item\\>\n *\n */\nconst nimbleMenuItem = MenuItem.compose<MenuItemOptions>({\n    baseName: 'menu-item',\n    baseClass: FoundationMenuItem,\n    template,\n    styles,\n    expandCollapseGlyph: arrowExpanderRight16X16.data\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());\nexport const menuItemTag = 'nimble-menu-item';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAC9B,gBAAgB,IAAI,QAAQ,EAE/B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,mFAAmF;AACnF,kFAAkF;AAClF,OAAO,oBAAoB,CAAC;AAQ5B;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;CAAG;AAEnD;;;;;;;;GAQG;AACH,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAkB;IACrD,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ;IACR,MAAM;IACN,mBAAmB,EAAE,uBAAuB,CAAC,IAAI;CACpD,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 {\n    DesignSystem,\n    MenuItem as FoundationMenuItem,\n    menuItemTemplate as template,\n    type MenuItemOptions\n} from '@ni/fast-foundation';\nimport { arrowExpanderRight16X16 } from '@ni/nimble-tokens/dist/icons/js';\nimport { styles } from './styles';\n\n// FAST menu item template requires an anchored region is available using tagFor DI\n// Register anchored region explicitly to make sure it is defined for the template\nimport '../anchored-region';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-menu-item': MenuItem;\n    }\n}\n\n/**\n * A nimble-styled menu-item\n */\nexport class MenuItem extends FoundationMenuItem {}\n\n/**\n * A function that returns a nimble-menu-item registration for configuring the component with a DesignSystem.\n * Implements {@link @ni/fast-foundation#menuItemTemplate}\n *\n * @public\n * @remarks\n * Generates HTML Element: \\<nimble-menu-item\\>\n *\n */\nconst nimbleMenuItem = MenuItem.compose<MenuItemOptions>({\n    baseName: 'menu-item',\n    baseClass: FoundationMenuItem,\n    template,\n    styles,\n    expandCollapseGlyph: arrowExpanderRight16X16.data\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());\nexport const menuItemTag = 'nimble-menu-item';\n"]}

package/dist/esm/menu-item/styles.d.ts

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

package/dist/esm/menu-item/styles.js

@@ -1,4 +1,4 @@
-import { css } from '@microsoft/fast-element';
+import { css } from '@ni/fast-element';
 import { display } from '../utilities/style/display';
 import { focusVisible } from '../utilities/style/focus';
 import { controlHeight, fillSelectedColor, fillHoverColor, bodyFontColor, borderHoverColor, iconSize, bodyFont, bodyDisabledFontColor, iconColor } from '../theme-provider/design-tokens';

package/dist/esm/menu-item/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,qBAAqB,EACrB,SAAS,EACZ,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;kBAKH,aAAa;;;;;;;;;;iBAUd,aAAa;;;gBAGd,QAAQ;;YAEZ,YAAY;6BACK,gBAAgB;;;;sBAIvB,cAAc;;;sBAGd,cAAc;;;sBAGd,iBAAiB;;;iBAGtB,qBAAqB;;;;;;;;qCAQD,QAAQ;;;iCAGZ,QAAQ;;;iCAGR,QAAQ,QAAQ,QAAQ;;;;;;UAM/C,SAAS,CAAC,iBAAiB;iBACpB,QAAQ;kBACP,QAAQ;;;;;;;;;;;iBAWT,QAAQ;kBACP,QAAQ;;;;;;;;CAQzB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\n\nimport {\n    controlHeight,\n    fillSelectedColor,\n    fillHoverColor,\n    bodyFontColor,\n    borderHoverColor,\n    iconSize,\n    bodyFont,\n    bodyDisabledFontColor,\n    iconColor\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('grid')}\n\n    :host {\n        contain: layout;\n        overflow: visible;\n        height: ${controlHeight};\n        grid-template-columns: 1fr;\n        column-gap: 8px;\n        grid-template-rows: 1fr;\n        justify-items: start;\n        align-items: center;\n        padding-left: 8px;\n        padding-right: 8px;\n        margin: 0 0;\n        white-space: nowrap;\n        color: ${bodyFontColor};\n        fill: currentcolor;\n        cursor: pointer;\n        font: ${bodyFont};\n    }\n    :host(${focusVisible}) {\n        outline: 2px solid ${borderHoverColor};\n        outline-offset: -2px;\n    }\n    :host([expanded]) {\n        background: ${fillHoverColor};\n    }\n    :host(:hover) {\n        background: ${fillHoverColor};\n    }\n    :host(:active:not([expanded])) {\n        background: ${fillSelectedColor};\n    }\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n        fill: currentcolor;\n        cursor: default;\n    }\n    :host([disabled]:hover) {\n        background: transparent;\n    }\n    :host(.indent-0[aria-haspopup='menu']) {\n        grid-template-columns: 1fr ${iconSize};\n    }\n    :host(.indent-1) {\n        grid-template-columns: ${iconSize} 1fr;\n    }\n    :host(.indent-1[aria-haspopup='menu']) {\n        grid-template-columns: ${iconSize} 1fr ${iconSize};\n    }\n    [part='start'] {\n        display: contents;\n    }\n    slot[name='start']::slotted(*) {\n        ${iconColor.cssCustomProperty}: currentcolor;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n    :host(.indent-1) [part='start'] {\n        grid-column: 1;\n    }\n    :host(.indent-1) .content {\n        grid-column: 2;\n    }\n    .expand-collapse-glyph-container {\n        grid-row: 1;\n        fill: currentcolor;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n    :host(.indent-0) .expand-collapse-glyph-container {\n        grid-column: 2;\n    }\n    :host(.indent-1) .expand-collapse-glyph-container {\n        grid-column: 3;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,qBAAqB,EACrB,SAAS,EACZ,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;kBAKH,aAAa;;;;;;;;;;iBAUd,aAAa;;;gBAGd,QAAQ;;YAEZ,YAAY;6BACK,gBAAgB;;;;sBAIvB,cAAc;;;sBAGd,cAAc;;;sBAGd,iBAAiB;;;iBAGtB,qBAAqB;;;;;;;;qCAQD,QAAQ;;;iCAGZ,QAAQ;;;iCAGR,QAAQ,QAAQ,QAAQ;;;;;;UAM/C,SAAS,CAAC,iBAAiB;iBACpB,QAAQ;kBACP,QAAQ;;;;;;;;;;;iBAWT,QAAQ;kBACP,QAAQ;;;;;;;;CAQzB,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\n\nimport {\n    controlHeight,\n    fillSelectedColor,\n    fillHoverColor,\n    bodyFontColor,\n    borderHoverColor,\n    iconSize,\n    bodyFont,\n    bodyDisabledFontColor,\n    iconColor\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('grid')}\n\n    :host {\n        contain: layout;\n        overflow: visible;\n        height: ${controlHeight};\n        grid-template-columns: 1fr;\n        column-gap: 8px;\n        grid-template-rows: 1fr;\n        justify-items: start;\n        align-items: center;\n        padding-left: 8px;\n        padding-right: 8px;\n        margin: 0 0;\n        white-space: nowrap;\n        color: ${bodyFontColor};\n        fill: currentcolor;\n        cursor: pointer;\n        font: ${bodyFont};\n    }\n    :host(${focusVisible}) {\n        outline: 2px solid ${borderHoverColor};\n        outline-offset: -2px;\n    }\n    :host([expanded]) {\n        background: ${fillHoverColor};\n    }\n    :host(:hover) {\n        background: ${fillHoverColor};\n    }\n    :host(:active:not([expanded])) {\n        background: ${fillSelectedColor};\n    }\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n        fill: currentcolor;\n        cursor: default;\n    }\n    :host([disabled]:hover) {\n        background: transparent;\n    }\n    :host(.indent-0[aria-haspopup='menu']) {\n        grid-template-columns: 1fr ${iconSize};\n    }\n    :host(.indent-1) {\n        grid-template-columns: ${iconSize} 1fr;\n    }\n    :host(.indent-1[aria-haspopup='menu']) {\n        grid-template-columns: ${iconSize} 1fr ${iconSize};\n    }\n    [part='start'] {\n        display: contents;\n    }\n    slot[name='start']::slotted(*) {\n        ${iconColor.cssCustomProperty}: currentcolor;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n    :host(.indent-1) [part='start'] {\n        grid-column: 1;\n    }\n    :host(.indent-1) .content {\n        grid-column: 2;\n    }\n    .expand-collapse-glyph-container {\n        grid-row: 1;\n        fill: currentcolor;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n    :host(.indent-0) .expand-collapse-glyph-container {\n        grid-column: 2;\n    }\n    :host(.indent-1) .expand-collapse-glyph-container {\n        grid-column: 3;\n    }\n`;\n"]}

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

@@ -1,4 +1,4 @@
-import { NumberField as FoundationNumberField } from '@microsoft/fast-foundation';
+import { NumberField as FoundationNumberField } from '@ni/fast-foundation';
 import { NumberFieldAppearance } from './types';
 declare global {
     interface HTMLElementTagNameMap {
@@ -9,14 +9,14 @@ declare const NumberField_base: (abstract new (...args: any[]) => {
     errorText?: string | undefined;
     errorVisible: boolean;
     errorHasOverflow: boolean;
-    readonly $fastController: import("@microsoft/fast-element").Controller;
+    readonly $fastController: import("@ni/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;
 }) & (abstract new (...args: any[]) => {
     requiredVisible: boolean;
-    readonly $fastController: import("@microsoft/fast-element").Controller;
+    readonly $fastController: import("@ni/fast-element").Controller;
     $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
     connectedCallback(): void;
     disconnectedCallback(): void;

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

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
-import { attr, html } from '@microsoft/fast-element';
-import { DesignSystem, NumberField as FoundationNumberField } from '@microsoft/fast-foundation';
+import { attr, html } from '@ni/fast-element';
+import { DesignSystem, NumberField as FoundationNumberField } from '@ni/fast-foundation';
 import { styles } from './styles';
 import { NumberFieldAppearance } from './types';
 import { errorTextTemplate } from '../patterns/error/template';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/number-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EACH,YAAY,EACZ,WAAW,IAAI,qBAAqB,EAEvC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EACH,qBAAqB,EACrB,qBAAqB,EACxB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AAQjF;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB,CAC9C,2BAA2B,CAAC,qBAAqB,CAAC,CACrD;IAFD;;QAIW,eAAU,GAA0B,qBAAqB,CAAC,SAAS,CAAC;IAQ/E,CAAC;IANmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,qFAAqF;QACrF,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACpD,CAAC;CACJ;AARU;IADN,IAAI;+CACsE;AAU/E;;;;;;;GAOG;AACH,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAqB;IAC9D,QAAQ,EAAE,cAAc;IACxB,SAAS,EAAE,qBAAqB;IAChC,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,aAAa,EAAE,IAAI,CAAa;WACzB,SAAS;;;;;;;cAON,CAAC,CAAC,EAAE,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC;eACxC,gBAAgB;;;gBAGf,gBAAgB;YACpB,SAAS;KAChB;IACD,WAAW,EAAE,IAAI,CAAa;WACvB,SAAS;;;;;;;cAON,CAAC,CAAC,EAAE,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC;eACxC,UAAU;;gBAET,UAAU;YACd,SAAS;KAChB;IACD,GAAG,EAAE,IAAI,CAAa;WACf,sBAAsB;;;aAGpB,sBAAsB;UACzB,iBAAiB;KACtB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAC9E,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { attr, html } from '@microsoft/fast-element';\nimport {\n    DesignSystem,\n    NumberField as FoundationNumberField,\n    type NumberFieldOptions\n} from '@microsoft/fast-foundation';\nimport { styles } from './styles';\nimport { NumberFieldAppearance } from './types';\nimport { errorTextTemplate } from '../patterns/error/template';\nimport { mixinErrorPattern } from '../patterns/error/types';\nimport { buttonTag } from '../button';\nimport { iconMinusWideTag } from '../icons/minus-wide';\nimport { iconAddTag } from '../icons/add';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport {\n    numericDecrementLabel,\n    numericIncrementLabel\n} from '../label-provider/core/label-tokens';\nimport { template } from './template';\nimport { mixinRequiredVisiblePattern } from '../patterns/required-visible/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-number-field': NumberField;\n    }\n}\n\n/**\n * A nimble-styled HTML number input\n */\nexport class NumberField extends mixinErrorPattern(\n    mixinRequiredVisiblePattern(FoundationNumberField)\n) {\n    @attr\n    public appearance: NumberFieldAppearance = NumberFieldAppearance.underline;\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n\n        // This is a workaround for FAST issue: https://github.com/microsoft/fast/issues/6148\n        this.control.setAttribute('role', 'spinbutton');\n    }\n}\n\n/**\n * A function that returns a number-field registration for configuring the component with a DesignSystem.\n *\n * @public\n * @remarks\n * Generates HTML Element: \\<nimble-number-field\\>\n *\n */\nconst nimbleNumberField = NumberField.compose<NumberFieldOptions>({\n    baseName: 'number-field',\n    baseClass: FoundationNumberField,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    },\n    stepDownGlyph: html<NumberField>`\n        <${buttonTag}\n            class=\"step-up-down-button\"\n            appearance=\"ghost\"\n            content-hidden\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n        >\n            ${x => numericDecrementLabel.getValueFor(x)}\n            <${iconMinusWideTag}\n                slot=\"start\"\n            >\n            </${iconMinusWideTag}>\n        </${buttonTag}>\n    `,\n    stepUpGlyph: html<NumberField>`\n        <${buttonTag}\n            class=\"step-up-down-button\"\n            appearance=\"ghost\"\n            content-hidden\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n        >\n            ${x => numericIncrementLabel.getValueFor(x)}\n            <${iconAddTag}\n                slot=\"start\">\n            </${iconAddTag}>\n        </${buttonTag}>\n    `,\n    end: html<NumberField>`\n        <${iconExclamationMarkTag}\n            severity=\"error\"\n            class=\"error-icon\"\n        ></${iconExclamationMarkTag}>\n        ${errorTextTemplate}\n    `\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());\nexport const numberFieldTag = 'nimble-number-field';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/number-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACH,YAAY,EACZ,WAAW,IAAI,qBAAqB,EAEvC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EACH,qBAAqB,EACrB,qBAAqB,EACxB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AAQjF;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB,CAC9C,2BAA2B,CAAC,qBAAqB,CAAC,CACrD;IAFD;;QAIW,eAAU,GAA0B,qBAAqB,CAAC,SAAS,CAAC;IAQ/E,CAAC;IANmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,qFAAqF;QACrF,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACpD,CAAC;CACJ;AARU;IADN,IAAI;+CACsE;AAU/E;;;;;;;GAOG;AACH,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAqB;IAC9D,QAAQ,EAAE,cAAc;IACxB,SAAS,EAAE,qBAAqB;IAChC,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,aAAa,EAAE,IAAI,CAAa;WACzB,SAAS;;;;;;;cAON,CAAC,CAAC,EAAE,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC;eACxC,gBAAgB;;;gBAGf,gBAAgB;YACpB,SAAS;KAChB;IACD,WAAW,EAAE,IAAI,CAAa;WACvB,SAAS;;;;;;;cAON,CAAC,CAAC,EAAE,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC;eACxC,UAAU;;gBAET,UAAU;YACd,SAAS;KAChB;IACD,GAAG,EAAE,IAAI,CAAa;WACf,sBAAsB;;;aAGpB,sBAAsB;UACzB,iBAAiB;KACtB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAC9E,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { attr, html } from '@ni/fast-element';\nimport {\n    DesignSystem,\n    NumberField as FoundationNumberField,\n    type NumberFieldOptions\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { NumberFieldAppearance } from './types';\nimport { errorTextTemplate } from '../patterns/error/template';\nimport { mixinErrorPattern } from '../patterns/error/types';\nimport { buttonTag } from '../button';\nimport { iconMinusWideTag } from '../icons/minus-wide';\nimport { iconAddTag } from '../icons/add';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport {\n    numericDecrementLabel,\n    numericIncrementLabel\n} from '../label-provider/core/label-tokens';\nimport { template } from './template';\nimport { mixinRequiredVisiblePattern } from '../patterns/required-visible/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-number-field': NumberField;\n    }\n}\n\n/**\n * A nimble-styled HTML number input\n */\nexport class NumberField extends mixinErrorPattern(\n    mixinRequiredVisiblePattern(FoundationNumberField)\n) {\n    @attr\n    public appearance: NumberFieldAppearance = NumberFieldAppearance.underline;\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n\n        // This is a workaround for FAST issue: https://github.com/microsoft/fast/issues/6148\n        this.control.setAttribute('role', 'spinbutton');\n    }\n}\n\n/**\n * A function that returns a number-field registration for configuring the component with a DesignSystem.\n *\n * @public\n * @remarks\n * Generates HTML Element: \\<nimble-number-field\\>\n *\n */\nconst nimbleNumberField = NumberField.compose<NumberFieldOptions>({\n    baseName: 'number-field',\n    baseClass: FoundationNumberField,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    },\n    stepDownGlyph: html<NumberField>`\n        <${buttonTag}\n            class=\"step-up-down-button\"\n            appearance=\"ghost\"\n            content-hidden\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n        >\n            ${x => numericDecrementLabel.getValueFor(x)}\n            <${iconMinusWideTag}\n                slot=\"start\"\n            >\n            </${iconMinusWideTag}>\n        </${buttonTag}>\n    `,\n    stepUpGlyph: html<NumberField>`\n        <${buttonTag}\n            class=\"step-up-down-button\"\n            appearance=\"ghost\"\n            content-hidden\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n        >\n            ${x => numericIncrementLabel.getValueFor(x)}\n            <${iconAddTag}\n                slot=\"start\">\n            </${iconAddTag}>\n        </${buttonTag}>\n    `,\n    end: html<NumberField>`\n        <${iconExclamationMarkTag}\n            severity=\"error\"\n            class=\"error-icon\"\n        ></${iconExclamationMarkTag}>\n        ${errorTextTemplate}\n    `\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());\nexport const numberFieldTag = 'nimble-number-field';\n"]}

package/dist/esm/number-field/styles.d.ts

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

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

@@ -1,4 +1,4 @@
-import { css } from '@microsoft/fast-element';
+import { css } from '@ni/fast-element';
 import { display } from '../utilities/style/display';
 import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, controlLabelFont, controlLabelFontColor, smallDelay, bodyFont, failColor, mediumPadding, smallPadding, controlLabelDisabledFontColor } from '../theme-provider/design-tokens';
 import { appearanceBehavior } from '../utilities/style/appearance';

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/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,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,aAAa,EACb,YAAY,EACZ,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,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,cAAc,CAAC;MACvB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa;mDACqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;;iBAMrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;iCAUb,qBAAqB;mBACnC,WAAW;;;;+BAIC,gBAAgB;;;;;6BAKlB,qBAAqB;;;;+BAInB,SAAS;;;;UAI9B,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;4BAMI,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;wBAyBhB,aAAa;;;;;;;;;;;iBAWpB,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;MAOhC;AACE;sFACsF,CAAC,EAC3F;;;yBAGqB,YAAY;;;;;;;;UAQ3B,aAAa,CAAC,iBAAiB;;;;;;;;;wBASjB,YAAY;;CAEnC,CAAC,aAAa,CACX,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,KAAK,EAC3B,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;uCAKvB,WAAW;;;;;uCAKX,WAAW;;;;;;yCAMT,qBAAqB;;;;;;;uCAOvB,SAAS;;SAEvC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,OAAO,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    controlLabelFont,\n    controlLabelFontColor,\n    smallDelay,\n    bodyFont,\n    failColor,\n    mediumPadding,\n    smallPadding,\n    controlLabelDisabledFontColor\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { NumberFieldAppearance } 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-block')}\n    ${errorStyles}\n    ${requiredVisibleStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        ${userSelectNone}\n        color: ${bodyFontColor};\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-height-within-border: calc(\n            ${controlHeight} - 2 * ${borderWidth}\n        );\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n        cursor: default;\n    }\n\n    .label {\n        display: flex;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .root {\n        position: relative;\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n        border-radius: 0px;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        padding: ${borderWidth};\n    }\n\n    .root:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([readonly]) .root,\n    :host([disabled]) .root {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .root {\n        border-bottom-color: ${failColor};\n    }\n\n    .root::before {\n        ${/* Empty string causes alignment issue */ ''}\n        content: ' ';\n        color: transparent;\n        width: 0px;\n        ${userSelectNone}\n    }\n\n    .root::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        .root::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) .root::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .root::after {\n        width: 100%;\n    }\n\n    :host([readonly]:hover) .root::after,\n    :host([disabled]:hover) .root::after {\n        width: 0px;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        background: transparent;\n        color: inherit;\n        height: var(--ni-private-height-within-border);\n        width: 100%;\n        border: none;\n        padding: 0px;\n        padding-left: ${mediumPadding};\n    }\n\n    .control:hover,\n    .control:focus,\n    .control:disabled,\n    .control:active {\n        outline: none;\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .control[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .controls {\n        display: contents;\n    }\n\n    ${\n        /* We are using flex `order` to define the visual ordering of the inc/dec buttons\n         and the invalid icon because they are not \"interactive\" i.e. part of the tab order */ ''\n    }\n    .step-up {\n        order: 3;\n        padding-right: ${smallPadding};\n    }\n\n    .step-down {\n        order: 2;\n    }\n\n    .step-up-down-button {\n        ${controlHeight.cssCustomProperty}: 24px;\n    }\n\n    [part='end'] {\n        display: contents;\n    }\n\n    .error-icon {\n        order: 1;\n        margin-right: ${smallPadding};\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        NumberFieldAppearance.underline,\n        css`\n            .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        NumberFieldAppearance.block,\n        css`\n            .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .root:focus-within,\n            :host([error-visible]) .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host(:hover) .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([readonly]) .root,\n            :host([disabled]) .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n                border-color: transparent;\n            }\n\n            :host([error-visible][readonly]) .root,\n            :host([error-visible][disabled]) .root {\n                padding-bottom: 0;\n                border-bottom-color: ${failColor};\n            }\n        `\n    ),\n    appearanceBehavior(\n        NumberFieldAppearance.outline,\n        css`\n            .root {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,aAAa,EACb,YAAY,EACZ,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,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,cAAc,CAAC;MACvB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa;mDACqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;;iBAMrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;iCAUb,qBAAqB;mBACnC,WAAW;;;;+BAIC,gBAAgB;;;;;6BAKlB,qBAAqB;;;;+BAInB,SAAS;;;;UAI9B,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;4BAMI,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;wBAyBhB,aAAa;;;;;;;;;;;iBAWpB,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;MAOhC;AACE;sFACsF,CAAC,EAC3F;;;yBAGqB,YAAY;;;;;;;;UAQ3B,aAAa,CAAC,iBAAiB;;;;;;;;;wBASjB,YAAY;;CAEnC,CAAC,aAAa,CACX,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,KAAK,EAC3B,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;uCAKvB,WAAW;;;;;uCAKX,WAAW;;;;;;yCAMT,qBAAqB;;;;;;;uCAOvB,SAAS;;SAEvC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,OAAO,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    controlLabelFont,\n    controlLabelFontColor,\n    smallDelay,\n    bodyFont,\n    failColor,\n    mediumPadding,\n    smallPadding,\n    controlLabelDisabledFontColor\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { NumberFieldAppearance } 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-block')}\n    ${errorStyles}\n    ${requiredVisibleStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        ${userSelectNone}\n        color: ${bodyFontColor};\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-height-within-border: calc(\n            ${controlHeight} - 2 * ${borderWidth}\n        );\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n        cursor: default;\n    }\n\n    .label {\n        display: flex;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .root {\n        position: relative;\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n        border-radius: 0px;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        padding: ${borderWidth};\n    }\n\n    .root:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([readonly]) .root,\n    :host([disabled]) .root {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .root {\n        border-bottom-color: ${failColor};\n    }\n\n    .root::before {\n        ${/* Empty string causes alignment issue */ ''}\n        content: ' ';\n        color: transparent;\n        width: 0px;\n        ${userSelectNone}\n    }\n\n    .root::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        .root::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) .root::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .root::after {\n        width: 100%;\n    }\n\n    :host([readonly]:hover) .root::after,\n    :host([disabled]:hover) .root::after {\n        width: 0px;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        background: transparent;\n        color: inherit;\n        height: var(--ni-private-height-within-border);\n        width: 100%;\n        border: none;\n        padding: 0px;\n        padding-left: ${mediumPadding};\n    }\n\n    .control:hover,\n    .control:focus,\n    .control:disabled,\n    .control:active {\n        outline: none;\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .control[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .controls {\n        display: contents;\n    }\n\n    ${\n        /* We are using flex `order` to define the visual ordering of the inc/dec buttons\n         and the invalid icon because they are not \"interactive\" i.e. part of the tab order */ ''\n    }\n    .step-up {\n        order: 3;\n        padding-right: ${smallPadding};\n    }\n\n    .step-down {\n        order: 2;\n    }\n\n    .step-up-down-button {\n        ${controlHeight.cssCustomProperty}: 24px;\n    }\n\n    [part='end'] {\n        display: contents;\n    }\n\n    .error-icon {\n        order: 1;\n        margin-right: ${smallPadding};\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        NumberFieldAppearance.underline,\n        css`\n            .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        NumberFieldAppearance.block,\n        css`\n            .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .root:focus-within,\n            :host([error-visible]) .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host(:hover) .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([readonly]) .root,\n            :host([disabled]) .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n                border-color: transparent;\n            }\n\n            :host([error-visible][readonly]) .root,\n            :host([error-visible][disabled]) .root {\n                padding-bottom: 0;\n                border-bottom-color: ${failColor};\n            }\n        `\n    ),\n    appearanceBehavior(\n        NumberFieldAppearance.outline,\n        css`\n            .root {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    )\n);\n"]}

package/dist/esm/number-field/template.d.ts

@@ -1,8 +1,8 @@
-import type { ViewTemplate } from '@microsoft/fast-element';
-import { type FoundationElementTemplate, type NumberFieldOptions } from '@microsoft/fast-foundation';
+import type { ViewTemplate } from '@ni/fast-element';
+import { type FoundationElementTemplate, type NumberFieldOptions } from '@ni/fast-foundation';
 import type { NumberField } from '.';
 /**
- * The template for the {@link @microsoft/fast-foundation#(NumberField:class)} component.
+ * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.
  * @public
  */
 export declare const template: FoundationElementTemplate<ViewTemplate<NumberField>, NumberFieldOptions>;

package/dist/esm/number-field/template.js

@@ -1,5 +1,5 @@
-import { html, ref, slotted, when } from '@microsoft/fast-element';
-import { endSlotTemplate, startSlotTemplate } from '@microsoft/fast-foundation';
+import { html, ref, slotted, when } from '@ni/fast-element';
+import { endSlotTemplate, startSlotTemplate } from '@ni/fast-foundation';
 import { createRequiredVisibleLabelTemplate } from '../patterns/required-visible/template';
 const labelTemplate = createRequiredVisibleLabelTemplate(html `<label
         part="label"
@@ -9,7 +9,7 @@ const labelTemplate = createRequiredVisibleLabelTemplate(html `<label
         <slot ${slotted('defaultSlottedNodes')}></slot>
     </label>`);
 /**
- * The template for the {@link @microsoft/fast-foundation#(NumberField:class)} component.
+ * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.
  * @public
  */
 export const template = (context, definition) => html `

package/dist/esm/number-field/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/number-field/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, slotted, when } from '@microsoft/fast-element';\nimport type { ViewTemplate } from '@microsoft/fast-element';\nimport {\n    endSlotTemplate,\n    type FoundationElementTemplate,\n    type NumberFieldOptions,\n    startSlotTemplate\n} from '@microsoft/fast-foundation';\nimport type { NumberField } from '.';\nimport { createRequiredVisibleLabelTemplate } from '../patterns/required-visible/template';\n\nconst labelTemplate = createRequiredVisibleLabelTemplate(\n    html<NumberField>`<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\n/**\n * The template for the {@link @microsoft/fast-foundation#(NumberField:class)} component.\n * @public\n */\nexport const template: FoundationElementTemplate<\nViewTemplate<NumberField>,\nNumberFieldOptions\n> = (context, definition) => html`\n    <template class=\"${x => (x.readOnly ? 'readonly' : '')}\">\n        ${labelTemplate}\n        <div class=\"root\" part=\"root\">\n            ${startSlotTemplate(context, definition)}\n            <input\n                class=\"control\"\n                part=\"control\"\n                id=\"control\"\n                @input=\"${x => x.handleTextInput()}\"\n                @change=\"${x => x.handleChange()}\"\n                @keydown=\"${(x, c) => x.handleKeyDown(c.event as KeyboardEvent)}\"\n                @blur=\"${x => x.handleBlur()}\"\n                ?autofocus=\"${x => x.autofocus}\"\n                ?disabled=\"${x => x.disabled}\"\n                list=\"${x => x.list}\"\n                maxlength=\"${x => x.maxlength}\"\n                minlength=\"${x => x.minlength}\"\n                placeholder=\"${x => x.placeholder}\"\n                ?readonly=\"${x => x.readOnly}\"\n                ?required=\"${x => x.required}\"\n                size=\"${x => x.size}\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                min=\"${x => x.min}\"\n                max=\"${x => x.max}\"\n                step=\"${x => x.step}\"\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                ${ref('control')}\n            />\n            ${when(\n        x => !x.hideStep && !x.readOnly && !x.disabled,\n        html<NumberField>`\n                    <div class=\"controls\" part=\"controls\">\n                        <div\n                            class=\"step-up\"\n                            part=\"step-up\"\n                            @click=\"${x => x.stepUp()}\"\n                        >\n                            <slot name=\"step-up-glyph\">\n                                ${definition.stepUpGlyph || ''}\n                            </slot>\n                        </div>\n                        <div\n                            class=\"step-down\"\n                            part=\"step-down\"\n                            @click=\"${x => x.stepDown()}\"\n                        >\n                            <slot name=\"step-down-glyph\">\n                                ${definition.stepDownGlyph || ''}\n                            </slot>\n                        </div>\n                    </div>\n                `\n    )}\n            ${endSlotTemplate(context, definition)}\n        </div>\n    </template>\n`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/number-field/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, slotted, when } from '@ni/fast-element';\nimport type { ViewTemplate } from '@ni/fast-element';\nimport {\n    endSlotTemplate,\n    type FoundationElementTemplate,\n    type NumberFieldOptions,\n    startSlotTemplate\n} from '@ni/fast-foundation';\nimport type { NumberField } from '.';\nimport { createRequiredVisibleLabelTemplate } from '../patterns/required-visible/template';\n\nconst labelTemplate = createRequiredVisibleLabelTemplate(\n    html<NumberField>`<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\n/**\n * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.\n * @public\n */\nexport const template: FoundationElementTemplate<\nViewTemplate<NumberField>,\nNumberFieldOptions\n> = (context, definition) => html`\n    <template class=\"${x => (x.readOnly ? 'readonly' : '')}\">\n        ${labelTemplate}\n        <div class=\"root\" part=\"root\">\n            ${startSlotTemplate(context, definition)}\n            <input\n                class=\"control\"\n                part=\"control\"\n                id=\"control\"\n                @input=\"${x => x.handleTextInput()}\"\n                @change=\"${x => x.handleChange()}\"\n                @keydown=\"${(x, c) => x.handleKeyDown(c.event as KeyboardEvent)}\"\n                @blur=\"${x => x.handleBlur()}\"\n                ?autofocus=\"${x => x.autofocus}\"\n                ?disabled=\"${x => x.disabled}\"\n                list=\"${x => x.list}\"\n                maxlength=\"${x => x.maxlength}\"\n                minlength=\"${x => x.minlength}\"\n                placeholder=\"${x => x.placeholder}\"\n                ?readonly=\"${x => x.readOnly}\"\n                ?required=\"${x => x.required}\"\n                size=\"${x => x.size}\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                min=\"${x => x.min}\"\n                max=\"${x => x.max}\"\n                step=\"${x => x.step}\"\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                ${ref('control')}\n            />\n            ${when(\n        x => !x.hideStep && !x.readOnly && !x.disabled,\n        html<NumberField>`\n                    <div class=\"controls\" part=\"controls\">\n                        <div\n                            class=\"step-up\"\n                            part=\"step-up\"\n                            @click=\"${x => x.stepUp()}\"\n                        >\n                            <slot name=\"step-up-glyph\">\n                                ${definition.stepUpGlyph || ''}\n                            </slot>\n                        </div>\n                        <div\n                            class=\"step-down\"\n                            part=\"step-down\"\n                            @click=\"${x => x.stepDown()}\"\n                        >\n                            <slot name=\"step-down-glyph\">\n                                ${definition.stepDownGlyph || ''}\n                            </slot>\n                        </div>\n                    </div>\n                `\n    )}\n            ${endSlotTemplate(context, definition)}\n        </div>\n    </template>\n`;\n"]}

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

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

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

@@ -1,4 +1,4 @@
-import { css } from '@microsoft/fast-element';
+import { css } from '@ni/fast-element';
 import { display } from '../../utilities/style/display';
 import { focusVisible } from '../../utilities/style/focus';
 import { actionRgbPartialColor, borderHoverColor, borderRgbPartialColor, borderWidth, buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor, controlHeight, fillSelectedColor, iconColor, smallDelay, standardPadding, buttonPrimaryFontColor, buttonFillPrimaryColor, buttonFillAccentColor, buttonAccentBlockFontColor, buttonBorderAccentOutlineColor, buttonAccentOutlineFontColor } from '../../theme-provider/design-tokens';

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\nimport { focusVisible } from '../../utilities/style/focus';\nimport {\n    actionRgbPartialColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    buttonLabelFont,\n    buttonLabelFontColor,\n    buttonLabelDisabledFontColor,\n    controlHeight,\n    fillSelectedColor,\n    iconColor,\n    smallDelay,\n    standardPadding,\n    buttonPrimaryFontColor,\n    buttonFillPrimaryColor,\n    buttonFillAccentColor,\n    buttonAccentBlockFontColor,\n    buttonBorderAccentOutlineColor,\n    buttonAccentOutlineFontColor\n} from '../../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { ButtonAppearance } from './types';\nimport { accessiblyHidden } from '../../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n    @layer base, checked, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('inline-flex')}\n\n        :host {\n            background-color: transparent;\n            height: ${controlHeight};\n            color: ${buttonLabelFontColor};\n            font: ${buttonLabelFont};\n            cursor: pointer;\n            white-space: nowrap;\n            outline: none;\n            border: none;\n            ${\n                /*\n                    Not sure why but this is needed to get buttons with icons and buttons\n                    without icons to align on the same line when the button is inline-flex\n                    See: https://github.com/ni/nimble/issues/503\n                */ ''\n            }\n            vertical-align: middle;\n        }\n\n        .control {\n            background-color: transparent;\n            height: 100%;\n            width: 100%;\n            border: ${borderWidth} solid transparent;\n            color: inherit;\n            border-radius: inherit;\n            fill: inherit;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 4px;\n            cursor: inherit;\n            font: inherit;\n            outline: none;\n            margin: 0;\n            padding: 0 ${standardPadding};\n            position: relative;\n            transition:\n                box-shadow ${smallDelay} ease-in-out,\n                border-color ${smallDelay} ease-in-out,\n                background-size ${smallDelay} ease-in-out;\n            background-size: 100% 100%;\n            background-repeat: no-repeat;\n            background-position: center;\n        }\n\n        :host([content-hidden]) .control {\n            aspect-ratio: 1 / 1;\n            padding: 0px;\n        }\n\n        .control::before {\n            content: '';\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            outline: 0px solid transparent;\n            color: transparent;\n            background-clip: border-box;\n            transition: outline ${smallDelay} ease-in-out;\n        }\n\n        .content {\n            display: contents;\n        }\n\n        [part='start'] {\n            display: contents;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n\n        slot[name='start']::slotted(*) {\n            flex-shrink: 0;\n        }\n\n        :host([content-hidden]) .content {\n            ${accessiblyHidden}\n        }\n\n        [part='end'] {\n            display: contents;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n\n        slot[name='end']::slotted(*) {\n            flex-shrink: 0;\n        }\n    }\n\n    @layer hover {\n        .control:hover {\n            border-color: ${borderHoverColor};\n            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n        }\n    }\n\n    @layer focusVisible {\n        .control${focusVisible} {\n            border-color: ${borderHoverColor};\n            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n        }\n\n        .control${focusVisible}::before {\n            outline: ${borderWidth} solid ${borderHoverColor};\n            outline-offset: -3px;\n        }\n    }\n\n    @layer active {\n        .control:active {\n            box-shadow: none;\n            color: ${buttonLabelFontColor};\n            border-color: ${borderHoverColor};\n            background-image: linear-gradient(\n                ${fillSelectedColor},\n                ${fillSelectedColor}\n            );\n            background-size: calc(100% - 2px) calc(100% - 2px);\n        }\n\n        .control:active::before {\n            outline: none;\n        }\n\n        .control:active [part='start'],\n        .control:active [part='end'] {\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n    }\n\n    @layer disabled {\n        :host([disabled]) {\n            cursor: default;\n        }\n\n        :host([disabled]) .control {\n            color: ${buttonLabelDisabledFontColor};\n            box-shadow: none;\n            background-image: none;\n            background-size: 100% 100%;\n        }\n\n        :host([disabled]) .control::before {\n            box-shadow: none;\n        }\n\n        :host([disabled]) slot[name='start']::slotted(*),\n        :host([disabled]) slot[name='end']::slotted(*) {\n            opacity: 0.3;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n    }\n\n    @layer top {\n        @media (prefers-reduced-motion) {\n            .control {\n                transition-duration: 0s;\n            }\n        }\n\n        :host([content-hidden]) [part='end'] {\n            display: none;\n        }\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        ButtonAppearance.outline,\n        css`\n            @layer base {\n                .control {\n                    border-color: rgba(${actionRgbPartialColor}, 0.3);\n                }\n            }\n\n            @layer disabled {\n                :host([disabled]) .control {\n                    border-color: rgba(${borderRgbPartialColor}, 0.3);\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        ButtonAppearance.ghost,\n        css`\n            @layer disabled {\n                :host([disabled]) .control {\n                    border-color: transparent;\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        ButtonAppearance.block,\n        css`\n            @layer base {\n                .control {\n                    background-image: linear-gradient(\n                        rgba(${borderRgbPartialColor}, 0.1),\n                        rgba(${borderRgbPartialColor}, 0.1)\n                    );\n                    border-color: rgba(${borderRgbPartialColor}, 0.1);\n                }\n            }\n\n            @layer hover {\n                .control:hover {\n                    background-size: calc(100% - 4px) calc(100% - 4px);\n                }\n            }\n\n            @layer focusVisible {\n                .control${focusVisible} {\n                    background-size: calc(100% - 4px) calc(100% - 4px);\n                }\n            }\n\n            @layer disabled {\n                :host([disabled]) .control {\n                    background-image: linear-gradient(\n                        rgba(${borderRgbPartialColor}, 0.1),\n                        rgba(${borderRgbPartialColor}, 0.1)\n                    );\n                    border-color: rgba(${borderRgbPartialColor}, 0.1);\n                }\n            }\n        `\n    )\n);\n\nexport const buttonAppearanceVariantStyles = css``.withBehaviors(\n    appearanceBehavior(\n        ButtonAppearance.outline,\n        css`\n            @layer base {\n                :host([appearance-variant='primary']) .control {\n                    border-color: ${actionRgbPartialColor};\n                }\n\n                :host([appearance-variant='accent']) .control {\n                    border-color: ${buttonBorderAccentOutlineColor};\n                    color: ${buttonAccentOutlineFontColor};\n                }\n\n                :host([appearance-variant='accent']) [part='start'],\n                :host([appearance-variant='accent']) [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n                }\n            }\n\n            @layer active {\n                :host([appearance-variant='accent']) .control:active {\n                    color: ${buttonAccentOutlineFontColor};\n                }\n\n                :host([appearance-variant='accent'])\n                    .control:active\n                    [part='start'],\n                :host([appearance-variant='accent'])\n                    .control:active\n                    [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        ButtonAppearance.block,\n        css`\n            @layer base {\n                :host([appearance-variant='primary']) .control {\n                    background-image: linear-gradient(\n                        ${buttonFillPrimaryColor},\n                        ${buttonFillPrimaryColor}\n                    );\n                    color: ${buttonPrimaryFontColor};\n                    border-color: ${buttonFillPrimaryColor};\n                }\n\n                :host([appearance-variant='accent']) .control {\n                    background-image: linear-gradient(\n                        ${buttonFillAccentColor},\n                        ${buttonFillAccentColor}\n                    );\n                    color: ${buttonAccentBlockFontColor};\n                    border-color: ${buttonFillAccentColor};\n                }\n\n                :host([appearance-variant='primary']) [part='start'],\n                :host([appearance-variant='primary']) [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n                }\n\n                :host([appearance-variant='accent']) [part='start'],\n                :host([appearance-variant='accent']) [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n                }\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../../utilities/style/display';\nimport { focusVisible } from '../../utilities/style/focus';\nimport {\n    actionRgbPartialColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    buttonLabelFont,\n    buttonLabelFontColor,\n    buttonLabelDisabledFontColor,\n    controlHeight,\n    fillSelectedColor,\n    iconColor,\n    smallDelay,\n    standardPadding,\n    buttonPrimaryFontColor,\n    buttonFillPrimaryColor,\n    buttonFillAccentColor,\n    buttonAccentBlockFontColor,\n    buttonBorderAccentOutlineColor,\n    buttonAccentOutlineFontColor\n} from '../../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { ButtonAppearance } from './types';\nimport { accessiblyHidden } from '../../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n    @layer base, checked, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('inline-flex')}\n\n        :host {\n            background-color: transparent;\n            height: ${controlHeight};\n            color: ${buttonLabelFontColor};\n            font: ${buttonLabelFont};\n            cursor: pointer;\n            white-space: nowrap;\n            outline: none;\n            border: none;\n            ${\n                /*\n                    Not sure why but this is needed to get buttons with icons and buttons\n                    without icons to align on the same line when the button is inline-flex\n                    See: https://github.com/ni/nimble/issues/503\n                */ ''\n            }\n            vertical-align: middle;\n        }\n\n        .control {\n            background-color: transparent;\n            height: 100%;\n            width: 100%;\n            border: ${borderWidth} solid transparent;\n            color: inherit;\n            border-radius: inherit;\n            fill: inherit;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 4px;\n            cursor: inherit;\n            font: inherit;\n            outline: none;\n            margin: 0;\n            padding: 0 ${standardPadding};\n            position: relative;\n            transition:\n                box-shadow ${smallDelay} ease-in-out,\n                border-color ${smallDelay} ease-in-out,\n                background-size ${smallDelay} ease-in-out;\n            background-size: 100% 100%;\n            background-repeat: no-repeat;\n            background-position: center;\n        }\n\n        :host([content-hidden]) .control {\n            aspect-ratio: 1 / 1;\n            padding: 0px;\n        }\n\n        .control::before {\n            content: '';\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            outline: 0px solid transparent;\n            color: transparent;\n            background-clip: border-box;\n            transition: outline ${smallDelay} ease-in-out;\n        }\n\n        .content {\n            display: contents;\n        }\n\n        [part='start'] {\n            display: contents;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n\n        slot[name='start']::slotted(*) {\n            flex-shrink: 0;\n        }\n\n        :host([content-hidden]) .content {\n            ${accessiblyHidden}\n        }\n\n        [part='end'] {\n            display: contents;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n\n        slot[name='end']::slotted(*) {\n            flex-shrink: 0;\n        }\n    }\n\n    @layer hover {\n        .control:hover {\n            border-color: ${borderHoverColor};\n            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n        }\n    }\n\n    @layer focusVisible {\n        .control${focusVisible} {\n            border-color: ${borderHoverColor};\n            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n        }\n\n        .control${focusVisible}::before {\n            outline: ${borderWidth} solid ${borderHoverColor};\n            outline-offset: -3px;\n        }\n    }\n\n    @layer active {\n        .control:active {\n            box-shadow: none;\n            color: ${buttonLabelFontColor};\n            border-color: ${borderHoverColor};\n            background-image: linear-gradient(\n                ${fillSelectedColor},\n                ${fillSelectedColor}\n            );\n            background-size: calc(100% - 2px) calc(100% - 2px);\n        }\n\n        .control:active::before {\n            outline: none;\n        }\n\n        .control:active [part='start'],\n        .control:active [part='end'] {\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n    }\n\n    @layer disabled {\n        :host([disabled]) {\n            cursor: default;\n        }\n\n        :host([disabled]) .control {\n            color: ${buttonLabelDisabledFontColor};\n            box-shadow: none;\n            background-image: none;\n            background-size: 100% 100%;\n        }\n\n        :host([disabled]) .control::before {\n            box-shadow: none;\n        }\n\n        :host([disabled]) slot[name='start']::slotted(*),\n        :host([disabled]) slot[name='end']::slotted(*) {\n            opacity: 0.3;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n    }\n\n    @layer top {\n        @media (prefers-reduced-motion) {\n            .control {\n                transition-duration: 0s;\n            }\n        }\n\n        :host([content-hidden]) [part='end'] {\n            display: none;\n        }\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        ButtonAppearance.outline,\n        css`\n            @layer base {\n                .control {\n                    border-color: rgba(${actionRgbPartialColor}, 0.3);\n                }\n            }\n\n            @layer disabled {\n                :host([disabled]) .control {\n                    border-color: rgba(${borderRgbPartialColor}, 0.3);\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        ButtonAppearance.ghost,\n        css`\n            @layer disabled {\n                :host([disabled]) .control {\n                    border-color: transparent;\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        ButtonAppearance.block,\n        css`\n            @layer base {\n                .control {\n                    background-image: linear-gradient(\n                        rgba(${borderRgbPartialColor}, 0.1),\n                        rgba(${borderRgbPartialColor}, 0.1)\n                    );\n                    border-color: rgba(${borderRgbPartialColor}, 0.1);\n                }\n            }\n\n            @layer hover {\n                .control:hover {\n                    background-size: calc(100% - 4px) calc(100% - 4px);\n                }\n            }\n\n            @layer focusVisible {\n                .control${focusVisible} {\n                    background-size: calc(100% - 4px) calc(100% - 4px);\n                }\n            }\n\n            @layer disabled {\n                :host([disabled]) .control {\n                    background-image: linear-gradient(\n                        rgba(${borderRgbPartialColor}, 0.1),\n                        rgba(${borderRgbPartialColor}, 0.1)\n                    );\n                    border-color: rgba(${borderRgbPartialColor}, 0.1);\n                }\n            }\n        `\n    )\n);\n\nexport const buttonAppearanceVariantStyles = css``.withBehaviors(\n    appearanceBehavior(\n        ButtonAppearance.outline,\n        css`\n            @layer base {\n                :host([appearance-variant='primary']) .control {\n                    border-color: ${actionRgbPartialColor};\n                }\n\n                :host([appearance-variant='accent']) .control {\n                    border-color: ${buttonBorderAccentOutlineColor};\n                    color: ${buttonAccentOutlineFontColor};\n                }\n\n                :host([appearance-variant='accent']) [part='start'],\n                :host([appearance-variant='accent']) [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n                }\n            }\n\n            @layer active {\n                :host([appearance-variant='accent']) .control:active {\n                    color: ${buttonAccentOutlineFontColor};\n                }\n\n                :host([appearance-variant='accent'])\n                    .control:active\n                    [part='start'],\n                :host([appearance-variant='accent'])\n                    .control:active\n                    [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        ButtonAppearance.block,\n        css`\n            @layer base {\n                :host([appearance-variant='primary']) .control {\n                    background-image: linear-gradient(\n                        ${buttonFillPrimaryColor},\n                        ${buttonFillPrimaryColor}\n                    );\n                    color: ${buttonPrimaryFontColor};\n                    border-color: ${buttonFillPrimaryColor};\n                }\n\n                :host([appearance-variant='accent']) .control {\n                    background-image: linear-gradient(\n                        ${buttonFillAccentColor},\n                        ${buttonFillAccentColor}\n                    );\n                    color: ${buttonAccentBlockFontColor};\n                    border-color: ${buttonFillAccentColor};\n                }\n\n                :host([appearance-variant='primary']) [part='start'],\n                :host([appearance-variant='primary']) [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n                }\n\n                :host([appearance-variant='accent']) [part='start'],\n                :host([appearance-variant='accent']) [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n                }\n            }\n        `\n    )\n);\n"]}

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

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

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

@@ -1,4 +1,4 @@
-import { css } from '@microsoft/fast-element';
+import { css } from '@ni/fast-element';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { display } from '../../utilities/style/display';
 import { applicationBackgroundColor, bodyFont, bodyFontColor, bodyDisabledFontColor, borderHoverColor, borderWidth, controlHeight, iconSize, menuMinWidth, popupBorderColor, smallDelay, smallPadding, borderRgbPartialColor, mediumPadding, failColor, elevation2BoxShadow, placeholderFontColor, controlLabelFontColor, controlLabelFont, controlLabelDisabledFontColor } from '../../theme-provider/design-tokens';

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

@@ -1 +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,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,6BAA6B,EAChC,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,kBAAkB;AAClB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;iBAGX,aAAa;gBACd,QAAQ;;;;UAId,cAAc;qBACH,YAAY;;;mDAGkB,WAAW;;;;;;;;uBAQvC,WAAW;;;;yBAIT,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;+BAKO,SAAS;;;;;;4BAMZ,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;;;;;;YAU1B,YAAY;;;;;+BAKO,SAAS;;;;;;;;;iBASvB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;kBAQ5B,aAAa;iCACE,qBAAqB;;mBAEnC,WAAW;;;;+BAIC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;+BAMnB,SAAS;;;;;;;;;;;;;;;wBAehB,aAAa;;;;iBAIpB,qBAAqB;;;;;uBAKf,YAAY;;;;;;;;iBAQlB,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;0BAQX,YAAY;;;;uBAIf,YAAY;;;;;;;;mDAQgB,YAAY;wCACvB,YAAY;;;;;;sBAM9B,WAAW;;kBAEf,aAAa;;;;;;;;;sBAST,mBAAmB;kBACvB,WAAW,UAAU,gBAAgB;4BAC3B,0BAA0B;;;;8CAIR,aAAa;;;;yDAIF,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiCrD,oBAAoB;kBACnB,aAAa;;;;;mBAKZ,YAAY,IAAI,aAAa;;CAE/C,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,SAAS,EAC5B,GAAG,CAAA;;uCAE4B,WAAW;;;;;qCAKb,qBAAqB;;SAEjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;uCAIvB,WAAW;;;;;yCAKT,qBAAqB;;SAErD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    iconSize,\n    menuMinWidth,\n    popupBorderColor,\n    smallDelay,\n    smallPadding,\n    borderRgbPartialColor,\n    mediumPadding,\n    failColor,\n    elevation2BoxShadow,\n    placeholderFontColor,\n    controlLabelFontColor,\n    controlLabelFont,\n    controlLabelDisabledFontColor\n} from '../../theme-provider/design-tokens';\nimport { Theme } from '../../theme-provider/types';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { hexToRgbaCssColor } from '../../utilities/style/colors';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { DropdownAppearance } from './types';\nimport { userSelectNone } from '../../utilities/style/user-select';\n\n// prettier-ignore\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        color: ${bodyFontColor};\n        font: ${bodyFont};\n        position: relative;\n        flex-direction: column;\n        justify-content: flex-start;\n        ${userSelectNone}\n        min-width: ${menuMinWidth};\n        outline: none;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-focus-indicator-width: 1px;\n        --ni-private-indicator-lines-gap: 1px;\n    }\n\n    :host::before {\n        content: '';\n        position: absolute;\n        bottom: calc(${borderWidth} + var(--ni-private-indicator-lines-gap));\n        width: 0px;\n        height: 0px;\n        align-self: center;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-focus-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::before {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::before {\n        width: calc(100% - 8px);\n    }\n\n    :host([error-visible]):before {\n        border-bottom-color: ${failColor};\n    }\n\n    :host::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        align-self: center;\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        :host::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(:hover)::after,\n    :host(${focusVisible})::after {\n        width: 100%;\n    }\n\n    :host([error-visible]):after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([disabled]:hover)::after {\n        width: 0px;\n    }\n\n    .label {\n        display: flex;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .control {\n        align-items: center;\n        cursor: pointer;\n        display: flex;\n        width: 100%;\n        height: ${controlHeight};\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        background-color: transparent;\n        padding: ${borderWidth};\n    }\n\n    :host([open]:not(:hover)) .control {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([disabled]) .control {\n        cursor: default;\n        color: ${bodyDisabledFontColor};\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .control,\n    :host([error-visible][open]) .control,\n    :host([error-visible][disabled]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .selected-value {\n        flex: auto;\n        font-family: inherit;\n        text-align: start;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        padding: 0px;\n        padding-left: ${mediumPadding};\n    }\n\n    .selected-value[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .indicator {\n        flex: none;\n        margin-left: ${smallPadding};\n        padding-right: 8px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .indicator slot[name='indicator'] svg {\n        width: ${iconSize};\n        height: ${iconSize};\n        fill: ${bodyFontColor};\n    }\n\n    :host([disabled]) .indicator slot[name='indicator'] svg {\n        fill: ${bodyDisabledFontColor};\n    }\n\n    [part='end'] {\n        margin-inline-start: auto;\n    }\n\n    :host([open][position='above']) .anchored-region {\n        padding-bottom: ${smallPadding};\n    }\n\n    :host([open][position='below']) .anchored-region {\n        padding-top: ${smallPadding};\n    }\n\n    .listbox {\n        display: inline-flex;\n        flex-direction: column;\n        width: 100%;\n        --ni-private-listbox-visible-option-count: 10.5;\n        --ni-private-listbox-anchor-element-gap: ${smallPadding};\n        --ni-private-listbox-padding: ${smallPadding};\n        --ni-private-listbox-filter-height: 0px;\n        --ni-private-listbox-loading-indicator-height: 0px;\n        max-height: min(\n            calc(\n                var(--ni-private-listbox-anchor-element-gap) + \n                2 * ${borderWidth} + \n                var(--ni-private-listbox-padding) +\n                ${controlHeight} * var(--ni-private-listbox-visible-option-count) +\n                var(--ni-private-listbox-filter-height) +\n                var(--ni-private-listbox-loading-indicator-height)\n            ),\n            calc(\n                var(--ni-private-listbox-available-viewport-height) - \n                var(--ni-private-listbox-anchor-element-gap)\n            )\n        );\n        box-shadow: ${elevation2BoxShadow};\n        border: ${borderWidth} solid ${popupBorderColor};\n        background-color: ${applicationBackgroundColor};\n    }\n\n    .listbox:has(.filter-field) {\n        --ni-private-listbox-filter-height: ${controlHeight};\n    }\n\n    .listbox:has(.loading-container) {\n        --ni-private-listbox-loading-indicator-height: ${controlHeight};\n    }\n\n    :host([open][position='above']) .listbox {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    :host([open][position='below']) .listbox {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n    }\n\n    .scrollable-region {\n        overflow-y: auto;\n    }\n\n    .listbox slot {\n        display: block;\n        background: transparent;\n        padding: var(--ni-private-listbox-padding);\n    }\n\n    .listbox.empty slot {\n        display: none;\n    }\n\n    ::slotted([role='option']),\n    ::slotted(option) {\n        flex: none;\n    }\n\n    .no-results-label {\n        color: ${placeholderFontColor};\n        height: ${controlHeight};\n        display: inline-flex;\n        display: flex;\n        flex: 1 0 auto;\n        align-items: center;\n        padding: ${smallPadding} ${mediumPadding};\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.underline,\n        css`\n            .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.outline,\n        css`\n            .control {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .control:focus-within {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .listbox slot {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,6BAA6B,EAChC,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,kBAAkB;AAClB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;iBAGX,aAAa;gBACd,QAAQ;;;;UAId,cAAc;qBACH,YAAY;;;mDAGkB,WAAW;;;;;;;;uBAQvC,WAAW;;;;yBAIT,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;+BAKO,SAAS;;;;;;4BAMZ,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;;;;;;YAU1B,YAAY;;;;;+BAKO,SAAS;;;;;;;;;iBASvB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;kBAQ5B,aAAa;iCACE,qBAAqB;;mBAEnC,WAAW;;;;+BAIC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;+BAMnB,SAAS;;;;;;;;;;;;;;;wBAehB,aAAa;;;;iBAIpB,qBAAqB;;;;;uBAKf,YAAY;;;;;;;;iBAQlB,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;0BAQX,YAAY;;;;uBAIf,YAAY;;;;;;;;mDAQgB,YAAY;wCACvB,YAAY;;;;;;sBAM9B,WAAW;;kBAEf,aAAa;;;;;;;;;sBAST,mBAAmB;kBACvB,WAAW,UAAU,gBAAgB;4BAC3B,0BAA0B;;;;8CAIR,aAAa;;;;yDAIF,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiCrD,oBAAoB;kBACnB,aAAa;;;;;mBAKZ,YAAY,IAAI,aAAa;;CAE/C,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,SAAS,EAC5B,GAAG,CAAA;;uCAE4B,WAAW;;;;;qCAKb,qBAAqB;;SAEjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;uCAIvB,WAAW;;;;;yCAKT,qBAAqB;;SAErD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    iconSize,\n    menuMinWidth,\n    popupBorderColor,\n    smallDelay,\n    smallPadding,\n    borderRgbPartialColor,\n    mediumPadding,\n    failColor,\n    elevation2BoxShadow,\n    placeholderFontColor,\n    controlLabelFontColor,\n    controlLabelFont,\n    controlLabelDisabledFontColor\n} from '../../theme-provider/design-tokens';\nimport { Theme } from '../../theme-provider/types';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { hexToRgbaCssColor } from '../../utilities/style/colors';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { DropdownAppearance } from './types';\nimport { userSelectNone } from '../../utilities/style/user-select';\n\n// prettier-ignore\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        color: ${bodyFontColor};\n        font: ${bodyFont};\n        position: relative;\n        flex-direction: column;\n        justify-content: flex-start;\n        ${userSelectNone}\n        min-width: ${menuMinWidth};\n        outline: none;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-focus-indicator-width: 1px;\n        --ni-private-indicator-lines-gap: 1px;\n    }\n\n    :host::before {\n        content: '';\n        position: absolute;\n        bottom: calc(${borderWidth} + var(--ni-private-indicator-lines-gap));\n        width: 0px;\n        height: 0px;\n        align-self: center;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-focus-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::before {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::before {\n        width: calc(100% - 8px);\n    }\n\n    :host([error-visible]):before {\n        border-bottom-color: ${failColor};\n    }\n\n    :host::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        align-self: center;\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        :host::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(:hover)::after,\n    :host(${focusVisible})::after {\n        width: 100%;\n    }\n\n    :host([error-visible]):after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([disabled]:hover)::after {\n        width: 0px;\n    }\n\n    .label {\n        display: flex;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .control {\n        align-items: center;\n        cursor: pointer;\n        display: flex;\n        width: 100%;\n        height: ${controlHeight};\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        background-color: transparent;\n        padding: ${borderWidth};\n    }\n\n    :host([open]:not(:hover)) .control {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([disabled]) .control {\n        cursor: default;\n        color: ${bodyDisabledFontColor};\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .control,\n    :host([error-visible][open]) .control,\n    :host([error-visible][disabled]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .selected-value {\n        flex: auto;\n        font-family: inherit;\n        text-align: start;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        padding: 0px;\n        padding-left: ${mediumPadding};\n    }\n\n    .selected-value[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .indicator {\n        flex: none;\n        margin-left: ${smallPadding};\n        padding-right: 8px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .indicator slot[name='indicator'] svg {\n        width: ${iconSize};\n        height: ${iconSize};\n        fill: ${bodyFontColor};\n    }\n\n    :host([disabled]) .indicator slot[name='indicator'] svg {\n        fill: ${bodyDisabledFontColor};\n    }\n\n    [part='end'] {\n        margin-inline-start: auto;\n    }\n\n    :host([open][position='above']) .anchored-region {\n        padding-bottom: ${smallPadding};\n    }\n\n    :host([open][position='below']) .anchored-region {\n        padding-top: ${smallPadding};\n    }\n\n    .listbox {\n        display: inline-flex;\n        flex-direction: column;\n        width: 100%;\n        --ni-private-listbox-visible-option-count: 10.5;\n        --ni-private-listbox-anchor-element-gap: ${smallPadding};\n        --ni-private-listbox-padding: ${smallPadding};\n        --ni-private-listbox-filter-height: 0px;\n        --ni-private-listbox-loading-indicator-height: 0px;\n        max-height: min(\n            calc(\n                var(--ni-private-listbox-anchor-element-gap) + \n                2 * ${borderWidth} + \n                var(--ni-private-listbox-padding) +\n                ${controlHeight} * var(--ni-private-listbox-visible-option-count) +\n                var(--ni-private-listbox-filter-height) +\n                var(--ni-private-listbox-loading-indicator-height)\n            ),\n            calc(\n                var(--ni-private-listbox-available-viewport-height) - \n                var(--ni-private-listbox-anchor-element-gap)\n            )\n        );\n        box-shadow: ${elevation2BoxShadow};\n        border: ${borderWidth} solid ${popupBorderColor};\n        background-color: ${applicationBackgroundColor};\n    }\n\n    .listbox:has(.filter-field) {\n        --ni-private-listbox-filter-height: ${controlHeight};\n    }\n\n    .listbox:has(.loading-container) {\n        --ni-private-listbox-loading-indicator-height: ${controlHeight};\n    }\n\n    :host([open][position='above']) .listbox {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    :host([open][position='below']) .listbox {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n    }\n\n    .scrollable-region {\n        overflow-y: auto;\n    }\n\n    .listbox slot {\n        display: block;\n        background: transparent;\n        padding: var(--ni-private-listbox-padding);\n    }\n\n    .listbox.empty slot {\n        display: none;\n    }\n\n    ::slotted([role='option']),\n    ::slotted(option) {\n        flex: none;\n    }\n\n    .no-results-label {\n        color: ${placeholderFontColor};\n        height: ${controlHeight};\n        display: inline-flex;\n        display: flex;\n        flex: 1 0 auto;\n        align-items: center;\n        padding: ${smallPadding} ${mediumPadding};\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.underline,\n        css`\n            .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.outline,\n        css`\n            .control {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .control:focus-within {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .listbox slot {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}

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

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

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

@@ -1,4 +1,4 @@
-import { css } from '@microsoft/fast-element';
+import { css } from '@ni/fast-element';
 import { failColor, errorTextFont, iconSize, errorTextFontLineHeight } from '../../theme-provider/design-tokens';
 export const styles = css `
     .error-icon {

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,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;;;6BAGG,uBAAuB;;;;;;;;;;CAUnD,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    failColor,\n    errorTextFont,\n    iconSize,\n    errorTextFontLineHeight\n} from '../../theme-provider/design-tokens';\n\nexport const styles = css`\n    .error-icon {\n        display: none;\n    }\n\n    :host([error-visible]) .error-icon {\n        display: inline-flex;\n        width: ${iconSize};\n        height: ${iconSize};\n        flex: none;\n    }\n\n    .error-text {\n        display: none;\n    }\n\n    :host([error-visible]) .error-text {\n        display: block;\n        font: ${errorTextFont};\n        color: ${failColor};\n        width: 100%;\n        position: absolute;\n        bottom: calc(-1 * (${errorTextFontLineHeight} + 2px));\n        left: 0px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    :host([error-visible]) .error-text:empty {\n        display: none;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/error/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,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;;;6BAGG,uBAAuB;;;;;;;;;;CAUnD,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    failColor,\n    errorTextFont,\n    iconSize,\n    errorTextFontLineHeight\n} from '../../theme-provider/design-tokens';\n\nexport const styles = css`\n    .error-icon {\n        display: none;\n    }\n\n    :host([error-visible]) .error-icon {\n        display: inline-flex;\n        width: ${iconSize};\n        height: ${iconSize};\n        flex: none;\n    }\n\n    .error-text {\n        display: none;\n    }\n\n    :host([error-visible]) .error-text {\n        display: block;\n        font: ${errorTextFont};\n        color: ${failColor};\n        width: 100%;\n        position: absolute;\n        bottom: calc(-1 * (${errorTextFontLineHeight} + 2px));\n        left: 0px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    :host([error-visible]) .error-text:empty {\n        display: none;\n    }\n`;\n"]}

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

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

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

@@ -1,4 +1,4 @@
-import { html } from '@microsoft/fast-element';
+import { html } from '@ni/fast-element';
 import { overflow } from '../../utilities/directive/overflow';
 export const errorTextTemplate = html `
     <div

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/patterns/error/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAc;;;UAGzC,QAAQ,CAAC,kBAAkB,CAAC;iBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,gBAAgB,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;;;UAGpE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;;CAEzB,CAAC","sourcesContent":["import { html } from '@microsoft/fast-element';\nimport type { ErrorPattern } from './types';\nimport { overflow } from '../../utilities/directive/overflow';\n\nexport const errorTextTemplate = html<ErrorPattern>`\n    <div\n        class=\"error-text\"\n        ${overflow('errorHasOverflow')}\n        title=\"${x => (x.errorHasOverflow && x.errorText ? x.errorText : null)}\"\n        aria-live=\"polite\"\n    >\n        ${x => x.errorText}\n    </div>\n`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/patterns/error/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAc;;;UAGzC,QAAQ,CAAC,kBAAkB,CAAC;iBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,gBAAgB,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;;;UAGpE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;;CAEzB,CAAC","sourcesContent":["import { html } from '@ni/fast-element';\nimport type { ErrorPattern } from './types';\nimport { overflow } from '../../utilities/directive/overflow';\n\nexport const errorTextTemplate = html<ErrorPattern>`\n    <div\n        class=\"error-text\"\n        ${overflow('errorHasOverflow')}\n        title=\"${x => (x.errorHasOverflow && x.errorText ? x.errorText : null)}\"\n        aria-live=\"polite\"\n    >\n        ${x => x.errorText}\n    </div>\n`;\n"]}

package/dist/esm/patterns/error/testing/error-pattern.pageobject.d.ts

@@ -1,4 +1,4 @@
-import type { FoundationElement } from '@microsoft/fast-foundation';
+import type { FoundationElement } from '@ni/fast-foundation';
 /**
  * A page object for the elements that use the error pattern mixin.
  */

package/dist/esm/patterns/error/testing/error-pattern.pageobject.js.map

@@ -1 +1 @@
-{"version":3,"file":"error-pattern.pageobject.js","sourceRoot":"","sources":["../../../../../src/patterns/error/testing/error-pattern.pageobject.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE;;GAEG;AACH,MAAM,OAAO,sBAAsB;IAC/B,YAAoC,OAA0B;QAA1B,YAAO,GAAP,OAAO,CAAmB;IAAG,CAAC;IAE3D,kBAAkB;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACxC,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,OAAO,KAAK,CAAC;QACjB,CAAC;QACD,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC;IACrD,CAAC;IAEM,qBAAqB;QACxB,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAChD,IACI,CAAC,YAAY;eACV,gBAAgB,CAAC,YAAY,CAAC,CAAC,OAAO,KAAK,MAAM,EACtD,CAAC;YACC,OAAO,EAAE,CAAC;QACd,CAAC;QACD,OAAO,YAAY,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAClD,CAAC;IAEM,iBAAiB;QACpB,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAChD,IAAI,CAAC,YAAY,EAAE,CAAC;YAChB,MAAM,IAAI,KAAK,CAAC,8BAA8B,CAAC,CAAC;QACpD,CAAC;QACD,OAAO,YAAY,CAAC,KAAK,CAAC;IAC9B,CAAC;IAEM,wBAAwB,CAAC,KAAiB;QAC7C,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAChD,IAAI,CAAC,YAAY,EAAE,CAAC;YAChB,MAAM,IAAI,KAAK,CAAC,8BAA8B,CAAC,CAAC;QACpD,CAAC;QACD,YAAY,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAClC,cAAc,EAAE,CAAC;IACrB,CAAC;IAEO,mBAAmB;QACvB,OAAO,IAAI,CAAC,OAAO,CAAC,UAAW,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACjE,CAAC;IAEO,mBAAmB;QACvB,OAAO,IAAI,CAAC,OAAO,CAAC,UAAW,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACjE,CAAC;CACJ","sourcesContent":["import type { FoundationElement } from '@microsoft/fast-foundation';\nimport { processUpdates } from '../../../testing/async-helpers';\n\n/**\n * A page object for the elements that use the error pattern mixin.\n */\nexport class ErrorPatternPageObject {\n    public constructor(private readonly element: FoundationElement) {}\n\n    public isErrorIconVisible(): boolean {\n        const icon = this.getErrorIconElement();\n        if (!icon) {\n            return false;\n        }\n        return getComputedStyle(icon).display !== 'none';\n    }\n\n    public getDisplayedErrorText(): string {\n        const errorTextDiv = this.getErrorTextElement();\n        if (\n            !errorTextDiv\n            || getComputedStyle(errorTextDiv).display === 'none'\n        ) {\n            return '';\n        }\n        return errorTextDiv.textContent?.trim() ?? '';\n    }\n\n    public getErrorTextTitle(): string {\n        const errorTextDiv = this.getErrorTextElement();\n        if (!errorTextDiv) {\n            throw new Error('Error text element not found');\n        }\n        return errorTextDiv.title;\n    }\n\n    public dispatchEventToErrorText(event: MouseEvent): void {\n        const errorTextDiv = this.getErrorTextElement();\n        if (!errorTextDiv) {\n            throw new Error('Error text element not found');\n        }\n        errorTextDiv.dispatchEvent(event);\n        processUpdates();\n    }\n\n    private getErrorIconElement(): HTMLElement | null {\n        return this.element.shadowRoot!.querySelector('.error-icon');\n    }\n\n    private getErrorTextElement(): HTMLDivElement | null {\n        return this.element.shadowRoot!.querySelector('.error-text');\n    }\n}\n"]}
+{"version":3,"file":"error-pattern.pageobject.js","sourceRoot":"","sources":["../../../../../src/patterns/error/testing/error-pattern.pageobject.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE;;GAEG;AACH,MAAM,OAAO,sBAAsB;IAC/B,YAAoC,OAA0B;QAA1B,YAAO,GAAP,OAAO,CAAmB;IAAG,CAAC;IAE3D,kBAAkB;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACxC,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,OAAO,KAAK,CAAC;QACjB,CAAC;QACD,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC;IACrD,CAAC;IAEM,qBAAqB;QACxB,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAChD,IACI,CAAC,YAAY;eACV,gBAAgB,CAAC,YAAY,CAAC,CAAC,OAAO,KAAK,MAAM,EACtD,CAAC;YACC,OAAO,EAAE,CAAC;QACd,CAAC;QACD,OAAO,YAAY,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAClD,CAAC;IAEM,iBAAiB;QACpB,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAChD,IAAI,CAAC,YAAY,EAAE,CAAC;YAChB,MAAM,IAAI,KAAK,CAAC,8BAA8B,CAAC,CAAC;QACpD,CAAC;QACD,OAAO,YAAY,CAAC,KAAK,CAAC;IAC9B,CAAC;IAEM,wBAAwB,CAAC,KAAiB;QAC7C,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAChD,IAAI,CAAC,YAAY,EAAE,CAAC;YAChB,MAAM,IAAI,KAAK,CAAC,8BAA8B,CAAC,CAAC;QACpD,CAAC;QACD,YAAY,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAClC,cAAc,EAAE,CAAC;IACrB,CAAC;IAEO,mBAAmB;QACvB,OAAO,IAAI,CAAC,OAAO,CAAC,UAAW,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACjE,CAAC;IAEO,mBAAmB;QACvB,OAAO,IAAI,CAAC,OAAO,CAAC,UAAW,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACjE,CAAC;CACJ","sourcesContent":["import type { FoundationElement } from '@ni/fast-foundation';\nimport { processUpdates } from '../../../testing/async-helpers';\n\n/**\n * A page object for the elements that use the error pattern mixin.\n */\nexport class ErrorPatternPageObject {\n    public constructor(private readonly element: FoundationElement) {}\n\n    public isErrorIconVisible(): boolean {\n        const icon = this.getErrorIconElement();\n        if (!icon) {\n            return false;\n        }\n        return getComputedStyle(icon).display !== 'none';\n    }\n\n    public getDisplayedErrorText(): string {\n        const errorTextDiv = this.getErrorTextElement();\n        if (\n            !errorTextDiv\n            || getComputedStyle(errorTextDiv).display === 'none'\n        ) {\n            return '';\n        }\n        return errorTextDiv.textContent?.trim() ?? '';\n    }\n\n    public getErrorTextTitle(): string {\n        const errorTextDiv = this.getErrorTextElement();\n        if (!errorTextDiv) {\n            throw new Error('Error text element not found');\n        }\n        return errorTextDiv.title;\n    }\n\n    public dispatchEventToErrorText(event: MouseEvent): void {\n        const errorTextDiv = this.getErrorTextElement();\n        if (!errorTextDiv) {\n            throw new Error('Error text element not found');\n        }\n        errorTextDiv.dispatchEvent(event);\n        processUpdates();\n    }\n\n    private getErrorIconElement(): HTMLElement | null {\n        return this.element.shadowRoot!.querySelector('.error-icon');\n    }\n\n    private getErrorTextElement(): HTMLDivElement | null {\n        return this.element.shadowRoot!.querySelector('.error-text');\n    }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { FASTElement } from '@microsoft/fast-element';
+import { FASTElement } from '@ni/fast-element';
 export interface ErrorPattern {
     errorText?: string;
     errorVisible: boolean;
@@ -12,7 +12,7 @@ export declare function mixinErrorPattern<TBase extends FASTElementConstructor>(
     errorText?: string | undefined;
     errorVisible: boolean;
     errorHasOverflow: boolean;
-    readonly $fastController: import("@microsoft/fast-element").Controller;
+    readonly $fastController: import("@ni/fast-element").Controller;
     $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
     connectedCallback(): void;
     disconnectedCallback(): void;

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

@@ -1,4 +1,4 @@
-import { attr, FASTElement, observable } from '@microsoft/fast-element';
+import { attr, FASTElement, observable } from '@ni/fast-element';
 // As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
 export function mixinErrorPattern(base) {

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/error/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAWxE,4HAA4H;AAC5H,+HAA+H;AAC/H,MAAM,UAAU,iBAAiB,CAC7B,IAAW;IAEX;;;OAGG;IACH,MAAe,mBAAoB,SAAQ,IAAI;QAA/C;;YAMI;;eAEG;YACI,iBAAY,GAAG,KAAK,CAAC;YAE5B;;;eAGG;YACI,qBAAgB,GAAG,KAAK,CAAC;QACpC,CAAC;KAAA;IAED,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,CAC7B,mBAAmB,CAAC,SAAS,EAC7B,WAAW,CACd,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CACjD,mBAAmB,CAAC,SAAS,EAC7B,cAAc,CACjB,CAAC;IACF,UAAU,CAAC,mBAAmB,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAAC;IAC9D,OAAO,mBAAmB,CAAC;AAC/B,CAAC","sourcesContent":["import { attr, FASTElement, observable } from '@microsoft/fast-element';\n\nexport interface ErrorPattern {\n    errorText?: string;\n    errorVisible: boolean;\n    errorHasOverflow: boolean;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype FASTElementConstructor = abstract new (...args: any[]) => FASTElement;\n\n// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\nexport function mixinErrorPattern<TBase extends FASTElementConstructor>(\n    base: TBase\n) {\n    /**\n     * The Mixin that provides a concrete column with the API to support being resized\n     * proportionally within a Table.\n     */\n    abstract class ErrorPatternElement extends base implements ErrorPattern {\n        /**\n         * The error text that will be displayed when a component is in the error appearance\n         */\n        public errorText?: string;\n\n        /*\n         * Show the error appearance of the control\n         */\n        public errorVisible = false;\n\n        /* @internal\n         * Indicates if the error text has overflowed its container. The value should not be\n         * set directly. Instead, it is used with the `overflow` directive.\n         */\n        public errorHasOverflow = false;\n    }\n\n    attr({ attribute: 'error-text' })(\n        ErrorPatternElement.prototype,\n        'errorText'\n    );\n    attr({ attribute: 'error-visible', mode: 'boolean' })(\n        ErrorPatternElement.prototype,\n        'errorVisible'\n    );\n    observable(ErrorPatternElement.prototype, 'errorHasOverflow');\n    return ErrorPatternElement;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/error/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAWjE,4HAA4H;AAC5H,+HAA+H;AAC/H,MAAM,UAAU,iBAAiB,CAC7B,IAAW;IAEX;;;OAGG;IACH,MAAe,mBAAoB,SAAQ,IAAI;QAA/C;;YAMI;;eAEG;YACI,iBAAY,GAAG,KAAK,CAAC;YAE5B;;;eAGG;YACI,qBAAgB,GAAG,KAAK,CAAC;QACpC,CAAC;KAAA;IAED,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,CAC7B,mBAAmB,CAAC,SAAS,EAC7B,WAAW,CACd,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CACjD,mBAAmB,CAAC,SAAS,EAC7B,cAAc,CACjB,CAAC;IACF,UAAU,CAAC,mBAAmB,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAAC;IAC9D,OAAO,mBAAmB,CAAC;AAC/B,CAAC","sourcesContent":["import { attr, FASTElement, observable } from '@ni/fast-element';\n\nexport interface ErrorPattern {\n    errorText?: string;\n    errorVisible: boolean;\n    errorHasOverflow: boolean;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype FASTElementConstructor = abstract new (...args: any[]) => FASTElement;\n\n// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\nexport function mixinErrorPattern<TBase extends FASTElementConstructor>(\n    base: TBase\n) {\n    /**\n     * The Mixin that provides a concrete column with the API to support being resized\n     * proportionally within a Table.\n     */\n    abstract class ErrorPatternElement extends base implements ErrorPattern {\n        /**\n         * The error text that will be displayed when a component is in the error appearance\n         */\n        public errorText?: string;\n\n        /*\n         * Show the error appearance of the control\n         */\n        public errorVisible = false;\n\n        /* @internal\n         * Indicates if the error text has overflowed its container. The value should not be\n         * set directly. Instead, it is used with the `overflow` directive.\n         */\n        public errorHasOverflow = false;\n    }\n\n    attr({ attribute: 'error-text' })(\n        ErrorPatternElement.prototype,\n        'errorText'\n    );\n    attr({ attribute: 'error-visible', mode: 'boolean' })(\n        ErrorPatternElement.prototype,\n        'errorVisible'\n    );\n    observable(ErrorPatternElement.prototype, 'errorHasOverflow');\n    return ErrorPatternElement;\n}\n"]}

package/dist/esm/patterns/expand-collapse/styles.d.ts

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

package/dist/esm/patterns/expand-collapse/styles.js

@@ -1,4 +1,4 @@
-import { css } from '@microsoft/fast-element';
+import { css } from '@ni/fast-element';
 import { controlSlimHeight, mediumDelay } from '../../theme-provider/design-tokens';
 export const styles = css `
     :host .animating {

package/dist/esm/patterns/expand-collapse/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/expand-collapse/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,iBAAiB,EACjB,WAAW,EACd,MAAM,oCAAoC,CAAC;AAE5C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;sBAEH,WAAW;;;;kBAIf,iBAAiB;;;;;;;;;;;;;;;;;CAiBlC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    controlSlimHeight,\n    mediumDelay\n} from '../../theme-provider/design-tokens';\n\nexport const styles = css`\n    :host .animating {\n        transition: ${mediumDelay} ease-in;\n    }\n\n    .expand-collapse-button {\n        height: ${controlSlimHeight};\n        align-self: center;\n    }\n\n    .expander-icon {\n        transform: rotate(0deg);\n    }\n\n    :host([expanded]) .expander-icon {\n        transform: rotate(90deg);\n    }\n\n    @media (prefers-reduced-motion) {\n        :host .animating {\n            transition-duration: 0s;\n        }\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/expand-collapse/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,iBAAiB,EACjB,WAAW,EACd,MAAM,oCAAoC,CAAC;AAE5C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;sBAEH,WAAW;;;;kBAIf,iBAAiB;;;;;;;;;;;;;;;;;CAiBlC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    controlSlimHeight,\n    mediumDelay\n} from '../../theme-provider/design-tokens';\n\nexport const styles = css`\n    :host .animating {\n        transition: ${mediumDelay} ease-in;\n    }\n\n    .expand-collapse-button {\n        height: ${controlSlimHeight};\n        align-self: center;\n    }\n\n    .expander-icon {\n        transform: rotate(0deg);\n    }\n\n    :host([expanded]) .expander-icon {\n        transform: rotate(90deg);\n    }\n\n    @media (prefers-reduced-motion) {\n        :host .animating {\n            transition-duration: 0s;\n        }\n    }\n`;\n"]}

package/dist/esm/patterns/required-visible/styles.d.ts

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

package/dist/esm/patterns/required-visible/styles.js

@@ -1,4 +1,4 @@
-import { css } from '@microsoft/fast-element';
+import { css } from '@ni/fast-element';
 import { smallPadding } from '../../theme-provider/design-tokens';
 export const styles = css `
     .annotated-label {

package/dist/esm/patterns/required-visible/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/required-visible/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAElE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;uBAWF,YAAY;;CAElC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { smallPadding } from '../../theme-provider/design-tokens';\n\nexport const styles = css`\n    .annotated-label {\n        display: flex;\n        flex-direction: row;\n    }\n\n    .required-icon {\n        flex: none;\n        width: 5px;\n        height: 5px;\n        margin-top: 3px;\n        margin-left: ${smallPadding};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/required-visible/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAElE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;uBAWF,YAAY;;CAElC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { smallPadding } from '../../theme-provider/design-tokens';\n\nexport const styles = css`\n    .annotated-label {\n        display: flex;\n        flex-direction: row;\n    }\n\n    .required-icon {\n        flex: none;\n        width: 5px;\n        height: 5px;\n        margin-top: 3px;\n        margin-left: ${smallPadding};\n    }\n`;\n"]}

package/dist/esm/patterns/required-visible/template.d.ts

@@ -1,4 +1,4 @@
-import { ViewTemplate } from '@microsoft/fast-element';
+import { ViewTemplate } from '@ni/fast-element';
 import type { RequiredVisiblePattern } from './types';
 /**
  * Given the template for a control label, creates a new template that includes

package/dist/esm/patterns/required-visible/template.js

@@ -1,4 +1,4 @@
-import { ViewTemplate, html, when } from '@microsoft/fast-element';
+import { ViewTemplate, html, when } from '@ni/fast-element';
 import { iconAsteriskTag } from '../../icons/asterisk';
 /**
  * Given the template for a control label, creates a new template that includes

package/dist/esm/patterns/required-visible/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/patterns/required-visible/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGvD;;;;;GAKG;AACH,8CAA8C;AAC9C,MAAM,UAAU,kCAAkC,CAC9C,aAAmD;IAEnD,OAAO,IAAI,CAAA;;cAED,aAAa;cACb,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EACtB,IAAI,CAAA;mBACD,eAAe,6CAA6C,eAAe;aACjF,CACA;;KAER,CAAC;AACN,CAAC","sourcesContent":["import { ViewTemplate, html, when } from '@microsoft/fast-element';\nimport { iconAsteriskTag } from '../../icons/asterisk';\nimport type { RequiredVisiblePattern } from './types';\n\n/**\n * Given the template for a control label, creates a new template that includes\n * an icon next to the label to indicate whether or not the control is required.\n *\n * This function is intended to be used with components leveraging `mixinRequiredVisiblePattern`.\n */\n/* eslint-disable @typescript-eslint/indent */\nexport function createRequiredVisibleLabelTemplate(\n    labelTemplate: ViewTemplate<RequiredVisiblePattern>\n): ViewTemplate<RequiredVisiblePattern> {\n    return html`\n        <div class=\"annotated-label\">\n            ${labelTemplate}\n            ${when(\n                x => x.requiredVisible,\n                html`\n                <${iconAsteriskTag} class=\"required-icon\" severity=\"error\"></${iconAsteriskTag}>\n            `\n            )}\n        </div>\n    `;\n}\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/patterns/required-visible/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGvD;;;;;GAKG;AACH,8CAA8C;AAC9C,MAAM,UAAU,kCAAkC,CAC9C,aAAmD;IAEnD,OAAO,IAAI,CAAA;;cAED,aAAa;cACb,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EACtB,IAAI,CAAA;mBACD,eAAe,6CAA6C,eAAe;aACjF,CACA;;KAER,CAAC;AACN,CAAC","sourcesContent":["import { ViewTemplate, html, when } from '@ni/fast-element';\nimport { iconAsteriskTag } from '../../icons/asterisk';\nimport type { RequiredVisiblePattern } from './types';\n\n/**\n * Given the template for a control label, creates a new template that includes\n * an icon next to the label to indicate whether or not the control is required.\n *\n * This function is intended to be used with components leveraging `mixinRequiredVisiblePattern`.\n */\n/* eslint-disable @typescript-eslint/indent */\nexport function createRequiredVisibleLabelTemplate(\n    labelTemplate: ViewTemplate<RequiredVisiblePattern>\n): ViewTemplate<RequiredVisiblePattern> {\n    return html`\n        <div class=\"annotated-label\">\n            ${labelTemplate}\n            ${when(\n                x => x.requiredVisible,\n                html`\n                <${iconAsteriskTag} class=\"required-icon\" severity=\"error\"></${iconAsteriskTag}>\n            `\n            )}\n        </div>\n    `;\n}\n"]}