@ni/nimble-components 11.6.0 → 11.7.0

package/dist/all-components-bundle.js

@@ -13138,37 +13138,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 +14296,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 +14313,7 @@
     const Black91 = "#161617";
     const ForestGreen = "#074023";
     const DigitalGreenLight = "#009b65";
+    const BannerFail100DarkUi = "#d63434";
     const Warning100LightUi = "#ff4b00";
     const DigitalGreenDark = "#006b46";
     const PowerGreen = "#32eb96";
@@ -14484,6 +14456,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 +14627,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 +14686,7 @@
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
         styles: styles$s,
-        template: template$5
+        template: template$6
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -14747,12 +14720,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 +14817,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 +16157,7 @@
     </div>
 `;
 
-    const template$4 = html `
+    const template$5 = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
@@ -16213,6 +16190,10 @@
         ${iconColor.cssCustomProperty}: ${passColor};
     }
 
+    :host(.information) {
+        ${iconColor.cssCustomProperty}: ${informationColor};
+    }
+
     .icon svg {
         fill: ${iconColor};
         width: 100%;
@@ -16232,7 +16213,7 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$4,
+            template: template$5,
             styles: styles$m,
             baseClass: iconClass
         });
@@ -16504,6 +16485,10 @@
         bottom-border-width: var(--ni-private-bottom-border-width);
     }
 
+    .control:focus-within {
+        border-bottom-color: ${borderHoverColor};
+    }
+
     :host(.invalid) .control {
         border-bottom: var(--ni-private-bottom-border-width) solid ${failColor};
     }
@@ -19647,6 +19632,7 @@
         font: ${bodyFont};
         cursor: pointer;
         justify-content: left;
+        height: ${controlHeight};
     }
 
     .content {
@@ -19827,7 +19813,7 @@
     }
 `;
 
-    const template$3 = (context, definition) => html `
+    const template$4 = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -19902,7 +19888,7 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$3,
+        template: template$4,
         styles: styles$e,
         shadowOptions: {
             delegatesFocus: true
@@ -19911,7 +19897,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)}"
@@ -20119,7 +20105,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
@@ -20751,7 +20737,7 @@
         `));
 
     // prettier-ignore
-    const template$1 = html `
+    const template$2 = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -20795,7 +20781,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());
@@ -20994,7 +20980,7 @@
     }
 `;
 
-    const template = html `
+    const template$1 = html `
     <template slot="end">
         <div class="separator"></div>
         <slot></slot>
@@ -21008,7 +20994,7 @@
     }
     const nimbleTabsToolbar = TabsToolbar.compose({
         baseName: 'tabs-toolbar',
-        template,
+        template: template$1,
         styles: styles$6
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
@@ -21514,22 +21500,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.
@@ -21539,7 +21627,7 @@
     const nimbleTooltip = Tooltip.compose({
         baseName: 'tooltip',
         baseClass: Tooltip$1,
-        template: tooltipTemplate,
+        template,
         styles: styles$2
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());