@ni/nimble-components 11.1.1 → 11.4.0

package/dist/all-components-bundle.js

@@ -13138,6 +13138,607 @@
     applyMixins(DelegatesARIAToolbar, ARIAGlobalStatesAndProperties);
     applyMixins(Toolbar$1, StartEnd, DelegatesARIAToolbar);
 
+    /**
+     * Creates a template for the {@link @microsoft/fast-foundation#(Tooltip:class)} component using the provided prefix.
+     * @public
+     */
+    const tooltipTemplate = (context, definition) => {
+        return html `
+        ${when(x => x.tooltipVisible, html `
+            <${context.tagFor(AnchoredRegion$1)}
+                fixed-placement="true"
+                auto-update-mode="${x => x.autoUpdateMode}"
+                vertical-positioning-mode="${x => x.verticalPositioningMode}"
+                vertical-default-position="${x => x.verticalDefaultPosition}"
+                vertical-inset="${x => x.verticalInset}"
+                vertical-scaling="${x => x.verticalScaling}"
+                horizontal-positioning-mode="${x => x.horizontalPositioningMode}"
+                horizontal-default-position="${x => x.horizontalDefaultPosition}"
+                horizontal-scaling="${x => x.horizontalScaling}"
+                horizontal-inset="${x => x.horizontalInset}"
+                vertical-viewport-lock="${x => x.horizontalViewportLock}"
+                horizontal-viewport-lock="${x => x.verticalViewportLock}"
+                dir="${x => x.currentDirection}"
+                ${ref("region")}
+            >
+                <div class="tooltip" part="tooltip" role="tooltip">
+                    <slot></slot>
+                </div>
+            </${context.tagFor(AnchoredRegion$1)}>
+        `)}
+    `;
+    };
+
+    /**
+     * Enumerates possible tooltip positions
+     *
+     * @public
+     */
+    const TooltipPosition = {
+        /**
+         * The tooltip is positioned above the element
+         */
+        top: "top",
+        /**
+         * The tooltip is positioned to the right of the element
+         */
+        right: "right",
+        /**
+         * The tooltip is positioned below the element
+         */
+        bottom: "bottom",
+        /**
+         * The tooltip is positioned to the left of the element
+         */
+        left: "left",
+        /**
+         * The tooltip is positioned before the element
+         */
+        start: "start",
+        /**
+         * The tooltip is positioned after the element
+         */
+        end: "end",
+        /**
+         * The tooltip is positioned above the element and to the left
+         */
+        topLeft: "top-left",
+        /**
+         * The tooltip is positioned above the element and to the right
+         */
+        topRight: "top-right",
+        /**
+         * The tooltip is positioned below the element and to the left
+         */
+        bottomLeft: "bottom-left",
+        /**
+         * The tooltip is positioned below the element and to the right
+         */
+        bottomRight: "bottom-right",
+        /**
+         * The tooltip is positioned above the element and to the left
+         */
+        topStart: "top-start",
+        /**
+         * The tooltip is positioned above the element and to the right
+         */
+        topEnd: "top-end",
+        /**
+         * The tooltip is positioned below the element and to the left
+         */
+        bottomStart: "bottom-start",
+        /**
+         * The tooltip is positioned below the element and to the right
+         */
+        bottomEnd: "bottom-end",
+    };
+
+    /**
+     * An Tooltip Custom HTML Element.
+     *
+     * @slot - The default slot for the tooltip content
+     * @csspart tooltip - The tooltip element
+     * @fires dismiss - Fires a custom 'dismiss' event when the tooltip is visible and escape key is pressed
+     *
+     * @public
+     */
+    class Tooltip$1 extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            /**
+             * The id of the element the tooltip is anchored to
+             *
+             * @defaultValue - undefined
+             * @public
+             * HTML Attribute: anchor
+             */
+            this.anchor = "";
+            /**
+             * The delay in milliseconds before a tooltip is shown after a hover event
+             *
+             * @defaultValue - 300
+             * @public
+             * HTML Attribute: delay
+             */
+            this.delay = 300;
+            /**
+             * Controls when the tooltip updates its position, default is 'anchor' which only updates when
+             * the anchor is resized.  'auto' will update on scroll/resize events.
+             * Corresponds to anchored-region auto-update-mode.
+             * @public
+             * @remarks
+             * HTML Attribute: auto-update-mode
+             */
+            this.autoUpdateMode = "anchor";
+            /**
+             * the html element currently being used as anchor.
+             * Setting this directly overrides the anchor attribute.
+             *
+             * @public
+             */
+            this.anchorElement = null;
+            /**
+             * The current viewport element instance
+             *
+             * @internal
+             */
+            this.viewportElement = null;
+            /**
+             * @internal
+             * @defaultValue "dynamic"
+             */
+            this.verticalPositioningMode = "dynamic";
+            /**
+             * @internal
+             * @defaultValue "dynamic"
+             */
+            this.horizontalPositioningMode = "dynamic";
+            /**
+             * @internal
+             */
+            this.horizontalInset = "false";
+            /**
+             * @internal
+             */
+            this.verticalInset = "false";
+            /**
+             * @internal
+             */
+            this.horizontalScaling = "content";
+            /**
+             * @internal
+             */
+            this.verticalScaling = "content";
+            /**
+             * @internal
+             */
+            this.verticalDefaultPosition = undefined;
+            /**
+             * @internal
+             */
+            this.horizontalDefaultPosition = undefined;
+            /**
+             * @internal
+             */
+            this.tooltipVisible = false;
+            /**
+             * Track current direction to pass to the anchored region
+             * updated when tooltip is shown
+             *
+             * @internal
+             */
+            this.currentDirection = Direction.ltr;
+            /**
+             * The timer that tracks delay time before the tooltip is shown on hover
+             */
+            this.showDelayTimer = null;
+            /**
+             * The timer that tracks delay time before the tooltip is hidden
+             */
+            this.hideDelayTimer = null;
+            /**
+             * Indicates whether the anchor is currently being hovered or has focus
+             */
+            this.isAnchorHoveredFocused = false;
+            /**
+             * Indicates whether the region is currently being hovered
+             */
+            this.isRegionHovered = false;
+            /**
+             * invoked when the anchored region's position relative to the anchor changes
+             *
+             * @internal
+             */
+            this.handlePositionChange = (ev) => {
+                this.classList.toggle("top", this.region.verticalPosition === "start");
+                this.classList.toggle("bottom", this.region.verticalPosition === "end");
+                this.classList.toggle("inset-top", this.region.verticalPosition === "insetStart");
+                this.classList.toggle("inset-bottom", this.region.verticalPosition === "insetEnd");
+                this.classList.toggle("center-vertical", this.region.verticalPosition === "center");
+                this.classList.toggle("left", this.region.horizontalPosition === "start");
+                this.classList.toggle("right", this.region.horizontalPosition === "end");
+                this.classList.toggle("inset-left", this.region.horizontalPosition === "insetStart");
+                this.classList.toggle("inset-right", this.region.horizontalPosition === "insetEnd");
+                this.classList.toggle("center-horizontal", this.region.horizontalPosition === "center");
+            };
+            /**
+             * mouse enters region
+             */
+            this.handleRegionMouseOver = (ev) => {
+                this.isRegionHovered = true;
+            };
+            /**
+             * mouse leaves region
+             */
+            this.handleRegionMouseOut = (ev) => {
+                this.isRegionHovered = false;
+                this.startHideDelayTimer();
+            };
+            /**
+             * mouse enters anchor
+             */
+            this.handleAnchorMouseOver = (ev) => {
+                if (this.tooltipVisible) {
+                    // tooltip is already visible, just set the anchor hover flag
+                    this.isAnchorHoveredFocused = true;
+                    return;
+                }
+                this.startShowDelayTimer();
+            };
+            /**
+             * mouse leaves anchor
+             */
+            this.handleAnchorMouseOut = (ev) => {
+                this.isAnchorHoveredFocused = false;
+                this.clearShowDelayTimer();
+                this.startHideDelayTimer();
+            };
+            /**
+             * anchor gets focus
+             */
+            this.handleAnchorFocusIn = (ev) => {
+                this.startShowDelayTimer();
+            };
+            /**
+             * anchor loses focus
+             */
+            this.handleAnchorFocusOut = (ev) => {
+                this.isAnchorHoveredFocused = false;
+                this.clearShowDelayTimer();
+                this.startHideDelayTimer();
+            };
+            /**
+             * starts the hide timer
+             */
+            this.startHideDelayTimer = () => {
+                this.clearHideDelayTimer();
+                if (!this.tooltipVisible) {
+                    return;
+                }
+                // allow 60 ms for account for pointer to move between anchor/tooltip
+                // without hiding tooltip
+                this.hideDelayTimer = window.setTimeout(() => {
+                    this.updateTooltipVisibility();
+                }, 60);
+            };
+            /**
+             * clears the hide delay
+             */
+            this.clearHideDelayTimer = () => {
+                if (this.hideDelayTimer !== null) {
+                    clearTimeout(this.hideDelayTimer);
+                    this.hideDelayTimer = null;
+                }
+            };
+            /**
+             * starts the show timer if not currently running
+             */
+            this.startShowDelayTimer = () => {
+                if (this.isAnchorHoveredFocused) {
+                    return;
+                }
+                if (this.delay > 1) {
+                    if (this.showDelayTimer === null)
+                        this.showDelayTimer = window.setTimeout(() => {
+                            this.startHover();
+                        }, this.delay);
+                    return;
+                }
+                this.startHover();
+            };
+            /**
+             * start hover
+             */
+            this.startHover = () => {
+                this.isAnchorHoveredFocused = true;
+                this.updateTooltipVisibility();
+            };
+            /**
+             * clears the show delay
+             */
+            this.clearShowDelayTimer = () => {
+                if (this.showDelayTimer !== null) {
+                    clearTimeout(this.showDelayTimer);
+                    this.showDelayTimer = null;
+                }
+            };
+            /**
+             *  Gets the anchor element by id
+             */
+            this.getAnchor = () => {
+                const rootNode = this.getRootNode();
+                if (rootNode instanceof ShadowRoot) {
+                    return rootNode.getElementById(this.anchor);
+                }
+                return document.getElementById(this.anchor);
+            };
+            /**
+             * handles key down events to check for dismiss
+             */
+            this.handleDocumentKeydown = (e) => {
+                if (!e.defaultPrevented && this.tooltipVisible) {
+                    switch (e.key) {
+                        case keyEscape:
+                            this.isAnchorHoveredFocused = false;
+                            this.updateTooltipVisibility();
+                            this.$emit("dismiss");
+                            break;
+                    }
+                }
+            };
+            /**
+             * determines whether to show or hide the tooltip based on current state
+             */
+            this.updateTooltipVisibility = () => {
+                if (this.visible === false) {
+                    this.hideTooltip();
+                }
+                else if (this.visible === true) {
+                    this.showTooltip();
+                    return;
+                }
+                else {
+                    if (this.isAnchorHoveredFocused || this.isRegionHovered) {
+                        this.showTooltip();
+                        return;
+                    }
+                    this.hideTooltip();
+                }
+            };
+            /**
+             * shows the tooltip
+             */
+            this.showTooltip = () => {
+                if (this.tooltipVisible) {
+                    return;
+                }
+                this.currentDirection = getDirection(this);
+                this.tooltipVisible = true;
+                document.addEventListener("keydown", this.handleDocumentKeydown);
+                DOM.queueUpdate(this.setRegionProps);
+            };
+            /**
+             * hides the tooltip
+             */
+            this.hideTooltip = () => {
+                if (!this.tooltipVisible) {
+                    return;
+                }
+                this.clearHideDelayTimer();
+                if (this.region !== null && this.region !== undefined) {
+                    this.region.removeEventListener("positionchange", this.handlePositionChange);
+                    this.region.viewportElement = null;
+                    this.region.anchorElement = null;
+                    this.region.removeEventListener("mouseover", this.handleRegionMouseOver);
+                    this.region.removeEventListener("mouseout", this.handleRegionMouseOut);
+                }
+                document.removeEventListener("keydown", this.handleDocumentKeydown);
+                this.tooltipVisible = false;
+            };
+            /**
+             * updates the tooltip anchored region props after it has been
+             * added to the DOM
+             */
+            this.setRegionProps = () => {
+                if (!this.tooltipVisible) {
+                    return;
+                }
+                this.region.viewportElement = this.viewportElement;
+                this.region.anchorElement = this.anchorElement;
+                this.region.addEventListener("positionchange", this.handlePositionChange);
+                this.region.addEventListener("mouseover", this.handleRegionMouseOver, {
+                    passive: true,
+                });
+                this.region.addEventListener("mouseout", this.handleRegionMouseOut, {
+                    passive: true,
+                });
+            };
+        }
+        visibleChanged() {
+            if (this.$fastController.isConnected) {
+                this.updateTooltipVisibility();
+                this.updateLayout();
+            }
+        }
+        anchorChanged() {
+            if (this.$fastController.isConnected) {
+                this.anchorElement = this.getAnchor();
+            }
+        }
+        positionChanged() {
+            if (this.$fastController.isConnected) {
+                this.updateLayout();
+            }
+        }
+        anchorElementChanged(oldValue) {
+            if (this.$fastController.isConnected) {
+                if (oldValue !== null && oldValue !== undefined) {
+                    oldValue.removeEventListener("mouseover", this.handleAnchorMouseOver);
+                    oldValue.removeEventListener("mouseout", this.handleAnchorMouseOut);
+                    oldValue.removeEventListener("focusin", this.handleAnchorFocusIn);
+                    oldValue.removeEventListener("focusout", this.handleAnchorFocusOut);
+                }
+                if (this.anchorElement !== null && this.anchorElement !== undefined) {
+                    this.anchorElement.addEventListener("mouseover", this.handleAnchorMouseOver, { passive: true });
+                    this.anchorElement.addEventListener("mouseout", this.handleAnchorMouseOut, { passive: true });
+                    this.anchorElement.addEventListener("focusin", this.handleAnchorFocusIn, {
+                        passive: true,
+                    });
+                    this.anchorElement.addEventListener("focusout", this.handleAnchorFocusOut, { passive: true });
+                    const anchorId = this.anchorElement.id;
+                    if (this.anchorElement.parentElement !== null) {
+                        this.anchorElement.parentElement
+                            .querySelectorAll(":hover")
+                            .forEach(element => {
+                            if (element.id === anchorId) {
+                                this.startShowDelayTimer();
+                            }
+                        });
+                    }
+                }
+                if (this.region !== null &&
+                    this.region !== undefined &&
+                    this.tooltipVisible) {
+                    this.region.anchorElement = this.anchorElement;
+                }
+                this.updateLayout();
+            }
+        }
+        viewportElementChanged() {
+            if (this.region !== null && this.region !== undefined) {
+                this.region.viewportElement = this.viewportElement;
+            }
+            this.updateLayout();
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.anchorElement = this.getAnchor();
+            this.updateTooltipVisibility();
+        }
+        disconnectedCallback() {
+            this.hideTooltip();
+            this.clearShowDelayTimer();
+            this.clearHideDelayTimer();
+            super.disconnectedCallback();
+        }
+        /**
+         * updated the properties being passed to the anchored region
+         */
+        updateLayout() {
+            this.verticalPositioningMode = "locktodefault";
+            this.horizontalPositioningMode = "locktodefault";
+            switch (this.position) {
+                case TooltipPosition.top:
+                case TooltipPosition.bottom:
+                    this.verticalDefaultPosition = this.position;
+                    this.horizontalDefaultPosition = "center";
+                    break;
+                case TooltipPosition.right:
+                case TooltipPosition.left:
+                case TooltipPosition.start:
+                case TooltipPosition.end:
+                    this.verticalDefaultPosition = "center";
+                    this.horizontalDefaultPosition = this.position;
+                    break;
+                case TooltipPosition.topLeft:
+                    this.verticalDefaultPosition = "top";
+                    this.horizontalDefaultPosition = "left";
+                    break;
+                case TooltipPosition.topRight:
+                    this.verticalDefaultPosition = "top";
+                    this.horizontalDefaultPosition = "right";
+                    break;
+                case TooltipPosition.bottomLeft:
+                    this.verticalDefaultPosition = "bottom";
+                    this.horizontalDefaultPosition = "left";
+                    break;
+                case TooltipPosition.bottomRight:
+                    this.verticalDefaultPosition = "bottom";
+                    this.horizontalDefaultPosition = "right";
+                    break;
+                case TooltipPosition.topStart:
+                    this.verticalDefaultPosition = "top";
+                    this.horizontalDefaultPosition = "start";
+                    break;
+                case TooltipPosition.topEnd:
+                    this.verticalDefaultPosition = "top";
+                    this.horizontalDefaultPosition = "end";
+                    break;
+                case TooltipPosition.bottomStart:
+                    this.verticalDefaultPosition = "bottom";
+                    this.horizontalDefaultPosition = "start";
+                    break;
+                case TooltipPosition.bottomEnd:
+                    this.verticalDefaultPosition = "bottom";
+                    this.horizontalDefaultPosition = "end";
+                    break;
+                default:
+                    this.verticalPositioningMode = "dynamic";
+                    this.horizontalPositioningMode = "dynamic";
+                    this.verticalDefaultPosition = void 0;
+                    this.horizontalDefaultPosition = "center";
+                    break;
+            }
+        }
+    }
+    __decorate$1([
+        attr({ mode: "boolean" })
+    ], Tooltip$1.prototype, "visible", void 0);
+    __decorate$1([
+        attr
+    ], Tooltip$1.prototype, "anchor", void 0);
+    __decorate$1([
+        attr
+    ], Tooltip$1.prototype, "delay", void 0);
+    __decorate$1([
+        attr
+    ], Tooltip$1.prototype, "position", void 0);
+    __decorate$1([
+        attr({ attribute: "auto-update-mode" })
+    ], Tooltip$1.prototype, "autoUpdateMode", void 0);
+    __decorate$1([
+        attr({ attribute: "horizontal-viewport-lock" })
+    ], Tooltip$1.prototype, "horizontalViewportLock", void 0);
+    __decorate$1([
+        attr({ attribute: "vertical-viewport-lock" })
+    ], Tooltip$1.prototype, "verticalViewportLock", void 0);
+    __decorate$1([
+        observable
+    ], Tooltip$1.prototype, "anchorElement", void 0);
+    __decorate$1([
+        observable
+    ], Tooltip$1.prototype, "viewportElement", void 0);
+    __decorate$1([
+        observable
+    ], Tooltip$1.prototype, "verticalPositioningMode", void 0);
+    __decorate$1([
+        observable
+    ], Tooltip$1.prototype, "horizontalPositioningMode", void 0);
+    __decorate$1([
+        observable
+    ], Tooltip$1.prototype, "horizontalInset", void 0);
+    __decorate$1([
+        observable
+    ], Tooltip$1.prototype, "verticalInset", void 0);
+    __decorate$1([
+        observable
+    ], Tooltip$1.prototype, "horizontalScaling", void 0);
+    __decorate$1([
+        observable
+    ], Tooltip$1.prototype, "verticalScaling", void 0);
+    __decorate$1([
+        observable
+    ], Tooltip$1.prototype, "verticalDefaultPosition", void 0);
+    __decorate$1([
+        observable
+    ], Tooltip$1.prototype, "horizontalDefaultPosition", void 0);
+    __decorate$1([
+        observable
+    ], Tooltip$1.prototype, "tooltipVisible", void 0);
+    __decorate$1([
+        observable
+    ], Tooltip$1.prototype, "currentDirection", void 0);
+
     /**
      * The template for the {@link @microsoft/fast-foundation#(TreeItem:class)} component.
      * @public
@@ -13692,7 +14293,7 @@
      */
     const focusVisible$1 = canUseFocusVisible() ? "focus-visible" : "focus";
 
