@ni/nimble-components 21.10.1 → 22.0.0

package/dist/esm/banner/template.js

@@ -5,7 +5,7 @@ import { iconInfoTag } from '../icons/info';
 import { iconTriangleFilledTag } from '../icons/triangle-filled';
 import { iconXmarkTag } from '../icons/xmark';
 import { BannerSeverity } from './types';
-import { errorIconLabel, informationIconLabel, popupDismissLabel, warningIconLabel } from '../label-provider/core/label-tokens';
+import { popupIconErrorLabel, popupIconInformationLabel, popupDismissLabel, popupIconWarningLabel } from '../label-provider/core/label-tokens';
 // prettier-ignore
 export const template = html `
     <div class="container"
@@ -33,13 +33,13 @@ export const template = html `
     >
         <div class="icon">
             ${when(x => x.severity === BannerSeverity.error, html `
-                <${iconExclamationMarkTag} role="img" aria-label="${x => errorIconLabel.getValueFor(x)}"></${iconExclamationMarkTag}>
+                <${iconExclamationMarkTag} role="img" aria-label="${x => popupIconErrorLabel.getValueFor(x)}"></${iconExclamationMarkTag}>
             `)}
             ${when(x => x.severity === BannerSeverity.warning, html `
-                <${iconTriangleFilledTag} role="img" aria-label="${x => warningIconLabel.getValueFor(x)}"></${iconTriangleFilledTag}>
+                <${iconTriangleFilledTag} role="img" aria-label="${x => popupIconWarningLabel.getValueFor(x)}"></${iconTriangleFilledTag}>
             `)}
             ${when(x => x.severity === BannerSeverity.information, html `
-                <${iconInfoTag} role="img" aria-label="${x => informationIconLabel.getValueFor(x)}"></${iconInfoTag}>
+                <${iconInfoTag} role="img" aria-label="${x => popupIconInformationLabel.getValueFor(x)}"></${iconInfoTag}>
             `)}
         </div>
         <div class="text">

package/dist/esm/banner/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/banner/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, when } from '@microsoft/fast-element';\nimport type { Banner } from '.';\nimport { buttonTag } from '../button';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport { iconInfoTag } from '../icons/info';\nimport { iconTriangleFilledTag } from '../icons/triangle-filled';\nimport { iconXmarkTag } from '../icons/xmark';\nimport { BannerSeverity } from './types';\nimport {\n    errorIconLabel,\n    informationIconLabel,\n    popupDismissLabel,\n    warningIconLabel\n} from '../label-provider/core/label-tokens';\n\n// prettier-ignore\nexport const template = html<Banner>`\n    <div class=\"container\"\n        role=\"status\"\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-expanded=\"${x => x.ariaExpanded}\"\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=\"titleSlot\"\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    >\n        <div class=\"icon\">\n            ${when(x => x.severity === BannerSeverity.error, html<Banner>`\n                <${iconExclamationMarkTag} role=\"img\" aria-label=\"${x => errorIconLabel.getValueFor(x)}\"></${iconExclamationMarkTag}>\n            `)}\n            ${when(x => x.severity === BannerSeverity.warning, html<Banner>`\n                <${iconTriangleFilledTag} role=\"img\" aria-label=\"${x => warningIconLabel.getValueFor(x)}\"></${iconTriangleFilledTag}>\n            `)}\n            ${when(x => x.severity === BannerSeverity.information, html<Banner>`\n                <${iconInfoTag} role=\"img\" aria-label=\"${x => informationIconLabel.getValueFor(x)}\"></${iconInfoTag}>\n            `)}\n        </div>\n        <div class=\"text\">\n            <slot name=\"title\" id=\"titleSlot\"></slot>\n            <slot></slot>\n        </div>\n        <div class=\"controls\">\n            <slot name=\"action\"></slot>\n            <div class=\"dismiss\">\n                ${when(x => !x.preventDismiss, html<Banner>`\n                    <${buttonTag} appearance=\"ghost\" content-hidden @click=\"${x => x.dismissBanner()}\">\n                        <${iconXmarkTag} slot=\"start\"></${iconXmarkTag}>\n                        ${x => popupDismissLabel.getValueFor(x)}\n                    </${buttonTag}>\n                `)}\n            </div>\n        </div>\n    </div>\n`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/banner/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, when } from '@microsoft/fast-element';\nimport type { Banner } from '.';\nimport { buttonTag } from '../button';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport { iconInfoTag } from '../icons/info';\nimport { iconTriangleFilledTag } from '../icons/triangle-filled';\nimport { iconXmarkTag } from '../icons/xmark';\nimport { BannerSeverity } from './types';\nimport {\n    popupIconErrorLabel,\n    popupIconInformationLabel,\n    popupDismissLabel,\n    popupIconWarningLabel\n} from '../label-provider/core/label-tokens';\n\n// prettier-ignore\nexport const template = html<Banner>`\n    <div class=\"container\"\n        role=\"status\"\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-expanded=\"${x => x.ariaExpanded}\"\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=\"titleSlot\"\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    >\n        <div class=\"icon\">\n            ${when(x => x.severity === BannerSeverity.error, html<Banner>`\n                <${iconExclamationMarkTag} role=\"img\" aria-label=\"${x => popupIconErrorLabel.getValueFor(x)}\"></${iconExclamationMarkTag}>\n            `)}\n            ${when(x => x.severity === BannerSeverity.warning, html<Banner>`\n                <${iconTriangleFilledTag} role=\"img\" aria-label=\"${x => popupIconWarningLabel.getValueFor(x)}\"></${iconTriangleFilledTag}>\n            `)}\n            ${when(x => x.severity === BannerSeverity.information, html<Banner>`\n                <${iconInfoTag} role=\"img\" aria-label=\"${x => popupIconInformationLabel.getValueFor(x)}\"></${iconInfoTag}>\n            `)}\n        </div>\n        <div class=\"text\">\n            <slot name=\"title\" id=\"titleSlot\"></slot>\n            <slot></slot>\n        </div>\n        <div class=\"controls\">\n            <slot name=\"action\"></slot>\n            <div class=\"dismiss\">\n                ${when(x => !x.preventDismiss, html<Banner>`\n                    <${buttonTag} appearance=\"ghost\" content-hidden @click=\"${x => x.dismissBanner()}\">\n                        <${iconXmarkTag} slot=\"start\"></${iconXmarkTag}>\n                        ${x => popupDismissLabel.getValueFor(x)}\n                    </${buttonTag}>\n                `)}\n            </div>\n        </div>\n    </div>\n`;\n"]}

package/dist/esm/combobox/index.d.ts

@@ -1,9 +1,10 @@
 import { Combobox as FoundationCombobox } from '@microsoft/fast-foundation';
 import { ToggleButton } from '../toggle-button';
 import type { ErrorPattern } from '../patterns/error/types';
-import type { DropdownPattern } from '../patterns/dropdown/types';
+import type { DropdownPattern, ListOptionOwner } from '../patterns/dropdown/types';
 import { DropdownAppearance } from '../patterns/dropdown/types';
 import type { AnchoredRegion } from '../anchored-region';
