@ni/nimble-components 11.7.0 → 11.8.0

package/dist/all-components-bundle.js

@@ -278,30 +278,6 @@
         },
     });
 
-    function spilloverSubscribe(subscriber) {
-        const spillover = this.spillover;
-        const index = spillover.indexOf(subscriber);
-        if (index === -1) {
-            spillover.push(subscriber);
-        }
-    }
-    function spilloverUnsubscribe(subscriber) {
-        const spillover = this.spillover;
-        const index = spillover.indexOf(subscriber);
-        if (index !== -1) {
-            spillover.splice(index, 1);
-        }
-    }
-    function spilloverNotifySubscribers(args) {
-        const spillover = this.spillover;
-        const source = this.source;
-        for (let i = 0, ii = spillover.length; i < ii; ++i) {
-            spillover[i].handleChange(source, args);
-        }
-    }
-    function spilloverHas(subscriber) {
-        return this.spillover.indexOf(subscriber) !== -1;
-    }
     /**
      * An implementation of {@link Notifier} that efficiently keeps track of
      * subscribers interested in a specific change notification on an
@@ -331,42 +307,58 @@
          * @param subscriber - The subscriber to test for inclusion in this set.
          */
         has(subscriber) {
-            return this.sub1 === subscriber || this.sub2 === subscriber;
+            return this.spillover === void 0
+                ? this.sub1 === subscriber || this.sub2 === subscriber
+                : this.spillover.indexOf(subscriber) !== -1;
         }
         /**
          * Subscribes to notification of changes in an object's state.
          * @param subscriber - The object that is subscribing for change notification.
          */
         subscribe(subscriber) {
-            if (this.has(subscriber)) {
-                return;
-            }
-            if (this.sub1 === void 0) {
-                this.sub1 = subscriber;
-                return;
+            const spillover = this.spillover;
+            if (spillover === void 0) {
+                if (this.has(subscriber)) {
+                    return;
+                }
+                if (this.sub1 === void 0) {
+                    this.sub1 = subscriber;
+                    return;
+                }
+                if (this.sub2 === void 0) {
+                    this.sub2 = subscriber;
+                    return;
+                }
+                this.spillover = [this.sub1, this.sub2, subscriber];
+                this.sub1 = void 0;
+                this.sub2 = void 0;
             }
-            if (this.sub2 === void 0) {
-                this.sub2 = subscriber;
-                return;
+            else {
+                const index = spillover.indexOf(subscriber);
+                if (index === -1) {
+                    spillover.push(subscriber);
+                }
             }
-            this.spillover = [this.sub1, this.sub2, subscriber];
-            this.subscribe = spilloverSubscribe;
-            this.unsubscribe = spilloverUnsubscribe;
-            this.notify = spilloverNotifySubscribers;
-            this.has = spilloverHas;
-            this.sub1 = void 0;
-            this.sub2 = void 0;
         }
         /**
          * Unsubscribes from notification of changes in an object's state.
          * @param subscriber - The object that is unsubscribing from change notification.
          */
         unsubscribe(subscriber) {
-            if (this.sub1 === subscriber) {
-                this.sub1 = void 0;
+            const spillover = this.spillover;
+            if (spillover === void 0) {
+                if (this.sub1 === subscriber) {
+                    this.sub1 = void 0;
+                }
+                else if (this.sub2 === subscriber) {
+                    this.sub2 = void 0;
+                }
             }
-            else if (this.sub2 === subscriber) {
-                this.sub2 = void 0;
+            else {
+                const index = spillover.indexOf(subscriber);
+                if (index !== -1) {
+                    spillover.splice(index, 1);
+                }
             }
         }
         /**
@@ -374,14 +366,22 @@
          * @param args - Data passed along to subscribers during notification.
          */
         notify(args) {
-            const sub1 = this.sub1;
-            const sub2 = this.sub2;
+            const spillover = this.spillover;
             const source = this.source;
-            if (sub1 !== void 0) {
-                sub1.handleChange(source, args);
+            if (spillover === void 0) {
+                const sub1 = this.sub1;
+                const sub2 = this.sub2;
+                if (sub1 !== void 0) {
+                    sub1.handleChange(source, args);
+                }
+                if (sub2 !== void 0) {
+                    sub2.handleChange(source, args);
+                }
             }
-            if (sub2 !== void 0) {
-                sub2.handleChange(source, args);
+            else {
+                for (let i = 0, ii = spillover.length; i < ii; ++i) {
+                    spillover[i].handleChange(source, args);
+                }
             }
         }
     }
@@ -6745,8 +6745,14 @@
              * @internal
              */
             this.keypressHandler = (e) => {
+                if (this.readOnly) {
+                    return;
+                }
                 switch (e.key) {
                     case keySpace:
+                        if (this.indeterminate) {
+                            this.indeterminate = false;
+                        }
                         this.checked = !this.checked;
                         break;
                 }
@@ -6756,6 +6762,9 @@
              */
             this.clickHandler = (e) => {
                 if (!this.disabled && !this.readOnly) {
+                    if (this.indeterminate) {
+                        this.indeterminate = false;
+                    }
                     this.checked = !this.checked;
                 }
             };
@@ -7780,7 +7789,7 @@
          * @internal
          */
         focusoutHandler(e) {
-            this.updateValue();
+            this.syncValue();
             if (!this.open) {
                 return true;
             }
@@ -7802,7 +7811,12 @@
         inputHandler(e) {
             this.filter = this.control.value;
             this.filterOptions();
-            if (e.inputType === "deleteContentBackward" || !this.filter.length) {
+            if (!this.isAutocompleteInline) {
+                this.selectedIndex = this.options
+                    .map(option => option.text)
+                    .indexOf(this.control.value);
+            }
+            if (e.inputType.includes("deleteContent") || !this.filter.length) {
                 return true;
             }
             if (this.isAutocompleteList && !this.open) {
@@ -7828,7 +7842,7 @@
             }
             switch (key) {
                 case "Enter": {
-                    this.updateValue(true);
+                    this.syncValue();
                     if (this.isAutocompleteInline) {
                         this.filter = this.value;
                     }
@@ -7851,7 +7865,7 @@
                     break;
                 }
                 case "Tab": {
-                    this.updateValue();
+                    this.setInputToSelection();
                     if (!this.open) {
                         return true;
                     }
@@ -7870,7 +7884,6 @@
                         super.keydownHandler(e);
                     }
                     if (this.isAutocompleteInline) {
-                        this.updateValue();
                         this.setInlineSelection();
                     }
                     break;
@@ -7951,18 +7964,37 @@
             }
         }
         /**
-         * Focus and select the content of the control based on the first selected option.
+         * Focus and set the content of the control based on the first selected option.
          *
-         * @param start - The index for the starting range
          * @internal
          */
-        setInlineSelection() {
+        setInputToSelection() {
             if (this.firstSelectedOption) {
                 this.control.value = this.firstSelectedOption.text;
                 this.control.focus();
+            }
+        }
+        /**
+         * Focus, set and select the content of the control based on the first selected option.
+         *
+         * @internal
+         */
+        setInlineSelection() {
+            if (this.firstSelectedOption) {
+                this.setInputToSelection();
                 this.control.setSelectionRange(this.filter.length, this.control.value.length, "backward");
             }
         }
+        /**
+         * Determines if a value update should involve emitting a change event, then updates the value.
+         *
+         * @internal
+         */
+        syncValue() {
+            var _a;
+            const newValue = this.selectedIndex > -1 ? (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text : this.control.value;
+            this.updateValue(this.value !== newValue);
+        }
         /**
          * Calculate and apply listbox positioning based on available viewport space.
          *
@@ -8024,6 +8056,7 @@
             var _a;
             if (this.$fastController.isConnected) {
                 this.value = ((_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text) || this.control.value;
+                this.control.value = this.value;
             }
             if (shouldEmit) {
                 this.$emit("change");
@@ -11894,7 +11927,7 @@
                 this.updateValue(true);
                 this.indexWhenOpened = this.selectedIndex;
             }
-            return !(key in ArrowKeys);
+            return !(key === keyArrowDown || key === keyArrowUp);
         }
         connectedCallback() {
             super.connectedCallback();
@@ -12866,6 +12899,12 @@
         @click="${(x, c) => x.clickHandler(c.event)}"
         @focusin="${(x, c) => x.focusinHandler(c.event)}"
         @keydown="${(x, c) => x.keydownHandler(c.event)}"
+        ${children({
+    property: "childItems",
+    attributeFilter: ["disabled", "hidden"],
+    filter: elements(),
+    subtree: true,
+})}
     >
         <slot name="label"></slot>
         <div class="positioning-region" part="positioning-region">
@@ -12942,11 +12981,6 @@
              * HTML Attribute: `orientation`
              */
             this.orientation = Orientation.horizontal;
-            this.startEndSlotChange = () => {
-                if (this.$fastController.isConnected) {
-                    this.reduceFocusableElements();
-                }
-            };
         }
         /**
          * The index of the currently focused element, clamped between 0 and the last element.
@@ -12981,22 +13015,17 @@
             }
             return true;
         }
+        childItemsChanged(prev, next) {
+            if (this.$fastController.isConnected) {
+                this.reduceFocusableElements();
+            }
+        }
         /**
          * @internal
          */
         connectedCallback() {
             super.connectedCallback();
             this.direction = getDirection(this);
-            this.start.addEventListener("slotchange", this.startEndSlotChange);
-            this.end.addEventListener("slotchange", this.startEndSlotChange);
-        }
-        /**
-         * @internal
-         */
-        disconnectedCallback() {
-            super.disconnectedCallback();
-            this.start.removeEventListener("slotchange", this.startEndSlotChange);
-            this.end.removeEventListener("slotchange", this.startEndSlotChange);
         }
         /**
          * When the toolbar receives focus, set the currently active element as focused.
@@ -13059,7 +13088,13 @@
          * @internal
          */
         reduceFocusableElements() {
+            var _a;
+            const previousFocusedElement = (_a = this.focusableElements) === null || _a === void 0 ? void 0 : _a[this.activeIndex];
             this.focusableElements = this.allSlottedItems.reduce(Toolbar$1.reduceFocusableItems, []);
+            // If the previously active item is still focusable, adjust the active index to the
+            // index of that item.
+            const adjustedActiveIndex = this.focusableElements.indexOf(previousFocusedElement);
+            this.activeIndex = Math.max(0, adjustedActiveIndex);
             this.setFocusableElements();
         }
         /**
@@ -13087,10 +13122,12 @@
             const isRoleRadio = element.getAttribute("role") === "radio";
             const isFocusableFastElement = (_b = (_a = element.$fastController) === null || _a === void 0 ? void 0 : _a.definition.shadowOptions) === null || _b === void 0 ? void 0 : _b.delegatesFocus;
             const hasFocusableShadow = Array.from((_d = (_c = element.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll("*")) !== null && _d !== void 0 ? _d : []).some(x => isFocusable(x));
-            if (isFocusable(element) ||
-                isRoleRadio ||
-                isFocusableFastElement ||
-                hasFocusableShadow) {
+            if (!element.hasAttribute("disabled") &&
+                !element.hasAttribute("hidden") &&
+                (isFocusable(element) ||
+                    isRoleRadio ||
+                    isFocusableFastElement ||
+                    hasFocusableShadow)) {
                 elements.push(element);
                 return elements;
             }
@@ -13122,6 +13159,9 @@
     __decorate$1([
         observable
     ], Toolbar$1.prototype, "slottedLabel", void 0);
+    __decorate$1([
+        observable
+    ], Toolbar$1.prototype, "childItems", void 0);
     /**
      * Includes ARIA states and properties relating to the ARIA toolbar role
      *
@@ -14262,7 +14302,7 @@
      */
     const focusVisible$1 = canUseFocusVisible() ? "focus-visible" : "focus";
 
-    const styles$t = css `
+    const styles$u = css `
     :host {
         contain: layout;
         display: block;
@@ -14286,7 +14326,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$t
+        styles: styles$u
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -14310,6 +14350,7 @@
     const Black88 = "#252526";
     const Black85 = "#363738";
     const Black80 = "#505153";
+    const Black = "#000000";
     const Black91 = "#161617";
     const ForestGreen = "#074023";
     const DigitalGreenLight = "#009b65";
@@ -14629,7 +14670,7 @@
 
     const template$6 = html `<slot></slot>`;
 
-    const styles$s = css `
+    const styles$t = css `
     :host {
         display: contents;
     }
@@ -14685,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()
@@ -14940,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 {
@@ -15003,7 +15044,7 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$r
+        styles: styles$s
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
@@ -15589,7 +15630,7 @@
      */
     const focusVisible = `:${focusVisible$1}`;
 
-    const styles$q = css `
+    const styles$r = css `
     ${display('inline-flex')}
 
     :host {
@@ -15669,7 +15710,7 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$q,
+        styles: styles$r,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
@@ -15699,7 +15740,7 @@
         block: 'block'
     };
 
-    const styles$p = css `
+    const styles$q = css `
     ${display('inline-flex')}
 
     :host {
@@ -15906,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;
@@ -16020,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')}
 
@@ -19787,7 +20006,7 @@
 `;
 
     const styles$e = css `
-    ${styles$p}
+    ${styles$q}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};