@ni/nimble-components 19.5.0 → 19.6.1

package/dist/all-components-bundle.js

@@ -16232,7 +16232,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Thu, 13 Jul 2023 23:25:35 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;
@@ -18836,6 +18852,10 @@
         name: 'clock_cog_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="m8.108 7.392.955-.957a1.004 1.004 0 0 1 .516-.157 1.215 1.215 0 0 1-.14.486c-.072.1-.834.866-.966.999a.785.785 0 0 1 0 .666l1.341 1.344a.981.981 0 0 1 .281.658.996.996 0 0 1-.75-.376c-.28-.28-1.073-1.088-1.237-1.255a.783.783 0 1 1 0-1.408m5.69 2.292L14 7.324l-1.327-.113a4.76 4.76 0 0 0-.402-1.26l1.02-.86-1.527-1.811-1.019.86a4.726 4.726 0 0 0-.563-.344 4.61 4.61 0 0 0-.612-.265l.114-1.329L7.324 2l-.113 1.329a4.77 4.77 0 0 0-1.26.401l-.86-1.02L3.28 4.237l.858 1.02A4.771 4.771 0 0 0 3.53 6.43l-1.329-.114L2 8.676l1.329.114a4.69 4.69 0 0 0 .401 1.26l-1.02.86 1.526 1.811 1.02-.859a4.666 4.666 0 0 0 1.175.608l-.113 1.33 2.358.2.114-1.328a4.688 4.688 0 0 0 1.26-.4l.86 1.02 1.81-1.527-.858-1.02a4.687 4.687 0 0 0 .608-1.175ZM8 11.45A3.45 3.45 0 1 1 11.45 8 3.45 3.45 0 0 1 8 11.45Z"/></svg>`
     };
+    const clockExclamation16X16 = {
+        name: 'clock_exclamation_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M2.821 5.114h1.357V6H2.82v-.886ZM2.798 1l.155 3.56h1.094L4.202 1H2.798Zm7.481 2.575h.001l-.013-.007a4.92 4.92 0 0 0-.606-.262 5.015 5.015 0 0 0-.523-.163 4.948 4.948 0 0 0-.286-.055A4.654 4.654 0 0 0 8 3c-.016 0-.03.004-.045.005a4.706 4.706 0 0 0-.785.079c-.097.016-.194.03-.29.052a5.078 5.078 0 0 0-.575.179c-.48.174-.907.438-1.305.74V7H3.109l-.017.092a4.903 4.903 0 0 0-.088.87C3.004 7.974 3 7.986 3 8c0 .293.036.575.088.852.016.096.033.19.055.285.045.182.101.359.165.532.074.206.16.403.259.595l.007.016h.001c.83 1.608 2.49 2.72 4.426 2.72C10.762 13 13 10.762 13 8c0-1.935-1.112-3.594-2.72-4.425Zm-.275 7.041c-.38-.38-1.454-1.473-1.675-1.699a1.06 1.06 0 0 1-1.523-.953 1.06 1.06 0 0 1 1.523-.954l1.293-1.296c.117-.117.509-.213.7-.213 0 .128-.085.51-.191.658-.097.136-1.128 1.173-1.308 1.353a1.064 1.064 0 0 1 0 .903l1.816 1.82s.445.466.382.89c-.297 0-.594-.085-1.017-.509Z"/></svg>`
+    };
     const clockTriangle16X16 = {
         name: 'clock_triangle_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8 3a4.951 4.951 0 0 0-2.152.505L7.096 6H3.422A4.997 4.997 0 1 0 8 3Zm2.003 7.616a453.75 453.75 0 0 1-1.675-1.7 1.061 1.061 0 1 1 0-1.907l1.294-1.297a1.36 1.36 0 0 1 .699-.212 1.646 1.646 0 0 1-.19.658c-.097.136-1.13 1.173-1.309 1.353a1.063 1.063 0 0 1 0 .903l1.817 1.82a1.33 1.33 0 0 1 .381.891 1.35 1.35 0 0 1-1.017-.51Z"/><path class="cls-2" d="M5.477 5H1.522L3.5 1.045 5.477 5z"/></svg>`
@@ -19884,7 +19904,7 @@
     ${display('inline-flex')}
 
     :host {
-        font: ${buttonLabelFont};
+        font: ${bodyFont};
         align-items: center;
         cursor: pointer;
         outline: none;
@@ -20011,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;
     }
 `;
 
@@ -21814,6 +21888,18 @@
     registerIcon('icon-clock-cog', IconClockCog);
     DesignSystem.tagFor(IconClockCog);
 
+    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+    /**
+     * The icon component for the 'clockExclamation' icon
+     */
+    class IconClockExclamation extends Icon {
+        constructor() {
+            super(clockExclamation16X16);
+        }
+    }
+    registerIcon('icon-clock-exclamation', IconClockExclamation);
+    DesignSystem.tagFor(IconClockExclamation);
+
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
      * The icon component for the 'clockTriangle' icon
@@ -24160,7 +24246,7 @@
     ${display('inline-flex')}
 
     :host {
-        font: ${buttonLabelFont};
+        font: ${bodyFont};
         align-items: center;
         outline: none;
         width: fit-content;
@@ -24690,7 +24776,7 @@
 
     :host {
         outline: none;
-        font: ${buttonLabelFont};
+        font: ${bodyFont};
         color: ${buttonLabelFontColor};
         flex-direction: column;
         cursor: pointer;