-    const styles$s = css `
+    const styles$t = css `
     :host {
         contain: layout;
         display: block;
@@ -13716,7 +14317,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$s
+        styles: styles$t
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -13737,11 +14338,11 @@
     const White = "#ffffff";
     const Black88 = "#252526";
     const Black85 = "#363738";
+    const Black80 = "#505153";
     const Black91 = "#161617";
     const ForestGreen = "#074023";
     const DigitalGreenLight = "#009b65";
     const Warning100LightUi = "#ff4b00";
-    const Black30 = "#d3d5d6";
     const DigitalGreenDark = "#006b46";
     const PowerGreen = "#32eb96";
     const Title2Family = "Source Sans Pro";
@@ -13870,6 +14471,7 @@
     const tokenNames = {
         actionRgbPartialColor: 'action-rgb-partial-color',
         applicationBackgroundColor: 'application-background-color',
+        dividerBackgroundColor: 'divider-background-color',
         headerBackgroundColor: 'header-background-color',
         sectionBackgroundColor: 'section-background-color',
         fillSelectedColor: 'fill-selected-color',
@@ -14017,6 +14619,7 @@
         tooltipCaptionFontWeight: 'tooltip-caption-font-weight',
         tooltipCaptionFontLineHeight: 'tooltip-caption-font-line-height',
         tooltipCaptionFallbackFontFamily: 'tooltip-caption-fallback-font-family',
+        tooltipBackgroundColor: 'tooltip-background-color',
         errorTextFont: 'error-text-font',
         errorTextFontColor: 'error-text-font-color',
         errorTextDisabledFontColor: 'error-text-disabled-font-color',
@@ -14053,7 +14656,7 @@
 
     const template$5 = html `<slot></slot>`;
 
-    const styles$r = css `
+    const styles$s = css `
     :host {
         display: contents;
     }
@@ -14109,7 +14712,7 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$r,
+        styles: styles$s,
         template: template$5
     });
     DesignSystem.getOrCreate()
