@ni/nimble-components 11.6.1 → 11.7.1

package/dist/all-components-bundle.js

@@ -278,30 +278,6 @@
         },
     });
 
-    function spilloverSubscribe(subscriber) {
-        const spillover = this.spillover;
-        const index = spillover.indexOf(subscriber);
-        if (index === -1) {
-            spillover.push(subscriber);
-        }
-    }
-    function spilloverUnsubscribe(subscriber) {
-        const spillover = this.spillover;
-        const index = spillover.indexOf(subscriber);
-        if (index !== -1) {
-            spillover.splice(index, 1);
-        }
-    }
-    function spilloverNotifySubscribers(args) {
-        const spillover = this.spillover;
-        const source = this.source;
-        for (let i = 0, ii = spillover.length; i < ii; ++i) {
-            spillover[i].handleChange(source, args);
-        }
-    }
-    function spilloverHas(subscriber) {
-        return this.spillover.indexOf(subscriber) !== -1;
-    }
     /**
      * An implementation of {@link Notifier} that efficiently keeps track of
      * subscribers interested in a specific change notification on an
@@ -331,42 +307,58 @@
          * @param subscriber - The subscriber to test for inclusion in this set.
          */
         has(subscriber) {
-            return this.sub1 === subscriber || this.sub2 === subscriber;
+            return this.spillover === void 0
+                ? this.sub1 === subscriber || this.sub2 === subscriber
+                : this.spillover.indexOf(subscriber) !== -1;
         }
         /**
          * Subscribes to notification of changes in an object's state.
          * @param subscriber - The object that is subscribing for change notification.
          */
         subscribe(subscriber) {
-            if (this.has(subscriber)) {
-                return;
-            }
-            if (this.sub1 === void 0) {
-                this.sub1 = subscriber;
-                return;
+            const spillover = this.spillover;
+            if (spillover === void 0) {
+                if (this.has(subscriber)) {
+                    return;
+                }
+                if (this.sub1 === void 0) {
+                    this.sub1 = subscriber;
+                    return;
+                }
+                if (this.sub2 === void 0) {
+                    this.sub2 = subscriber;
+                    return;
+                }
+                this.spillover = [this.sub1, this.sub2, subscriber];
+                this.sub1 = void 0;
+                this.sub2 = void 0;
             }
-            if (this.sub2 === void 0) {
-                this.sub2 = subscriber;
-                return;
+            else {
+                const index = spillover.indexOf(subscriber);
+                if (index === -1) {
+                    spillover.push(subscriber);
+                }
             }
-            this.spillover = [this.sub1, this.sub2, subscriber];
-            this.subscribe = spilloverSubscribe;
-            this.unsubscribe = spilloverUnsubscribe;
-            this.notify = spilloverNotifySubscribers;
-            this.has = spilloverHas;
-            this.sub1 = void 0;
-            this.sub2 = void 0;
         }
         /**
          * Unsubscribes from notification of changes in an object's state.
          * @param subscriber - The object that is unsubscribing from change notification.
          */
         unsubscribe(subscriber) {
-            if (this.sub1 === subscriber) {
-                this.sub1 = void 0;
+            const spillover = this.spillover;
+            if (spillover === void 0) {
+                if (this.sub1 === subscriber) {
+                    this.sub1 = void 0;
+                }
+                else if (this.sub2 === subscriber) {
+                    this.sub2 = void 0;
+                }
             }
-            else if (this.sub2 === subscriber) {
-                this.sub2 = void 0;
+            else {
+                const index = spillover.indexOf(subscriber);
+                if (index !== -1) {
+                    spillover.splice(index, 1);
+                }
             }
         }
         /**
@@ -374,14 +366,22 @@
          * @param args - Data passed along to subscribers during notification.
          */
         notify(args) {
-            const sub1 = this.sub1;
-            const sub2 = this.sub2;
+            const spillover = this.spillover;
             const source = this.source;
-            if (sub1 !== void 0) {
-                sub1.handleChange(source, args);
+            if (spillover === void 0) {
+                const sub1 = this.sub1;
+                const sub2 = this.sub2;
+                if (sub1 !== void 0) {
+                    sub1.handleChange(source, args);
+                }
+                if (sub2 !== void 0) {
+                    sub2.handleChange(source, args);
+                }
             }
-            if (sub2 !== void 0) {
-                sub2.handleChange(source, args);
+            else {
+                for (let i = 0, ii = spillover.length; i < ii; ++i) {
+                    spillover[i].handleChange(source, args);
+                }
             }
         }
     }
@@ -6745,8 +6745,14 @@
              * @internal
              */
             this.keypressHandler = (e) => {
+                if (this.readOnly) {
+                    return;
+                }
                 switch (e.key) {
                     case keySpace:
+                        if (this.indeterminate) {
+                            this.indeterminate = false;
+                        }
                         this.checked = !this.checked;
                         break;
                 }
@@ -6756,6 +6762,9 @@
              */
             this.clickHandler = (e) => {
                 if (!this.disabled && !this.readOnly) {
+                    if (this.indeterminate) {
+                        this.indeterminate = false;
+                    }
                     this.checked = !this.checked;
                 }
             };
@@ -7780,7 +7789,7 @@
          * @internal
          */
         focusoutHandler(e) {
-            this.updateValue();
+            this.syncValue();
             if (!this.open) {
                 return true;
             }
@@ -7802,7 +7811,12 @@
         inputHandler(e) {
             this.filter = this.control.value;
             this.filterOptions();
-            if (e.inputType === "deleteContentBackward" || !this.filter.length) {
+            if (!this.isAutocompleteInline) {
+                this.selectedIndex = this.options
+                    .map(option => option.text)
+                    .indexOf(this.control.value);
+            }
+            if (e.inputType.includes("deleteContent") || !this.filter.length) {
                 return true;
             }
             if (this.isAutocompleteList && !this.open) {
@@ -7828,7 +7842,7 @@
             }
             switch (key) {
                 case "Enter": {
-                    this.updateValue(true);
+                    this.syncValue();
                     if (this.isAutocompleteInline) {
                         this.filter = this.value;
                     }
@@ -7851,7 +7865,7 @@
                     break;
                 }
                 case "Tab": {
-                    this.updateValue();
+                    this.setInputToSelection();
                     if (!this.open) {
                         return true;
                     }
@@ -7870,7 +7884,6 @@
                         super.keydownHandler(e);
                     }
                     if (this.isAutocompleteInline) {
-                        this.updateValue();
                         this.setInlineSelection();
                     }
                     break;
@@ -7951,18 +7964,37 @@
             }
         }
         /**
-         * Focus and select the content of the control based on the first selected option.
+         * Focus and set the content of the control based on the first selected option.
          *
-         * @param start - The index for the starting range
          * @internal
          */
-        setInlineSelection() {
+        setInputToSelection() {
             if (this.firstSelectedOption) {
                 this.control.value = this.firstSelectedOption.text;
                 this.control.focus();
+            }
+        }
+        /**
+         * Focus, set and select the content of the control based on the first selected option.
+         *
+         * @internal
+         */
+        setInlineSelection() {
+            if (this.firstSelectedOption) {
+                this.setInputToSelection();
                 this.control.setSelectionRange(this.filter.length, this.control.value.length, "backward");
             }
         }
+        /**
+         * Determines if a value update should involve emitting a change event, then updates the value.
+         *
+         * @internal
+         */
+        syncValue() {
+            var _a;
+            const newValue = this.selectedIndex > -1 ? (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text : this.control.value;
+            this.updateValue(this.value !== newValue);
+        }
         /**
          * Calculate and apply listbox positioning based on available viewport space.
          *
@@ -8024,6 +8056,7 @@
             var _a;
             if (this.$fastController.isConnected) {
                 this.value = ((_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text) || this.control.value;
+                this.control.value = this.value;
             }
             if (shouldEmit) {
                 this.$emit("change");
@@ -11894,7 +11927,7 @@
                 this.updateValue(true);
                 this.indexWhenOpened = this.selectedIndex;
             }
-            return !(key in ArrowKeys);
+            return !(key === keyArrowDown || key === keyArrowUp);
         }
         connectedCallback() {
             super.connectedCallback();
@@ -12866,6 +12899,12 @@
         @click="${(x, c) => x.clickHandler(c.event)}"
         @focusin="${(x, c) => x.focusinHandler(c.event)}"
         @keydown="${(x, c) => x.keydownHandler(c.event)}"
+        ${children({
+    property: "childItems",
+    attributeFilter: ["disabled", "hidden"],
+    filter: elements(),
+    subtree: true,
+})}
     >
         <slot name="label"></slot>
         <div class="positioning-region" part="positioning-region">
@@ -12942,11 +12981,6 @@
              * HTML Attribute: `orientation`
              */
             this.orientation = Orientation.horizontal;
-            this.startEndSlotChange = () => {
-                if (this.$fastController.isConnected) {
-                    this.reduceFocusableElements();
-                }
-            };
         }
         /**
          * The index of the currently focused element, clamped between 0 and the last element.
@@ -12981,22 +13015,17 @@
             }
             return true;
         }
+        childItemsChanged(prev, next) {
+            if (this.$fastController.isConnected) {
+                this.reduceFocusableElements();
+            }
+        }
         /**
          * @internal
          */
         connectedCallback() {
             super.connectedCallback();
             this.direction = getDirection(this);
-            this.start.addEventListener("slotchange", this.startEndSlotChange);
-            this.end.addEventListener("slotchange", this.startEndSlotChange);
-        }
-        /**
-         * @internal
-         */
-        disconnectedCallback() {
-            super.disconnectedCallback();
-            this.start.removeEventListener("slotchange", this.startEndSlotChange);
-            this.end.removeEventListener("slotchange", this.startEndSlotChange);
         }
         /**
          * When the toolbar receives focus, set the currently active element as focused.
@@ -13059,7 +13088,13 @@
          * @internal
          */
         reduceFocusableElements() {
+            var _a;
+            const previousFocusedElement = (_a = this.focusableElements) === null || _a === void 0 ? void 0 : _a[this.activeIndex];
             this.focusableElements = this.allSlottedItems.reduce(Toolbar$1.reduceFocusableItems, []);
+            // If the previously active item is still focusable, adjust the active index to the
+            // index of that item.
+            const adjustedActiveIndex = this.focusableElements.indexOf(previousFocusedElement);
+            this.activeIndex = Math.max(0, adjustedActiveIndex);
             this.setFocusableElements();
         }
         /**
@@ -13087,10 +13122,12 @@
             const isRoleRadio = element.getAttribute("role") === "radio";
             const isFocusableFastElement = (_b = (_a = element.$fastController) === null || _a === void 0 ? void 0 : _a.definition.shadowOptions) === null || _b === void 0 ? void 0 : _b.delegatesFocus;
             const hasFocusableShadow = Array.from((_d = (_c = element.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll("*")) !== null && _d !== void 0 ? _d : []).some(x => isFocusable(x));
-            if (isFocusable(element) ||
-                isRoleRadio ||
-                isFocusableFastElement ||
-                hasFocusableShadow) {
+            if (!element.hasAttribute("disabled") &&
+                !element.hasAttribute("hidden") &&
+                (isFocusable(element) ||
+                    isRoleRadio ||
+                    isFocusableFastElement ||
+                    hasFocusableShadow)) {
                 elements.push(element);
                 return elements;
             }
@@ -13122,6 +13159,9 @@
     __decorate$1([
         observable
     ], Toolbar$1.prototype, "slottedLabel", void 0);
+    __decorate$1([
+        observable
+    ], Toolbar$1.prototype, "childItems", void 0);
     /**
      * Includes ARIA states and properties relating to the ARIA toolbar role
      *
@@ -13138,37 +13178,6 @@
     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
      *
@@ -14327,6 +14336,8 @@
      * Do not edit directly
      * Generated on Thu, 26 May 2022 18:20:05 GMT
      */
+    const Information100DarkUi = "#a46eff";
+    const Information100LightUi = "#804ad9";
     const Warning100DarkUi = "#ff8126";
     const Pass100LightUi = "#009921";
     const Pass100DarkUi = "#00c12b";
@@ -14342,6 +14353,7 @@
     const Black91 = "#161617";
     const ForestGreen = "#074023";
     const DigitalGreenLight = "#009b65";
+    const BannerFail100DarkUi = "#d63434";
     const Warning100LightUi = "#ff4b00";
     const DigitalGreenDark = "#006b46";
     const PowerGreen = "#32eb96";
@@ -14484,6 +14496,7 @@
         failColor: 'fail-color',
         warningColor: 'warning-color',
         passColor: 'pass-color',
+        informationColor: 'information-color',
         borderHoverColor: 'border-hover-color',
         iconColor: 'icon-color',
         popupBoxShadowColor: 'popup-box-shadow-color',
@@ -14654,7 +14667,7 @@
         return c > 3 && r && Object.defineProperty(target, key, r), r;
     }
 
-    const template$5 = html `<slot></slot>`;
+    const template$6 = html `<slot></slot>`;
 
     const styles$s = css `
     :host {
@@ -14713,7 +14726,7 @@
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
         styles: styles$s,
-        template: template$5
+        template: template$6
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -14747,12 +14760,13 @@
     const failColor = DesignToken.create(styleNameFromTokenName(tokenNames.failColor)).withDefault((element) => getFailColorForTheme(element));
     const warningColor = DesignToken.create(styleNameFromTokenName(tokenNames.warningColor)).withDefault((element) => getWarningColorForTheme(element));
     const passColor = DesignToken.create(styleNameFromTokenName(tokenNames.passColor)).withDefault((element) => getPassColorForTheme(element));
+    const informationColor = DesignToken.create(styleNameFromTokenName(tokenNames.informationColor)).withDefault((element) => getInformationColorForTheme(element));
     const borderHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderHoverColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, White));
     // Component Color Tokens
     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));
+    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');
@@ -14843,6 +14857,9 @@
     function getPassColorForTheme(element) {
         return getColorForTheme(element, Pass100LightUi, Pass100DarkUi, White);
     }
+    function getInformationColorForTheme(element) {
+        return getColorForTheme(element, Information100LightUi, Information100DarkUi, White);
+    }
     function getDefaultLineColorForTheme(element) {
         return getColorForTheme(element, Black91, Black15, White);
     }
@@ -16180,7 +16197,7 @@
     </div>
 `;
 
-    const template$4 = html `
+    const template$5 = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
@@ -16213,6 +16230,10 @@
         ${iconColor.cssCustomProperty}: ${passColor};
     }
 
+    :host(.information) {
+        ${iconColor.cssCustomProperty}: ${informationColor};
+    }
+
     .icon svg {
         fill: ${iconColor};
         width: 100%;
@@ -16232,7 +16253,7 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$4,
+            template: template$5,
             styles: styles$m,
             baseClass: iconClass
         });
@@ -19651,6 +19672,7 @@
         font: ${bodyFont};
         cursor: pointer;
         justify-content: left;
+        height: ${controlHeight};
     }
 
     .content {
@@ -19831,7 +19853,7 @@
     }
 `;
 
-    const template$3 = (context, definition) => html `
+    const template$4 = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -19906,7 +19928,7 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$3,
+        template: template$4,
         styles: styles$e,
         shadowOptions: {
             delegatesFocus: true
@@ -19915,7 +19937,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToggleButton());
 
     // prettier-ignore
-    const template$2 = context => html `
+    const template$3 = context => html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -20123,7 +20145,7 @@
     ], MenuButton.prototype, "slottedMenus", void 0);
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
-        template: template$2,
+        template: template$3,
         styles: styles$f,
         shadowOptions: {
             delegatesFocus: true
@@ -20755,7 +20777,7 @@
         `));
 
     // prettier-ignore
-    const template$1 = html `
+    const template$2 = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -20799,7 +20821,7 @@
     const nimbleSwitch = Switch.compose({
         baseClass: Switch$1,
         baseName: 'switch',
-        template: template$1,
+        template: template$2,
         styles: styles$a
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
@@ -20998,7 +21020,7 @@
     }
 `;
 
-    const template = html `
+    const template$1 = html `
     <template slot="end">
         <div class="separator"></div>
         <slot></slot>
@@ -21012,7 +21034,7 @@
     }
     const nimbleTabsToolbar = TabsToolbar.compose({
         baseName: 'tabs-toolbar',
-        template,
+        template: template$1,
         styles: styles$6
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
@@ -21518,22 +21540,124 @@
         font: ${tooltipCaptionFont};
         color: ${tooltipCaptionFontColor};
         text-align: left;
+        --ni-private-tooltip-border-color: ${hexToRgbaCssColor(Black91, 0.3)};
+        --ni-private-tooltip-background-color: ${Black15};
     }
 
     .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};
+        display: inline-flex;
+        border: ${borderWidth} solid var(--ni-private-tooltip-border-color);
+        background-color: var(--ni-private-tooltip-background-color);
         padding-bottom: 6px;
         padding-left: calc(${standardPadding} / 2);
         padding-right: calc(${standardPadding} / 2);
         padding-top: ${smallPadding};
-        display: inline-flex;
     }
-`;
+
+    .status-icon {
+        display: none;
+        width: 14px;
+        height: 14px;
+        padding-right: 8px;
+    }
+
+    :host(.fail.icon-visible) .fail {
+        display: flex;
+        flex: 0 0 auto;
+    }
+
+    :host(.information.icon-visible) .information {
+        display: flex;
+        flex: 0 0 auto;
+    }
+`.withBehaviors(
+    /* Local Theme Behaviors for tooltip borders and backgrounds */
+    themeBehavior(
+    // Light Theme
+    css `
+            :host(.fail) {
+                --ni-private-tooltip-border-color: ${BannerFail100DarkUi};
+                --ni-private-tooltip-background-color: ${White};
+            }
+
+            :host(.information) {
+                --ni-private-tooltip-border-color: ${Information100LightUi};
+                --ni-private-tooltip-background-color: ${White};
+            }
+        `, 
+    // Dark Theme
+    css `
+            :host {
+                --ni-private-tooltip-border-color: ${hexToRgbaCssColor(Black15, 0.3)};
+                --ni-private-tooltip-background-color: ${Black85};
+            }
+
+            :host(.information) {
+                --ni-private-tooltip-border-color: ${Information100DarkUi};
+            }
+
+            :host(.fail) {
+                --ni-private-tooltip-border-color: ${BannerFail100DarkUi};
+            }
+        `, 
+    // Color Theme
+    css `
+            .anchored-region {
+                background-color: ${ForestGreen};
+            }
+
+            :host {
+                --ni-private-tooltip-border-color: ${hexToRgbaCssColor(White, 0.3)};
+                --ni-private-tooltip-background-color: ${hexToRgbaCssColor(White, 0.15)};
+            }
+
+            :host(.fail) {
+                --ni-private-tooltip-border-color: ${White};
+            }
+
+            :host(.information) {
+                --ni-private-tooltip-border-color: ${White};
+            }
+
+            .status-icon {
+                opacity: 0.6;
+            }
+        `));
+
+    // prettier-ignore
+    const template = context => {
+        return html `
+            ${when(x => x.tooltipVisible, html `
+            <${context.tagFor(AnchoredRegion)}
+                class="anchored-region"
+                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">
+                    <${context.tagFor(IconExclamationMark)} class="fail status-icon"></${context.tagFor(IconExclamationMark)}>
+                    <${context.tagFor(IconInfo)} class="information status-icon"></${context.tagFor(IconInfo)}>
+                    <slot></slot>
+                </div>
+            </${context.tagFor(AnchoredRegion)}>
+        `)}
+        `;
+    };
 
     /**
      * A nimble-styled tooltip control.
@@ -21543,7 +21667,7 @@
     const nimbleTooltip = Tooltip.compose({
         baseName: 'tooltip',
         baseClass: Tooltip$1,
-        template: tooltipTemplate,
+        template,
         styles: styles$2
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());