+import type { ListOption } from '../list-option';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-combobox': Combobox;
@@ -12,7 +13,7 @@ declare global {
 /**
  * A nimble-styed HTML combobox
  */
-export declare class Combobox extends FoundationCombobox implements DropdownPattern, ErrorPattern {
+export declare class Combobox extends FoundationCombobox implements DropdownPattern, ErrorPattern, ListOptionOwner {
     appearance: DropdownAppearance;
     /**
      * The ref to the internal dropdown button element.
@@ -59,6 +60,10 @@ export declare class Combobox extends FoundationCombobox implements DropdownPatt
     inputHandler(e: InputEvent): boolean | void;
     keydownHandler(e: KeyboardEvent): boolean | void;
     focusoutHandler(e: FocusEvent): boolean | void;
+    /**
+     * @internal
+     */
+    registerOption(option: ListOption): void;
     protected focusAndScrollOptionIntoView(): void;
     protected openChanged(): void;
     private regionChanged;

package/dist/esm/combobox/index.js

@@ -134,6 +134,21 @@ export class Combobox extends FoundationCombobox {
         this.emitChangeIfValueUpdated();
         return returnValue;
     }
+    /**
+     * @internal
+     */
+    registerOption(option) {
+        if (this.options.includes(option)) {
+            return;
+        }
+        // Adding an option to the end, ultimately, isn't the correct
+        // thing to do, as this will mean the option's index in the options,
+        // at least temporarily, does not match the DOM order. However, it
+        // is expected that a successive run of `slottedOptionsChanged` will
+        // correct this order issue. See 'https://github.com/ni/nimble/issues/1915'
+        // for more info.
+        this.options.push(option);
+    }
     focusAndScrollOptionIntoView() {
         if (this.open) {
             super.focusAndScrollOptionIntoView();

package/dist/esm/combobox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/combobox/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, html, observable, ref } from '@microsoft/fast-element';\nimport {\n    DesignSystem,\n    Combobox as FoundationCombobox,\n    ComboboxOptions\n} from '@microsoft/fast-foundation';\nimport {\n    keyArrowDown,\n    keyArrowUp,\n    keyEnter,\n    keySpace\n} from '@microsoft/fast-web-utilities';\nimport { ToggleButton, toggleButtonTag } from '../toggle-button';\nimport { errorTextTemplate } from '../patterns/error/template';\nimport { iconArrowExpanderDownTag } from '../icons/arrow-expander-down';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\n\nimport { styles } from './styles';\nimport type { ErrorPattern } from '../patterns/error/types';\nimport type { DropdownPattern } from '../patterns/dropdown/types';\nimport { DropdownAppearance } from '../patterns/dropdown/types';\nimport type { AnchoredRegion } from '../anchored-region';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-combobox': Combobox;\n    }\n}\n\n/**\n * A nimble-styed HTML combobox\n */\nexport class Combobox\n    extends FoundationCombobox\n    implements DropdownPattern, ErrorPattern {\n    @attr\n    public appearance: DropdownAppearance = DropdownAppearance.underline;\n\n    /**\n     * The ref to the internal dropdown button element.\n     *\n     * @internal\n     */\n    @observable\n    public readonly dropdownButton?: ToggleButton;\n\n    /**\n     * A message explaining why the value is invalid.\n     *\n     * @public\n     * @remarks\n     * HTML Attribute: error-text\n     */\n    @attr({ attribute: 'error-text' })\n    public errorText?: string;\n\n    @attr({ attribute: 'error-visible', mode: 'boolean' })\n    public errorVisible = false;\n\n    /**\n     * @internal\n     */\n    @observable\n    public region?: AnchoredRegion;\n\n    /**\n     * @internal\n     */\n    @observable\n    public controlWrapper?: HTMLElement;\n\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    public override get value(): string {\n        return super.value;\n    }\n\n    // This override is to work around an issue in FAST where an old filter value\n    // is used after programmatically setting the value property.\n    // See: https://github.com/microsoft/fast/issues/6749\n    public override set value(next: string) {\n        super.value = next;\n        // Workaround using index notation to manipulate private member\n        // Can remove when following resolved: https://github.com/microsoft/fast/issues/6749\n        // eslint-disable-next-line @typescript-eslint/dot-notation\n        this['filter'] = next;\n        this.filterOptions();\n        this.selectedIndex = this.options\n            .map(option => option.text)\n            .indexOf(this.value);\n    }\n\n    private valueUpdatedByInput = false;\n    private valueBeforeTextUpdate?: string;\n\n    // Workaround for https://github.com/microsoft/fast/issues/5123\n    public override setPositioning(): void {\n        if (!this.$fastController.isConnected) {\n            // Don't call setPositioning() until we're connected,\n            // since this.forcedPosition isn't initialized yet.\n            return;\n        }\n        super.setPositioning();\n    }\n\n    // Workaround for https://github.com/microsoft/fast/issues/5773\n    public override slottedOptionsChanged(\n        prev: HTMLElement[],\n        next: HTMLElement[]\n    ): void {\n        const value = this.value;\n        super.slottedOptionsChanged(prev, next);\n        if (value) {\n            this.value = value;\n        }\n    }\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        // Call setPositioning() after this.forcedPosition is initialized.\n        this.setPositioning();\n        this.updateInputAriaLabel();\n    }\n\n    public toggleButtonClickHandler(e: Event): void {\n        e.stopImmediatePropagation();\n    }\n\n    public toggleButtonChangeHandler(e: Event): void {\n        this.open = this.dropdownButton!.checked;\n        e.stopImmediatePropagation();\n    }\n\n    public toggleButtonKeyDownHandler(e: KeyboardEvent): boolean {\n        switch (e.key) {\n            case keyArrowUp:\n            case keyArrowDown:\n            case keySpace:\n            case keyEnter:\n                this.open = true;\n                this.stopPropagation(e);\n                return false;\n            default:\n                return true;\n        }\n    }\n\n    public override filterOptions(): void {\n        super.filterOptions();\n        const enabledOptions = this.filteredOptions.filter(o => !o.disabled);\n        this.filteredOptions = enabledOptions;\n    }\n\n    /**\n     * This is a workaround for the issue described here: https://github.com/microsoft/fast/issues/6267\n     * For now, we will update the value ourselves while a user types in text. Note that there is other\n     * implementation related to this (like the 'keydownEventHandler') needed to create the complete set\n     * of desired behavior described in the issue noted above.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type\n    public override inputHandler(e: InputEvent): boolean | void {\n        const returnValue = super.inputHandler(e);\n        if (!this.valueUpdatedByInput) {\n            this.valueBeforeTextUpdate = this.value;\n        }\n        this.valueUpdatedByInput = true;\n        // This is a workaround for this FAST issue: https://github.com/microsoft/fast/issues/6776\n        if (this.value !== this.control.value) {\n            this.focusAndScrollOptionIntoView();\n        }\n\n        this.value = this.control.value;\n        return returnValue;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type\n    public override keydownHandler(e: KeyboardEvent): boolean | void {\n        const returnValue = super.keydownHandler(e);\n        if (e.ctrlKey || e.altKey) {\n            return returnValue;\n        }\n\n        switch (e.key) {\n            case keyEnter:\n                this.emitChangeIfValueUpdated();\n                break;\n            case keyArrowDown:\n            case keyArrowUp:\n                if (this.open && this.valueUpdatedByInput) {\n                    this.valueUpdatedByInput = false;\n                }\n                break;\n            default:\n                return returnValue;\n        }\n        return returnValue;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type\n    public override focusoutHandler(e: FocusEvent): boolean | void {\n        const returnValue = super.focusoutHandler(e);\n        this.open = false;\n        this.emitChangeIfValueUpdated();\n        return returnValue;\n    }\n\n    protected override focusAndScrollOptionIntoView(): void {\n        if (this.open) {\n            super.focusAndScrollOptionIntoView();\n        }\n    }\n\n    protected override openChanged(): void {\n        super.openChanged();\n        if (this.dropdownButton) {\n            this.dropdownButton.checked = this.open;\n        }\n    }\n\n    private regionChanged(\n        _prev: AnchoredRegion | undefined,\n        _next: AnchoredRegion | undefined\n    ): void {\n        if (this.region && this.controlWrapper) {\n            this.region.anchorElement = this.controlWrapper;\n        }\n    }\n\n    private controlWrapperChanged(\n        _prev: HTMLElement | undefined,\n        _next: HTMLElement | undefined\n    ): void {\n        if (this.region && this.controlWrapper) {\n            this.region.anchorElement = this.controlWrapper;\n        }\n    }\n\n    // Workaround for https://github.com/microsoft/fast/issues/6041.\n    private ariaLabelChanged(_oldValue: string, _newValue: string): void {\n        this.updateInputAriaLabel();\n    }\n\n    private maxHeightChanged(): void {\n        this.updateListboxMaxHeightCssVariable();\n    }\n\n    private updateListboxMaxHeightCssVariable(): void {\n        if (this.listbox) {\n            this.listbox.style.setProperty(\n                '--ni-private-select-max-height',\n                `${this.maxHeight}px`\n            );\n        }\n    }\n\n    private updateInputAriaLabel(): void {\n        const inputElement = this.shadowRoot?.querySelector('.selected-value');\n        if (this.ariaLabel) {\n            inputElement?.setAttribute('aria-label', this.ariaLabel);\n        } else {\n            inputElement?.removeAttribute('aria-label');\n        }\n    }\n\n    /**\n     * This will only emit a `change` event after text entry where the text in the input prior to\n     * typing is different than the text present upon an attempt to commit (e.g. pressing <Enter>).\n     * So, for a concrete example:\n     * 1) User types 'Sue' (when Combobox input was blank).\n     * 2) User presses <Enter> -> 'change' event fires\n     * 3) User deletes 'Sue'\n     * 4) User re-types 'Sue'\n     * 5) User presses <Enter> -> NO 'change' event is fired\n     */\n    private emitChangeIfValueUpdated(): void {\n        if (this.valueUpdatedByInput) {\n            if (this.value !== this.valueBeforeTextUpdate) {\n                this.$emit('change');\n            }\n\n            this.valueUpdatedByInput = false;\n        }\n    }\n}\n\nconst nimbleCombobox = Combobox.compose<ComboboxOptions>({\n    baseName: 'combobox',\n    baseClass: FoundationCombobox,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    },\n    end: html<Combobox>`\n        <div class=\"end-slot-container\">\n            <${iconExclamationMarkTag}\n                severity=\"error\"\n                class=\"error-icon\"\n            ></${iconExclamationMarkTag}>\n            <div class=\"separator\"></div>\n            <${toggleButtonTag}\n                ${ref('dropdownButton')}\n                appearance=\"ghost\"\n                ?checked=\"${x => x.open}\"\n                ?disabled=\"${x => x.disabled}\"\n                content-hidden=\"true\"\n                @click=\"${(x, c) => x.toggleButtonClickHandler(c.event)}\"\n                @change=\"${(x, c) => x.toggleButtonChangeHandler(c.event)}\"\n                @keydown=\"${(x, c) => x.toggleButtonKeyDownHandler(c.event as KeyboardEvent)}\"\n                class=\"dropdown-button\"\n                part=\"button\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"${x => x.open}\"\n                tabindex=\"-1\"\n            >\n                <${iconArrowExpanderDownTag}\n                    slot=\"start\"\n                    class=\"dropdown-icon\"\n                >\n                </${iconArrowExpanderDownTag}>\n            </${toggleButtonTag}>\n        </div>\n        ${errorTextTemplate}\n    `\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCombobox());\nexport const comboboxTag = 'nimble-combobox';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/combobox/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAEjC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACH,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,QAAQ,EACX,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAgB,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAMlC,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAStC;;GAEG;AACH,MAAM,OAAO,QACT,SAAQ,kBAAkB;IAD9B;;QAIW,eAAU,GAAuB,kBAAkB,CAAC,SAAS,CAAC;QAqB9D,iBAAY,GAAG,KAAK,CAAC;QAc5B,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;QAqBnB,wBAAmB,GAAG,KAAK,CAAC;IAgNxC,CAAC;IAnOG,IAAoB,KAAK;QACrB,OAAO,KAAK,CAAC,KAAK,CAAC;IACvB,CAAC;IAED,6EAA6E;IAC7E,6DAA6D;IAC7D,qDAAqD;IACrD,IAAoB,KAAK,CAAC,IAAY;QAClC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;QACnB,+DAA+D;QAC/D,oFAAoF;QACpF,2DAA2D;QAC3D,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO;aAC5B,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;aAC1B,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;IAKD,+DAA+D;IAC/C,cAAc;QAC1B,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACnC,qDAAqD;YACrD,mDAAmD;YACnD,OAAO;SACV;QACD,KAAK,CAAC,cAAc,EAAE,CAAC;IAC3B,CAAC;IAED,+DAA+D;IAC/C,qBAAqB,CACjC,IAAmB,EACnB,IAAmB;QAEnB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,KAAK,CAAC,qBAAqB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACxC,IAAI,KAAK,EAAE;YACP,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SACtB;IACL,CAAC;IAEe,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,kEAAkE;QAClE,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAChC,CAAC;IAEM,wBAAwB,CAAC,CAAQ;QACpC,CAAC,CAAC,wBAAwB,EAAE,CAAC;IACjC,CAAC;IAEM,yBAAyB,CAAC,CAAQ;QACrC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,cAAe,CAAC,OAAO,CAAC;QACzC,CAAC,CAAC,wBAAwB,EAAE,CAAC;IACjC,CAAC;IAEM,0BAA0B,CAAC,CAAgB;QAC9C,QAAQ,CAAC,CAAC,GAAG,EAAE;YACX,KAAK,UAAU,CAAC;YAChB,KAAK,YAAY,CAAC;YAClB,KAAK,QAAQ,CAAC;YACd,KAAK,QAAQ;gBACT,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;gBACxB,OAAO,KAAK,CAAC;YACjB;gBACI,OAAO,IAAI,CAAC;SACnB;IACL,CAAC;IAEe,aAAa;QACzB,KAAK,CAAC,aAAa,EAAE,CAAC;QACtB,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;QACrE,IAAI,CAAC,eAAe,GAAG,cAAc,CAAC;IAC1C,CAAC;IAED;;;;;OAKG;IACH,mEAAmE;IACnD,YAAY,CAAC,CAAa;QACtC,MAAM,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAC3B,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC;SAC3C;QACD,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;QAChC,0FAA0F;QAC1F,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;YACnC,IAAI,CAAC,4BAA4B,EAAE,CAAC;SACvC;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QAChC,OAAO,WAAW,CAAC;IACvB,CAAC;IAED,mEAAmE;IACnD,cAAc,CAAC,CAAgB;QAC3C,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;QAC5C,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,EAAE;YACvB,OAAO,WAAW,CAAC;SACtB;QAED,QAAQ,CAAC,CAAC,GAAG,EAAE;YACX,KAAK,QAAQ;gBACT,IAAI,CAAC,wBAAwB,EAAE,CAAC;gBAChC,MAAM;YACV,KAAK,YAAY,CAAC;YAClB,KAAK,UAAU;gBACX,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,mBAAmB,EAAE;oBACvC,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;iBACpC;gBACD,MAAM;YACV;gBACI,OAAO,WAAW,CAAC;SAC1B;QACD,OAAO,WAAW,CAAC;IACvB,CAAC;IAED,mEAAmE;IACnD,eAAe,CAAC,CAAa;QACzC,MAAM,WAAW,GAAG,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QAC7C,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,OAAO,WAAW,CAAC;IACvB,CAAC;IAED;;OAEG;IACI,cAAc,CAAC,MAAkB;QACpC,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;YAC/B,OAAO;SACV;QAED,6DAA6D;QAC7D,oEAAoE;QACpE,kEAAkE;QAClE,oEAAoE;QACpE,2EAA2E;QAC3E,iBAAiB;QACjB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC9B,CAAC;IAEkB,4BAA4B;QAC3C,IAAI,IAAI,CAAC,IAAI,EAAE;YACX,KAAK,CAAC,4BAA4B,EAAE,CAAC;SACxC;IACL,CAAC;IAEkB,WAAW;QAC1B,KAAK,CAAC,WAAW,EAAE,CAAC;QACpB,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;SAC3C;IACL,CAAC;IAEO,aAAa,CACjB,KAAiC,EACjC,KAAiC;QAEjC,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,EAAE;YACpC,IAAI,CAAC,MAAM,CAAC,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC;SACnD;IACL,CAAC;IAEO,qBAAqB,CACzB,KAA8B,EAC9B,KAA8B;QAE9B,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,EAAE;YACpC,IAAI,CAAC,MAAM,CAAC,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC;SACnD;IACL,CAAC;IAED,gEAAgE;IACxD,gBAAgB,CAAC,SAAiB,EAAE,SAAiB;QACzD,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAChC,CAAC;IAEO,gBAAgB;QACpB,IAAI,CAAC,iCAAiC,EAAE,CAAC;IAC7C,CAAC;IAEO,iCAAiC;QACrC,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAC1B,gCAAgC,EAChC,GAAG,IAAI,CAAC,SAAS,IAAI,CACxB,CAAC;SACL;IACL,CAAC;IAEO,oBAAoB;QACxB,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;QACvE,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,YAAY,EAAE,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SAC5D;aAAM;YACH,YAAY,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;SAC/C;IACL,CAAC;IAED;;;;;;;;;OASG;IACK,wBAAwB;QAC5B,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAC1B,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,qBAAqB,EAAE;gBAC3C,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;aACxB;YAED,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;SACpC;IACL,CAAC;CACJ;AA1QG;IADC,IAAI;4CACgE;AAQrE;IADC,UAAU;gDACmC;AAU9C;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;2CACR;AAG1B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CAC1B;AAM5B;IADC,UAAU;wCACoB;AAM/B;IADC,UAAU;gDACyB;AAIpC;IADC,UAAU;6CACgB;AAuO/B,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAkB;IACrD,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,GAAG,EAAE,IAAI,CAAU;;eAER,sBAAsB;;;iBAGpB,sBAAsB;;eAExB,eAAe;kBACZ,GAAG,CAAC,gBAAgB,CAAC;;4BAEX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;6BACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;0BAElB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,KAAK,CAAC;2BAC5C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,KAAK,CAAC;4BAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,KAAsB,CAAC;;;;iCAI3D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;;mBAGzB,wBAAwB;;;;oBAIvB,wBAAwB;gBAC5B,eAAe;;UAErB,iBAAiB;KACtB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import { attr, html, observable, ref } from '@microsoft/fast-element';\nimport {\n    DesignSystem,\n    Combobox as FoundationCombobox,\n    ComboboxOptions\n} from '@microsoft/fast-foundation';\nimport {\n    keyArrowDown,\n    keyArrowUp,\n    keyEnter,\n    keySpace\n} from '@microsoft/fast-web-utilities';\nimport { ToggleButton, toggleButtonTag } from '../toggle-button';\nimport { errorTextTemplate } from '../patterns/error/template';\nimport { iconArrowExpanderDownTag } from '../icons/arrow-expander-down';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\n\nimport { styles } from './styles';\nimport type { ErrorPattern } from '../patterns/error/types';\nimport type {\n    DropdownPattern,\n    ListOptionOwner\n} from '../patterns/dropdown/types';\nimport { DropdownAppearance } from '../patterns/dropdown/types';\nimport type { AnchoredRegion } from '../anchored-region';\nimport { template } from './template';\nimport type { ListOption } from '../list-option';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-combobox': Combobox;\n    }\n}\n\n/**\n * A nimble-styed HTML combobox\n */\nexport class Combobox\n    extends FoundationCombobox\n    implements DropdownPattern, ErrorPattern, ListOptionOwner {\n    @attr\n    public appearance: DropdownAppearance = DropdownAppearance.underline;\n\n    /**\n     * The ref to the internal dropdown button element.\n     *\n     * @internal\n     */\n    @observable\n    public readonly dropdownButton?: ToggleButton;\n\n    /**\n     * A message explaining why the value is invalid.\n     *\n     * @public\n     * @remarks\n     * HTML Attribute: error-text\n     */\n    @attr({ attribute: 'error-text' })\n    public errorText?: string;\n\n    @attr({ attribute: 'error-visible', mode: 'boolean' })\n    public errorVisible = false;\n\n    /**\n     * @internal\n     */\n    @observable\n    public region?: AnchoredRegion;\n\n    /**\n     * @internal\n     */\n    @observable\n    public controlWrapper?: HTMLElement;\n\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    public override get value(): string {\n        return super.value;\n    }\n\n    // This override is to work around an issue in FAST where an old filter value\n    // is used after programmatically setting the value property.\n    // See: https://github.com/microsoft/fast/issues/6749\n    public override set value(next: string) {\n        super.value = next;\n        // Workaround using index notation to manipulate private member\n        // Can remove when following resolved: https://github.com/microsoft/fast/issues/6749\n        // eslint-disable-next-line @typescript-eslint/dot-notation\n        this['filter'] = next;\n        this.filterOptions();\n        this.selectedIndex = this.options\n            .map(option => option.text)\n            .indexOf(this.value);\n    }\n\n    private valueUpdatedByInput = false;\n    private valueBeforeTextUpdate?: string;\n\n    // Workaround for https://github.com/microsoft/fast/issues/5123\n    public override setPositioning(): void {\n        if (!this.$fastController.isConnected) {\n            // Don't call setPositioning() until we're connected,\n            // since this.forcedPosition isn't initialized yet.\n            return;\n        }\n        super.setPositioning();\n    }\n\n    // Workaround for https://github.com/microsoft/fast/issues/5773\n    public override slottedOptionsChanged(\n        prev: HTMLElement[],\n        next: HTMLElement[]\n    ): void {\n        const value = this.value;\n        super.slottedOptionsChanged(prev, next);\n        if (value) {\n            this.value = value;\n        }\n    }\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        // Call setPositioning() after this.forcedPosition is initialized.\n        this.setPositioning();\n        this.updateInputAriaLabel();\n    }\n\n    public toggleButtonClickHandler(e: Event): void {\n        e.stopImmediatePropagation();\n    }\n\n    public toggleButtonChangeHandler(e: Event): void {\n        this.open = this.dropdownButton!.checked;\n        e.stopImmediatePropagation();\n    }\n\n    public toggleButtonKeyDownHandler(e: KeyboardEvent): boolean {\n        switch (e.key) {\n            case keyArrowUp:\n            case keyArrowDown:\n            case keySpace:\n            case keyEnter:\n                this.open = true;\n                this.stopPropagation(e);\n                return false;\n            default:\n                return true;\n        }\n    }\n\n    public override filterOptions(): void {\n        super.filterOptions();\n        const enabledOptions = this.filteredOptions.filter(o => !o.disabled);\n        this.filteredOptions = enabledOptions;\n    }\n\n    /**\n     * This is a workaround for the issue described here: https://github.com/microsoft/fast/issues/6267\n     * For now, we will update the value ourselves while a user types in text. Note that there is other\n     * implementation related to this (like the 'keydownEventHandler') needed to create the complete set\n     * of desired behavior described in the issue noted above.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type\n    public override inputHandler(e: InputEvent): boolean | void {\n        const returnValue = super.inputHandler(e);\n        if (!this.valueUpdatedByInput) {\n            this.valueBeforeTextUpdate = this.value;\n        }\n        this.valueUpdatedByInput = true;\n        // This is a workaround for this FAST issue: https://github.com/microsoft/fast/issues/6776\n        if (this.value !== this.control.value) {\n            this.focusAndScrollOptionIntoView();\n        }\n\n        this.value = this.control.value;\n        return returnValue;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type\n    public override keydownHandler(e: KeyboardEvent): boolean | void {\n        const returnValue = super.keydownHandler(e);\n        if (e.ctrlKey || e.altKey) {\n            return returnValue;\n        }\n\n        switch (e.key) {\n            case keyEnter:\n                this.emitChangeIfValueUpdated();\n                break;\n            case keyArrowDown:\n            case keyArrowUp:\n                if (this.open && this.valueUpdatedByInput) {\n                    this.valueUpdatedByInput = false;\n                }\n                break;\n            default:\n                return returnValue;\n        }\n        return returnValue;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type\n    public override focusoutHandler(e: FocusEvent): boolean | void {\n        const returnValue = super.focusoutHandler(e);\n        this.open = false;\n        this.emitChangeIfValueUpdated();\n        return returnValue;\n    }\n\n    /**\n     * @internal\n     */\n    public registerOption(option: ListOption): void {\n        if (this.options.includes(option)) {\n            return;\n        }\n\n        // Adding an option to the end, ultimately, isn't the correct\n        // thing to do, as this will mean the option's index in the options,\n        // at least temporarily, does not match the DOM order. However, it\n        // is expected that a successive run of `slottedOptionsChanged` will\n        // correct this order issue. See 'https://github.com/ni/nimble/issues/1915'\n        // for more info.\n        this.options.push(option);\n    }\n\n    protected override focusAndScrollOptionIntoView(): void {\n        if (this.open) {\n            super.focusAndScrollOptionIntoView();\n        }\n    }\n\n    protected override openChanged(): void {\n        super.openChanged();\n        if (this.dropdownButton) {\n            this.dropdownButton.checked = this.open;\n        }\n    }\n\n    private regionChanged(\n        _prev: AnchoredRegion | undefined,\n        _next: AnchoredRegion | undefined\n    ): void {\n        if (this.region && this.controlWrapper) {\n            this.region.anchorElement = this.controlWrapper;\n        }\n    }\n\n    private controlWrapperChanged(\n        _prev: HTMLElement | undefined,\n        _next: HTMLElement | undefined\n    ): void {\n        if (this.region && this.controlWrapper) {\n            this.region.anchorElement = this.controlWrapper;\n        }\n    }\n\n    // Workaround for https://github.com/microsoft/fast/issues/6041.\n    private ariaLabelChanged(_oldValue: string, _newValue: string): void {\n        this.updateInputAriaLabel();\n    }\n\n    private maxHeightChanged(): void {\n        this.updateListboxMaxHeightCssVariable();\n    }\n\n    private updateListboxMaxHeightCssVariable(): void {\n        if (this.listbox) {\n            this.listbox.style.setProperty(\n                '--ni-private-select-max-height',\n                `${this.maxHeight}px`\n            );\n        }\n    }\n\n    private updateInputAriaLabel(): void {\n        const inputElement = this.shadowRoot?.querySelector('.selected-value');\n        if (this.ariaLabel) {\n            inputElement?.setAttribute('aria-label', this.ariaLabel);\n        } else {\n            inputElement?.removeAttribute('aria-label');\n        }\n    }\n\n    /**\n     * This will only emit a `change` event after text entry where the text in the input prior to\n     * typing is different than the text present upon an attempt to commit (e.g. pressing <Enter>).\n     * So, for a concrete example:\n     * 1) User types 'Sue' (when Combobox input was blank).\n     * 2) User presses <Enter> -> 'change' event fires\n     * 3) User deletes 'Sue'\n     * 4) User re-types 'Sue'\n     * 5) User presses <Enter> -> NO 'change' event is fired\n     */\n    private emitChangeIfValueUpdated(): void {\n        if (this.valueUpdatedByInput) {\n            if (this.value !== this.valueBeforeTextUpdate) {\n                this.$emit('change');\n            }\n\n            this.valueUpdatedByInput = false;\n        }\n    }\n}\n\nconst nimbleCombobox = Combobox.compose<ComboboxOptions>({\n    baseName: 'combobox',\n    baseClass: FoundationCombobox,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    },\n    end: html<Combobox>`\n        <div class=\"end-slot-container\">\n            <${iconExclamationMarkTag}\n                severity=\"error\"\n                class=\"error-icon\"\n            ></${iconExclamationMarkTag}>\n            <div class=\"separator\"></div>\n            <${toggleButtonTag}\n                ${ref('dropdownButton')}\n                appearance=\"ghost\"\n                ?checked=\"${x => x.open}\"\n                ?disabled=\"${x => x.disabled}\"\n                content-hidden=\"true\"\n                @click=\"${(x, c) => x.toggleButtonClickHandler(c.event)}\"\n                @change=\"${(x, c) => x.toggleButtonChangeHandler(c.event)}\"\n                @keydown=\"${(x, c) => x.toggleButtonKeyDownHandler(c.event as KeyboardEvent)}\"\n                class=\"dropdown-button\"\n                part=\"button\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"${x => x.open}\"\n                tabindex=\"-1\"\n            >\n                <${iconArrowExpanderDownTag}\n                    slot=\"start\"\n                    class=\"dropdown-icon\"\n                >\n                </${iconArrowExpanderDownTag}>\n            </${toggleButtonTag}>\n        </div>\n        ${errorTextTemplate}\n    `\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCombobox());\nexport const comboboxTag = 'nimble-combobox';\n"]}

package/dist/esm/label-provider/core/index.d.ts

@@ -8,9 +8,9 @@ declare const supportedLabels: {
     readonly popupDismiss: import("@microsoft/fast-foundation").DesignToken<string>;
     readonly numericDecrement: import("@microsoft/fast-foundation").DesignToken<string>;
     readonly numericIncrement: import("@microsoft/fast-foundation").DesignToken<string>;
-    readonly errorIcon: import("@microsoft/fast-foundation").DesignToken<string>;
-    readonly warningIcon: import("@microsoft/fast-foundation").DesignToken<string>;
-    readonly informationIcon: import("@microsoft/fast-foundation").DesignToken<string>;
+    readonly popupIconError: import("@microsoft/fast-foundation").DesignToken<string>;
+    readonly popupIconWarning: import("@microsoft/fast-foundation").DesignToken<string>;
+    readonly popupIconInformation: import("@microsoft/fast-foundation").DesignToken<string>;
     readonly filterSearch: import("@microsoft/fast-foundation").DesignToken<string>;
     readonly filterNoResults: import("@microsoft/fast-foundation").DesignToken<string>;
 };
@@ -21,18 +21,18 @@ export declare class LabelProviderCore extends LabelProviderBase<typeof supporte
     popupDismiss: string | undefined;
     numericDecrement: string | undefined;
     numericIncrement: string | undefined;
-    errorIcon: string | undefined;
-    warningIcon: string | undefined;
-    informationIcon: string | undefined;
+    popupIconError: string | undefined;
+    popupIconWarning: string | undefined;
+    popupIconInformation: string | undefined;
     filterSearch: string | undefined;
     filterNoResults: string | undefined;
     protected readonly supportedLabels: {
         readonly popupDismiss: import("@microsoft/fast-foundation").DesignToken<string>;
         readonly numericDecrement: import("@microsoft/fast-foundation").DesignToken<string>;
         readonly numericIncrement: import("@microsoft/fast-foundation").DesignToken<string>;
-        readonly errorIcon: import("@microsoft/fast-foundation").DesignToken<string>;
-        readonly warningIcon: import("@microsoft/fast-foundation").DesignToken<string>;
-        readonly informationIcon: import("@microsoft/fast-foundation").DesignToken<string>;
+        readonly popupIconError: import("@microsoft/fast-foundation").DesignToken<string>;
+        readonly popupIconWarning: import("@microsoft/fast-foundation").DesignToken<string>;
+        readonly popupIconInformation: import("@microsoft/fast-foundation").DesignToken<string>;
         readonly filterSearch: import("@microsoft/fast-foundation").DesignToken<string>;
         readonly filterNoResults: import("@microsoft/fast-foundation").DesignToken<string>;
     };

package/dist/esm/label-provider/core/index.js

@@ -2,14 +2,14 @@ import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
 import { DesignSystem } from '@microsoft/fast-foundation';
 import { LabelProviderBase } from '../base';
-import { popupDismissLabel, numericDecrementLabel, numericIncrementLabel, errorIconLabel, warningIconLabel, informationIconLabel, filterSearchLabel, filterNoResultsLabel } from './label-tokens';
+import { popupDismissLabel, numericDecrementLabel, numericIncrementLabel, popupIconErrorLabel, popupIconWarningLabel, popupIconInformationLabel, filterSearchLabel, filterNoResultsLabel } from './label-tokens';
 const supportedLabels = {
     popupDismiss: popupDismissLabel,
     numericDecrement: numericDecrementLabel,
     numericIncrement: numericIncrementLabel,
-    errorIcon: errorIconLabel,
-    warningIcon: warningIconLabel,
-    informationIcon: informationIconLabel,
+    popupIconError: popupIconErrorLabel,
+    popupIconWarning: popupIconWarningLabel,
+    popupIconInformation: popupIconInformationLabel,
     filterSearch: filterSearchLabel,
     filterNoResults: filterNoResultsLabel
 };
@@ -32,14 +32,14 @@ __decorate([
     attr({ attribute: 'numeric-increment' })
 ], LabelProviderCore.prototype, "numericIncrement", void 0);
 __decorate([
-    attr({ attribute: 'error-icon' })
-], LabelProviderCore.prototype, "errorIcon", void 0);
+    attr({ attribute: 'popup-icon-error' })
+], LabelProviderCore.prototype, "popupIconError", void 0);
 __decorate([
-    attr({ attribute: 'warning-icon' })
-], LabelProviderCore.prototype, "warningIcon", void 0);
+    attr({ attribute: 'popup-icon-warning' })
+], LabelProviderCore.prototype, "popupIconWarning", void 0);
 __decorate([
-    attr({ attribute: 'information-icon' })
-], LabelProviderCore.prototype, "informationIcon", void 0);
+    attr({ attribute: 'popup-icon-information' })
+], LabelProviderCore.prototype, "popupIconInformation", void 0);
 __decorate([
     attr({ attribute: 'filter-search' })
 ], LabelProviderCore.prototype, "filterSearch", void 0);

