@odx/foundation 1.0.0-beta.25 → 1.0.0-beta.26

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

@@ -10,10 +10,9 @@ declare const OdxAccordionHeader_base: import('../../lib/main.js').Constructor<C
 export declare class OdxAccordionHeader extends OdxAccordionHeader_base {
     #private;
     get panel(): HTMLElement | null;
-    constructor();
     connectedCallback(): void;
     protected renderContent(): TemplateResult;
-    protected updated(props: PropertyValues<this>): void;
+    protected willUpdate(props: PropertyValues<this>): void;
 }
 export {};
 //# sourceMappingURL=accordion-header.d.ts.map

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

@@ -15,13 +15,12 @@ export declare class OdxListItem extends OdxListItem_base {
     muted: boolean;
     withExpandControl: boolean;
     withExpandIndicator: boolean;
-    constructor();
     isExpandable(): boolean;
     getExpandControl(): HTMLElement | null;
     connectedCallback(): void;
     protected render(): TemplateResult;
     protected renderContent(): TemplateResult;
-    protected updated(props: PropertyValues<this>): void;
+    protected willUpdate(props: PropertyValues<this>): void;
 }
 export {};
 //# sourceMappingURL=list-item.d.ts.map

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

@@ -1,12 +1,15 @@
 import { CustomElement } from '../../lib/main.js';
+import { OdxListItem } from './list-item.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-list': OdxList;
     }
 }
 export declare class OdxList extends CustomElement {
+    items: OdxListItem[];
     multiple: boolean;
     constructor();
     connectedCallback(): void;
+    toggleAll(force?: boolean, emitEvent?: boolean): void;
 }
 //# sourceMappingURL=list.d.ts.map

package/dist/components.js

