@ni/nimble-components 8.6.2 → 8.6.3

package/dist/all-components-bundle.js

@@ -13544,7 +13544,7 @@
     const groupHeaderTextTransform = DesignToken.create(styleNameFromTokenName(tokenNames.groupHeaderTextTransform)).withDefault('uppercase');
     // Animation Tokens
     const smallDelay = DesignToken.create(styleNameFromTokenName(tokenNames.smallDelay)).withDefault(SmallDelay);
-    const mediumDelay = DesignToken.create(styleNameFromTokenName(tokenNames.mediumDelay)).withDefault(MediumDelay);
+    DesignToken.create(styleNameFromTokenName(tokenNames.mediumDelay)).withDefault(MediumDelay);
     const largeDelay = DesignToken.create(styleNameFromTokenName(tokenNames.largeDelay)).withDefault(LargeDelay);
     // Private helpers functions
     function hexToRgbPartial(hexValue) {
@@ -18710,17 +18710,17 @@
     ${display('inline-flex')}
 
     :host {
+        position: relative;
         box-sizing: border-box;
         font: ${bodyFont};
         height: ${controlHeight};
-        padding: calc(${standardPadding} / 2) ${standardPadding}
-            calc(${standardPadding} / 2 - ${borderWidth});
         color: ${bodyFontColor};
         align-items: center;
         justify-content: center;
         cursor: pointer;
-        ${ /* Separate focus indicator from active indicator */''}
-        border-bottom: transparent ${borderWidth} solid;
+        --ni-private-active-indicator-width: 2px;
+        --ni-private-focus-indicator-width: 1px;
+        --ni-private-indicator-lines-gap: 1px;
     }
 
     :host(:hover) {
@@ -18731,16 +18731,12 @@
         outline: none;
     }
 
-    :host(${focusVisible}) {
-        outline: none;
-        box-shadow: 0 calc(${borderWidth} * -1) ${borderHoverColor} inset;
-        transition: box-shadow ${mediumDelay} ease-in-out;
+    :host(:focus:hover) {
+        background-color: ${fillHoverSelectedColor};
     }
 
-    @media (prefers-reduced-motion) {
-        :host(${focusVisible}) {
-            transition-duration: 0.01s;
-        }
+    :host(${focusVisible}) {
+        outline: none;
     }
 
     :host(:active) {
@@ -18752,6 +18748,57 @@
         color: ${bodyDisabledFontColor};
         background: none;
     }
+
+    slot {
+        display: block;
+        padding: calc(${standardPadding} / 2) ${standardPadding}
+            calc(${standardPadding} / 2 - ${borderWidth});
+    }
+
+    :host::before {
+        content: '';
+        position: absolute;
+        bottom: calc(
+            var(--ni-private-active-indicator-width) +
+                var(--ni-private-indicator-lines-gap)
+        );
+        width: 0px;
+        height: 0px;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-focus-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        :host::before {
+            transition-duration: 0.01s;
+        }
+    }
+
+    :host(${focusVisible})::before {
+        width: 100%;
+    }
+
+    :host::after {
+        content: '';
+        position: absolute;
+        bottom: 0px;
+        width: 0px;
+        height: 0px;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-active-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        :host::after {
+            transition-duration: 0.01s;
+        }
+    }
+
+    :host([aria-selected='true'])::after {
+        width: 100%;
+    }
 `;
 
     /**
@@ -18808,22 +18855,6 @@
         align-self: end;
     }
 
-    .activeIndicator {
-        grid-row: 2;
-        height: calc(${borderWidth} * 2);
-        background-color: ${borderHoverColor};
-    }
-
-    .activeIndicatorTransition {
-        transition: transform ${smallDelay} ease-in-out;
-    }
-
-    @media (prefers-reduced-motion) {
-        .activeIndicatorTransition {
-            transition: transform 0.01s;
-        }
-    }
-
     .tabpanel {
         grid-row: 2;
         grid-column-start: 1;
@@ -18835,6 +18866,11 @@
      * A nimble-styled tabs control
      */
     class Tabs extends Tabs$1 {
+        constructor() {
+            super();
+            // We disable the built-in active indicator so that we can implement our own
+            this.activeindicator = false;
+        }
     }
     const nimbleTabs = Tabs.compose({
         baseName: 'tabs',