@ni/nimble-components 19.1.1 → 19.1.3

package/dist/all-components-bundle.js

@@ -8918,70 +8918,6 @@
     applyMixins(DelegatesARIACombobox, DelegatesARIAListbox);
     applyMixins(Combobox$1, StartEnd, DelegatesARIACombobox);
 
-    /**
-     * The template for the {@link @microsoft/fast-foundation#(Combobox:class)} component.
-     * @public
-     */
-    const comboboxTemplate = (context, definition) => html `
-    <template
-        aria-disabled="${x => x.ariaDisabled}"
-        autocomplete="${x => x.autocomplete}"
-        class="${x => (x.open ? "open" : "")} ${x => x.disabled ? "disabled" : ""} ${x => x.position}"
-        ?open="${x => x.open}"
-        tabindex="${x => (!x.disabled ? "0" : null)}"
-        @click="${(x, c) => x.clickHandler(c.event)}"
-        @focusout="${(x, c) => x.focusoutHandler(c.event)}"
-        @keydown="${(x, c) => x.keydownHandler(c.event)}"
-    >
-        <div class="control" part="control">
-            ${startSlotTemplate(context, definition)}
-            <slot name="control">
-                <input
-                    aria-activedescendant="${x => x.open ? x.ariaActiveDescendant : null}"
-                    aria-autocomplete="${x => x.ariaAutoComplete}"
-                    aria-controls="${x => x.ariaControls}"
-                    aria-disabled="${x => x.ariaDisabled}"
-                    aria-expanded="${x => x.ariaExpanded}"
-                    aria-haspopup="listbox"
-                    class="selected-value"
-                    part="selected-value"
-                    placeholder="${x => x.placeholder}"
-                    role="combobox"
-                    type="text"
-                    ?disabled="${x => x.disabled}"
-                    :value="${x => x.value}"
-                    @input="${(x, c) => x.inputHandler(c.event)}"
-                    @keyup="${(x, c) => x.keyupHandler(c.event)}"
-                    ${ref("control")}
-                />
-                <div class="indicator" part="indicator" aria-hidden="true">
-                    <slot name="indicator">
-                        ${definition.indicator || ""}
-                    </slot>
-                </div>
-            </slot>
-            ${endSlotTemplate(context, definition)}
-        </div>
-        <div
-            class="listbox"
-            id="${x => x.listboxId}"
-            part="listbox"
-            role="listbox"
-            ?disabled="${x => x.disabled}"
-            ?hidden="${x => !x.open}"
-            ${ref("listbox")}
-        >
-            <slot
-                ${slotted({
-    filter: Listbox.slottedOptionFilter,
-    flatten: true,
-    property: "slottedOptions",
-})}
-            ></slot>
-        </div>
-    </template>
-`;
-
     /**
      * Retrieves the "composed parent" element of a node, ignoring DOM tree boundaries.
      * When the parent of a node is a shadow-root, it will return the host
@@ -13065,76 +13001,6 @@
     applyMixins(DelegatesARIASelect, DelegatesARIAListbox);
     applyMixins(Select$1, StartEnd, DelegatesARIASelect);
 
-    /**
-     * The template for the {@link @microsoft/fast-foundation#(Select:class)} component.
-     * @public
-     */
-    const selectTemplate = (context, definition) => html `
-    <template
-        class="${x => [
-    x.collapsible && "collapsible",
-    x.collapsible && x.open && "open",
-    x.disabled && "disabled",
-    x.collapsible && x.position,
-]
-    .filter(Boolean)
-    .join(" ")}"
-        aria-activedescendant="${x => x.ariaActiveDescendant}"
-        aria-controls="${x => x.ariaControls}"
-        aria-disabled="${x => x.ariaDisabled}"
-        aria-expanded="${x => x.ariaExpanded}"
-        aria-haspopup="${x => (x.collapsible ? "listbox" : null)}"
-        aria-multiselectable="${x => x.ariaMultiSelectable}"
-        ?open="${x => x.open}"
-        role="combobox"
-        tabindex="${x => (!x.disabled ? "0" : null)}"
-        @click="${(x, c) => x.clickHandler(c.event)}"
-        @focusin="${(x, c) => x.focusinHandler(c.event)}"
-        @focusout="${(x, c) => x.focusoutHandler(c.event)}"
-        @keydown="${(x, c) => x.keydownHandler(c.event)}"
-        @mousedown="${(x, c) => x.mousedownHandler(c.event)}"
-    >
-        ${when(x => x.collapsible, html `
-                <div
-                    class="control"
-                    part="control"
-                    ?disabled="${x => x.disabled}"
-                    ${ref("control")}
-                >
-                    ${startSlotTemplate(context, definition)}
-                    <slot name="button-container">
-                        <div class="selected-value" part="selected-value">
-                            <slot name="selected-value">${x => x.displayValue}</slot>
-                        </div>
-                        <div aria-hidden="true" class="indicator" part="indicator">
-                            <slot name="indicator">
-                                ${definition.indicator || ""}
-                            </slot>
-                        </div>
-                    </slot>
-                    ${endSlotTemplate(context, definition)}
-                </div>
-            `)}
-        <div
-            class="listbox"
-            id="${x => x.listboxId}"
-            part="listbox"
-            role="listbox"
-            ?disabled="${x => x.disabled}"
-            ?hidden="${x => (x.collapsible ? !x.open : false)}"
-            ${ref("listbox")}
-        >
-            <slot
-                ${slotted({
-    filter: Listbox.slottedOptionFilter,
-    flatten: true,
-    property: "slottedOptions",
-})}
-            ></slot>
-        </div>
-    </template>
-`;
-
     class _Switch extends FoundationElement {
     }
     /**
@@ -16366,7 +16232,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Tue, 23 May 2023 15:51:05 GMT
+     * Generated on Thu, 01 Jun 2023 14:26:24 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -16737,7 +16603,7 @@
         return `${prefix}${uniqueIdCounter++}`;
     }
 
-    const template$s = html `<slot></slot>`;
+    const template$u = html `<slot></slot>`;
 
     const styles$P = css `
     :host {
@@ -16796,7 +16662,7 @@
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
         styles: styles$P,
-        template: template$s
+        template: template$u
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -17063,7 +16929,7 @@
 `;
 
     // prettier-ignore
-    const template$r = (context, definition) => html `
+    const template$t = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17137,7 +17003,7 @@
     const nimbleAnchor = Anchor.compose({
         baseName: 'anchor',
         baseClass: Anchor$1,
-        template: template$r,
+        template: template$t,
         styles: styles$O,
         shadowOptions: {
             delegatesFocus: true
@@ -17514,7 +17380,7 @@
     }
 `;
 
-    const template$q = (context, definition) => html `
+    const template$s = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17596,7 +17462,7 @@
     ], AnchorButton.prototype, "disabled", void 0);
     const nimbleAnchorButton = AnchorButton.compose({
         baseName: 'anchor-button',
-        template: template$q,
+        template: template$s,
         styles: styles$M,
         shadowOptions: {
             delegatesFocus: true
@@ -17682,7 +17548,7 @@
     }
 `;
 
-    const template$p = (context, definition) => html `
+    const template$r = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17788,7 +17654,7 @@
     // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
     const nimbleAnchorMenuItem = AnchorMenuItem.compose({
         baseName: 'anchor-menu-item',
-        template: template$p,
+        template: template$r,
         styles: styles$L,
         shadowOptions: {
             delegatesFocus: true
@@ -17938,7 +17804,7 @@
     }
 `;
 
-    const template$o = (context, definition) => html `
+    const template$q = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17991,7 +17857,7 @@
     // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
     const nimbleAnchorTab = AnchorTab.compose({
         baseName: 'anchor-tab',
-        template: template$o,
+        template: template$q,
         styles: styles$J
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
@@ -18015,7 +17881,7 @@
     }
 `;
 
-    const template$n = (context, definition) => html `
+    const template$p = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18212,7 +18078,7 @@
     applyMixins(AnchorTabs, StartEnd);
     const nimbleAnchorTabs = AnchorTabs.compose({
         baseName: 'anchor-tabs',
-        template: template$n,
+        template: template$p,
         styles: styles$I,
         shadowOptions: {
             delegatesFocus: false
@@ -18334,7 +18200,7 @@
     }
 `;
 
-    const template$m = (context, definition) => html `
+    const template$o = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18471,7 +18337,7 @@
     // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
     const nimbleAnchorTreeItem = AnchorTreeItem.compose({
         baseName: 'anchor-tree-item',
-        template: template$m,
+        template: template$o,
         styles: styles$H,
         shadowOptions: {
             delegatesFocus: true
@@ -19433,7 +19299,7 @@
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8.033 14.026 4.9 10.866 6.277 9.53l1.744 1.81 4.562-4.507 1.307 1.363Zm1.155-10.68-1.321-1.32-2.312 2.311-2.311-2.311-1.321 1.32 2.311 2.312L1.923 7.97l1.32 1.32 2.312-2.31 2.312 2.31 1.32-1.32-2.31-2.312Z"/></svg>`
     };
 
-    const template$l = html `
+    const template$n = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
@@ -19492,7 +19358,7 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$l,
+            template: template$n,
             styles: styles$D,
             baseClass: iconClass
         });
@@ -19559,7 +19425,7 @@
     };
 
     // prettier-ignore
-    const template$k = html `
+    const template$m = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19678,7 +19544,7 @@
     applyMixins(Banner, ARIAGlobalStatesAndProperties);
     const nimbleBanner = Banner.compose({
         baseName: 'banner',
-        template: template$k,
+        template: template$m,
         styles: styles$F
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
@@ -20133,7 +19999,7 @@
     }
 `;
 
-    const template$j = (context, definition) => html `
+    const template$l = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20208,7 +20074,7 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$j,
+        template: template$l,
         styles: styles$y,
         shadowOptions: {
             delegatesFocus: true
@@ -20235,6 +20101,10 @@
     registerIcon('icon-arrow-expander-down', IconArrowExpanderDown);
     const iconArrowExpanderDownTag = DesignSystem.tagFor(IconArrowExpanderDown);
 
+    const DropdownPosition = {
+        above: 'above',
+        below: 'below'
+    };
     const DropdownAppearance = {
         underline: 'underline',
         outline: 'outline',
@@ -20345,19 +20215,19 @@
         border-bottom-color: ${failColor};
     }
 
+    .anchored-region[hidden] {
+        visibility: hidden;
+    }
+
     .listbox {
         box-sizing: border-box;
         display: inline-flex;
         flex-direction: column;
         left: 0;
         overflow-y: auto;
-        position: absolute;
         width: 100%;
         --ni-private-listbox-padding: ${smallPadding};
-        max-height: calc(
-            var(--ni-private-select-max-height) - 2 *
-                var(--ni-private-listbox-padding)
-        );
+        max-height: calc(var(--ni-private-select-max-height) - ${smallPadding});
         z-index: 1;
         box-shadow: ${elevation2BoxShadow};
         border: 1px solid ${popupBorderColor};
@@ -20370,10 +20240,6 @@
         padding: var(--ni-private-listbox-padding);
     }
 
-    .listbox[hidden] {
-        display: none;
-    }
-
     :host([open][position='above']) .listbox {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
@@ -20384,12 +20250,12 @@
         border-top-right-radius: 0;
     }
 
-    :host([open][position='above']) .listbox {
-        bottom: ${controlHeight};
+    :host([open][position='above']) .anchored-region {
+        padding-bottom: ${smallPadding};
     }
 
-    :host([open][position='below']) .listbox {
-        top: calc(${controlHeight} + ${smallPadding});
+    :host([open][position='below']) .anchored-region {
+        padding-top: ${smallPadding};
     }
 
     .selected-value {
@@ -20426,16 +20292,6 @@
         fill: ${bodyDisabledFontColor};
     }
 
-    slot[name='listbox'] {
-        display: none;
-        width: 100%;
-    }
-
-    :host([open]) slot[name='listbox'] {
-        display: flex;
-        position: absolute;
-    }
-
     .end {
         margin-inline-start: auto;
     }
@@ -20593,6 +20449,78 @@
             }
         `));
 
+    // prettier-ignore
+    const template$k = (context, definition) => html `
+    <template
+        aria-disabled="${x => x.ariaDisabled}"
+        autocomplete="${x => x.autocomplete}"
+        class="${x => (x.open ? 'open' : '')} ${x => (x.disabled ? 'disabled' : '')} ${x => x.position}"
+        ?open="${x => x.open}"
+        tabindex="${x => (!x.disabled ? '0' : null)}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+        @focusout="${(x, c) => x.focusoutHandler(c.event)}"
+        @keydown="${(x, c) => x.keydownHandler(c.event)}"
+    >
+        <div class="control" part="control" ${ref('controlWrapper')}>
+            ${startSlotTemplate(context, definition)}
+            <slot name="control">
+                <input
+                    aria-activedescendant="${x => (x.open ? x.ariaActiveDescendant : null)}"
+                    aria-autocomplete="${x => x.ariaAutoComplete}"
+                    aria-controls="${x => x.ariaControls}"
+                    aria-disabled="${x => x.ariaDisabled}"
+                    aria-expanded="${x => x.ariaExpanded}"
+                    aria-haspopup="listbox"
+                    class="selected-value"
+                    part="selected-value"
+                    placeholder="${x => x.placeholder}"
+                    role="combobox"
+                    type="text"
+                    ?disabled="${x => x.disabled}"
+                    :value="${x => x.value}"
+                    @input="${(x, c) => x.inputHandler(c.event)}"
+                    @keyup="${(x, c) => x.keyupHandler(c.event)}"
+                    ${ref('control')}
+                />
+                <div class="indicator" part="indicator" aria-hidden="true">
+                    <slot name="indicator">
+                        ${definition.indicator || ''}
+                    </slot>
+                </div>
+            </slot>
+            ${endSlotTemplate(context, definition)}
+        </div>
+        <${anchoredRegionTag}
+            ${ref('region')}
+            class="anchored-region"
+            fixed-placement
+            auto-update-mode="auto"
+            vertical-default-position="${x => (x.positionAttribute === DropdownPosition.above ? 'top' : 'bottom')}"
+            vertical-positioning-mode="${x => (!x.positionAttribute ? 'dynamic' : 'locktodefault')}"
+            horizontal-default-position="center"
+            horizontal-positioning-mode="locktodefault"
+            horizontal-scaling="anchor"
+            ?hidden="${x => !x.open}">
+            <div
+                class="listbox"
+                id="${x => x.listboxId}"
+                part="listbox"
+                role="listbox"
+                ?disabled="${x => x.disabled}"
+                ${ref('listbox')}
+            >
+                <slot
+                    ${slotted({
+    filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n),
+    flatten: true,
+    property: 'slottedOptions',
+})}
+                ></slot>
+            </div>
+        </${anchoredRegionTag}>
+    </template>
+`;
+
     /**
      * A nimble-styed HTML combobox
      */
