@ni/nimble-components 29.1.4 → 29.1.6

package/dist/all-components-bundle.js

@@ -16304,7 +16304,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Tue, 21 May 2024 22:41:18 GMT
+   * Generated on Tue, 28 May 2024 20:00:12 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16929,9 +16929,9 @@
   const [subtitlePlus1Font, subtitlePlus1FontColor, subtitlePlus1DisabledFontColor, subtitlePlus1FontFamily, subtitlePlus1FontWeight, subtitlePlus1FontSize, subtitlePlus1FontLineHeight] = createFontTokens(tokenNames.subtitlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle2Family, Subtitle2Weight, Subtitle2Size, Subtitle2LineHeight);
   const [subtitleFont, subtitleFontColor, subtitleDisabledFontColor, subtitleFontFamily, subtitleFontWeight, subtitleFontSize, subtitleFontLineHeight] = createFontTokens(tokenNames.subtitleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle1Family, Subtitle1Weight, Subtitle1Size, Subtitle1LineHeight);
   const [linkFont, linkFontColor, linkDisabledFontColor, linkFontFamily, linkFontWeight, linkFontSize, linkFontLineHeight] = createFontTokens(tokenNames.linkFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
-  const [linkActiveFont, linkActiveFontColor, linkActiveDisabledFontColor, linkActiveFontFamily, linkActiveFontWeight, linkActiveFontSize, linkActiveFontLineHeight] = createFontTokens(tokenNames.linkActiveFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.6)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
-  const [linkProminentFont, linkProminentFontColor, linkProminentDisabledFontColor, linkProminentFontFamily, linkProminentFontWeight, linkProminentFontSize, linkProminentFontLineHeight] = createFontTokens(tokenNames.linkProminentFont, (element) => getColorForTheme(element, DigitalGreenDark105, PowerGreen, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
-  const [linkActiveProminentFont, linkActiveProminentFontColor, linkActiveProminentDisabledFontColor, linkActiveProminentFontFamily, linkActiveProminentFontWeight, linkActiveProminentFontSize, linkActiveProminentFontLineHeight] = createFontTokens(tokenNames.linkActiveProminentFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.6)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
+  const [linkActiveFont, linkActiveFontColor, linkActiveDisabledFontColor, linkActiveFontFamily, linkActiveFontWeight, linkActiveFontSize, linkActiveFontLineHeight] = createFontTokens(tokenNames.linkActiveFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.75)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
+  const [linkProminentFont, linkProminentFontColor, linkProminentDisabledFontColor, linkProminentFontFamily, linkProminentFontWeight, linkProminentFontSize, linkProminentFontLineHeight] = createFontTokens(tokenNames.linkProminentFont, (element) => getColorForTheme(element, DigitalGreenDark105, PowerGreen, White), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
+  const [linkActiveProminentFont, linkActiveProminentFontColor, linkActiveProminentDisabledFontColor, linkActiveProminentFontFamily, linkActiveProminentFontWeight, linkActiveProminentFontSize, linkActiveProminentFontLineHeight] = createFontTokens(tokenNames.linkActiveProminentFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.75)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
   const [placeholderFont, placeholderFontColor, placeholderDisabledFontColor, placeholderFontFamily, placeholderFontWeight, placeholderFontSize, placeholderFontLineHeight] = createFontTokens(tokenNames.placeholderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), PlaceholderFamily, PlaceholderWeight, PlaceholderSize, PlaceholderLineHeight);
   const [bodyFont, bodyFontColor, bodyDisabledFontColor, bodyFontFamily, bodyFontWeight, bodyFontSize, bodyFontLineHeight] = createFontTokens(tokenNames.bodyFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyFamily, BodyWeight, BodySize, BodyLineHeight);
   const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight, bodyEmphasizedFontSize, bodyEmphasizedFontLineHeight] = createFontTokens(tokenNames.bodyEmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasizedSize, BodyEmphasizedLineHeight);
@@ -17090,6 +17090,7 @@
             outline: none;
             box-shadow: inset 0px -1px;
             text-decoration: underline;
+            color: ${borderHoverColor};
         }
     }
 
@@ -17238,6 +17239,15 @@
       ghost: 'ghost',
       block: 'block'
   };
