@odx/foundation 1.0.0-beta.81 → 1.0.0-beta.83

package/dist/components/action-button/action-button.d.ts

@@ -1,6 +1,7 @@
 import { OdxIconName } from '@odx/icons';
 import { PropertyValues, TemplateResult } from 'lit';
 import { OdxButton } from '../button/button.js';
+import { OdxTooltip } from '../tooltip/tooltip.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-action-button': OdxActionButton;
@@ -8,6 +9,7 @@ declare global {
 }
 export declare class OdxActionButton extends OdxButton {
     #private;
+    protected tooltip?: OdxTooltip;
     /** @internal */
     protected isStatusMessageShown: boolean;
     done: boolean;
@@ -17,7 +19,6 @@ export declare class OdxActionButton extends OdxButton {
     statusTimeout: number;
     statusMessageTimeout: number;
     replaceContent: boolean;
-    connectedCallback(): void;
     protected firstUpdated(props: PropertyValues<this>): void;
     protected render(): TemplateResult;
     protected renderContent(): TemplateResult;

package/dist/components/dropdown/dropdown.d.ts

@@ -18,7 +18,7 @@ export declare class OdxDropdown extends PopoverHost {
     get options(): PopoverPlacementOptions;
     connectedCallback(): void;
     mountPopover(referenceElement: HTMLElement | null): void;
-    unmountPopover(referenceElement: HTMLElement): void;
+    unmountPopover(referenceElement: HTMLElement | null): void;
     protected render(): TemplateResult;
     protected willUpdate(props: PropertyValues<this>): void;
 }

package/dist/components/popover/popover-host.d.ts

@@ -1,11 +1,11 @@
 import { CanBeDisabled, CustomElement, Placement, PopoverPlacementOptions } from '../../lib/main.js';
+import { PropertyValues } from 'lit';
 import { OdxPopover } from './popover.js';
 declare const PopoverHost_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
-export declare class PopoverHost extends PopoverHost_base {
+export declare abstract class PopoverHost extends PopoverHost_base {
     #private;
     static readonly styles: import('lit').CSSResult;
-    private isOpen;
-    popoverElement: OdxPopover;
+    protected popoverElement: OdxPopover;
     referenceElement: HTMLElement | null;
     anchor: string;
     placement: Placement;
@@ -14,18 +14,21 @@ export declare class PopoverHost extends PopoverHost_base {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    hasMountedPopover(element: HTMLElement): boolean;
     mountPopover(referenceElement: HTMLElement | null): void;
-    unmountPopover(_referenceElement: HTMLElement): void;
+    unmountPopover(_referenceElement: HTMLElement | null): void;
     isPopoverOpen(): boolean;
     showPopover(): Promise<void>;
     hidePopover(): void;
     togglePopover(state?: boolean): boolean;
     canPopoverShow?(): boolean;
-    onBeforePopoverShow?(): void;
-    onPopoverShow?(): void;
-    onBeforePopoverHide?(): void;
-    onPopoverHide?(): void;
+    onBeforePopoverShow?(): Promise<void> | void;
+    onPopoverShow?(): Promise<void> | void;
     canPopoverHide?(): boolean;
+    onBeforePopoverHide?(): Promise<void> | void;
+    onPopoverHide?(): Promise<void> | void;
+    updateReferenceElementFromEvent(event: Event): void;
+    protected willUpdate(props: PropertyValues<this>): void;
 }
 export {};
 //# sourceMappingURL=popover-host.d.ts.map

package/dist/components/popover/popover-observer.d.ts

@@ -4,6 +4,7 @@ export declare class PopoverObserver {
     readonly host: PopoverHost;
     readonly root: ShadowRoot | Document;
     constructor(host: PopoverHost);
+    hasMountedPopover(element: HTMLElement): boolean;
     observe(): void;
     disconnect(): void;
     updateReferenceElements(): void;

package/dist/components/select/select.d.ts

@@ -10,9 +10,11 @@ declare global {
 export declare class OdxSelect extends ListboxFormControl<OptionControl> {
     #private;
     protected options: OdxOption[];
+    protected readonly trigger: HTMLElement;
     protected readonly dropdown: OdxDropdown;
     maxVisibleSelectedOptions: number;
     constructor();
+    firstUpdated(): void;
     isDropdownOpen(): boolean;
     showDropdown(): void;
     hideDropdown(): void;

package/dist/components.js

@@ -1,6 +1,6 @@
 import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
-import { CustomElement, ExpandableItemManager, customElement, CanBeExpanded, InteractiveElement, getUniqueId, toAriaBooleanAttribute, Size, Variant, optionalAttr, InteractiveLink, getElementFromEvent, Shape, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, SharedResizeObserver, Placement, waitForAnimations, PopoverPlacementOptions, computePopoverPlacement, findClosestDocument, getKeyInfo, FormControl, ActiveDescendantsController, getAssignedElement, parseDate, forwardEvent, OptionControl, toPx, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberFormControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation';
-import { queryAssignedElements, property, state, queryAll, query } from 'lit/decorators.js';
+import { CustomElement, ExpandableItemManager, customElement, CanBeExpanded, InteractiveElement, getUniqueId, toAriaBooleanAttribute, Size, Variant, optionalAttr, InteractiveLink, getElementFromEvent, Shape, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, SharedResizeObserver, findClosestDocument, Placement, waitForAnimations, PopoverPlacementOptions, computePopoverPlacement, getKeyInfo, FormControl, ActiveDescendantsController, getAssignedElement, parseDate, forwardEvent, OptionControl, toPx, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberFormControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation';
+import { queryAssignedElements, property, query, state, queryAll } from 'lit/decorators.js';
 import { html, isServer, unsafeCSS, css, nothing } from 'lit';
 import { when } from 'lit/directives/when.js';
 import { p as pick, e, a as autoUpdate, t as throttle, R as RovingTabindexController, r as round, g as debounce, n, i as c, j as e$1 } from './vendor.js';
@@ -187,10 +187,6 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
   }
   /** @internal */
   #statusTimeout;
-  connectedCallback() {
-    super.connectedCallback();
-    this.id ||= getUniqueId(this.localName);
-  }
   firstUpdated(props) {
     super.firstUpdated(props);
     this.nativeElement.addEventListener("click", this.#handleClick);
@@ -233,6 +229,7 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
   #handleDoneChange() {
     const timeoutDuration = Math.max(0, this.statusTimeout);
     this.isStatusMessageShown = true;
+    this.tooltip?.mountPopover(this.nativeElement);
     if (this.statusTimeout <= 0) return;
     clearTimeout(this.#statusTimeout);
     this.#statusTimeout = window.setTimeout(() => {
@@ -242,6 +239,9 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
   }
   #handleClick;
 };
+__decorateClass([
+  query("odx-tooltip")
+], _OdxActionButton.prototype, "tooltip", 2);
 __decorateClass([
   state()
 ], _OdxActionButton.prototype, "isStatusMessageShown", 2);
@@ -936,25 +936,64 @@ let OdxCircularProgressBar = _OdxCircularProgressBar;
 
 const styles$Z = "@layer base{:host{--max-block-size: 100%;--max-inline-size: 100%;--_popover-color-background: var(--odx-color-background-level-2);--_popover-color-foreground: var(--odx-color-foreground-rest);--_popover-min-block-size: inherit;--_popover-max-block-size: 100%;--_popover-min-inline-size: inherit;--_popover-max-inline-size: 100%;--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-size-50);--_popover-shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_popover-outer-padding: var(--odx-size-75);--_popover-arrow-size: var(--odx-size-50);--_popover-arrow-offset: calc(var(--_popover-offset) - var(--_popover-arrow-size) / 2);--_max-block-size: min(var(--_popover-max-block-size), var(--max-block-size));--_max-inline-size: min(var(--_popover-max-inline-size), var(--max-inline-size));top:var(--_popover-position-y);left:var(--_popover-position-x);transform:translate3d(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y),0);transition:opacity var(--_popover-transition),transform var(--_popover-transition) allow-discrete,overlay var(--_popover-transition) allow-discrete,display var(--_popover-transition) allow-discrete;opacity:0;margin:0;background-color:transparent;max-block-size:var(--_max-block-size);max-inline-size:var(--_max-inline-size)}:host(:not(:popover-open)){display:none}:host(:popover-open){display:flex;transform:translate(0);opacity:1;@starting-style{transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));opacity:0}}odx-popover::part(arrow){transform:rotate(45deg)}}@layer state{:host([popover-placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-1 * var(--_popover-offset));padding-block:var(--_popover-outer-padding) var(--_popover-offset);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){bottom:var(--_popover-arrow-offset)}}:host([popover-placement^=\"right\"]){--_popover-transition-offset-x: var(--_popover-offset);--_popover-transition-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding));odx-popover::part(arrow){left:var(--_popover-arrow-offset)}}:host([popover-placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: var(--_popover-offset);--_popover-arrow-offset-y: calc(var(--_popover-offset) - 6px);padding-block:var(--_popover-offset) var(--_popover-outer-padding);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){top:var(--_popover-arrow-offset)}}:host([popover-placement^=\"left\"]){--_popover-transition-offset-x: calc(-1 * var(--_popover-offset));--_popover-transition-offset-y: 0;--_popover-arrow-offset-x: calc(var(--_popover-offset) - var(--_arrow-size) / 2);--_popover-arrow-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding));odx-popover::part(arrow){right:var(--_popover-offset)}}}";
 
+const popoverTargetAttribute = "odx-popovertarget";
+class PopoverObserver {
+  #referenceElements = /* @__PURE__ */ new WeakMap();
+  #mutationObserver;
+  constructor(host) {
+    this.host = host;
+    this.root = findClosestDocument(host) ?? document;
+    this.#mutationObserver = new MutationObserver(async (mutations) => {
+      if (mutations.length === 0) return;
+      await 0;
+      this.updateReferenceElements();
+    });
+  }
+  hasMountedPopover(element) {
+    return this.#referenceElements.has(element);
+  }
+  observe() {
+    this.#mutationObserver?.observe(this.root, { attributes: true, subtree: true, childList: true, attributeFilter: [popoverTargetAttribute] });
+    this.updateReferenceElements();
+  }
+  disconnect() {
+    this.#mutationObserver?.disconnect();
+  }
+  updateReferenceElements() {
+    for (const element of Array.from(this.root.querySelectorAll(`[${popoverTargetAttribute}]`))) {
+      if (this.#referenceElements.has(element)) continue;
+      const popoverId = element.getAttribute(popoverTargetAttribute);
+      if (popoverId !== this.host.id) continue;
+      this.#referenceElements.set(element, popoverId);
+      this.host.mountPopover?.(element);
+    }
+  }
+}
+
 class PopoverHost extends CanBeDisabled(CustomElement) {
   constructor() {
     super();
-    this.isOpen = false;
+    this.#openPopovers = /* @__PURE__ */ new WeakSet();
     this.referenceElement = null;
     this.anchor = "";
     this.placement = Placement.BOTTOM;
     this.fpsLimit = 60;
     this.#handleToggle = async (event) => {
-      if (this.isOpen) {
-        this.onBeforePopoverShow?.();
+      if (this.isPopoverOpen()) {
+        await this.onBeforePopoverShow?.();
         await waitForAnimations(this);
-        this.onPopoverShow?.();
+        await this.onPopoverShow?.();
       } else {
-        this.onBeforePopoverHide?.();
+        await this.onBeforePopoverHide?.();
         await waitForAnimations(this);
-        this.onPopoverHide?.();
+        await this.onPopoverHide?.();
+      }
+      if (!this.referenceElement) return;
+      if (event.newState === "open") {
+        this.#openPopovers.add(this.referenceElement);
+      } else {
+        this.#openPopovers.delete(this.referenceElement);
       }
-      this.isOpen = event.newState === "open";
     };
     if (!isServer) {
       this.addEventListener("toggle", this.#handleToggle);
@@ -963,6 +1002,7 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
   static {
     this.styles = unsafeCSS(styles$Z);
   }
+  #openPopovers;
   #positionUpdater;
   #observer;
   get options() {
@@ -977,26 +1017,28 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
     super.disconnectedCallback();
     this.#disconnectObserver();
     if (!this.referenceElement) return;
-    this.unmountPopover(this.referenceElement);
+    this.unmountPopover?.(this.referenceElement);
+    this.hidePopover();
+  }
+  hasMountedPopover(element) {
+    return this.#observer?.hasMountedPopover(element) ?? false;
   }
   mountPopover(referenceElement) {
-    if (this.referenceElement && this.referenceElement !== referenceElement) {
-      this.unmountPopover(this.referenceElement);
-    }
-    this.referenceElement = referenceElement ?? null;
+    if (!referenceElement) return;
+    this.referenceElement = referenceElement;
   }
   unmountPopover(_referenceElement) {
-    this.hidePopover();
+    this.referenceElement = null;
   }
   isPopoverOpen() {
-    return this.isOpen;
+    return !!this.referenceElement && this.#openPopovers.has(this.referenceElement);
   }
   async showPopover() {
-    if (!this.referenceElement || this.isOpen || this.disabled || this.canPopoverShow?.() === false) return;
+    if (!this.referenceElement || this.disabled || this.canPopoverShow?.() === false) return;
     await 0;
     computePopoverPlacement(this.referenceElement, this, this.options);
     super.showPopover();
-    this.isOpen = true;
+    this.#openPopovers.add(this.referenceElement);
     this.#positionUpdater?.();
     this.#positionUpdater = autoUpdate(
       this.referenceElement,
@@ -1005,14 +1047,16 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
     );
   }
   hidePopover() {
-    if (!this.isOpen || this.canPopoverHide?.() === false) return;
+    if (!this.isPopoverOpen() || this.canPopoverHide?.() === false) return;
     this.#positionUpdater?.();
     super.hidePopover();
-    this.isOpen = false;
+    if (this.referenceElement) {
+      this.#openPopovers.delete(this.referenceElement);
+    }
     this.#positionUpdater = void 0;
   }
-  togglePopover(state2) {
-    const isOpen = state2 ?? !this.isPopoverOpen();
+  togglePopover(state) {
+    const isOpen = state ?? !this.isPopoverOpen();
     if (isOpen) {
       this.showPopover();
     } else {
@@ -1020,18 +1064,24 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
     }
     return isOpen;
   }
-  #findReferenceElement(anchor) {
-    return findClosestDocument(this)?.getElementById(anchor) ?? null;
+  updateReferenceElementFromEvent(event) {
+    const referenceElement = getElementFromEvent(event, (element) => this.hasMountedPopover(element));
+    if (!referenceElement) return;
+    this.referenceElement = getElementFromEvent(event, (element) => this.hasMountedPopover(element));
+  }
+  willUpdate(props) {
+    super.willUpdate(props);
+    if (props.has("referenceElement") && this.referenceElement !== props.get("referenceElement")) {
+      const previousReferenceElement = props.get("referenceElement");
+      if (previousReferenceElement) {
+        this.#openPopovers.delete(previousReferenceElement);
+      }
+    }
   }
   #connectObserver() {
     this.#disconnectObserver();
-    this.mountPopover(this.#findReferenceElement(this.anchor));
-    this.#observer = new MutationObserver(() => {
-      const referenceElement = this.anchor ? this.#findReferenceElement(this.anchor) : null;
-      if (this.referenceElement === referenceElement) return;
-      this.mountPopover(referenceElement);
-    });
-    this.#observer?.observe(document.documentElement, { subtree: true, attributeFilter: ["id", "anchor"] });
+    this.#observer = new PopoverObserver(this);
+    this.#observer?.observe();
   }
   #disconnectObserver() {
     this.#observer?.disconnect();
@@ -1039,14 +1089,11 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
   }
   #handleToggle;
 }
-__decorateClass([
-  state()
-], PopoverHost.prototype, "isOpen", 2);
 __decorateClass([
   query("odx-popover", true)
 ], PopoverHost.prototype, "popoverElement", 2);
 __decorateClass([
-  state()
+  property({ attribute: false })
 ], PopoverHost.prototype, "referenceElement", 2);
 __decorateClass([
   property({ reflect: true, useDefault: true })
@@ -1068,10 +1115,12 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
     this.placement = DropdownPlacement.BOTTOM;
     this.#handleClick = (event) => {
       if (event?.defaultPrevented) return;
+      this.updateReferenceElementFromEvent(event);
       this.togglePopover();
     };
     this.#handleKeyboardEvent = (event) => {
-      if (!getKeyInfo(event).enter || event.defaultPrevented) return;
+      const key = getKeyInfo(event);
+      if (!key.enter || event.defaultPrevented) return;
       if (!this.isPopoverOpen()) {
         event.stopImmediatePropagation();
       }
@@ -1092,14 +1141,15 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
     this.id ||= getUniqueId("odx-dropdown");
   }
   mountPopover(referenceElement) {
-    super.mountPopover(referenceElement);
+    super.mountPopover?.(referenceElement);
     if (this.disabled || !referenceElement) return;
     this.#updateAriaAttributes(referenceElement, this.id);
     referenceElement.addEventListener("click", this.#handleClick);
     referenceElement.addEventListener("keydown", this.#handleKeyboardEvent);
   }
   unmountPopover(referenceElement) {
-    super.unmountPopover(referenceElement);
+    super.unmountPopover?.(referenceElement);
+    if (!referenceElement) return;
     this.#updateAriaAttributes(referenceElement, null);
     referenceElement.removeEventListener("click", this.#handleClick);
     referenceElement.removeEventListener("keydown", this.#handleKeyboardEvent);
@@ -1118,7 +1168,7 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
     }
     if (props.has("disabled")) {
       if (this.disabled) {
-        this.referenceElement && this.unmountPopover(this.referenceElement);
+        this.unmountPopover(this.referenceElement);
       } else {
         this.mountPopover(this.referenceElement);
       }
@@ -1240,13 +1290,12 @@ const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
       if (!this.control) return;
       this.control.addEventListener("blur", this.#handleControlFocusOut);
       this.control.addEventListener("clear", this.#handleControlClear);
-      this.control.addEventListener("click", (event) => {
-        event.preventDefault();
-      });
+      this.control.addEventListener("click", (event) => event.preventDefault());
       this.control.addEventListener("focus", this.#handleControlFocusIn);
       this.control.addEventListener("input", this.#handleControlInput);
       this.control.addEventListener("keydown", this.#handleControlKeyboardEvent);
-      this.dropdown.referenceElement = this.control;
+      this.dropdown.popover = "manual";
+      this.dropdown.mountPopover(this.control);
     };
     this.#handleControlFocusIn = () => {
       if (this.dropdown.canPopoverShow?.() === false) return;
@@ -1289,7 +1338,7 @@ const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
     customElement("odx-autocomplete", styles$W)(_OdxAutocomplete);
   }
   get control() {
-    return getAssignedElement(this, { slot: "control" });
+    return getAssignedElement(this.shadowRoot, { slot: "control" });
   }
   get controlValue() {
     return this.control?.value ?? "";
@@ -1304,7 +1353,13 @@ const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
   render() {
     return html`
       <slot name="control" @slotchange=${this.#handleControlSlotChange}></slot>
-      <odx-dropdown part="dropdown" role="listbox" tabindex="-1" ?disabled=${this.disabled} match-reference-width .popover="${"manual"}">
+      <odx-dropdown
+        part="dropdown"
+        role="listbox"
+        tabindex="-1"
+        ?disabled=${this.disabled}
+        match-reference-width
+      >
         <odx-highlight minlength=${this.minQueryLength} selector="odx-option" subtle .root=${this}>
           <odx-stack gap="xs">
             <slot></slot>
@@ -2444,14 +2499,14 @@ class OdxMenu extends PopoverHost {
     this.role ||= "menu";
   }
   mountPopover(referenceElement) {
-    super.mountPopover(referenceElement);
+    super.mountPopover?.(referenceElement);
     referenceElement?.addEventListener("click", this.#handleReferenceInteraction);
     referenceElement?.addEventListener("keydown", this.#handleReferenceKeyDown);
   }
   unmountPopover(referenceElement) {
     referenceElement.removeEventListener("keydown", this.#handleReferenceKeyDown);
     referenceElement.removeEventListener("click", this.#handleReferenceInteraction);
-    super.unmountPopover(referenceElement);
+    super.unmountPopover?.(referenceElement);
   }
   onBeforePopoverShow() {
     this.#tabindexController.update({ elements: () => this.getItems() });
@@ -2476,7 +2531,8 @@ class OdxMenu extends PopoverHost {
       </odx-popover>
     `;
   }
-  #handleReferenceInteraction = () => {
+  #handleReferenceInteraction = (event) => {
+    this.updateReferenceElementFromEvent(event);
     this.togglePopover();
   };
   #handleClick = (event) => {
@@ -2490,16 +2546,10 @@ class OdxMenu extends PopoverHost {
   };
   #handleKeyDown = (event) => {
     const key = getKeyInfo(event);
-    if ((key.tab || key.backTab) && this.isPopoverOpen()) {
-      event?.preventDefault();
-      event.stopPropagation();
-      this.hidePopover();
-      return;
-    }
-    if (!(key.enter || key.space)) return;
-    const [activeItem] = this.getItems().filter((item) => item.tabIndex === 0);
-    if (!activeItem) return;
-    activeItem.click();
+    if (!(this.isPopoverOpen() && (key.tab || key.backTab))) return;
+    event?.preventDefault();
+    event.stopPropagation();
+    this.hidePopover();
   };
   #handleReferenceKeyDown = (event) => {
     if (!getKeyInfo(event).down) return;
@@ -3213,6 +3263,10 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
   static {
     customElement("odx-select", styles$o)(_OdxSelect);
   }
+  firstUpdated() {
+    const referenceElement = this.shadowRoot?.querySelector(".base") ?? null;
+    this.dropdown.mountPopover(referenceElement);
+  }
   isDropdownOpen() {
     return this.dropdown.isPopoverOpen();
   }
@@ -3224,7 +3278,7 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
   }
   render() {
     return html`
-      <div id="select-trigger" class="base" tabindex="0">
+      <div class="base" tabindex="0">
         <div class="value" odxPreventTextOverflow>
           ${when(
       this.selectedOptions.length,
@@ -3238,7 +3292,7 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
     )}
         <odx-icon class="indicator" name="core::chevron-down"></odx-icon>
       </div>
-      <odx-dropdown part="dropdown" anchor="select-trigger" role="listbox" tabindex="-1" ?disabled=${this.disabled || this.readonly} match-reference-width>
+      <odx-dropdown part="dropdown" role="listbox" tabindex="-1" ?disabled=${this.disabled || this.readonly} match-reference-width .referenceElement=${this.trigger}>
         <slot @slotchange=${this.#handleSlotChange}></slot>
       </odx-dropdown>
     `;
@@ -3274,6 +3328,9 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
 __decorateClass([
   queryAssignedElements({ selector: '[role="option"]', flatten: true })
 ], _OdxSelect.prototype, "options", 2);
+__decorateClass([
+  query(".base", true)
+], _OdxSelect.prototype, "trigger", 2);
 __decorateClass([
   query(OdxDropdown.tagName, true)
 ], _OdxSelect.prototype, "dropdown", 2);
@@ -4259,13 +4316,15 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
       if (event.relatedTarget === this) return;
       this.#handleMouseEvents(event);
     };
-    this.#handleMouseEvents = ({ type }) => {
-      if (type !== "mouseenter" && type !== "mouseleave") return;
-      this.togglePopover(type === "mouseenter");
+    this.#handleMouseEvents = (event) => {
+      if (event.type !== "mouseenter" && event.type !== "mouseleave") return;
+      this.updateReferenceElementFromEvent(event);
+      this.togglePopover(event.type === "mouseenter");
     };
-    this.#handleKeyboardFocus = ({ type, key }) => {
-      if (key !== "Tab") return;
-      this.togglePopover(type !== "keydown");
+    this.#handleKeyboardFocus = (event) => {
+      if (event.key !== "Tab") return;
+      this.updateReferenceElementFromEvent(event);
+      this.togglePopover(event.type !== "keydown");
     };
   }
   static {
@@ -4287,9 +4346,10 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
     clearTimeout(this.#timeout);
   }
   mountPopover(referenceElement) {
+    super.mountPopover?.(referenceElement);
     if (!referenceElement) return;
-    super.mountPopover(referenceElement);
     this.#updateAriaAttributes(referenceElement, this.id);
+    if (this.popover === "manual") return;
     this.addEventListener("mouseleave", this.#handleMouseEvents);
     referenceElement.addEventListener("mouseenter", this.#handleMouseEvents);
     referenceElement.addEventListener("mouseleave", this.#handleReferenceMouseLeave);
@@ -4299,7 +4359,7 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
     referenceElement.addEventListener("keydown", this.#handleKeyboardFocus);
   }
   unmountPopover(referenceElement) {
-    super.unmountPopover(referenceElement);
+    super.unmountPopover?.(referenceElement);
     this.#updateAriaAttributes(referenceElement, null);
     referenceElement.removeEventListener("keyup", this.#handleKeyboardFocus);
     referenceElement.removeEventListener("keydown", this.#handleKeyboardFocus);
@@ -4323,7 +4383,6 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
       this.#updateAriaAttributes(this.referenceElement, this.id);
     }
     if (props.has("show")) {
-      this.popover = this.show ? "manual" : "auto";
       this.togglePopover(this.show);
     }
   }

package/dist/lib/utils/dom.d.ts

@@ -10,7 +10,7 @@ export interface GetAssignedElementOptions {
     selector?: string;
     flatten?: boolean;
 }
-export declare function getAssignedElement<T = HTMLElement>(root: Element, options?: GetAssignedElementOptions): T | undefined;
+export declare function getAssignedElement<T = HTMLElement>(root: Element | ShadowRoot | null, options?: GetAssignedElementOptions): T | undefined;
 export declare function getKeyInfo(event: KeyboardEvent): {
     up: boolean;
     right: boolean;

package/dist/main.js

@@ -74,7 +74,7 @@ function toPx(value) {
 function getAssignedElement(root, options) {
   const { slot, selector } = options ?? {};
   const slotSelector = `slot${slot ? `[name=${slot}]` : ":not([name])"}`;
-  const slotEl = root.querySelector(slotSelector);
+  const slotEl = root?.querySelector(slotSelector);
   const elements = slotEl?.assignedElements(options) ?? [];
   if (selector == null) {
     return elements[0];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.81",
+  "version": "1.0.0-beta.83",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",