@ni/nimble-components 8.2.1 → 8.5.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
@@ -18170,6 +18211,7 @@
         --ni-private-hover-bottom-border-width: 2px;
         border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
         border-bottom-width: var(--ni-private-bottom-border-width);
+        gap: calc(${standardPadding} / 2);
         padding-bottom: calc(
             var(--ni-private-hover-bottom-border-width) -
                 var(--ni-private-bottom-border-width)
@@ -18213,12 +18255,40 @@
         border-bottom-color: ${borderHoverColor};
     }
 
+    :host([appearance='frameless'].clear-inline-padding) .root {
+        padding-left: 0px;
+        padding-right: 0px;
+    }
+
+    .root::before {
+        ${ /* Empty string causes alignment issue */''}
+        content: ' ';
+        color: transparent;
+        width: 0px;
+        user-select: none;
+    }
+
+    :host([appearance='frameless'].clear-inline-padding) .root::before {
+        display: none;
+    }
+
+    .root::after {
+        ${ /* Empty string causes alignment issue */''}
+        content: ' ';
+        color: transparent;
+        width: 0px;
+        user-select: none;
+    }
+
+    :host([appearance='frameless'].clear-inline-padding) .root::after {
+        display: none;
+    }
+
     [part='start'] {
         display: contents;
     }
 
     slot[name='start']::slotted(*) {
-        margin-left: calc(${standardPadding} / 2);
         flex: none;
     }
 
@@ -18227,8 +18297,7 @@
         font: inherit;
         background: transparent;
         color: inherit;
-        padding-top: 0px;
-        padding-bottom: 0px;
+        padding: 0px;
         height: calc(
             ${controlHeight} - ${borderWidth} -
                 var(--ni-private-hover-bottom-border-width)
@@ -18236,8 +18305,6 @@
         width: 100%;
         margin-top: auto;
         margin-bottom: auto;
-        padding-left: calc(${standardPadding} / 2);
-        padding-right: calc(${standardPadding} / 2);
         border: none;
         text-overflow: ellipsis;
     }
@@ -18281,7 +18348,6 @@
     :host(.invalid) .error-content svg {
         height: ${iconSize};
         width: ${iconSize};
-        padding-right: 8px;
         flex: none;
     }
 
@@ -18322,7 +18388,6 @@
     }
 
     slot[name='actions']::slotted(*) {
-        margin-right: 8px;
         ${controlHeight.cssCustomProperty}: 24px;
     }
 `.withBehaviors(appearanceBehavior(TextFieldAppearance.Underline, css `
@@ -18555,18 +18620,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