@ni/nimble-components 11.7.2 → 11.8.2

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
@@ -14302,7 +14250,7 @@
      */
     const focusVisible$1 = canUseFocusVisible() ? "focus-visible" : "focus";
 
-    const styles$t = css `
+    const styles$u = css `
     :host {
         contain: layout;
         display: block;
@@ -14326,7 +14274,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$t
+        styles: styles$u
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -14350,6 +14298,7 @@
     const Black88 = "#252526";
     const Black85 = "#363738";
     const Black80 = "#505153";
+    const Black = "#000000";
     const Black91 = "#161617";
     const ForestGreen = "#074023";
     const DigitalGreenLight = "#009b65";
@@ -14669,7 +14618,7 @@
 
     const template$6 = html `<slot></slot>`;
 
-    const styles$s = css `
+    const styles$t = css `
     :host {
         display: contents;
     }
@@ -14725,7 +14674,7 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$s,
+        styles: styles$t,
         template: template$6
     });
     DesignSystem.getOrCreate()
@@ -14876,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);
             }
         }
     }
@@ -14905,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);
         }
         /**
@@ -14963,24 +14883,22 @@
     /**
      * 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$r = css `
+    const styles$s = css `
     ${display('inline-block')}
 
     :host {
@@ -15005,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};
             }
@@ -15014,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};
             }
@@ -15023,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)};
             }
@@ -15043,7 +14958,7 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$r
+        styles: styles$s
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
@@ -15629,7 +15544,7 @@
      */
     const focusVisible = `:${focusVisible$1}`;
 
-    const styles$q = css `
+    const styles$r = css `
     ${display('inline-flex')}
 
     :host {
@@ -15655,7 +15570,7 @@
         padding-right: calc(4px - ${borderWidth});
     }
 
-    .control:link {
+    .control:any-link {
         cursor: pointer;
         text-decoration: none;
     }
@@ -15669,7 +15584,7 @@
         text-decoration: underline;
     }
 
