@odx/foundation 1.0.0-beta.135 → 1.0.0-beta.136

package/dist/components/accordion/accordion.d.ts

@@ -12,12 +12,11 @@ export declare const AccordionIndicatorPosition: {
     readonly END: "end";
 };
 export declare class OdxAccordion extends CustomElement {
-    /** @internal */
-    items: OdxAccordionItem[];
     indicatorPosition: AccordionIndicatorPosition;
     multiple: boolean;
     size?: AccordionItemSize;
     constructor();
+    getItems(): OdxAccordionItem[];
     protected updated(props: PropertyValues<this>): void;
     toggleAll(state?: boolean, emitEvent?: boolean): void;
 }

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

@@ -1,5 +1,6 @@
 import { CustomElement } from '../../lib/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
+import { OdxNavigationItem } from '../navigation-item/navigation-item.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-anchor-navigation': OdxAnchorNavigation;
@@ -8,10 +9,10 @@ declare global {
 declare const OdxAnchorNavigation_base: typeof CustomElement;
 export declare class OdxAnchorNavigation extends OdxAnchorNavigation_base {
     #private;
-    private navigationItems;
     container?: string;
     vertical: boolean;
     constructor();
+    getItems(): OdxNavigationItem[];
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected render(): TemplateResult;

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -11,7 +11,6 @@ declare global {
 }
 export declare class OdxBreadcrumbs extends CustomElement {
     #private;
-    private itemElements;
     max: number;
     items?: BreadcrumbsItem[];
     protected firstUpdated(props: PropertyValues<this>): void;

package/dist/components/breadcrumbs-item/breadcrumbs-item.d.ts

@@ -1,14 +1,11 @@
 import { CustomElement } from '../../lib/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
-import { OdxLink } from '../link/link.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-breadcrumbs-item': OdxBreadcrumbsItem;
     }
 }
 export declare class OdxBreadcrumbsItem extends CustomElement {
-    private linkElements;
-    protected get interactiveElement(): OdxLink | null;
     protected render(): TemplateResult;
     protected updated(props: PropertyValues<this>): void;
 }

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

@@ -8,8 +8,6 @@ declare global {
 }
 declare const OdxButtonGroup_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
 export declare class OdxButtonGroup extends OdxButtonGroup_base {
-    #private;
-    private buttons;
     size: ButtonSize;
     variant: ButtonVariant;
     block: boolean;

package/dist/components/combobox/autocomplete.d.ts

@@ -12,7 +12,7 @@ export declare class OdxAutocomplete extends FormControl {
     /** @internal */
     static shadowRootOptions: ShadowRootInit;
     protected readonly activeDescendants: ActiveDescendantsController<OptionControl>;
-    protected options: OptionControl[];
+    protected get options(): OptionControl[];
     protected readonly highlight: OdxHighlight;
     protected readonly dropdown: OdxDropdown;
     minQueryLength: number;

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

@@ -15,7 +15,7 @@ export declare class OdxDropdown extends PopoverHost {
     #private;
     matchReferenceWidth: boolean;
     placement: DropdownPlacement;
-    get options(): PopoverPlacementOptions;
+    get popoverPlacementOptions(): PopoverPlacementOptions;
     connectedCallback(): void;
     mountPopover(referenceElement: HTMLElement | null): void;
     unmountPopover(referenceElement: HTMLElement): void;

package/dist/components/form-field/form-field.d.ts

@@ -8,8 +8,7 @@ declare global {
 export declare class OdxFormField extends CustomElement {
     #private;
     touched: boolean;
-    private controls;
-    get control(): FormControl | null;
+    getControl(): FormControl | null;
     connectedCallback(): void;
     protected render(): TemplateResult;
     protected renderErrorMessage(): TemplateResult;

package/dist/components/header/header.d.ts

@@ -7,7 +7,6 @@ declare global {
 }
 export declare class OdxHeader extends CustomElement {
     #private;
-    private titleElements;
     connectedCallback(): void;
     protected render(): TemplateResult;
 }

package/dist/components/list/list.d.ts

@@ -6,9 +6,9 @@ declare global {
     }
 }
 export declare class OdxList extends CustomElement {
-    items: OdxListItem[];
     multiple: boolean;
     constructor();
+    getItems(): OdxListItem[];
     connectedCallback(): void;
     toggleAll(state?: boolean, emitEvent?: boolean): void;
 }

package/dist/components/list-item/list-item.d.ts

@@ -8,7 +8,6 @@ declare global {
 declare const OdxListItem_base: import('../../lib/main.js').Constructor<CanBeExpanded> & typeof InteractiveElement;
 export declare class OdxListItem extends OdxListItem_base {
     #private;
-    private expandableItems;
     region?: HTMLElementTagNameMap['odx-toggle-content'];
     compact: boolean;
     interactive: boolean;

package/dist/components/main-menu/main-menu.d.ts

@@ -7,8 +7,6 @@ declare global {
 }
 export declare class OdxMainMenu extends CustomElement {
     #private;
-    private links;
-    private items;
     open: boolean;
     constructor();
     connectedCallback(): void;

package/dist/components/navigation-item-group/navigation-item-group.d.ts

@@ -8,7 +8,6 @@ declare global {
 }
 declare const OdxNavigationItemGroup_base: import('../../lib/main.js').Constructor<CanBeExpanded> & import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
 export declare class OdxNavigationItemGroup extends OdxNavigationItemGroup_base {
-    private items;
     label: string;
     loading: boolean;
     selected: boolean;

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

@@ -11,7 +11,7 @@ export declare class PopoverHost extends PopoverHost_base {
     get referenceElement(): HTMLElement | null;
     placement: Placement;
     fpsLimit: number;
-    get options(): PopoverPlacementOptions;
+    get popoverPlacementOptions(): PopoverPlacementOptions;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/components/progress-bar/progress-bar.d.ts

@@ -6,7 +6,6 @@ declare global {
     }
 }
 export declare class OdxProgressBar extends BaseProgress {
-    readonly content: HTMLElement[];
     condensed: boolean;
     protected render(): TemplateResult;
 }

package/dist/components/progress-ring/progress-ring.d.ts

@@ -23,7 +23,6 @@ export declare const ProgressRingSize: Pick<{
  * @csspart indicator - The indicator circle element
  */
 export declare class OdxProgressRing extends BaseProgress {
-    private readonly content;
     size: ProgressRingSize;
     stroke: number;
     firstUpdated(changes: PropertyValues<this>): void;

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

@@ -2,7 +2,6 @@ import { CustomElement } from '../../lib/main.js';
 import { IsLocalized } from '../../i18n/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
 import { NavigationItemSize, OdxNavigationItem } from '../navigation-item/navigation-item.js';
-import { OdxNavigationItemGroup } from '../navigation-item-group/navigation-item-group.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-rail-navigation': OdxRailNavigation;
@@ -11,7 +10,6 @@ declare global {
 declare const OdxRailNavigation_base: import('../../lib/main.js').Constructor<IsLocalized> & typeof CustomElement;
 export declare class OdxRailNavigation extends OdxRailNavigation_base {
     #private;
-    protected navigationItems: Array<OdxNavigationItem | OdxNavigationItemGroup>;
     collapsed: boolean;
     size: NavigationItemSize;
     protected render(): TemplateResult;

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

@@ -1,7 +1,6 @@
 import { ListboxFormControl, OptionControl } from '../../lib/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
 import { OdxDropdown } from '../dropdown/dropdown.js';
-import { OdxOption } from '../option/option.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-select': OdxSelect;
@@ -11,7 +10,6 @@ export declare class OdxSelect extends ListboxFormControl<OptionControl> {
     #private;
     /** @internal */
     static shadowRootOptions: ShadowRootInit;
-    protected options: OdxOption[];
     protected readonly dropdown: OdxDropdown;
     maxVisibleSelectedOptions: number;
     constructor();

package/dist/components/spinbox/spinbox.d.ts

@@ -7,7 +7,7 @@ declare global {
 }
 export declare class OdxSpinbox extends FormControl<string> {
     #private;
-    private options;
+    private get options();
     interactive: boolean;
     selectedIndex: number;
     value: string;

package/dist/components/table/table-row.d.ts

@@ -8,7 +8,7 @@ declare global {
 declare const OdxTableRow_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
 export declare class OdxTableRow extends OdxTableRow_base {
     #private;
-    private checkboxCells;
+    private get checkboxCells();
     selected: boolean;
     selectable: boolean;
     value: string;

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

@@ -1,4 +1,5 @@
 import { CheckboxFormControl, ValuesOf } from '../../lib/main.js';
+import { OdxIconName } from '@odx/icons';
 import { PropertyValues, TemplateResult } from 'lit';
 import { TooltipPlacement } from '../tooltip/tooltip.js';
 declare global {
@@ -29,11 +30,13 @@ export declare const ToggleButtonVariant: Pick<{
     readonly DANGER_SUBTLE: "danger-subtle";
     readonly DANGER_GHOST: "danger-ghost";
     readonly GHOST: "ghost";
-}, "NEUTRAL" | "GHOST">;
+}, "NEUTRAL" | "PRIMARY" | "GHOST">;
 export declare class OdxToggleButton extends CheckboxFormControl {
-    #private;
     label?: string;
+    labelChecked?: string;
     labelPlacement?: TooltipPlacement;
+    icon?: OdxIconName;
+    iconChecked?: OdxIconName;
     size: ToggleButtonSize;
     variant: ToggleButtonVariant;
     connectedCallback(): void;

package/dist/components/toolbar/toolbar.d.ts

@@ -16,7 +16,6 @@ export declare const ToolbarSize: Pick<{
 }, "SM" | "MD">;
 export declare class OdxToolbar extends CustomElement {
     #private;
-    private slottedElements;
     float: boolean;
     size: ToolbarSize;
     protected render(): TemplateResult;

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, getIdFromHref, getElementFromEvent, InteractiveLink, Shape, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, findClosestDocument, Placement, waitForAnimations, PopoverPlacementOptions, computePopoverPlacement, getKeyInfo, FormControl, ActiveDescendantsController, getAssignedElement, parseDate, toPx, forwardEvent, OptionControl, SharedResizeObserver, ProgressVariant, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberFormControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController, clickedOutside, supportsHover } from '@odx/foundation';
-import { queryAssignedElements, property, query, state } from 'lit/decorators.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 { 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';
 import { when } from 'lit/directives/when.js';
@@ -16,28 +16,28 @@ const _OdxAccordion = class _OdxAccordion extends CustomElement {
     super();
     this.indicatorPosition = AccordionIndicatorPosition.END;
     this.multiple = false;
-    new ExpandableItemManager(this, { getItems: () => this.items });
+    new ExpandableItemManager(this, { getItems: () => this.getItems() });
   }
   static {
     customElement("odx-accordion", styles$1h)(_OdxAccordion);
   }
+  getItems() {
+    return getAssignedElements(this.renderRoot, { selector: "odx-accordion-item", flatten: true });
+  }
   updated(props) {
     super.updated(props);
     if (props.has("size") && this.size != null) {
-      for (const item of this.items) {
+      for (const item of this.getItems()) {
         item.size = this.size;
       }
     }
   }
   toggleAll(state, emitEvent = false) {
-    for (const item of this.items) {
+    for (const item of this.getItems()) {
       item.toggle(state, emitEvent);
     }
   }
 };
-__decorateClass([
-  queryAssignedElements({ selector: "odx-accordion-item", flatten: true })
-], _OdxAccordion.prototype, "items", 2);
 __decorateClass([
   property({ reflect: true, useDefault: true, attribute: "indicator-position" })
 ], _OdxAccordion.prototype, "indicatorPosition", 2);
@@ -363,7 +363,7 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement)
       root.querySelector(target.href)?.scrollIntoView();
     };
     this.#handleSlotChange = () => {
-      this.#anchorObserver?.updateAnchors(this.navigationItems);
+      this.#anchorObserver?.updateAnchors(this.getItems());
     };
     this.addEventListener("click", this.#handleClick);
   }
@@ -371,6 +371,9 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement)
     customElement("odx-anchor-navigation", styles$1b)(_OdxAnchorNavigation);
   }
   #anchorObserver;
+  getItems() {
+    return getAssignedElements(this.renderRoot, { selector: OdxNavigationItem.tagName, flatten: true });
+  }
   connectedCallback() {
     super.connectedCallback();
     this.#handleContainerChange();
@@ -386,7 +389,7 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement)
     if (props.has("container")) {
       this.#handleContainerChange();
     }
-    for (const item of this.navigationItems) {
+    for (const item of this.getItems()) {
       item.selected = item.href === this.#anchorObserver?.activeAnchors.value?.[0]?.href;
       item.lineClamp = this.vertical ? 2 : 1;
     }
@@ -396,14 +399,11 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement)
     if (root === this.#anchorObserver?.root) return;
     this.#anchorObserver?.disconnect();
     this.#anchorObserver = new AnchorObserver(root);
-    this.#anchorObserver?.updateAnchors(this.navigationItems);
+    this.#anchorObserver?.updateAnchors(this.getItems());
   }
   #handleClick;
   #handleSlotChange;
 };
-__decorateClass([
-  queryAssignedElements({ selector: OdxNavigationItem.tagName, flatten: true })
-], _OdxAnchorNavigation.prototype, "navigationItems", 2);
 __decorateClass([
   property()
 ], _OdxAnchorNavigation.prototype, "container", 2);
@@ -540,32 +540,25 @@ let OdxLink = _OdxLink;
 
 const styles$15 = ":host{display:contents}.separator{--size: var(--odx-size-75);margin:var(--odx-size-37);color:var(--odx-color-foreground-rest-subtle)}:host([hidden]){display:none}:host([aria-current=\"page\"]) ::slotted(odx-link){color:var(--odx-color-foreground-rest-subtle)!important}::slotted(*){margin:0}";
 
-const _OdxBreadcrumbsItem = class _OdxBreadcrumbsItem extends CustomElement {
+class OdxBreadcrumbsItem extends CustomElement {
   static {
-    customElement("odx-breadcrumbs-item", styles$15)(_OdxBreadcrumbsItem);
-  }
-  get interactiveElement() {
-    return this.linkElements[0] ?? null;
+    customElement("odx-breadcrumbs-item", styles$15)(OdxBreadcrumbsItem);
   }
   render() {
     return html`
-      <slot></slot>
+      <slot @slotchange=${() => this.requestUpdate()}></slot>
       ${when(this.nextElementSibling, () => html`<odx-icon class="separator" name="chevron-right"></odx-icon>`)}
     `;
   }
   updated(props) {
     super.updated(props);
-    if (this.interactiveElement) {
-      this.interactiveElement.subtle = true;
-      this.interactiveElement.strong = !this.nextElementSibling;
-      this.interactiveElement.ariaCurrent = this.nextElementSibling ? null : "page";
-    }
+    const linkElement = getAssignedElement(this.renderRoot, { selector: OdxLink.tagName, flatten: true }) || null;
+    if (!linkElement) return;
+    linkElement.subtle = true;
+    linkElement.strong = !this.nextElementSibling;
+    linkElement.ariaCurrent = this.nextElementSibling ? null : "page";
   }
-};
-__decorateClass([
-  queryAssignedElements({ selector: OdxLink.tagName, flatten: true })
-], _OdxBreadcrumbsItem.prototype, "linkElements", 2);
-let OdxBreadcrumbsItem = _OdxBreadcrumbsItem;
+}
 
 const styles$14 = ":host{--_gap: var(--odx-size-37);display:flex;flex-wrap:wrap;column-gap:var(--_gap);place-items:center;cursor:default;padding-block:var(--odx-size-37);padding-inline:var(--odx-size-75);min-block-size:var(--odx-size-225)}odx-breadcrumb-item,::slotted(odx-breadcrumb-item){gap:var(--_gap)}";
 
@@ -599,8 +592,9 @@ const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
     return index === 0 || index > items.length - this.max;
   }
   #updateContext() {
-    for (const [index, item] of this.itemElements.entries()) {
-      item.hidden = !this.#isItemVisible(item, index, this.itemElements);
+    const itemElements = getAssignedElements(this.renderRoot, { selector: OdxBreadcrumbsItem.tagName, flatten: true });
+    for (const [index, item] of itemElements.entries()) {
+      item.hidden = !this.#isItemVisible(item, index, itemElements);
     }
     const renderedItemElements = this.renderRoot.querySelectorAll(OdxBreadcrumbsItem.tagName) ?? [];
     if (renderedItemElements.length === 0) return;
@@ -609,9 +603,6 @@ const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
     }
   }
 };
-__decorateClass([
-  queryAssignedElements({ selector: OdxBreadcrumbsItem.tagName, flatten: true })
-], _OdxBreadcrumbs.prototype, "itemElements", 2);
 __decorateClass([
   property({ type: Number })
 ], _OdxBreadcrumbs.prototype, "max", 2);
@@ -634,24 +625,17 @@ const _OdxButtonGroup = class _OdxButtonGroup extends CanBeDisabled(CustomElemen
     customElement("odx-button-group", styles$13)(_OdxButtonGroup);
   }
   render() {
-    return html`
-      <slot @slotchange=${() => this.requestUpdate()}></slot>
-    `;
+    return html`<slot @slotchange=${() => this.requestUpdate()}></slot>`;
   }
   updated(props) {
     super.updated(props);
-    this.#updateButtons();
-  }
-  #updateButtons() {
-    for (const button of this.buttons) {
+    for (const button of getAssignedElements(this.renderRoot, { selector: "[odx-button]" })) {
+      if (!(button instanceof OdxButton)) continue;
       button.size = this.size;
       button.variant = this.variant;
     }
   }
 };
-__decorateClass([
-  queryAssignedElements({ selector: "button, odx-button", flatten: true })
-], _OdxButtonGroup.prototype, "buttons", 2);
 __decorateClass([
   property({ reflect: true, useDefault: true })
 ], _OdxButtonGroup.prototype, "size", 2);
@@ -935,7 +919,7 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
   get referenceElement() {
     return this.#currentReferenceElement;
   }
-  get options() {
+  get popoverPlacementOptions() {
     return PopoverPlacementOptions({ arrowElement: this.popoverElement.arrowElement, placement: this.placement });
   }
   connectedCallback() {
@@ -971,7 +955,7 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
     this.#positionUpdater = autoUpdate(
       this.referenceElement,
       this,
-      throttle(() => this.referenceElement && computePopoverPlacement(this.referenceElement, this, this.options), 1e3 / this.fpsLimit)
+      throttle(() => this.referenceElement && computePopoverPlacement(this.referenceElement, this, this.popoverPlacementOptions), 1e3 / this.fpsLimit)
     );
   }
   hidePopover() {
@@ -1057,9 +1041,9 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
   static {
     customElement("odx-dropdown", styles$Z)(_OdxDropdown);
   }
-  get options() {
+  get popoverPlacementOptions() {
     return PopoverPlacementOptions({
-      ...super.options,
+      ...super.popoverPlacementOptions,
       matchReferenceWidth: this.matchReferenceWidth
     });
   }
@@ -1266,6 +1250,9 @@ const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
       delegatesFocus: true
     };
   }
+  get options() {
+    return getAssignedElements(this.renderRoot, { selector: '[role="option"]', flatten: true });
+  }
   get control() {
     return getAssignedElement(this.renderRoot, { slot: "control" });
   }
@@ -1333,9 +1320,6 @@ const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
   #handleControlInput;
   #handleControlKeyboardEvent;
 };
-__decorateClass([
-  queryAssignedElements({ selector: '[role="option"]', flatten: true })
-], _OdxAutocomplete.prototype, "options", 2);
 __decorateClass([
   query(OdxHighlight.tagName, true)
 ], _OdxAutocomplete.prototype, "highlight", 2);
@@ -1406,7 +1390,7 @@ const _OdxFormField = class _OdxFormField extends CustomElement {
     super(...arguments);
     this.touched = false;
     this.#handleSlotChange = () => {
-      this.control?.addEventListener("change", () => {
+      this.getControl()?.addEventListener("change", () => {
         this.touched = true;
         this.requestUpdate();
       });
@@ -1415,14 +1399,14 @@ const _OdxFormField = class _OdxFormField extends CustomElement {
   static {
     customElement("odx-form-field", styles$U)(_OdxFormField);
   }
-  get control() {
-    return this.controls[0] || null;
+  getControl() {
+    return getAssignedElement(this.renderRoot, { slot: "control", flatten: true }) || null;
   }
   connectedCallback() {
     super.connectedCallback();
   }
   render() {
-    const isValid = this.control?.checkValidity();
+    const isValid = this.getControl()?.checkValidity();
     return html`
       <label class="base">
         <slot @slotchange=${this.#handleSlotChange}></slot>
@@ -1434,7 +1418,7 @@ const _OdxFormField = class _OdxFormField extends CustomElement {
   renderErrorMessage() {
     return html`
       <odx-inline-message variant="danger">
-        ${this.control?.validationMessage}
+        ${this.getControl()?.validationMessage}
       </odx-inline-message>
     `;
   }
@@ -1443,9 +1427,6 @@ const _OdxFormField = class _OdxFormField extends CustomElement {
 __decorateClass([
   state()
 ], _OdxFormField.prototype, "touched", 2);
-__decorateClass([
-  queryAssignedElements({ slot: "control", flatten: true })
-], _OdxFormField.prototype, "controls", 2);
 let OdxFormField = _OdxFormField;
 
 class BaseFormat extends IsLocalized(CustomElement) {
@@ -1683,9 +1664,9 @@ let OdxTitle = _OdxTitle;
 
 const styles$R = ":host{display:block;position:relative}.base{display:flex;position:relative;gap:var(--odx-size-75);place-items:center;z-index:1;background-color:var(--odx-color-background-level-1);padding-inline:var(--odx-size-150);block-size:var(--odx-size-300)}.background{position:absolute;inset:0;z-index:0;box-shadow:0 0 0 100vmax var(--odx-color-background-level-1);background-color:var(--odx-color-background-level-1);clip-path:inset(0 -100vmax)}odx-logo{flex:0 0 auto}::slotted(odx-title){margin-right:auto}::slotted(odx-separator){--min-size: var(--odx-size-150);--margin-inline: 0}::slotted(odx-search-bar){flex:1 1 auto}@media screen and (width <= 600px){odx-logo{display:none}}";
 
-const _OdxHeader = class _OdxHeader extends CustomElement {
+class OdxHeader extends CustomElement {
   static {
-    customElement("odx-header", styles$R)(_OdxHeader);
+    customElement("odx-header", styles$R)(OdxHeader);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -1703,18 +1684,14 @@ const _OdxHeader = class _OdxHeader extends CustomElement {
     `;
   }
   #handleSlotChange = () => {
-    const [titleElement] = this.titleElements;
+    const titleElement = getAssignedElement(this.renderRoot, { selector: OdxTitle.tagName, flatten: true });
     if (!titleElement) return;
     titleElement.ariaLevel = "1";
     titleElement.role = "heading";
     titleElement.size = TitleSize.XS;
     titleElement.classList.add("odx-no-overflow");
   };
-};
-__decorateClass([
-  queryAssignedElements({ selector: OdxTitle.tagName, flatten: true })
-], _OdxHeader.prototype, "titleElements", 2);
-let OdxHeader = _OdxHeader;
+}
 
 const styles$Q = ":host{display:flex;gap:var(--odx-size-75);align-items:center;block-size:100%}::slotted(odx-separator){--min-size: var(--odx-size-150);--margin-inline: 0}";
 
@@ -2185,36 +2162,7 @@ __decorateClass([
 ], _OdxLineClamp.prototype, "max", 2);
 let OdxLineClamp = _OdxLineClamp;
 
-const styles$I = ":host{--item-indent-level: 0;display:block}::slotted([role=\"listitem\"]){--indent-level: var(--item-indent-level)}";
-
-const _OdxList = class _OdxList extends CustomElement {
-  constructor() {
-    super();
-    this.multiple = false;
-    new ExpandableItemManager(this, { getItems: () => this.items });
-  }
-  static {
-    customElement("odx-list", styles$I)(_OdxList);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "list";
-  }
-  toggleAll(state, emitEvent = false) {
-    for (const item of this.items) {
-      item.toggle(state, emitEvent);
-    }
-  }
-};
-__decorateClass([
-  queryAssignedElements({ selector: '[role="listitem"]', flatten: true })
-], _OdxList.prototype, "items", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxList.prototype, "multiple", 2);
-let OdxList = _OdxList;
-
-const styles$H = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-size-75);display:flex;flex-direction:column;place-items:initial;block-size:auto;max-inline-size:100%}[part~=base]{place-content:flex-start;z-index:1;outline-offset:calc(-1 * var(--odx-focus-ring-offset));padding-inline-start:calc(var(--odx-size-50) + var(--indent-level) * var(--odx-size-200));max-block-size:var(--_block-size);text-align:start;>*{--odx-focus-ring-offset: 0}}[part~=separator]{--margin-block: 0;--margin-inline: var(--odx-size-50)}[part~=expand-control]{margin-block:var(--_icon-margin)}[part~=expand-control]::part(icon){transition:var(--odx-transition-reduced)}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}:host(:last-of-type) [part~=separator]{opacity:0}}@layer variant{[part~=base]:has([part~=expand-control]:active){--_color-background-pressed: var(--_color-background-hover)}:host(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-size-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part~=expand-control]{--_icon-size: var(--odx-size-150)}[part~=base]{max-block-size:var(--_block-size)}}}@layer state{:host(:not([interactive]):hover):after{opacity:0}:host([interactive]:not([disabled])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected-hover);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}:host([expanded]){[part~=separator]{opacity:1}[part~=expand-control]{--icon-rotation: 180deg}}}";
+const styles$I = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-size-75);display:flex;flex-direction:column;place-items:initial;block-size:auto;max-inline-size:100%}[part~=base]{place-content:flex-start;z-index:1;outline-offset:calc(-1 * var(--odx-focus-ring-offset));padding-inline-start:calc(var(--odx-size-50) + var(--indent-level) * var(--odx-size-200));max-block-size:var(--_block-size);text-align:start;>*{--odx-focus-ring-offset: 0}}[part~=separator]{--margin-block: 0;--margin-inline: var(--odx-size-50)}[part~=expand-control]{margin-block:var(--_icon-margin)}[part~=expand-control]::part(icon){transition:var(--odx-transition-reduced)}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}:host(:last-of-type) [part~=separator]{opacity:0}}@layer variant{[part~=base]:has([part~=expand-control]:active){--_color-background-pressed: var(--_color-background-hover)}:host(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-size-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part~=expand-control]{--_icon-size: var(--odx-size-150)}[part~=base]{max-block-size:var(--_block-size)}}}@layer state{:host(:not([interactive]):hover):after{opacity:0}:host([interactive]:not([disabled])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected-hover);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}:host([expanded]){[part~=separator]{opacity:1}[part~=expand-control]{--icon-rotation: 180deg}}}";
 
 const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement) {
   constructor() {
@@ -2226,10 +2174,10 @@ const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement
     this.withExpandIndicator = false;
   }
   static {
-    customElement("odx-list-item", styles$H)(_OdxListItem);
+    customElement("odx-list-item", styles$I)(_OdxListItem);
   }
   isExpandable() {
-    return !(this.disabled || this.loading) && this.expandableItems.length > 0;
+    return !(this.disabled || this.loading) && !!getAssignedElement(this.renderRoot, { slot: "expand" });
   }
   getExpandControl() {
     if (!this.isExpandable()) return null;
@@ -2298,9 +2246,6 @@ const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement
     this.querySelector("odx-list")?.toggleAll(false);
   }
 };