@@ -14132,7 +14735,8 @@
     const actionRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.actionRgbPartialColor)).withDefault((element) => hexToRgbPartial(getColorForTheme(element, Black91, Black15, White)));
     const applicationBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.applicationBackgroundColor)).withDefault((element) => getColorForTheme(element, White, Black85, ForestGreen));
     DesignToken.create(styleNameFromTokenName(tokenNames.headerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black7, Black88, ForestGreen));
-    DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundColor)).withDefault((element) => getColorForTheme(element, Black30, Black91, ForestGreen));
+    DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
+    DesignToken.create(styleNameFromTokenName(tokenNames.dividerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
     const fillSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.2));
     const fillSelectedRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
     const fillHoverSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.15));
@@ -14148,6 +14752,7 @@
     const iconColor = DesignToken.create(styleNameFromTokenName(tokenNames.iconColor)).withDefault((element) => getColorForTheme(element, Black91, Black15, White));
     const popupBoxShadowColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBoxShadowColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black75, Black85, Black85), 0.3));
     const popupBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.3));
+    const tooltipBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.tooltipBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black85, ForestGreen));
     // Component Sizing Tokens
     const controlHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlHeight)).withDefault('32px');
     const smallPadding = DesignToken.create(styleNameFromTokenName(tokenNames.smallPadding)).withDefault('4px');
