@ni/nimble-components 20.0.5 → 20.1.0

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Tue, 01 Aug 2023 20:23:50 GMT
+   * Generated on Wed, 02 Aug 2023 18:51:55 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16312,6 +16312,8 @@
   const BannerFail100DarkUi = "#d63434";
   const Warning100LightUi = "#ff4b00";
   const DigitalGreenDark = "#006b46";
+  const DigitalGreenDark105 = "#00734b";
+  const DigitalGreenDark110 = "#00613f";
   const PowerGreen = "#32eb96";
   const Title2Family = "Source Sans Pro";
   const Title2Weight = "400";
@@ -16422,6 +16424,14 @@
       dividerBackgroundColor: 'divider-background-color',
       headerBackgroundColor: 'header-background-color',
       sectionBackgroundColor: 'section-background-color',
+      buttonFillPrimaryColor: 'button-fill-primary-color',
+      buttonPrimaryFontColor: 'button-primary-font-color',
+      buttonFillActivePrimaryColor: 'button-fill-active-primary-color',
+      buttonFillAccentColor: 'button-fill-accent-color',
+      buttonAccentBlockFontColor: 'button-accent-block-font-color',
+      buttonAccentOutlineFontColor: 'button-accent-outline-font-color',
+      buttonBorderAccentOutlineColor: 'button-border-accent-outline-color',
+      buttonFillAccentActiveColor: 'button-fill-accent-active-color',
       fillSelectedColor: 'fill-selected-color',
       fillSelectedRgbPartialColor: 'fill-selected-rgb-partial-color',
       fillHoverSelectedColor: 'fill-hover-selected-color',
@@ -16753,7 +16763,7 @@
   DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
   DesignToken.create(styleNameFromTokenName(tokenNames.dividerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
   const fillSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.2));
-  DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
+  const fillSelectedRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
   const fillHoverSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.15));
   const fillHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverColor)).withDefault((element) => hexToRgbaCssColor(getFillHoverColorForTheme(element), 0.1));
   DesignToken.create(styleNameFromTokenName(tokenNames.fillDownColor)).withDefault((element) => hexToRgbaCssColor(getFillDownColorForTheme(element), 0.15));
@@ -16771,6 +16781,14 @@
   DesignToken.create(styleNameFromTokenName(tokenNames.graphGridlineColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.2));
   DesignToken.create(styleNameFromTokenName(tokenNames.tooltipBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black85, ForestGreen));
   const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
+  const buttonFillPrimaryColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonFillPrimaryColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Black91, 0.75), hexToRgbaCssColor(Black15, 0.3), hexToRgbaCssColor(White, 0.3)));
+  const buttonPrimaryFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonPrimaryFontColor)).withDefault((element) => getColorForTheme(element, Black15, Black15, White));
+  const buttonFillActivePrimaryColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonFillActivePrimaryColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Black91, 0.85), hexToRgbaCssColor(Black15, 0.2), hexToRgbaCssColor(White, 0.2)));
+  const buttonFillAccentColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonFillAccentColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark, DigitalGreenLight, hexToRgbaCssColor(White, 0.1)));
+  const buttonAccentBlockFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonAccentBlockFontColor)).withDefault((element) => getColorForTheme(element, White, Black15, White));
+  const buttonAccentOutlineFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonAccentOutlineFontColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark105, PowerGreen, White));
+  const buttonBorderAccentOutlineColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonBorderAccentOutlineColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, PowerGreen, hexToRgbaCssColor(White, 0.3)));
+  const buttonFillAccentActiveColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonFillAccentActiveColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, DigitalGreenDark, hexToRgbaCssColor(White, 0.2)));
   // Component Sizing Tokens
   const controlHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlHeight)).withDefault('32px');
   const controlSlimHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlSlimHeight)).withDefault('24px');