-__decorateClass([
-  queryAssignedElements({ slot: "expand" })
-], _OdxListItem.prototype, "expandableItems", 2);
 __decorateClass([
   query("#list-item-content")
 ], _OdxListItem.prototype, "region", 2);
@@ -2321,6 +2266,35 @@ __decorateClass([
 ], _OdxListItem.prototype, "withExpandIndicator", 2);
 let OdxListItem = _OdxListItem;
 
+const styles$H = ":host{--item-indent-level: 0;display:block}::slotted(odx-list-item){--indent-level: var(--item-indent-level)}";
+
+const _OdxList = class _OdxList extends CustomElement {
+  constructor() {
+    super();
+    this.multiple = false;
+    new ExpandableItemManager(this, { getItems: () => this.getItems() });
+  }
+  static {
+    customElement("odx-list", styles$H)(_OdxList);
+  }
+  getItems() {
+    return getAssignedElements(this.renderRoot, { selector: OdxListItem.tagName, flatten: true });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.role = "list";
+  }
+  toggleAll(state, emitEvent = false) {
+    for (const item of this.getItems()) {
+      item.toggle?.(state, emitEvent);
+    }
+  }
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true, useDefault: true })
+], _OdxList.prototype, "multiple", 2);
+let OdxList = _OdxList;
+
 const styles$G = ":host{--_overlay-fill-color: var(--odx-color-backdrop, rgb(255 255 255 / 25%));display:contents;border-radius:inherit;overflow:hidden}[part~=overlay]{display:flex;position:absolute;inset:0;flex-direction:column;place-content:center;place-items:center;transition:var(--odx-transition-reduced) allow-discrete;visibility:hidden;opacity:0;border-radius:inherit;overflow:hidden;pointer-events:none}[part~=content]{min-inline-size:var(--odx-size-225);text-align:center}:host([loading]) [part~=overlay]{visibility:visible;opacity:1;z-index:9999;background-color:var(--_overlay-fill-color);pointer-events:all;backdrop-filter:blur(var(--odx-size-12))}";
 
 const LOADING_OVERLAY_HOST_DIRECTIVE = "odx-loading-overlay-host";
