@ni/nimble-components 11.8.1 → 11.8.4

package/dist/all-components-bundle.js

@@ -14226,58 +14226,6 @@
         observable
     ], TreeView$1.prototype, "slottedTreeItems", void 0);
 
-    /**
-     * A behavior to add or remove a stylesheet from an element based on a property. The behavior ensures that
-     * styles are applied while the property matches and that styles are not applied if the property does
-     * not match.
-     *
-     * @public
-     */
-    class PropertyStyleSheetBehavior {
-        /**
-         * Constructs a {@link PropertyStyleSheetBehavior} instance.
-         * @param propertyName - The property name to operate from.
-         * @param value - The property value to operate from.
-         * @param styles - The styles to coordinate with the property.
-         */
-        constructor(propertyName, value, styles) {
-            this.propertyName = propertyName;
-            this.value = value;
-            this.styles = styles;
-        }
-        /**
-         * Binds the behavior to the element.
-         * @param elementInstance - The element for which the property is applied.
-         */
-        bind(elementInstance) {
-            Observable.getNotifier(elementInstance).subscribe(this, this.propertyName);
-            this.handleChange(elementInstance, this.propertyName);
-        }
-        /**
-         * Unbinds the behavior from the element.
-         * @param source - The element for which the behavior is unbinding.
-         * @internal
-         */
-        unbind(source) {
-            Observable.getNotifier(source).unsubscribe(this, this.propertyName);
-            source.$fastController.removeStyles(this.styles);
-        }
-        /**
-         * Change event for the provided element.
-         * @param source - the element for which to attach or detach styles.
-         * @param key - the key to lookup to know if the element already has the styles
-         * @internal
-         */
-        handleChange(source, key) {
-            if (source[key] === this.value) {
-                source.$fastController.addStyles(this.styles);
-            }
-            else {
-                source.$fastController.removeStyles(this.styles);
-            }
-        }
-    }
-
     /**
      * A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.
      * @public
@@ -14752,7 +14700,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));
-    const fillSelectedRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
+    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));
@@ -14877,28 +14825,24 @@
         return getColorForTheme(element, Black91, Black15, White);
     }
 
-    /* eslint-disable max-classes-per-file */
     /**
      * Subscription for {@link ThemeStyleSheetBehavior}
      */
     class ThemeStyleSheetBehaviorSubscription {
-        constructor(themeStyles, source) {
-            this.themeStyles = themeStyles;
+        constructor(value, styles, source) {
+            this.value = value;
+            this.styles = styles;
             this.source = source;
-            this.attached = null;
-        }
-        handleChange({ target, token }) {
-            this.attach(token.getValueFor(target));
         }
-        attach(theme) {
-            if (this.attached !== this.themeStyles[theme]) {
-                if (this.attached !== null) {
-                    this.source.$fastController.removeStyles(this.attached);
-                }
-                this.attached = this.themeStyles[theme];
-                if (this.attached !== null) {
-                    this.source.$fastController.addStyles(this.attached);
-                }
+        handleChange() {
+            const theme$1 = theme.getValueFor(this.source);
+            if (Array.isArray(this.value)
+                ? this.value.includes(theme$1)
+                : this.value === theme$1) {
+                this.source.$fastController.addStyles(this.styles);
+            }
+            else {
+                this.source.$fastController.removeStyles(this.styles);
             }
         }
     }
@@ -14906,47 +14850,22 @@
      * Behavior to conditionally apply theme-based stylesheets.
      */
     class ThemeStyleSheetBehavior {
-        constructor(lightStyle, darkStyleOrAlias, colorStyleOrAlias) {
+        constructor(theme, styles) {
+            this.theme = theme;
+            this.styles = styles;
             this.cache = new WeakMap();
-            const light = lightStyle;
-            const dark = ThemeStyleSheetBehavior.resolveTheme(darkStyleOrAlias, {
-                light,
-                dark: null,
-                color: null
-            });
-            const color = ThemeStyleSheetBehavior.resolveTheme(colorStyleOrAlias, {
-                light,
-                dark,
-                color: null
-            });
-            this.themeStyles = {
-                light,
-                dark,
-                color
-            };
-        }
-        static resolveTheme(value, currentThemeStyles) {
-            if (value instanceof ElementStyles || value === null) {
-                return value;
-            }
-            const currentStyle = currentThemeStyles[value];
-            if (currentStyle === null) {
-                throw new Error(`Tried to alias to theme '${value}' but the theme value is not set to a style.`);
-            }
-            return currentStyle;
         }
         /**
          * @internal
          */
         bind(source) {
             const subscriber = this.cache.get(source)
-                || new ThemeStyleSheetBehaviorSubscription(this.themeStyles, source);
-            const value = theme.getValueFor(source);
+                || new ThemeStyleSheetBehaviorSubscription(this.theme, this.styles, source);
             // Currently subscriber from cache may have gone through unbind
             // but still be in cache so always resubscribe
             // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
             theme.subscribe(subscriber, source);
-            subscriber.attach(value);
+            subscriber.handleChange();
             this.cache.set(source, subscriber);
         }
         /**
@@ -14964,22 +14883,20 @@
     /**
      * Behavior to conditionally apply theme-based stylesheets. To determine which to apply,
      * the behavior will use the nearest ThemeProvider's 'theme' design system value.
-     * To re-use the same style for multiple themes you can specify the name of an already
-     * defined theme to alias them together.
      *
      * @public
      * @example
      * ```ts
      * css`
-     *  // ...
-     * `.withBehaviors(new ThemeStyleSheetBehavior(
-     *   css`:host { ... Theme.light style... }`),
-     *   null, // No style needed for Theme.dark style
-     *   Theme.light // For the Theme.color style, re-use the previously set Theme.light style
+     *     // ...
+     * `.withBehaviors(
+     *     themeBehavior(Theme.light, css` ... `),
+     *     // Apply style for both dark and color theme
+     *     themeBehavior([Theme.dark, Theme.color], css` ... `)
      * )
      * ```
      */
-    const themeBehavior = (lightStyle, darkStyleOrAlias, colorStyleOrAlias) => new ThemeStyleSheetBehavior(lightStyle, darkStyleOrAlias, colorStyleOrAlias);
+    const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
     const styles$s = css `
     ${display('inline-block')}
@@ -15006,8 +14923,7 @@
     ::slotted(*:not([href]):last-child) {
         font: ${bodyEmphasizedFont};
     }
-`.withBehaviors(themeBehavior(css `
-            ${'' /* Light theme */}
+`.withBehaviors(themeBehavior(Theme.light, css `
             :host {
                 --ni-private-breadcrumb-link-active-font-color: ${DigitalGreenDark};
             }
@@ -15015,8 +14931,7 @@
             :host(.prominent-links) {
                 --ni-private-breadcrumb-link-font-color: ${DigitalGreenDark};
             }
-        `, css `
-            ${'' /* Dark theme */}
+        `), themeBehavior(Theme.dark, css `
             :host {
                 --ni-private-breadcrumb-link-active-font-color: ${PowerGreen};
             }
@@ -15024,8 +14939,7 @@
             :host(.prominent-links) {
                 --ni-private-breadcrumb-link-font-color: ${PowerGreen};
             }
-        `, css `
-            ${'' /* Color theme */}
+        `), themeBehavior(Theme.color, css `
             :host {
                 --ni-private-breadcrumb-link-active-font-color: ${hexToRgbaCssColor(White, 0.6)};
             }
@@ -15717,17 +15631,72 @@
         .withPrefix('nimble')
         .register(nimbleBreadcrumbItem());
 
+    /**
+     * A behavior to add or remove a stylesheet from an element based on a property. The behavior ensures that
+     * styles are applied while the property matches and that styles are not applied if the property does
+     * not match.
+     *
+     * @public
+     */
+    class MultivaluePropertyStyleSheetBehavior {
+        /**
+         * Constructs a {@link MultivaluePropertyStyleSheetBehavior} instance.
+         * @param propertyName - The property name to operate from.
+         * @param value - The property value or values to operate from.
+         * @param styles - The styles to coordinate with the property.
+         */
+        constructor(propertyName, value, styles) {
+            this.propertyName = propertyName;
+            this.value = value;
+            this.styles = styles;
+        }
+        /**
+         * Binds the behavior to the element.
+         * @param elementInstance - The element for which the property is applied.
+         */
+        bind(elementInstance) {
+            Observable.getNotifier(elementInstance).subscribe(this, this.propertyName);
+            this.handleChange(elementInstance, this.propertyName);
+        }
+        /**
+         * Unbinds the behavior from the element.
+         * @param source - The element for which the behavior is unbinding.
+         */
+        unbind(source) {
+            Observable.getNotifier(source).unsubscribe(this, this.propertyName);
+            source.$fastController.removeStyles(this.styles);
+        }
+        /**
+         * Change event for the provided element.
+         * @param source - the element for which to attach or detach styles.
+         * @param key - the key to lookup to know if the element already has the styles
+         * @internal
+         */
+        handleChange(source, key) {
+            // @ts-expect-error Accessing arbitrary property of an element
+            const currentValue = source[key];
+            if (Array.isArray(this.value)
+                ? this.value.includes(currentValue)
+                : this.value === currentValue) {
+                source.$fastController.addStyles(this.styles);
+            }
+            else {
+                source.$fastController.removeStyles(this.styles);
+            }
+        }
+    }
+
     /**
      * Behavior that will conditionally apply a stylesheet based on the element's
      * appearance property
      *
-     * @param value - The value of the appearance property
+     * @param value - The value or values of the appearance property
      * @param styles - The styles to be applied when condition matches
      *
      * @public
      */
     function appearanceBehavior(value, styles) {
-        return new PropertyStyleSheetBehavior('appearance', value, styles);
+        return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
     }
 
     /**
@@ -16177,10 +16146,7 @@
             transition-duration: 0s;
         }
     }
-`
-        .withBehaviors(themeBehavior(
-    // Light theme
-    css `
+`.withBehaviors(themeBehavior(Theme.light, css `
                 :host {
                     --ni-private-card-button-box-shadow-hover-color: ${hexToRgbaCssColor(Black, 0.3)};
                     --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(White, 0.3)};
@@ -16188,9 +16154,7 @@
                     --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(Black91, 0.2)};
                     --ni-private-card-button-border-selected-color: ${hexToRgbaCssColor(Black91, 0.6)};
                 }
-            `, 
-    // Dark theme
-    css `
+            `), themeBehavior(Theme.dark, css `
                 :host {
                     --ni-private-card-button-box-shadow-hover-color: ${hexToRgbaCssColor(Black, 0.77)};
                     --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(Black15, 0.07)};
@@ -16198,9 +16162,7 @@
                     --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(Black15, 0.2)};
                     --ni-private-card-button-border-selected-color: ${Black15};
                 }
-            `, 
-    // Color theme
-    css `
+            `), themeBehavior(Theme.color, css `
                 :host {
                     --ni-private-card-button-box-shadow-hover-color: ${hexToRgbaCssColor(White, 0.77)};
                     --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(White, 0.2)};
@@ -16886,6 +16848,7 @@
                 part="button"
                 aria-haspopup="true"
                 aria-expanded="${x => x.open}"
+                tabindex="-1"
             >
                 <nimble-icon-arrow-expander-down
                     slot="start"
@@ -20559,11 +20522,6 @@
         outline: none;
     }
 
-    .control::selection {
-        color: ${controlLabelFontColor};
-        background: rgba(${fillSelectedRgbPartialColor}, 0.3);
-    }
-
     .control::placeholder {
         color: ${controlLabelFontColor};
     }
@@ -20926,8 +20884,7 @@
             transition-duration: 0s;
         }
     }
-`.withBehaviors(themeBehavior(css `
-            ${'' /* Light theme */}
+`.withBehaviors(themeBehavior(Theme.light, css `
             :host {
                 --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(Black91, 0.07)};
                 --ni-private-switch-indicator-background-color: ${White};
@@ -20935,8 +20892,7 @@
                 --ni-private-switch-indicator-border-color: ${Black91};
                 --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black91, 0.3)};
             }
-        `, css `
-            ${'' /* Dark theme */}
+        `), themeBehavior(Theme.dark, css `
             :host {
                 --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(Black15, 0.07)};
                 --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(Black91, 0.3)};
@@ -20944,8 +20900,7 @@
                 --ni-private-switch-indicator-border-color: ${Black7};
                 --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black7, 0.3)};
             }
-        `, css `
-            ${'' /* Color theme */}
+        `), themeBehavior(Theme.color, css `
             :host {
                 --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(White, 0.07)};
                 --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(White, 0.1)};
@@ -21290,11 +21245,6 @@
         box-shadow: none;
     }
 
-    .control::selection {
-        color: ${controlLabelFontColor};
-        background: rgba(${fillSelectedRgbPartialColor}, 0.3);
-    }
-
     .control::placeholder {
         color: ${controlLabelFontColor};
     }
@@ -21382,6 +21332,7 @@
         frameless: 'frameless'
     };
 
+    /* eslint-disable @typescript-eslint/indent */
     const styles$4 = css `
     ${display('inline-block')}
     ${styles$k}
@@ -21509,11 +21460,6 @@
         text-overflow: clip;
     }
 
-    .control::selection {
-        color: ${controlLabelFontColor};
-        background: rgba(${fillSelectedRgbPartialColor}, 0.3);
-    }
-
     .control::placeholder {
         color: ${controlLabelFontColor};
     }
@@ -21610,19 +21556,15 @@
             :host([readonly]) .root {
                 border-color: transparent;
             }
-        `), themeBehavior(css `
-            ${'' /* Light theme */}
+        `), themeBehavior(Theme.light, css `
             .control::-ms-reveal {
                 filter: invert(0%);
             }
-        `, css `
-            ${'' /* Dark theme */}
+        `), themeBehavior([Theme.dark, Theme.color], css `
             .control::-ms-reveal {
                 filter: invert(100%);
             }
-        `, 
-    // Color theme
-    Theme.dark));
+        `));
 
     /**
      * A nimble-styed HTML text input
@@ -21753,11 +21695,7 @@
         display: flex;
         flex: 0 0 auto;
     }
-`.withBehaviors(
-    /* Local Theme Behaviors for tooltip borders and backgrounds */
-    themeBehavior(
-    // Light Theme
-    css `
+`.withBehaviors(themeBehavior(Theme.light, css `
             :host(.fail) {
                 --ni-private-tooltip-border-color: ${BannerFail100DarkUi};
                 --ni-private-tooltip-background-color: ${White};
@@ -21767,9 +21705,7 @@
                 --ni-private-tooltip-border-color: ${Information100LightUi};
                 --ni-private-tooltip-background-color: ${White};
             }
-        `, 
-    // Dark Theme
-    css `
+        `), themeBehavior(Theme.dark, css `
             :host {
                 --ni-private-tooltip-border-color: ${hexToRgbaCssColor(Black15, 0.3)};
                 --ni-private-tooltip-background-color: ${Black85};
@@ -21782,9 +21718,7 @@
             :host(.fail) {
                 --ni-private-tooltip-border-color: ${BannerFail100DarkUi};
             }
-        `, 
-    // Color Theme
-    css `
+        `), themeBehavior(Theme.color, css `
             .anchored-region {
                 background-color: ${ForestGreen};
             }