@@ -17150,299 +17168,294 @@
   }
 
   const styles$P = css `
-    ${display('inline-flex')}
+    @layer base, hover, focusVisible, active, disabled, top;
 
-    :host {
-        background-color: transparent;
-        height: ${controlHeight};
-        color: ${buttonLabelFontColor};
-        font: ${buttonLabelFont};
-        cursor: pointer;
-        outline: none;
-        border: none;
-        box-sizing: border-box;
-        ${
+    @layer base {
+        ${display('inline-flex')}
+
+        :host {
+            background-color: transparent;
+            height: ${controlHeight};
+            color: ${buttonLabelFontColor};
+            font: ${buttonLabelFont};
+            cursor: pointer;
+            outline: none;
+            border: none;
+            box-sizing: border-box;
+            ${
 /*
     Not sure why but this is needed to get buttons with icons and buttons
     without icons to align on the same line when the button is inline-flex
     See: https://github.com/microsoft/fast/issues/5414
 */ ''}
-        vertical-align: middle;
-    }
-
-    :host([disabled]) {
-        color: ${buttonLabelDisabledFontColor};
-        cursor: default;
-    }
+            vertical-align: middle;
+        }
 
-    .control {
-        background-color: transparent;
-        height: 100%;
-        width: 100%;
-        border: ${borderWidth} solid transparent;
-        box-sizing: border-box;
-        color: inherit;
-        border-radius: inherit;
-        fill: inherit;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-        cursor: inherit;
-        font: inherit;
-        outline: none;
-        margin: 0;
-        padding: 0 ${standardPadding};
-        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 {
+            background-color: transparent;
+            height: 100%;
+            width: 100%;
+            border: ${borderWidth} solid transparent;
+            box-sizing: border-box;
+            color: inherit;
+            border-radius: inherit;
+            fill: inherit;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 4px;
+            cursor: inherit;
+            font: inherit;
+            outline: none;
+            margin: 0;
+            padding: 0 ${standardPadding};
+            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 {
-        aspect-ratio: 1 / 1;
-        padding: 0px;
-    }
+        :host([content-hidden]) .control {
+            aspect-ratio: 1 / 1;
+            padding: 0px;
+        }
 
-    @media (prefers-reduced-motion) {
-        .control {
-            transition-duration: 0s;
+        .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:hover {
-        border-color: ${borderHoverColor};
-        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-    }
+        .content {
+            display: contents;
+        }
 
-    .control${focusVisible} {
-        border-color: ${borderHoverColor};
-        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-    }
+        :host([content-hidden]) .content {
+            ${
+/**
+ * Hide content visually while keeping it screen reader-accessible.
+ * Source: https://webaim.org/techniques/css/invisiblecontent/#techniques
+ * See discussion here: https://github.com/microsoft/fast/issues/5740#issuecomment-1068195035
+ */
+''}
+            display: inline-block;
+            height: 1px;
+            width: 1px;
+            position: absolute;
+            margin: -1px;
+            clip: rect(1px, 1px, 1px, 1px);
+            clip-path: inset(50%);
+            overflow: hidden;
+            padding: 0;
+        }
 
-    .control:active {
-        box-shadow: none;
-        background-image: linear-gradient(
-            ${fillSelectedColor},
-            ${fillSelectedColor}
-        );
-        background-size: calc(100% - 2px) calc(100% - 2px);
-    }
+        [part='start'] {
+            display: contents;
+            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
+        }
 
-    :host([disabled]) .control {
-        box-shadow: none;
-        background-image: none;
+        [part='end'] {
+            display: contents;
+            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
+        }
     }
 
-    .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;
+    @layer hover {
+        .control:hover {
+            border-color: ${borderHoverColor};
+            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        }
     }
 
-    .control${focusVisible}::before {
-        outline: ${borderWidth} solid ${borderHoverColor};
-        outline-offset: -3px;
-    }
+    @layer focusVisible {
+        .control${focusVisible} {
+            border-color: ${borderHoverColor};
+            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        }
 
-    .control:active::before {
-        outline: none;
+        .control${focusVisible}::before {
+            outline: ${borderWidth} solid ${borderHoverColor};
+            outline-offset: -3px;
+        }
     }
 
-    :host([disabled]) .control::before {
-        box-shadow: none;
-    }
+    @layer active {
+        .control:active {
+            box-shadow: none;
+            background-image: linear-gradient(
+                ${fillSelectedColor},
+                ${fillSelectedColor}
+            );
+            background-size: calc(100% - 2px) calc(100% - 2px);
+        }
 
-    .content {
-        display: contents;
+        .control:active::before {
+            outline: none;
+        }
     }
 
-    :host([content-hidden]) .content {
-        ${
-/**
- * Hide content visually while keeping it screen reader-accessible.
- * Source: https://webaim.org/techniques/css/invisiblecontent/#techniques
- * See discussion here: https://github.com/microsoft/fast/issues/5740#issuecomment-1068195035
- */
-''}
-        display: inline-block;
-        height: 1px;
-        width: 1px;
-        position: absolute;
-        margin: -1px;
-        clip: rect(1px, 1px, 1px, 1px);
-        clip-path: inset(50%);
-        overflow: hidden;
-        padding: 0;
-    }
+    @layer disabled {
+        :host([disabled]) {
+            color: ${buttonLabelDisabledFontColor};
+            cursor: default;
+        }
 
-    [part='start'] {
-        display: contents;
-        ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
-    }
+        :host([disabled]) .control {
+            box-shadow: none;
+            background-image: none;
+            color: rgba(${actionRgbPartialColor}, 0.3);
+        }
 
-    :host([disabled]) slot[name='start']::slotted(*) {
-        opacity: 0.3;
-    }
+        :host([disabled]) .control::before {
+            box-shadow: none;
+        }
 
-    [part='end'] {
-        display: contents;
-        ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
-    }
+        :host([disabled]) slot[name='start']::slotted(*) {
+            opacity: 0.3;
+            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
+        }
 
-    :host([disabled]) slot[name='end']::slotted(*) {
-        opacity: 0.3;
+        :host([disabled]) slot[name='end']::slotted(*) {
+            opacity: 0.3;
+            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
+        }
     }
 
-    :host([content-hidden]) [part='end'] {
-        display: none;
-    }
-`.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
+    @layer top {
+        @media (prefers-reduced-motion) {
             .control {
-                border-color: rgba(${actionRgbPartialColor}, 0.3);
+                transition-duration: 0s;
             }
+        }
 
-            .control:hover {
-                background-color: transparent;
+        :host([content-hidden]) [part='end'] {
+            display: none;
+        }
+    }
+`.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
+            @layer base {
+                .control {
+                    border-color: rgba(${actionRgbPartialColor}, 0.3);
+                }
             }
 
-            :host([disabled]) .control {
-                border-color: rgba(${borderRgbPartialColor}, 0.3);
+            @layer disabled {
+                :host([disabled]) .control {
+                    border-color: rgba(${borderRgbPartialColor}, 0.3);
+                }
             }
         `), appearanceBehavior(ButtonAppearance.ghost, css `
-            .control:hover {
-                background-color: transparent;
-            }
-
-            .control${focusVisible} {
-                background-color: transparent;
-            }
-
-            :host([disabled]) .control {
-                border-color: transparent;
+            @layer disabled {
+                :host([disabled]) .control {
+                    border-color: transparent;
+                }
             }
         `), appearanceBehavior(ButtonAppearance.block, css `
-            .control {
-                background-color: rgba(${borderRgbPartialColor}, 0.1);
-            }
-
-            .control:hover {
-                background-color: transparent;
-                background-image: linear-gradient(
-                    rgba(${borderRgbPartialColor}, 0.1),
-                    rgba(${borderRgbPartialColor}, 0.1)
-                );
-                background-size: calc(100% - 4px) calc(100% - 4px);
+            @layer base {
+                .control {
+                    background-image: linear-gradient(
+                        rgba(${borderRgbPartialColor}, 0.1),
+                        rgba(${borderRgbPartialColor}, 0.1)
+                    );
+                    border-color: rgba(${borderRgbPartialColor}, 0.1);
+                }
             }
 
-            .control${focusVisible} {
-                background-color: transparent;
-                background-image: linear-gradient(
-                    rgba(${borderRgbPartialColor}, 0.1),
-                    rgba(${borderRgbPartialColor}, 0.1)
-                );
-                background-size: calc(100% - 4px) calc(100% - 4px);
+            @layer hover {
+                .control:hover {
+                    background-size: calc(100% - 4px) calc(100% - 4px);
+                }
             }
 
-            .control:active {
-                background-image: linear-gradient(
-                    ${fillSelectedColor},
-                    ${fillSelectedColor}
-                );
-                background-size: calc(100% - 2px) calc(100% - 2px);
+            @layer focusVisible {
+                .control${focusVisible} {
+                    background-size: calc(100% - 4px) calc(100% - 4px);
+                }
             }
 
-            :host([disabled]) .control {
-                background-color: rgba(${borderRgbPartialColor}, 0.1);
-                border-color: transparent;
+            @layer disabled {
+                :host([disabled]) .control {
+                    background-image: linear-gradient(
+                        rgba(${borderRgbPartialColor}, 0.1),
+                        rgba(${borderRgbPartialColor}, 0.1)
+                    );
+                    background-size: 100% 100%;
+                    border-color: rgba(${borderRgbPartialColor}, 0.1);
+                }
             }
         `));
   const buttonAppearanceVariantStyles = css ``.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