@@ -2442,11 +2416,11 @@ const _OdxMainMenu = class _OdxMainMenu extends CustomElement {
     super();
     this.open = false;
     this.#handleSlotChange = () => {
-      for (const link of this.links) {
+      for (const link of getAssignedElements(this.renderRoot, { selector: OdxLink.tagName, flatten: true })) {
         link.slot ||= "link-navigation";
         link.subtle = true;
       }
-      for (const item of this.items) {
+      for (const item of getAssignedElements(this.renderRoot, { selector: OdxNavigationItem.tagName, flatten: true })) {
         item.size = NavigationItemSize.LG;
       }
     };
@@ -2496,12 +2470,6 @@ const _OdxMainMenu = class _OdxMainMenu extends CustomElement {
   #handleSlotChange;
   #handleToggle;
 };
-__decorateClass([
-  queryAssignedElements({ selector: "odx-link", flatten: true })
-], _OdxMainMenu.prototype, "links", 2);
-__decorateClass([
-  queryAssignedElements({ selector: "odx-navigation-item", flatten: true })
-], _OdxMainMenu.prototype, "items", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
 ], _OdxMainMenu.prototype, "open", 2);
@@ -2810,7 +2778,7 @@ const _OdxNavigationItemGroup = class _OdxNavigationItemGroup extends CanBeExpan
     customElement("odx-navigation-item-group", styles$A)(_OdxNavigationItemGroup);
   }
   getItems() {
-    return this.items;
+    return getAssignedElements(this.renderRoot, { selector: OdxNavigationItem.tagName, flatten: true });
   }
   render() {
     const contentHidden = this.disabled || !this.expanded;
@@ -2823,23 +2791,18 @@ 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></slot>
+          <slot @slotChange=${() => this.requestUpdate()}></slot>
         </div>
       </odx-toggle-content>
     `;
   }
   updated(props) {
     super.updated(props);
-    if (props.has("size") && this.size != null) {
-      for (const item of this.items) {
-        item.size = this.size;
-      }
+    for (const item of this.getItems()) {
+      item.size = this.size;
     }
   }
 };
-__decorateClass([
-  queryAssignedElements({ selector: "odx-navigation-item" })
-], _OdxNavigationItemGroup.prototype, "items", 2);
 __decorateClass([
   property()
 ], _OdxNavigationItemGroup.prototype, "label", 2);
@@ -3131,9 +3094,6 @@ const _OdxProgressBar = class _OdxProgressBar extends BaseProgress {
     `;
   }
 };