+  /**
+   * Types of button appearance variants.
+   * @public
+   */
+  const ButtonAppearanceVariant = {
+      default: undefined,
+      primary: 'primary',
+      accent: 'accent'
+  };
 
   /**
    * A behavior to add or remove a stylesheet from an element based on a property. The behavior ensures that
@@ -18711,8 +18721,6 @@
         font-size: 12.8px;
         align-items: top;
         overflow: hidden;
-        color: ${White};
-        ${iconColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.6)};
     }
 
     :host(:not([open])) {
@@ -18720,6 +18728,7 @@
     }
 
     .container {
+        color: ${bodyFontColor};
         display: flex;
         width: 100%;
     }
@@ -18730,6 +18739,7 @@
         justify-content: center;
         margin-top: 8px;
         flex: 0 0 auto;
+        opacity: 0.6;
     }
 
     .text {
@@ -18756,6 +18766,8 @@
         align-items: center;
         justify-content: center;
         align-self: flex-start;
+        margin-top: ${smallPadding};
+        ${controlHeight.cssCustomProperty}: ${controlSlimHeight};
     }
 
     slot[name='action'] {
@@ -18766,44 +18778,14 @@
     }
 
     slot[name='action']::slotted(nimble-anchor) {
-        ${linkFontColor.cssCustomProperty}: ${White};
-        ${linkDisabledFontColor.cssCustomProperty}: ${White};
-        ${linkActiveFontColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.6)};
         font-size: 12.8px;
     }
 
-    slot[name='action']::slotted(nimble-button) {
-        ${controlHeight.cssCustomProperty}: ${controlSlimHeight};
-        ${buttonLabelFontColor.cssCustomProperty}: ${White};
-        ${fillSelectedColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.2)};
-        ${borderHoverColor.cssCustomProperty}: ${White};
-    }
-
-    slot[name='action']::slotted(nimble-button[appearance='outline']) {
-        ${actionRgbPartialColor.cssCustomProperty}: ${White}
-    }
-
     .dismiss {
         width: 48px;
         display: flex;
         justify-content: center;
     }
-
-    .dismiss nimble-button {
-        ${controlHeight.cssCustomProperty}: 16px;
-        ${iconSize.cssCustomProperty}: 14px;
-        ${buttonLabelFontColor.cssCustomProperty}: ${White};
-        ${borderHoverColor.cssCustomProperty}: transparent;
-        ${fillSelectedColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.2)};
-    }
-
-    .dismiss nimble-button:focus-within {
-        outline: 2px solid ${White};
-    }
-
-    .dismiss nimble-button:hover {
-        background: ${hexToRgbaCssColor(White, 0.2)};
-    }
 `.withBehaviors(themeBehavior(Theme.light, css `
             :host {
                 background: ${Black75};
@@ -19801,15 +19783,15 @@
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
-   * The icon component for the 'xmark' icon
+   * The icon component for the 'times' icon
    */
