@ni/nimble-components 19.6.0 → 19.6.1

package/dist/all-components-bundle.js

@@ -16232,7 +16232,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Fri, 14 Jul 2023 20:41:52 GMT
+     * Generated on Fri, 14 Jul 2023 21:58:02 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -16265,7 +16265,7 @@
     const GroupLabel1Family = "Source Sans Pro";
     const GroupLabel1Weight = "600";
     const ButtonLabel1Family = "Source Sans Pro";
-    const ButtonLabel1Weight = "400";
+    const ButtonLabel1Weight = "600";
     const Title1Family = "Source Sans Pro";
     const Title1Weight = "400";
     const Headline2Family = "Noto Serif";
@@ -16706,7 +16706,7 @@
     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));
+    const borderHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderHoverColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, PowerGreen, White));
     // Component Color Tokens
     const iconColor = DesignToken.create(styleNameFromTokenName(tokenNames.iconColor)).withDefault((element) => getColorForTheme(element, Black91, Black15, White));
     DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
@@ -16827,7 +16827,7 @@
         return getColorForTheme(element, Black91, Black15, White);
     }
     function getFillSelectedColorForTheme(element) {
-        return getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, White);
+        return getColorForTheme(element, DigitalGreenLight, PowerGreen, White);
     }
     function getFillHoverColorForTheme(element) {
         return getColorForTheme(element, Black91, Black15, White);
@@ -17136,7 +17136,13 @@
         outline: none;
         margin: 0;
         padding: 0 ${standardPadding};
-        transition: box-shadow ${smallDelay};
+        position: relative;
+        transition: box-shadow ${smallDelay} ease-in-out,
+            border-color ${smallDelay} ease-in-out,
+            background-size ${smallDelay} ease-in-out;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        background-position: center;
     }
 
     :host([content-hidden]) .control {
@@ -17151,26 +17157,55 @@
     }
 
     .control:hover {
+        border-color: ${borderHoverColor};
         box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-        outline: none;
     }
 
     .control${focusVisible} {
+        border-color: ${borderHoverColor};
         box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-        outline: ${borderWidth} solid ${borderHoverColor};
-        outline-offset: -4px;
     }
 
     .control:active {
         box-shadow: none;
-        outline: none;
+        background-image: linear-gradient(
+            ${fillSelectedColor},
+            ${fillSelectedColor}
+        );
+        background-size: calc(100% - 2px) calc(100% - 2px);
     }
 
     :host([disabled]) .control {
         box-shadow: none;
+        background-image: none;
+    }
+
+    .control::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        box-sizing: border-box;
+        outline: 0px solid transparent;
+        color: transparent;
+        background-clip: content-box;
+        transition: outline ${smallDelay} ease-in-out;
+    }
+
+    .control${focusVisible}::before {
+        outline: ${borderWidth} solid ${borderHoverColor};
+        outline-offset: -3px;
+    }
+
+    .control:active::before {
         outline: none;
     }
 
+    :host([disabled]) .control::before {
+        box-shadow: none;
+    }
+
     .content {
         display: contents;
     }