-    .control:link${focusVisible} {
+    .control:any-link${focusVisible} {
         border: ${borderWidth} solid ${borderHoverColor};
         outline: 2px solid ${borderHoverColor};
         outline-offset: 1px;
@@ -15709,24 +15624,79 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$q,
+        styles: styles$r,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
         .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);
     }
 
     /**
@@ -15739,7 +15709,7 @@
         block: 'block'
     };
 
-    const styles$p = css `
+    const styles$q = css `
     ${display('inline-flex')}
 
     :host {
@@ -15946,7 +15916,7 @@
             `));
 
     // prettier-ignore
-    const styles$o = styles$p
+    const styles$p = styles$q
         .withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
                 :host(.primary) .control {
                     box-shadow: 0px 0px 0px ${borderWidth} rgba(${actionRgbPartialColor}, 0.3) inset;
@@ -16060,13 +16030,184 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$o,
+        styles: styles$p,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
 
+    // prettier-ignore
+    const styles$o = css `
+    ${display('inline-flex')}
+
+    :host {
+        background-color: transparent;
+        color: ${buttonLabelFontColor};
+        font: ${buttonLabelFont};
+        cursor: pointer;
+        outline: none;
+        border: none;
+        box-sizing: border-box;
+    }
+
+    :host(:hover) {
+        box-shadow: 0px 1px 4px
+            var(--ni-private-card-button-box-shadow-hover-color);
+    }
+
+    :host(:active) {
+        box-shadow: none;
+    }
+
+    :host([disabled]) {
+        cursor: default;
+        box-shadow: none;
+    }
+
+    .control {
+        background-color: transparent;
+        height: 100%;
+        width: 100%;
+        border: ${borderWidth} solid transparent;
+        color: inherit;
+        border-radius: inherit;
+        fill: inherit;
+        cursor: inherit;
+        font: inherit;
+        outline: none;
+        transition: box-shadow ${smallDelay};
+        padding: 0px;
+    }
+
+    .control:hover {
+        background: var(--ni-private-card-button-background-hover-color);
+    }
+
+    .control${focusVisible} {
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        border-color: ${borderHoverColor};
+        outline: ${borderWidth} solid ${borderHoverColor};
+        outline-offset: -4px;
+    }
+
+    .control:active {
+        background: var(--ni-private-card-button-background-active-color);
+        border-color: var(--ni-private-card-button-border-active-color);
+        outline: none;
+        box-shadow: none;
+    }
+
+    :host([selected]) .control {
+        background: var(--ni-private-card-button-background-active-color);
+        border-color: var(--ni-private-card-button-border-selected-color);
+    }
+
+    :host([selected]) .control${focusVisible} {
+        border-color: ${borderHoverColor};
+    }
+
+    :host([selected]) .control:active {
+        border-color: var(--ni-private-card-button-border-active-color);
+    }
+
+    :host([selected]) .control${focusVisible}:active {
+        outline: none;
+        box-shadow: none;
+    }
+
+    .control[disabled] {
+        background: transparent;
+        opacity: 0.3;
+    }
+
+    .control[disabled]:active {
+        border-color: transparent;
+    }
+
+    :host([selected]) .control[disabled]:active {
+        border-color: var(--ni-private-card-button-border-selected-color);
+    }
+
+    .content {
+        display: contents;
+    }
+
+    slot[name='start'] {
+        display: none;
+    }
+
+    slot[name='end'] {
+        display: none;
+    }
+
+    @media (prefers-reduced-motion) {
+        .control {
+            transition-duration: 0s;
+        }
+    }
+`.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)};
+                    --ni-private-card-button-background-active-color: ${White};
+                    --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(Black91, 0.2)};
+                    --ni-private-card-button-border-selected-color: ${hexToRgbaCssColor(Black91, 0.6)};
+                }
+            `), 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)};
+                    --ni-private-card-button-background-active-color: ${hexToRgbaCssColor(Black15, 0.15)};
+                    --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(Black15, 0.2)};
+                    --ni-private-card-button-border-selected-color: ${Black15};
+                }
+            `), 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)};
+                    --ni-private-card-button-background-active-color: ${hexToRgbaCssColor(White, 0.4)};
+                    --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(White, 0.2)};
+                    --ni-private-card-button-border-selected-color: ${hexToRgbaCssColor(White, 0.6)};
+                }
+            `));
+
+    /**
+     * A nimble-styled card button
+     */
+    class CardButton extends Button$1 {
+        constructor() {
+            super(...arguments);
+            /**
+             * @public
+             * @remarks
+             * HTML Attribute: selected
+             */
+            this.selected = false;
+        }
+    }
+    __decorate([
+        attr({ mode: 'boolean' })
+    ], CardButton.prototype, "selected", void 0);
+    /**
+     * A function that returns a nimble-card-button registration for configuring the component with a DesignSystem.
+     * Implements {@link @microsoft/fast-foundation#buttonTemplate}
+     *
+     * @public
+     * @remarks
+     * Generates HTML Element: \<nimble-card-button\>
+     *
+     */
+    const nimbleCardButton = CardButton.compose({
+        baseName: 'card-button',
+        template: buttonTemplate,
+        styles: styles$o,
+        shadowOptions: {
+            delegatesFocus: true
+        }
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
+
     const styles$n = css `
     ${display('inline-flex')}
 
@@ -19827,7 +19968,7 @@
 `;
 
     const styles$e = css `
-    ${styles$p}
+    ${styles$q}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -20747,8 +20888,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};
@@ -20756,8 +20896,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)};
@@ -20765,8 +20904,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)};
@@ -21203,6 +21341,7 @@
         frameless: 'frameless'
     };
 
+    /* eslint-disable @typescript-eslint/indent */
     const styles$4 = css `
     ${display('inline-block')}
     ${styles$k}
@@ -21431,19 +21570,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
@@ -21574,11 +21709,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};
@@ -21588,9 +21719,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};
@@ -21603,9 +21732,7 @@
             :host(.fail) {
                 --ni-private-tooltip-border-color: ${BannerFail100DarkUi};
             }
-        `, 
-    // Color Theme
-    css `
+        `), themeBehavior(Theme.color, css `
             .anchored-region {
                 background-color: ${ForestGreen};
             }