-            :host([appearance-variant='primary']) .control {
-                box-shadow: 0px 0px 0px ${borderWidth}
-                    rgba(${actionRgbPartialColor}, 0.3) inset;
-            }
-
-            :host([appearance-variant='primary']) .control:hover {
-                box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-            }
-
-            :host([appearance-variant='primary']) .control${focusVisible} {
-                box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-            }
-
-            :host([appearance-variant='primary']) .control:active {
-                box-shadow: 0px 0px 0px ${borderWidth} ${fillSelectedColor}
-                    inset;
-            }
+            @layer base {
+                :host([appearance-variant='primary']) .control {
+                    border-color: ${actionRgbPartialColor};
+                }
 
-            :host([appearance-variant='primary'][disabled]) .control {
-                box-shadow: none;
+                :host([appearance-variant='accent']) .control {
+                    border-color: ${buttonBorderAccentOutlineColor};
+                    color: ${buttonAccentOutlineFontColor};
+                }
             }
         `), appearanceBehavior(ButtonAppearance.block, css `
-            :host([appearance-variant='primary']) .control {
-                border-color: rgba(${actionRgbPartialColor}, 0.3);
-                box-shadow: 0px 0px 0px ${borderWidth}
-                    rgba(${actionRgbPartialColor}, 0.3) inset;
-            }
-
-            :host([appearance-variant='primary'][content-hidden]) .control {
-                padding: 0px;
-            }
-
-            :host([appearance-variant='primary']) .control:hover {
-                border-color: ${borderHoverColor};
-                box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-            }
+            @layer base {
+                :host([appearance-variant='primary']) [part='start'] {
+                    ${iconColor.cssCustomProperty}: white;
+                }
 
-            :host([appearance-variant='primary']) .control${focusVisible} {
-                background-clip: border-box;
-                border-color: ${borderHoverColor};
-                border-width: ${borderWidth};
-                box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-                padding: 0 ${standardPadding};
-            }
+                :host([appearance-variant='primary']) .control {
+                    background-image: linear-gradient(
+                        ${buttonFillPrimaryColor},
+                        ${buttonFillPrimaryColor}
+                    );
+                    color: ${buttonPrimaryFontColor};
+                    border-color: ${buttonFillPrimaryColor};
+                }
 
-            :host([appearance-variant='primary'][content-hidden])
-                .control${focusVisible} {
-                padding: 0px;
-            }
+                :host([appearance-variant='primary']) [part='end'] {
+                    ${iconColor.cssCustomProperty}: white;
+                }
 
-            :host([appearance-variant='primary']) .control:active {
-                box-shadow: none;
-            }
+                :host([appearance-variant='accent']) [part='start'] {
+                    ${iconColor.cssCustomProperty}: white;
+                }
 
-            :host([appearance-variant='primary'][content-hidden])
-                .control:active {
-                padding: 0px;
-            }
+                :host([appearance-variant='accent']) .control {
+                    background-image: linear-gradient(
+                        ${buttonFillAccentColor},
+                        ${buttonFillAccentColor}
+                    );
+                    color: ${buttonAccentBlockFontColor};
+                    border-color: ${buttonFillAccentColor};
+                }
 
-            :host([appearance-variant='primary'][disabled]) .control {
-                background-clip: border-box;
-                border-color: transparent;
-                border-width: ${borderWidth};
-                box-shadow: none;
-                padding: 0 ${standardPadding};
+                :host([appearance-variant='accent']) [part='end'] {
+                    ${iconColor.cssCustomProperty}: white;
+                }
             }
 
-            :host([appearance-variant='primary'][disabled][content-hidden])
-                .control {
-                padding: 0px;
-            }
+            @layer active {
+                :host([appearance-variant='primary']) .control:active {
+                    background-image: linear-gradient(
+                        ${buttonFillActivePrimaryColor},
+                        ${buttonFillActivePrimaryColor}
+                    );
+                }
 
-            :host([appearance-variant='primary']) .control:active::before {
-                border-color: ${fillSelectedColor};
-                border-width: ${borderWidth};
+                :host([appearance-variant='accent']) .control:active {
+                    background-image: linear-gradient(
+                        ${buttonFillAccentActiveColor},
+                        ${buttonFillAccentActiveColor}
+                    );
+                }
             }
         `));
 
@@ -20108,81 +20121,80 @@
   const styles$A = css `
     ${styles$P}
 
-    .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 {
-        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);
+    @layer base {
+        .control[aria-pressed='true'] {
+            background-color: transparent;
+            background-image: linear-gradient(
+                ${fillSelectedColor},
+                ${fillSelectedColor}
+            );
+            border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);
+        }
     }
 
-    .control[aria-pressed='true']${focusVisible} {
-        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);
+    @layer hover {
+        .control[aria-pressed='true']:hover {
+            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);
-    }
+    @layer focusVisible {
+        .control[aria-pressed='true']${focusVisible} {
+            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);
+        }
 
-    :host([disabled]) .control[aria-pressed='true'] {
-        border-color: ${fillSelectedColor};
-        background-color: ${fillSelectedColor};
-        background-image: none;
+        .control[aria-pressed='true']${focusVisible}::before {
+            outline: ${borderWidth} solid ${borderHoverColor};
+            outline-offset: -3px;
+            color: transparent;
+        }
     }
 
-    :host([disabled]) .control[aria-pressed='true']:hover {
-        border-color: ${fillSelectedColor};
-        background-color: ${fillSelectedColor};
-        box-shadow: none;
-    }
+    @layer active {
+        .control[aria-pressed='true']:active {
+            box-shadow: none;
+            background-image: linear-gradient(
+                ${fillSelectedColor},
+                ${fillSelectedColor}
+            );
+            background-size: calc(100% - 2px) calc(100% - 2px);
+        }
 
-    .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']:active::before {
+            outline: none;
+        }
     }
 
-    .control[aria-pressed='true']${focusVisible}::before {
-        outline: ${borderWidth} solid ${borderHoverColor};
-        outline-offset: -3px;
-        color: transparent;
-    }
+    @layer disabled {
+        :host([disabled]) .control[aria-pressed='true'] {
+            background-image: linear-gradient(
+                ${fillSelectedColor},
+                ${fillSelectedColor}
+            );
+            border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);
+        }
 
-    .control[aria-pressed='true']:active::before {
-        outline: none;
+        :host([disabled]) .control[aria-pressed='true']:hover {
+            background-image: linear-gradient(
+                ${fillSelectedColor},
+                ${fillSelectedColor}
+            );
+            background-size: 100% 100%;
+            border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);
+            box-shadow: none;
+        }
     }
 `;
 
@@ -47925,6 +47937,9 @@
   __decorate$1([
       observable
   ], Table.prototype, "tableScrollableMinWidth", void 0);
+  __decorate$1([
+      observable
+  ], Table.prototype, "documentShiftKeyDown", void 0);
   const nimbleTable = Table.compose({
       baseName: 'table',
       template: template$9,