@ni/nimble-components 23.0.1 → 24.0.0

package/dist/all-components-bundle.js

@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Mon, 25 Mar 2024 16:47:43 GMT
+   * Generated on Tue, 26 Mar 2024 20:29:30 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16324,9 +16324,8 @@
   const DigitalGreenLight = "#009b65";
   const BannerFail100DarkUi = "#d63434";
   const Warning100LightUi = "#ff4b00";
-  const DigitalGreenDark = "#006b46";
+  const DigitalGreenDark = "#008557";
   const DigitalGreenDark105 = "#00734b";
-  const DigitalGreenDark110 = "#00613f";
   const PowerGreen = "#32eb96";
   const Title2Family = "Source Sans Pro";
   const Title2Weight = "400";
@@ -16447,12 +16446,10 @@
       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',
@@ -16905,12 +16902,10 @@
   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');
@@ -16946,9 +16941,9 @@
   const [subtitlePlus1Font, subtitlePlus1FontColor, subtitlePlus1DisabledFontColor, subtitlePlus1FontFamily, subtitlePlus1FontWeight, subtitlePlus1FontSize, subtitlePlus1FontLineHeight, subtitlePlus1FallbackFontFamily] = createFontTokens(tokenNames.subtitlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle2Family, Subtitle2Weight, Subtitle2Size, Subtitle2LineHeight, Subtitle2FallbackFontFamily);
   const [subtitleFont, subtitleFontColor, subtitleDisabledFontColor, subtitleFontFamily, subtitleFontWeight, subtitleFontSize, subtitleFontLineHeight, subtitleFallbackFontFamily] = createFontTokens(tokenNames.subtitleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle1Family, Subtitle1Weight, Subtitle1Size, Subtitle1LineHeight, Subtitle1FallbackFontFamily);
   const [linkFont, linkFontColor, linkDisabledFontColor, linkFontFamily, linkFontWeight, linkFontSize, linkFontLineHeight, linkFallbackFontFamily] = createFontTokens(tokenNames.linkFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
-  const [linkActiveFont, linkActiveFontColor, linkActiveDisabledFontColor, linkActiveFontFamily, linkActiveFontWeight, linkActiveFontSize, linkActiveFontLineHeight, linkActiveFallbackFontFamily] = createFontTokens(tokenNames.linkActiveFont, (element) => getColorForTheme(element, DigitalGreenDark, PowerGreen, hexToRgbaCssColor(White, 0.6)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
-  const [linkProminentFont, linkProminentFontColor, linkProminentDisabledFontColor, linkProminentFontFamily, linkProminentFontWeight, linkProminentFontSize, linkProminentFontLineHeight, linkProminentFallbackFontFamily] = createFontTokens(tokenNames.linkProminentFont, (element) => getColorForTheme(element, DigitalGreenDark, PowerGreen, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
-  const [linkActiveProminentFont, linkActiveProminentFontColor, linkActiveProminentDisabledFontColor, linkActiveProminentFontFamily, linkActiveProminentFontWeight, linkActiveProminentFontSize, linkActiveProminentFontLineHeight, linkActiveProminentFallbackFontFamily] = createFontTokens(tokenNames.linkActiveProminentFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
+  const [linkActiveFont, linkActiveFontColor, linkActiveDisabledFontColor, linkActiveFontFamily, linkActiveFontWeight, linkActiveFontSize, linkActiveFontLineHeight, linkActiveFallbackFontFamily] = createFontTokens(tokenNames.linkActiveFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.6)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
+  const [linkProminentFont, linkProminentFontColor, linkProminentDisabledFontColor, linkProminentFontFamily, linkProminentFontWeight, linkProminentFontSize, linkProminentFontLineHeight, linkProminentFallbackFontFamily] = createFontTokens(tokenNames.linkProminentFont, (element) => getColorForTheme(element, DigitalGreenDark105, PowerGreen, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
+  const [linkActiveProminentFont, linkActiveProminentFontColor, linkActiveProminentDisabledFontColor, linkActiveProminentFontFamily, linkActiveProminentFontWeight, linkActiveProminentFontSize, linkActiveProminentFontLineHeight, linkActiveProminentFallbackFontFamily] = createFontTokens(tokenNames.linkActiveProminentFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
   const [placeholderFont, placeholderFontColor, placeholderDisabledFontColor, placeholderFontFamily, placeholderFontWeight, placeholderFontSize, placeholderFontLineHeight, placeholderFallbackFontFamily] = createFontTokens(tokenNames.placeholderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), PlaceholderFamily, PlaceholderWeight, PlaceholderSize, PlaceholderLineHeight, PlaceholderFallbackFontFamily);
   const [bodyFont, bodyFontColor, bodyDisabledFontColor, bodyFontFamily, bodyFontWeight, bodyFontSize, bodyFontLineHeight, bodyFallbackFontFamily] = createFontTokens(tokenNames.bodyFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyFamily, BodyWeight, BodySize, BodyLineHeight, BodyFallbackFontFamily);
   const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight, bodyEmphasizedFontSize, bodyEmphasizedFontLineHeight, bodyEmphasizedFallbackFontFamily] = createFontTokens(tokenNames.bodyEmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasizedSize, BodyEmphasizedLineHeight, BodyEmphasizedFallbackFontFamily);
@@ -17352,7 +17347,7 @@
 `;
 
   const styles$V = css `
-    @layer base, hover, focusVisible, active, disabled, top;
+    @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
         ${display('inline-flex')}
@@ -17425,15 +17420,15 @@
             display: contents;
         }
 
-        :host([content-hidden]) .content {
-            ${accessiblyHidden}
-        }
-
         [part='start'] {
             display: contents;
             ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
         }
 
+        :host([content-hidden]) .content {
+            ${accessiblyHidden}
+        }
+
         [part='end'] {
             display: contents;
             ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
@@ -17462,6 +17457,8 @@
     @layer active {
         .control:active {
             box-shadow: none;
+            color: ${buttonLabelFontColor};
+            border-color: ${borderHoverColor};
             background-image: linear-gradient(
                 ${fillSelectedColor},
                 ${fillSelectedColor}
@@ -17472,29 +17469,30 @@
         .control:active::before {
             outline: none;
         }
+
+        .control:active [part='start'],
+        .control:active [part='end'] {
+            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
+        }
     }
 
     @layer disabled {
         :host([disabled]) {
-            color: ${buttonLabelDisabledFontColor};
             cursor: default;
         }
 
         :host([disabled]) .control {
+            color: ${buttonLabelDisabledFontColor};
             box-shadow: none;
             background-image: none;
-            color: rgba(${actionRgbPartialColor}, 0.3);
+            background-size: 100% 100%;
         }
 
         :host([disabled]) .control::before {
             box-shadow: none;
         }
 
-        :host([disabled]) slot[name='start']::slotted(*) {
-            opacity: 0.3;
-            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
-        }
-
+        :host([disabled]) slot[name='start']::slotted(*),
         :host([disabled]) slot[name='end']::slotted(*) {
             opacity: 0.3;
             ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
@@ -17559,7 +17557,6 @@
                         rgba(${borderRgbPartialColor}, 0.1),
                         rgba(${borderRgbPartialColor}, 0.1)
                     );
-                    background-size: 100% 100%;
                     border-color: rgba(${borderRgbPartialColor}, 0.1);
                 }
             }
@@ -17574,13 +17571,29 @@
                     border-color: ${buttonBorderAccentOutlineColor};
                     color: ${buttonAccentOutlineFontColor};
                 }
+
+                :host([appearance-variant='accent']) [part='start'],
+                :host([appearance-variant='accent']) [part='end'] {
+                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};
+                }
             }
-        `), appearanceBehavior(ButtonAppearance.block, css `
-            @layer base {
-                :host([appearance-variant='primary']) [part='start'] {
-                    ${iconColor.cssCustomProperty}: white;
+
+            @layer active {
+                :host([appearance-variant='accent']) .control:active {
+                    color: ${buttonAccentOutlineFontColor};
                 }
 
+                :host([appearance-variant='accent'])
+                    .control:active
+                    [part='start'],
+                :host([appearance-variant='accent'])
+                    .control:active
+                    [part='end'] {
+                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};
+                }
+            }
+        `), appearanceBehavior(ButtonAppearance.block, css `
+            @layer base {
                 :host([appearance-variant='primary']) .control {
                     background-image: linear-gradient(
                         ${buttonFillPrimaryColor},
@@ -17590,14 +17603,6 @@
                     border-color: ${buttonFillPrimaryColor};
                 }
 
-                :host([appearance-variant='primary']) [part='end'] {
-                    ${iconColor.cssCustomProperty}: white;
-                }
-
-                :host([appearance-variant='accent']) [part='start'] {
-                    ${iconColor.cssCustomProperty}: white;
-                }
-
                 :host([appearance-variant='accent']) .control {
                     background-image: linear-gradient(
                         ${buttonFillAccentColor},
@@ -17607,24 +17612,14 @@
                     border-color: ${buttonFillAccentColor};
                 }
 
-                :host([appearance-variant='accent']) [part='end'] {
-                    ${iconColor.cssCustomProperty}: white;
-                }
-            }
-
-            @layer active {
-                :host([appearance-variant='primary']) .control:active {
-                    background-image: linear-gradient(
-                        ${buttonFillActivePrimaryColor},
-                        ${buttonFillActivePrimaryColor}
-                    );
+                :host([appearance-variant='primary']) [part='start'],
+                :host([appearance-variant='primary']) [part='end'] {
+                    ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};
                 }
 
-                :host([appearance-variant='accent']) .control:active {
-                    background-image: linear-gradient(
-                        ${buttonFillAccentActiveColor},
-                        ${buttonFillAccentActiveColor}
-                    );
+                :host([appearance-variant='accent']) [part='start'],
+                :host([appearance-variant='accent']) [part='end'] {
+                    ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};
                 }
             }
         `));
@@ -20442,60 +20437,22 @@
 
   const styles$G = css `
     ${styles$V}
+    ${buttonAppearanceVariantStyles}
 
-    @layer base {
+    @layer checked {
         .control[aria-pressed='true'] {
             background-color: transparent;
+            color: ${buttonLabelFontColor};
             background-image: linear-gradient(
                 ${fillSelectedColor},
                 ${fillSelectedColor}
             );
             border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);
         }
-    }
 
-    @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);
-        }
-    }
-
-    @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);
-        }
-
-        .control[aria-pressed='true']${focusVisible}::before {
-            outline: ${borderWidth} solid ${borderHoverColor};
-            outline-offset: -3px;
-            color: transparent;
-        }
-    }
-
-    @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']:active::before {
-            outline: none;
+        .control[aria-pressed='true'] [part='start'],
+        .control[aria-pressed='true'] [part='end'] {
+            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
         }
     }
 
@@ -20507,18 +20464,24 @@
             );
             border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);
         }
