@odx/foundation 1.0.0-beta.141 → 1.0.0-beta.143

package/dist/components/anchor-navigation/anchor-navigation.d.ts

@@ -9,11 +9,12 @@ declare global {
 declare const OdxAnchorNavigation_base: typeof CustomElement;
 export declare class OdxAnchorNavigation extends OdxAnchorNavigation_base {
     #private;
-    container?: string;
+    readonly activeItems: import('@preact/signals-core').ReadonlySignal<OdxNavigationItem[]>;
+    root: Document | Element;
+    rootMargin?: string;
+    threshold: number;
     vertical: boolean;
     constructor();
-    getItems(): OdxNavigationItem[];
-    connectedCallback(): void;
     disconnectedCallback(): void;
     protected render(): TemplateResult;
     protected updated(props: PropertyValues<this>): void;

package/dist/components/anchor-navigation/index.d.ts

@@ -1,2 +1 @@
 export * from './anchor-navigation.js';
-export * from './anchor-observer.js';

package/dist/components/toggle-button-group/toggle-button-group.d.ts

@@ -1,12 +1,12 @@
 import { RadioGroupFormControl } from '../../lib/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
-import { ToggleButtonSize, ToggleButtonVariant } from '../toggle-button/toggle-button.js';
+import { OdxToggleButton, ToggleButtonSize, ToggleButtonVariant } from '../toggle-button/toggle-button.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-toggle-button-group': OdxToggleButtonGroup;
     }
 }
