@ni/nimble-components 11.8.4 → 11.10.0

package/dist/esm/all-components.d.ts

@@ -10,6 +10,7 @@ import './button';
 import './card-button';
 import './checkbox';
 import './combobox';
+import './dialog';
 import './drawer';
 import './icons/all-icons';
 import './list-option';

package/dist/esm/all-components.js

@@ -10,6 +10,7 @@ import './button';
 import './card-button';
 import './checkbox';
 import './combobox';
+import './dialog';
 import './drawer';
 import './icons/all-icons';
 import './list-option';

package/dist/esm/all-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}

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

@@ -3,6 +3,7 @@ import type { ToggleButton } from '../toggle-button';
 import '../icons/exclamation-mark';
 import '../icons/arrow-expander-down';
 import type { IHasErrorText } from '../patterns/error/types';
+import { DropdownAppearance } from '../patterns/dropdown/types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-combobox': Combobox;
@@ -12,12 +13,13 @@ declare global {
  * A nimble-styed HTML combobox
  */
 export declare class Combobox extends FoundationCombobox implements IHasErrorText {
+    appearance: DropdownAppearance;
     /**
      * The ref to the internal dropdown button element.
      *
      * @internal
      */
-    readonly dropdownButton: ToggleButton | undefined;
+    readonly dropdownButton?: ToggleButton;
     /**
      * A message explaining why the value is invalid.
      *
@@ -26,16 +28,36 @@ export declare class Combobox extends FoundationCombobox implements IHasErrorTex
      * HTML Attribute: error-text
      */
     errorText: string | undefined;
+    private valueUpdatedByInput;
+    private valueBeforeTextUpdate?;
     setPositioning(): void;
     slottedOptionsChanged(prev: HTMLElement[], next: HTMLElement[]): void;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     toggleButtonClickHandler(e: Event): void;
     toggleButtonChangeHandler(e: Event): void;
     toggleButtonKeyDownHandler(e: KeyboardEvent): boolean;
     filterOptions(): void;
+    /**
+     * This is a workaround for the issue described here: https://github.com/microsoft/fast/issues/6267
+     * For now, we will update the value ourselves while a user types in text. Note that there is other
+     * implementation related to this (like the 'keydownEventHandler') needed to create the complete set
+     * of desired behavior described in the issue noted above.
+     */
+    inputHandler(e: InputEvent): boolean | void;
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    focusoutHandler(e: FocusEvent): boolean | void;
     protected openChanged(): void;
     private ariaLabelChanged;
     private updateInputAriaLabel;
-    private readonly focusOutHandler;
+    /**
+     * This will only emit a `change` event after text entry where the text in the input prior to
+     * typing is different than the text present upon an attempt to commit (e.g. pressing <Enter>).
+     * So, for a concrete example:
+     * 1) User types 'Sue' (when Combobox input was blank).
+     * 2) User presses <Enter> -> 'change' event fires
+     * 3) User deletes 'Sue'
+     * 4) User re-types 'Sue'
+     * 5) User presses <Enter> -> NO 'change' event is fired
+     */
+    private emitChangeIfValueUpdated;
 }

package/dist/esm/combobox/index.js

@@ -6,15 +6,15 @@ import { errorTextTemplate } from '../patterns/error/template';
 import '../icons/exclamation-mark';
 import '../icons/arrow-expander-down';
 import { styles } from './styles';
+import { DropdownAppearance } from '../patterns/dropdown/types';
 /**
  * A nimble-styed HTML combobox
  */
 export class Combobox extends FoundationCombobox {
     constructor() {
         super(...arguments);
-        this.focusOutHandler = () => {
-            this.open = false;
-        };
+        this.appearance = DropdownAppearance.underline;
+        this.valueUpdatedByInput = false;
     }
     // Workaround for https://github.com/microsoft/fast/issues/5123
     setPositioning() {
@@ -38,10 +38,6 @@ export class Combobox extends FoundationCombobox {
         // Call setPositioning() after this.forcedPosition is initialized.
         this.setPositioning();
         this.updateInputAriaLabel();
-        this.addEventListener('focusout', this.focusOutHandler);
-    }
-    disconnectedCallback() {
-        this.removeEventListener('focusout', this.focusOutHandler);
     }
     toggleButtonClickHandler(e) {
         e.stopImmediatePropagation();
@@ -68,6 +64,50 @@ export class Combobox extends FoundationCombobox {
         const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
         this.filteredOptions = enabledOptions;
     }
+    /**
+     * This is a workaround for the issue described here: https://github.com/microsoft/fast/issues/6267
+     * For now, we will update the value ourselves while a user types in text. Note that there is other
+     * implementation related to this (like the 'keydownEventHandler') needed to create the complete set
+     * of desired behavior described in the issue noted above.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+    inputHandler(e) {
+        const returnValue = super.inputHandler(e);
+        if (!this.valueUpdatedByInput) {
+            this.valueBeforeTextUpdate = this.value;
+        }
+        this.value = this.control.value;
+        this.valueUpdatedByInput = true;
+        return returnValue;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+    keydownHandler(e) {
+        const returnValue = super.keydownHandler(e);
+        if (e.ctrlKey || e.altKey) {
+            return returnValue;
+        }
+        switch (e.key) {
+            case keyEnter:
+                this.emitChangeIfValueUpdated();
+                break;
+            case keyArrowDown:
+            case keyArrowUp:
+                if (this.open && this.valueUpdatedByInput) {
+                    this.valueUpdatedByInput = false;
+                }
+                break;
+            default:
+                return returnValue;
+        }
+        return returnValue;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+    focusoutHandler(e) {
+        const returnValue = super.focusoutHandler(e);
+        this.open = false;
+        this.emitChangeIfValueUpdated();
+        return returnValue;
+    }
     openChanged() {
         super.openChanged();
         if (this.dropdownButton) {
@@ -87,7 +127,28 @@ export class Combobox extends FoundationCombobox {
             inputElement?.removeAttribute('aria-label');
         }
     }
+    /**
+     * This will only emit a `change` event after text entry where the text in the input prior to
+     * typing is different than the text present upon an attempt to commit (e.g. pressing <Enter>).
+     * So, for a concrete example:
+     * 1) User types 'Sue' (when Combobox input was blank).
+     * 2) User presses <Enter> -> 'change' event fires
+     * 3) User deletes 'Sue'
+     * 4) User re-types 'Sue'
+     * 5) User presses <Enter> -> NO 'change' event is fired
+     */
+    emitChangeIfValueUpdated() {
+        if (this.valueUpdatedByInput) {
+            if (this.value !== this.valueBeforeTextUpdate) {
+                this.$emit('change');
+            }
+            this.valueUpdatedByInput = false;
+        }
+    }
 }
+__decorate([
+    attr
+], Combobox.prototype, "appearance", void 0);
 __decorate([
     observable
 ], Combobox.prototype, "dropdownButton", void 0);

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

package/dist/esm/combobox/styles.js

@@ -1,8 +1,10 @@
 import { css } from '@microsoft/fast-element';
-import { controlHeight, failColor, bodyDisabledFontColor, borderRgbPartialColor, smallPadding, borderHoverColor } from '../theme-provider/design-tokens';
+import { controlHeight, failColor, bodyDisabledFontColor, borderRgbPartialColor, smallPadding, borderHoverColor, borderWidth } from '../theme-provider/design-tokens';
 import { styles as dropdownStyles } from '../patterns/dropdown/styles';
 import { styles as errorStyles } from '../patterns/error/styles';
 import { focusVisible } from '../utilities/style/focus';
+import { appearanceBehavior } from '../utilities/style/appearance';
+import { DropdownAppearance } from '../select/types';
 export const styles = css `
     ${dropdownStyles}
     ${errorStyles}
@@ -10,6 +12,9 @@ export const styles = css `
     :host {
         --ni-private-hover-bottom-border-width: 2px;
         --ni-private-bottom-border-width: 1px;
+        --ni-private-height-within-border: calc(
+            ${controlHeight} - 2 * ${borderWidth}
+        );
     }
 
     :host([disabled]) *,
@@ -18,6 +23,10 @@ export const styles = css `
         color: ${bodyDisabledFontColor};
     }
 
+    :host(.invalid)::after {
+        border-bottom-color: ${failColor};
+    }
+
     .control {
         bottom-border-width: var(--ni-private-bottom-border-width);
     }
@@ -34,8 +43,9 @@ export const styles = css `
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
-    :host(.invalid[disabled]) .control {
-        border-color: ${failColor};
+    :host(.invalid[disabled]) .control,
+    :host(.open.invalid) .control {
+        border-bottom-color: ${failColor};
     }
 
     .selected-value {
@@ -46,7 +56,7 @@ export const styles = css `
         margin: auto 0;
         width: 100%;
         font-size: inherit;
-        padding-left: 0px;
+        height: var(--ni-private-height-within-border);
     }
 
     .selected-value:hover,
@@ -87,5 +97,10 @@ export const styles = css `
     :host(:empty) .listbox {
         display: none;
     }
-`;
+`.withBehaviors(appearanceBehavior(DropdownAppearance.block, css `
+            :host(.invalid) .control {
+                border-bottom-width: ${borderWidth};
+                padding-bottom: 0;
+            }
+        `));
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/combobox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,aAAa,EACb,SAAS,EACT,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,gBAAgB,EACnB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;;;;;;;;;;iBAUA,qBAAqB;;;;;;;;+BAQP,gBAAgB;;;;qEAIsB,SAAS;;;;6BAIjD,qBAAqB;;;;wBAI1B,SAAS;;;;;;;;;;;;;;;;;qBAiBZ,YAAY;;;;;;;;;;;yBAWR,YAAY;;;;;;uCAME,qBAAqB;uBACrC,aAAa;;;;;;UAM1B,aAAa,CAAC,iBAAiB;uBAClB,YAAY;;;;gBAInB,qBAAqB;;;;;;CAMpC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/combobox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,aAAa,EACb,SAAS,EACT,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACd,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;;;;;;cAMH,aAAa,UAAU,WAAW;;;;;;;iBAO/B,qBAAqB;;;;+BAIP,SAAS;;;;;;;;+BAQT,gBAAgB;;;;qEAIsB,SAAS;;;;6BAIjD,qBAAqB;;;;;+BAKnB,SAAS;;;;;;;;;;;;;;;;;qBAiBnB,YAAY;;;;;;;;;;;yBAWR,YAAY;;;;;;uCAME,qBAAqB;uBACrC,aAAa;;;;;;UAM1B,aAAa,CAAC,iBAAiB;uBAClB,YAAY;;;;gBAInB,qBAAqB;;;;;;CAMpC,CAAC,aAAa,CACP,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;uCAEwB,WAAW;;;SAGzC,CACA,CACJ,CAAC"}

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

@@ -0,0 +1,64 @@
+import { ARIAGlobalStatesAndProperties, FoundationElement } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-dialog': Dialog;
+    }
+}
+/**
+ * Symbol that is returned as the dialog close reason (from the Promise returned by show()) when
+ * the dialog was closed by pressing the ESC key (vs. calling the close() function).
+ */
+export declare const USER_DISMISSED: unique symbol;
+export declare type UserDismissed = typeof USER_DISMISSED;
+/**
+ * This is a workaround for an incomplete definition of the native dialog element:
+ * https://github.com/microsoft/TypeScript/issues/48267
+ * @internal
+ */
+export interface ExtendedDialog extends HTMLDialogElement {
+    showModal(): void;
+    close(): void;
+}
+/**
+ * A nimble-styled dialog.
+ */
+export declare class Dialog<CloseReason = void> extends FoundationElement {
+    /**
+     * @public
+     * @description
+     * Prevents dismissing the dialog via the Escape key
+     */
+    preventDismiss: boolean;
+    /**
+     * The ref to the internal dialog element.
+     *
+     * @internal
+     */
+    readonly dialogElement: ExtendedDialog;
+    /**
+     * True if the dialog is open/showing, false otherwise
+     */
+    get open(): boolean;
+    private resolveShow?;
+    private closeReason;
+    /**
+     * Opens the dialog
+     * @returns Promise that is resolved when the dialog is closed. The value of the resolved Promise is the reason value passed to the close() method, or USER_DISMISSED if the dialog was closed via the ESC key.
+     */
+    show(): Promise<CloseReason | UserDismissed>;
+    /**
+     * Closes the dialog
+     * @param reason An optional value indicating how/why the dialog was closed.
+     */
+    close(reason: CloseReason): void;
+    /**
+     * @internal
+     */
+    closeHandler(): boolean;
+    /**
+     * @internal
+     */
+    cancelHandler(event: Event): boolean;
+}
+export interface Dialog extends ARIAGlobalStatesAndProperties {
+}

package/dist/esm/dialog/index.js

@@ -0,0 +1,90 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { applyMixins, ARIAGlobalStatesAndProperties, DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * Symbol that is returned as the dialog close reason (from the Promise returned by show()) when
+ * the dialog was closed by pressing the ESC key (vs. calling the close() function).
+ */
+export const USER_DISMISSED = Symbol('user dismissed');
+/**
+ * A nimble-styled dialog.
+ */
+// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+export class Dialog extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * @public
+         * @description
+         * Prevents dismissing the dialog via the Escape key
+         */
+        this.preventDismiss = false;
+    }
+    /**
+     * True if the dialog is open/showing, false otherwise
+     */
+    get open() {
+        return this.resolveShow !== undefined;
+    }
+    /**
+     * Opens the dialog
+     * @returns Promise that is resolved when the dialog is closed. The value of the resolved Promise is the reason value passed to the close() method, or USER_DISMISSED if the dialog was closed via the ESC key.
+     */
+    async show() {
+        if (this.open) {
+            throw new Error('Dialog is already open');
+        }
+        this.dialogElement.showModal();
+        return new Promise((resolve, _reject) => {
+            this.resolveShow = resolve;
+        });
+    }
+    /**
+     * Closes the dialog
+     * @param reason An optional value indicating how/why the dialog was closed.
+     */
+    close(reason) {
+        if (!this.open) {
+            throw new Error('Dialog is not open');
+        }
+        this.closeReason = reason;
+        this.dialogElement.close();
+    }
+    /**
+     * @internal
+     */
+    closeHandler() {
+        this.resolveShow(this.closeReason);
+        this.resolveShow = undefined;
+        return true;
+    }
+    /**
+     * @internal
+     */
+    cancelHandler(event) {
+        if (this.preventDismiss) {
+            event.preventDefault();
+        }
+        else {
+            this.closeReason = USER_DISMISSED;
+        }
+        return true;
+    }
+}
+__decorate([
+    attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
+], Dialog.prototype, "preventDismiss", void 0);
+applyMixins(Dialog, ARIAGlobalStatesAndProperties);
+const nimbleDialog = Dialog.compose({
+    baseName: 'dialog',
+    template,
+    styles,
+    baseClass: Dialog,
+    shadowOptions: {
+        delegatesFocus: true
+    }
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/dialog/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,WAAW,EACX,6BAA6B,EAC7B,YAAY,EACZ,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAkB,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAatE;;GAEG;AACH,mEAAmE;AACnE,MAAM,OAAO,MAA2B,SAAQ,iBAAiB;IAAjE;;QACI;;;;WAIG;QAEI,mBAAc,GAAG,KAAK,CAAC;IAiElC,CAAC;IAxDG;;OAEG;IACH,IAAW,IAAI;QACX,OAAO,IAAI,CAAC,WAAW,KAAK,SAAS,CAAC;IAC1C,CAAC;IAKD;;;OAGG;IACI,KAAK,CAAC,IAAI;QACb,IAAI,IAAI,CAAC,IAAI,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC;SAC7C;QACD,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC;QAC/B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE;YACpC,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;QAC/B,CAAC,CAAC,CAAC;IACP,CAAC;IAED;;;OAGG;IACI,KAAK,CAAC,MAAmB;QAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACZ,MAAM,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC;SACzC;QACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;IAC/B,CAAC;IAED;;OAEG;IACI,YAAY;QACf,IAAI,CAAC,WAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACpC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC7B,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;OAEG;IACI,aAAa,CAAC,KAAY;QAC7B,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB,KAAK,CAAC,cAAc,EAAE,CAAC;SAC1B;aAAM;YACH,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC;SACrC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;CACJ;AAjEG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CAC1B;AAqElC,WAAW,CAAC,MAAM,EAAE,6BAA6B,CAAC,CAAC;AAEnD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC;IAChC,QAAQ,EAAE,QAAQ;IAClB,QAAQ;IACR,MAAM;IACN,SAAS,EAAE,MAAM;IACjB,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}

package/dist/esm/dialog/styles.d.ts

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

package/dist/esm/dialog/styles.js

@@ -0,0 +1,14 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { applicationBackgroundColor, borderWidth, popupBoxShadowColor, popupBorderColor } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('grid')}
+
+    dialog {
+        background-color: ${applicationBackgroundColor};
+        border: ${borderWidth} solid ${popupBorderColor};
+        box-shadow: 0px 2px 3px ${popupBoxShadowColor};
+        max-width: 50%;
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/dialog/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,mBAAmB,EACnB,gBAAgB,EACnB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;4BAGO,0BAA0B;kBACpC,WAAW,UAAU,gBAAgB;kCACrB,mBAAmB;;;CAGpD,CAAC"}

package/dist/esm/dialog/template.d.ts

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

package/dist/esm/dialog/template.js

@@ -0,0 +1,15 @@
+import { html, ref } from '@microsoft/fast-element';
+export const template = html `
+    <template>
+        <dialog
+            ${ref('dialogElement')}
+            role="alertdialog"
+            aria-label="${x => x.ariaLabel}"
+            @cancel="${(x, c) => x.cancelHandler(c.event)}"
+            @close="${x => x.closeHandler()}"
+        >
+            <slot></slot>
+        </dialog>
+    </template>
+`;
+//# sourceMappingURL=template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/dialog/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAQ;;;cAGtB,GAAG,CAAC,eAAe,CAAC;;0BAER,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;uBACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;sBACnC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE;;;;;CAK1C,CAAC"}

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

@@ -1,7 +1,9 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { applicationBackgroundColor, bodyFont, bodyFontColor, bodyDisabledFontColor, borderHoverColor, borderWidth, controlHeight, iconSize, popupBorderColor, popupBoxShadowColor, smallDelay, smallPadding, failColor, borderRgbPartialColor } from '../../theme-provider/design-tokens';
+import { applicationBackgroundColor, bodyFont, bodyFontColor, bodyDisabledFontColor, borderHoverColor, borderWidth, controlHeight, iconSize, popupBorderColor, popupBoxShadowColor, smallDelay, smallPadding, borderRgbPartialColor, standardPadding } from '../../theme-provider/design-tokens';
+import { appearanceBehavior } from '../../utilities/style/appearance';
 import { focusVisible } from '../../utilities/style/focus';
+import { DropdownAppearance } from './types';
 export const styles = css `
     ${display('inline-flex')}
 
@@ -55,10 +57,6 @@ export const styles = css `
         transition: width ${smallDelay} ease-in;
     }
 
-    :host(.invalid)::after {
-        border-bottom-color: ${failColor};
-    }
-
     @media (prefers-reduced-motion) {
         :host::after {
             transition-duration: 0s;
@@ -81,10 +79,9 @@ export const styles = css `
         display: flex;
         min-height: 100%;
         width: 100%;
-        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
+        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
         background-color: transparent;
-        padding-left: 8px;
-        padding-bottom: 1px;
+        padding: ${borderWidth};
     }
 
     :host(.open:not(:hover)) .control {
@@ -147,6 +144,12 @@ export const styles = css `
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
+        padding: 0px;
+        padding-left: calc(${standardPadding} / 2);
+    }
+
+    .selected-value[disabled]::placeholder {
+        color: ${bodyDisabledFontColor};
     }
 
     .indicator {
@@ -186,5 +189,32 @@ export const styles = css `
     ::slotted(option) {
         flex: none;
     }
-`;
+`.withBehaviors(appearanceBehavior(DropdownAppearance.underline, css `
+            .control {
+                border-bottom-width: ${borderWidth};
+                padding-bottom: 0;
+            }
+
+            :host([disabled]) .control {
+                border-color: rgba(${borderRgbPartialColor}, 0.1);
+            }
+        `), appearanceBehavior(DropdownAppearance.outline, css `
+            .control {
+                border-width: ${borderWidth};
+                padding: 0;
+            }
+        `), appearanceBehavior(DropdownAppearance.block, css `
+            .control {
+                background-color: rgba(${borderRgbPartialColor}, 0.1);
+            }
+
+            .control:focus-within {
+                border-bottom-width: ${borderWidth};
+                padding-bottom: 0;
+            }
+
+            :host([disabled]) .control {
+                background-color: rgba(${borderRgbPartialColor}, 0.07);
+            }
+        `));
 //# sourceMappingURL=styles.js.map

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,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,SAAS,EACT,qBAAqB,EACxB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;;;;;mDAOoB,WAAW;;;;;;;;uBAQvC,WAAW;;;;yBAIT,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;4BAOI,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;+BAIP,SAAS;;;;;;;;;;YAU5B,YAAY;;;;;;;;;;;;;;;yBAeC,WAAW,UAAU,qBAAqB;;;;;;;+BAOpC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;;;;;;wCAWV,YAAY;;;;;;;kCAOlB,mBAAmB;4BACzB,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;;;;;;;kBAmBpC,aAAa;;;;oBAIX,aAAa,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;iBAsBlC,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;;;;;;;;;;;CAqBpC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,eAAe,EAClB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;;;;;mDAOoB,WAAW;;;;;;;;uBAQvC,WAAW;;;;yBAIT,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;4BAOI,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;;;;;;YAU1B,YAAY;;;;;;;;;;;;;;;iCAeS,qBAAqB;;mBAEnC,WAAW;;;;+BAIC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;;;;;;wCAWV,YAAY;;;;;;;kCAOlB,mBAAmB;4BACzB,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;;;;;;;kBAmBpC,aAAa;;;;oBAIX,aAAa,MAAM,YAAY;;;;;;;;;;;6BAWtB,eAAe;;;;iBAI3B,qBAAqB;;;;;;;;;;;;;iBAarB,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;;;;;;;;;;;CAqBpC,CAAC,aAAa,CACP,kBAAkB,CACd,kBAAkB,CAAC,SAAS,EAC5B,GAAG,CAAA;;uCAEwB,WAAW;;;;;qCAKb,qBAAqB;;SAEjD,CACA,EACD,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;gCAEiB,WAAW;;;SAGlC,CACA,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE0B,qBAAqB;;;;uCAIvB,WAAW;;;;;yCAKT,qBAAqB;;SAErD,CACA,CACJ,CAAC"}

package/dist/esm/select/styles.js

@@ -1,40 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { styles as dropdownStyles } from '../patterns/dropdown/styles';
-import { appearanceBehavior } from '../utilities/style/appearance';
-import { DropdownAppearance } from '../patterns/dropdown/types';
-import { borderWidth, controlHeight, borderRgbPartialColor, standardPadding } from '../theme-provider/design-tokens';
 export const styles = css `
     ${dropdownStyles}
-`.withBehaviors(appearanceBehavior(DropdownAppearance.underline, css `
-            .control {
-                padding-top: ${borderWidth};
-                padding-left: calc(${borderWidth} + ${standardPadding} / 2);
-                padding-right: ${borderWidth};
-            }
-
-            :host([disabled]) .control {
-                border-color: rgba(${borderRgbPartialColor}, 0.1);
-            }
-        `), appearanceBehavior(DropdownAppearance.outline, css `
-            .control {
-                border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
-            }
-
-            :host(.invalid) .errortext {
-                top: calc(${controlHeight} - ${borderWidth});
-            }
-        `), appearanceBehavior(DropdownAppearance.block, css `
-            .control {
-                background-color: rgba(${borderRgbPartialColor}, 0.1);
-                padding-left: calc(${borderWidth} + ${standardPadding} / 2);
-                padding-right: ${borderWidth};
-                padding-bottom: calc(${borderWidth});
-                border-bottom: ${borderWidth}
-                    rgba(${borderRgbPartialColor}, 0.07);
-            }
-
-            :host([disabled]) .control {
-                background-color: rgba(${borderRgbPartialColor}, 0.07);
-            }
-        `));
+`;
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EACH,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;CACnB,CAAC,aAAa,CACP,kBAAkB,CACd,kBAAkB,CAAC,SAAS,EAC5B,GAAG,CAAA;;+BAEgB,WAAW;qCACL,WAAW,MAAM,eAAe;iCACpC,WAAW;;;;qCAIP,qBAAqB;;SAEjD,CACA,EACD,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;0BAEW,WAAW,eAAe,qBAAqB;;;;4BAI7C,aAAa,MAAM,WAAW;;SAEjD,CACA,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE0B,qBAAqB;qCACzB,WAAW,MAAM,eAAe;iCACpC,WAAW;uCACL,WAAW;iCACjB,WAAW;2BACjB,qBAAqB;;;;yCAIP,qBAAqB;;SAErD,CACA,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEvE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;CACnB,CAAC"}

package/package.json

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