package/dist/esm/label-provider/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/label-provider/core/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAmB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EACH,iBAAiB,EACjB,qBAAqB,EACrB,qBAAqB,EACrB,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACvB,MAAM,gBAAgB,CAAC;AAQxB,MAAM,eAAe,GAAG;IACpB,YAAY,EAAE,iBAAiB;IAC/B,gBAAgB,EAAE,qBAAqB;IACvC,gBAAgB,EAAE,qBAAqB;IACvC,SAAS,EAAE,cAAc;IACzB,WAAW,EAAE,gBAAgB;IAC7B,eAAe,EAAE,oBAAoB;IACrC,YAAY,EAAE,iBAAiB;IAC/B,eAAe,EAAE,oBAAoB;CAC/B,CAAC;AAEX;;GAEG;AACH,MAAM,OAAO,iBACT,SAAQ,iBAAyC;IADrD;;QA2BgC,oBAAe,GAAG,eAAe,CAAC;IAClE,CAAC;CAAA;AAxBG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;uDACG;AAGxC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;2DACG;AAG5C;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;2DACG;AAG5C;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;oDACG;AAGrC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;sDACG;AAGvC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;0DACG;AAG3C;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;uDACG;AAGxC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;0DACE;AAK/C,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,OAAO,CAAC;IACtD,QAAQ,EAAE,qBAAqB;CAClC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,uBAAuB,EAAE,CAAC,CAAC;AACzC,MAAM,CAAC,MAAM,oBAAoB,GAAG,4BAA4B,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { DesignTokensFor, LabelProviderBase } from '../base';\nimport {\n    popupDismissLabel,\n    numericDecrementLabel,\n    numericIncrementLabel,\n    errorIconLabel,\n    warningIconLabel,\n    informationIconLabel,\n    filterSearchLabel,\n    filterNoResultsLabel\n} from './label-tokens';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-label-provider-core': LabelProviderCore;\n    }\n}\n\nconst supportedLabels = {\n    popupDismiss: popupDismissLabel,\n    numericDecrement: numericDecrementLabel,\n    numericIncrement: numericIncrementLabel,\n    errorIcon: errorIconLabel,\n    warningIcon: warningIconLabel,\n    informationIcon: informationIconLabel,\n    filterSearch: filterSearchLabel,\n    filterNoResults: filterNoResultsLabel\n} as const;\n\n/**\n * Core label provider for Nimble\n */\nexport class LabelProviderCore\n    extends LabelProviderBase<typeof supportedLabels>\n    implements DesignTokensFor<typeof supportedLabels> {\n    @attr({ attribute: 'popup-dismiss' })\n    public popupDismiss: string | undefined;\n\n    @attr({ attribute: 'numeric-decrement' })\n    public numericDecrement: string | undefined;\n\n    @attr({ attribute: 'numeric-increment' })\n    public numericIncrement: string | undefined;\n\n    @attr({ attribute: 'error-icon' })\n    public errorIcon: string | undefined;\n\n    @attr({ attribute: 'warning-icon' })\n    public warningIcon: string | undefined;\n\n    @attr({ attribute: 'information-icon' })\n    public informationIcon: string | undefined;\n\n    @attr({ attribute: 'filter-search' })\n    public filterSearch: string | undefined;\n\n    @attr({ attribute: 'filter-no-results' })\n    public filterNoResults: string | undefined;\n\n    protected override readonly supportedLabels = supportedLabels;\n}\n\nconst nimbleLabelProviderCore = LabelProviderCore.compose({\n    baseName: 'label-provider-core'\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleLabelProviderCore());\nexport const labelProviderCoreTag = 'nimble-label-provider-core';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/label-provider/core/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAmB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EACH,iBAAiB,EACjB,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,yBAAyB,EACzB,iBAAiB,EACjB,oBAAoB,EACvB,MAAM,gBAAgB,CAAC;AAQxB,MAAM,eAAe,GAAG;IACpB,YAAY,EAAE,iBAAiB;IAC/B,gBAAgB,EAAE,qBAAqB;IACvC,gBAAgB,EAAE,qBAAqB;IACvC,cAAc,EAAE,mBAAmB;IACnC,gBAAgB,EAAE,qBAAqB;IACvC,oBAAoB,EAAE,yBAAyB;IAC/C,YAAY,EAAE,iBAAiB;IAC/B,eAAe,EAAE,oBAAoB;CAC/B,CAAC;AAEX;;GAEG;AACH,MAAM,OAAO,iBACT,SAAQ,iBAAyC;IADrD;;QA2BgC,oBAAe,GAAG,eAAe,CAAC;IAClE,CAAC;CAAA;AAxBG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;uDACG;AAGxC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;2DACG;AAG5C;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;2DACG;AAG5C;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;yDACE;AAG1C;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;2DACE;AAG5C;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;+DACE;AAGhD;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;uDACG;AAGxC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;0DACE;AAK/C,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,OAAO,CAAC;IACtD,QAAQ,EAAE,qBAAqB;CAClC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,uBAAuB,EAAE,CAAC,CAAC;AACzC,MAAM,CAAC,MAAM,oBAAoB,GAAG,4BAA4B,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { DesignTokensFor, LabelProviderBase } from '../base';\nimport {\n    popupDismissLabel,\n    numericDecrementLabel,\n    numericIncrementLabel,\n    popupIconErrorLabel,\n    popupIconWarningLabel,\n    popupIconInformationLabel,\n    filterSearchLabel,\n    filterNoResultsLabel\n} from './label-tokens';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-label-provider-core': LabelProviderCore;\n    }\n}\n\nconst supportedLabels = {\n    popupDismiss: popupDismissLabel,\n    numericDecrement: numericDecrementLabel,\n    numericIncrement: numericIncrementLabel,\n    popupIconError: popupIconErrorLabel,\n    popupIconWarning: popupIconWarningLabel,\n    popupIconInformation: popupIconInformationLabel,\n    filterSearch: filterSearchLabel,\n    filterNoResults: filterNoResultsLabel\n} as const;\n\n/**\n * Core label provider for Nimble\n */\nexport class LabelProviderCore\n    extends LabelProviderBase<typeof supportedLabels>\n    implements DesignTokensFor<typeof supportedLabels> {\n    @attr({ attribute: 'popup-dismiss' })\n    public popupDismiss: string | undefined;\n\n    @attr({ attribute: 'numeric-decrement' })\n    public numericDecrement: string | undefined;\n\n    @attr({ attribute: 'numeric-increment' })\n    public numericIncrement: string | undefined;\n\n    @attr({ attribute: 'popup-icon-error' })\n    public popupIconError: string | undefined;\n\n    @attr({ attribute: 'popup-icon-warning' })\n    public popupIconWarning: string | undefined;\n\n    @attr({ attribute: 'popup-icon-information' })\n    public popupIconInformation: string | undefined;\n\n    @attr({ attribute: 'filter-search' })\n    public filterSearch: string | undefined;\n\n    @attr({ attribute: 'filter-no-results' })\n    public filterNoResults: string | undefined;\n\n    protected override readonly supportedLabels = supportedLabels;\n}\n\nconst nimbleLabelProviderCore = LabelProviderCore.compose({\n    baseName: 'label-provider-core'\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleLabelProviderCore());\nexport const labelProviderCoreTag = 'nimble-label-provider-core';\n"]}

package/dist/esm/label-provider/core/label-token-defaults.js

@@ -2,9 +2,9 @@ export const coreLabelDefaults = {
     popupDismissLabel: 'Close',
     numericIncrementLabel: 'Increment',
     numericDecrementLabel: 'Decrement',
-    errorIconLabel: 'Error',
-    warningIconLabel: 'Warning',
-    informationIconLabel: 'Information',
+    popupIconErrorLabel: 'Error',
+    popupIconWarningLabel: 'Warning',
+    popupIconInformationLabel: 'Information',
     filterSearchLabel: 'Search',
     filterNoResultsLabel: 'No items found'
 };

package/dist/esm/label-provider/core/label-token-defaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"label-token-defaults.js","sourceRoot":"","sources":["../../../../src/label-provider/core/label-token-defaults.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,iBAAiB,GAA4C;IACtE,iBAAiB,EAAE,OAAO;IAC1B,qBAAqB,EAAE,WAAW;IAClC,qBAAqB,EAAE,WAAW;IAClC,cAAc,EAAE,OAAO;IACvB,gBAAgB,EAAE,SAAS;IAC3B,oBAAoB,EAAE,aAAa;IACnC,iBAAiB,EAAE,QAAQ;IAC3B,oBAAoB,EAAE,gBAAgB;CACzC,CAAC","sourcesContent":["import type * as TokensNamespace from './label-tokens';\n\ntype TokenName = keyof typeof TokensNamespace;\n\nexport const coreLabelDefaults: { readonly [key in TokenName]: string } = {\n    popupDismissLabel: 'Close',\n    numericIncrementLabel: 'Increment',\n    numericDecrementLabel: 'Decrement',\n    errorIconLabel: 'Error',\n    warningIconLabel: 'Warning',\n    informationIconLabel: 'Information',\n    filterSearchLabel: 'Search',\n    filterNoResultsLabel: 'No items found'\n};\n"]}
+{"version":3,"file":"label-token-defaults.js","sourceRoot":"","sources":["../../../../src/label-provider/core/label-token-defaults.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,iBAAiB,GAA4C;IACtE,iBAAiB,EAAE,OAAO;IAC1B,qBAAqB,EAAE,WAAW;IAClC,qBAAqB,EAAE,WAAW;IAClC,mBAAmB,EAAE,OAAO;IAC5B,qBAAqB,EAAE,SAAS;IAChC,yBAAyB,EAAE,aAAa;IACxC,iBAAiB,EAAE,QAAQ;IAC3B,oBAAoB,EAAE,gBAAgB;CACzC,CAAC","sourcesContent":["import type * as TokensNamespace from './label-tokens';\n\ntype TokenName = keyof typeof TokensNamespace;\n\nexport const coreLabelDefaults: { readonly [key in TokenName]: string } = {\n    popupDismissLabel: 'Close',\n    numericIncrementLabel: 'Increment',\n    numericDecrementLabel: 'Decrement',\n    popupIconErrorLabel: 'Error',\n    popupIconWarningLabel: 'Warning',\n    popupIconInformationLabel: 'Information',\n    filterSearchLabel: 'Search',\n    filterNoResultsLabel: 'No items found'\n};\n"]}

package/dist/esm/label-provider/core/label-tokens.d.ts

@@ -2,8 +2,8 @@ import { DesignToken } from '@microsoft/fast-foundation';
 export declare const popupDismissLabel: DesignToken<string>;
 export declare const numericDecrementLabel: DesignToken<string>;
 export declare const numericIncrementLabel: DesignToken<string>;
-export declare const errorIconLabel: DesignToken<string>;
-export declare const warningIconLabel: DesignToken<string>;
-export declare const informationIconLabel: DesignToken<string>;
+export declare const popupIconErrorLabel: DesignToken<string>;
+export declare const popupIconWarningLabel: DesignToken<string>;
+export declare const popupIconInformationLabel: DesignToken<string>;
 export declare const filterSearchLabel: DesignToken<string>;
 export declare const filterNoResultsLabel: DesignToken<string>;

package/dist/esm/label-provider/core/label-tokens.js

@@ -12,18 +12,18 @@ export const numericIncrementLabel = DesignToken.create({
     name: 'numeric-increment-label',
     cssCustomPropertyName: null
 }).withDefault(coreLabelDefaults.numericIncrementLabel);
-export const errorIconLabel = DesignToken.create({
-    name: 'error-icon-label',
+export const popupIconErrorLabel = DesignToken.create({
+    name: 'popup-icon-error-label',
     cssCustomPropertyName: null
-}).withDefault(coreLabelDefaults.errorIconLabel);
-export const warningIconLabel = DesignToken.create({
-    name: 'warning-icon-label',
+}).withDefault(coreLabelDefaults.popupIconErrorLabel);
+export const popupIconWarningLabel = DesignToken.create({
+    name: 'popup-icon-warning-label',
     cssCustomPropertyName: null
-}).withDefault(coreLabelDefaults.warningIconLabel);
-export const informationIconLabel = DesignToken.create({
-    name: 'information-icon-label',
+}).withDefault(coreLabelDefaults.popupIconWarningLabel);
+export const popupIconInformationLabel = DesignToken.create({
+    name: 'popup-icon-information-label',
     cssCustomPropertyName: null
-}).withDefault(coreLabelDefaults.informationIconLabel);
+}).withDefault(coreLabelDefaults.popupIconInformationLabel);
 export const filterSearchLabel = DesignToken.create({
     name: 'filter-search-label',
     cssCustomPropertyName: null

package/dist/esm/label-provider/core/label-tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"label-tokens.js","sourceRoot":"","sources":["../../../../src/label-provider/core/label-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAM,CAAS;IACxD,IAAI,EAAE,qBAAqB;IAC3B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;AAEpD,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC5D,IAAI,EAAE,yBAAyB;IAC/B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC5D,IAAI,EAAE,yBAAyB;IAC/B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,cAAc,GAAG,WAAW,CAAC,MAAM,CAAS;IACrD,IAAI,EAAE,kBAAkB;IACxB,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;AAEjD,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC,MAAM,CAAS;IACvD,IAAI,EAAE,oBAAoB;IAC1B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;AAEnD,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC3D,IAAI,EAAE,wBAAwB;IAC9B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;AAEvD,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAM,CAAS;IACxD,IAAI,EAAE,qBAAqB;IAC3B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;AAEpD,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC3D,IAAI,EAAE,yBAAyB;IAC/B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC","sourcesContent":["import { DesignToken } from '@microsoft/fast-foundation';\nimport { coreLabelDefaults } from './label-token-defaults';\n\nexport const popupDismissLabel = DesignToken.create<string>({\n    name: 'popup-dismiss-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupDismissLabel);\n\nexport const numericDecrementLabel = DesignToken.create<string>({\n    name: 'numeric-decrement-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.numericDecrementLabel);\n\nexport const numericIncrementLabel = DesignToken.create<string>({\n    name: 'numeric-increment-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.numericIncrementLabel);\n\nexport const errorIconLabel = DesignToken.create<string>({\n    name: 'error-icon-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.errorIconLabel);\n\nexport const warningIconLabel = DesignToken.create<string>({\n    name: 'warning-icon-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.warningIconLabel);\n\nexport const informationIconLabel = DesignToken.create<string>({\n    name: 'information-icon-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.informationIconLabel);\n\nexport const filterSearchLabel = DesignToken.create<string>({\n    name: 'filter-search-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.filterSearchLabel);\n\nexport const filterNoResultsLabel = DesignToken.create<string>({\n    name: 'filter-no-results-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.filterNoResultsLabel);\n"]}
+{"version":3,"file":"label-tokens.js","sourceRoot":"","sources":["../../../../src/label-provider/core/label-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAM,CAAS;IACxD,IAAI,EAAE,qBAAqB;IAC3B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;AAEpD,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC5D,IAAI,EAAE,yBAAyB;IAC/B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC5D,IAAI,EAAE,yBAAyB;IAC/B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC1D,IAAI,EAAE,wBAAwB;IAC9B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;AAEtD,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC5D,IAAI,EAAE,0BAA0B;IAChC,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,yBAAyB,GAAG,WAAW,CAAC,MAAM,CAAS;IAChE,IAAI,EAAE,8BAA8B;IACpC,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,yBAAyB,CAAC,CAAC;AAE5D,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAM,CAAS;IACxD,IAAI,EAAE,qBAAqB;IAC3B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;AAEpD,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC3D,IAAI,EAAE,yBAAyB;IAC/B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC","sourcesContent":["import { DesignToken } from '@microsoft/fast-foundation';\nimport { coreLabelDefaults } from './label-token-defaults';\n\nexport const popupDismissLabel = DesignToken.create<string>({\n    name: 'popup-dismiss-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupDismissLabel);\n\nexport const numericDecrementLabel = DesignToken.create<string>({\n    name: 'numeric-decrement-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.numericDecrementLabel);\n\nexport const numericIncrementLabel = DesignToken.create<string>({\n    name: 'numeric-increment-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.numericIncrementLabel);\n\nexport const popupIconErrorLabel = DesignToken.create<string>({\n    name: 'popup-icon-error-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupIconErrorLabel);\n\nexport const popupIconWarningLabel = DesignToken.create<string>({\n    name: 'popup-icon-warning-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupIconWarningLabel);\n\nexport const popupIconInformationLabel = DesignToken.create<string>({\n    name: 'popup-icon-information-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupIconInformationLabel);\n\nexport const filterSearchLabel = DesignToken.create<string>({\n    name: 'filter-search-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.filterSearchLabel);\n\nexport const filterNoResultsLabel = DesignToken.create<string>({\n    name: 'filter-no-results-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.filterNoResultsLabel);\n"]}

package/dist/esm/list-option/index.d.ts

@@ -31,5 +31,7 @@ export declare class ListOption extends FoundationListboxOption {
     hasOverflow: boolean;
     /** @internal */
     get elementTextContent(): string;
+    connectedCallback(): void;
+    private isListOptionOwner;
 }
 export declare const listOptionTag = "nimble-list-option";

package/dist/esm/list-option/index.js

@@ -36,6 +36,18 @@ export class ListOption extends FoundationListboxOption {
             .map(node => node.textContent?.trim())
             .join(' ');
     }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.isListOptionOwner(this.parentElement)) {
+            this.parentElement.registerOption(this);
+        }
+    }
+    isListOptionOwner(parent) {
+        if (!parent) {
+            return false;
+        }
+        return typeof parent.registerOption === 'function';
+    }
 }
 __decorate([
     attr({ mode: 'boolean' })

package/dist/esm/list-option/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/list-option/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,YAAY,EACZ,aAAa,IAAI,uBAAuB,EAC3C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,uBAAuB;IAAvD;;QAII;;;;;;;WAOG;QAEa,WAAM,GAAG,KAAK,CAAC;QAE/B;;;;;;WAMG;QAEI,mBAAc,GAAG,KAAK,CAAC;QAE9B,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;IAS/B,CAAC;IAPG,gBAAgB;IAChB,IAAW,kBAAkB;QACzB,OAAO,IAAI,CAAC,WAAW;aAClB,aAAa,EAAE;aACf,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;aACrC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC;CACJ;AAvBG;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;0CACK;AAU/B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;kDAC1B;AAI9B;IADC,UAAU;+CACgB;AAW/B,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,SAAS,EAAE,uBAAuB;IAClC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAC","sourcesContent":["import {\n    DesignSystem,\n    ListboxOption as FoundationListboxOption\n} from '@microsoft/fast-foundation';\nimport { observable, attr } from '@microsoft/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-list-option': ListOption;\n    }\n}\n\n/**\n * A nimble-styled HTML listbox option\n */\nexport class ListOption extends FoundationListboxOption {\n    /** @internal */\n    public contentSlot!: HTMLSlotElement;\n\n    /**\n     * The hidden state of the element.\n     *\n     * @public\n     * @defaultValue - false\n     * @remarks\n     * HTML Attribute: hidden\n     */\n    @attr({ mode: 'boolean' })\n    public override hidden = false;\n\n    /**\n     * @internal\n     * This attribute is required to allow use-cases that offer dynamic filtering\n     * (like the Select) to visually hide options that are filtered out, but still\n     * allow users to use the native 'hidden' attribute without it being affected\n     * by the filtering process.\n     */\n    @attr({ attribute: 'visually-hidden', mode: 'boolean' })\n    public visuallyHidden = false;\n\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /** @internal */\n    public get elementTextContent(): string {\n        return this.contentSlot\n            .assignedNodes()\n            .map(node => node.textContent?.trim())\n            .join(' ');\n    }\n}\n\nconst nimbleListOption = ListOption.compose({\n    baseName: 'list-option',\n    baseClass: FoundationListboxOption,\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());\nexport const listOptionTag = 'nimble-list-option';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/list-option/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,YAAY,EACZ,aAAa,IAAI,uBAAuB,EAC3C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAStC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,uBAAuB;IAAvD;;QAII;;;;;;;WAOG;QAEa,WAAM,GAAG,KAAK,CAAC;QAE/B;;;;;;WAMG;QAEI,mBAAc,GAAG,KAAK,CAAC;QAE9B,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;IA0B/B,CAAC;IAxBG,gBAAgB;IAChB,IAAW,kBAAkB;QACzB,OAAO,IAAI,CAAC,WAAW;aAClB,aAAa,EAAE;aACf,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;aACrC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC;IAEe,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE;YAC5C,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;SAC3C;IACL,CAAC;IAEO,iBAAiB,CACrB,MAA0B;QAE1B,IAAI,CAAC,MAAM,EAAE;YACT,OAAO,KAAK,CAAC;SAChB;QAED,OAAO,OAAQ,MAA0B,CAAC,cAAc,KAAK,UAAU,CAAC;IAC5E,CAAC;CACJ;AAxCG;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;0CACK;AAU/B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;kDAC1B;AAI9B;IADC,UAAU;+CACgB;AA4B/B,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,SAAS,EAAE,uBAAuB;IAClC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAC","sourcesContent":["import {\n    DesignSystem,\n    ListboxOption as FoundationListboxOption\n} from '@microsoft/fast-foundation';\nimport { observable, attr } from '@microsoft/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { ListOptionOwner } from '../patterns/dropdown/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-list-option': ListOption;\n    }\n}\n\n/**\n * A nimble-styled HTML listbox option\n */\nexport class ListOption extends FoundationListboxOption {\n    /** @internal */\n    public contentSlot!: HTMLSlotElement;\n\n    /**\n     * The hidden state of the element.\n     *\n     * @public\n     * @defaultValue - false\n     * @remarks\n     * HTML Attribute: hidden\n     */\n    @attr({ mode: 'boolean' })\n    public override hidden = false;\n\n    /**\n     * @internal\n     * This attribute is required to allow use-cases that offer dynamic filtering\n     * (like the Select) to visually hide options that are filtered out, but still\n     * allow users to use the native 'hidden' attribute without it being affected\n     * by the filtering process.\n     */\n    @attr({ attribute: 'visually-hidden', mode: 'boolean' })\n    public visuallyHidden = false;\n\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /** @internal */\n    public get elementTextContent(): string {\n        return this.contentSlot\n            .assignedNodes()\n            .map(node => node.textContent?.trim())\n            .join(' ');\n    }\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        if (this.isListOptionOwner(this.parentElement)) {\n            this.parentElement.registerOption(this);\n        }\n    }\n\n    private isListOptionOwner(\n        parent: HTMLElement | null\n    ): parent is ListOptionOwner {\n        if (!parent) {\n            return false;\n        }\n\n        return typeof (parent as ListOptionOwner).registerOption === 'function';\n    }\n}\n\nconst nimbleListOption = ListOption.compose({\n    baseName: 'list-option',\n    baseClass: FoundationListboxOption,\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());\nexport const listOptionTag = 'nimble-list-option';\n"]}

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

@@ -1,3 +1,4 @@
+import type { ListOption } from '../../list-option';
 import type { ErrorPattern } from '../error/types';
 /**
  * The interface that dropdowns of various types implement. The properties in this interface
@@ -17,3 +18,16 @@ export declare const DropdownAppearance: {
     readonly block: "block";
 };
 export type DropdownAppearance = (typeof DropdownAppearance)[keyof typeof DropdownAppearance];
+/**
+ * @internal
+ *
+ * This interface is used to register options with their parent once their
+ * 'connectedCallback' method is run. This allows for the "owner", like the
+ * Select, to have its value set to that newly registered option earlier than it
+ * might otherwise in certain situations. One such scenario is in an Angular
+ * reactive form, where the form value is set to an option immediately after
+ * dynamically adding it.
+ */
+export interface ListOptionOwner extends HTMLElement {
+    registerOption: (option: ListOption) => void;
+}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/types.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACR,CAAC;AAIX,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACR,CAAC","sourcesContent":["import type { ErrorPattern } from '../error/types';\n\n/**\n * The interface that dropdowns of various types implement. The properties in this interface\n * are leveraged by the shared dropdown pattern css.\n */\nexport interface DropdownPattern extends ErrorPattern {\n    position?: DropdownPosition;\n}\n\nexport const DropdownPosition = {\n    above: 'above',\n    below: 'below'\n} as const;\nexport type DropdownPosition =\n    (typeof DropdownPosition)[keyof typeof DropdownPosition];\n\nexport const DropdownAppearance = {\n    underline: 'underline',\n    outline: 'outline',\n    block: 'block'\n} as const;\nexport type DropdownAppearance =\n    (typeof DropdownAppearance)[keyof typeof DropdownAppearance];\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/types.ts"],"names":[],"mappings":"AAWA,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACR,CAAC;AAIX,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACR,CAAC","sourcesContent":["import type { ListOption } from '../../list-option';\nimport type { ErrorPattern } from '../error/types';\n\n/**\n * The interface that dropdowns of various types implement. The properties in this interface\n * are leveraged by the shared dropdown pattern css.\n */\nexport interface DropdownPattern extends ErrorPattern {\n    position?: DropdownPosition;\n}\n\nexport const DropdownPosition = {\n    above: 'above',\n    below: 'below'\n} as const;\nexport type DropdownPosition =\n    (typeof DropdownPosition)[keyof typeof DropdownPosition];\n\nexport const DropdownAppearance = {\n    underline: 'underline',\n    outline: 'outline',\n    block: 'block'\n} as const;\nexport type DropdownAppearance =\n    (typeof DropdownAppearance)[keyof typeof DropdownAppearance];\n\n/**\n * @internal\n *\n * This interface is used to register options with their parent once their\n * 'connectedCallback' method is run. This allows for the \"owner\", like the\n * Select, to have its value set to that newly registered option earlier than it\n * might otherwise in certain situations. One such scenario is in an Angular\n * reactive form, where the form value is set to an option immediately after\n * dynamically adding it.\n */\nexport interface ListOptionOwner extends HTMLElement {\n    registerOption: (option: ListOption) => void;\n}\n"]}

package/dist/esm/select/index.d.ts

@@ -1,6 +1,7 @@
 import { AnchoredRegion, ListboxOption, SelectPosition } from '@microsoft/fast-foundation';
-import { DropdownAppearance } from '../patterns/dropdown/types';
+import { DropdownAppearance, ListOptionOwner } from '../patterns/dropdown/types';
 import type { ErrorPattern } from '../patterns/error/types';
+import { ListOption } from '../list-option';
 import { FilterMode } from './types';
 import { FormAssociatedSelect } from './models/select-form-associated';
 declare global {
@@ -12,7 +13,7 @@ type BooleanOrVoid = boolean | void;
 /**
  * A nimble-styled HTML select.
  */
-export declare class Select extends FormAssociatedSelect implements ErrorPattern {
+export declare class Select extends FormAssociatedSelect implements ErrorPattern, ListOptionOwner {
     appearance: DropdownAppearance;
     /**
      * Reflects the placement for the listbox when the select is open.
@@ -212,6 +213,10 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
     formResetCallback(): void;
     selectNextOption(): void;
     selectPreviousOption(): void;
+    /**
+     * @internal
+     */
+    registerOption(option: ListOption): void;
     protected setSelectedOptions(): void;
     protected focusAndScrollOptionIntoView(): void;
     protected positionChanged(_: SelectPosition | undefined, next: SelectPosition | undefined): void;

package/dist/esm/select/index.js

@@ -466,6 +466,21 @@ export class Select extends FormAssociatedSelect {
             }
         }
     }
+    /**
+     * @internal
+     */
+    registerOption(option) {
+        if (this.options.includes(option)) {
+            return;
+        }
+        // Adding an option to the end, ultimately, isn't the correct
+        // thing to do, as this will mean the option's index in the options,
+        // at least temporarily, does not match the DOM order. However, it
+        // is expected that a successive run of `slottedOptionsChanged` will
+        // correct this order issue. See 'https://github.com/ni/nimble/issues/1915'
+        // for more info.
+        this.options.push(option);
+    }
     // Prevents parent classes from resetting selectedIndex to a positive
     // value while filtering, which can result in a disabled option being
     // selected.