@odx/foundation 1.0.0-beta.80 → 1.0.0-beta.82

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

@@ -1,3 +1,4 @@
+import { OdxTooltip } from '../main.js';
 import { OdxIconName } from '@odx/icons';
 import { PropertyValues, TemplateResult } from 'lit';
 import { OdxButton } from '../button/button.js';
@@ -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);
@@ -735,17 +735,13 @@ const _OdxCheckboxGroup = class _OdxCheckboxGroup extends CheckboxGroupFormContr
     super(...arguments);
     this.layout = CheckboxGroupLayout.VERTICAL;
     this.#handleSlotChange = () => {
-      for (const control of this.groupControls) {
-        control.addEventListener("change", this.#handleGroupControlChange);
-      }
+      this.groupControl?.removeEventListener("change", this.#handleGroupControlChange);
+      this.groupControl?.addEventListener("change", this.#handleGroupControlChange);
     };
     this.#handleGroupControlChange = (event) => {
-      if (!this.isControl(event.target)) return;
+      if (!this.isGroupControl(event.target)) return;
       event.stopImmediatePropagation();
       this.updateValue(event.target.checked ? this.controls.map((control) => control.value) : [], true);
-      for (const groupControl of this.childGroups.flatMap((group) => group.groupControls)) {
-        groupControl.checked = event.target.checked;
-      }
     };
   }
   static {
@@ -940,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);
@@ -967,6 +1002,7 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
   static {
     this.styles = unsafeCSS(styles$Z);
   }
+  #openPopovers;
   #positionUpdater;
   #observer;
   get options() {
@@ -981,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,
@@ -1009,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 {
@@ -1024,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();
@@ -1043,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 })
@@ -1072,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();
       }
@@ -1096,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);
@@ -1122,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);
       }
@@ -1244,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;
@@ -1293,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 ?? "";
@@ -1308,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>
@@ -2448,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() });
@@ -2480,7 +2531,8 @@ class OdxMenu extends PopoverHost {
       </odx-popover>
     `;
   }
-  #handleReferenceInteraction = () => {
+  #handleReferenceInteraction = (event) => {
+    this.updateReferenceElementFromEvent(event);
     this.togglePopover();
   };
   #handleClick = (event) => {
@@ -2494,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;
@@ -3217,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();
   }
@@ -3228,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,
@@ -3242,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>
     `;
@@ -3278,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);
@@ -4263,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 {
@@ -4291,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);
@@ -4303,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);
@@ -4327,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/control/checkbox-group-form-control.d.ts

@@ -6,11 +6,14 @@ export declare abstract class CheckboxGroupFormControl extends FormControl<strin
     private elements;
     protected get childGroups(): CheckboxGroupFormControl[];
     get controls(): CheckboxFormControl[];
-    get groupControls(): CheckboxFormControl[];
+    get selectedControls(): CheckboxFormControl[];
+    get groupControl(): CheckboxFormControl | null;
     value: string[];
     constructor();
+    protected firstUpdated(_changedProperties: PropertyValues): Promise<void>;
     toFormValue(): FormData;
     protected isControl(element: unknown): element is CheckboxFormControl;
+    protected isGroupControl(element: unknown): element is CheckboxFormControl;
     protected isControlChecked(control: CheckboxFormControl): boolean;
     protected updated(props: PropertyValues<this>): void;
     protected updateControls(updateFn: (control: CheckboxFormControl, index: number) => void): void;

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

@@ -4,13 +4,13 @@ export declare function forwardEvent(target: HTMLElement, eventInit?: EventInit)
 export declare function getElementFromEvent<T = HTMLElement>(event: Event, filterFn: (node: Element) => boolean): T;
 export declare function waitForAnimations(element?: Element | null, subtree?: boolean): Promise<Animation[]>;
 export declare function toAriaBooleanAttribute(value: boolean, removeOnFalse?: boolean): 'true' | 'false';
-export declare function toPx(value?: string | number | null): string | null;
+export declare function toPx(value?: number | null): string | null;
 export interface GetAssignedElementOptions {
     slot?: string;
     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

@@ -68,14 +68,13 @@ function toAriaBooleanAttribute(value, removeOnFalse = true) {
   return removeOnFalse && value === false ? null : String(value);
 }
 function toPx(value) {
-  const coercedValue = Number(value);
-  if (value == null || value === "" || Number.isNaN(coercedValue)) return null;
-  return `${round(coercedValue, 2)}px`;
+  if (value == null || Number.isNaN(value)) return null;
+  return `${round(value, 2)}px`;
 }
 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];