-export declare class OdxToggleButtonGroup extends RadioGroupFormControl {
+export declare class OdxToggleButtonGroup extends RadioGroupFormControl<OdxToggleButton> {
     #private;
     block: boolean;
     size: ToggleButtonSize;
@@ -14,4 +14,5 @@ export declare class OdxToggleButtonGroup extends RadioGroupFormControl {
     constructor();
     protected render(): TemplateResult | string;
     protected updated(props: PropertyValues<this>): void;
+    protected isControl(element: unknown): element is OdxToggleButton;
 }

package/dist/components.js

@@ -1,5 +1,5 @@
 import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
-import { CustomElement, ExpandableItemManager, customElement, getAssignedElements, CanBeExpanded, InteractiveElement, getUniqueId, toAriaBooleanAttribute, Size, Variant, optionalAttr, getIdFromHref, getElementFromEvent, InteractiveLink, Shape, getAssignedElement, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, findClosestDocument, Placement, waitForAnimations, PopoverPlacementOptions, computePopoverPlacement, getKeyInfo, FormControl, ActiveDescendantsController, parseDate, toPx, forwardEvent, OptionControl, SharedResizeObserver, ProgressVariant, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberFormControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController, clickedOutside, supportsHover } from '@odx/foundation';
+import { CustomElement, ExpandableItemManager, customElement, getAssignedElements, CanBeExpanded, InteractiveElement, getUniqueId, toAriaBooleanAttribute, Size, Variant, optionalAttr, getIdFromHref, getElementFromEvent, Shape, InteractiveLink, getAssignedElement, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, findClosestDocument, Placement, waitForAnimations, PopoverPlacementOptions, computePopoverPlacement, getKeyInfo, FormControl, ActiveDescendantsController, parseDate, toPx, forwardEvent, OptionControl, SharedResizeObserver, ProgressVariant, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberFormControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController, clickedOutside, supportsHover } from '@odx/foundation';
 import { property, query, state } from 'lit/decorators.js';
 import { html, isServer, unsafeCSS, css, nothing } from 'lit';
 import { p as pick, e, d 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';
@@ -22,7 +22,7 @@ const _OdxAccordion = class _OdxAccordion extends CustomElement {
     customElement("odx-accordion", styles$1h)(_OdxAccordion);
   }
   getItems() {
-    return getAssignedElements(this.renderRoot, { selector: "odx-accordion-item", flatten: true });
+    return getAssignedElements(this.renderRoot, { selector: "odx-accordion-item" });
   }
   updated(props) {
     super.updated(props);
@@ -241,7 +241,7 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
     this.tooltip?.mountPopover(this.nativeElement);
     if (this.statusTimeout <= 0) return;
     clearTimeout(this.#statusTimeout);
-    this.#statusTimeout = setTimeout(() => {
+    this.#statusTimeout = globalThis.setTimeout(() => {
       this.done = false;
       this.isStatusMessageShown = false;
     }, timeoutDuration);
@@ -308,109 +308,95 @@ __decorateClass([
 ], _OdxNavigationItem.prototype, "selected", 2);
 let OdxNavigationItem = _OdxNavigationItem;
 
-const styles$1b = ":host{display:flex;gap:var(--odx-size-37);min-inline-size:180px}:host(:not([vertical])){align-items:center;border-block-end:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);padding-block:var(--odx-size-25) 0;padding-inline:var(--odx-size-50);::slotted(odx-navigation-item){margin-block-end:calc(-1 * var(--odx-border-width-thick));border-block-end:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);border-bottom-left-radius:0;border-bottom-right-radius:0}::slotted(odx-navigation-item[selected]){border-block-end-color:var(--odx-color-background-accent-rest)}::slotted(*:not(odx-navigation-item)){margin-inline:var(--odx-size-37)}}:host([vertical]){flex-direction:column;border-inline-start:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);padding-block:var(--odx-size-50);padding-inline:0 var(--odx-size-25);::slotted(odx-navigation-item){margin-inline-start:calc(-1 * var(--odx-border-width-thick));border-inline-start:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);border-top-left-radius:0;border-bottom-left-radius:0}::slotted(odx-navigation-item[selected]){border-inline-start-color:var(--odx-color-background-accent-rest)}::slotted(*:not(odx-navigation-item)){margin-inline:var(--odx-size-75)}}";
-
-class AnchorObserver {
-  constructor(root, options = {}) {
-    this.#intersectionState = signal({});
-    this.#anchorToTargetMap = /* @__PURE__ */ new WeakMap();
-    this.#anchors = signal([]);
-    this.activeAnchors = computed(() => this.#anchors.value.filter((anchor) => this.isAnchorActive(anchor)));
-    this.root = root;
-    this.#intersectionObserver = new IntersectionObserver(
-      (entries) => {
-        const state = this.#intersectionState.value;
-        for (const entry of entries) {
-          if (!entry.target.id) continue;
-          state[entry.target.id] = entry.isIntersecting;
-        }
-        this.#intersectionState.value = { ...state };
-      },
-      { root, threshold: options.threshold ?? 0.1 }
-    );
-  }
-  #intersectionObserver;
-  #intersectionState;
-  #anchorToTargetMap;
-  #anchors;
-  disconnect() {
-    this.#intersectionObserver?.disconnect();
-  }
-  isAnchorActive(anchor) {
-    const target = this.#anchorToTargetMap.get(anchor);
-    return !!(target && this.#intersectionState.value[target.id]);
-  }
-  updateAnchors(anchors = []) {
-    for (const anchor of anchors) {
-      if (!anchor.href) continue;
-      const targetId = getIdFromHref(anchor.href);
-      const target = targetId ? this.root.querySelector(`#${targetId}`) : null;
-      if (!target) continue;
-      this.#intersectionObserver?.observe(target);
-      this.#anchorToTargetMap.set(anchor, target);
-    }
-    this.#anchors.value = anchors;
-  }
-}
+const styles$1b = ":host{display:flex;gap:var(--odx-size-37);min-inline-size:180px}:host(:not([vertical])){align-items:center;margin-block-end:var(--odx-size-37);border-block-end:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);padding-block:var(--odx-size-37) 0;padding-inline:var(--odx-size-50);::slotted(odx-navigation-item){margin-block-end:calc(-1 * var(--odx-border-width-thick));border-block-end:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);border-bottom-left-radius:0;border-bottom-right-radius:0}::slotted(odx-navigation-item[selected]){border-block-end-color:var(--odx-color-background-accent-rest)}::slotted(*:not(odx-navigation-item)){margin-inline:var(--odx-size-37)}}:host([vertical]){flex-direction:column;border-inline-start:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);padding-block:var(--odx-size-50);padding-inline:0 var(--odx-size-37);::slotted(odx-navigation-item){margin-inline-start:calc(-1 * var(--odx-border-width-thick));border-inline-start:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);border-top-left-radius:0;border-bottom-left-radius:0}::slotted(odx-navigation-item[selected]){border-inline-start-color:var(--odx-color-background-accent-rest)}::slotted(*:not(odx-navigation-item)){margin-inline:var(--odx-size-75)}}";
 
 const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement) {
   constructor() {
     super();
+    this.#items = signal([]);
+    this.#intersectionState = signal({});
+    this.activeItems = computed(() => {
+      return this.#items.value.filter((item) => {
+        const id = getIdFromHref(item.href);
+        return id ? this.#intersectionState.value[id] : false;
+      });
+    });
+    this.root = document;
+    this.threshold = 0.5;
     this.vertical = false;
     this.#handleClick = (event) => {
-      const target = getElementFromEvent(event, (node) => node instanceof InteractiveLink);
-      if (!target) return;
-      const targetId = getIdFromHref(target.href);
-      if (!targetId) return;
+      const item = getElementFromEvent(event, (node) => node instanceof OdxNavigationItem);
+      if (!item) return;
+      const anchor = this.#findAnchor(item);
+      if (!anchor) return;
       event.preventDefault();
-      const root = (this.container ? document.querySelector(this.container) : document) ?? document;
-      root.querySelector(target.href)?.scrollIntoView();
+      anchor.scrollIntoView({ block: "start" });
+    };
+    this.#handleIntersection = (entries) => {
+      this.#intersectionState.value = entries.reduce((state, { target, isIntersecting }) => {
+        if (target.id) {
+          state[target.id] = isIntersecting;
+        }
+        return state;
+      }, {});
     };
     this.#handleSlotChange = () => {