@@ -14171,7 +14776,7 @@
     const [groupHeaderFont, groupHeaderFontColor, groupHeaderDisabledFontColor, groupHeaderFontFamily, groupHeaderFontWeight, groupHeaderFontSize, groupHeaderFontLineHeight, groupHeaderFallbackFontFamily] = createFontTokens(tokenNames.groupHeaderFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), GroupLabel1Family, GroupLabel1Weight, GroupLabel1Size, GroupLabel1LineHeight, 'sans-serif');
     const [controlLabelFont, controlLabelFontColor, controlLabelDisabledFontColor, controlLabelFontFamily, controlLabelFontWeight, controlLabelFontSize, controlLabelFontLineHeight, controlLabelFallbackFontFamily] = createFontTokens(tokenNames.controlLabelFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), ControlLabel1Family, ControlLabel1Weight, ControlLabel1Size, ControlLabel1LineHeight, 'sans-serif');
     const [buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor, buttonLabelFontFamily, buttonLabelFontWeight, buttonLabelFontSize, buttonLabelFontLineHeight, buttonLabelFallbackFontFamily] = createFontTokens(tokenNames.buttonLabelFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), ButtonLabel1Family, ButtonLabel1Weight, ButtonLabel1Size, ButtonLabel1LineHeight, 'sans-serif');