@@ -1,6 +1,6 @@
-import { CanBeExpanded, getUniqueId, toAriaBooleanAttribute, customElement, requestUpdateOnAriaChange, CustomElement, ExpandableItemManager, CanBeDisabled, SharedResizeObserver, optionalAttr, createIntersectionObserver, createMutationObserver, getElementFromEvent, enumFrom, Size, Shape, Variant, optionalSlot, toggleAttribute, getKeyboardEventInfo, queryAssignedElement, parseDate, searchTextContent, waitForAnimations, FormControl, forwardEvent, CanBeSelected, WithLoadingState, FocusTrapController, toPx, getAssignedElements, emptySlotFallbackFix, NumberControl } from '@odx/foundation';
+import { CanBeExpanded, getUniqueId, toAriaBooleanAttribute, customElement, requestUpdateOnAriaChange, CustomElement, ExpandableItemManager, CanBeDisabled, SharedResizeObserver, optionalAttr, createIntersectionObserver, createMutationObserver, getElementFromEvent, enumFrom, Size, Shape, Variant, optionalSlot, toggleAttribute, getKeyboardEventInfo, queryAssignedElement, parseDate, searchTextContent, waitForAnimations, FormControl, forwardEvent, CanBeSelected, WithLoadingState, FocusTrapController, toPx, emptySlotFallbackFix, NumberControl } from '@odx/foundation';
 import { InteractiveElement, CheckboxGroupFormControl, CheckboxFormControl, PopoverPlacement, PopoverHost, PopoverPlacementOptions, ListboxFormControl, OptionControl, RadioGroupFormControl, IsDraggable, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation/cdk';
-import { isServer, html, css, nothing } from 'lit';
+import { html, isServer, css, nothing } from 'lit';
 import { property, queryAssignedElements, query, queryAll, state } from 'lit/decorators.js';
 import { signal, computed, effect, SignalWatcher } from '@lit-labs/preact-signals';
 import { repeat } from 'lit/directives/repeat.js';
@@ -25,24 +25,13 @@ var __decorateClass$1p = (decorators, target, key, kind) => {
   return result;
 };
 var __accessCheck$w = (obj, member, msg) => member.has(obj) || __typeError$w("Cannot " + msg);
-var __privateGet$r = (obj, member, getter) => (__accessCheck$w(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$w = (obj, member, value) => member.has(obj) ? __typeError$w("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod$j = (obj, member, method) => (__accessCheck$w(obj, member, "access private method"), method);
-var _OdxAccordionHeader_instances, updateAriaAttributes_fn$3, _handleClick$8;
+var _OdxAccordionHeader_instances, handleExpandedChange_fn$1;
 let OdxAccordionHeader = class extends CanBeExpanded(InteractiveElement) {
   constructor() {
-    super();
+    super(...arguments);
     __privateAdd$w(this, _OdxAccordionHeader_instances);
-    __privateAdd$w(this, _handleClick$8, () => {
-      if (!this.panel) return;
-      this.toggle();
-      if (!this.expanded) {
-        this.panel?.querySelector("odx-accordion")?.toggleAll(false);
-      }
-    });
-    if (!isServer) {
-      this.addEventListener("click", __privateGet$r(this, _handleClick$8));
-    }
   }
   get panel() {
     if (this.nextElementSibling?.role === "region") {
@@ -60,22 +49,23 @@ let OdxAccordionHeader = class extends CanBeExpanded(InteractiveElement) {
       <odx-icon part="indicator" name="core::chevron-down" size="md"></odx-icon>
     `;
   }
-  updated(props) {
-    super.updated?.(props);
+  willUpdate(props) {
+    super.willUpdate?.(props);
     if (props.has("disabled") || props.has("expanded")) {
-      __privateMethod$j(this, _OdxAccordionHeader_instances, updateAriaAttributes_fn$3).call(this);
+      __privateMethod$j(this, _OdxAccordionHeader_instances, handleExpandedChange_fn$1).call(this);
     }
   }
 };
 _OdxAccordionHeader_instances = new WeakSet();
-updateAriaAttributes_fn$3 = function() {
+handleExpandedChange_fn$1 = function() {
   if (!this.panel) return;
   this.ariaExpanded = toAriaBooleanAttribute(this.expanded);
   this.setAttribute("aria-controls", this.panel.id);
-  this.panel.hidden = this.disabled || !this.expanded;
   this.panel.setAttribute("aria-labelledby", this.id);
+  this.panel.hidden = this.disabled || !this.expanded;
+  if (this.expanded) return;
+  this.panel.querySelector("odx-accordion")?.toggleAll(false);
 };
-_handleClick$8 = new WeakMap();
 OdxAccordionHeader = __decorateClass$1p([
   customElement("odx-accordion-header", [styles$1e])
 ], OdxAccordionHeader);
@@ -174,7 +164,7 @@ var __decorateClass$1m = (decorators, target, key, kind) => {
   return result;
 };
 var __accessCheck$v = (obj, member, msg) => member.has(obj) || __typeError$v("Cannot " + msg);
-var __privateGet$q = (obj, member, getter) => (__accessCheck$v(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateGet$p = (obj, member, getter) => (__accessCheck$v(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$v = (obj, member, value) => member.has(obj) ? __typeError$v("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod$i = (obj, member, method) => (__accessCheck$v(obj, member, "access private method"), method);
 var _breakpoints, _position, _currentBreakpoint, _OdxActionGroup_instances, captureSize_fn, _handleSlotChange$9;
@@ -185,8 +175,8 @@ let OdxActionGroup = class extends CanBeDisabled(CustomElement) {
     __privateAdd$v(this, _breakpoints, signal([]));
     __privateAdd$v(this, _position, signal(0));
     __privateAdd$v(this, _currentBreakpoint, computed(() => {
-      const position = __privateGet$q(this, _position).value;
-      const breakpoints = __privateGet$q(this, _breakpoints).value;
+      const position = __privateGet$p(this, _position).value;
+      const breakpoints = __privateGet$p(this, _breakpoints).value;
       return this.assignedElements.findLast((_, index) => {
         return breakpoints[index] && position > breakpoints[index];
       });
@@ -202,19 +192,19 @@ let OdxActionGroup = class extends CanBeDisabled(CustomElement) {
       this,
       () => {
         const baseRect = this.base.getBoundingClientRect();
-        __privateGet$q(this, _position).value = baseRect.left;
+        __privateGet$p(this, _position).value = baseRect.left;
       },
       { fpsLimit: 5 }
     );
     effect(() => {
-      __privateGet$q(this, _currentBreakpoint).value;
+      __privateGet$p(this, _currentBreakpoint).value;
     });
   }
   render() {
     return html`
       <div class="base">
         <odx-stack class="container" horizontal>
-          <slot @slotchange=${__privateGet$q(this, _handleSlotChange$9)}></slot>
+          <slot @slotchange=${__privateGet$p(this, _handleSlotChange$9)}></slot>
           <odx-icon-button id="action-menu" icon="core::chevron-down"></odx-icon-button>
         </odx-stack>
         <odx-menu anchor="action-menu" placement="bottom-end">
@@ -240,7 +230,7 @@ captureSize_fn = async function() {
     element.slot = "";
   }
   await 0;
-  __privateGet$q(this, _breakpoints).value = this.assignedElements.map((element) => {
+  __privateGet$p(this, _breakpoints).value = this.assignedElements.map((element) => {
     return element.getBoundingClientRect().left;
   });
   this.container.classList.remove("measuring");
@@ -428,31 +418,31 @@ var __decorateClass$1j = (decorators, target, key, kind) => {
   return result;
 };
 var __accessCheck$u = (obj, member, msg) => member.has(obj) || __typeError$u("Cannot " + msg);
-var __privateGet$p = (obj, member, getter) => (__accessCheck$u(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateGet$o = (obj, member, getter) => (__accessCheck$u(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$u = (obj, member, value) => member.has(obj) ? __typeError$u("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$5 = (obj, member, value, setter) => (__accessCheck$u(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod$h = (obj, member, method) => (__accessCheck$u(obj, member, "access private method"), method);
-var _anchorObserver, _OdxAnchorNavigation_instances, handleContainerChange_fn, _handleClick$7;
+var _anchorObserver, _OdxAnchorNavigation_instances, handleContainerChange_fn, _handleClick$6;
 let OdxAnchorNavigation = class extends SignalWatcher(CustomElement) {
   constructor() {
     super();
     __privateAdd$u(this, _OdxAnchorNavigation_instances);
     __privateAdd$u(this, _anchorObserver);
     this.vertical = false;
-    __privateAdd$u(this, _handleClick$7, (event) => {
+    __privateAdd$u(this, _handleClick$6, (event) => {
       const target = getElementFromEvent(event, (node) => node instanceof OdxLink);
       if (!target) return;
       event.preventDefault();
       document.querySelector(target.href)?.scrollIntoView();
     });
-    this.addEventListener("click", __privateGet$p(this, _handleClick$7));
+    this.addEventListener("click", __privateGet$o(this, _handleClick$6));
   }
   connectedCallback() {
     super.connectedCallback();
     __privateMethod$h(this, _OdxAnchorNavigation_instances, handleContainerChange_fn).call(this);
   }
   disconnectedCallback() {
-    __privateGet$p(this, _anchorObserver)?.disconnect();
+    __privateGet$o(this, _anchorObserver)?.disconnect();
     super.disconnectedCallback();
   }
   renderAnchorLink(anchor, isActive = false) {
@@ -467,8 +457,8 @@ let OdxAnchorNavigation = class extends SignalWatcher(CustomElement) {
     );
   }
   render() {
-    const anchors = __privateGet$p(this, _anchorObserver)?.anchors.value ?? [];
-    const visibleAnchors = __privateGet$p(this, _anchorObserver)?.visibleAnchors.value;
+    const anchors = __privateGet$o(this, _anchorObserver)?.anchors.value ?? [];
+    const visibleAnchors = __privateGet$o(this, _anchorObserver)?.visibleAnchors.value;
     return repeat(
       anchors,
       (anchor) => anchor.id,
@@ -485,12 +475,12 @@ _anchorObserver = new WeakMap();
 _OdxAnchorNavigation_instances = new WeakSet();
 handleContainerChange_fn = function() {
   const root = this.container ? document.querySelector(this.container) : null;
-  if (root === __privateGet$p(this, _anchorObserver)?.root) return;
-  __privateGet$p(this, _anchorObserver)?.disconnect();
+  if (root === __privateGet$o(this, _anchorObserver)?.root) return;
+  __privateGet$o(this, _anchorObserver)?.disconnect();
   __privateSet$5(this, _anchorObserver, new AnchorObserver(root));
-  __privateGet$p(this, _anchorObserver)?.observe();
+  __privateGet$o(this, _anchorObserver)?.observe();
 };
-_handleClick$7 = new WeakMap();
+_handleClick$6 = new WeakMap();
 __decorateClass$1j([
   property()
 ], OdxAnchorNavigation.prototype, "container", 2);
@@ -810,7 +800,7 @@ var __decorateClass$1b = (decorators, target, key, kind) => {
   return result;
 };
 var __accessCheck$s = (obj, member, msg) => member.has(obj) || __typeError$s("Cannot " + msg);
-var __privateGet$o = (obj, member, getter) => (__accessCheck$s(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateGet$n = (obj, member, getter) => (__accessCheck$s(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$s = (obj, member, value) => member.has(obj) ? __typeError$s("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod$f = (obj, member, method) => (__accessCheck$s(obj, member, "access private method"), method);
 var _internals, _OdxButton_instances, handleClick_fn;
@@ -839,11 +829,11 @@ _internals = new WeakMap();
 _OdxButton_instances = new WeakSet();
 handleClick_fn = function(_event) {
   if (this.type === "submit") {
-    __privateGet$o(this, _internals).form?.requestSubmit();
+    __privateGet$n(this, _internals).form?.requestSubmit();
     return;
   }
   if (this.type === "reset") {
-    __privateGet$o(this, _internals).form?.reset();
+    __privateGet$n(this, _internals).form?.reset();
     return;
   }
 };
@@ -912,7 +902,7 @@ var __decorateClass$19 = (decorators, target, key, kind) => {
   return result;
 };
 var __accessCheck$r = (obj, member, msg) => member.has(obj) || __typeError$r("Cannot " + msg);
-var __privateGet$n = (obj, member, getter) => (__accessCheck$r(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateGet$m = (obj, member, getter) => (__accessCheck$r(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$r = (obj, member, value) => member.has(obj) ? __typeError$r("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var _handleSlotChange$8, _handleGroupControlChange;
 const CheckboxGroupLayout = { INLINE: "inline", LIST: "list" };
@@ -921,7 +911,7 @@ let OdxCheckboxGroup = class extends CheckboxGroupFormControl {
     super(...arguments);
     __privateAdd$r(this, _handleSlotChange$8, () => {
       for (const control of this.groupControls) {
-        control.addEventListener("change", __privateGet$n(this, _handleGroupControlChange));
+        control.addEventListener("change", __privateGet$m(this, _handleGroupControlChange));
       }
     });
     __privateAdd$r(this, _handleGroupControlChange, (event) => {
@@ -935,7 +925,7 @@ let OdxCheckboxGroup = class extends CheckboxGroupFormControl {
     });
   }
   render() {
-    return html`<slot @slotchange=${__privateGet$n(this, _handleSlotChange$8)}></slot>`;
+    return html`<slot @slotchange=${__privateGet$m(this, _handleSlotChange$8)}></slot>`;
   }
 };
 _handleSlotChange$8 = new WeakMap();
@@ -1016,9 +1006,9 @@ var __decorateClass$17 = (decorators, target, key, kind) => {
   return result;
 };
 var __accessCheck$q = (obj, member, msg) => member.has(obj) || __typeError$q("Cannot " + msg);
-var __privateGet$m = (obj, member, getter) => (__accessCheck$q(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateGet$l = (obj, member, getter) => (__accessCheck$q(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$q = (obj, member, value) => member.has(obj) ? __typeError$q("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleActionClick, _handleClick$6;
+var _handleActionClick, _handleClick$5;
 const ChipVariant = enumFrom(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
 let OdxChip = class extends CanBeDisabled(CustomElement) {
   constructor() {
@@ -1031,7 +1021,7 @@ let OdxChip = class extends CanBeDisabled(CustomElement) {
       event.stopPropagation();
       this.emit("remove");
     });
-    __privateAdd$q(this, _handleClick$6, (event) => {
+    __privateAdd$q(this, _handleClick$5, (event) => {
       if (this.removable) {
         const actionElement = getElementFromEvent(event, (node) => !!this.actionElement && node === this.actionElement);
         if (actionElement) return;
@@ -1048,7 +1038,7 @@ let OdxChip = class extends CanBeDisabled(CustomElement) {
   }
   renderAction() {
     return html`
-      <button class="action" ?disabled=${this.disabled} @click=${__privateGet$m(this, _handleActionClick)}>
+      <button class="action" ?disabled=${this.disabled} @click=${__privateGet$l(this, _handleActionClick)}>
         <odx-icon class="action-icon" name="core::close"></odx-icon>
       </button>
     `;
@@ -1065,15 +1055,15 @@ let OdxChip = class extends CanBeDisabled(CustomElement) {
   updated(props) {
     if (props.has("removable") || props.has("interactive") || props.has("disabled")) {
       if (this.removable || this.interactive) {
-        this.addEventListener("click", __privateGet$m(this, _handleClick$6), { capture: true });
+        this.addEventListener("click", __privateGet$l(this, _handleClick$5), { capture: true });
       } else {
-        this.removeEventListener("click", __privateGet$m(this, _handleClick$6));
+        this.removeEventListener("click", __privateGet$l(this, _handleClick$5));
       }
     }
   }
 };
 _handleActionClick = new WeakMap();
-_handleClick$6 = new WeakMap();
+_handleClick$5 = new WeakMap();
 __decorateClass$17([
   query(".action")
 ], OdxChip.prototype, "actionElement", 2);
@@ -1106,7 +1096,7 @@ var __decorateClass$16 = (decorators, target, key, kind) => {
   return result;
 };
 var __accessCheck$p = (obj, member, msg) => member.has(obj) || __typeError$p("Cannot " + msg);
-var __privateGet$l = (obj, member, getter) => (__accessCheck$p(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateGet$k = (obj, member, getter) => (__accessCheck$p(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$p = (obj, member, value) => member.has(obj) ? __typeError$p("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$p(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var _value$1, _OdxCircularProgressBar_instances, circumference_get, radius_get, progressValue_get, normalizedStrokeWidth_get;
@@ -1130,7 +1120,7 @@ let OdxCircularProgressBar = class extends CustomElement {
     }
   }
   get value() {
-    return __privateGet$l(this, _value$1);
+    return __privateGet$k(this, _value$1);
   }
   firstUpdated(changes) {
     super.firstUpdated?.(changes);
@@ -1148,17 +1138,17 @@ let OdxCircularProgressBar = class extends CustomElement {
       <svg part="inner" viewBox="0 0 ${this.viewPortSize} ${this.viewPortSize}">
         <circle
           part="track"
-          stroke-width="${__privateGet$l(this, _OdxCircularProgressBar_instances, normalizedStrokeWidth_get)}"
-          r="${__privateGet$l(this, _OdxCircularProgressBar_instances, radius_get)}"
+          stroke-width="${__privateGet$k(this, _OdxCircularProgressBar_instances, normalizedStrokeWidth_get)}"
+          r="${__privateGet$k(this, _OdxCircularProgressBar_instances, radius_get)}"
           cx="50%"
           cy="50%"
         />
         <circle
           part="indicator"
-          stroke-dasharray="${__privateGet$l(this, _OdxCircularProgressBar_instances, circumference_get)}"
-          stroke-dashoffset="${__privateGet$l(this, _OdxCircularProgressBar_instances, progressValue_get)}"
-          stroke-width="${__privateGet$l(this, _OdxCircularProgressBar_instances, normalizedStrokeWidth_get)}"
-          r="${__privateGet$l(this, _OdxCircularProgressBar_instances, radius_get)}"
+          stroke-dasharray="${__privateGet$k(this, _OdxCircularProgressBar_instances, circumference_get)}"
+          stroke-dashoffset="${__privateGet$k(this, _OdxCircularProgressBar_instances, progressValue_get)}"
+          stroke-width="${__privateGet$k(this, _OdxCircularProgressBar_instances, normalizedStrokeWidth_get)}"
+          r="${__privateGet$k(this, _OdxCircularProgressBar_instances, radius_get)}"
           cx="50%"
           cy="50%"
         />
@@ -1175,13 +1165,13 @@ let OdxCircularProgressBar = class extends CustomElement {
 _value$1 = new WeakMap();
 _OdxCircularProgressBar_instances = new WeakSet();
 circumference_get = function() {
-  return Math.floor(2 * __privateGet$l(this, _OdxCircularProgressBar_instances, radius_get) * Math.PI);
+  return Math.floor(2 * __privateGet$k(this, _OdxCircularProgressBar_instances, radius_get) * Math.PI);
 };
 radius_get = function() {
-  return Math.max(0, this.viewPortSize / 2 - __privateGet$l(this, _OdxCircularProgressBar_instances, normalizedStrokeWidth_get) / 2);
+  return Math.max(0, this.viewPortSize / 2 - __privateGet$k(this, _OdxCircularProgressBar_instances, normalizedStrokeWidth_get) / 2);
 };
 progressValue_get = function() {
-  return this.indeterminate ? __privateGet$l(this, _OdxCircularProgressBar_instances, circumference_get) : Math.floor((1 - __privateGet$l(this, _value$1) / 100) * __privateGet$l(this, _OdxCircularProgressBar_instances, circumference_get));
+  return this.indeterminate ? __privateGet$k(this, _OdxCircularProgressBar_instances, circumference_get) : Math.floor((1 - __privateGet$k(this, _value$1) / 100) * __privateGet$k(this, _OdxCircularProgressBar_instances, circumference_get));
 };
 normalizedStrokeWidth_get = function() {
   if (this.stroke < 0) return 0;
@@ -1224,10 +1214,10 @@ var __decorateClass$15 = (decorators, target, key, kind) => {
   return result;
 };
 var __accessCheck$o = (obj, member, msg) => member.has(obj) || __typeError$o("Cannot " + msg);
-var __privateGet$k = (obj, member, getter) => (__accessCheck$o(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateGet$j = (obj, member, getter) => (__accessCheck$o(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$o = (obj, member, value) => member.has(obj) ? __typeError$o("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod$e = (obj, member, method) => (__accessCheck$o(obj, member, "access private method"), method);
-var _OdxDropdown_instances, updateAriaAttributes_fn$2, _handleClick$5, _handleKeyboardEvent$1;
+var _OdxDropdown_instances, updateAriaAttributes_fn$1, _handleClick$4, _handleKeyboardEvent$1;
 const DropdownPlacement = { TOP: PopoverPlacement.TOP, BOTTOM: PopoverPlacement.BOTTOM };
 let OdxDropdown = class extends CanBeDisabled(PopoverHost) {
   constructor() {
@@ -1235,7 +1225,7 @@ let OdxDropdown = class extends CanBeDisabled(PopoverHost) {
     __privateAdd$o(this, _OdxDropdown_instances);
     this.matchReferenceWidth = false;
     this.placement = DropdownPlacement.BOTTOM;
-    __privateAdd$o(this, _handleClick$5, (_event) => {
+    __privateAdd$o(this, _handleClick$4, (_event) => {
       this.togglePopover();
     });
     __privateAdd$o(this, _handleKeyboardEvent$1, (event) => {
@@ -1260,16 +1250,16 @@ let OdxDropdown = class extends CanBeDisabled(PopoverHost) {
   mountPopover(referenceElement) {
     super.mountPopover(referenceElement);
     if (this.disabled || !referenceElement) return;
-    __privateMethod$e(this, _OdxDropdown_instances, updateAriaAttributes_fn$2).call(this, referenceElement, this.id);
-    referenceElement.addEventListener("click", __privateGet$k(this, _handleClick$5));
-    referenceElement.addEventListener("keydown", __privateGet$k(this, _handleKeyboardEvent$1));
+    __privateMethod$e(this, _OdxDropdown_instances, updateAriaAttributes_fn$1).call(this, referenceElement, this.id);
+    referenceElement.addEventListener("click", __privateGet$j(this, _handleClick$4));
+    referenceElement.addEventListener("keydown", __privateGet$j(this, _handleKeyboardEvent$1));
     this.emit("mount", { detail: { referenceElement } });
   }
   unmountPopover(referenceElement) {
     super.unmountPopover(referenceElement);
-    __privateMethod$e(this, _OdxDropdown_instances, updateAriaAttributes_fn$2).call(this, referenceElement, null);
-    referenceElement.removeEventListener("click", __privateGet$k(this, _handleClick$5));
-    referenceElement.removeEventListener("keydown", __privateGet$k(this, _handleKeyboardEvent$1));
+    __privateMethod$e(this, _OdxDropdown_instances, updateAriaAttributes_fn$1).call(this, referenceElement, null);
+    referenceElement.removeEventListener("click", __privateGet$j(this, _handleClick$4));
+    referenceElement.removeEventListener("keydown", __privateGet$j(this, _handleKeyboardEvent$1));
     this.emit("unmount", { detail: { referenceElement } });
   }
   onBeforePopoverShow() {
@@ -1294,7 +1284,7 @@ let OdxDropdown = class extends CanBeDisabled(PopoverHost) {
   willUpdate(props) {
     super.willUpdate?.(props);
     if (props.has("id")) {
-      __privateMethod$e(this, _OdxDropdown_instances, updateAriaAttributes_fn$2).call(this, this.referenceElement, this.id);
+      __privateMethod$e(this, _OdxDropdown_instances, updateAriaAttributes_fn$1).call(this, this.referenceElement, this.id);
     }
     if (props.has("disabled")) {
       if (this.disabled) {
@@ -1306,10 +1296,10 @@ let OdxDropdown = class extends CanBeDisabled(PopoverHost) {
   }
 };
 _OdxDropdown_instances = new WeakSet();
-updateAriaAttributes_fn$2 = function(referenceElement, id) {
+updateAriaAttributes_fn$1 = function(referenceElement, id) {
   toggleAttribute(referenceElement, "aria-describedby", id);
 };
-_handleClick$5 = new WeakMap();
+_handleClick$4 = new WeakMap();
 _handleKeyboardEvent$1 = new WeakMap();
 __decorateClass$15([
   query("odx-popover", true)
@@ -1340,7 +1330,7 @@ var __decorateClass$14 = (decorators, target, key, kind) => {
   return result;
 };
 var __accessCheck$n = (obj, member, msg) => member.has(obj) || __typeError$n("Cannot " + msg);
-var __privateGet$j = (obj, member, getter) => (__accessCheck$n(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateGet$i = (obj, member, getter) => (__accessCheck$n(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$n = (obj, member, value) => member.has(obj) ? __typeError$n("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var _handleSlotChange$7, _handleControlChange, _handleControlKeyboardEvent, _handleControlInput, _handleControlClear;
 let OdxCombobox = class extends ListboxFormControl {
@@ -1353,9 +1343,9 @@ let OdxCombobox = class extends ListboxFormControl {
     });
     __privateAdd$n(this, _handleControlChange, () => {
       if (!this.control) return;
-      this.control.addEventListener("clear", __privateGet$j(this, _handleControlClear));
-      this.control.addEventListener("input", __privateGet$j(this, _handleControlInput));
-      this.control.addEventListener("keydown", __privateGet$j(this, _handleControlKeyboardEvent));
+      this.control.addEventListener("clear", __privateGet$i(this, _handleControlClear));
+      this.control.addEventListener("input", __privateGet$i(this, _handleControlInput));
+      this.control.addEventListener("keydown", __privateGet$i(this, _handleControlKeyboardEvent));
       this.dropdown.referenceElement = this.control;
     });
     __privateAdd$n(this, _handleControlKeyboardEvent, (event) => {
@@ -1384,11 +1374,11 @@ let OdxCombobox = class extends ListboxFormControl {
   render() {
     return html`
       <odx-highlight>
-        <slot name="control" @slotchange=${__privateGet$j(this, _handleControlChange)}>
+        <slot name="control" @slotchange=${__privateGet$i(this, _handleControlChange)}>
         </slot>
       </odx-highlight>
       <odx-dropdown part="dropdown" role="listbox" tabindex="-1" ?disabled=${this.disabled} match-reference-width>
-        <slot @slotchange=${__privateGet$j(this, _handleSlotChange$7)}></slot>
+        <slot @slotchange=${__privateGet$i(this, _handleSlotChange$7)}></slot>
       </odx-dropdown>
     `;
   }
@@ -1456,7 +1446,7 @@ var __decorateClass$12 = (decorators, target, key, kind) => {
   return result;
 };
 var __accessCheck$m = (obj, member, msg) => member.has(obj) || __typeError$m("Cannot " + msg);
-var __privateGet$i = (obj, member, getter) => (__accessCheck$m(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateGet$h = (obj, member, getter) => (__accessCheck$m(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$m = (obj, member, value) => member.has(obj) ? __typeError$m("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var _handleSlotChange$6;
 const FORM_FIELD_CONTROL_SELECTOR = "odx-form-field-control";
@@ -1476,7 +1466,7 @@ let OdxFormField = class extends CustomElement {
   render() {
     const isValid = this.control?.checkValidity();
     return html`
-      <slot @slotchange=${__privateGet$i(this, _handleSlotChange$6)}></slot>
+      <slot @slotchange=${__privateGet$h(this, _handleSlotChange$6)}></slot>
       ${when(isValid === false, () => this.renderErrorMessage())}
 
     `;
@@ -1665,7 +1655,7 @@ var __decorateClass$Z = (decorators, target, key, kind) => {
   return result;
 };
 var __accessCheck$l = (obj, member, msg) => member.has(obj) || __typeError$l("Cannot " + msg);
-var __privateGet$h = (obj, member, getter) => (__accessCheck$l(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateGet$g = (obj, member, getter) => (__accessCheck$l(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$l = (obj, member, value) => member.has(obj) ? __typeError$l("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$l(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod$d = (obj, member, method) => (__accessCheck$l(obj, member, "access private method"), method);
@@ -1686,7 +1676,7 @@ let OdxRelativeTime = class extends BaseFormat {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    clearInterval(__privateGet$h(this, _syncInterval));
+    clearInterval(__privateGet$g(this, _syncInterval));
   }
   willUpdate(props) {
     super.willUpdate?.(props);
@@ -1702,7 +1692,7 @@ let OdxRelativeTime = class extends BaseFormat {
 _syncInterval = new WeakMap();
 _OdxRelativeTime_instances = new WeakSet();
 setupSyncInterval_fn = function() {
-  clearInterval(__privateGet$h(this, _syncInterval));
+  clearInterval(__privateGet$g(this, _syncInterval));
   if (typeof this.syncInterval !== "number") return;
   __privateSet$3(this, _syncInterval, window.setInterval(() => this.requestUpdate(), Math.max(this.syncInterval, 1e3)));
 };
@@ -1792,7 +1782,7 @@ var __decorateClass$W = (decorators, target, key, kind) => {
   return result;
 };
 var __accessCheck$k = (obj, member, msg) => member.has(obj) || __typeError$k("Cannot " + msg);
-var __privateGet$g = (obj, member, getter) => (__accessCheck$k(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateGet$f = (obj, member, getter) => (__accessCheck$k(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$k = (obj, member, value) => member.has(obj) ? __typeError$k("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var _handleSlotChange$5;
 let OdxHeader = class extends CustomElement {
@@ -1816,7 +1806,7 @@ let OdxHeader = class extends CustomElement {
       <div class="base">
         <slot name="prefix"></slot>
         <odx-logo size="sm"></odx-logo>
-        <slot @slotchange=${__privateGet$g(this, _handleSlotChange$5)}></slot>
+        <slot @slotchange=${__privateGet$f(this, _handleSlotChange$5)}></slot>
         <slot name="actions"></slot>
       </div>
       <div class="background"></div>
@@ -2147,7 +2137,7 @@ var __decorateClass$Q = (decorators, target, key, kind) => {
   return result;
 };
 var __accessCheck$i = (obj, member, msg) => member.has(obj) || __typeError$i("Cannot " + msg);
-var __privateGet$f = (obj, member, getter) => (__accessCheck$i(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateGet$e = (obj, member, getter) => (__accessCheck$i(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$i = (obj, member, value) => member.has(obj) ? __typeError$i("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod$b = (obj, member, method) => (__accessCheck$i(obj, member, "access private method"), method);
 var _OdxInput_instances, isClearable_fn$1, _handleClear$2, _handleInput$1, _handleKeyDown$2;
@@ -2183,7 +2173,7 @@ let OdxInput = class extends FormControl(CustomElement) {
   render() {
     const clearButton = when(
       __privateMethod$b(this, _OdxInput_instances, isClearable_fn$1).call(this),
-      () => html`<odx-icon-button class="clear" icon="core::close" size="sm" tabindex="-1"  variant="ghost" @click=${__privateGet$f(this, _handleClear$2)}></odx-icon-button>`
+      () => html`<odx-icon-button class="clear" icon="core::close" size="sm" tabindex="-1"  variant="ghost" @click=${__privateGet$e(this, _handleClear$2)}></odx-icon-button>`
     );
     return html`
       <div part="base">
@@ -2196,9 +2186,9 @@ let OdxInput = class extends FormControl(CustomElement) {
           ?readonly=${this.readonly}
           .value=${this.value}
           size="1"
-          @keydown=${__privateGet$f(this, _handleKeyDown$2)}
+          @keydown=${__privateGet$e(this, _handleKeyDown$2)}
           @change=${forwardEvent(this)}
-          @input=${__privateGet$f(this, _handleInput$1)}
+          @input=${__privateGet$e(this, _handleInput$1)}
           @search=${forwardEvent(this)}
         />
         ${clearButton}
@@ -2284,36 +2274,28 @@ var __decorateClass$O = (decorators, target, key, kind) => {
   return result;
 };
 var __accessCheck$h = (obj, member, msg) => member.has(obj) || __typeError$h("Cannot " + msg);
-var __privateGet$e = (obj, member, getter) => (__accessCheck$h(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$h = (obj, member, value) => member.has(obj) ? __typeError$h("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod$a = (obj, member, method) => (__accessCheck$h(obj, member, "access private method"), method);
-var _OdxListItem_instances, updateAriaAttributes_fn$1, _handleClick$4;
+var _OdxListItem_instances, handleExpandedChange_fn;
 let OdxListItem = class extends CanBeSelected(CanBeExpanded(InteractiveElement)) {
   constructor() {
-    super();
+    super(...arguments);
     __privateAdd$h(this, _OdxListItem_instances);
     this.compact = false;
     this.muted = false;
     this.withExpandControl = false;
     this.withExpandIndicator = false;
-    __privateAdd$h(this, _handleClick$4, (event) => {
-      const expandControl = this.getExpandControl();
-      if (!(this.withExpandIndicator || this.isExpandable()) || !getElementFromEvent(event, (node) => node === expandControl)) return;
-      this.toggle();
-    });
-    if (!isServer) {
-      this.addEventListener("click", __privateGet$e(this, _handleClick$4));
-    }
   }
   isExpandable() {
     return !this.disabled && !this.loading && this.expandableItems.length > 0;
   }
   getExpandControl() {
+    if (!this.isExpandable()) return null;
     return this.shadowRoot?.querySelector(this.withExpandControl ? '[part="expand-control"]' : '[part="base"]') ?? null;
   }
   connectedCallback() {
     super.connectedCallback();
-    this.role ||= "listitem";
+    this.role = "listitem";
   }
   render() {
     const expandSlot = html`<slot name="expand" @slotchange=${() => this.requestUpdate()}></slot>`;
@@ -2348,22 +2330,23 @@ let OdxListItem = class extends CanBeSelected(CanBeExpanded(InteractiveElement))
     )}
     `;
   }
-  updated(props) {
+  willUpdate(props) {
     super.updated?.(props);
     if (props.has("disabled") || props.has("expanded")) {
-      __privateMethod$a(this, _OdxListItem_instances, updateAriaAttributes_fn$1).call(this);
+      __privateMethod$a(this, _OdxListItem_instances, handleExpandedChange_fn).call(this);
     }
   }
 };
 _OdxListItem_instances = new WeakSet();
-updateAriaAttributes_fn$1 = function() {
+handleExpandedChange_fn = function() {
   const expandControl = this.getExpandControl();
   if (!this.region || !expandControl) return;
   this.region.setAttribute("aria-labelledby", "expand-control");
   expandControl.ariaExpanded = toAriaBooleanAttribute(this.expanded);
   expandControl.setAttribute("aria-controls", this.region.id);
+  if (this.expanded) return;
+  this.querySelector("odx-list")?.toggleAll(false);
 };
-_handleClick$4 = new WeakMap();
 __decorateClass$O([
   queryAssignedElements({ slot: "expand" })
 ], OdxListItem.prototype, "expandableItems", 2);
@@ -2386,7 +2369,7 @@ OdxListItem = __decorateClass$O([
   customElement("odx-list-item", [styles$J])
 ], OdxListItem);
 
-const styles$I = "@layer base{:host{display:block;--item-indent-level: 0}::slotted(odx-list-item){--indent-level: var(--item-indent-level)}}";
+const styles$I = "@layer base{:host{display:block;--item-indent-level: 0}::slotted([role=\"listitem\"]){--indent-level: var(--item-indent-level)}}";
 
 var __defProp$N = Object.defineProperty;
 var __getOwnPropDesc$N = Object.getOwnPropertyDescriptor;
@@ -2402,13 +2385,21 @@ let OdxList = class extends CustomElement {
   constructor() {
     super();
     this.multiple = false;
-    new ExpandableItemManager(this, { getItems: () => Array.from(this.querySelectorAll('[role="listitem"]')) });
+    new ExpandableItemManager(this, { getItems: () => this.items });
   }
   connectedCallback() {
     super.connectedCallback();
     this.role = "list";
   }
+  toggleAll(force, emitEvent = false) {
+    for (const item of this.items) {
+      item.toggle(force, emitEvent);
+    }
+  }
 };
+__decorateClass$N([
+  queryAssignedElements({ selector: '[role="listitem"]', flatten: true })
+], OdxList.prototype, "items", 2);
 __decorateClass$N([
   property({ type: Boolean, reflect: true })
 ], OdxList.prototype, "multiple", 2);
@@ -3481,7 +3472,7 @@ let OdxRailNavigation = class extends IsLocalized(CustomElement) {
     super(...arguments);
     this.collapsed = false;
     __privateAdd$a(this, _handleSlotChange$3, () => {
-      for (const item of getAssignedElements(this)) {
+      for (const item of this.navigationItems) {
         item.size = "lg";
       }
     });

package/dist/lib/controllers/expandable-controller.d.ts

@@ -10,7 +10,7 @@ export interface ExpandableItemManagerOptions<T extends ExpandableItem = Expanda
 export declare const ExpandableItemManagerOptions: (options?: Partial<ExpandableItemManagerOptions>) => ExpandableItemManagerOptions;
 export declare class ExpandableItemManager<T extends ExpandableItem> implements ReactiveController {
     #private;
-    get expandableItems(): T[];
+    get items(): T[];
     constructor(host: ExpandableItemManagerHost, options?: ExpandableItemManagerOptions);
     hostConnected?(): void;
 }

package/dist/lib/mixins/can-be-expanded.d.ts

@@ -3,8 +3,8 @@ import { Constructor } from '../utils/dedupe-mixin.js';
 import { CanBeDisabled } from './can-be-disabled.js';
 export interface CanBeExpanded extends CanBeDisabled {
     expanded: boolean;
-    expandable: boolean;
     toggle(force?: boolean, emitEvent?: boolean): void;
+    getExpandControl(): HTMLElement | null;
 }
 export declare const CanBeExpanded: <T extends Constructor<CustomElement>>(superClass: T) => Constructor<CanBeExpanded> & T;
 //# sourceMappingURL=can-be-expanded.d.ts.map

package/dist/main.js

@@ -1,8 +1,8 @@
 export { effect } from '@lit-labs/preact-signals';
 import { isServer, LitElement, html, unsafeCSS, nothing } from 'lit';
-import { createFocusTrap } from 'focus-trap';
 import { r as round, u as uniqBy } from './vendor-Cef33Vym.js';
 export { p as enumFrom } from './vendor-Cef33Vym.js';
+import { createFocusTrap } from 'focus-trap';
 import { createContext, ContextProvider, consume } from '@lit/context';
 import { property } from 'lit/decorators.js';
 import { directive, Directive } from 'lit/directive.js';
@@ -89,7 +89,7 @@ const ExpandableItemManagerOptions = (options) => ({
 class ExpandableItemManager {
   #host;
   #config;
-  get expandableItems() {
+  get items() {
     return this.#config.getItems?.() ?? [];
   }
   constructor(host, options) {
@@ -98,17 +98,24 @@ class ExpandableItemManager {
     this.#host.addController(this);
     if (!isServer) {
       this.#host.addEventListener("toggle", this.#handleToggle);
+      this.#host.addEventListener("click", this.#handleClick);
     }
   }
   #handleToggle = (event) => {
     if (!event.target) return;
     event.stopPropagation();
     if (!fromToggleEventState(event.newState) || this.#host.multiple) return;
-    for (const item of this.expandableItems) {
+    for (const item of this.items) {
       if (event.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();
+  };
 }
 
 function createMutationObserver(callback) {
@@ -147,7 +154,7 @@ function toPx(value) {
 }
 function getAssignedElements(host, ...slots) {
   const selector = slots.map((slot) => `[slot=${slot}]`).join(", ") || "*";
-  return Array.from(host.querySelectorAll(`:is(${selector})`));
+  return Array.from(host.querySelectorAll(selector));
 }
 async function waitForAnimations(element, subtree = false) {
   if (!element || typeof element.getAnimations !== "function") {
@@ -327,6 +334,9 @@ const CanBeExpanded = dedupeMixin((superClass) => {
       super(...arguments);
       this.expanded = false;
     }
+    getExpandControl() {
+      return this;
+    }
     toggle(force, emitEvent = true) {
       const newState = force ?? !this.expanded;
       if (this.disabled || this.expanded === newState) return;

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