@@ -17217,77 +17252,57 @@
     }
 `.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
             .control {
-                background-color: transparent;
                 border-color: rgba(${actionRgbPartialColor}, 0.3);
             }
 
             .control:hover {
                 background-color: transparent;
-                border-color: ${borderHoverColor};
-            }
-
-            .control${focusVisible} {
-                background-color: transparent;
-                border-color: ${borderHoverColor};
-            }
-
-            .control:active {
-                background-color: ${fillSelectedColor};
-                border-color: ${fillSelectedColor};
             }
 
             :host([disabled]) .control {
-                background-color: transparent;
-                border-color: rgba(${borderRgbPartialColor}, 0.2);
+                border-color: rgba(${borderRgbPartialColor}, 0.3);
             }
         `), appearanceBehavior(ButtonAppearance.ghost, css `
-            .control {
-                background-color: transparent;
-                border-color: transparent;
-            }
-
             .control:hover {
                 background-color: transparent;
-                border-color: ${borderHoverColor};
             }
 
             .control${focusVisible} {
                 background-color: transparent;
-                border-color: ${borderHoverColor};
-            }
-
-            .control:active {
-                background-color: ${fillSelectedColor};
-                border-color: ${fillSelectedColor};
             }
 
             :host([disabled]) .control {
-                background-color: transparent;
                 border-color: transparent;
             }
         `), appearanceBehavior(ButtonAppearance.block, css `
             .control {
                 background-color: rgba(${borderRgbPartialColor}, 0.1);
-                border-color: transparent;
             }
 
             .control:hover {
                 background-color: transparent;
-                border-color: ${borderHoverColor};
+                background-image: linear-gradient(
+                    rgba(${borderRgbPartialColor}, 0.1),
+                    rgba(${borderRgbPartialColor}, 0.1)
+                );
+                background-size: calc(100% - 4px) calc(100% - 4px);
             }
 
             .control${focusVisible} {
-                background-color: rgba(${borderRgbPartialColor}, 0.1);
-                border-color: ${borderHoverColor};
-            }
-
-            .control${focusVisible}:hover {
                 background-color: transparent;
+                background-image: linear-gradient(
+                    rgba(${borderRgbPartialColor}, 0.1),
+                    rgba(${borderRgbPartialColor}, 0.1)
+                );
+                background-size: calc(100% - 4px) calc(100% - 4px);
             }
 
             .control:active {
-                background-color: ${fillSelectedColor};
-                border-color: ${fillSelectedColor};
+                background-image: linear-gradient(
+                    ${fillSelectedColor},
+                    ${fillSelectedColor}
+                );
+                background-size: calc(100% - 2px) calc(100% - 2px);
             }
 
             :host([disabled]) .control {
@@ -17310,7 +17325,8 @@
             }
 
             :host([appearance-variant='primary']) .control:active {
-                box-shadow: none;
+                box-shadow: 0px 0px 0px ${borderWidth} ${fillSelectedColor}
+                    inset;
             }
 
             :host([appearance-variant='primary'][disabled]) .control {
@@ -17318,10 +17334,9 @@
             }
         `), appearanceBehavior(ButtonAppearance.block, css `
             :host([appearance-variant='primary']) .control {
-                background-clip: padding-box;
                 border-color: rgba(${actionRgbPartialColor}, 0.3);
-                border-width: calc(2 * ${borderWidth});
-                padding: 0 calc(${standardPadding} - ${borderWidth});
+                box-shadow: 0px 0px 0px ${borderWidth}
+                    rgba(${actionRgbPartialColor}, 0.3) inset;
             }
 
             :host([appearance-variant='primary'][content-hidden]) .control {
@@ -17330,7 +17345,7 @@
 
             :host([appearance-variant='primary']) .control:hover {
                 border-color: ${borderHoverColor};
-                box-shadow: none;
+                box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
             }
 
             :host([appearance-variant='primary']) .control${focusVisible} {
@@ -17347,11 +17362,7 @@
             }
 
             :host([appearance-variant='primary']) .control:active {
-                background-clip: border-box;
-                border-color: ${fillSelectedColor};
-                border-width: ${borderWidth};
                 box-shadow: none;
-                padding: 0 ${standardPadding};
             }
 
             :host([appearance-variant='primary'][content-hidden])
@@ -17371,6 +17382,11 @@
                 .control {
                 padding: 0px;
             }
+
+            :host([appearance-variant='primary']) .control:active::before {
+                border-color: ${fillSelectedColor};
+                border-width: ${borderWidth};
+            }
         `));
 
     const styles$N = css `
@@ -17687,7 +17703,7 @@
     :host {
         position: relative;
         box-sizing: border-box;
-        font: ${bodyFont};
+        font: ${buttonLabelFont};
         height: ${controlHeight};
         color: ${bodyFontColor};
         align-items: center;
@@ -19888,7 +19904,7 @@
     ${display('inline-flex')}
 
     :host {
-        font: ${buttonLabelFont};
+        font: ${bodyFont};
         align-items: center;
         cursor: pointer;
         outline: none;
@@ -20015,24 +20031,78 @@
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
         border-color: ${fillSelectedColor};
+        position: relative;
+        transition: box-shadow ${smallDelay} ease-in-out,
+            border-color ${smallDelay} ease-in-out,
+            background-size ${smallDelay} ease-in-out;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        background-position: center;
     }
 
     .control[aria-pressed='true']:hover {
-        background-color: ${fillSelectedColor};
+        border-color: ${borderHoverColor};
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        background-image: linear-gradient(
+            ${fillSelectedColor},
+            ${fillSelectedColor}
+        );
+        background-size: calc(100% - 4px) calc(100% - 4px);
     }
 
     .control[aria-pressed='true']${focusVisible} {
-        background-color: ${fillSelectedColor};
+        background-color: transparent;
+        border-color: ${borderHoverColor};
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        background-image: linear-gradient(
+            ${fillSelectedColor},
+            ${fillSelectedColor}
+        );
+        background-size: calc(100% - 4px) calc(100% - 4px);
+    }
+
+    .control[aria-pressed='true']:active {
+        box-shadow: none;
+        background-image: linear-gradient(
+            ${fillSelectedColor},
+            ${fillSelectedColor}
+        );
+        background-size: calc(100% - 2px) calc(100% - 2px);
     }
 
     :host([disabled]) .control[aria-pressed='true'] {
-        background-color: ${fillSelectedColor};
         border-color: ${fillSelectedColor};
+        background-color: ${fillSelectedColor};
+        background-image: none;
     }
 
     :host([disabled]) .control[aria-pressed='true']:hover {
-        background-color: ${fillSelectedColor};
         border-color: ${fillSelectedColor};
+        background-color: ${fillSelectedColor};
+        box-shadow: none;
+    }
+
+    .control[aria-pressed='true']::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        box-sizing: border-box;
+        outline: 0px solid transparent;
+        outline: none;
+        background-clip: content-box;
+        transition: outline ${smallDelay} ease-in-out;
+    }
+
+    .control[aria-pressed='true']${focusVisible}::before {
+        outline: ${borderWidth} solid ${borderHoverColor};
+        outline-offset: -3px;
+        color: transparent;
+    }
+
+    .control[aria-pressed='true']:active::before {
+        outline: none;
     }
 `;
 
@@ -24176,7 +24246,7 @@
     ${display('inline-flex')}
 
     :host {
-        font: ${buttonLabelFont};
+        font: ${bodyFont};
         align-items: center;
         outline: none;
         width: fit-content;
@@ -24706,7 +24776,7 @@
 
     :host {
         outline: none;
-        font: ${buttonLabelFont};
+        font: ${bodyFont};
         color: ${buttonLabelFontColor};
         flex-direction: column;
         cursor: pointer;