-
-        :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;
-        }
     }
-`;
+`.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
+            @layer checked {
+                :host([appearance-variant='accent'])
+                    .control[aria-pressed='true'] {
+                    color: ${buttonAccentOutlineFontColor};
+                }
+
+                :host([appearance-variant='accent'])
+                    .control[aria-pressed='true']
+                    [part='start'],
+                :host([appearance-variant='accent'])
+                    .control[aria-pressed='true']
+                    [part='end'] {
+                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};
+                }
+            }
+        `));
 
   const template$v = (context, definition) => html `
     <div
@@ -20589,6 +20552,9 @@
   __decorate$1([
       attr
   ], ToggleButton.prototype, "appearance", void 0);
+  __decorate$1([
+      attr({ attribute: 'appearance-variant' })
+  ], ToggleButton.prototype, "appearanceVariant", void 0);
   __decorate$1([
       attr({ attribute: 'content-hidden', mode: 'boolean' })
   ], ToggleButton.prototype, "contentHidden", void 0);
@@ -24706,6 +24672,19 @@
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
+  /**
+   * Types of menu button appearance.
+   * @public
+   */
+  /**
+   * The options of where to position the menu relative to the menu button.
+   */
+  const MenuButtonPosition = {
+      above: 'above',
+      below: 'below',
+      auto: 'auto'
+  };
+
   const styles$y = css `
     ${display('inline-block')}
 
@@ -24733,6 +24712,7 @@
         <${toggleButtonTag}
             part="button"
             appearance="${x => x.appearance}"
+            appearance-variant="${x => x.appearanceVariant}"
             ?content-hidden="${x => x.contentHidden}"
             ?checked="${x => x.open}"
             ?disabled="${x => x.disabled}"
@@ -24768,19 +24748,6 @@
     </template>
 `;
 
-  /**
-   * Types of menu button appearance.
-   * @public
-   */
-  /**
-   * The options of where to position the menu relative to the menu button.
-   */
-  const MenuButtonPosition = {
-      above: 'above',
-      below: 'below',
-      auto: 'auto'
-  };
-
   /**
    * A nimble-styled menu button control.
    */
@@ -24957,6 +24924,9 @@
   __decorate$1([
       attr
   ], MenuButton.prototype, "appearance", void 0);
+  __decorate$1([
+      attr({ attribute: 'appearance-variant' })
+  ], MenuButton.prototype, "appearanceVariant", void 0);
   __decorate$1([
       attr({ mode: 'boolean' })
   ], MenuButton.prototype, "disabled", void 0);