@odx/foundation 1.0.0-beta.0 → 1.0.0-beta.2

package/dist/cdk.js

@@ -245,12 +245,12 @@ const PopoverHost = dedupeMixin((superClass) => {
       return PopoverPlacementOptions({ placement: this.placement ?? PopoverPlacement.BOTTOM });
     }
     connectedCallback() {
-      super.connectedCallback?.();
+      super.connectedCallback();
       this.popover ??= "auto";
       this.#connectObserver();
     }
     disconnectedCallback() {
-      super.disconnectedCallback?.();
+      super.disconnectedCallback();
       this.#disconnectObserver();
     }
     mountPopover(referenceElement) {

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

@@ -9,6 +9,7 @@ declare global {
 declare const OdxAccordionHeader_base: import('../../lib/main.js').Constructor<CanBeExpanded> & typeof CustomElement;
 export declare class OdxAccordionHeader extends OdxAccordionHeader_base {
     #private;
+    static shadowRootOptions: ShadowRootInit;
     get panel(): OdxAccordionPanel | null;
     connectedCallback(): void;
     protected render(): TemplateResult;

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

@@ -1,17 +1,15 @@
-import { CanBeDisabled, CustomElement } from '../../lib/main.js';
+import { CustomElement } from '../../lib/main.js';
 import { PropertyValues } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-accordion': OdxAccordion;
     }
 }
-declare const OdxAccordion_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
-export declare class OdxAccordion extends OdxAccordion_base {
+export declare class OdxAccordion extends CustomElement {
     #private;
     private controls;
     multiple: boolean;
     constructor();
     protected updated(props: PropertyValues): void;
 }
-export {};
 //# sourceMappingURL=accordion.d.ts.map

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

@@ -1,5 +1,5 @@
 import { CustomElement } from '../../lib/main.js';
-import { TemplateResult } from 'lit';
+import { PropertyValues } from 'lit';
 import { AvatarSize, AvatarVariant, OdxAvatar } from '../avatar/index.js';
 declare global {
     interface HTMLElementTagNameMap {
@@ -7,8 +7,9 @@ declare global {
     }
 }
 export declare class OdxAvatarGroup extends CustomElement implements Pick<OdxAvatar, 'size' | 'variant'> {
+    avatars: OdxAvatar[];
     size?: AvatarSize;
     variant?: AvatarVariant;
-    protected render(): TemplateResult;
+    protected updated(props: PropertyValues<this>): void;
 }
 //# sourceMappingURL=avatar-group.d.ts.map

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

@@ -1,6 +1,6 @@
 import { CanBeDisabled, CustomElement } from '../../lib/main.js';
 import { PropertyValues } from 'lit';
-import { ButtonSize, ButtonVariant } from '../button/index.js';
+import { ButtonSize, ButtonVariant, OdxButton } from '../button/index.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-button-group': OdxButtonGroup;
@@ -8,13 +8,13 @@ declare global {
 }
 declare const OdxButtonGroup_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
 export declare class OdxButtonGroup extends OdxButtonGroup_base {
-    private buttons;
-    private allButtons;
+    protected buttons: OdxButton[];
+    constructor();
     block: boolean;
     connected: boolean;
     vertical: boolean;
-    size?: ButtonSize | null;
-    variant?: ButtonVariant | null;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
     protected updated(props: PropertyValues<this>): void;
 }
 export {};

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

@@ -9,8 +9,10 @@ declare global {
 declare const OdxListItem_base: import('../../lib/main.js').Constructor<CanBeSelected> & import('../../lib/main.js').Constructor<CanBeExpanded> & typeof BaseButton;
 export declare class OdxListItem extends OdxListItem_base {
     #private;
+    compact: boolean;
     muted: boolean;
     withControl: boolean;
+    withExpandedIndicator: boolean;
     constructor();
     isExpandable(): boolean;
     connectedCallback(): void;

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

@@ -5,7 +5,6 @@ declare global {
     }
 }
 export declare class OdxList extends CustomElement {
-    compact: boolean;
     connectedCallback(): void;
 }
 //# sourceMappingURL=list.d.ts.map

package/dist/components/table/table-checkbox-cell.d.ts

@@ -1,18 +1,19 @@
-import { CustomElement } from '../../lib/main.js';
+import { CanBeDisabled, CustomElement } from '../../lib/main.js';
 import { TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-table-checkbox-cell': OdxTableCheckboxCell;
     }
 }
-export declare class OdxTableCheckboxCell extends CustomElement {
+declare const OdxTableCheckboxCell_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
+export declare class OdxTableCheckboxCell extends OdxTableCheckboxCell_base {
     #private;
     private control;
     checked: boolean;
-    disabled: boolean;
     indeterminate: boolean;
     connectedCallback(): void;
     click(): void;
     protected render(): TemplateResult;
 }
+export {};
 //# sourceMappingURL=table-checkbox-cell.d.ts.map

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

@@ -1,14 +1,14 @@
-import { CustomElement } from '../../lib/main.js';
+import { CanBeDisabled, CustomElement } from '../../lib/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-table-row': OdxTableRow;
     }
 }
-export declare class OdxTableRow extends CustomElement {
+declare const OdxTableRow_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
+export declare class OdxTableRow extends OdxTableRow_base {
     #private;
     private checkboxCells;
-    disabled: boolean;
     selected: boolean;
     selectable: boolean;
     value: string;
@@ -16,4 +16,5 @@ export declare class OdxTableRow extends CustomElement {
     protected render(): TemplateResult;
     protected willUpdate(changes: PropertyValues<this>): void;
 }
+export {};
 //# sourceMappingURL=table-row.d.ts.map

package/dist/components.js

@@ -1,4 +1,4 @@
-import { CanBeExpanded, CustomElement, getUniqueId, toAriaBooleanAttribute, customElement, CanBeDisabled, getKeyboardEventInfo, SharedResizeObserver, optionalAttr, requestUpdateOnAriaChange, createIntersectionObserver, createMutationObserver, getElementFromEvent, WithLoadingState, getAssignedElements, optionalSlot, CheckboxGroupFormControl, CheckboxFormControl, toggleAttribute, parseDate, searchTextContent, waitForAnimations, FormControl, forwardEvent, CanBeSelected, FocusTrapController, OptionControl, toPx, RadioGroupFormControl, SelectFormControl, emptySlotFallbackFix, NumberControl } from '@odx/foundation';
+import { CanBeExpanded, CustomElement, getUniqueId, toAriaBooleanAttribute, customElement, requestUpdateOnAriaChange, fromAriaBooleanAttribute, getKeyboardEventInfo, CanBeDisabled, SharedResizeObserver, optionalAttr, createIntersectionObserver, createMutationObserver, getElementFromEvent, DisabledContextProvider, WithLoadingState, getAssignedElements, optionalSlot, CheckboxGroupFormControl, CheckboxFormControl, toggleAttribute, parseDate, searchTextContent, waitForAnimations, FormControl, forwardEvent, CanBeSelected, FocusTrapController, OptionControl, toPx, RadioGroupFormControl, SelectFormControl, emptySlotFallbackFix, NumberControl } from '@odx/foundation';
 import { html, isServer, unsafeCSS, nothing, css } from 'lit';
 import { queryAssignedElements, property, query, queryAll, state } from 'lit/decorators.js';
 import { signal, computed, effect, SignalWatcher } from '@lit-labs/preact-signals';
@@ -12,7 +12,7 @@ import { g as clamp, R as RovingTabindexController, r as round, i as debounce, m
 import { styleMap } from 'lit/directives/style-map.js';
 import { createContext, consume, provide } from '@lit/context';
 
-const styles$1b = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: var(--odx-color-foreground-base);display:flex;user-select:none;place-items:center;cursor:pointer;gap:var(--odx-size-50);min-block-size:var(--odx-size-225);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);margin-block:var(--odx-size-37);padding-block:var(--odx-size-25);padding-inline:var(--odx-size-50);color:var(--_color-foreground);transition:var(--odx-transition-default);transition-property:background-color,color,outline-color;outline:var(--odx-focus-ring-outline)}.indicator{--size: var(--odx-size-150);display:block;margin-inline-start:auto;aspect-ratio:1;transition:var(--odx-transition-slow);transition-property:transform}:host(:not([aria-disabled=\"true\"]):hover){--_color-background: var(--odx-color-transparent-hover)}:host(:not([aria-disabled=\"true\"]):active){--_color-background: var(--odx-color-transparent-pressed)}:host([aria-disabled=\"true\"]){--_color-foreground: var(--odx-color-disabled-foreground);cursor:default}:host([aria-expanded=\"true\"]){.indicator{transform:rotateX(180deg)}}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}";
+const styles$1b = ":host{display:block}";
 
 var __defProp$1m = Object.defineProperty;
 var __getOwnPropDesc$1m = Object.getOwnPropertyDescriptor;
@@ -41,24 +41,24 @@ let OdxAccordionHeader = class extends CanBeExpanded(CustomElement) {
   }
   connectedCallback() {
     this.tabIndex = 0;
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.id ||= getUniqueId(this.localName);
     this.role ||= "button";
   }
   render() {
     return html`
-      <div class="label">
-        <odx-text ?emphasized=${this.expanded}>
+      <odx-list-item role="presentation" part="base" compact ?disabled=${this.disabled} with-expanded-indicator>
+        <slot name="prefix" slot="prefix"></slot>
+        <odx-text class="content" ?emphasized=${this.expanded}>
           <slot></slot>
         </odx-text>
-        <slot name="suffix"></slot>
-      </div>
-      <odx-icon class="indicator" name="core::chevron-down" aria-hidden="true"></odx-icon>
+        <slot name="suffix" slot="suffix"></slot>
+      </odx-list-item>
     `;
   }
   willUpdate(props) {
     super.willUpdate?.(props);
-    if (props.has("_contextDisabled") || props.has("disabled") || props.has("expanded")) {
+    if (props.has("disabled") || props.has("expanded")) {
       __privateMethod$h(this, _OdxAccordionHeader_instances, handleExpandedChange_fn).call(this);
     }
   }
@@ -68,14 +68,18 @@ handleExpandedChange_fn = function() {
   if (!this.panel) return;
   this.ariaExpanded = toAriaBooleanAttribute(this.expanded);
   this.setAttribute("aria-controls", this.panel.id);
-  this.panel.ariaHidden = toAriaBooleanAttribute(this.isContextDisabled() || !this.expanded);
+  this.panel.ariaHidden = toAriaBooleanAttribute(this.disabled || !this.expanded);
   this.panel.setAttribute("aria-labelledby", this.id);
 };
+OdxAccordionHeader.shadowRootOptions = {
+  ...CustomElement.shadowRootOptions,
+  delegatesFocus: true
+};
 OdxAccordionHeader = __decorateClass$1m([
   customElement("odx-accordion-header", [styles$1b])
 ], OdxAccordionHeader);
 
-const styles$1a = ":host{display:grid;grid-template-rows:1fr;transition:var(--odx-transition-slow)}odx-separator{margin:0}.container{overflow:hidden}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-12);transition:var(--odx-transition-slow);transition-property:opacity,transform,visibility}:host(:last-of-type) odx-separator{display:none}:host([aria-hidden=\"true\"]){grid-template-rows:0fr;.content{opacity:0;transform:translateY(var(--odx-size-25));visibility:hidden}}:host ::slotted(*){display:block;background-color:transparent}";
+const styles$1a = "@layer base{:host{display:block}odx-separator{margin:0}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-12)}:host(:last-of-type) odx-separator{display:none}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}}";
 
 var __defProp$1l = Object.defineProperty;
 var __getOwnPropDesc$1l = Object.getOwnPropertyDescriptor;
@@ -89,26 +93,27 @@ var __decorateClass$1l = (decorators, target, key, kind) => {
 };
 let OdxAccordionPanel = class extends CustomElement {
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.id ||= getUniqueId(this.localName);
     this.role ||= "region";
   }
   render() {
     return html`
-      <div class="container">
+      <odx-toggle-content ?expanded=${!fromAriaBooleanAttribute(this.ariaHidden)}>
         <div class="content">
           <slot></slot>
         </div>
-      </div>
+      </odx-toggle-content>
       <odx-separator></odx-separator>
     `;
   }
 };
 OdxAccordionPanel = __decorateClass$1l([
+  requestUpdateOnAriaChange(["ariaHidden"]),
   customElement("odx-accordion-panel", [styles$1a])
 ], OdxAccordionPanel);
 
-const styles$19 = ":host{display:block}:host-context(odx-accordion-panel){margin-block:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}";
+const styles$19 = ":host{display:block}";
 
 var __defProp$1k = Object.defineProperty;
 var __getOwnPropDesc$1k = Object.getOwnPropertyDescriptor;
@@ -127,7 +132,7 @@ var __accessCheck$v = (obj, member, msg) => member.has(obj) || __typeError$v("Ca
 var __privateGet$q = (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 _handleClick$7, _handleExpand, _handleCollapse, _handleKeyDownEvent;
-let OdxAccordion = class extends CanBeDisabled(CustomElement) {
+let OdxAccordion = class extends CustomElement {
   constructor() {
     super();
     this.multiple = false;
@@ -166,11 +171,6 @@ let OdxAccordion = class extends CanBeDisabled(CustomElement) {
   }
   updated(props) {
     super.updated(props);
-    if (props.has("disabled")) {
-      for (const control of this.controls) {
-        control._contextDisabled = this.disabled;
-      }
-    }
     if (props.has("multiple") && !this.multiple) {
       const firstExpandedControl = this.controls.find((control) => control.expanded);
       for (const control of this.controls) {
@@ -233,7 +233,7 @@ let OdxActionGroup = class extends CanBeDisabled(CustomElement) {
     });
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     SharedResizeObserver.observe(
       this,
       () => {
@@ -583,7 +583,7 @@ const AreaHeaderVariant = {
   DEFAULT: "default"
 };
 
-const styles$14 = ":host{display:flex;padding-inline:var(--odx-size-25);width:min-content}::slotted(odx-avatar){flex:0 0 auto;z-index:1;border:var(--odx-border-width-thin) solid var(--odx-color-separator)}::slotted(odx-avatar:not(:first-of-type)){margin-inline-start:calc(-.33 * var(--_size))}:host(:is([size=\"lg\"],[size=\"xl\"])){gap:var(--odx-size-50)}";
+const styles$14 = "@layer base{:host{--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3)}:host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: inherit;--_border-radius: 50%;display:flex;flex-direction:column;place-content:center;place-items:center;position:relative;user-select:none;vertical-align:middle;overflow:clip;flex:0 0 auto;block-size:var(--_size);inline-size:var(--_size);margin-block:var(--_spacing);font-size:var(--_font-size);border-radius:var(--_border-radius);background-color:var(--_color-background);color:var(--_color-foreground);transition:var(--odx-transition-default);transition-property:background-color,outline-color,box-shadow}:host([variant=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host([size=\"sm\"]){--_size: var(--odx-size-150);--_spacing: 0;--_font-size: var(--odx-typography-font-size-1)}:host([size=\"lg\"]){--_size: var(--odx-size-300);--_spacing: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_size: var(--odx-size-400);--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}::slotted(img){object-fit:cover;position:absolute;inset:0;z-index:1;pointer-events:none}::slotted(odx-icon){font-size:inherit}}";
 
 var __defProp$1e = Object.defineProperty;
 var __getOwnPropDesc$1e = Object.getOwnPropertyDescriptor;
@@ -595,22 +595,33 @@ var __decorateClass$1e = (decorators, target, key, kind) => {
   if (kind && result) __defProp$1e(target, key, result);
   return result;
 };
-let OdxAvatarGroup = class extends CustomElement {
+let OdxAvatar = class extends CustomElement {
   render() {
     return html`<slot></slot>`;
   }
 };
 __decorateClass$1e([
   property({ reflect: true })
-], OdxAvatarGroup.prototype, "size", 2);
+], OdxAvatar.prototype, "size", 2);
 __decorateClass$1e([
   property({ reflect: true })
-], OdxAvatarGroup.prototype, "variant", 2);
-OdxAvatarGroup = __decorateClass$1e([
-  customElement("odx-avatar-group", [styles$14])
-], OdxAvatarGroup);
+], OdxAvatar.prototype, "variant", 2);
+OdxAvatar = __decorateClass$1e([
+  customElement("odx-avatar", [styles$14])
+], OdxAvatar);
 
-const styles$13 = "@layer base{:host{--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3)}:host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: inherit;--_border-radius: 50%;display:flex;flex-direction:column;place-content:center;place-items:center;position:relative;user-select:none;vertical-align:middle;overflow:clip;flex:0 0 auto;block-size:var(--_size);inline-size:var(--_size);margin-block:var(--_spacing);font-size:var(--_font-size);border-radius:var(--_border-radius);background-color:var(--_color-background);color:var(--_color-foreground);transition:var(--odx-transition-default);transition-property:background-color,outline-color,box-shadow}:host-context(odx-avatar-group[variant=\"rectangle\"]),:host([variant=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host-context(odx-avatar-group[size=\"sm\"]),:host([size=\"sm\"]){--_size: var(--odx-size-150);--_spacing: 0;--_font-size: var(--odx-typography-font-size-1)}:host-context(odx-avatar-group[size=\"lg\"]),:host([size=\"lg\"]){--_size: var(--odx-size-300);--_spacing: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-5)}:host-context(odx-avatar-group[size=\"xl\"]),:host([size=\"xl\"]){--_size: var(--odx-size-400);--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}:host-context(odx-navigation-item),:host-context(odx-button){--_color-background: var(--odx-color-transparent-pressed);--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing))}:host-context(odx-button[size=\"sm\"]){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}:host-context(odx-button[size=\"lg\"]){--_size: var(--odx-size-250);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}:host-context(odx-navigation-item[size=\"lg\"]){--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-50))}::slotted(img){object-fit:cover;position:absolute;inset:0;z-index:1;pointer-events:none}::slotted(odx-icon){font-size:inherit}}";
+const AvatarSize = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+const AvatarVariant = {
+  CIRCLE: "circle",
+  RECTANGLE: "rectangle"
+};
+
+const styles$13 = ":host{display:flex;padding-inline:var(--odx-size-25);width:min-content}::slotted(odx-avatar){flex:0 0 auto;z-index:1;border:var(--odx-border-width-thin) solid var(--odx-color-separator)}::slotted(odx-avatar:not(:first-of-type)){margin-inline-start:calc(-.33 * var(--_size))}:host(:is([size=\"lg\"],[size=\"xl\"])){gap:var(--odx-size-50)}";
 
 var __defProp$1d = Object.defineProperty;
 var __getOwnPropDesc$1d = Object.getOwnPropertyDescriptor;
@@ -622,31 +633,29 @@ var __decorateClass$1d = (decorators, target, key, kind) => {
   if (kind && result) __defProp$1d(target, key, result);
   return result;
 };
-let OdxAvatar = class extends CustomElement {
-  render() {
-    return html`<slot></slot>`;
+let OdxAvatarGroup = class extends CustomElement {
+  updated(props) {
+    super.updated?.(props);
+    if (props.has("size") || props.has("variant")) {
+      for (const avatar of this.avatars) {
+        avatar.size = this.size;
+        avatar.variant = this.variant;
+      }
+    }
   }
 };
+__decorateClass$1d([
+  queryAssignedElements({ selector: OdxAvatar.selector })
+], OdxAvatarGroup.prototype, "avatars", 2);
 __decorateClass$1d([
   property({ reflect: true })
-], OdxAvatar.prototype, "size", 2);
+], OdxAvatarGroup.prototype, "size", 2);
 __decorateClass$1d([
   property({ reflect: true })
-], OdxAvatar.prototype, "variant", 2);
-OdxAvatar = __decorateClass$1d([
-  customElement("odx-avatar", [styles$13])
-], OdxAvatar);
-
-const AvatarSize = {
-  SM: "sm",
-  MD: "md",
-  LG: "lg",
-  XL: "xl"
-};
-const AvatarVariant = {
-  CIRCLE: "circle",
-  RECTANGLE: "rectangle"
-};
+], OdxAvatarGroup.prototype, "variant", 2);
+OdxAvatarGroup = __decorateClass$1d([
+  customElement("odx-avatar-group", [styles$13])
+], OdxAvatarGroup);
 
 const styles$12 = "@layer base{@keyframes pulse{0%{box-shadow:0 0 0 0 var(--_color-background)}70%{box-shadow:0 0 0 var(--odx-size-37) transparent}to{box-shadow:0 0 0 0 transparent}}:host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_block-size: var(--odx-size-100);display:inline-block;pointer-events:none;vertical-align:middle}.content{--_font-size: var(--odx-typography-font-size-1);block-size:var(--_block-size);line-height:var(--_block-size);min-inline-size:var(--_block-size);border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);color:var(--_color-foreground);cursor:default;user-select:none;font-weight:var(--odx-typography-font-weight-medium);padding-inline:var(--odx-size-25);text-align:center}}@layer variant{:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-highlight-rest);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-warning-rest);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-foreground: var(--odx-color-foreground-light)}:host([compact]){--_block-size: var(--odx-size-75);.content{inline-size:var(--_block-size);padding:0;margin:var(--odx-size-12)}}:host([pulse]){.content{animation:pulse 1.25s infinite}}}";
 
@@ -840,16 +849,18 @@ var __decorateClass$19 = (decorators, target, key, kind) => {
 const buttonSelector = ":is(odx-button, odx-icon-button)";
 let OdxButtonGroup = class extends CanBeDisabled(CustomElement) {
   constructor() {
-    super(...arguments);
+    super();
     this.block = false;
     this.connected = false;
     this.vertical = false;
+    new DisabledContextProvider(this);
   }
   updated(props) {
     super.updated?.(props);
-    if (props.has("_contextDisabled") || props.has("disabled")) {
-      for (const button of /* @__PURE__ */ new Set([...this.buttons, ...this.allButtons])) {
-        button._contextDisabled = this.isContextDisabled();
+    if (props.has("size") || props.has("variant")) {
+      for (const button of this.buttons) {
+        button.size = this.size;
+        button.variant = this.variant;
       }
     }
   }
@@ -857,9 +868,6 @@ let OdxButtonGroup = class extends CanBeDisabled(CustomElement) {
 __decorateClass$19([
   queryAssignedElements({ selector: buttonSelector, flatten: true })
 ], OdxButtonGroup.prototype, "buttons", 2);
-__decorateClass$19([
-  queryAll(buttonSelector)
-], OdxButtonGroup.prototype, "allButtons", 2);
 __decorateClass$19([
   property({ type: Boolean, reflect: true })
 ], OdxButtonGroup.prototype, "block", 2);
@@ -953,7 +961,7 @@ __decorateClass$18([
   property({ type: Number, attribute: "line-clamp" })
 ], BaseButton.prototype, "lineClamp", 2);
 
-const styles$Z = "@layer base{.base{font-weight:var(--odx-typography-font-weight-medium)}}@layer variant{:host([block]){display:flex}:host-context(odx-input),:host-context(odx-button-group[size=\"sm\"]),:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);--_margin-block: 0}:host-context(odx-button-group[size=\"lg\"]),:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host-context(odx-button-group[variant=\"primary\"]),:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host-context(odx-button-group[variant=\"highlight\"]),:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host,:host-context(odx-button-group[variant=\"secondary\"]),:host([variant=\"secondary\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host-context(odx-input),:host-context(odx-button-group[variant=\"ghost\"]),:host([variant=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground-base);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}:host-context(odx-button-group[variant=\"danger\"]),:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}:host-context(odx-input){--_icon-size: var(--odx-typography-font-size-5)}}";
+const styles$Z = "@layer base{.base{font-weight:var(--odx-typography-font-weight-medium)}}@layer variant{:host([block]){display:flex}:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);--_margin-block: 0}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host,:host([variant=\"secondary\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground-base);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}}";
 
 var __defProp$17 = Object.defineProperty;
 var __getOwnPropDesc$17 = Object.getOwnPropertyDescriptor;
@@ -1067,7 +1075,7 @@ OdxCard = __decorateClass$16([
   customElement("odx-card", [styles$Y])
 ], OdxCard);
 
-const styles$X = "@layer base{:host{display:flex}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-size-75)}}@layer variant{:host(:not([variant=\"inline\"])){flex-direction:column}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):last-of-type){border-block-end:none}}";
+const styles$X = "@layer base{:host{display:flex}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-size-75)}}@layer variant{:host(:not([variant=\"inline\"])){flex-direction:column}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):last-of-type){border-block-end:none}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-separator);padding:var(--odx-size-75);margin:0;inline-size:auto}}";
 
 var __defProp$15 = Object.defineProperty;
 var __getOwnPropDesc$15 = Object.getOwnPropertyDescriptor;
@@ -1122,7 +1130,7 @@ const CheckboxGroupVariant = {
   LIST: "list"
 };
 
-const styles$W = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-color-foreground: var(--odx-palette-transparent);--_label-color-foreground: var(--odx-color-text);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);padding:var(--_indicator-space)}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-controls);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);color:var(--_indicator-color-foreground);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);transition-property:background-color,border-color,outline-color}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host-context(odx-checkbox-group[variant=\"list\"]){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-separator);padding:var(--odx-size-75);margin:0;inline-size:auto}}@layer state{:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover);--_indicator-color-background: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-focus-ring-color)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-selected)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"]):not(:is([aria-disabled],[aria-readonly])):hover){--_indicator-color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-palette-transparent);--_indicator-color-stroke: var(--odx-selection-control-color-border-disabled);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-disabled=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-color-foreground: var(--odx-color-disabled-foreground-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-stroke: var(--odx-color-input-control-stroke-readonly);cursor:default}:host([aria-readonly=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-foreground: var(--odx-color-foreground-base)}}";
+const styles$W = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-color-foreground: var(--odx-palette-transparent);--_label-color-foreground: var(--odx-color-text);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);padding:var(--_indicator-space)}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-controls);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);color:var(--_indicator-color-foreground);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);transition-property:background-color,border-color,outline-color}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}}@layer state{:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover);--_indicator-color-background: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-focus-ring-color)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-selected)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"]):not(:is([aria-disabled],[aria-readonly])):hover){--_indicator-color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-palette-transparent);--_indicator-color-stroke: var(--odx-selection-control-color-border-disabled);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-disabled=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-color-foreground: var(--odx-color-disabled-foreground-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-stroke: var(--odx-color-input-control-stroke-readonly);cursor:default}:host([aria-readonly=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-foreground: var(--odx-color-foreground-base)}}";
 
 var __defProp$14 = Object.defineProperty;
 var __getOwnPropDesc$14 = Object.getOwnPropertyDescriptor;
