@ni/nimble-components 8.2.0 → 8.4.0

package/dist/all-components-bundle.js

@@ -4730,6 +4730,18 @@
     applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
     applyMixins(Anchor, StartEnd, DelegatesARIALink);
 
+    /**
+     * The template for the {@link @microsoft/fast-foundation#(AnchoredRegion:class)} component.
+     * @public
+     */
+    const anchoredRegionTemplate = (context, definition) => html `
+    <template class="${x => (x.initialLayoutComplete ? "loaded" : "")}">
+        ${when(x => x.initialLayoutComplete, html `
+                <slot></slot>
+            `)}
+    </template>
+`;
+
     /**
      * a method to determine the current localization direction of the view
      * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
@@ -4836,7 +4848,7 @@
      *
      * @public
      */
-    class AnchoredRegion extends FoundationElement {
+    class AnchoredRegion$1 extends FoundationElement {
         constructor() {
             super(...arguments);
             /**
@@ -5022,10 +5034,10 @@
                 if (this.anchorElement === null || this.pendingPositioningUpdate) {
                     return;
                 }
-                AnchoredRegion.intersectionService.requestPosition(this, this.handleIntersection);
-                AnchoredRegion.intersectionService.requestPosition(this.anchorElement, this.handleIntersection);
+                AnchoredRegion$1.intersectionService.requestPosition(this, this.handleIntersection);
+                AnchoredRegion$1.intersectionService.requestPosition(this.anchorElement, this.handleIntersection);
                 if (this.viewportElement !== null) {
-                    AnchoredRegion.intersectionService.requestPosition(this.viewportElement, this.handleIntersection);
+                    AnchoredRegion$1.intersectionService.requestPosition(this.viewportElement, this.handleIntersection);
                 }
                 this.pendingPositioningUpdate = true;
             };
@@ -5035,12 +5047,12 @@
             this.stopObservers = () => {
                 if (this.pendingPositioningUpdate) {
                     this.pendingPositioningUpdate = false;
-                    AnchoredRegion.intersectionService.cancelRequestPosition(this, this.handleIntersection);
+                    AnchoredRegion$1.intersectionService.cancelRequestPosition(this, this.handleIntersection);
                     if (this.anchorElement !== null) {
-                        AnchoredRegion.intersectionService.cancelRequestPosition(this.anchorElement, this.handleIntersection);
+                        AnchoredRegion$1.intersectionService.cancelRequestPosition(this.anchorElement, this.handleIntersection);
                     }
                     if (this.viewportElement !== null) {
-                        AnchoredRegion.intersectionService.cancelRequestPosition(this.viewportElement, this.handleIntersection);
+                        AnchoredRegion$1.intersectionService.cancelRequestPosition(this.viewportElement, this.handleIntersection);
                     }
                 }
                 if (this.resizeDetector !== null) {
@@ -5723,64 +5735,64 @@
             this.updateRegionStyle();
         }
     }
-    AnchoredRegion.intersectionService = new IntersectionService();
+    AnchoredRegion$1.intersectionService = new IntersectionService();
     __decorate$1([
         attr
-    ], AnchoredRegion.prototype, "anchor", void 0);
+    ], AnchoredRegion$1.prototype, "anchor", void 0);
     __decorate$1([
         attr
-    ], AnchoredRegion.prototype, "viewport", void 0);
+    ], AnchoredRegion$1.prototype, "viewport", void 0);
     __decorate$1([
         attr({ attribute: "horizontal-positioning-mode" })
-    ], AnchoredRegion.prototype, "horizontalPositioningMode", void 0);
+    ], AnchoredRegion$1.prototype, "horizontalPositioningMode", void 0);
     __decorate$1([
         attr({ attribute: "horizontal-default-position" })
-    ], AnchoredRegion.prototype, "horizontalDefaultPosition", void 0);
+    ], AnchoredRegion$1.prototype, "horizontalDefaultPosition", void 0);
     __decorate$1([
         attr({ attribute: "horizontal-viewport-lock", mode: "boolean" })
-    ], AnchoredRegion.prototype, "horizontalViewportLock", void 0);
+    ], AnchoredRegion$1.prototype, "horizontalViewportLock", void 0);
     __decorate$1([
         attr({ attribute: "horizontal-inset", mode: "boolean" })
-    ], AnchoredRegion.prototype, "horizontalInset", void 0);
+    ], AnchoredRegion$1.prototype, "horizontalInset", void 0);
     __decorate$1([
         attr({ attribute: "horizontal-threshold" })
-    ], AnchoredRegion.prototype, "horizontalThreshold", void 0);
+    ], AnchoredRegion$1.prototype, "horizontalThreshold", void 0);
     __decorate$1([
         attr({ attribute: "horizontal-scaling" })
-    ], AnchoredRegion.prototype, "horizontalScaling", void 0);
+    ], AnchoredRegion$1.prototype, "horizontalScaling", void 0);
     __decorate$1([
         attr({ attribute: "vertical-positioning-mode" })
-    ], AnchoredRegion.prototype, "verticalPositioningMode", void 0);
+    ], AnchoredRegion$1.prototype, "verticalPositioningMode", void 0);
     __decorate$1([
         attr({ attribute: "vertical-default-position" })
-    ], AnchoredRegion.prototype, "verticalDefaultPosition", void 0);
+    ], AnchoredRegion$1.prototype, "verticalDefaultPosition", void 0);
     __decorate$1([
         attr({ attribute: "vertical-viewport-lock", mode: "boolean" })
-    ], AnchoredRegion.prototype, "verticalViewportLock", void 0);
+    ], AnchoredRegion$1.prototype, "verticalViewportLock", void 0);
     __decorate$1([
         attr({ attribute: "vertical-inset", mode: "boolean" })
-    ], AnchoredRegion.prototype, "verticalInset", void 0);
+    ], AnchoredRegion$1.prototype, "verticalInset", void 0);
     __decorate$1([
         attr({ attribute: "vertical-threshold" })
-    ], AnchoredRegion.prototype, "verticalThreshold", void 0);
+    ], AnchoredRegion$1.prototype, "verticalThreshold", void 0);
     __decorate$1([
         attr({ attribute: "vertical-scaling" })
-    ], AnchoredRegion.prototype, "verticalScaling", void 0);
+    ], AnchoredRegion$1.prototype, "verticalScaling", void 0);
     __decorate$1([
         attr({ attribute: "fixed-placement", mode: "boolean" })
-    ], AnchoredRegion.prototype, "fixedPlacement", void 0);
+    ], AnchoredRegion$1.prototype, "fixedPlacement", void 0);
     __decorate$1([
         attr({ attribute: "auto-update-mode" })
-    ], AnchoredRegion.prototype, "autoUpdateMode", void 0);
+    ], AnchoredRegion$1.prototype, "autoUpdateMode", void 0);
     __decorate$1([
         observable
-    ], AnchoredRegion.prototype, "anchorElement", void 0);
+    ], AnchoredRegion$1.prototype, "anchorElement", void 0);
     __decorate$1([
         observable
-    ], AnchoredRegion.prototype, "viewportElement", void 0);
+    ], AnchoredRegion$1.prototype, "viewportElement", void 0);
     __decorate$1([
         observable
-    ], AnchoredRegion.prototype, "initialLayoutComplete", void 0);
+    ], AnchoredRegion$1.prototype, "initialLayoutComplete", void 0);
 
     /**
      * The template for the {@link @microsoft/fast-foundation#(BreadcrumbItem:class)} component.
@@ -9429,7 +9441,7 @@
                 </div>
             `)}
         ${when(x => x.expanded, html `
-                <${context.tagFor(AnchoredRegion)}
+                <${context.tagFor(AnchoredRegion$1)}
                     :anchorElement="${x => x}"
                     vertical-positioning-mode="dynamic"
                     vertical-default-position="bottom"
@@ -9443,7 +9455,7 @@
                     part="submenu-region"
                 >
                     <slot name="submenu"></slot>
-                </${context.tagFor(AnchoredRegion)}>
+                </${context.tagFor(AnchoredRegion$1)}>
             `)}
     </template>
 `;
@@ -12188,6 +12200,36 @@
         observable
     ], TreeView$1.prototype, "slottedTreeItems", void 0);
 
+    const styles$o = css `
+    :host {
+        contain: layout;
+        display: block;
+        z-index: 1000;
+    }
+`;
+
+    // When the anchor element changes position on the page, it is the client's responsibility to update the position
+    // of the anchored region by calling update() on the anchored region.
+    //
+    // When the anchor element is recreated on the page, it is the client's responsibility to reset the reference the
+    // anchored region has to the anchor element. This can be done by either recreating the anchor element with a new
+    // ID that is also set as the \`anchor\` attribute on the anchored region or by explicitly setting the value of
+    // anchorElement on the anchored region to the new anchor element.
+    /**
+     * A nimble-styled anchored region control.
+     */
+    class AnchoredRegion extends AnchoredRegion$1 {
+    }
+    const nimbleAnchoredRegion = AnchoredRegion.compose({
+        baseName: 'anchored-region',
+        baseClass: AnchoredRegion$1,
+        template: anchoredRegionTemplate,
+        styles: styles$o
+    });
+    DesignSystem.getOrCreate()
+        .withPrefix('nimble')
+        .register(nimbleAnchoredRegion());
+
     /**
      * Do not edit directly
      * Generated on Tue, 01 Mar 2022 15:26:47 GMT
@@ -12342,6 +12384,7 @@
         fillSelectedRgbPartialColor: 'fill-selected-rgb-partial-color',
         fillHoverSelectedColor: 'fill-hover-selected-color',
         fillHoverColor: 'fill-hover-color',
+        fillDownColor: 'fill-down-color',
         borderColor: 'border-color',
         borderRgbPartialColor: 'border-rgb-partial-color',
         failColor: 'fail-color',
@@ -12598,10 +12641,11 @@
     const applicationBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.applicationBackgroundColor)).withDefault((element) => getColorForTheme(element, White, Black85, ForestGreen));
     DesignToken.create(styleNameFromTokenName(tokenNames.headerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black7, Black80, ForestGreen));
     DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundColor)).withDefault((element) => getColorForTheme(element, Black30, Black91, ForestGreen));
-    const fillSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.3));
+    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)));
     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));
     const borderColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderColor)).withDefault((element) => getDefaultLineColorForTheme(element));
     const borderRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderRgbPartialColor)).withDefault((element) => hexToRgbPartial(getDefaultLineColorForTheme(element)));
     const failColor = DesignToken.create(styleNameFromTokenName(tokenNames.failColor)).withDefault((element) => getFailColorForTheme(element));
@@ -12714,6 +12758,9 @@
     function getFillHoverColorForTheme(element) {
         return getColorForTheme(element, Black91, Black15, White);
     }
+    function getFillDownColorForTheme(element) {
+        return getColorForTheme(element, Black91, Black15, White);
+    }
 
     /* eslint-disable max-classes-per-file */
     /**
@@ -13864,18 +13911,12 @@
         constructor() {
             super(...arguments);
             /**
-             * The appearance the button should have.
-             *
              * @public
              * @remarks
              * HTML Attribute: appearance
              */
             this.appearance = ButtonAppearance.Outline;
             /**
-             * Specify as 'true' to hide the text content of the button. The button will
-             * become square, and the text content will be used as the label of the button
-             * for accessibility purposes.
-             *
              * @public
              * @remarks
              * HTML Attribute: content-hidden
@@ -18506,14 +18547,38 @@
     <div
         role="button"
         part="control"
-        aria-pressed="${(x) => x.checked}"
-        aria-disabled="${(x) => x.disabled}"
-        aria-readonly="${(x) => x.readOnly}"
-        tabindex="${(x) => (x.disabled ? null : 0)}"
+        tabindex="${x => (x.disabled ? null : 0)}"
         @keypress="${(x, c) => x.keypressHandler(c.event)}"
         @click="${(x, c) => x.clickHandler(c.event)}"
-        class="control ${(x) => (x.checked ? 'checked' : '')}"
+        class="control ${x => (x.checked ? 'checked' : '')}"
         ?disabled="${x => x.disabled}"
+        ${'' /* Configure aria-disabled, aria-readonly, and aria-pressed based on the
+    toggle button's state to keep the ARIA attributes consistent with the component's
+    state without a client having to configure ARIA attributes directly */}
+        aria-disabled="${x => x.disabled}"
+        aria-readonly="${x => x.readOnly}"
+        aria-pressed="${x => x.checked}"
+        ${'' /* Configure all other ARIA attributes based on the aria attributes
+    configured on the toggle button */}
+        aria-atomic="${x => x.ariaAtomic}"
+        aria-busy="${x => x.ariaBusy}"
+        aria-controls="${x => x.ariaControls}"
+        aria-current="${x => x.ariaCurrent}"
+        aria-describedby="${x => x.ariaDescribedby}"
+        aria-details="${x => x.ariaDetails}"
+        aria-errormessage="${x => x.ariaErrormessage}"
+        aria-expanded="${x => x.ariaExpanded}"
+        aria-flowto="${x => x.ariaFlowto}"
+        aria-haspopup="${x => x.ariaHaspopup}"
+        aria-hidden="${x => x.ariaHidden}"
+        aria-invalid="${x => x.ariaInvalid}"
+        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+        aria-label="${x => x.ariaLabel}"
+        aria-labelledby="${x => x.ariaLabelledby}"
+        aria-live="${x => x.ariaLive}"
+        aria-owns="${x => x.ariaOwns}"
+        aria-relevant="${x => x.ariaRelevant}"
+        aria-roledescription="${x => x.ariaRoledescription}"
         ${ref('control')}
     >
         ${startSlotTemplate(context, definition)}
@@ -18531,18 +18596,12 @@
         constructor() {
             super(...arguments);
             /**
-             * The appearance the button should have.
-             *
              * @public
              * @remarks
              * HTML Attribute: appearance
              */
             this.appearance = ButtonAppearance.Outline;
             /**
-             * Specify as 'true' to hide the text content of the button. The button will
-             * become square, and the text content will be used as the label of the button
-             * for accessibility purposes.
-             *
              * @public
              * @remarks
              * HTML Attribute: content-hidden
@@ -18556,7 +18615,7 @@
     __decorate([
         attr({ attribute: 'content-hidden', mode: 'boolean' })
     ], ToggleButton.prototype, "contentHidden", void 0);
-    applyMixins(ToggleButton, StartEnd);
+    applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
         template,