-      this.#anchorObserver?.updateAnchors(this.getItems());
+      this.#items.value = getAssignedElements(this.renderRoot, { selector: OdxNavigationItem.tagName });
+      this.#observeAnchors();
     };
-    this.addEventListener("click", this.#handleClick);
+    if (!isServer) {
+      this.addEventListener("click", this.#handleClick);
+    }
   }
   static {
     customElement("odx-anchor-navigation", styles$1b)(_OdxAnchorNavigation);
   }
-  #anchorObserver;
-  getItems() {
-    return getAssignedElements(this.renderRoot, { selector: OdxNavigationItem.tagName, flatten: true });
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.#handleContainerChange();
-  }
+  #items;
+  #intersectionObserver;
+  #intersectionState;
   disconnectedCallback() {
-    this.#anchorObserver?.disconnect();
     super.disconnectedCallback();
+    this.#intersectionObserver?.disconnect();
   }
   render() {
     return html`<slot @slotchange=${this.#handleSlotChange}></slot>`;
   }
   updated(props) {
-    if (props.has("container")) {
-      this.#handleContainerChange();
+    if (props.has("root") || props.has("rootMargin") || props.has("threshold")) {
+      const options = { root: this.root, rootMargin: this.rootMargin, threshold: this.threshold };
+      this.#intersectionObserver?.disconnect();
+      this.#intersectionObserver = new IntersectionObserver(this.#handleIntersection, options);
+      this.#observeAnchors();
     }
-    for (const item of this.getItems()) {
-      item.selected = item.href === this.#anchorObserver?.activeAnchors.value?.[0]?.href;
+    for (const item of this.#items.value) {
+      item.selected = this.activeItems.value[0] === item;
       item.lineClamp = this.vertical ? 2 : 1;
     }
   }
-  #handleContainerChange() {
-    const root = (this.container ? document.querySelector(this.container) : document) ?? document;
-    if (root === this.#anchorObserver?.root) return;
-    this.#anchorObserver?.disconnect();
-    this.#anchorObserver = new AnchorObserver(root);
-    this.#anchorObserver?.updateAnchors(this.getItems());
+  #findAnchor(item) {
+    const id = getIdFromHref(item.href);
+    return id ? this.root.querySelector(`#${id}`) : null;
+  }
+  #observeAnchors() {
+    for (const item of this.#items.value) {
+      const anchor = this.#findAnchor(item);
+      if (!anchor) continue;
+      this.#intersectionObserver?.observe(anchor);
+    }
   }
   #handleClick;
+  #handleIntersection;
   #handleSlotChange;
 };
 __decorateClass([
-  property()
-], _OdxAnchorNavigation.prototype, "container", 2);
+  property({ attribute: false })
+], _OdxAnchorNavigation.prototype, "root", 2);
+__decorateClass([
+  property({ attribute: "root-margin" })
+], _OdxAnchorNavigation.prototype, "rootMargin", 2);
+__decorateClass([
+  property({ type: Number })
+], _OdxAnchorNavigation.prototype, "threshold", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
 ], _OdxAnchorNavigation.prototype, "vertical", 2);