@@ -120,10 +119,10 @@ const CanBeDisabled = (superClass) => {
       this.ariaDisabled = toAriaBooleanAttribute(this.disabled);
       if (this.disabled) {
         this.tabIndex = -1;
-      } else if (this.#initialTabIndex !== void 0) {
-        this.tabIndex = this.#initialTabIndex;
-      } else {
+      } else if (this.#initialTabIndex === void 0) {
         this.removeAttribute("tabindex");
+      } else {
+        this.tabIndex = this.#initialTabIndex;
       }
     }
   }
@@ -244,7 +243,7 @@ class CheckboxFormControl extends FormControl {
     const newState = state ?? !currentState;
     if (this.disabled || this.readonly || newState === currentState) return;
     this.checked = newState;
-    if (!(emitEvent && this.emit("change"))) return;
+    if (!(emitEvent && this.emit("change", { bubbles: true }))) return;
     this.checked = currentState;
   }
   connectedCallback() {
@@ -272,16 +271,20 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
     super();
     this.value = [];
     this.#handleChangeEvent = (event) => {
-      const { target } = event;
-      if (!this.isControl(target)) return;
-      if (target.checked) {
-        this.updateValue([...this.value, target.value], true);
-        return;
+      if (this.isControl(event.target)) {
+        this.#handleControlChange(event);
+      }
+    };
+    this.#handleControlChange = (event) => {
+      if (!this.isControl(event.target)) return;
+      if (event.target.checked) {
+        this.updateValue([...this.value, event.target.value], true);
+      } else {
+        this.updateValue(
+          this.value.filter((value) => value !== event.target.value),
+          true
+        );
       }
-      this.updateValue(
-        this.value.filter((value) => value !== target.value),
-        true
-      );
     };
     if (!isServer) {
       this.addEventListener("change", this.#handleChangeEvent);
@@ -293,8 +296,15 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
   get controls() {
     return this.#findControls((element) => !element.hasAttribute(GROUP_CONTROL_SELECTOR)).concat(this.childGroups.flatMap((group) => group.controls));
   }
-  get groupControls() {
-    return this.#findControls((element) => element.hasAttribute(GROUP_CONTROL_SELECTOR));
+  get selectedControls() {
+    return this.controls.filter((control) => this.isControlChecked(control));
+  }
+  get groupControl() {
+    return this.#findControls((element) => element.hasAttribute(GROUP_CONTROL_SELECTOR))[0] ?? null;
+  }
+  async firstUpdated(_changedProperties) {
+    await 0;
+    this.value = this.controls.filter((control) => control.checked).map((control) => control.value);
   }
   toFormValue() {
     const formData = new FormData();
@@ -306,6 +316,9 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
   isControl(element) {
     return element instanceof CheckboxFormControl;
   }
+  isGroupControl(element) {
+    return this.isControl(element) && element.hasAttribute(GROUP_CONTROL_SELECTOR);
+  }
   isControlChecked(control) {
     return this.value.includes(control.value);
   }
@@ -315,10 +328,10 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
       this.updateControls((control) => {
         control.checked = this.isControlChecked(control);
       });
-      for (const groupControl of this.groupControls) {
-        if (groupControl instanceof CheckboxFormControl && "indeterminate" in groupControl) {
-          groupControl.indeterminate = this.value.length > 0 && this.value.length < this.controls.length;
-          groupControl.checked = this.controls.length > 0 && this.value.length === this.controls.length;
+      if (this.groupControl) {
+        this.groupControl.checked = this.controls.length > 0 && this.value.length === this.controls.length;
+        if ("indeterminate" in this.groupControl) {
+          this.groupControl.indeterminate = this.value.length > 0 && this.value.length < this.controls.length;
         }
       }
     }
@@ -343,13 +356,18 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
   }
   updateValue(value, dispatchEvent) {
     this.value = value;
+    for (const group of this.childGroups) {
+      const groupValue = this.value.filter((value2) => group.controls.some((control) => control.value === value2));
+      group.updateValue(groupValue, false);
+    }
     if (!dispatchEvent) return;
-    this.emit("change");
+    this.emit("change", { bubbles: true });
   }
-  #handleChangeEvent;
   #findControls(predicate) {
     return this.elements.filter((element) => this.isControl(element) && predicate(element));
   }
+  #handleChangeEvent;
+  #handleControlChange;
 };
 __decorateClass([
   queryAssignedElements({ flatten: true })

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.80",
+  "version": "1.0.0-beta.82",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",