-__decorateClass([
-  queryAssignedElements()
-], _OdxProgressBar.prototype, "content", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
 ], _OdxProgressBar.prototype, "condensed", 2);
@@ -3195,7 +3155,7 @@ const _OdxProgressRing = class _OdxProgressRing extends BaseProgress {
         </svg>
         <slot></slot>
         ${when(
-      this.content.length === 0 && !this.valueHidden,
+      getAssignedElement(this.renderRoot) && !this.valueHidden,
       () => html`
           <odx-text part="value" aria-hidden="true" size=${this.size}>
             ${valueText}
@@ -3217,9 +3177,6 @@ const _OdxProgressRing = class _OdxProgressRing extends BaseProgress {
     return normalizedStroke;
   }
 };
-__decorateClass([
-  queryAssignedElements({ flatten: true })
-], _OdxProgressRing.prototype, "content", 2);
 __decorateClass([
   property({ reflect: true, useDefault: true })
 ], _OdxProgressRing.prototype, "size", 2);
@@ -3296,7 +3253,7 @@ const _OdxRailNavigation = class _OdxRailNavigation extends IsLocalized(CustomEl
   }
   render() {
     return html`
-      <slot></slot>
+      <slot @slotchange=${() => this.requestUpdate()}></slot>
       <odx-navigation-item class="toggle-control" size=${this.size} @click=${this.#handleControlClick}>
         <odx-icon class="toggle-indicator" name="core::chevron-left" slot="prefix"></odx-icon>
         <odx-visually-hidden>
@@ -3306,7 +3263,10 @@ const _OdxRailNavigation = class _OdxRailNavigation extends IsLocalized(CustomEl
     `;
   }
   getItems() {
-    return this.navigationItems.flatMap((item) => {
+    return getAssignedElements(this.renderRoot, {
+      selector: `:is(${OdxNavigationItemGroup.tagName}, ${OdxNavigationItem.tagName})`,
+      flatten: true
+    }).flatMap((item) => {
       if (item instanceof OdxNavigationItemGroup) {
         return item.getItems();
       }
@@ -3315,15 +3275,12 @@ const _OdxRailNavigation = class _OdxRailNavigation extends IsLocalized(CustomEl
   }
   updated(props) {
     super.updated(props);
-    for (const item of this.navigationItems) {
+    for (const item of this.getItems()) {
       item.size = this.size;
     }
   }
   #handleControlClick;
 };
-__decorateClass([
-  queryAssignedElements({ selector: `:is(${OdxNavigationItemGroup.tagName}, ${OdxNavigationItem.tagName})`, flatten: true })
-], _OdxRailNavigation.prototype, "navigationItems", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
 ], _OdxRailNavigation.prototype, "collapsed", 2);
@@ -3547,9 +3504,6 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
   #handleKeyDown;
   #handleSelect;
 };
-__decorateClass([
-  queryAssignedElements({ selector: '[role="option"]', flatten: true })
-], _OdxSelect.prototype, "options", 2);
 __decorateClass([
   query(OdxDropdown.tagName, true)
 ], _OdxSelect.prototype, "dropdown", 2);
@@ -3978,6 +3932,9 @@ const _OdxSpinbox = class _OdxSpinbox extends FormControl {
   static {
     customElement("odx-spinbox", styles$h)(_OdxSpinbox);
   }
+  get options() {
+    return getAssignedElements(this.renderRoot, { selector: '[role="option"]', flatten: true });
+  }
   clear() {
     this.value = "";
   }
@@ -4027,9 +3984,6 @@ const _OdxSpinbox = class _OdxSpinbox extends FormControl {
   #handleClick;
   #handleKeyDown;
 };
-__decorateClass([
-  queryAssignedElements({ selector: '[role="option"]', flatten: true })
-], _OdxSpinbox.prototype, "options", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
 ], _OdxSpinbox.prototype, "interactive", 2);
@@ -4198,6 +4152,9 @@ const _OdxTableRow = class _OdxTableRow extends CanBeDisabled(CustomElement) {
   static {
     customElement("odx-table-row", styles$b)(_OdxTableRow);
   }
+  get checkboxCells() {
+    return getAssignedElements(this.renderRoot, { selector: OdxTableCheckboxCell.tagName, flatten: true });
+  }
   connectedCallback() {
     super.connectedCallback();
     this.role = "row";
@@ -4238,9 +4195,6 @@ const _OdxTableRow = class _OdxTableRow extends CanBeDisabled(CustomElement) {
   #handleChange;
   #handleSlotchange;
 };
-__decorateClass([
-  queryAssignedElements({ selector: OdxTableCheckboxCell.tagName, flatten: true })
-], _OdxTableRow.prototype, "checkboxCells", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
 ], _OdxTableRow.prototype, "selected", 2);
@@ -4434,10 +4388,10 @@ __decorateClass([
 ], _OdxToast.prototype, "variant", 2);
 let OdxToast = _OdxToast;
 
-const styles$5 = "@layer base{:host{--_border-radius: var(--odx-border-radius-sm);--_color-background: var(--odx-color-background-control-rest);--_color-background-hover: var(--odx-color-background-control-hover);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-stroke-hover: var(--odx-color-stroke-control-hover);--_size: var(--odx-size-225);--_icon-size: var(--odx-size-150);--_padding-inline: var(--odx-size-75);display:inline-flex;position:relative;gap:var(--_padding-inline);align-items:center;justify-content:center;transition:var(--odx-transition-default) allow-discrete;transition-property:color,background-color,border-color,outline-color,z-index;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding-inline:var(--_padding-inline);block-size:var(--_size);overflow:hidden;white-space:nowrap;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);user-select:none}::slotted(odx-icon){margin-inline:calc(-1 * var(--odx-size-37) - var(--odx-border-width-thin));font-size:var(--_icon-size)}[part~=label]{display:inline-block}}@layer state{:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host([disabled]:not([readonly])){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle);cursor:default}:host([readonly][variant=\"ghost\"]){--_color-stroke: transparent}:host([checked][disabled]:not([readonly])){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([checked]),:host([checked][readonly]){--_color-background: var(--odx-color-background-control-selected);--_color-background-hover: var(--odx-color-background-control-selected);--_color-foreground: var(--odx-color-foreground-inverse);--_color-stroke: var(--odx-color-stroke-control-selected);--_color-stroke-hover: var(--odx-color-stroke-control-selected)}:host([checked][variant=\"ghost\"]){--_color-background: var(--odx-color-background-transparent-selected);--_color-background-hover: var(--odx-color-background-transparent-selected-hover);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: transparent}:host(:hover:not(:is([readonly],[disabled]))){--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}}@layer variant{:host([variant=\"ghost\"]){--_color-background: transparent;--_color-stroke: transparent;--_color-stroke-hover: transparent;outline-offset:0}:host([size=\"sm\"]){--_size: var(--odx-size-200);--_icon-size: var(--odx-size-125)}}";
+const styles$5 = "@layer base{:host{--_border-radius: var(--odx-border-radius-sm);--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-neutral-subtle);--_color-stroke-hover: var(--odx-color-stroke-neutral-subtle);--_size: var(--odx-size-225);--_icon-size: var(--odx-size-150);--_padding-inline: var(--odx-size-75);display:inline-flex;position:relative;gap:var(--_padding-inline);align-items:center;justify-content:center;transition:var(--odx-transition-default) allow-discrete;transition-property:color,background-color,border-color,outline-color,z-index;outline:var(--odx-focus-ring-outline);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding-inline:var(--_padding-inline);block-size:var(--_size);min-inline-size:var(--_size);overflow:hidden;white-space:nowrap;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);user-select:none}odx-icon,::slotted(odx-icon){margin-inline:calc(-1 * var(--odx-size-37) - var(--odx-border-width-thin));font-size:var(--_icon-size)}[part~=label]{display:inline-block}}@layer state{:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host([disabled]:not([readonly])){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle);cursor:default}:host([checked][variant=\"ghost\"]),:host([readonly][variant=\"ghost\"]){--_color-stroke: transparent}:host([checked][disabled]:not([readonly])){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([checked]),:host([checked][readonly]){--_color-background: var(--odx-color-background-transparent-selected);--_color-background-hover: var(--odx-color-background-transparent-selected-hover);--_color-foreground: var(--odx-color-foreground-rest)}:host([checked][required]){cursor:default}:host([checked][variant=\"primary\"]){--_color-background: var(--odx-color-background-control-selected);--_color-background-hover: var(--odx-color-background-control-selected-hover);--_color-foreground: var(--odx-color-foreground-inverse);--_color-stroke: var(--odx-color-stroke-control-selected);--_color-stroke-hover: var(--odx-color-stroke-control-selected)}:host(:hover:not(:is([readonly],[disabled]))){--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}}@layer variant{:host([variant=\"ghost\"]){--_color-background: transparent;--_color-stroke: transparent;--_color-stroke-hover: transparent}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-control-rest);--_color-background-hover: var(--odx-color-background-control-hover);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-stroke-hover: var(--odx-color-stroke-control-hover);outline-offset:var(--odx-focus-ring-offset)}:host([size=\"sm\"]){--_size: var(--odx-size-200);--_icon-size: var(--odx-size-125)}}";
 
 const ToggleButtonSize = pick(Size, ["SM", "MD"]);
-const ToggleButtonVariant = pick(Variant, ["NEUTRAL", "GHOST"]);
+const ToggleButtonVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "GHOST"]);
 const _OdxToggleButton = class _OdxToggleButton extends CheckboxFormControl {
   constructor() {
     super(...arguments);
@@ -4452,9 +4406,19 @@ const _OdxToggleButton = class _OdxToggleButton extends CheckboxFormControl {
     this.role = "button";
   }
   render() {
+    const currentIcon = this.checked ? this.iconChecked || this.icon : this.icon;
+    const currentLabel = this.checked ? this.labelChecked || this.label : this.label;
     return html`
+      ${when(currentIcon, (icon) => html`<odx-icon name=${icon}></odx-icon>`)}
       ${super.render()}
-      ${when(this.label, (label) => this.renderLabel(label))}
+      ${when(
+      currentLabel,
+      (label) => html`
+          <odx-tooltip class="tooltip" placement=${optionalAttr(this.labelPlacement)} size="sm">
+            <odx-text size="sm">${label}</odx-text>
+          </odx-tooltip>
+        `
+    )}
     `;
   }
   willUpdate(props) {
@@ -4466,8 +4430,10 @@ const _OdxToggleButton = class _OdxToggleButton extends CheckboxFormControl {
   }
   updated(props) {
     super.updated(props);
-    if (props.has("label")) {
-      this.#handleLabelChange();
+    if (props.has("label") || props.has("labelChecked")) {
+      this.ariaLabel = this.label || null;
+      const tooltip = this.renderRoot.querySelector("odx-tooltip");
+      tooltip?.mountPopover(this);
     }
   }
   renderLabel(label) {
@@ -4477,18 +4443,22 @@ const _OdxToggleButton = class _OdxToggleButton extends CheckboxFormControl {
       </odx-tooltip>
     `;
   }
-  #handleLabelChange() {
-    this.ariaLabel = this.label || null;
-    const tooltip = this.renderRoot.querySelector("odx-tooltip");
-    tooltip?.mountPopover(this);
-  }
 };
 __decorateClass([
   property()
 ], _OdxToggleButton.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "label-checked" })
+], _OdxToggleButton.prototype, "labelChecked", 2);
 __decorateClass([
   property({ attribute: "label-placement" })
 ], _OdxToggleButton.prototype, "labelPlacement", 2);