@@ -556,7 +542,7 @@ class OdxBreadcrumbsItem extends CustomElement {
   }
   updated(props) {
     super.updated(props);
-    const linkElement = getAssignedElement(this.renderRoot, { selector: OdxLink.tagName, flatten: true }) || null;
+    const linkElement = getAssignedElement(this.renderRoot, { selector: OdxLink.tagName }) || null;
     if (!linkElement) return;
     linkElement.subtle = true;
     linkElement.strong = !this.nextElementSibling;
@@ -596,7 +582,7 @@ const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
     return index === 0 || index > items.length - this.max;
   }
   #updateContext() {
-    const itemElements = getAssignedElements(this.renderRoot, { selector: OdxBreadcrumbsItem.tagName, flatten: true });
+    const itemElements = getAssignedElements(this.renderRoot, { selector: OdxBreadcrumbsItem.tagName });
     for (const [index, item] of itemElements.entries()) {
       item.hidden = !this.#isItemVisible(item, index, itemElements);
     }
@@ -1256,7 +1242,7 @@ const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
     };
   }
   get options() {
-    return getAssignedElements(this.renderRoot, { selector: '[role="option"]', flatten: true });
+    return getAssignedElements(this.renderRoot, { selector: '[role="option"]' });
   }
   get control() {
     return getAssignedElement(this.renderRoot, { slot: "control" });
@@ -1405,7 +1391,7 @@ const _OdxFormField = class _OdxFormField extends CustomElement {
     customElement("odx-form-field", styles$U)(_OdxFormField);
   }
   getControl() {
-    return getAssignedElement(this.renderRoot, { slot: "control", flatten: true }) || null;
+    return getAssignedElement(this.renderRoot, { slot: "control" }) || null;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -1584,7 +1570,7 @@ const _OdxRelativeTime = class _OdxRelativeTime extends BaseFormat {
   #setupSyncInterval() {
     clearInterval(this.#syncInterval);
     if (typeof this.syncInterval !== "number") return;
-    this.#syncInterval = setInterval(() => this.requestUpdate(), Math.max(this.syncInterval, 1e3));
+    this.#syncInterval = globalThis.setInterval(() => this.requestUpdate(), Math.max(this.syncInterval, 1e3));
   }
 };
 __decorateClass([
@@ -1689,7 +1675,7 @@ class OdxHeader extends CustomElement {
     `;
   }
   #handleSlotChange = () => {
-    const titleElement = getAssignedElement(this.renderRoot, { selector: OdxTitle.tagName, flatten: true });
+    const titleElement = getAssignedElement(this.renderRoot, { selector: OdxTitle.tagName });
     if (!titleElement) return;
     titleElement.ariaLevel = "1";
     titleElement.role = "heading";
@@ -2283,7 +2269,7 @@ const _OdxList = class _OdxList extends CustomElement {
     customElement("odx-list", styles$H)(_OdxList);
   }
   getItems() {
-    return getAssignedElements(this.renderRoot, { selector: OdxListItem.tagName, flatten: true });
+    return getAssignedElements(this.renderRoot, { selector: OdxListItem.tagName });
   }
   connectedCallback() {
     super.connectedCallback();
@@ -2421,11 +2407,11 @@ const _OdxMainMenu = class _OdxMainMenu extends CustomElement {
     super();
     this.open = false;
     this.#handleSlotChange = () => {
-      for (const link of getAssignedElements(this.renderRoot, { selector: OdxLink.tagName, flatten: true })) {
+      for (const link of getAssignedElements(this.renderRoot, { selector: OdxLink.tagName })) {
         link.slot ||= "link-navigation";
         link.subtle = true;
       }
-      for (const item of getAssignedElements(this.renderRoot, { selector: OdxNavigationItem.tagName, flatten: true })) {
+      for (const item of getAssignedElements(this.renderRoot, { selector: OdxNavigationItem.tagName })) {
         item.size = NavigationItemSize.LG;
       }
     };
@@ -2491,7 +2477,10 @@ class OdxMainMenuButton extends CustomElement {
     `;
   }
   #handleClick = () => {
-    document.querySelector("odx-main-menu")?.showPopover();
+    for (const menu of Array.from(document.querySelectorAll("odx-main-menu"))) {
+      menu.togglePopover(true);
+      if (menu.open) return;
+    }
   };
 }
 
@@ -2647,6 +2636,7 @@ const ModalLayout = { MODAL: "modal", SIDESHEET: "sidesheet" };
       event,
       (node) => node.hasAttribute("odx-modal-toggle") && node.ariaBusy !== "true" && node.ariaDisabled !== "true"
     );
+    if (!source) return;
     const modalId = source?.getAttribute("odx-modal-toggle");
     const modal = modalId ? source.ownerDocument.getElementById(modalId) : source?.closest("odx-modal");
     if (!modal) return;
@@ -2783,7 +2773,7 @@ const _OdxNavigationItemGroup = class _OdxNavigationItemGroup extends CanBeExpan
     customElement("odx-navigation-item-group", styles$A)(_OdxNavigationItemGroup);
   }
   getItems() {
-    return getAssignedElements(this.renderRoot, { selector: OdxNavigationItem.tagName, flatten: true });
+    return getAssignedElements(this.renderRoot, { selector: OdxNavigationItem.tagName });
   }
   render() {
     const contentHidden = this.disabled || !this.expanded;
@@ -2796,15 +2786,17 @@ const _OdxNavigationItemGroup = class _OdxNavigationItemGroup extends CanBeExpan
       </odx-navigation-item>
       <odx-toggle-content ?hidden=${contentHidden} tabindex=${optionalAttr(contentHidden ? -1 : null)}>
         <div class="content odx-stack">
-          <slot @slotChange=${() => this.requestUpdate()}></slot>
+          <slot></slot>
         </div>
       </odx-toggle-content>
     `;
   }
   updated(props) {
     super.updated(props);
-    for (const item of this.getItems()) {
-      item.size = this.size;
+    if (props.has("size") && this.size != null) {
+      for (const item of this.getItems()) {
+        item.size = this.size;
+      }
     }
   }
 };
@@ -2897,7 +2889,7 @@ __decorateClass([
 ], _OdxPage.prototype, "layout", 2);
 let OdxPage = _OdxPage;
 
-const styles$x = ":host{display:grid;grid-template-areas:\"navigation header sidebar\" \"navigation content sidebar\" \"footer footer footer\";grid-template-rows:minmax(0,auto) minmax(0,1fr) minmax(0,auto);grid-template-columns:minmax(0,auto) minmax(0,100%) minmax(0,auto);justify-content:start;padding-inline:var(--odx-size-75);inline-size:100%;max-inline-size:var(--max-inline-size)}.header,.navigation,.sidebar{position:sticky;inset-block-start:var(--scroll-margin-block-start);z-index:98;background-color:var(--odx-color-background-base)}.navigation,.sidebar{--_size: calc(100dvh - var(--scroll-margin-block-start));inset-block-end:0;max-block-size:var(--_size);overflow:auto}.content{display:flex;flex-direction:column;grid-area:content;margin-block-end:var(--odx-size-150);padding-block:var(--odx-size-150)}.footer{grid-area:footer}.header{grid-area:header}.navigation{grid-area:navigation;padding:var(--odx-size-150);padding-inline-start:0}.sidebar{grid-area:sidebar;padding-inline-start:var(--odx-size-75)}";
+const styles$x = ":host{display:grid;grid-template-areas:\"navigation header sidebar\" \"navigation content sidebar\" \"footer footer footer\";grid-template-rows:minmax(0,auto) minmax(0,1fr) minmax(0,auto);grid-template-columns:minmax(0,auto) minmax(0,100%) minmax(0,auto);justify-content:start;padding-inline:var(--odx-size-75);inline-size:100%;max-inline-size:var(--max-inline-size)}.header,.navigation,.sidebar{position:sticky;inset-block-start:var(--scroll-margin-block-start);z-index:98;background-color:var(--odx-color-background-base)}.navigation,.sidebar{--_size: calc(100dvh - var(--scroll-margin-block-start));inset-block-end:0;max-block-size:var(--_size);overflow:auto}.content{display:flex;flex-direction:column;grid-area:content;padding-block:var(--odx-size-150)}.footer{grid-area:footer}.header{grid-area:header}.navigation{grid-area:navigation;padding:var(--odx-size-150);padding-inline-start:0}.sidebar{grid-area:sidebar;padding-inline-start:var(--odx-size-75)}";
 
 class OdxPageLayout extends CustomElement {
   static {
@@ -3298,7 +3290,7 @@ __decorateClass([
 ], _OdxRailNavigation.prototype, "size", 2);
 let OdxRailNavigation = _OdxRailNavigation;
 
-const styles$p = ":host{display:block;transition:var(--odx-transition-slow);min-inline-size:min(15ch,50dvw);max-inline-size:35ch}.input{inline-size:100%;min-inline-size:0}:host([collapsed]:not(:focus-within)){cursor:pointer;min-inline-size:0;max-inline-size:var(--odx-size-225);.input{gap:0;&::part(input){opacity:0}&:after{background-color:transparent}}}";
+const styles$p = ":host{display:block;transition:var(--odx-transition-default);min-inline-size:min(15ch,50dvw);max-inline-size:35ch}.input{inline-size:100%;min-inline-size:0}:host([collapsed]:not(:focus-within)){cursor:pointer;min-inline-size:0;max-inline-size:var(--odx-size-225);.input{gap:0;&::part(input){opacity:0}&:after{background-color:transparent}}}";
 
 const SearchBarBehavior = { INSTANT: "instant", SUBMIT: "submit" };
 class SearchEvent extends CustomEvent {
@@ -3942,7 +3934,7 @@ const _OdxSpinbox = class _OdxSpinbox extends FormControl {
     customElement("odx-spinbox", styles$h)(_OdxSpinbox);
   }
   get options() {
-    return getAssignedElements(this.renderRoot, { selector: '[role="option"]', flatten: true });
+    return getAssignedElements(this.renderRoot, { selector: '[role="option"]' });
   }
   clear() {
     this.value = "";
@@ -4163,7 +4155,7 @@ const _OdxTableRow = class _OdxTableRow extends CanBeDisabled(CustomElement) {
     customElement("odx-table-row", styles$b)(_OdxTableRow);
   }
   get checkboxCells() {
-    return getAssignedElements(this.renderRoot, { selector: OdxTableCheckboxCell.tagName, flatten: true });
+    return getAssignedElements(this.renderRoot, { selector: OdxTableCheckboxCell.tagName });
   }
   connectedCallback() {
     super.connectedCallback();
@@ -4501,11 +4493,19 @@ const _OdxToggleButtonGroup = class _OdxToggleButtonGroup extends RadioGroupForm
   }
   updated(props) {
     super.updated(props);
-    for (const control of this.getControls()) {
-      if (!(control instanceof OdxToggleButton)) continue;
-      control.size = this.size;
-      control.variant = this.variant;
+    if (props.has("size")) {
+      for (const control of this.getControls()) {
+        control.size = this.size;
+      }
     }
+    if (props.has("variant")) {
+      for (const control of this.getControls()) {
+        control.variant = this.variant;
+      }
+    }
+  }
+  isControl(element) {
+    return element instanceof OdxToggleButton;
   }
   #handleChange;
 };
@@ -4646,7 +4646,7 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
   onPopoverShow() {
     super.onPopoverShow?.();
     if (this.timeout <= 0) return;
-    this.#timeout = setTimeout(() => this.togglePopover(false), this.timeout);
+    this.#timeout = globalThis.setTimeout(() => this.togglePopover(false), this.timeout);
   }
   onBeforePopoverShow() {
     if (_OdxTooltip.currentInstance !== this) {
@@ -4719,7 +4719,7 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
       return;
     }
     const delay = shouldOpen ? this.delayIn : this.delayOut;
-    _OdxTooltip.#delayTimer = setTimeout(() => {
+    _OdxTooltip.#delayTimer = globalThis.setTimeout(() => {
       this.togglePopover(shouldOpen);
       _OdxTooltip.#delayTimer = void 0;
     }, delay);
@@ -4785,4 +4785,4 @@ class OdxVisuallyHidden extends CustomElement {
   }
 }
 
-export { AccordionIndicatorPosition, AccordionItemSize, AnchorObserver, AreaHeaderSize, AutoGridMode, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, DropdownPlacement, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HighlightVariant, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxAnchorNavigation, OdxAreaHeader, OdxAutoGrid, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxContentBox, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHeaderActions, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxModal, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStatus, OdxSwitch, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, TextSize, TextVariant, TitleSize, ToastVariant, ToggleButtonSize, ToggleButtonVariant, ToolbarSize, TooltipPlacement, TooltipSize, TooltipVariant, sliderContext, tableContext };
+export { AccordionIndicatorPosition, AccordionItemSize, AreaHeaderSize, AutoGridMode, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, DropdownPlacement, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HighlightVariant, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxAnchorNavigation, OdxAreaHeader, OdxAutoGrid, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxContentBox, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHeaderActions, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxModal, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStatus, OdxSwitch, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, TextSize, TextVariant, TitleSize, ToastVariant, ToggleButtonSize, ToggleButtonVariant, ToolbarSize, TooltipPlacement, TooltipSize, TooltipVariant, sliderContext, tableContext };

package/dist/lib/control/radio-group-form-control.d.ts

@@ -1,14 +1,14 @@
 import { PropertyValues } from 'lit';
 import { CheckboxFormControl } from './checkbox-form-control.js';
 import { FormControl } from './form-control.js';
-export declare class RadioGroupFormControl extends FormControl<string> {
+export declare class RadioGroupFormControl<Control extends CheckboxFormControl = CheckboxFormControl> extends FormControl<string> {
     #private;
     value: string;
     constructor();
-    getControls(): CheckboxFormControl[];
+    getControls(): Control[];
     connectedCallback(): void;
-    protected isControl(element: unknown): element is CheckboxFormControl;
-    protected isControlChecked(control: CheckboxFormControl): boolean;
+    protected isControl(element: unknown): element is Control;
+    protected isControlChecked(control: Control): boolean;
     protected willUpdate(changes: PropertyValues<this>): void;
-    protected updateControls(updateFn: (control: CheckboxFormControl, index: number) => void): void;
+    protected updateControls(updateFn: (control: Control, index: number) => void): void;
 }

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

@@ -4,7 +4,7 @@ export declare function parseDate(value: number | string | Date): Date | null;
 export declare function getIdFromHref(href: string): string | null;
 export declare function findClosestDocument(node: Node): Document | ShadowRoot;
 export declare function forwardEvent(target: HTMLElement, eventInit?: EventInit): EventListener;
-export declare function getElementFromEvent<T = HTMLElement>(event: Event, filterFn: (node: Element) => boolean): T;
+export declare function getElementFromEvent<T = HTMLElement>(event: Event, filterFn: (node: Element) => boolean): T | undefined;
 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?: number | null): string | null;

package/dist/main.js

@@ -6,7 +6,7 @@ import { getAssignedElements as getAssignedElements$1 } from '@odx/foundation';
 
 const name = "@odx/foundation";
 const displayName = "ODX Design System Foundation";
-const version = "1.0.0-beta.141";
+const version = "1.0.0-beta.143";
 const pkg = {
   name,
   displayName,
@@ -225,15 +225,17 @@ class CheckboxFormControl extends FormControl {
     this.role = null;
     this.checked = false;
     this.value = "";
-    this.#handleClick = ({ target }) => {
+    this.#handleClick = (event) => {
+      const target = event.target;
       if (LINK_SELECTORS.has(target.localName)) return;
       this.toggle(void 0, true);
     };
     this.#handleKeyboardEvent = (event) => {
+      const target = event.target;
       const key = getKeyInfo(event);
       if (!(key.enter || key.space)) return;
       event.preventDefault();
-      if (event.type === "keydown" || LINK_SELECTORS.has(event.target.localName)) return;
+      if (event.type === "keydown" || LINK_SELECTORS.has(target.localName)) return;
       this.toggle(void 0, true);
     };
     if (!isServer) {
@@ -585,7 +587,7 @@ class ListboxFormControl extends FormControl {
     }
   }
   get options() {
-    return getAssignedElements(this.renderRoot, { selector: '[role="option"]', flatten: true });
+    return getAssignedElements(this.renderRoot, { selector: '[role="option"]' });
   }
   get selectedOptions() {
     return this.options.filter((option) => option.selected);
@@ -912,21 +914,22 @@ class ExpandableItemManager {
       this.#host.addEventListener("click", this.#handleClick);
     }
   }
+  #handleClick = (event) => {
+    const item = getElementFromEvent(event, (node) => this.items.includes(node));
+    if (!(item && getElementFromEvent(event, (node) => node === item.getExpandControl()))) return;
+    event.stopPropagation();
+    item.toggle();
+  };
   #handleToggle = (event) => {
-    if (!event.target) return;
+    const target = event.target;
+    if (!target) return;
     event.stopPropagation();
     if (event.newState !== "open" || this.#host.multiple) return;
     for (const item of this.items) {
-      if (event.target === item) continue;
+      if (target === item) continue;
       item.toggle(false);
     }
   };
-  #handleClick = (event) => {
-    const item = getElementFromEvent(event, (node) => this.items.includes(node));
-    if (!(item && getElementFromEvent(event, (node) => node === item.getExpandControl()))) return;
-    event.stopPropagation();
-    item.toggle();
-  };
 }
 
 const optionalAttr = (value) => {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@odx/foundation",
   "displayName": "ODX Design System Foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.141",
+  "version": "1.0.0-beta.143",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -34,13 +34,13 @@
     "@wc-toolkit/cem-inheritance": "1.1.0",
     "@wc-toolkit/cem-validator": "1.0.3",
     "@wc-toolkit/module-path-resolver": "1.0.0",
-    "@wc-toolkit/type-parser": "1.0.3",
-    "es-toolkit": "1.39.3",
-    "stylelint": "16.20.0",
+    "@wc-toolkit/type-parser": "1.1.0",
+    "es-toolkit": "1.39.5",
+    "stylelint": "16.21.0",
     "stylelint-config-concentric-order": "5.2.1",
     "stylelint-config-standard": "38.0.0",
     "ts-lit-plugin": "2.0.2",
-    "vite": "6.3.5",
+    "vite": "7.0.0",
     "vite-plugin-dts": "4.5.4",
     "@odx/storybook-utils": "0.0.0",
     "@odx/typescript-config": "0.0.0"
@@ -79,8 +79,8 @@
   },
   "scripts": {
     "build": "vite build",
-    "dev:tsc": "tsc --build --noEmit --watch",
     "dev": "vite build --watch --mode=development",
+    "dev:tsc": "tsc --build tsconfig.lib.json --noEmit --watch",
     "lint": "biome lint lib i18n styles components",
     "generate:manifest": "cem analyze"
   }

package/dist/components/anchor-navigation/anchor-observer.d.ts

@@ -1,13 +0,0 @@
-import { InteractiveLink } from '../../lib/main.js';
-export interface AnchorObserverOptions {
-    threshold?: number;
-}
-export declare class AnchorObserver {
-    #private;
-    readonly root: Document | Element;
-    readonly activeAnchors: import('@preact/signals-core').ReadonlySignal<InteractiveLink[]>;
-    constructor(root: Document | Element, options?: AnchorObserverOptions);
-    disconnect(): void;
-    isAnchorActive(anchor: InteractiveLink): boolean;
-    updateAnchors(anchors?: InteractiveLink[]): void;
-}