@ni/nimble-components 11.7.2 → 11.8.0

package/dist/all-components-bundle.js

@@ -14302,7 +14302,7 @@
      */
     const focusVisible$1 = canUseFocusVisible() ? "focus-visible" : "focus";
 
-    const styles$t = css `
+    const styles$u = css `
     :host {
         contain: layout;
         display: block;
@@ -14326,7 +14326,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$t
+        styles: styles$u
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -14350,6 +14350,7 @@
     const Black88 = "#252526";
     const Black85 = "#363738";
     const Black80 = "#505153";
+    const Black = "#000000";
     const Black91 = "#161617";
     const ForestGreen = "#074023";
     const DigitalGreenLight = "#009b65";
@@ -14669,7 +14670,7 @@
 
     const template$6 = html `<slot></slot>`;
 
-    const styles$s = css `
+    const styles$t = css `
     :host {
         display: contents;
     }
@@ -14725,7 +14726,7 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$s,
+        styles: styles$t,
         template: template$6
     });
     DesignSystem.getOrCreate()
@@ -14980,7 +14981,7 @@
      */
     const themeBehavior = (lightStyle, darkStyleOrAlias, colorStyleOrAlias) => new ThemeStyleSheetBehavior(lightStyle, darkStyleOrAlias, colorStyleOrAlias);
 
-    const styles$r = css `
+    const styles$s = css `
     ${display('inline-block')}
 
     :host {
@@ -15043,7 +15044,7 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$r
+        styles: styles$s
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
@@ -15629,7 +15630,7 @@
      */
     const focusVisible = `:${focusVisible$1}`;
 
-    const styles$q = css `
+    const styles$r = css `
     ${display('inline-flex')}
 
     :host {
@@ -15709,7 +15710,7 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$q,
+        styles: styles$r,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
@@ -15739,7 +15740,7 @@
         block: 'block'
     };
 
-    const styles$p = css `
+    const styles$q = css `
     ${display('inline-flex')}
 
     :host {
@@ -15946,7 +15947,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 +16061,191 @@
         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(
+    // Light theme
+    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)};
+                }
+            `, 
+    // Dark theme
+    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};
+                }
+            `, 
+    // Color theme
+    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 +20006,7 @@
 `;
 
     const styles$e = css `
-    ${styles$p}
+    ${styles$q}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};