@@ -1329,7 +1337,7 @@ let OdxCircularProgressBar = class extends CustomElement {
     this.setAttributes();
   }
   disconnectedCallback() {
-    super.disconnectedCallback?.();
+    super.disconnectedCallback();
     SharedResizeObserver.unobserve(this);
   }
   render() {
@@ -1468,7 +1476,7 @@ let OdxDropdown = class extends PopoverHost(CanBeDisabled(CustomElement)) {
     });
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.id ||= getUniqueId("odx-dropdown");
   }
   mountPopover(referenceElement) {
@@ -1555,7 +1563,7 @@ let OdxFormField = class extends CustomElement {
     return this.elements.find((element) => element.hasAttribute(FORM_FIELD_CONTROL_SELECTOR));
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
   }
   render() {
     const isValid = this.control?.checkValidity();
@@ -1823,7 +1831,7 @@ var __decorateClass$V = (decorators, target, key, kind) => {
 };
 let OdxHeaderActions = class extends CustomElement {
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.slot = "actions";
   }
 };
@@ -1900,7 +1908,7 @@ let OdxHeader = class extends CustomElement {
     });
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.role = "banner";
   }
   render() {
@@ -2337,7 +2345,7 @@ OdxLineClamp = __decorateClass$M([
   customElement("odx-line-clamp", [styles$I])
 ], OdxLineClamp);
 
-const styles$H = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-size-75);--_padding-inline: var(--odx-size-50);--_margin-icon: 0;display:flex;flex-direction:column;max-inline-size:100%;block-size:auto;place-items:initial}.base,.spinner{padding-inline-start:calc(var(--odx-size-50) + var(--indent-level) * var(--odx-size-200))}.spinner{padding-inline-end:var(--odx-size-100)}.base{block-size:var(--_block-size);text-align:start;place-content:flex-start;outline-offset:calc(-1 * var(--odx-focus-ring-offset));z-index:1;line-height:var(--odx-typography-line-height-2)}.base:after{display:block;block-size:var(--odx-size-px);background-color:var(--odx-color-separator);position:absolute;inset:auto var(--odx-size-37) -1px;transition:var(--odx-transition-reduced);transition-property:opacity;z-index:0}:host(:is(:not(:last-of-type),[expanded]):not(:is([aria-current],[aria-disabled=\"true\"]))) .base:after{content:\"\"}.content{margin-inline-end:auto}.expand-control::part(icon){transition:var(--odx-transition-reduced);transition-property:transform}}@layer state{:host(:not([muted]):hover):after{opacity:0}:host([muted]:not([aria-disabled=\"true\"])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([aria-current]){--_color-background: var(--odx-color-selected);--_color-background-hover: var(--odx-color-selected-hover)}:host([aria-current][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-disabled-foreground-selected);cursor:not-allowed}:host([aria-expanded=\"true\"]){.expand-control::part(icon){transform:rotate(180deg)}}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}}";
+const styles$H = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-size-75);--_padding-inline: var(--odx-size-50);--_margin-icon: 0;display:flex;flex-direction:column;max-inline-size:100%;block-size:auto;place-items:initial}.base,.spinner{padding-inline-start:calc(var(--odx-size-50) + var(--indent-level) * var(--odx-size-200))}.spinner{padding-inline-end:var(--odx-size-100)}.base{block-size:var(--_block-size);text-align:start;place-content:flex-start;outline-offset:calc(-1 * var(--odx-focus-ring-offset));z-index:1;line-height:var(--odx-typography-line-height-2)}.base:after{display:block;block-size:var(--odx-size-px);background-color:var(--odx-color-separator);position:absolute;inset:auto var(--odx-size-37) -1px;transition:var(--odx-transition-reduced);transition-property:opacity;z-index:0}:host(:is(:not(:last-of-type),[expanded]):not(:is([aria-current],[aria-disabled=\"true\"]))) .base:after{content:\"\"}.content{margin-inline-end:auto}.base>*{--odx-focus-ring-offset: 0}[part=control]::part(icon){transition:var(--odx-transition-reduced);transition-property:transform}}@layer variant{:host(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-size-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part=control]{--_icon-size: var(--odx-size-150)}}}@layer state{:host(:not([muted]):hover):after{opacity:0}:host([muted]:not([aria-disabled=\"true\"])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([aria-current]){--_color-background: var(--odx-color-selected);--_color-background-hover: var(--odx-color-selected-hover)}:host([aria-current][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-disabled-foreground-selected);cursor:not-allowed}:host([aria-expanded=\"true\"]){[part=control]::part(icon){transform:rotate(180deg)}}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}}";
 
 var __defProp$L = Object.defineProperty;
 var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
@@ -2359,8 +2367,10 @@ var _handleClick$4;
 let OdxListItem = class extends CanBeSelected(CanBeExpanded(BaseButton)) {
   constructor() {
     super();
+    this.compact = false;
     this.muted = false;
     this.withControl = false;
+    this.withExpandedIndicator = false;
     __privateAdd$h(this, _handleClick$4, (event) => {
       const expandControl = this.shadowRoot?.querySelector(this.withControl ? ".expand-control" : ".base");
       if (!getElementFromEvent(event, (node) => node === expandControl)) return;
@@ -2375,11 +2385,11 @@ let OdxListItem = class extends CanBeSelected(CanBeExpanded(BaseButton)) {
     }
   }
   isExpandable() {
-    return !this.isContextDisabled() && !this.loading && this.querySelectorAll('[slot="expand"]').length > 0;
+    return !this.disabled && !this.loading && this.querySelectorAll('[slot="expand"]').length > 0;
   }
   connectedCallback() {
     super.connectedCallback();
-    this.role = "listitem";
+    this.role ||= "listitem";
   }
   render() {
     const expandSlot = html`<slot name="expand"></slot>`;
@@ -2397,9 +2407,9 @@ let OdxListItem = class extends CanBeSelected(CanBeExpanded(BaseButton)) {
     return html`
       ${super.renderContent(false)}
       ${when(
-      this.isExpandable(),
+      this.withExpandedIndicator || this.isExpandable(),
       () => html`
-          <odx-icon-button class="expand-control" icon="core::chevron-down" variant="ghost" ?inert=${!this.withControl}>
+          <odx-icon-button part="control" icon="core::chevron-down" size=${this.compact ? "sm" : "md"} variant="ghost" ?disabled=${this.disabled} ?inert=${!this.withControl}>
           </odx-icon-button>
         `
     )}
@@ -2416,17 +2426,23 @@ let OdxListItem = class extends CanBeSelected(CanBeExpanded(BaseButton)) {
   }
 };
 _handleClick$4 = new WeakMap();
+__decorateClass$L([
+  property({ type: Boolean, reflect: true })
+], OdxListItem.prototype, "compact", 2);
 __decorateClass$L([
   property({ type: Boolean, reflect: true })
 ], OdxListItem.prototype, "muted", 2);
 __decorateClass$L([
-  property({ type: Boolean, reflect: true, attribute: "with-control" })
+  property({ type: Boolean, attribute: "with-control" })
 ], OdxListItem.prototype, "withControl", 2);
+__decorateClass$L([
+  property({ type: Boolean, attribute: "with-expanded-indicator" })
+], OdxListItem.prototype, "withExpandedIndicator", 2);
 OdxListItem = __decorateClass$L([
   customElement("odx-list-item", [BaseButton.styles, styles$H])
 ], OdxListItem);
 
-const styles$G = "@layer base{:host{display:block;--item-indent-level: 0}::slotted(odx-list-item){--indent-level: var(--item-indent-level)}}@layer variant{:host([compact]){::slotted(odx-list-item){--_block-size: var(--odx-size-225)}}}";
+const styles$G = "@layer base{:host{display:block;--item-indent-level: 0}::slotted(odx-list-item){--indent-level: var(--item-indent-level)}}";
 
 var __defProp$K = Object.defineProperty;
 var __getOwnPropDesc$K = Object.getOwnPropertyDescriptor;
@@ -2439,18 +2455,11 @@ var __decorateClass$K = (decorators, target, key, kind) => {
   return result;
 };
 let OdxList = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.compact = false;
-  }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.role = "list";
   }
 };
-__decorateClass$K([
-  property({ type: Boolean, reflect: true })
-], OdxList.prototype, "compact", 2);
 OdxList = __decorateClass$K([
   customElement("odx-list", [styles$G])
 ], OdxList);
@@ -2485,7 +2494,7 @@ let OdxLoadingOverlay = class extends WithLoadingState(CustomElement) {
     return this.parentElement ?? this;
   }
   disconnectedCallback() {
-    super.disconnectedCallback?.();
+    super.disconnectedCallback();
     this.hideOverlay();
   }
   async updated(props) {
@@ -2601,7 +2610,7 @@ let OdxLogo = class extends CustomElement {
     this.compact = false;
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.ariaLabel ||= "Dräger";
     this.ariaRoleDescription ||= "Logo";
     this.role = "img";
@@ -2770,7 +2779,7 @@ let OdxMainMenu = class extends CustomElement {
     }
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.popover = "auto";
   }
   toggle() {
@@ -2836,7 +2845,7 @@ let OdxMenuItem = class extends BaseButton {
     `;
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.role ||= "menuitem";
   }
   renderOverlay() {
@@ -2931,7 +2940,7 @@ let OdxMenu = class extends PopoverHost(CustomElement) {
     return Array.from(this.querySelectorAll(MENU_ITEMS_SELECTOR));
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.role ||= "menu";
   }
   mountPopover(referenceElement) {
@@ -3034,7 +3043,7 @@ let OdxModal = class extends CustomElement {
     }
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.id ||= getUniqueId("odx-modal");
   }
   async show() {
@@ -3278,7 +3287,7 @@ const PageLayout = {
   WIDE: "wide"
 };
 
-const styles$s = "@layer base{:host{display:block}}";
+const styles$s = "@layer base{:host{display:block}odx-icon-button::part(anchor){outline-offset:0}}";
 
 var __defProp$t = Object.defineProperty;
 var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
@@ -3338,11 +3347,15 @@ let OdxPagination = class extends IsLocalized(CustomElement) {
     return html`
       <odx-stack align="center" gap="xs" justify="end">
         <span>${this.t("odx.pagination.summary", this.paginationContext)}</span>
-        <odx-icon-button ?disabled=${!hasPreviousPage} icon="core::chevron-left-end" variant="ghost" @click=${() => this.firstPage()}></odx-icon-button>
-        <odx-icon-button ?disabled=${!hasPreviousPage} icon="core::chevron-left" variant="ghost" @click=${() => this.previousPage()}></odx-icon-button>
+        <odx-button-group ?disabled=${!hasPreviousPage} connected variant="ghost">
+          <odx-icon-button  icon="core::chevron-left-end" @click=${() => this.firstPage()}></odx-icon-button>
+          <odx-icon-button  icon="core::chevron-left" @click=${() => this.previousPage()}></odx-icon-button>
+        </odx-button-group>
         <span>${this.t("odx.pagination.pageCount.default", this.paginationContext)}</span>
-        <odx-icon-button ?disabled=${!hasNextPage} icon="core::chevron-right" variant="ghost" @click=${() => this.nextPage()}></odx-icon-button>
-        <odx-icon-button ?disabled=${!hasNextPage} icon="core::chevron-right-end" variant="ghost" @click=${() => this.lastPage()}></odx-icon-button>
+        <odx-button-group ?disabled=${!hasNextPage} connected variant="ghost">
+          <odx-icon-button icon="core::chevron-right"  @click=${() => this.nextPage()}></odx-icon-button>
+          <odx-icon-button icon="core::chevron-right-end"  @click=${() => this.lastPage()}></odx-icon-button>
+        </odx-button-group>
       </odx-stack>
     `;
   }
@@ -3468,7 +3481,7 @@ var __decorateClass$r = (decorators, target, key, kind) => {
 };
 let OdxRadioButton = class extends CheckboxFormControl {
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.role = "radio";
   }
   render() {
@@ -3518,7 +3531,7 @@ const RadioGroupVariant = {
   LIST: "list"
 };
 
-const styles$o = ":host{--min-inline-size: 180px;--max-inline-size: 240px;display:flex;flex-direction:column;block-size:100%;padding-inline:var(--odx-size-50);padding-block:var(--odx-size-150);gap:var(--odx-size-75);max-inline-size:var(--max-inline-size);min-inline-size:var(--min-inline-size);transition:var(--odx-transition-default);transition-property:min-inline-size,max-inline-size}.toggle-control{margin-block-start:auto}.toggle-icon{transition:var(--odx-transition-default);transition-property:transform}:host([collapsed]:not([collapsed=\"false\"])){--min-inline-size: var(--odx-size-400);--max-inline-size: var(--odx-size-400);.toggle-icon{transform:rotateY(-180deg)}}";
+const styles$o = ":host{--min-inline-size: 180px;--max-inline-size: 240px;display:flex;flex-direction:column;block-size:100%;padding-inline:var(--odx-size-50);padding-block:var(--odx-size-150);gap:var(--odx-size-75);max-inline-size:var(--max-inline-size);min-inline-size:var(--min-inline-size);transition:var(--odx-transition-default);transition-property:min-inline-size,max-inline-size}.toggle-control{margin-block-start:auto}.toggle-icon{transition:var(--odx-transition-default);transition-property:transform}:host([collapsed]:not([collapsed=\"false\"])){--min-inline-size: var(--odx-size-400);--max-inline-size: var(--odx-size-400);.toggle-icon{transform:rotateY(-180deg)}}::slotted(odx-spacer){--size: var(--odx-size-300);--gap-offset: var(--odx-size-75)}";
 
 var __defProp$p = Object.defineProperty;
 var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
@@ -3648,7 +3661,7 @@ let OdxSearchBar = class extends CustomElement {
     this.dispatchEvent(new SearchEvent(value, this.inputElement.value));
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.role = "presentation";
   }
   updated(props) {
@@ -3941,7 +3954,7 @@ let OdxSliderHandle = class extends IsDraggable(NumberControl(CustomElement)) {
     return Math.ceil(this.context.minRange / this.context.step) * this.context.step;
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.role = "slider";
     this.slot = "thumbs";
     this.tabIndex = 0;
@@ -4086,7 +4099,7 @@ let OdxSliderMarks = class extends CustomElement {
     this.showLabels = false;
   }
   async connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.slot = "marks";
   }
   render() {
@@ -4231,7 +4244,7 @@ OdxSlider = __decorateClass$i([
   customElement("odx-slider", [styles$h])
 ], OdxSlider);
 
-const styles$g = ":host{--gap-offset: 0;--size: 0;display:block;inline-size:100%;block-size:var(--size);margin:calc(-1 * var(--gap-offset)) 0}:host([dynamic]){block-size:100%;flex:1 1 auto;max-block-size:var(--size)}:host([horizontal]){block-size:100%;inline-size:var(--size);margin:0 calc(-1 * var(--gap-offset))}:host([dynamic][horizontal]){inline-size:100%;max-inline-size:var(--size)}:host([fill]){min-block-size:var(--size);flex:1 1 var(--size)}:host([fill][horizontal]){min-inline-size:var(--size);flex:1 1 var(--size)}:host([fill][dynamic]){min-block-size:auto;min-inline-size:auto;max-block-size:100%;flex:1 1 auto}:host-context(odx-rail-navigation){--size: var(--odx-size-300);--gap-offset: var(--odx-size-75)}";
+const styles$g = ":host{--gap-offset: 0;--size: 0;display:block;inline-size:100%;block-size:var(--size);margin:calc(-1 * var(--gap-offset)) 0}:host([dynamic]){block-size:100%;flex:1 1 auto;max-block-size:var(--size)}:host([horizontal]){block-size:100%;inline-size:var(--size);margin:0 calc(-1 * var(--gap-offset))}:host([dynamic][horizontal]){inline-size:100%;max-inline-size:var(--size)}:host([fill]){min-block-size:var(--size);flex:1 1 var(--size)}:host([fill][horizontal]){min-inline-size:var(--size);flex:1 1 var(--size)}:host([fill][dynamic]){min-block-size:auto;min-inline-size:auto;max-block-size:100%;flex:1 1 auto}";
 
 var __defProp$h = Object.defineProperty;
 var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
@@ -4420,7 +4433,7 @@ const StackJustify = {
   SPACE_EVENLY: "space-evenly"
 };
 
-const styles$d = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_track-color-background: var(--odx-color-selection-control-fill);--_track-size: var(--odx-size-50);--_track-color-stroke: var(--odx-color-selection-control-stroke);--_thumb-color-background: var(--_track-color-background);--_thumb-color-stroke: var(--_track-color-stroke);--_thumb-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_thumb-position: 0;--_label-color-foreground: var(--odx-color-foreground-base);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-items:center;block-size:var(--odx-size-150);position:relative;transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color,translate}.track,.thumb{border-radius:var(--_thumb-size);border-radius:var(--odx-border-radius-circle);border:var(--odx-border-width-thin) solid var(--_thumb-color-stroke);transition:inherit}.track{background-color:var(--_track-color-background);block-size:var(--_track-size);inline-size:var(--odx-size-225)}.thumb{display:flex;place-content:center;place-items:center;block-size:var(--_thumb-size);inline-size:var(--_thumb-size);background-color:var(--_thumb-color-background);color:var(--_indicator-color-foreground);position:absolute;inset-inline-start:0;box-shadow:var(--odx-shadow-level-0);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);translate:var(--_thumb-position) 0}.label{display:inline-block;cursor:inherit}.content{padding-inline-end:var(--odx-size-25);color:var(--_label-color-foreground);transition-property:color}:host-context(odx-checkbox-group[variant=\"list\"]){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-separator);padding:var(--odx-size-75);margin:0;inline-size:auto}}@layer state{:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:not(:is([aria-checked=\"true\"],[aria-disabled=\"true\"],[aria-readonly=\"true\"])):hover){--_track-color-stroke: var(--odx-color-selection-control-stroke-hover);--_thumb-color-background: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible) .thumb{outline-color:var(--odx-focus-ring-color)}:host([aria-checked=\"true\"]){--_track-color-background: var(--odx-color-selection-control-fill-selected);--_track-color-stroke: var(--odx-color-selection-control-stroke-selected);--_thumb-position: calc(var(--odx-size-225) - 100%)}:host([aria-checked=\"true\"]:not(:is([aria-disabled=\"true\"],[aria-readonly=\"true\"])):hover){--_track-color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_track-color-background: var(--odx-color-disabled-fill);--_track-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed;.thumb{box-shadow:none}}:host([aria-disabled=\"true\"][aria-checked=\"true\"]){--_track-color-background: var(--odx-color-disabled-fill-selected)}:host([aria-readonly=\"true\"]){cursor:default}}";
+const styles$d = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_track-color-background: var(--odx-color-selection-control-fill);--_track-size: var(--odx-size-50);--_track-color-stroke: var(--odx-color-selection-control-stroke);--_thumb-color-background: var(--_track-color-background);--_thumb-color-stroke: var(--_track-color-stroke);--_thumb-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_thumb-position: 0;--_label-color-foreground: var(--odx-color-foreground-base);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-items:center;block-size:var(--odx-size-150);position:relative;transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color,translate}.track,.thumb{border-radius:var(--_thumb-size);border-radius:var(--odx-border-radius-circle);border:var(--odx-border-width-thin) solid var(--_thumb-color-stroke);transition:inherit}.track{background-color:var(--_track-color-background);block-size:var(--_track-size);inline-size:var(--odx-size-225)}.thumb{display:flex;place-content:center;place-items:center;block-size:var(--_thumb-size);inline-size:var(--_thumb-size);background-color:var(--_thumb-color-background);color:var(--_indicator-color-foreground);position:absolute;inset-inline-start:0;box-shadow:var(--odx-shadow-level-0);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);translate:var(--_thumb-position) 0}.label{display:inline-block;cursor:inherit}.content{padding-inline-end:var(--odx-size-25);color:var(--_label-color-foreground);transition-property:color}}@layer state{:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:not(:is([aria-checked=\"true\"],[aria-disabled=\"true\"],[aria-readonly=\"true\"])):hover){--_track-color-stroke: var(--odx-color-selection-control-stroke-hover);--_thumb-color-background: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible) .thumb{outline-color:var(--odx-focus-ring-color)}:host([aria-checked=\"true\"]){--_track-color-background: var(--odx-color-selection-control-fill-selected);--_track-color-stroke: var(--odx-color-selection-control-stroke-selected);--_thumb-position: calc(var(--odx-size-225) - 100%)}:host([aria-checked=\"true\"]:not(:is([aria-disabled=\"true\"],[aria-readonly=\"true\"])):hover){--_track-color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_track-color-background: var(--odx-color-disabled-fill);--_track-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed;.thumb{box-shadow:none}}:host([aria-disabled=\"true\"][aria-checked=\"true\"]){--_track-color-background: var(--odx-color-disabled-fill-selected)}:host([aria-readonly=\"true\"]){cursor:default}}";
 
 var __defProp$e = Object.defineProperty;
 var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
@@ -4472,7 +4485,7 @@ var __decorateClass$d = (decorators, target, key, kind) => {
 };
 let OdxTableBody = class extends CustomElement {
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.role = "rowgroup";
   }
   render() {
@@ -4497,7 +4510,7 @@ var __decorateClass$c = (decorators, target, key, kind) => {
 };
 let OdxTableCell = class extends CustomElement {
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.role = "gridcell";
   }
   render() {
@@ -4527,16 +4540,15 @@ var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Ca
 var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod$4 = (obj, member, method) => (__accessCheck$4(obj, member, "access private method"), method);
 var _OdxTableCheckboxCell_instances, handleChange_fn$1;
-let OdxTableCheckboxCell = class extends CustomElement {
+let OdxTableCheckboxCell = class extends CanBeDisabled(CustomElement) {
   constructor() {
     super(...arguments);
     __privateAdd$4(this, _OdxTableCheckboxCell_instances);
     this.checked = false;
-    this.disabled = false;
     this.indeterminate = false;
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.role = "gridcell";
   }
   click() {
@@ -4560,9 +4572,6 @@ __decorateClass$b([
 __decorateClass$b([
   property({ type: Boolean })
 ], OdxTableCheckboxCell.prototype, "checked", 2);
-__decorateClass$b([
-  property({ type: Boolean })
-], OdxTableCheckboxCell.prototype, "disabled", 2);
 __decorateClass$b([
   property({ type: Boolean })
 ], OdxTableCheckboxCell.prototype, "indeterminate", 2);
@@ -4588,7 +4597,7 @@ let OdxTableHeaderCell = class extends CustomElement {
     this.sortable = false;
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.role = "columnheader";
   }
   render() {
@@ -4631,7 +4640,7 @@ let OdxTableHeader = class extends CheckboxFormControl {
     __privateAdd$3(this, _OdxTableHeader_instances);
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.role = "row";
   }
   render() {
@@ -4673,11 +4682,10 @@ var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "rea
 var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod$2 = (obj, member, method) => (__accessCheck$2(obj, member, "access private method"), method);
 var _OdxTableRow_instances, handleSelectedChange_fn, handleSelectableChange_fn, _handleClick, _handleChange$1, handleSlotchange_fn, isCheckboxCell_fn;
-let OdxTableRow = class extends CustomElement {
+let OdxTableRow = class extends CanBeDisabled(CustomElement) {
   constructor() {
     super(...arguments);
     __privateAdd$2(this, _OdxTableRow_instances);
-    this.disabled = false;
     this.selected = false;
     this.selectable = true;
     this.value = "";
@@ -4695,7 +4703,7 @@ let OdxTableRow = class extends CustomElement {
     });
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.role = "row";
   }
   render() {
@@ -4743,9 +4751,6 @@ isCheckboxCell_fn = function(element) {
 __decorateClass$8([
   queryAssignedElements({ selector: OdxTableCheckboxCell.selector, flatten: true })
 ], OdxTableRow.prototype, "checkboxCells", 2);
-__decorateClass$8([
-  property({ type: Boolean, reflect: true })
-], OdxTableRow.prototype, "disabled", 2);
 __decorateClass$8([
   property({ type: Boolean, reflect: true })
 ], OdxTableRow.prototype, "selected", 2);
@@ -4813,7 +4818,7 @@ let OdxTable = class extends CustomElement {
     return Array.from(this.querySelectorAll(OdxTableRow.selector));
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.role = "grid";
   }
   render() {
@@ -4947,7 +4952,7 @@ let OdxToggleButton = class extends CheckboxFormControl {
     this.pressed = false;
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.role = "button";
   }
   updateAriaAttributes() {
@@ -5063,7 +5068,7 @@ let OdxTooltip = class extends PopoverHost(CustomElement) {
     });
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.id ||= getUniqueId("odx-tooltip");
     this.role = "tooltip";
   }

package/dist/i18n/lib/config.d.ts

@@ -22,6 +22,8 @@ export interface FormatOptions {
 }
 export interface LocalizationOptions {
     defaultLocale: () => LocaleInput;
+    fallbackLanguage: () => Intl.UnicodeBCP47LocaleIdentifier;
+    fallbackTranslation: (key: string) => string;
 }
 export type I18nOptions = LocalizationOptions & FormatOptions;
 export declare function setI18nOptions(options?: Partial<I18nOptions> | null): void;

package/dist/i18n/lib/{is-localized.mixin.d.ts → is-localized.d.ts}

@@ -12,4 +12,4 @@ export interface IsLocalized {
     formatRelativeTime: typeof formatRelativeTime;
 }
 export declare const IsLocalized: <T extends Constructor<CustomElement>>(superClass: T) => Constructor<IsLocalized> & T;
-//# sourceMappingURL=is-localized.mixin.d.ts.map
+//# sourceMappingURL=is-localized.d.ts.map

package/dist/i18n/lib/translate.d.ts

@@ -1,9 +1,9 @@
 import { ReadonlySignal } from '@lit-labs/preact-signals';
 import { LocaleInput } from './models.js';
-export type TranslateContext = Record<string, string | number | boolean> | string | number | boolean | null;
 type Translation = {
     [key: string]: Translation | string;
 };
+export type TranslateContext = Record<string, string | number | boolean> | string | number | boolean | null;
 export declare function interpolate(value: string, context: Record<string, string | number>): string;
 export declare function setTranslation(locale: LocaleInput, translation: Translation): void;
 export declare function translate(key: string, contextInput?: TranslateContext, locale?: LocaleInput | null): ReadonlySignal<string>;

package/dist/i18n/main.d.ts

@@ -1,6 +1,6 @@
 export * from './lib/config.js';
 export * from './lib/format.js';
-export * from './lib/is-localized.mixin.js';
+export * from './lib/is-localized.js';
 export * from './lib/localization.js';
 export * from './lib/models.js';
 export * from './lib/translate.js';

package/dist/i18n.js

@@ -5,6 +5,8 @@ import { k as flattenObject, l as isNotNil } from './vendor-C_WVAD3D.js';
 
 const I18nOptions = createOptions({
   defaultLocale: () => navigator.language,
+  fallbackLanguage: () => "en",
+  fallbackTranslation: (key) => key,
   relativeTimeFormatOptions: { minUnit: "minute" }
 });
 const i18nOptions = signal(null);
@@ -79,7 +81,6 @@ function syncDocumentLanguage(root = document.documentElement) {
   });
 }
 
-const fallbackLocale = "en";
 const translations = signal({});
 function interpolate(value, context) {
   return value.replaceAll(/\{\{\s*([^}\s]+)\s*}}/g, (match, variableName) => {
@@ -92,11 +93,13 @@ function setTranslation(locale, translation) {
 }
 function translate(key, contextInput, locale) {
   return computed(() => {
-    const translationRecord = getTranslationRecord(locale);
-    if (!translationRecord) return key;
-    const value = translationRecord?.[key] ?? getTranslationRecord(fallbackLocale)?.[key] ?? "";
+    const translation = getTranslationRecord(locale);
+    if (!translation) return key;
+    const { fallbackLanguage, fallbackTranslation: fallbackTranslateKey } = getI18nOptions();
+    const fallbackTranslation = getTranslationRecord(fallbackLanguage());
+    const value = translation?.[key] ?? fallbackTranslation?.[key] ?? fallbackTranslateKey(key);
     const context = typeof contextInput === "object" || contextInput === void 0 ? flattenObject(contextInput ?? {}) : { $implicit: contextInput.toString() };
-    return interpolate(value, { ...getTranslationRecord(fallbackLocale), ...translationRecord, ...context });
+    return interpolate(value, { ...fallbackTranslation, ...translation, ...context });
   });
 }
 function getTranslationRecord(localeInput) {

package/dist/lib/custom-element.d.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, HTMLTemplateResult, LitElement, TemplateResult } from 'lit';
-export declare function isCustomElementClass(candidate: unknown): candidate is typeof CustomElement;
 export declare function customElement(selector?: keyof HTMLElementTagNameMap, styles?: Array<string | CSSResultGroup>): (target: typeof CustomElement) => void;
 export declare class CustomElement extends LitElement {
     static selector: string;

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

@@ -1,9 +1,15 @@
+import { ContextProvider } from '@lit/context';
 import { CustomElement } from '../custom-element.js';
 import { Constructor } from './dedupe-mixin.js';
 export interface CanBeDisabled {
     disabled: boolean;
-    _contextDisabled: boolean;
-    isContextDisabled(): boolean;
+}
+export declare const DisabledContext: {
+    __context__: boolean;
+};
+export declare class DisabledContextProvider extends ContextProvider<typeof DisabledContext, CanBeDisabled & CustomElement> {
+    constructor(host: CanBeDisabled & CustomElement);
+    hostUpdated(): void;
 }
 export declare const CanBeDisabled: <T extends Constructor<CustomElement>>(superClass: T) => Constructor<CanBeDisabled> & T;
 //# sourceMappingURL=can-be-disabled.d.ts.map

package/dist/loader.js

@@ -1,11 +1,10 @@
-import { isCustomElementClass } from '@odx/foundation';
 import * as cdkComponents from '@odx/foundation/cdk';
 import * as components from '@odx/foundation/components';
 
 async function defineCustomElements() {
   for (const entry of Object.values({ ...components, ...cdkComponents })) {
-    if (!isCustomElementClass(entry)) continue;
-    entry.define();
+    if (typeof entry !== "function") continue;
+    entry.define?.();
   }
 }
 defineCustomElements();

package/dist/main.js

@@ -1,7 +1,8 @@
 import { r as round, t as toMerged, c as createFocusTrap, u as uniqBy, R as RovingTabindexController } from './vendor-C_WVAD3D.js';
-import { isServer, nothing, html, LitElement, unsafeCSS, CSSResult } from 'lit';
+import { isServer, nothing, html, LitElement, unsafeCSS } from 'lit';
 import { directive, Directive } from 'lit/directive.js';
 import { property, queryAssignedElements } from 'lit/decorators.js';
+import { createContext, ContextProvider, consume } from '@lit/context';
 export { effect } from '@lit-labs/preact-signals';
 
 function createMutationObserver(callback) {
@@ -154,26 +155,25 @@ class SlotFallbackDirective extends Directive {
 }
 const emptySlotFallbackFix = directive(SlotFallbackDirective);
 
-const customElementStyles = "@layer reset,base,variant,state,theme,override;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:before,:after{box-sizing:border-box}[popover]{border:none;outline:none}img,picture,video,canvas,svg{display:block;max-width:100%;margin:0}input,button,textarea,select{font:inherit;margin:0}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate;margin:0}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer reset{:host{border:none;border-color:transparent;outline:none}}";
+const customElementStyles = "@layer reset,base,variant,state;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:before,:after{box-sizing:border-box}[popover]{border:none;outline:none}img,picture,video,canvas,svg{display:block;max-width:100%;margin:0}input,button,textarea,select{font:inherit;margin:0}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate;margin:0}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer reset{:host{border:none;border-color:transparent;outline:none}}";
 
-function toCSSResult(value) {
-  return value instanceof CSSResult || value instanceof CSSStyleSheet ? value : unsafeCSS(value);
-}
-function isCustomElementClass(candidate) {
-  if (!candidate || typeof candidate !== "function") return false;
-  return "selector" in candidate && "define" in candidate && typeof candidate.define === "function";
+function mergeStyleSheets(...stylesheets) {
+  const mergedStyles = [];
+  for (const styles of stylesheets) {
+    if (!styles) continue;
+    mergedStyles.push(typeof styles === "string" ? unsafeCSS(styles) : styles);
+  }
+  return uniqBy(mergedStyles, String).flat(10);
 }
 function customElement(selector, styles = []) {
   return (target) => {
-    const preparedStyles = [customElementStyles, target.styles ?? [], ...styles].filter(Boolean).flat(2).map(toCSSResult);
-    if (selector) {
-      target.styles = uniqBy(preparedStyles, String);
-      target.selector = selector;
-      target.define = () => {
-        if (customElements.get(selector)) return;
-        customElements.define(selector, target);
-      };
-    }
+    if (!selector) return;
+    target.selector = selector;
+    target.styles = mergeStyleSheets(customElementStyles, target.styles, ...styles);
+    target.define = () => {
+      if (customElements.get(selector)) return;
+      customElements.define(selector, target);
+    };
   };
 }
 class CustomElement extends LitElement {
@@ -225,32 +225,37 @@ var __decorateClass$c = (decorators, target, key, kind) => {
   if (kind && result) __defProp$c(target, key, result);
   return result;
 };
+const DisabledContext = createContext(Symbol("odx-disabled-context"));
+class DisabledContextProvider extends ContextProvider {
+  constructor(host) {
+    super(host, { context: DisabledContext, initialValue: false });
+  }
+  hostUpdated() {
+    if (this.host.disabled === this.value) return;
+    this.setValue(this.host.disabled);
+  }
+}
 const CanBeDisabled = dedupeMixin((superClass) => {
   class CanBeDisabledMixin extends superClass {
     constructor() {
       super(...arguments);
       this.#initialTabIndex = null;
-      this._contextDisabled = false;
       this.disabled = false;
     }
     #initialTabIndex;
-    isContextDisabled() {
-      return this._contextDisabled || this.disabled;
-    }
     connectedCallback() {
-      super.connectedCallback?.();
+      super.connectedCallback();
       this.#initialTabIndex = this.hasAttribute("tabindex") ? this.tabIndex : null;
     }
     willUpdate(props) {
       super.willUpdate?.(props);
-      if (props.has("_contextDisabled") || props.has("disabled")) {
+      if (props.has("disabled")) {
         this.#handleDisabledChange();
       }
     }
     #handleDisabledChange() {
-      const disabled = this.isContextDisabled();
-      this.ariaDisabled = toAriaBooleanAttribute(disabled);
-      if (disabled) {
+      this.ariaDisabled = toAriaBooleanAttribute(this.disabled);
+      if (this.disabled) {
         this.tabIndex = -1;
       } else if (this.#initialTabIndex !== null) {
         this.tabIndex = this.#initialTabIndex;
@@ -260,9 +265,7 @@ const CanBeDisabled = dedupeMixin((superClass) => {
     }
   }
   __decorateClass$c([
-    property({ type: Boolean })
-  ], CanBeDisabledMixin.prototype, "_contextDisabled", 2);
-  __decorateClass$c([
+    consume({ context: DisabledContext, subscribe: true }),
     property({ type: Boolean })
   ], CanBeDisabledMixin.prototype, "disabled", 2);
   return CanBeDisabledMixin;
@@ -506,7 +509,7 @@ class CheckboxFormControl extends FormControl(CustomElement) {
   }
   connectedCallback() {
     this.tabIndex = 0;
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.role ||= "checkbox";
   }
   updateAriaAttributes() {
@@ -650,7 +653,7 @@ class OptionControl extends CanBeDisabled(CustomElement) {
     this.removeAttribute("odx-active");
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.role ||= "option";
   }
   willUpdate(changes) {
@@ -700,7 +703,7 @@ class RadioGroupFormControl extends FormControl(CustomElement) {
     return this.elements.filter((element) => this.isControl(element));
   }
   connectedCallback() {
-    super.connectedCallback?.();
+    super.connectedCallback();
     this.role ||= "radiogroup";
   }
   isControl(element) {
@@ -871,7 +874,7 @@ const CanBeExpanded = dedupeMixin((superClass) => {
     }
     toggle(force, emitEvent = false) {
       const newState = force ?? !this.expanded;
-      if (this.isContextDisabled() || this.expanded === newState) return;
+      if (this.disabled || this.expanded === newState) return;
       const currentState = this.expanded;
       this.expanded = newState;
       if (!emitEvent || !this.emit(newState ? "expand" : "collapse", { composed: true, bubbles: true })) return;
@@ -1127,4 +1130,4 @@ class SharedResizeObserverInstance {
 }
 const SharedResizeObserver = new SharedResizeObserverInstance();
 
-export { CanBeDisabled, CanBeExpanded, CanBeReadonly, CanBeRequired, CanBeSelected, CanBeValidated, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, FocusTrapController, FormControl, KeyboardKey, NumberControl, OptionControl, RadioGroupFormControl, SelectFormControl, SharedIntersectionObserver, SharedResizeObserver, WithLoadingState, clearUniqueIdCache, createIntersectionObserver, createMutationObserver, createOptions, createResizeObserver, customElement, dedupeMixin, emptySlotFallbackFix, findClosestDocument, forwardEvent, fromAriaBooleanAttribute, getAssignedElements, getElementFromEvent, getKeyboardEventInfo, getUniqueId, isCustomElementClass, optionalAttr, optionalSlot, parseDate, requestUpdateOnAriaChange, searchTextContent, toAriaBooleanAttribute, toPx, toggleAttribute, waitForAnimations };
+export { CanBeDisabled, CanBeExpanded, CanBeReadonly, CanBeRequired, CanBeSelected, CanBeValidated, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, DisabledContext, DisabledContextProvider, FocusTrapController, FormControl, KeyboardKey, NumberControl, OptionControl, RadioGroupFormControl, SelectFormControl, SharedIntersectionObserver, SharedResizeObserver, WithLoadingState, clearUniqueIdCache, createIntersectionObserver, createMutationObserver, createOptions, createResizeObserver, customElement, dedupeMixin, emptySlotFallbackFix, findClosestDocument, forwardEvent, fromAriaBooleanAttribute, getAssignedElements, getElementFromEvent, getKeyboardEventInfo, getUniqueId, optionalAttr, optionalSlot, parseDate, requestUpdateOnAriaChange, searchTextContent, toAriaBooleanAttribute, toPx, toggleAttribute, waitForAnimations };

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.0",
+  "version": "1.0.0-beta.2",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -21,8 +21,8 @@
   "devDependencies": {
     "@floating-ui/dom": "1.6.13",
     "@odx/typescript-config": "*",
-    "@spectrum-web-components/reactive-controllers": "1.3.0",
-    "es-toolkit": "1.33.0",
+    "@spectrum-web-components/reactive-controllers": "1.4.0",
+    "es-toolkit": "1.34.1",
     "focus-trap": "7.6.4",
     "ts-lit-plugin": "2.0.2",
     "vite": "6.2.3",
@@ -32,7 +32,7 @@
   "peerDependencies": {
     "@odx/icons": "^4.0.0-rc.15"
   },
-  "sideEffects": ["dist/loader.js", "dist/i18n.js", "*.css"],
+  "sideEffects": ["dist/loader.js", "*.css"],
   "exports": {
     ".": {
       "import": "./dist/main.js",