@ni/nimble-components 8.4.0 → 8.6.1

package/dist/all-components-bundle.js

@@ -12232,7 +12232,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Tue, 01 Mar 2022 15:26:47 GMT
+     * Generated on Tue, 10 May 2022 14:21:51 GMT
      */
     const Warning100DarkUi = "#ff8126";
     const Pass100LightUi = "#009921";
@@ -12315,8 +12315,9 @@
     const BodyEmphasizedLineHeight = "18px";
     const ButtonLabel1LineHeight = "16px";
     const TooltipCaptionLineHeight = "14px";
-    const SmallDelay = "0.1s"; // Short animation delay used for control state change animation
+    const SmallDelay = "0.075s"; // Short animation delay used for control state change animation
     const MediumDelay = "0.15s"; // Medium animation delay for control state change animation
+    const LargeDelay = "0.25s"; // Long animation delay used for control state change animation
 
     const hexCharacters = 'a-f\\d';
     const match3or4Hex = `#?[${hexCharacters}]{3}[${hexCharacters}]?`;
@@ -12686,7 +12687,7 @@
     // Animation Tokens
     const smallDelay = DesignToken.create(styleNameFromTokenName(tokenNames.smallDelay)).withDefault(SmallDelay);
     const mediumDelay = DesignToken.create(styleNameFromTokenName(tokenNames.mediumDelay)).withDefault(MediumDelay);
-    const largeDelay = DesignToken.create(styleNameFromTokenName(tokenNames.largeDelay)).withDefault(250);
+    const largeDelay = DesignToken.create(styleNameFromTokenName(tokenNames.largeDelay)).withDefault(LargeDelay);
     // Private helpers functions
     function hexToRgbPartial(hexValue) {
         const { red, green, blue } = hexRgb(hexValue);
@@ -15401,9 +15402,15 @@
         }
         updateAnimationDuration() {
             const disableAnimations = prefersReducedMotionMediaQuery.matches;
-            this.animationDurationMilliseconds = disableAnimations
-                ? animationDurationWhenDisabledMilliseconds
-                : largeDelay.getValueFor(this);
+            if (disableAnimations) {
+                this.animationDurationMilliseconds = animationDurationWhenDisabledMilliseconds;
+            }
+            else {
+                // string ends in 's' unit specifier
+                const secondsString = largeDelay.getValueFor(this);
+                const secondsNumber = parseFloat(secondsString);
+                this.animationDurationMilliseconds = 1000 * secondsNumber;
+            }
         }
         animateOpening() {
             this.animateOpenClose(true);
@@ -18211,6 +18218,7 @@
         --ni-private-hover-bottom-border-width: 2px;
         border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
         border-bottom-width: var(--ni-private-bottom-border-width);
+        gap: calc(${standardPadding} / 2);
         padding-bottom: calc(
             var(--ni-private-hover-bottom-border-width) -
                 var(--ni-private-bottom-border-width)
@@ -18254,12 +18262,40 @@
         border-bottom-color: ${borderHoverColor};
     }
 
+    :host([appearance='frameless'].clear-inline-padding) .root {
+        padding-left: 0px;
+        padding-right: 0px;
+    }
+
+    .root::before {
+        ${ /* Empty string causes alignment issue */''}
+        content: ' ';
+        color: transparent;
+        width: 0px;
+        user-select: none;
+    }
+
+    :host([appearance='frameless'].clear-inline-padding) .root::before {
+        display: none;
+    }
+
+    .root::after {
+        ${ /* Empty string causes alignment issue */''}
+        content: ' ';
+        color: transparent;
+        width: 0px;
+        user-select: none;
+    }
+
+    :host([appearance='frameless'].clear-inline-padding) .root::after {
+        display: none;
+    }
+
     [part='start'] {
         display: contents;
     }
 
     slot[name='start']::slotted(*) {
-        margin-left: calc(${standardPadding} / 2);
         flex: none;
     }
 
@@ -18268,8 +18304,7 @@
         font: inherit;
         background: transparent;
         color: inherit;
-        padding-top: 0px;
-        padding-bottom: 0px;
+        padding: 0px;
         height: calc(
             ${controlHeight} - ${borderWidth} -
                 var(--ni-private-hover-bottom-border-width)
@@ -18277,8 +18312,6 @@
         width: 100%;
         margin-top: auto;
         margin-bottom: auto;
-        padding-left: calc(${standardPadding} / 2);
-        padding-right: calc(${standardPadding} / 2);
         border: none;
         text-overflow: ellipsis;
     }
@@ -18322,7 +18355,6 @@
     :host(.invalid) .error-content svg {
         height: ${iconSize};
         width: ${iconSize};
-        padding-right: 8px;
         flex: none;
     }
 
@@ -18363,7 +18395,6 @@
     }
 
     slot[name='actions']::slotted(*) {
-        margin-right: 8px;
         ${controlHeight.cssCustomProperty}: 24px;
     }
 `.withBehaviors(appearanceBehavior(TextFieldAppearance.Underline, css `