-    createFontTokens(tokenNames.tooltipCaptionFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), TooltipCaptionFamily, TooltipCaptionWeight, TooltipCaptionSize, TooltipCaptionLineHeight, 'sans-serif');
+    const [tooltipCaptionFont, tooltipCaptionFontColor, tooltipCaptionDisabledFontColor, tooltipCaptionFontFamily, tooltipCaptionFontWeight, tooltipCaptionFontSize, tooltipCaptionFontLineHeight, tooltipCaptionFallbackFontFamily] = createFontTokens(tokenNames.tooltipCaptionFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), TooltipCaptionFamily, TooltipCaptionWeight, TooltipCaptionSize, TooltipCaptionLineHeight, 'sans-serif');
     const [errorTextFont, errorTextFontColor, errorTextDisabledFontColor, errorTextFontFamily, errorTextFontWeight, errorTextFontSize, errorTextFontLineHeight, errorTextFallbackFontFamily] = createFontTokens(tokenNames.errorTextFont, (element) => getFailColorForTheme(element), (element) => hexToRgbaCssColor(getFailColorForTheme(element), 0.3), ErrorLightUiFamily, ErrorLightUiWeight, ErrorLightUiSize, TooltipCaptionLineHeight, 'sans-serif');
     // Font Transform Tokens
     const groupHeaderTextTransform = DesignToken.create(styleNameFromTokenName(tokenNames.groupHeaderTextTransform)).withDefault('uppercase');