-  class IconXmark extends Icon {
+  class IconTimes extends Icon {
       constructor() {
-          super(xmark16X16);
+          super(times16X16);
       }
   }
-  registerIcon('icon-xmark', IconXmark);
-  const iconXmarkTag = 'nimble-icon-xmark';
+  registerIcon('icon-times', IconTimes);
+  const iconTimesTag = 'nimble-icon-times';
 
   /**
    * Severities of banners.
@@ -19868,56 +19850,58 @@
 
   // prettier-ignore
   const template$y = html `
-    <div class="container"
-        role="status"
-        aria-atomic="${x => x.ariaAtomic}"
-        aria-busy="${x => x.ariaBusy}"
-        aria-controls="${x => x.ariaControls}"
-        aria-current="${x => x.ariaCurrent}"
-        aria-describedby="${x => x.ariaDescribedby}"
-        aria-details="${x => x.ariaDetails}"
-        aria-disabled="${x => x.ariaDisabled}"
-        aria-errormessage="${x => x.ariaErrormessage}"
-        aria-expanded="${x => x.ariaExpanded}"
-        aria-flowto="${x => x.ariaFlowto}"
-        aria-haspopup="${x => x.ariaHaspopup}"
-        aria-hidden="${x => x.ariaHidden}"
-        aria-invalid="${x => x.ariaInvalid}"
-        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-        aria-label="${x => x.ariaLabel}"
-        aria-labelledby="titleSlot"
-        aria-live="${x => x.ariaLive}"
-        aria-owns="${x => x.ariaOwns}"
-        aria-relevant="${x => x.ariaRelevant}"
-        aria-roledescription="${x => x.ariaRoledescription}"
-    >
-        <div class="icon">
-            ${when(x => x.severity === BannerSeverity.error, html `
-                <${iconExclamationMarkTag} role="img" aria-label="${x => popupIconErrorLabel.getValueFor(x)}"></${iconExclamationMarkTag}>
-            `)}
-            ${when(x => x.severity === BannerSeverity.warning, html `
-                <${iconTriangleFilledTag} role="img" aria-label="${x => popupIconWarningLabel.getValueFor(x)}"></${iconTriangleFilledTag}>
-            `)}
-            ${when(x => x.severity === BannerSeverity.information, html `
-                <${iconInfoTag} role="img" aria-label="${x => popupIconInformationLabel.getValueFor(x)}"></${iconInfoTag}>
-            `)}
-        </div>
-        <div class="text">
-            <slot name="title" id="titleSlot"></slot>
-            <slot></slot>
-        </div>
-        <div class="controls">
-            <slot name="action"></slot>
-            <div class="dismiss">
-                ${when(x => !x.preventDismiss, html `
-                    <${buttonTag} appearance="ghost" content-hidden @click="${x => x.dismissBanner()}">
-                        <${iconXmarkTag} slot="start"></${iconXmarkTag}>
-                        ${x => popupDismissLabel.getValueFor(x)}
-                    </${buttonTag}>
+    <${themeProviderTag} theme="${Theme.color}">
+        <div class="container"
+            role="status"
+            aria-atomic="${x => x.ariaAtomic}"
+            aria-busy="${x => x.ariaBusy}"
+            aria-controls="${x => x.ariaControls}"
+            aria-current="${x => x.ariaCurrent}"
+            aria-describedby="${x => x.ariaDescribedby}"
+            aria-details="${x => x.ariaDetails}"
+            aria-disabled="${x => x.ariaDisabled}"
+            aria-errormessage="${x => x.ariaErrormessage}"
+            aria-expanded="${x => x.ariaExpanded}"
+            aria-flowto="${x => x.ariaFlowto}"
+            aria-haspopup="${x => x.ariaHaspopup}"
+            aria-hidden="${x => x.ariaHidden}"
+            aria-invalid="${x => x.ariaInvalid}"
+            aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+            aria-label="${x => x.ariaLabel}"
+            aria-labelledby="titleSlot"
+            aria-live="${x => x.ariaLive}"
+            aria-owns="${x => x.ariaOwns}"
+            aria-relevant="${x => x.ariaRelevant}"
+            aria-roledescription="${x => x.ariaRoledescription}"
+        >
+            <div class="icon">
+                ${when(x => x.severity === BannerSeverity.error, html `
+                    <${iconExclamationMarkTag} role="img" aria-label="${x => popupIconErrorLabel.getValueFor(x)}"></${iconExclamationMarkTag}>
+                `)}
+                ${when(x => x.severity === BannerSeverity.warning, html `
+                    <${iconTriangleFilledTag} role="img" aria-label="${x => popupIconWarningLabel.getValueFor(x)}"></${iconTriangleFilledTag}>
                 `)}
+                ${when(x => x.severity === BannerSeverity.information, html `
+                    <${iconInfoTag} role="img" aria-label="${x => popupIconInformationLabel.getValueFor(x)}"></${iconInfoTag}>
+                `)}
+            </div>
+            <div class="text">
+                <slot name="title" id="titleSlot"></slot>
+                <slot></slot>
+            </div>
+            <div class="controls">
+                <slot name="action"></slot>
+                <div class="dismiss">
+                    ${when(x => !x.preventDismiss, html `
+                        <${buttonTag} appearance="${ButtonAppearance.ghost}" appearance-variant="${ButtonAppearanceVariant.primary}" content-hidden @click="${x => x.dismissBanner()}">
+                            <${iconTimesTag} slot="start"></${iconTimesTag}>
+                            ${x => popupDismissLabel.getValueFor(x)}
+                        </${buttonTag}>
+                    `)}
+                </div>
             </div>
         </div>
-    </div>
+    </${themeProviderTag}>
 `;
 
   /**
@@ -24326,19 +24310,6 @@
   }
   registerIcon('icon-tile-size', IconTileSize);
 
-  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-  // See generation source in nimble-components/build/generate-icons
-  /**
-   * The icon component for the 'times' icon
-   */
-  class IconTimes extends Icon {
-      constructor() {
-          super(times16X16);
-      }
-  }
-  registerIcon('icon-times', IconTimes);
-  const iconTimesTag = 'nimble-icon-times';
-
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -24557,6 +24528,18 @@
   }
   registerIcon('icon-wrench-hammer', IconWrenchHammer);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'xmark' icon
+   */
+  class IconXmark extends Icon {
+      constructor() {
+          super(xmark16X16);
+      }
+  }
+  registerIcon('icon-xmark', IconXmark);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**