@@ -20603,6 +20531,25 @@
             this.errorVisible = false;
             this.valueUpdatedByInput = false;
         }
+        get value() {
+            return super.value;
+        }
+        // This override is to work around an issue in FAST where an old filter value
+        // is used after programmatically setting the value property.
+        // See: https://github.com/microsoft/fast/issues/6749
+        set value(next) {
+            super.value = next;
+            if (!this.valueUpdatedByInput) {
+                // Workaround using index notation to manipulate private member
+                // Can remove when following resolved: https://github.com/microsoft/fast/issues/6749
+                // eslint-disable-next-line @typescript-eslint/dot-notation
+                this['filter'] = '';
+                this.filterOptions();
+                this.selectedIndex = this.options
+                    .map(option => option.text)
+                    .indexOf(this.value);
+            }
+        }
         // Workaround for https://github.com/microsoft/fast/issues/5123
         setPositioning() {
             if (!this.$fastController.isConnected) {
@@ -20663,8 +20610,8 @@
             if (!this.valueUpdatedByInput) {
                 this.valueBeforeTextUpdate = this.value;
             }
-            this.value = this.control.value;
             this.valueUpdatedByInput = true;
+            this.value = this.control.value;
             return returnValue;
         }
         // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
@@ -20701,10 +20648,28 @@
                 this.dropdownButton.checked = this.open;
             }
         }
