@ni/nimble-components 8.6.2 → 9.0.1

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) {
@@ -16077,8 +16077,7 @@
         position: relative;
         top: 0px;
         bottom: 0px;
-        display: grid;
-        grid-template-rows: max-content auto max-content;
+        display: flex;
         flex-direction: column;
         box-sizing: border-box;
         border-radius: 0px;
@@ -16115,20 +16114,21 @@
 
     ::slotted(header) {
         padding: ${standardPadding};
+        flex: none;
         font: ${titlePlus1Font};
     }
 
     ::slotted(section) {
         padding: ${standardPadding};
-        grid-row: 2;
+        flex: auto;
         overflow-y: auto;
     }
 
     ::slotted(footer) {
         padding: ${standardPadding};
+        flex: none;
         display: flex;
         justify-content: flex-end;
-        grid-row: 3;
         border-top: ${borderWidth} solid ${popupBorderColor};
     }
 `;
@@ -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',
@@ -19192,6 +19228,14 @@
         outline: none;
     }
 
+    .control:disabled {
+        ${
+/* There's an issue with the input element where the ellipsized
+   overflowed text is blank when scrolled into view, so just clip instead.
+   See https://webcompat.com/issues/104481 */ ''}
+        text-overflow: clip;
+    }
+
     .control::selection {
         color: ${controlLabelFontColor};
         background: rgba(${fillSelectedRgbPartialColor}, 0.3);