@ni/nimble-components 11.8.5 → 11.10.1

package/dist/all-components-bundle.js

@@ -9518,7 +9518,7 @@
      *
      * @public
      */
-    class Dialog extends FoundationElement {
+    class Dialog$1 extends FoundationElement {
         constructor() {
             super(...arguments);
             /**
@@ -9602,7 +9602,7 @@
             };
             this.getTabQueueBounds = () => {
                 const bounds = [];
-                return Dialog.reduceTabbableItems(bounds, this);
+                return Dialog$1.reduceTabbableItems(bounds, this);
             };
             /**
              * focus on first element of tab queue
@@ -9726,12 +9726,12 @@
                 return elements;
             }
             if (isTabbable(element) ||
-                (Dialog.isFocusableFastElement(element) && Dialog.hasTabbableShadow(element))) {
+                (Dialog$1.isFocusableFastElement(element) && Dialog$1.hasTabbableShadow(element))) {
                 elements.push(element);
                 return elements;
             }
             if (element.childElementCount) {
-                return elements.concat(Array.from(element.children).reduce(Dialog.reduceTabbableItems, []));
+                return elements.concat(Array.from(element.children).reduce(Dialog$1.reduceTabbableItems, []));
             }
             return elements;
         }
@@ -9762,22 +9762,22 @@
     }
     __decorate$1([
         attr({ mode: "boolean" })
-    ], Dialog.prototype, "modal", void 0);
+    ], Dialog$1.prototype, "modal", void 0);
     __decorate$1([
         attr({ mode: "boolean" })
-    ], Dialog.prototype, "hidden", void 0);
+    ], Dialog$1.prototype, "hidden", void 0);
     __decorate$1([
         attr({ attribute: "trap-focus", mode: "boolean" })
-    ], Dialog.prototype, "trapFocus", void 0);
+    ], Dialog$1.prototype, "trapFocus", void 0);
     __decorate$1([
         attr({ attribute: "aria-describedby" })
-    ], Dialog.prototype, "ariaDescribedby", void 0);
+    ], Dialog$1.prototype, "ariaDescribedby", void 0);
     __decorate$1([
         attr({ attribute: "aria-labelledby" })
-    ], Dialog.prototype, "ariaLabelledby", void 0);
+    ], Dialog$1.prototype, "ariaLabelledby", void 0);
     __decorate$1([
         attr({ attribute: "aria-label" })
-    ], Dialog.prototype, "ariaLabel", void 0);
+    ], Dialog$1.prototype, "ariaLabel", void 0);
 
     /**
      * The template for the {@link @microsoft/fast-foundation#(ListboxOption:class)} component.
@@ -14250,7 +14250,7 @@
      */
     const focusVisible$1 = canUseFocusVisible() ? "focus-visible" : "focus";
 
-    const styles$u = css `
+    const styles$v = css `
     :host {
         contain: layout;
         display: block;
@@ -14274,7 +14274,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$u
+        styles: styles$v
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -14616,9 +14616,9 @@
         return c > 3 && r && Object.defineProperty(target, key, r), r;
     }
 
-    const template$6 = html `<slot></slot>`;
+    const template$7 = html `<slot></slot>`;
 
-    const styles$t = css `
+    const styles$u = css `
     :host {
         display: contents;
     }
@@ -14674,8 +14674,8 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$t,
-        template: template$6
+        styles: styles$u,
+        template: template$7
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -14898,7 +14898,7 @@
      */
     const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-    const styles$s = css `
+    const styles$t = css `
     ${display('inline-block')}
 
     :host {
@@ -14958,7 +14958,7 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$s
+        styles: styles$t
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
@@ -15544,7 +15544,7 @@
      */
     const focusVisible = `:${focusVisible$1}`;
 
-    const styles$r = css `
+    const styles$s = css `
     ${display('inline-flex')}
 
     :host {
@@ -15624,7 +15624,7 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$r,
+        styles: styles$s,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
@@ -15709,7 +15709,7 @@
         block: 'block'
     };
 
-    const styles$q = css `
+    const styles$r = css `
     ${display('inline-flex')}
 
     :host {
@@ -15916,7 +15916,7 @@
             `));
 
     // prettier-ignore
-    const styles$p = styles$q
+    const styles$q = styles$r
         .withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
                 :host(.primary) .control {
                     box-shadow: 0px 0px 0px ${borderWidth} rgba(${actionRgbPartialColor}, 0.3) inset;
@@ -16030,7 +16030,7 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$p,
+        styles: styles$q,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -16038,7 +16038,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
 
     // prettier-ignore
-    const styles$o = css `
+    const styles$p = css `
     ${display('inline-flex')}
 
     :host {
@@ -16201,14 +16201,14 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$o,
+        styles: styles$p,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-    const styles$n = css `
+    const styles$o = css `
     ${display('inline-flex')}
 
     :host {
@@ -16326,7 +16326,7 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$n,
+        styles: styles$o,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
@@ -16338,13 +16338,13 @@
     </div>
 `;
 
-    const template$5 = html `
+    const template$6 = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;
 
-    const styles$m = css `
+    const styles$n = css `
     ${display('inline-flex')}
 
     :host {
@@ -16394,8 +16394,8 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$5,
-            styles: styles$m,
+            template: template$6,
+            styles: styles$n,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -16423,7 +16423,17 @@
     }
     registerIcon('icon-arrow-expander-down', IconArrowExpanderDown);
 
-    const styles$l = css `
+    ({
+        above: SelectPosition.above,
+        below: SelectPosition.below
+    });
+    const DropdownAppearance = {
+        underline: 'underline',
+        outline: 'outline',
+        block: 'block'
+    };
+
+    const styles$m = css `
     ${display('inline-flex')}
 
     :host {
@@ -16476,10 +16486,6 @@
         transition: width ${smallDelay} ease-in;
     }
 
-    :host(.invalid)::after {
-        border-bottom-color: ${failColor};
-    }
-
     @media (prefers-reduced-motion) {
         :host::after {
             transition-duration: 0s;
@@ -16502,10 +16508,9 @@
         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 {
@@ -16568,6 +16573,12 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
+        padding: 0px;
+        padding-left: calc(${standardPadding} / 2);
+    }
+
+    .selected-value[disabled]::placeholder {
+        color: ${bodyDisabledFontColor};
     }
 
     .indicator {
@@ -16607,9 +16618,36 @@
     ::slotted(option) {
         flex: none;
     }
-`;
+`.withBehaviors(appearanceBehavior(DropdownAppearance.underline, css `
+            .control {
+                border-bottom-width: ${borderWidth};
+                padding-bottom: 0;
+            }
 
-    const styles$k = css `
+            :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);
+            }
+        `));
+
+    const styles$l = css `
     .error-icon {
         display: none;
     }
@@ -16647,13 +16685,16 @@
     }
 `;
 
-    const styles$j = css `
+    const styles$k = css `
+    ${styles$m}
     ${styles$l}
-    ${styles$k}
 
     :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]) *,
@@ -16662,6 +16703,10 @@
         color: ${bodyDisabledFontColor};
     }
 