+__decorateClass([
+  property()
+], _OdxToggleButton.prototype, "icon", 2);
+__decorateClass([
+  property({ attribute: "icon-checked" })
+], _OdxToggleButton.prototype, "iconChecked", 2);
 __decorateClass([
   property({ reflect: true, useDefault: true })
 ], _OdxToggleButton.prototype, "size", 2);
@@ -4582,28 +4552,17 @@ const _OdxToolbar = class _OdxToolbar extends CustomElement {
     return html`<slot @slotchange=${() => this.requestUpdate()}></slot>`;
   }
   updated(_changedProperties) {
-    for (const element of this.slottedElements) {
-      if (element instanceof OdxButton || element instanceof OdxButtonGroup) {
-        this.#updateButton(element);
-      }
-      if (element instanceof OdxToggleButton || element instanceof OdxToggleButtonGroup) {
-        this.#updateToggleButton(element);
-      }
+    for (const element of getAssignedElements(this.renderRoot)) {
+      if (!this.#isButtonElement(element)) continue;
+      element.size = this.size;
+      if (ALLOWED_BUTTON_VARIANTS.includes(element.variant)) continue;
+      element.variant = ButtonVariant.GHOST;
     }
   }
-  #updateButton(element) {
-    element.size = this.size;
-    if (element.variant && ALLOWED_BUTTON_VARIANTS.includes(element.variant)) return;
-    element.variant = ButtonVariant.GHOST;
-  }
-  #updateToggleButton(element) {
-    element.size = this.size;
-    element.variant = ButtonVariant.GHOST;
+  #isButtonElement(element) {
+    return element instanceof OdxButton || element instanceof OdxButtonGroup || element instanceof OdxToggleButton || element instanceof OdxToggleButtonGroup;
   }
 };
