@ni/nimble-components 7.8.2 → 7.8.3

package/dist/all-components-bundle.js

@@ -4305,6 +4305,12 @@
         });
     }
 
+    var Orientation;
+    (function (Orientation) {
+        Orientation["horizontal"] = "horizontal";
+        Orientation["vertical"] = "vertical";
+    })(Orientation || (Orientation = {}));
+
     /**
      * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
      *
@@ -4490,6 +4496,12 @@
     const keyEnd = "End";
     const keySpace = " ";
     const keyTab = "Tab";
+    const ArrowKeys = {
+        ArrowDown: keyArrowDown,
+        ArrowLeft: keyArrowLeft,
+        ArrowRight: keyArrowRight,
+        ArrowUp: keyArrowUp,
+    };
 
     /**
      * Expose ltr and rtl strings
@@ -4514,6 +4526,13 @@
         }
         return value;
     }
+    /**
+     * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
+     * If value is greater than max, max will be returned.
+     */
+    function limit(min, max, value) {
+        return Math.min(Math.max(value, min), max);
+    }
 
     let uniqueIdCounter = 0;
     /**
@@ -8797,6 +8816,22 @@
       return isNodeMatchingSelectorTabbable(options, node);
     };
 
+    var focusableCandidateSelector = /* #__PURE__ */candidateSelectors.concat('iframe').join(',');
+
+    var isFocusable = function isFocusable(node, options) {
+      options = options || {};
+
+      if (!node) {
+        throw new Error('No node provided');
+      }
+
+      if (matches.call(node, focusableCandidateSelector) === false) {
+        return false;
+      }
+
+      return isNodeMatchingSelectorFocusable(options, node);
+    };
+
     /**
      * A Switch Custom HTML Element.
      * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#dialog | ARIA dialog }.
@@ -11434,6 +11469,272 @@
     </template>
 `;
 
+    /**
+     * The template for the {@link @microsoft/fast-foundation#(Toolbar:class)} component.
+     *
+     * @public
+     */
+    const toolbarTemplate = (context, definition) => html `
+    <template
+        aria-label="${x => x.ariaLabel}"
+        aria-labelledby="${x => x.ariaLabelledby}"
+        aria-orientation="${x => x.orientation}"
+        orientation="${x => x.orientation}"
+        role="toolbar"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+        @focusin="${(x, c) => x.focusinHandler(c.event)}"
+        @keydown="${(x, c) => x.keydownHandler(c.event)}"
+    >
+        <slot name="label"></slot>
+        <div class="positioning-region" part="positioning-region">
+            ${startSlotTemplate(context, definition)}
+            <slot
+                ${slotted({
+    filter: elements(),
+    property: "slottedItems",
+})}
+            ></slot>
+            ${endSlotTemplate(context, definition)}
+        </div>
+    </template>
+`;
+
+    /**
+     * A map for directionality derived from keyboard input strings,
+     * visual orientation, and text direction.
+     *
+     * @internal
+     */
+    const ToolbarArrowKeyMap = Object.freeze({
+        [ArrowKeys.ArrowUp]: {
+            [Orientation.vertical]: -1,
+        },
+        [ArrowKeys.ArrowDown]: {
+            [Orientation.vertical]: 1,
+        },
+        [ArrowKeys.ArrowLeft]: {
+            [Orientation.horizontal]: {
+                [Direction.ltr]: -1,
+                [Direction.rtl]: 1,
+            },
+        },
+        [ArrowKeys.ArrowRight]: {
+            [Orientation.horizontal]: {
+                [Direction.ltr]: 1,
+                [Direction.rtl]: -1,
+            },
+        },
+    });
+    /**
+     * A Toolbar Custom HTML Element.
+     * Implements the {@link https://w3c.github.io/aria-practices/#Toolbar|ARIA Toolbar}.
+     *
+     * @public
+     */
+    class Toolbar$1 extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            /**
+             * The internal index of the currently focused element.
+             *
+             * @internal
+             */
+            this._activeIndex = 0;
+            /**
+             * The text direction of the toolbar.
+             *
+             * @internal
+             */
+            this.direction = Direction.ltr;
+            /**
+             * The orientation of the toolbar.
+             *
+             * @public
+             * @remarks
+             * HTML Attribute: `orientation`
+             */
+            this.orientation = Orientation.horizontal;
+        }
+        /**
+         * The index of the currently focused element, clamped between 0 and the last element.
+         *
+         * @internal
+         */
+        get activeIndex() {
+            Observable.track(this, "activeIndex");
+            return this._activeIndex;
+        }
+        set activeIndex(value) {
+            if (this.$fastController.isConnected) {
+                this._activeIndex = limit(0, this.focusableElements.length - 1, value);
+                Observable.notify(this, "activeIndex");
+            }
+        }
+        slottedItemsChanged() {
+            if (this.$fastController.isConnected) {
+                this.reduceFocusableElements();
+            }
+        }
+        /**
+         * Set the activeIndex when a focusable element in the toolbar is clicked.
+         *
+         * @internal
+         */
+        clickHandler(e) {
+            var _a;
+            const activeIndex = (_a = this.focusableElements) === null || _a === void 0 ? void 0 : _a.indexOf(e.target);
+            if (activeIndex > -1 && this.activeIndex !== activeIndex) {
+                this.setFocusedElement(activeIndex);
+            }
+            return true;
+        }
+        /**
+         * @internal
+         */
+        connectedCallback() {
+            super.connectedCallback();
+            this.direction = getDirection(this);
+        }
+        /**
+         * When the toolbar receives focus, set the currently active element as focused.
+         *
+         * @internal
+         */
+        focusinHandler(e) {
+            const relatedTarget = e.relatedTarget;
+            if (!relatedTarget || this.contains(relatedTarget)) {
+                return;
+            }
+            this.setFocusedElement();
+        }
+        /**
+         * Determines a value that can be used to iterate a list with the arrow keys.
+         *
+         * @param this - An element with an orientation and direction
+         * @param key - The event key value
+         * @internal
+         */
+        getDirectionalIncrementer(key) {
+            var _a, _b, _c, _d, _e;
+            return ((_e = (_c = (_b = (_a = ToolbarArrowKeyMap[key]) === null || _a === void 0 ? void 0 : _a[this.orientation]) === null || _b === void 0 ? void 0 : _b[this.direction]) !== null && _c !== void 0 ? _c : (_d = ToolbarArrowKeyMap[key]) === null || _d === void 0 ? void 0 : _d[this.orientation]) !== null && _e !== void 0 ? _e : 0);
+        }
+        /**
+         * Handle keyboard events for the toolbar.
+         *
+         * @internal
+         */
+        keydownHandler(e) {
+            const key = e.key;
+            if (!(key in ArrowKeys) || e.defaultPrevented || e.shiftKey) {
+                return true;
+            }
+            const incrementer = this.getDirectionalIncrementer(key);
+            if (!incrementer) {
+                return !e.target.closest("[role=radiogroup]");
+            }
+            const nextIndex = this.activeIndex + incrementer;
+            if (this.focusableElements[nextIndex]) {
+                e.preventDefault();
+            }
+            this.setFocusedElement(nextIndex);
+            return true;
+        }
+        /**
+         * get all the slotted elements
+         * @internal
+         */
+        get allSlottedItems() {
+            return [
+                ...this.start.assignedElements(),
+                ...this.slottedItems,
+                ...this.end.assignedElements(),
+            ];
+        }
+        /**
+         * Prepare the slotted elements which can be focusable.
+         *
+         * @internal
+         */
+        reduceFocusableElements() {
+            this.focusableElements = this.allSlottedItems.reduce(Toolbar$1.reduceFocusableItems, []);
+            this.setFocusableElements();
+        }
+        /**
+         * Set the activeIndex and focus the corresponding control.
+         *
+         * @param activeIndex - The new index to set
+         * @internal
+         */
+        setFocusedElement(activeIndex = this.activeIndex) {
+            var _a;
+            this.activeIndex = activeIndex;
+            this.setFocusableElements();
+            (_a = this.focusableElements[this.activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        /**
+         * Reduce a collection to only its focusable elements.
+         *
+         * @param elements - Collection of elements to reduce
+         * @param element - The current element
+         *
+         * @internal
+         */
+        static reduceFocusableItems(elements, element) {
+            var _a, _b, _c, _d;
+            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) {
+                elements.push(element);
+                return elements;
+            }
+            if (element.childElementCount) {
+                return elements.concat(Array.from(element.children).reduce(Toolbar$1.reduceFocusableItems, []));
+            }
+            return elements;
+        }
+        /**
+         * @internal
+         */
+        setFocusableElements() {
+            if (this.$fastController.isConnected && this.focusableElements.length > 0) {
+                this.focusableElements.forEach((element, index) => {
+                    element.tabIndex = this.activeIndex === index ? 0 : -1;
+                });
+            }
+        }
+    }
+    __decorate$1([
+        observable
+    ], Toolbar$1.prototype, "direction", void 0);
+    __decorate$1([
+        attr
+    ], Toolbar$1.prototype, "orientation", void 0);
+    __decorate$1([
+        observable
+    ], Toolbar$1.prototype, "slottedItems", void 0);
+    __decorate$1([
+        observable
+    ], Toolbar$1.prototype, "slottedLabel", void 0);
+    /**
+     * Includes ARIA states and properties relating to the ARIA toolbar role
+     *
+     * @public
+     */
+    class DelegatesARIAToolbar {
+    }
+    __decorate$1([
+        attr({ attribute: "aria-labelledby" })
+    ], DelegatesARIAToolbar.prototype, "ariaLabelledby", void 0);
+    __decorate$1([
+        attr({ attribute: "aria-label" })
+    ], DelegatesARIAToolbar.prototype, "ariaLabel", void 0);
+    applyMixins(DelegatesARIAToolbar, ARIAGlobalStatesAndProperties);
+    applyMixins(Toolbar$1, StartEnd, DelegatesARIAToolbar);
+
     /**
      * The template for the {@link @microsoft/fast-foundation#(TreeItem:class)} component.
      * @public
@@ -12217,7 +12518,7 @@
 
     const template$4 = html `<slot></slot>`;
 
-    const styles$m = css `
+    const styles$n = css `
     :host {
         display: contents;
     }
@@ -12273,7 +12574,7 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$m,
+        styles: styles$n,
         template: template$4
     });
     DesignSystem.getOrCreate()
@@ -12518,7 +12819,7 @@
      */
     const themeBehavior = (lightStyle, darkStyleOrAlias, colorStyleOrAlias) => new ThemeStyleSheetBehavior(lightStyle, darkStyleOrAlias, colorStyleOrAlias);
 
-    const styles$l = css `
+    const styles$m = css `
     ${display('inline-block')}
 
     :host {
@@ -12581,7 +12882,7 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$l
+        styles: styles$m
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
@@ -13167,7 +13468,7 @@
      */
     const focusVisible = `:${focusVisible$1}`;
 
-    const styles$k = css `
+    const styles$l = css `
     ${display('inline-flex')}
 
     :host {
@@ -13247,7 +13548,7 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$k,
+        styles: styles$l,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
@@ -13278,7 +13579,7 @@
         ButtonAppearance["Block"] = "block";
     })(ButtonAppearance || (ButtonAppearance = {}));
 
-    const styles$j = css `
+    const styles$k = css `
     ${display('inline-flex')}
 
     :host {
@@ -13481,7 +13782,7 @@
             `));
 
     // prettier-ignore
-    const styles$i = styles$j
+    const styles$j = styles$k
         .withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
                 :host(.primary) .control {
                     box-shadow: 0px 0px 0px ${borderWidth} rgba(${actionRgbPartialColor}, 0.3) inset;
@@ -13601,14 +13902,14 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$i,
+        styles: styles$j,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
 
-    const styles$h = css `
+    const styles$i = css `
     ${display('inline-flex')}
 
     :host {
@@ -13726,7 +14027,7 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$h,
+        styles: styles$i,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
@@ -14811,7 +15112,7 @@
         slideOutOptions
     };
 
-    const styles$g = css `
+    const styles$h = css `
     ${display('block')}
 
     :host {
@@ -15118,7 +15419,7 @@
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
         template: dialogTemplate,
-        styles: styles$g
+        styles: styles$h
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -15128,7 +15429,7 @@
     </template
 `;
 
-    const styles$f = css `
+    const styles$g = css `
     ${display('inline-flex')}
 
     :host {
@@ -15175,7 +15476,7 @@
         const composedIcon = iconClass.compose({
             baseName,
             template: template$3,
-            styles: styles$f,
+            styles: styles$g,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -16743,7 +17044,7 @@
     }
     registerIcon('xmark-check-icon', XmarkCheckIcon);
 
-    const styles$e = css `
+    const styles$f = css `
     ${display('flex')}
 
     :host {
@@ -16822,11 +17123,11 @@
         baseName: 'listbox-option',
         baseClass: ListboxOption$1,
         template: listboxOptionTemplate,
-        styles: styles$e
+        styles: styles$f
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListboxOption());
 
-    const styles$d = css `
+    const styles$e = css `
     ${display('grid')}
 
     :host {
@@ -16878,11 +17179,11 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$d
+        styles: styles$e
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
-    const styles$c = css `
+    const styles$d = css `
     ${display('grid')}
 
     :host {
@@ -16959,11 +17260,11 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$c
+        styles: styles$d
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
 
-    const styles$b = css `
+    const styles$c = css `
     ${display('inline-block')}
 
     :host {
@@ -17089,7 +17390,7 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$b,
+        styles: styles$c,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -17098,7 +17399,7 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-    const styles$a = css `
+    const styles$b = css `
     ${display('inline-flex')}
 
     :host {
@@ -17271,12 +17572,12 @@
         baseName: 'select',
         baseClass: Select$1,
         template: selectTemplate,
-        styles: styles$a,
+        styles: styles$b,
         indicator: arrowExpanderDown16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-    const styles$9 = css `
+    const styles$a = css `
     ${display('inline-flex')}
 
     :host {
@@ -17489,11 +17790,11 @@
         baseClass: Switch$1,
         baseName: 'switch',
         template: template$2,
-        styles: styles$9
+        styles: styles$a
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-    const styles$8 = css `
+    const styles$9 = css `
     ${display('inline-flex')}
 
     :host {
@@ -17550,11 +17851,11 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$8
+        styles: styles$9
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-    const styles$7 = css `
+    const styles$8 = css `
     ${display('block')}
 
     :host {
@@ -17574,11 +17875,11 @@
         baseName: 'tab-panel',
         baseClass: TabPanel$1,
         template: tabPanelTemplate,
-        styles: styles$7
+        styles: styles$8
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
-    const styles$6 = css `
+    const styles$7 = css `
     ${display('grid')}
 
     :host {
@@ -17627,11 +17928,11 @@
         baseName: 'tabs',
         baseClass: Tabs$1,
         template: tabsTemplate,
-        styles: styles$6
+        styles: styles$7
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
 
-    const styles$5 = css `
+    const styles$6 = css `
     ${display('flex')}
 
     :host {
@@ -17666,7 +17967,7 @@
     const nimbleTabsToolbar = TabsToolbar.compose({
         baseName: 'tabs-toolbar',
         template: template$1,
-        styles: styles$5
+        styles: styles$6
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
 
@@ -17676,7 +17977,7 @@
         TextAreaAppearance["Block"] = "block";
     })(TextAreaAppearance || (TextAreaAppearance = {}));
 
-    const styles$4 = css `
+    const styles$5 = css `
     ${display('inline-flex')}
 
     :host {
@@ -17818,7 +18119,7 @@
         baseName: 'text-area',
         baseClass: TextArea$1,
         template: textAreaTemplate,
-        styles: styles$4,
+        styles: styles$5,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17835,7 +18136,7 @@
         TextFieldAppearance["Block"] = "block";
     })(TextFieldAppearance || (TextFieldAppearance = {}));
 
-    const styles$3 = css `
+    const styles$4 = css `
     ${display('inline-block')}
 
     :host {
@@ -18127,7 +18428,7 @@
         baseName: 'text-field',
         baseClass: TextField$1,
         template: textFieldTemplate,
-        styles: styles$3,
+        styles: styles$4,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -18148,8 +18449,8 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 
-    const styles$2 = css `
-    ${styles$j}
+    const styles$3 = css `
+    ${styles$k}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -18233,13 +18534,55 @@
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
         template,
-        styles: styles$2,
+        styles: styles$3,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToggleButton());
 
+    const styles$2 = css `
+    .positioning-region {
+        display: flex;
+        padding: ${smallPadding} ${standardPadding};
+        align-items: center;
+        gap: ${standardPadding};
+        background: ${applicationBackgroundColor};
+    }
+
+    slot[name='label'] {
+        display: none;
+    }
+
+    [part='start'] {
+        display: flex;
+        gap: ${standardPadding};
+        margin-right: auto;
+    }
+
+    [part='end'] {
+        display: flex;
+        gap: ${standardPadding};
+        margin-left: auto;
+    }
+`;
+
+    /**
+     * A nimble-styled Toolbar
+     */
+    class Toolbar extends Toolbar$1 {
+    }
+    const nimbleToolbar = Toolbar.compose({
+        baseName: 'toolbar',
+        baseClass: Toolbar$1,
+        template: toolbarTemplate,
+        styles: styles$2,
+        shadowOptions: {
+            delegatesFocus: true
+        }
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
+
     const groupSelectedAttribute = 'group-selected';
     var TreeViewSelectionMode;
     (function (TreeViewSelectionMode) {