+    :host(.invalid)::after {
+        border-bottom-color: ${failColor};
+    }
+
     .control {
         bottom-border-width: var(--ni-private-bottom-border-width);
     }
@@ -16678,8 +16723,9 @@
         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 {
@@ -16690,7 +16736,7 @@
         margin: auto 0;
         width: 100%;
         font-size: inherit;
-        padding-left: 0px;
+        height: var(--ni-private-height-within-border);
     }
 
     .selected-value:hover,
@@ -16731,7 +16777,12 @@
     :host(:empty) .listbox {
         display: none;
     }
-`;
+`.withBehaviors(appearanceBehavior(DropdownAppearance.block, css `
+            :host(.invalid) .control {
+                border-bottom-width: ${borderWidth};
+                padding-bottom: 0;
+            }
+        `));
 
     /**
      * A nimble-styed HTML combobox
@@ -16739,6 +16790,7 @@
     class Combobox extends Combobox$1 {
         constructor() {
             super(...arguments);
+            this.appearance = DropdownAppearance.underline;
             this.valueUpdatedByInput = false;
         }
         // Workaround for https://github.com/microsoft/fast/issues/5123
@@ -16871,6 +16923,9 @@
             }
         }
     }
+    __decorate([
+        attr
+    ], Combobox.prototype, "appearance", void 0);
     __decorate([
         observable
     ], Combobox.prototype, "dropdownButton", void 0);
@@ -16881,7 +16936,7 @@
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$j,
+        styles: styles$k,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -16918,6 +16973,116 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCombobox());
 
+    const styles$j = css `
+    ${display('grid')}
+
+    dialog {
+        background-color: ${applicationBackgroundColor};
+        border: ${borderWidth} solid ${popupBorderColor};
+        box-shadow: 0px 2px 3px ${popupBoxShadowColor};
+        max-width: 50%;
+    }
+`;
+
+    const template$5 = 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>
+`;
+
+    /**
+     * 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).
+     */
+    const USER_DISMISSED = Symbol('user dismissed');
+    /**
+     * A nimble-styled dialog.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+    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: template$5,
+        styles: styles$j,
+        baseClass: Dialog,
+        shadowOptions: {
+            delegatesFocus: true
+        }
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
+
     var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
     var dist = {};
@@ -18135,7 +18300,7 @@
      * which animates to be visible with a slide-in / slide-out animation.
      * Configured via 'location', 'state', 'modal', 'preventDismiss' properties.
      */
-    class Drawer extends Dialog {
+    class Drawer extends Dialog$1 {
         constructor() {
             super(...arguments);
             this.location = DrawerLocation.left;
@@ -20025,7 +20190,7 @@
 `;
 
     const styles$e = css `
-    ${styles$q}
+    ${styles$r}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -20465,7 +20630,7 @@
 
     const styles$c = css `
     ${display('inline-block')}
-    ${styles$k}
+    ${styles$l}
 
     :host {
         font: ${bodyFont};
@@ -20710,50 +20875,9 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-    ({
-        above: SelectPosition.above,
-        below: SelectPosition.below
-    });
-    const DropdownAppearance = {
-        underline: 'underline',
-        outline: 'outline',
-        block: 'block'
-    };
-
     const styles$b = css `
-    ${styles$l}
-`.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);
-            }
-        `));
+    ${styles$m}
+`;
 
     /**
      * A nimble-styled HTML select
@@ -21391,7 +21515,7 @@
     /* eslint-disable @typescript-eslint/indent */
     const styles$4 = css `
     ${display('inline-block')}
-    ${styles$k}
+    ${styles$l}
 
     :host {
         font: ${bodyFont};