-__decorateClass([
-  queryAssignedElements({ flatten: true })
-], _OdxToolbar.prototype, "slottedElements", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
 ], _OdxToolbar.prototype, "float", 2);

package/dist/lib/control/listbox-form-control.d.ts

@@ -5,7 +5,7 @@ import { OptionControl } from './option-control.js';
 export declare class ListboxFormControl<Option extends OptionControl> extends FormControl<string | string[]> {
     #private;
     protected readonly activeDescendants: ActiveDescendantsController<Option>;
-    protected options: Option[];
+    protected get options(): Option[];
     autoSelect: boolean;
     multiple: boolean;
     placeholder: string;

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

@@ -13,6 +13,7 @@ export interface GetAssignedElementOptions {
     selector?: string;
     flatten?: boolean;
 }
+export declare function getAssignedElements<T = HTMLElement>(root: DocumentFragment | HTMLElement | null, options?: GetAssignedElementOptions): T[];
 export declare function getAssignedElement<T = HTMLElement>(root: DocumentFragment | HTMLElement | null, options?: GetAssignedElementOptions): T | undefined;
 export declare function getKeyInfo(event: KeyboardEvent): {
     up: boolean;

package/dist/main.js

@@ -5,7 +5,7 @@ import { r as round, u as uniqBy, R as RovingTabindexController, m as minBy, p a
 
 const name = "@odx/foundation";
 const displayName = "ODX Design System Foundation";
-const version = "1.0.0-beta.135";
+const version = "1.0.0-beta.136";
 const pkg = {
   name,
   displayName,
@@ -65,15 +65,18 @@ function toPx(value) {
   if (value == null || Number.isNaN(value)) return null;
   return `${round(value, 2)}px`;
 }
-function getAssignedElement(root, options) {
+function getAssignedElements(root, options) {
   const { slot, selector } = options ?? {};
   const slotSelector = `slot${slot ? `[name=${slot}]` : ":not([name])"}`;
   const slotEl = root?.querySelector(slotSelector);
-  const elements = slotEl?.assignedElements(options) ?? [];
+  const elements = slotEl?.assignedElements({ flatten: true, ...options }) ?? [];
   if (selector == null) {
-    return elements[0];
+    return elements;
   }
-  return elements.find((node) => node.matches(selector));
+  return elements.filter((node) => node.matches(selector));
+}
+function getAssignedElement(root, options) {
+  return getAssignedElements(root, options)[0];
 }
 function getKeyInfo(event) {
   const { code, shiftKey } = event;
@@ -590,6 +593,9 @@ class ListboxFormControl extends FormControl {
       this.addEventListener("keydown", this.#handleKeydown);
     }
   }
+  get options() {
+    return getAssignedElements(this.renderRoot, { selector: '[role="option"]', flatten: true });
+  }
   get selectedOptions() {
     return this.options.filter((option) => option.selected);
   }
@@ -1266,4 +1272,4 @@ const main = {
   version: pkg.version
 };
 
-export { ActiveDescendantsController, ActiveDescendantsControllerOptions, Align, BadgeAlign, CanBeDisabled, CanBeExpanded, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, DragController, DragControllerOptions, ExpandableItemManager, ExpandableItemManagerOptions, FormControl, Gap, IS_DRAG_ACTIVE_ATTRIBUTE, InteractiveElement, InteractiveLink, IsDraggable, Justify, ListboxFormControl, NumberFormControl, OptionControl, Placement, PopoverPlacementOptions, ProgressVariant, RadioGroupFormControl, Shape, SharedResizeObserver, Size, Variant, clickedOutside, computePopoverPlacement, customElement, main as default, findClosestDocument, forwardEvent, getAssignedElement, getElementFromEvent, getIdFromHref, getKeyInfo, getUniqueId, optionalAttr, optionalSlot, parseDate, supportsHover, toAriaBooleanAttribute, toPx, waitForAnimations };
+export { ActiveDescendantsController, ActiveDescendantsControllerOptions, Align, BadgeAlign, CanBeDisabled, CanBeExpanded, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, DragController, DragControllerOptions, ExpandableItemManager, ExpandableItemManagerOptions, FormControl, Gap, IS_DRAG_ACTIVE_ATTRIBUTE, InteractiveElement, InteractiveLink, IsDraggable, Justify, ListboxFormControl, NumberFormControl, OptionControl, Placement, PopoverPlacementOptions, ProgressVariant, RadioGroupFormControl, Shape, SharedResizeObserver, Size, Variant, clickedOutside, computePopoverPlacement, customElement, main as default, findClosestDocument, forwardEvent, getAssignedElement, getAssignedElements, getElementFromEvent, getIdFromHref, getKeyInfo, getUniqueId, optionalAttr, optionalSlot, parseDate, supportsHover, toAriaBooleanAttribute, toPx, waitForAnimations };

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.135",
+  "version": "1.0.0-beta.136",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -30,7 +30,7 @@
     "@lit-labs/preact-signals": "1.0.3",
     "@lit/context": "1.1.5",
     "@odx/icons": "4.0.0-rc.37",
-    "@spectrum-web-components/reactive-controllers": "1.6.0",
+    "@spectrum-web-components/reactive-controllers": "1.7.0",
     "@wc-toolkit/cem-inheritance": "1.1.0",
     "@wc-toolkit/cem-validator": "1.0.3",
     "@wc-toolkit/module-path-resolver": "1.0.0",