+        regionChanged(_prev, _next) {
+            if (this.region && this.controlWrapper) {
+                this.region.anchorElement = this.controlWrapper;
+            }
+        }
+        controlWrapperChanged(_prev, _next) {
+            if (this.region && this.controlWrapper) {
+                this.region.anchorElement = this.controlWrapper;
+            }
+        }
         // Workaround for https://github.com/microsoft/fast/issues/6041.
         ariaLabelChanged(_oldValue, _newValue) {
             this.updateInputAriaLabel();
         }
+        maxHeightChanged() {
+            this.updateListboxMaxHeightCssVariable();
+        }
+        updateListboxMaxHeightCssVariable() {
+            if (this.listbox) {
+                this.listbox.style.setProperty('--ni-private-select-max-height', `${this.maxHeight}px`);
+            }
+        }
         updateInputAriaLabel() {
             const inputElement = this.shadowRoot?.querySelector('.selected-value');
             if (this.ariaLabel) {
@@ -20745,10 +20710,16 @@
     __decorate$1([
         attr({ attribute: 'error-visible', mode: 'boolean' })
     ], Combobox.prototype, "errorVisible", void 0);
+    __decorate$1([
+        observable
+    ], Combobox.prototype, "region", void 0);
+    __decorate$1([
+        observable
+    ], Combobox.prototype, "controlWrapper", void 0);
     const nimbleCombobox = Combobox.compose({
         baseName: 'combobox',
         baseClass: Combobox$1,
-        template: comboboxTemplate,
+        template: template$k,
         styles: styles$v,
         shadowOptions: {
             delegatesFocus: true
@@ -20910,7 +20881,7 @@
             }
         `));
 
-    const template$i = html `
+    const template$j = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -21036,7 +21007,7 @@
     applyMixins(Dialog, ARIAGlobalStatesAndProperties);
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
-        template: template$i,
+        template: template$j,
         styles: styles$u,
         baseClass: Dialog
     });
@@ -21196,7 +21167,7 @@
             }
         `));
 
-    const template$h = html `
+    const template$i = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -21310,7 +21281,7 @@
     applyMixins(Drawer, ARIAGlobalStatesAndProperties);
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
-        template: template$h,
+        template: template$i,
         styles: styles$t
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
@@ -23328,7 +23299,7 @@
 `;
 
     // prettier-ignore
-    const template$g = html `
+    const template$h = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -23583,7 +23554,7 @@
     ], MenuButton.prototype, "slottedMenus", void 0);
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
-        template: template$g,
+        template: template$h,
         styles: styles$q,
         shadowOptions: {
             delegatesFocus: true
@@ -24142,6 +24113,84 @@
             }
         `));
 
+    // prettier-ignore
+    const template$g = (context, definition) => html `
+    <template
+        class="${x => [
+    x.collapsible && 'collapsible',
+    x.collapsible && x.open && 'open',
+    x.disabled && 'disabled',
+    x.collapsible && x.position,
+]
+    .filter(Boolean)
+    .join(' ')}"
+        aria-activedescendant="${x => x.ariaActiveDescendant}"
+        aria-controls="${x => x.ariaControls}"
+        aria-disabled="${x => x.ariaDisabled}"
+        aria-expanded="${x => x.ariaExpanded}"
+        aria-haspopup="${x => (x.collapsible ? 'listbox' : null)}"
+        aria-multiselectable="${x => x.ariaMultiSelectable}"
+        ?open="${x => x.open}"
+        role="combobox"
+        tabindex="${x => (!x.disabled ? '0' : null)}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+        @focusin="${(x, c) => x.focusinHandler(c.event)}"
+        @focusout="${(x, c) => x.focusoutHandler(c.event)}"
+        @keydown="${(x, c) => x.keydownHandler(c.event)}"
+        @mousedown="${(x, c) => x.mousedownHandler(c.event)}"
+    >
+        ${when(x => x.collapsible, html `
+                <div
+                    class="control"
+                    part="control"
+                    ?disabled="${x => x.disabled}"
+                    ${ref('control')}
+                >
+                    ${startSlotTemplate(context, definition)}
+                    <slot name="button-container">
+                        <div class="selected-value" part="selected-value">
+                            <slot name="selected-value">${x => x.displayValue}</slot>
+                        </div>
+                        <div aria-hidden="true" class="indicator" part="indicator">
+                            <slot name="indicator">
+                                ${definition.indicator || ''}
+                            </slot>
+                        </div>
+                    </slot>
+                    ${endSlotTemplate(context, definition)}
+                </div>
+                `)}
+        <${anchoredRegionTag}
+            ${ref('region')}
+            class="anchored-region"
+            fixed-placement
+            auto-update-mode="auto"
+            vertical-default-position="${x => (x.positionAttribute === DropdownPosition.above ? 'top' : 'bottom')}"
+            vertical-positioning-mode="${x => (!x.positionAttribute ? 'dynamic' : 'locktodefault')}"
+            horizontal-default-position="center"
+            horizontal-positioning-mode="locktodefault"
+            horizontal-scaling="anchor"
+            ?hidden="${x => (x.collapsible ? !x.open : false)}">
+            <div
+                class="listbox"
+                id="${x => x.listboxId}"
+                part="listbox"
+                role="listbox"
+                ?disabled="${x => x.disabled}"
+                ${ref('listbox')}
+            >
+                <slot
+                    ${slotted({
+    filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n),
+    flatten: true,
+    property: 'slottedOptions',
+})}
+                ></slot>
+            </div>
+        </${anchoredRegionTag}>
+    </template>
+`;
+
     /**
      * A nimble-styled HTML select
      */
@@ -24169,6 +24218,16 @@
                 this.value = value;
             }
         }
+        regionChanged(_prev, _next) {
+            if (this.region && this.control) {
+                this.region.anchorElement = this.control;
+            }
+        }
+        controlChanged(_prev, _next) {
+            if (this.region && this.control) {
+                this.region.anchorElement = this.control;
+            }
+        }
         maxHeightChanged() {
             this.updateListboxMaxHeightCssVariable();
         }
@@ -24187,10 +24246,13 @@
     __decorate$1([
         attr({ attribute: 'error-visible', mode: 'boolean' })
     ], Select.prototype, "errorVisible", void 0);
+    __decorate$1([
+        observable
+    ], Select.prototype, "region", void 0);
     const nimbleSelect = Select.compose({
         baseName: 'select',
         baseClass: Select$1,
-        template: selectTemplate,
+        template: template$g,
         styles: styles$l,
         indicator: arrowExpanderDown16X16.data,
         end: html `