@@ -14358,7 +14963,7 @@
      */
     const themeBehavior = (lightStyle, darkStyleOrAlias, colorStyleOrAlias) => new ThemeStyleSheetBehavior(lightStyle, darkStyleOrAlias, colorStyleOrAlias);
 
-    const styles$q = css `
+    const styles$r = css `
     ${display('inline-block')}
 
     :host {
@@ -14421,7 +15026,7 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$q
+        styles: styles$r
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
@@ -15007,7 +15612,7 @@
      */
     const focusVisible = `:${focusVisible$1}`;
 
-    const styles$p = css `
+    const styles$q = css `
     ${display('inline-flex')}
 
     :host {
@@ -15087,7 +15692,7 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$p,
+        styles: styles$q,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
@@ -15117,7 +15722,7 @@
         block: 'block'
     };
 
-    const styles$o = css `
+    const styles$p = css `
     ${display('inline-flex')}
 
     :host {
@@ -15324,7 +15929,7 @@
             `));
 
     // prettier-ignore
-    const styles$n = styles$o
+    const styles$o = styles$p
         .withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
                 :host(.primary) .control {
                     box-shadow: 0px 0px 0px ${borderWidth} rgba(${actionRgbPartialColor}, 0.3) inset;
@@ -15438,14 +16043,14 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$n,
+        styles: styles$o,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
 
-    const styles$m = css `
+    const styles$n = css `
     ${display('inline-flex')}
 
     :host {
@@ -15563,7 +16168,7 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$m,
+        styles: styles$n,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
@@ -15581,7 +16186,7 @@
     </template
 `;
 
-    const styles$l = css `
+    const styles$m = css `
     ${display('inline-flex')}
 
     :host {
@@ -15628,7 +16233,7 @@
         const composedIcon = iconClass.compose({
             baseName,
             template: template$4,
-            styles: styles$l,
+            styles: styles$m,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -15656,7 +16261,7 @@
     }
     registerIcon('icon-arrow-expander-down', IconArrowExpanderDown);
 
-    const styles$k = css `
+    const styles$l = css `
     ${display('inline-flex')}
 
     :host {
@@ -15845,7 +16450,7 @@
     }
 `;
 
-    const styles$j = css `
+    const styles$k = css `
     .error-icon {
         display: none;
     }
@@ -15883,9 +16488,9 @@
     }
 `;
 
-    const styles$i = css `
+    const styles$j = css `
+    ${styles$l}
     ${styles$k}
-    ${styles$j}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -16057,7 +16662,7 @@
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$i,
+        styles: styles$j,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -17182,7 +17787,7 @@
         slideOutOptions
     };
 
-    const styles$h = css `
+    const styles$i = css `
     ${display('block')}
 
     :host {
@@ -17494,7 +18099,7 @@
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
         template: dialogTemplate,
-        styles: styles$h
+        styles: styles$i
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -19038,7 +19643,7 @@
     }
     registerIcon('icon-xmark-check', IconXmarkCheck);
 
-    const styles$g = css `
+    const styles$h = css `
     ${display('flex')}
 
     :host {
@@ -19117,11 +19722,11 @@
         baseName: 'list-option',
         baseClass: ListboxOption,
         template: listboxOptionTemplate,
-        styles: styles$g
+        styles: styles$h
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
 
-    const styles$f = css `
+    const styles$g = css `
     ${display('grid')}
 
     :host {
@@ -19176,11 +19781,11 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$f
+        styles: styles$g
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
-    const styles$e = css `
+    const styles$f = css `
     ${display('inline-block')}
 
     :host {
@@ -19198,8 +19803,8 @@
     }
 `;
 
-    const styles$d = css `
-    ${styles$o}
+    const styles$e = css `
+    ${styles$p}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -19301,7 +19906,7 @@
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
         template: template$3,
-        styles: styles$d,
+        styles: styles$e,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -19518,14 +20123,14 @@
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
         template: template$2,
-        styles: styles$e,
+        styles: styles$f,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
 
-    const styles$c = css `
+    const styles$d = css `
     ${display('grid')}
 
     :host {
@@ -19623,12 +20228,21 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$c,
+        styles: styles$d,
         expandCollapseGlyph: arrowExpanderRight16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
 
-    const styles$b = css `
+    /**
+     * Values for the 'appearance' property of the number field
+     */
+    const NumberFieldAppearance = {
+        underline: 'underline',
+        outline: 'outline',
+        block: 'block'
+    };
+
+    const styles$c = css `
     ${display('inline-block')}
 
     :host {
@@ -19651,6 +20265,10 @@
         font: ${controlLabelFont};
     }
 
+    :host([disabled]) .label {
+        color: ${controlLabelDisabledFontColor};
+    }
+
     .root {
         box-sizing: border-box;
         position: relative;
@@ -19658,7 +20276,7 @@
         flex-direction: row;
         justify-content: center;
         border-radius: 0px;
-        border-bottom: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
+        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
         gap: calc(${standardPadding} / 2);
     }
 
@@ -19666,9 +20284,8 @@
         border-bottom-color: ${borderHoverColor};
     }
 
-    :host([disabled]) .root,
-    :host([disabled]) .root:hover {
-        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
+    :host([disabled]) .root {
+        border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
     .root::before {
@@ -19717,7 +20334,7 @@
         font: inherit;
         background: transparent;
         color: inherit;
-        height: calc(${controlHeight} - ${borderWidth});
+        height: ${controlHeight};
         width: 100%;
         border: none;
         padding: 0px;
@@ -19749,32 +20366,67 @@
 
     .controls {
         display: flex;
-        flex-direction: column;
-    }
-
-    .step-up,
-    .step-down {
-        display: inline-flex;
-        height: 15px;
-        width: 15px;
-        cursor: pointer;
+        flex-direction: row-reverse;
         justify-content: center;
         align-items: center;
     }
 
-    .step-up svg,
-    .step-down svg {
-        height: ${iconSize};
-        width: ${iconSize};
-        fill: ${borderColor};
+    .step-up-down-button {
+        ${controlHeight.cssCustomProperty}: 24px;
     }
-`;
+`.withBehaviors(appearanceBehavior(NumberFieldAppearance.underline, css `
+            .root {
+                border-bottom-width: ${borderWidth};
+                padding-top: ${borderWidth};
+                padding-left: ${borderWidth};
+                padding-right: ${borderWidth};
+            }
+
+            .control {
+                height: calc(${controlHeight} - 2 * ${borderWidth});
+            }
+        `), appearanceBehavior(NumberFieldAppearance.block, css `
+            .root {
+                background-color: rgba(${borderRgbPartialColor}, 0.1);
+                padding-left: ${borderWidth};
+                padding-right: ${borderWidth};
+            }
+
+            .root:focus-within,
+            :host(.invalid) .root {
+                border-bottom-width: ${borderWidth};
+            }
+
+            :host([disabled]) .root {
+                background-color: rgba(${borderRgbPartialColor}, 0.07);
+            }
+        `), appearanceBehavior(NumberFieldAppearance.outline, css `
+            .root {
+                border-width: ${borderWidth};
+            }
+
+            .control {
+                height: calc(${controlHeight} - 2 * ${borderWidth});
+            }
+        `));
 
     /**
      * A nimble-styled HTML number input
      */
     class NumberField extends NumberField$1 {
+        constructor() {
+            super(...arguments);
+            this.appearance = NumberFieldAppearance.underline;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            // This is a workaround for FAST issue: https://github.com/microsoft/fast/issues/6148
+            this.control.setAttribute('role', 'spinbutton');
+        }
     }
+    __decorate([
+        attr
+    ], NumberField.prototype, "appearance", void 0);
     /**
      * A function that returns a number-field registration for configuring the component with a DesignSystem.
      *
@@ -19787,17 +20439,37 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$b,
+        styles: styles$c,
         shadowOptions: {
             delegatesFocus: true
         },
-        stepDownGlyph: arrowExpanderDown16X16.data,
-        stepUpGlyph: arrowExpanderUp16X16.data
+        stepDownGlyph: html `
+        <nimble-button
+            class="step-up-down-button"
+            appearance="ghost"
+            content-hidden
+            tabindex="-1"
+        >
+            "Decrement"
+            <nimble-icon-minus-wide slot="start"></nimble-icon-minus-wide>
+        </nimble-button>
+    `,
+        stepUpGlyph: html `
+        <nimble-button
+            class="step-up-down-button"
+            appearance="ghost"
+            content-hidden
+            tabindex="-1"
+        >
+            "Increment"
+            <nimble-icon-add slot="start"></nimble-icon-add>
+        </nimble-button>
+    `
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-    const styles$a = css `
-    ${styles$k}
+    const styles$b = css `
+    ${styles$l}
 `;
 
     /**
@@ -19835,12 +20507,12 @@
         baseName: 'select',
         baseClass: Select$1,
         template: selectTemplate,
-        styles: styles$a,
+        styles: styles$b,
         indicator: arrowExpanderDown16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-    const styles$9 = css `
+    const styles$a = css `
     ${display('inline-flex')}
 
     :host {
@@ -20053,11 +20725,11 @@
         baseClass: Switch$1,
         baseName: 'switch',
         template: template$1,
-        styles: styles$9
+        styles: styles$a
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-    const styles$8 = css `
+    const styles$9 = css `
     ${display('inline-flex')}
 
     :host {
@@ -20161,11 +20833,11 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$8
+        styles: styles$9
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-    const styles$7 = css `
+    const styles$8 = css `
     ${display('block')}
 
     :host {
@@ -20185,11 +20857,11 @@
         baseName: 'tab-panel',
         baseClass: TabPanel$1,
         template: tabPanelTemplate,
-        styles: styles$7
+        styles: styles$8
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
-    const styles$6 = css `
+    const styles$7 = css `
     ${display('grid')}
 
     :host {
@@ -20227,11 +20899,11 @@
         baseName: 'tabs',
         baseClass: Tabs$1,
         template: tabsTemplate,
-        styles: styles$6
+        styles: styles$7
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
 
-    const styles$5 = css `
+    const styles$6 = css `
     ${display('flex')}
 
     :host {
@@ -20266,7 +20938,7 @@
     const nimbleTabsToolbar = TabsToolbar.compose({
         baseName: 'tabs-toolbar',
         template,
-        styles: styles$5
+        styles: styles$6
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
 
@@ -20275,7 +20947,7 @@
         block: 'block'
     };
 
-    const styles$4 = css `
+    const styles$5 = css `
     ${display('inline-flex')}
 
     :host {
@@ -20417,7 +21089,7 @@
         baseName: 'text-area',
         baseClass: TextArea$1,
         template: textAreaTemplate,
-        styles: styles$4,
+        styles: styles$5,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -20434,9 +21106,9 @@
         frameless: 'frameless'
     };
 
-    const styles$3 = css `
+    const styles$4 = css `
     ${display('inline-block')}
-    ${styles$j}
+    ${styles$k}
 
     :host {
         font: ${bodyFont};
@@ -20718,7 +21390,7 @@
         baseName: 'text-field',
         baseClass: TextField$1,
         template: textFieldTemplate,
-        styles: styles$3,
+        styles: styles$4,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -20734,7 +21406,7 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 
-    const styles$2 = css `
+    const styles$3 = css `
     .positioning-region {
         display: flex;
         padding: ${smallPadding} ${standardPadding};
@@ -20769,13 +21441,50 @@
         baseName: 'toolbar',
         baseClass: Toolbar$1,
         template: toolbarTemplate,
-        styles: styles$2,
+        styles: styles$3,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
 
+    const styles$2 = css `
+    ${display('inline-flex')}
+
+    :host {
+        font: ${tooltipCaptionFont};
+        color: ${tooltipCaptionFontColor};
+        text-align: left;
+    }
+
+    .tooltip {
+        box-sizing: border-box;
+        flex-shrink: 0;
+        max-width: 440px;
+        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
+        box-shadow: 0px 3px 4px ${popupBoxShadowColor};
+        background-color: ${tooltipBackgroundColor};
+        padding-bottom: 6px;
+        padding-left: calc(${standardPadding} / 2);
+        padding-right: calc(${standardPadding} / 2);
+        padding-top: ${smallPadding};
+        display: inline-flex;
+    }
+`;
+
+    /**
+     * A nimble-styled tooltip control.
+     */
+    class Tooltip extends Tooltip$1 {
+    }
+    const nimbleTooltip = Tooltip.compose({
+        baseName: 'tooltip',
+        baseClass: Tooltip$1,
+        template: tooltipTemplate,
+        styles: styles$2
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
+
     const groupSelectedAttribute = 'group-selected';
     const TreeViewSelectionMode = {
         all: 'all',