@odx/foundation 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/components.js

@@ -1,20 +1,21 @@
-import { CustomElement, customElement, toAriaBooleanAttribute, optionalAttr, WithLoadingState, IsLocalized, parseDate, requestUpdateOnAriaChange, SharedResizeObserver, toPx, optionalSlot } from '@odx/foundation';
-import { html, css, nothing } from 'lit';
+import { CustomElement, customElement, toAriaBooleanAttribute, optionalAttr, requestUpdateOnAriaChange, WithLoadingState, CheckboxControl, CheckboxGroupControl, IsLocalized, parseDate, OptionControl, SharedResizeObserver, toPx, optionalSlot, RadioGroupControl, IsTranslatable } from '@odx/foundation';
+import { html, isServer, css, nothing } from 'lit';
 import { property, queryAssignedElements, query } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import { B as BaseLink } from './base-link-CvZZE13a.js';
 import { clamp, debounce } from 'es-toolkit';
+export { c as RadioGroupControl } from './radio-group-control-QWelHLuv.js';
 
-const styles$m = ":host{--_background-color: var(--odx-avatar-background, var(--odx-palette-coolgray-20));--_border-radius: 50%;display:flex;flex-direction:column;place-content:center;place-items:center;position:relative;user-select:none;vertical-align:middle;overflow:clip;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(--_background-color);transition:var(--odx-transition-base);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,:host-context(odx-avatar-group[size=\"md\"]),:host([size=\"md\"]){--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3)}:host-context(odx-avatar-group[size=\"lg\"]),:host([size=\"lg\"]){--_size: var(--odx-avatar-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-avatar-lg-size, var(--odx-size-600));--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}:has(img){--odx-avatar-background: red}::slotted(img){object-fit:cover;position:absolute;inset:0;z-index:1;pointer-events:none}::slotted(odx-icon){font-size:inherit}";
+const styles$r = ":host{--_background-color: var(--odx-avatar-background, var(--odx-palette-coolgray-20));--_border-radius: 50%;display:flex;flex-direction:column;place-content:center;place-items:center;position:relative;user-select:none;vertical-align:middle;overflow:clip;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(--_background-color);transition:var(--odx-transition-base);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,:host-context(odx-avatar-group[size=\"md\"]),:host([size=\"md\"]){--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3)}:host-context(odx-avatar-group[size=\"lg\"]),:host([size=\"lg\"]){--_size: var(--odx-avatar-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-avatar-lg-size, var(--odx-size-600));--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}:has(img){--odx-avatar-background: red}::slotted(img){object-fit:cover;position:absolute;inset:0;z-index:1;pointer-events:none}::slotted(odx-icon){font-size:inherit}";
 
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __decorateClass$t = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
+var __defProp$s = Object.defineProperty;
+var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
+var __decorateClass$y = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$o(target, key, result);
+  if (kind && result) __defProp$s(target, key, result);
   return result;
 };
 let OdxAvatarComponent = class extends CustomElement {
@@ -22,14 +23,14 @@ let OdxAvatarComponent = class extends CustomElement {
     return html`<slot></slot>`;
   }
 };
-__decorateClass$t([
+__decorateClass$y([
   property({ reflect: true })
 ], OdxAvatarComponent.prototype, "size", 2);
-__decorateClass$t([
+__decorateClass$y([
   property({ reflect: true })
 ], OdxAvatarComponent.prototype, "variant", 2);
-OdxAvatarComponent = __decorateClass$t([
-  customElement("odx-avatar", [styles$m])
+OdxAvatarComponent = __decorateClass$y([
+  customElement("odx-avatar", [styles$r])
 ], OdxAvatarComponent);
 
 const AvatarSize = {
@@ -43,16 +44,16 @@ const AvatarVariant = {
   RECTANGLE: "rectangle"
 };
 
-const styles$l = ":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-outline-sm);border-color:var(--odx-color-surface)}::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$q = ":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-outline-sm);border-color:var(--odx-color-surface)}::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$n = Object.defineProperty;
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __decorateClass$s = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
+var __defProp$r = Object.defineProperty;
+var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
+var __decorateClass$x = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$n(target, key, result);
+  if (kind && result) __defProp$r(target, key, result);
   return result;
 };
 let OdxAvatarGroupComponent = class extends CustomElement {
@@ -60,26 +61,26 @@ let OdxAvatarGroupComponent = class extends CustomElement {
     return html`<slot></slot>`;
   }
 };
-__decorateClass$s([
+__decorateClass$x([
   property({ reflect: true })
 ], OdxAvatarGroupComponent.prototype, "size", 2);
-__decorateClass$s([
+__decorateClass$x([
   property({ reflect: true })
 ], OdxAvatarGroupComponent.prototype, "variant", 2);
-OdxAvatarGroupComponent = __decorateClass$s([
-  customElement("odx-avatar-group", [styles$l])
+OdxAvatarGroupComponent = __decorateClass$x([
+  customElement("odx-avatar-group", [styles$q])
 ], OdxAvatarGroupComponent);
 
-const styles$k = ":host{--_color-fill: var(--odx-color-surface);--_color-text: var(--odx-color-text);display:inline-block;line-height:0}:host::part(content){block-size:var(--odx-size-150);line-height:var(--odx-size-150);min-inline-size:var(--odx-size-150);border-radius:var(--odx-size-150);background-color:var(--_color-fill);color:var(--_color-text);cursor:default;user-select:none;font-weight:var(--odx-typography-font-weight-medium);padding-inline:var(--odx-size-75);text-align:center}:host([variant=\"primary\"])::part(content){--_color-fill: var(--odx-color-primary-rest);--_color-text: var(--odx-color-foreground-light)}:host,:host([variant=\"neutral\"])::part(content){--_color-fill: var(--odx-experience-color-secondary-rest);--_color-text: var(--odx-experience-color-secondary-foreground)}:host([variant=\"accent\"])::part(content){--_color-fill: var(--odx-color-highlight-rest);--_color-text: var(--odx-color-foreground-light)}:host([variant=\"success\"])::part(content){--_color-fill: var(--odx-color-success-rest);--_color-text: var(--odx-color-foreground-dark)}:host([variant=\"warning\"])::part(content){--_color-fill: var(--odx-color-warning-rest);--_color-text: var(--odx-color-foreground-dark)}:host([variant=\"danger\"])::part(content){--_color-fill: var(--odx-color-danger-rest);--_color-text: var(--odx-color-foreground-light)}";
+const styles$p = ":host{--_color-fill: var(--odx-color-surface);--_color-text: var(--odx-color-text);display:inline-block;line-height:0}:host::part(content){--_font-size: var(--odx-typography-font-size-1);block-size:var(--odx-size-100);line-height:var(--odx-size-100);min-inline-size:var(--odx-size-100);border-radius:var(--odx-border-radius-circle);background-color:var(--_color-fill);color:var(--_color-text);cursor:default;user-select:none;font-weight:var(--odx-typography-font-weight-medium);padding-inline:var(--odx-size-37);text-align:center}:host([variant=\"primary\"])::part(content){--_color-fill: var(--odx-color-primary-rest);--_color-text: var(--odx-color-foreground-light)}:host,:host([variant=\"neutral\"])::part(content){--_color-fill: var(--odx-experience-color-secondary-rest);--_color-text: var(--odx-experience-color-secondary-foreground)}:host([variant=\"accent\"])::part(content){--_color-fill: var(--odx-color-highlight-rest);--_color-text: var(--odx-color-foreground-light)}:host([variant=\"success\"])::part(content){--_color-fill: var(--odx-color-success-rest);--_color-text: var(--odx-color-foreground-dark)}:host([variant=\"warning\"])::part(content){--_color-fill: var(--odx-color-warning-rest);--_color-text: var(--odx-color-foreground-dark)}:host([variant=\"danger\"])::part(content){--_color-fill: var(--odx-color-danger-rest);--_color-text: var(--odx-color-foreground-light)}";
 
-var __defProp$m = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __decorateClass$r = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
+var __defProp$q = Object.defineProperty;
+var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
+var __decorateClass$w = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$m(target, key, result);
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
 let OdxBadgeComponent = class extends CustomElement {
@@ -91,11 +92,11 @@ let OdxBadgeComponent = class extends CustomElement {
     `;
   }
 };
-__decorateClass$r([
+__decorateClass$w([
   property({ reflect: true })
 ], OdxBadgeComponent.prototype, "variant", 2);
-OdxBadgeComponent = __decorateClass$r([
-  customElement("odx-badge", [styles$k])
+OdxBadgeComponent = __decorateClass$w([
+  customElement("odx-badge", [styles$p])
 ], OdxBadgeComponent);
 
 const BadgeVariant = {
@@ -107,16 +108,16 @@ const BadgeVariant = {
   DANGER: "danger"
 };
 
-const styles$j = ":host{display:inline;text-decoration:underline}:host(:focus-visible){outline:none}:host::part(anchor){padding-inline:calc(1 / 24 * 1rem);transition:var(--odx-transition-reduced);color:var(--odx-link-color, var(--odx-palette-blue-50));text-decoration:inherit;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--odx-border-radius-controls)}:host::part(anchor):hover{--odx-link-color: var(--odx-link-color-hover, var(--odx-palette-blue-80))}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([disabled]:not([disabled=\"false\"])),:host([subtle]:not([subtle=\"false\"]):not(:hover)){text-decoration:none}:host([disabled])::part(anchor){--odx-link-color: var(--odx-link-color-disabled, var(--odx-palette-coolgray-40));cursor:default}";
+const styles$o = ":host{display:inline;text-decoration:underline}:host(:focus-visible){outline:none}:host::part(anchor){padding-inline:calc(1 / 24 * 1rem);transition:var(--odx-transition-reduced);color:var(--odx-link-color, var(--odx-palette-blue-50));text-decoration:inherit;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--odx-border-radius-controls)}:host::part(anchor):hover{--odx-link-color: var(--odx-link-color-hover, var(--odx-palette-blue-80))}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([disabled]:not([disabled=\"false\"])),:host([subtle]:not([subtle=\"false\"]):not(:hover)){text-decoration:none}:host([disabled])::part(anchor){--odx-link-color: var(--odx-link-color-disabled, var(--odx-palette-coolgray-40));cursor:default}";
 
-var __defProp$l = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __decorateClass$q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
+var __defProp$p = Object.defineProperty;
+var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
+var __decorateClass$v = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$l(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 let OdxLinkComponent = class extends BaseLink {
@@ -125,41 +126,41 @@ let OdxLinkComponent = class extends BaseLink {
     this.subtle = false;
   }
 };
-__decorateClass$q([
+__decorateClass$v([
   property({ type: Boolean, reflect: true })
 ], OdxLinkComponent.prototype, "subtle", 2);
-OdxLinkComponent = __decorateClass$q([
-  customElement("odx-link", [styles$j])
+OdxLinkComponent = __decorateClass$v([
+  customElement("odx-link", [styles$o])
 ], OdxLinkComponent);
 
-const styles$i = ":host{display:contents}:host([aria-hidden=\"true\"]){display:none}:host::part(separator){color:var(--odx-color-foreground-muted)}";
+const styles$n = ":host{display:contents}:host([aria-hidden=\"true\"]){display:none}:host::part(separator){color:var(--odx-color-foreground-muted)}";
 
-var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
-var __typeError$6 = (msg) => {
+var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
+var __typeError$9 = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$p = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
+var __decorateClass$u = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
   return result;
 };
-var __accessCheck$6 = (obj, member, msg) => member.has(obj) || __typeError$6("Cannot " + msg);
-var __privateAdd$6 = (obj, member, value) => member.has(obj) ? __typeError$6("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$6(obj, member, "access private method"), method);
+var __accessCheck$9 = (obj, member, msg) => member.has(obj) || __typeError$9("Cannot " + msg);
+var __privateAdd$9 = (obj, member, value) => member.has(obj) ? __typeError$9("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod$6 = (obj, member, method) => (__accessCheck$9(obj, member, "access private method"), method);
 var _OdxBreadcrumbItemComponent_instances, updateVisibility_fn;
 let OdxBreadcrumbItemComponent = class extends CustomElement {
   constructor() {
     super(...arguments);
-    __privateAdd$6(this, _OdxBreadcrumbItemComponent_instances);
+    __privateAdd$9(this, _OdxBreadcrumbItemComponent_instances);
   }
   get interactiveElement() {
     return this.querySelector(OdxLinkComponent.selector);
   }
   updated(props) {
     super.updated(props);
-    __privateMethod$4(this, _OdxBreadcrumbItemComponent_instances, updateVisibility_fn).call(this);
+    __privateMethod$6(this, _OdxBreadcrumbItemComponent_instances, updateVisibility_fn).call(this);
   }
   render() {
     const isLast = this.isLast();
@@ -178,46 +179,46 @@ updateVisibility_fn = function() {
   this.interactiveElement.subtle = true;
   this.interactiveElement.ariaCurrent = this.isLast() ? "page" : null;
 };
-OdxBreadcrumbItemComponent = __decorateClass$p([
-  customElement("odx-breadcrumb-item", [styles$i])
+OdxBreadcrumbItemComponent = __decorateClass$u([
+  customElement("odx-breadcrumb-item", [styles$n])
 ], OdxBreadcrumbItemComponent);
 
-const styles$h = ":host{--_breadcrumb-gap: var(--odx-size-37);display:flex;column-gap:var(--_breadcrumb-gap);flex-wrap:wrap;cursor:default;place-items:center;padding-inline:var(--odx-size-37);margin-block:var(--odx-size-37)}::slotted(odx-breadcrumb-item){gap:var(--_breadcrumb-gap)}";
+const styles$m = ":host{--_breadcrumb-gap: var(--odx-size-37);display:flex;column-gap:var(--_breadcrumb-gap);flex-wrap:wrap;cursor:default;place-items:center;padding-inline:var(--odx-size-37);margin-block:var(--odx-size-37)}::slotted(odx-breadcrumb-item){gap:var(--_breadcrumb-gap)}";
 
-var __defProp$k = Object.defineProperty;
-var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
-var __typeError$5 = (msg) => {
+var __defProp$o = Object.defineProperty;
+var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __typeError$8 = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$o = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
+var __decorateClass$t = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$k(target, key, result);
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
-var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
-var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$3 = (obj, member, method) => (__accessCheck$5(obj, member, "access private method"), method);
+var __accessCheck$8 = (obj, member, msg) => member.has(obj) || __typeError$8("Cannot " + msg);
+var __privateAdd$8 = (obj, member, value) => member.has(obj) ? __typeError$8("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod$5 = (obj, member, method) => (__accessCheck$8(obj, member, "access private method"), method);
 var _OdxBreadcrumbComponent_instances, updateContext_fn;
 let OdxBreadcrumbComponent = class extends CustomElement {
   constructor() {
     super(...arguments);
-    __privateAdd$5(this, _OdxBreadcrumbComponent_instances);
+    __privateAdd$8(this, _OdxBreadcrumbComponent_instances);
     this.max = 5;
   }
   render() {
     return html`
       <slot name="root"></slot>
-      <slot @slotchange=${__privateMethod$3(this, _OdxBreadcrumbComponent_instances, updateContext_fn)} name="fallback"></slot>
-      <slot @slotchange=${__privateMethod$3(this, _OdxBreadcrumbComponent_instances, updateContext_fn)}></slot>
+      <slot @slotchange=${__privateMethod$5(this, _OdxBreadcrumbComponent_instances, updateContext_fn)} name="fallback"></slot>
+      <slot @slotchange=${__privateMethod$5(this, _OdxBreadcrumbComponent_instances, updateContext_fn)}></slot>
     `;
   }
   updated(props) {
     super.updated(props);
     if (props.has("max")) {
-      __privateMethod$3(this, _OdxBreadcrumbComponent_instances, updateContext_fn).call(this);
+      __privateMethod$5(this, _OdxBreadcrumbComponent_instances, updateContext_fn).call(this);
     }
   }
 };
@@ -233,41 +234,50 @@ updateContext_fn = async function() {
     item.ariaHidden = toAriaBooleanAttribute(this.max < 2 || visibleItems.length === items.length);
   }
 };
-__decorateClass$o([
+__decorateClass$t([
   queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true })
 ], OdxBreadcrumbComponent.prototype, "items", 2);
-__decorateClass$o([
+__decorateClass$t([
   queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true, slot: "fallback" })
 ], OdxBreadcrumbComponent.prototype, "fallbackItems", 2);
-__decorateClass$o([
+__decorateClass$t([
   queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true, slot: "root" })
 ], OdxBreadcrumbComponent.prototype, "rootItems", 2);
-__decorateClass$o([
+__decorateClass$t([
   property({ type: Number })
 ], OdxBreadcrumbComponent.prototype, "max", 2);
-OdxBreadcrumbComponent = __decorateClass$o([
-  customElement("odx-breadcrumb", [styles$h])
+OdxBreadcrumbComponent = __decorateClass$t([
+  customElement("odx-breadcrumb", [styles$m])
 ], OdxBreadcrumbComponent);
 
-var __defProp$j = Object.defineProperty;
-var __decorateClass$n = (decorators, target, key, kind) => {
-  var result = void 0 ;
+var __defProp$n = Object.defineProperty;
+var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __typeError$7 = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$s = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$j(target, key, result);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$n(target, key, result);
   return result;
 };
-class BaseButtonComponent extends BaseLink {
+var __accessCheck$7 = (obj, member, msg) => member.has(obj) || __typeError$7("Cannot " + msg);
+var __privateAdd$7 = (obj, member, value) => member.has(obj) ? __typeError$7("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$7(obj, member, "access private method"), method);
+var _BaseButtonComponent_instances, renderButton_fn;
+let BaseButtonComponent = class extends BaseLink {
   constructor() {
     super(...arguments);
+    __privateAdd$7(this, _BaseButtonComponent_instances);
     this.type = "button";
   }
   render() {
     return html`${when(
       this.href,
       () => super.render(),
-      () => this.#renderButton()
+      () => __privateMethod$4(this, _BaseButtonComponent_instances, renderButton_fn).call(this)
     )}`;
   }
   renderContent() {
@@ -277,9 +287,11 @@ class BaseButtonComponent extends BaseLink {
       <slot name="end"></slot>
     `;
   }
-  #renderButton() {
-    const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
-    return html`<button
+};
+_BaseButtonComponent_instances = new WeakSet();
+renderButton_fn = function() {
+  const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
+  return html`<button
       part="anchor button"
       aria-label="${optionalAttr(ariaLabel)}"
       aria-haspopup="${optionalAttr(ariaHasPopup)}"
@@ -289,47 +301,42 @@ class BaseButtonComponent extends BaseLink {
     >
       ${this.renderContent()}
     </button>`;
-  }
-}
-__decorateClass$n([
+};
+__decorateClass$s([
   property()
-], BaseButtonComponent.prototype, "type");
+], BaseButtonComponent.prototype, "type", 2);
+BaseButtonComponent = __decorateClass$s([
+  requestUpdateOnAriaChange(["ariaLabel", "ariaHasPopup", "ariaExpanded"])
+], BaseButtonComponent);
 
-const styles$g = ":host{--_color-border: transparent;--_color-border-hover: transparent;--_color-border-pressed: transparent;--_block-size: var(--odx-size-225);--_icon-size: var(--odx-typography-font-size-5);--_text-size: var(--odx-typography-font-size-3);--_spinner-size: var(--odx-size-50);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: var(--odx-size-37);--_margin-icon: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-sm);white-space:nowrap;margin-block:var(--_margin-block);-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,:host::part(anchor){display:inline-flex;place-items:center;place-content:center}:host::part(anchor){overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;background:transparent;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:calc(var(--_padding-block));padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-border);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform;background-color:var(--_color-fill);color:var(--_color-text);font-size:var(--_text-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-medium);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.spinner{--_size: var(--_spinner-size);color:var(--_color-text);position:absolute;inset:var(--odx-border-width-thin)}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host(:hover)::part(anchor){--_color-fill: var(--_color-fill-hover);--_color-border: var(--_color-border-hover)}:host(:active)::part(anchor){--_color-fill: var(--_color-fill-pressed);--_color-border: var(--_color-border-pressed)}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([disabled]:not([disabled=\"false\"]))::part(anchor){--_color-fill: var(--odx-color-disabled-fill);--_color-text: var(--odx-color-disabled-foreground);--_color-border: var(--odx-color-disabled-stroke);cursor:not-allowed}:host([variant=\"primary\"]){--_color-fill: var(--odx-color-primary-rest);--_color-fill-hover: var(--odx-color-primary-hover);--_color-fill-pressed: var(--odx-color-primary-pressed);--_color-text: var(--odx-color-foreground-inverse)}:host([variant=\"highlight\"]){--_color-fill: var(--odx-color-highlight-rest);--_color-fill-hover: var(--odx-color-highlight-hover);--_color-fill-pressed: var(--odx-color-highlight-pressed);--_color-text: var(--odx-color-foreground-inverse)}:host,:host([variant=\"secondary\"]){--_color-fill: var(--odx-experience-color-secondary-rest);--_color-fill-hover: var(--odx-experience-color-secondary-hover);--_color-fill-pressed: var(--odx-experience-color-secondary-pressed);--_color-text: var(--odx-experience-color-secondary-foreground)}:host([variant=\"ghost\"]){--_color-fill: var(--odx-color-transparent);--_color-text: var(--odx-color-foreground);--_color-fill-hover: var(--odx-color-transparent-hover);--_color-fill-pressed: var(--odx-color-transparent-pressed)}:host([variant=\"danger\"]){--_color-fill: var(--odx-color-danger-rest);--_color-fill-hover: var(--odx-color-danger-hover);--_color-fill-pressed: var(--odx-color-danger-pressed);--_color-text: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-fill: var(--odx-color-success-rest);--_color-fill-hover: var(--odx-color-success-hover);--_color-fill-pressed: var(--odx-color-success-pressed);--_color-text: var(--odx-color-foreground-dark)}:host([variant=\"confirmation\"]){--_color-fill: var(--odx-color-confirmation-rest);--_color-fill-hover: var(--odx-color-confirmation-hover);--_color-fill-pressed: var(--odx-color-confirmation-pressed);--_color-text: var(--odx-color-foreground-dark)}:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_text-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-100);--_margin-block: 0;--_spinner-size: var(--odx-size-37)}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_text-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host([loading]:not([loading=\"false\"]))::part(anchor){color:transparent}odx-icon,::slotted(odx-icon){font-size:var(--_icon-size);margin-inline:var(--_margin-icon)}:host-context(odx-button-group[connected]:not([vertical])):host(:not(:last-of-type))::part(anchor){border-inline-end-width:0}:host-context(odx-button-group[connected][vertical]):host(:not(:last-of-type))::part(anchor){border-block-end-width:0}";
+const styles$l = ":host{--_color-border: transparent;--_color-border-hover: transparent;--_color-border-pressed: transparent;--_block-size: var(--odx-size-225);--_icon-size: var(--odx-typography-font-size-5);--_text-size: var(--odx-typography-font-size-3);--_spinner-size: var(--odx-size-50);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: var(--odx-size-37);--_margin-icon: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-sm);white-space:nowrap;margin-block:var(--_margin-block);-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,:host::part(anchor){display:inline-flex;place-items:center;place-content:center}:host::part(anchor){overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;background:transparent;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:calc(var(--_padding-block));padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-border);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform;background-color:var(--_color-fill);color:var(--_color-text);font-size:var(--_text-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-medium);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.spinner{--_size: var(--_spinner-size);color:var(--_color-text);position:absolute;inset:var(--odx-border-width-thin)}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host(:hover)::part(anchor){--_color-fill: var(--_color-fill-hover);--_color-border: var(--_color-border-hover)}:host(:active)::part(anchor){--_color-fill: var(--_color-fill-pressed);--_color-border: var(--_color-border-pressed)}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([disabled]:not([disabled=\"false\"]))::part(anchor){--_color-fill: var(--odx-color-disabled-fill);--_color-text: var(--odx-color-disabled-foreground);--_color-border: var(--odx-color-disabled-stroke);cursor:not-allowed}:host([variant=\"primary\"]){--_color-fill: var(--odx-color-primary-rest);--_color-fill-hover: var(--odx-color-primary-hover);--_color-fill-pressed: var(--odx-color-primary-pressed);--_color-text: var(--odx-color-foreground-inverse)}:host([variant=\"highlight\"]){--_color-fill: var(--odx-color-highlight-rest);--_color-fill-hover: var(--odx-color-highlight-hover);--_color-fill-pressed: var(--odx-color-highlight-pressed);--_color-text: var(--odx-color-foreground-inverse)}:host,:host([variant=\"secondary\"]){--_color-fill: var(--odx-experience-color-secondary-rest);--_color-fill-hover: var(--odx-experience-color-secondary-hover);--_color-fill-pressed: var(--odx-experience-color-secondary-pressed);--_color-text: var(--odx-experience-color-secondary-foreground)}:host([variant=\"ghost\"]){--_color-fill: var(--odx-color-transparent);--_color-text: var(--odx-color-foreground);--_color-fill-hover: var(--odx-color-transparent-hover);--_color-fill-pressed: var(--odx-color-transparent-pressed)}:host([variant=\"danger\"]){--_color-fill: var(--odx-color-danger-rest);--_color-fill-hover: var(--odx-color-danger-hover);--_color-fill-pressed: var(--odx-color-danger-pressed);--_color-text: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-fill: var(--odx-color-success-rest);--_color-fill-hover: var(--odx-color-success-hover);--_color-fill-pressed: var(--odx-color-success-pressed);--_color-text: var(--odx-color-foreground-dark)}:host([variant=\"confirmation\"]){--_color-fill: var(--odx-color-confirmation-rest);--_color-fill-hover: var(--odx-color-confirmation-hover);--_color-fill-pressed: var(--odx-color-confirmation-pressed);--_color-text: var(--odx-color-foreground-dark)}:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_text-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-100);--_margin-block: 0;--_spinner-size: var(--odx-size-37)}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_text-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host([loading]:not([loading=\"false\"]))::part(anchor){color:transparent}odx-icon,::slotted(odx-icon){font-size:var(--_icon-size);margin-inline:var(--_margin-icon)}:host-context(odx-button-group[connected]:not([vertical])):host(:not(:last-of-type))::part(anchor){border-inline-end-width:0}:host-context(odx-button-group[connected][vertical]):host(:not(:last-of-type))::part(anchor){border-block-end-width:0}";
 
-var __defProp$i = Object.defineProperty;
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __typeError$4 = (msg) => {
+var __defProp$m = Object.defineProperty;
+var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
+var __typeError$6 = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$m = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
+var __decorateClass$r = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$i(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
-var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
-var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), member.get(obj));
-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$2 = (obj, member, method) => (__accessCheck$4(obj, member, "access private method"), method);
+var __accessCheck$6 = (obj, member, msg) => member.has(obj) || __typeError$6("Cannot " + msg);
+var __privateGet$5 = (obj, member, getter) => (__accessCheck$6(obj, member, "read from private field"), member.get(obj));
+var __privateAdd$6 = (obj, member, value) => member.has(obj) ? __typeError$6("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod$3 = (obj, member, method) => (__accessCheck$6(obj, member, "access private method"), method);
 var _internals, _OdxButtonComponent_instances, handleClick_fn;
 let OdxButtonComponent = class extends WithLoadingState(BaseButtonComponent) {
   constructor() {
-    super(...arguments);
-    __privateAdd$4(this, _OdxButtonComponent_instances);
-    __privateAdd$4(this, _internals, this.attachInternals());
-  }
-  async connectedCallback() {
-    super.connectedCallback();
-    await this.updateComplete;
-    this.addEventListener("click", __privateMethod$2(this, _OdxButtonComponent_instances, handleClick_fn));
-  }
-  async disconnectedCallback() {
-    super.disconnectedCallback();
-    await this.updateComplete;
-    this.addEventListener("click", __privateMethod$2(this, _OdxButtonComponent_instances, handleClick_fn));
+    super();
+    __privateAdd$6(this, _OdxButtonComponent_instances);
+    __privateAdd$6(this, _internals, this.attachInternals());
+    if (!isServer) {
+      this.addEventListener("click", __privateMethod$3(this, _OdxButtonComponent_instances, handleClick_fn));
+    }
   }
   renderContent() {
     return html`
@@ -344,23 +351,23 @@ _internals = new WeakMap();
 _OdxButtonComponent_instances = new WeakSet();
 handleClick_fn = function(_event) {
   if (this.type === "submit") {
-    __privateGet$4(this, _internals).form?.requestSubmit();
+    __privateGet$5(this, _internals).form?.requestSubmit();
     return;
   }
   if (this.type === "reset") {
-    __privateGet$4(this, _internals).form?.reset();
+    __privateGet$5(this, _internals).form?.reset();
     return;
   }
 };
 OdxButtonComponent.formAssociated = true;
-__decorateClass$m([
+__decorateClass$r([
   property({ reflect: true })
 ], OdxButtonComponent.prototype, "size", 2);
-__decorateClass$m([
+__decorateClass$r([
   property({ reflect: true })
 ], OdxButtonComponent.prototype, "variant", 2);
-OdxButtonComponent = __decorateClass$m([
-  customElement("odx-button", [styles$g])
+OdxButtonComponent = __decorateClass$r([
+  customElement("odx-button", [styles$l])
 ], OdxButtonComponent);
 
 const ButtonSize = {
@@ -378,16 +385,16 @@ const ButtonVariant = {
   CONFIRMATION: "confirmation"
 };
 
-const styles$f = ":host{--_gap: var(--odx-size-75);--_direction: row;display:inline-flex;align-items:center;flex-direction:var(--_direction);gap:var(--_gap)}:host([block]){display:flex;::slotted(:is(odx-button,odx-icon-button)){width:100%}}:host([connected]){--_gap: var(--odx-size-px);::slotted(:is(odx-button,odx-icon-button):not(:first-of-type):not(:last-of-type)){border-radius:0}::slotted(:is(odx-button,odx-icon-button):focus-within){z-index:1}}:host([vertical]){--_direction: column;::slotted(:is(odx-button,odx-icon-button)){margin-block:0}}:host([connected]:not([vertical])){::slotted(:is(odx-button,odx-icon-button):first-of-type:not(:last-of-type)){border-start-end-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button):last-of-type:not(:first-of-type)){border-start-start-radius:0;border-end-start-radius:0}}:host([connected][vertical]){::slotted(:is(odx-button,odx-icon-button):first-of-type){border-end-start-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button):last-of-type){border-start-start-radius:0;border-start-end-radius:0}}";
+const styles$k = ":host{--_gap: var(--odx-size-75);--_direction: row;display:inline-flex;align-items:center;flex-direction:var(--_direction);gap:var(--_gap)}:host([block]){display:flex;::slotted(:is(odx-button,odx-icon-button)){width:100%}}:host([connected]){--_gap: var(--odx-size-px);::slotted(:is(odx-button,odx-icon-button):not(:first-of-type):not(:last-of-type)){border-radius:0}::slotted(:is(odx-button,odx-icon-button):focus-within){z-index:1}}:host([vertical]){--_direction: column;::slotted(:is(odx-button,odx-icon-button)){margin-block:0}}:host([connected]:not([vertical])){::slotted(:is(odx-button,odx-icon-button):first-of-type:not(:last-of-type)){border-start-end-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button):last-of-type:not(:first-of-type)){border-start-start-radius:0;border-end-start-radius:0}}:host([connected][vertical]){::slotted(:is(odx-button,odx-icon-button):first-of-type){border-end-start-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button):last-of-type){border-start-start-radius:0;border-start-end-radius:0}}";
 
-var __defProp$h = Object.defineProperty;
-var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
+var __defProp$l = Object.defineProperty;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __decorateClass$q = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$h(target, key, result);
+  if (kind && result) __defProp$l(target, key, result);
   return result;
 };
 let OdxButtonGroupComponent = class extends CustomElement {
@@ -398,26 +405,145 @@ let OdxButtonGroupComponent = class extends CustomElement {
     this.vertical = false;
   }
 };
-__decorateClass$l([
+__decorateClass$q([
   property({ type: Boolean, reflect: true })
 ], OdxButtonGroupComponent.prototype, "block", 2);
-__decorateClass$l([
+__decorateClass$q([
   property({ type: Boolean, reflect: true })
 ], OdxButtonGroupComponent.prototype, "connected", 2);
-__decorateClass$l([
+__decorateClass$q([
   property({ type: Boolean, reflect: true })
 ], OdxButtonGroupComponent.prototype, "vertical", 2);
-OdxButtonGroupComponent = __decorateClass$l([
-  customElement("odx-button-group", [styles$f])
+OdxButtonGroupComponent = __decorateClass$q([
+  customElement("odx-button-group", [styles$k])
 ], OdxButtonGroupComponent);
 
-var __defProp$g = Object.defineProperty;
-var __decorateClass$k = (decorators, target, key, kind) => {
+const styles$j = ":host{--_indicator-space: calc(var(--odx-size-25) / 2);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-fill: var(--odx-color-selection-control-fill);--_indicator-color-border: var(--odx-color-selection-control-stroke);--_indicator-color-text: var(--odx-palette-transparent);--_label-color-text: 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);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);padding:var(--_indicator-space);transition-property:outline-color}:host,:host::part(indicator),:host::part(content){transition:var(--odx-transition-reduced)}:host::part(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-fill);border:var(--odx-border-width-thin) solid var(--_indicator-color-border);border-color:var(--_indicator-color-border);color:var(--_indicator-color-text);transition-property:background-color,border-color}:host::part(label){display:inline-block}:host::part(content){color:var(--_label-color-text);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:not(:empty))::part(indicator){margin-inline-end:var(--odx-size-75)}:host(:empty)::part(content){display:none}:host(:hover){--_indicator-color-border: var(--odx-color-selection-control-stroke-hover);--_indicator-color-fill: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible){outline-color:var(--odx-color-focus)}:host(:is([checked]:not([checked=\"false\"]),[indeterminate]:not([indeterminate=\"false\"]))){--_indicator-color-border: var(--odx-color-selection-control-stroke-selected);--_indicator-color-fill: var(--odx-color-selection-control-fill-selected);--_indicator-color-text: var(--odx-color-foreground-light)}:host([disabled]:not([disabled=\"false\"])){--_indicator-color-fill: var(--odx-color-disabled-fill);--_indicator-color-text: var(--odx-palette-transparent);--_indicator-color-border: var(--odx-selection-control-color-border-disabled);--_label-color-text: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([disabled]:not([disabled=\"false\"]):is([checked]:not([checked=\"false\"]),[indeterminate]:not([indeterminate=\"false\"]))){--_indicator-color-fill: var(--odx-color-disabled-fill-selected);--_indicator-color-text: var(--odx-color-disabled-foreground-selected);--_indicator-color-border: var(--_indicator-color-fill)}:host([readonly]:not([readonly=\"false\"])){--_indicator-color-fill: var(--odx-color-selection-control-fill-readonly);--_indicator-color-border: var(--odx-color-input-control-stroke-readonly);cursor:default}:host([readonly]:not([readonly=\"false\"]):is([checked]:not([checked=\"false\"]),[indeterminate]:not([indeterminate=\"false\"]))){--_indicator-color-text: var(--odx-color-foreground)}";
+
+var __defProp$k = Object.defineProperty;
+var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
+var __typeError$5 = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$p = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$k(target, key, result);
+  return result;
+};
+var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
+var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("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$5(obj, member, "access private method"), method);
+var _OdxCheckboxComponent_instances, handleIndeterminateChange_fn;
+let OdxCheckboxComponent = class extends CheckboxControl {
+  constructor() {
+    super(...arguments);
+    __privateAdd$5(this, _OdxCheckboxComponent_instances);
+    this.indeterminate = false;
+  }
+  render() {
+    return html`
+      <div part="indicator">
+        <odx-icon name=${this.indeterminate ? "core::minus" : "core::check"}></odx-icon>
+      </div>
+      <div part="content">
+        <div part="label">
+          <slot></slot>
+        </div>
+        <div part="description">
+          <slot name="description"></slot>
+        </div>
+      </div>
+    `;
+  }
+  willUpdate(changes) {
+    super.willUpdate?.(changes);
+    if (changes.has("indeterminate")) {
+      __privateMethod$2(this, _OdxCheckboxComponent_instances, handleIndeterminateChange_fn).call(this);
+    }
+  }
+  toggle(state, dispatchEvent = false) {
+    super.toggle(state, dispatchEvent);
+    if (this.disabled || this.readonly) return;
+    this.indeterminate = false;
+  }
+};
+_OdxCheckboxComponent_instances = new WeakSet();
+handleIndeterminateChange_fn = function() {
+  if (this.indeterminate) {
+    this.internals.ariaChecked = "mixed";
+  }
+};
+__decorateClass$p([
+  property({ type: Boolean, reflect: true })
+], OdxCheckboxComponent.prototype, "indeterminate", 2);
+OdxCheckboxComponent = __decorateClass$p([
+  customElement("odx-checkbox", [styles$j])
+], OdxCheckboxComponent);
+
+const styles$i = ":host{display:flex;flex-direction:column}::slotted(:is(odx-checkbox,odx-switch)){width:max-content}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){border-block-end:var(--odx-border-sm);border-color:var(--odx-color-fill-disabled);padding:var(--odx-size-75);margin:0;width:auto;border-radius:0}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):last-of-type){border-block-end:none}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-size-75)}";
+
+var __defProp$j = Object.defineProperty;
+var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
+var __typeError$4 = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$o = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$j(target, key, result);
+  return result;
+};
+var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
+var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+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 _handleSlotChange$3, _handleGroupControlChange;
+let OdxCheckboxGroupComponent = class extends CheckboxGroupControl {
+  constructor() {
+    super(...arguments);
+    __privateAdd$4(this, _handleSlotChange$3, () => {
+      for (const control of this.groupControls) {
+        control.addEventListener("change", __privateGet$4(this, _handleGroupControlChange));
+      }
+    });
+    __privateAdd$4(this, _handleGroupControlChange, (event) => {
+      const { target } = event;
+      if (!this.isControl(target)) return;
+      event.stopImmediatePropagation();
+      this.updateValue(target.checked ? this.controls.map((control) => control.value) : [], true);
+      for (const groupControl of this.childGroups.flatMap((group) => group.groupControls)) {
+        groupControl.checked = target.checked;
+      }
+    });
+  }
+  render() {
+    return html`<slot @slotchange=${__privateGet$4(this, _handleSlotChange$3)}></slot>`;
+  }
+};
+_handleSlotChange$3 = new WeakMap();
+_handleGroupControlChange = new WeakMap();
+__decorateClass$o([
+  property({ reflect: true })
+], OdxCheckboxGroupComponent.prototype, "variant", 2);
+OdxCheckboxGroupComponent = __decorateClass$o([
+  customElement("odx-checkbox-group", [styles$i])
+], OdxCheckboxGroupComponent);
+
+const CheckboxGroupVariant = {
+  LIST: "list"
+};
+
+var __defProp$i = Object.defineProperty;
+var __decorateClass$n = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$g(target, key, result);
+  if (result) __defProp$i(target, key, result);
   return result;
 };
 class FormatComponent extends IsLocalized(CustomElement) {
@@ -435,18 +561,18 @@ class FormatComponent extends IsLocalized(CustomElement) {
     return html`${this.fallbackValue ?? nothing}`;
   }
 }
-__decorateClass$k([
+__decorateClass$n([
   property()
 ], FormatComponent.prototype, "fallbackValue");
 
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
+var __decorateClass$m = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$f(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 let OdxFormatBytesComponent = class extends FormatComponent {
@@ -469,24 +595,24 @@ OdxFormatBytesComponent.UNIT_PREFIXES = {
   bit: ["bit", "kilobit", "megabit", "gigabit", "terabit"],
   byte: ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte", "petabyte"]
 };
-__decorateClass$j([
+__decorateClass$m([
   property({ type: Number })
 ], OdxFormatBytesComponent.prototype, "value", 2);
-__decorateClass$j([
+__decorateClass$m([
   property()
 ], OdxFormatBytesComponent.prototype, "unit", 2);
-OdxFormatBytesComponent = __decorateClass$j([
+OdxFormatBytesComponent = __decorateClass$m([
   customElement("odx-format-bytes")
 ], OdxFormatBytesComponent);
 
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
+var __defProp$g = Object.defineProperty;
+var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
+var __decorateClass$l = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$e(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 let OdxFormatDateComponent = class extends FormatComponent {
@@ -500,24 +626,24 @@ let OdxFormatDateComponent = class extends FormatComponent {
     return this.formatDate(value, { dateStyle: this.dateStyle });
   }
 };
-__decorateClass$i([
+__decorateClass$l([
   property()
 ], OdxFormatDateComponent.prototype, "value", 2);
-__decorateClass$i([
+__decorateClass$l([
   property()
 ], OdxFormatDateComponent.prototype, "dateStyle", 2);
-OdxFormatDateComponent = __decorateClass$i([
+OdxFormatDateComponent = __decorateClass$l([
   customElement("odx-format-date")
 ], OdxFormatDateComponent);
 
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
+var __decorateClass$k = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$d(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 let OdxFormatNumberComponent = class extends FormatComponent {
@@ -533,48 +659,48 @@ let OdxFormatNumberComponent = class extends FormatComponent {
     });
   }
 };
-__decorateClass$h([
+__decorateClass$k([
   property({ type: Number })
 ], OdxFormatNumberComponent.prototype, "value", 2);
-__decorateClass$h([
+__decorateClass$k([
   property()
 ], OdxFormatNumberComponent.prototype, "currency", 2);
-__decorateClass$h([
+__decorateClass$k([
   property()
 ], OdxFormatNumberComponent.prototype, "currencyDisplay", 2);
-__decorateClass$h([
+__decorateClass$k([
   property({ type: Number })
 ], OdxFormatNumberComponent.prototype, "minimumFractionDigits", 2);
-__decorateClass$h([
+__decorateClass$k([
   property({ type: Number })
 ], OdxFormatNumberComponent.prototype, "maximumFractionDigits", 2);
-__decorateClass$h([
+__decorateClass$k([
   property({ type: Number })
 ], OdxFormatNumberComponent.prototype, "minimumIntegerDigits", 2);
-__decorateClass$h([
+__decorateClass$k([
   property()
 ], OdxFormatNumberComponent.prototype, "type", 2);
-__decorateClass$h([
+__decorateClass$k([
   property()
 ], OdxFormatNumberComponent.prototype, "unit", 2);
-__decorateClass$h([
+__decorateClass$k([
   property()
 ], OdxFormatNumberComponent.prototype, "unitDisplay", 2);
-OdxFormatNumberComponent = __decorateClass$h([
+OdxFormatNumberComponent = __decorateClass$k([
   customElement("odx-format-number")
 ], OdxFormatNumberComponent);
 
-var __defProp$c = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
 var __typeError$3 = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
+var __decorateClass$j = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$c(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
 var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
@@ -619,30 +745,30 @@ setupSyncInterval_fn = function() {
   if (typeof this.syncInterval !== "number") return;
   __privateSet$1(this, _syncInterval, window.setInterval(() => this.requestUpdate(), Math.max(this.syncInterval, 1e3)));
 };
-__decorateClass$g([
+__decorateClass$j([
   property()
 ], OdxRelativeTimeComponent.prototype, "value", 2);
-__decorateClass$g([
+__decorateClass$j([
   property()
 ], OdxRelativeTimeComponent.prototype, "format", 2);
-__decorateClass$g([
+__decorateClass$j([
   property()
 ], OdxRelativeTimeComponent.prototype, "minUnit", 2);
-__decorateClass$g([
+__decorateClass$j([
   property()
 ], OdxRelativeTimeComponent.prototype, "numeric", 2);
-__decorateClass$g([
+__decorateClass$j([
   property({ type: Number })
 ], OdxRelativeTimeComponent.prototype, "syncInterval", 2);
-OdxRelativeTimeComponent = __decorateClass$g([
+OdxRelativeTimeComponent = __decorateClass$j([
   customElement("odx-relative-time")
 ], OdxRelativeTimeComponent);
 
-const styles$e = "::slotted(odx-separator){--block-space: var(--odx-size-50);--inline-space: 0}:host{display:flex;block-size:100%;gap:var(--odx-size-75)}";
+const styles$h = "::slotted(odx-separator){--block-space: var(--odx-size-50);--inline-space: 0}:host{display:flex;block-size:100%;gap:var(--odx-size-75)}";
 
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __decorateClass$i = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -654,20 +780,20 @@ let OdxHeaderActionsComponent = class extends CustomElement {
     this.slot = "actions";
   }
 };
-OdxHeaderActionsComponent = __decorateClass$f([
-  customElement("odx-header-actions", [styles$e])
+OdxHeaderActionsComponent = __decorateClass$i([
+  customElement("odx-header-actions", [styles$h])
 ], OdxHeaderActionsComponent);
 
-const styles$d = ":host{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--_font-weight);line-height:var(--_line-height);color:inherit}:host,:host([size=\"xs\"]){--_font-size: var(--odx-breakpoint-font-size-heading-6);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-6)}:host([size=\"sm\"]){--_font-size: var(--odx-breakpoint-font-size-heading-5);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-5)}:host([size=\"md\"]){--_font-size: var(--odx-breakpoint-font-size-heading-4);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-4)}:host([size=\"lg\"]){--_font-size: var(--odx-breakpoint-font-size-heading-3);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-3)}:host([size=\"xl\"]){--_font-size: var(--odx-breakpoint-font-size-heading-2);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-2)}:host([size=\"xxl\"]){--_font-size: var(--odx-breakpoint-font-size-heading-1);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-1)}";
+const styles$g = ":host{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--_font-weight);line-height:var(--_line-height);color:inherit}:host,:host([size=\"xs\"]){--_font-size: var(--odx-breakpoint-font-size-heading-6);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-6)}:host([size=\"sm\"]){--_font-size: var(--odx-breakpoint-font-size-heading-5);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-5)}:host([size=\"md\"]){--_font-size: var(--odx-breakpoint-font-size-heading-4);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-4)}:host([size=\"lg\"]){--_font-size: var(--odx-breakpoint-font-size-heading-3);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-3)}:host([size=\"xl\"]){--_font-size: var(--odx-breakpoint-font-size-heading-2);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-2)}:host([size=\"xxl\"]){--_font-size: var(--odx-breakpoint-font-size-heading-1);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-1)}";
 
-var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$b(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
 let OdxTitleComponent = class extends CustomElement {
@@ -678,12 +804,12 @@ let OdxTitleComponent = class extends CustomElement {
     }
   }
 };
-__decorateClass$e([
+__decorateClass$h([
   property({ reflect: true })
 ], OdxTitleComponent.prototype, "size", 2);
-OdxTitleComponent = __decorateClass$e([
+OdxTitleComponent = __decorateClass$h([
   requestUpdateOnAriaChange(["ariaLevel"]),
-  customElement("odx-title", [styles$d])
+  customElement("odx-title", [styles$g])
 ], OdxTitleComponent);
 
 const TitleSize = {
@@ -695,19 +821,19 @@ const TitleSize = {
   XXL: "xxl"
 };
 
-const styles$c = ":host{display:flex;block-size:var(--odx-size-300);background-color:var(--odx-color-foreground-light);column-gap:var(--odx-size-150);padding-inline:var(--odx-size-75);place-items:center;box-shadow:0 0 0 100vmax var(--odx-color-foreground-light);clip-path:inset(0 -100vmax)}odx-logo{flex:0 0 auto}::slotted(odx-title){width:max-content}::slotted(odx-main-menu-button){margin-inline-end:calc(-1 * var(--odx-size-75))}::slotted(odx-header-actions){margin-inline-start:auto}@media screen and (max-width: 600px){odx-logo{display:none}}";
+const styles$f = ":host{display:flex;block-size:var(--odx-size-300);background-color:var(--odx-color-foreground-light);column-gap:var(--odx-size-150);padding-inline:var(--odx-size-75);place-items:center;box-shadow:0 0 0 100vmax var(--odx-color-foreground-light);clip-path:inset(0 -100vmax)}odx-logo{flex:0 0 auto}::slotted(odx-title){width:max-content}::slotted(odx-main-menu-button){margin-inline-end:calc(-1 * var(--odx-size-75))}::slotted(odx-header-actions){margin-inline-start:auto}@media screen and (max-width: 600px){odx-logo{display:none}}";
 
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __defProp$c = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
 var __typeError$2 = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+var __decorateClass$g = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$a(target, key, result);
+  if (kind && result) __defProp$c(target, key, result);
   return result;
 };
 var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
@@ -740,23 +866,23 @@ let OdxHeaderComponent = class extends CustomElement {
   }
 };
 _handleSlotChange$2 = new WeakMap();
-__decorateClass$d([
+__decorateClass$g([
   queryAssignedElements({ selector: OdxTitleComponent.selector, flatten: true })
 ], OdxHeaderComponent.prototype, "titleElements", 2);
-OdxHeaderComponent = __decorateClass$d([
-  customElement("odx-header", [styles$c])
+OdxHeaderComponent = __decorateClass$g([
+  customElement("odx-header", [styles$f])
 ], OdxHeaderComponent);
 
-const styles$b = ":host{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)}:host([size=\"sm\"]){--_font-size: var(--odx-breakpoint-font-size-display-sm);--_line-height: var(--odx-breakpoint-line-height-display-sm)}:host,:host([size=\"md\"]){--_font-size: var(--odx-breakpoint-font-size-display-md);--_line-height: var(--odx-breakpoint-line-height-display-md)}:host([size=\"lg\"]){--_font-size: var(--odx-breakpoint-font-size-display-lg);--_line-height: var(--odx-breakpoint-line-height-display-lg)}:host([size=\"xl\"]){--_font-size: var(--odx-breakpoint-font-size-display-xl);--_line-height: var(--odx-breakpoint-line-height-display-xl)}";
+const styles$e = ":host{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)}:host([size=\"sm\"]){--_font-size: var(--odx-breakpoint-font-size-display-sm);--_line-height: var(--odx-breakpoint-line-height-display-sm)}:host,:host([size=\"md\"]){--_font-size: var(--odx-breakpoint-font-size-display-md);--_line-height: var(--odx-breakpoint-line-height-display-md)}:host([size=\"lg\"]){--_font-size: var(--odx-breakpoint-font-size-display-lg);--_line-height: var(--odx-breakpoint-line-height-display-lg)}:host([size=\"xl\"]){--_font-size: var(--odx-breakpoint-font-size-display-xl);--_line-height: var(--odx-breakpoint-line-height-display-xl)}";
 
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __decorateClass$c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
+var __defProp$b = Object.defineProperty;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __decorateClass$f = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$9(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 let OdxHeadlineComponent = class extends CustomElement {
@@ -767,12 +893,12 @@ let OdxHeadlineComponent = class extends CustomElement {
     }
   }
 };
-__decorateClass$c([
+__decorateClass$f([
   property({ reflect: true })
 ], OdxHeadlineComponent.prototype, "size", 2);
-OdxHeadlineComponent = __decorateClass$c([
+OdxHeadlineComponent = __decorateClass$f([
   requestUpdateOnAriaChange(["ariaLevel"]),
-  customElement("odx-headline", [styles$b])
+  customElement("odx-headline", [styles$e])
 ], OdxHeadlineComponent);
 
 const HeadlineSize = {
@@ -782,35 +908,36 @@ const HeadlineSize = {
   XL: "xl"
 };
 
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
+var __defProp$a = Object.defineProperty;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+var __decorateClass$e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$8(target, key, result);
+  if (kind && result) __defProp$a(target, key, result);
   return result;
 };
 let OdxIconButtonComponent = class extends OdxButtonComponent {
   renderContent() {
     return html`
       <odx-icon name=${optionalAttr(this.icon)}></odx-icon>
+      ${when(this.loading, () => html`<odx-loading-indicator class="spinner"></odx-loading-indicator>`)}
     `;
   }
 };
-__decorateClass$b([
+__decorateClass$e([
   property()
 ], OdxIconButtonComponent.prototype, "icon", 2);
-OdxIconButtonComponent = __decorateClass$b([
+OdxIconButtonComponent = __decorateClass$e([
   customElement("odx-icon-button")
 ], OdxIconButtonComponent);
 
-const styles$a = "@keyframes loading-indicator-entry-animation{0%{opacity:0}to{opacity:1}}@keyframes loading-indicator-animation{0%,75%,to{transform:scale(.667);opacity:.5}50%{transform:scale(1);opacity:1;background-color:currentColor}}:host{--_animation-timing-function: cubic-bezier(.96, .21, .41, .76);--_animation-duration: 1.25s;--_animation-delay: 0s;--_size: var(--odx-size-75);--_space: var(--odx-size-37);display:flex;place-content:center;place-items:center;color:currentColor;gap:calc(var(--_space) / 2);padding:var(--_space);animation:loading-indicator-entry-animation .25s linear both}:host::part(dot){background-color:currentColor;border-radius:50%;block-size:var(--_size);flex:0 0 var(--_size);z-index:3;animation:loading-indicator-animation var(--_animation-duration) var(--_animation-delay) infinite var(--_animation-timing-function) forwards}:host::part(last){--_animation-delay: 0s}:host::part(middle){--_animation-delay: calc(-1 * var(--_animation-duration) / 12)}:host::part(first){--_animation-delay: calc(-1 * var(--_animation-duration) / 6)}";
+const styles$d = "@keyframes loading-indicator-entry-animation{0%{opacity:0}to{opacity:1}}@keyframes loading-indicator-animation{0%,75%,to{transform:scale(.667);opacity:.5}50%{transform:scale(1);opacity:1;background-color:currentColor}}:host{--_animation-timing-function: cubic-bezier(.96, .21, .41, .76);--_animation-duration: 1.25s;--_animation-delay: 0s;--_size: var(--odx-size-75);--_space: var(--odx-size-37);display:flex;place-content:center;place-items:center;color:currentColor;gap:calc(var(--_space) / 2);padding:var(--_space);animation:loading-indicator-entry-animation .25s linear both}:host::part(dot){background-color:currentColor;border-radius:50%;block-size:var(--_size);flex:0 0 var(--_size);z-index:3;animation:loading-indicator-animation var(--_animation-duration) var(--_animation-delay) infinite var(--_animation-timing-function) forwards}:host::part(last){--_animation-delay: 0s}:host::part(middle){--_animation-delay: calc(-1 * var(--_animation-duration) / 12)}:host::part(first){--_animation-delay: calc(-1 * var(--_animation-duration) / 6)}";
 
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -825,20 +952,20 @@ let OdxLoadingIndicatorComponent = class extends CustomElement {
     `;
   }
 };
-OdxLoadingIndicatorComponent = __decorateClass$a([
-  customElement("odx-loading-indicator", [styles$a])
+OdxLoadingIndicatorComponent = __decorateClass$d([
+  customElement("odx-loading-indicator", [styles$d])
 ], OdxLoadingIndicatorComponent);
 
-const styles$9 = ":host{aspect-ratio:92 / 36;background-color:currentColor;block-size:var(--_logo-block-size);display:inline-block;mask-image:url(\"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20?%3e%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2091.6%2035.43'%3e%3cpath%20d='m81.18,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56Zm-12.11-10.93v-4.24c0-1.59.74-2.44,2.34-2.44,1.49,0,2.34.85,2.34,2.33v4.35h-4.68Zm10.31,3.29v-8.06c0-3.4-1.81-4.99-5.63-4.99h-4.68c-2.02,0-2.87.21-3.93,1.06-1.06.96-1.7,2.33-1.7,3.93v10.71c0,1.48.43,2.55,1.38,3.61,1.06,1.06,2.02,1.38,4.25,1.38h10.2v-4.24c-2.87.85-4.57,1.06-6.69,1.06-2.44,0-3.51-.53-3.51-1.91v-2.55h10.31Zm-27.63,6.37c0-1.59.74-2.44,2.34-2.44s2.44.85,2.44,2.44v2.33c0,1.38-.85,2.23-2.34,2.23-1.59,0-2.44-.85-2.44-2.23v-2.33Zm10.41-.53c0-1.59-.32-2.65-1.17-3.61-1.06-1.17-2.23-1.49-4.46-1.49h-4.68c-2.12,0-2.97.21-4.04,1.06-1.06.95-1.7,2.44-1.7,4.03v3.08c0,1.49.53,2.76,1.38,3.61,1.06,1.17,2.02,1.48,4.36,1.48h4.68c2.02,0,2.98-.21,4.04-1.06,1.06-.95,1.59-2.12,1.59-4.03v-3.08Zm-10.41-13.58c0-1.38.85-2.23,2.44-2.23s2.44.85,2.44,2.23v2.44c0,1.38-.96,2.23-2.44,2.23-1.59,0-2.44-.85-2.44-2.23v-2.44Zm9.99-5.3h-9.99c-1.91,0-2.66.21-3.72,1.06-1.06.96-1.59,2.33-1.59,3.93v3.08c0,1.27.43,2.55,1.28,3.5,1.06,1.17,1.91,1.49,4.04,1.49h4.57c2.02,0,2.87-.32,3.83-1.06,1.06-.95,1.59-2.23,1.59-3.93v-8.06Zm-22.63,17.4h-2.44c-.96,0-1.7-.32-2.13-1.06-.21-.32-.21-.42-.21-1.38v-1.91c0-1.59.74-2.33,2.34-2.33h2.44v6.68Zm0-9.97h-4.89c-1.91,0-2.76.21-3.72,1.17-1.06.85-1.59,2.12-1.59,3.82v3.29c0,1.48.32,2.55,1.17,3.5,1.06,1.17,2.02,1.48,4.25,1.48h10.52v-15.81c0-1.38-.43-2.55-1.38-3.5-1.17-1.17-2.13-1.49-4.25-1.49h-8.5v4.24c2.13-.85,3.51-1.17,5.42-1.17,2.02,0,2.97.64,2.97,2.02v2.44Zm2.34-15.81c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-7.55,0c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-14.77,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56ZM0,.72v2.97h9.14c1.06,0,1.59.21,2.13.74.43.53.43.74.43,2.65v15.29c0,2.87-.53,3.4-3.08,3.4h-2.55V6.67H0v22.4h11.26c2.66,0,3.4-.21,4.68-1.49,1.17-1.17,1.38-2.02,1.38-5.31V6.24c0-2.02-.21-2.76-1.06-3.82-1.06-1.17-2.44-1.7-4.36-1.7H0Z'%20/%3e%3c/svg%3e\");mask-repeat:no-repeat;mask-origin:content-box;mask-position:center center;margin-block:var(--_logo-spacing)}:host([compact]){aspect-ratio:1;mask-image:url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2017%2028'%3e%3cpath%20d='M0%200v2.97h9.14c1.06%200%201.59.21%202.13.74.43.53.43.74.43%202.65v15.29c0%202.87-.53%203.4-3.08%203.4H6.07V5.95H0v22.4h11.26c2.66%200%203.4-.21%204.68-1.49%201.17-1.17%201.38-2.02%201.38-5.31V5.52c0-2.02-.21-2.76-1.06-3.82C15.2.53%2013.82%200%2011.9%200H0Z'%20/%3e%3c/svg%3e\")}:host([size=\"xs\"]){--_logo-block-size: calc(var(--odx-size-150) - 2 * var(--odx-size-25));--_logo-spacing: var(--odx-size-25)}:host,:host([size=\"sm\"]){--_logo-block-size: var(--odx-size-150);--_logo-spacing: var(--odx-size-37)}:host([size=\"md\"]){--_logo-block-size: var(--odx-size-225);--_logo-spacing: var(--odx-size-37)}:host([size=\"lg\"]){--_logo-block-size: var(--odx-size-300);--_logo-spacing: var(--odx-size-37)}:host([size=\"xl\"]){--_logo-block-size: var(--odx-size-400);--_logo-spacing: var(--odx-size-37)}";
+const styles$c = ":host{aspect-ratio:92 / 36;background-color:currentColor;block-size:var(--_logo-block-size);display:inline-block;mask-image:url(\"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20?%3e%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2091.6%2035.43'%3e%3cpath%20d='m81.18,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56Zm-12.11-10.93v-4.24c0-1.59.74-2.44,2.34-2.44,1.49,0,2.34.85,2.34,2.33v4.35h-4.68Zm10.31,3.29v-8.06c0-3.4-1.81-4.99-5.63-4.99h-4.68c-2.02,0-2.87.21-3.93,1.06-1.06.96-1.7,2.33-1.7,3.93v10.71c0,1.48.43,2.55,1.38,3.61,1.06,1.06,2.02,1.38,4.25,1.38h10.2v-4.24c-2.87.85-4.57,1.06-6.69,1.06-2.44,0-3.51-.53-3.51-1.91v-2.55h10.31Zm-27.63,6.37c0-1.59.74-2.44,2.34-2.44s2.44.85,2.44,2.44v2.33c0,1.38-.85,2.23-2.34,2.23-1.59,0-2.44-.85-2.44-2.23v-2.33Zm10.41-.53c0-1.59-.32-2.65-1.17-3.61-1.06-1.17-2.23-1.49-4.46-1.49h-4.68c-2.12,0-2.97.21-4.04,1.06-1.06.95-1.7,2.44-1.7,4.03v3.08c0,1.49.53,2.76,1.38,3.61,1.06,1.17,2.02,1.48,4.36,1.48h4.68c2.02,0,2.98-.21,4.04-1.06,1.06-.95,1.59-2.12,1.59-4.03v-3.08Zm-10.41-13.58c0-1.38.85-2.23,2.44-2.23s2.44.85,2.44,2.23v2.44c0,1.38-.96,2.23-2.44,2.23-1.59,0-2.44-.85-2.44-2.23v-2.44Zm9.99-5.3h-9.99c-1.91,0-2.66.21-3.72,1.06-1.06.96-1.59,2.33-1.59,3.93v3.08c0,1.27.43,2.55,1.28,3.5,1.06,1.17,1.91,1.49,4.04,1.49h4.57c2.02,0,2.87-.32,3.83-1.06,1.06-.95,1.59-2.23,1.59-3.93v-8.06Zm-22.63,17.4h-2.44c-.96,0-1.7-.32-2.13-1.06-.21-.32-.21-.42-.21-1.38v-1.91c0-1.59.74-2.33,2.34-2.33h2.44v6.68Zm0-9.97h-4.89c-1.91,0-2.76.21-3.72,1.17-1.06.85-1.59,2.12-1.59,3.82v3.29c0,1.48.32,2.55,1.17,3.5,1.06,1.17,2.02,1.48,4.25,1.48h10.52v-15.81c0-1.38-.43-2.55-1.38-3.5-1.17-1.17-2.13-1.49-4.25-1.49h-8.5v4.24c2.13-.85,3.51-1.17,5.42-1.17,2.02,0,2.97.64,2.97,2.02v2.44Zm2.34-15.81c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-7.55,0c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-14.77,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56ZM0,.72v2.97h9.14c1.06,0,1.59.21,2.13.74.43.53.43.74.43,2.65v15.29c0,2.87-.53,3.4-3.08,3.4h-2.55V6.67H0v22.4h11.26c2.66,0,3.4-.21,4.68-1.49,1.17-1.17,1.38-2.02,1.38-5.31V6.24c0-2.02-.21-2.76-1.06-3.82-1.06-1.17-2.44-1.7-4.36-1.7H0Z'%20/%3e%3c/svg%3e\");mask-repeat:no-repeat;mask-origin:content-box;mask-position:center center;margin-block:var(--_logo-spacing)}:host([compact]){aspect-ratio:1;mask-image:url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2017%2028'%3e%3cpath%20d='M0%200v2.97h9.14c1.06%200%201.59.21%202.13.74.43.53.43.74.43%202.65v15.29c0%202.87-.53%203.4-3.08%203.4H6.07V5.95H0v22.4h11.26c2.66%200%203.4-.21%204.68-1.49%201.17-1.17%201.38-2.02%201.38-5.31V5.52c0-2.02-.21-2.76-1.06-3.82C15.2.53%2013.82%200%2011.9%200H0Z'%20/%3e%3c/svg%3e\")}:host([size=\"xs\"]){--_logo-block-size: calc(var(--odx-size-150) - 2 * var(--odx-size-25));--_logo-spacing: var(--odx-size-25)}:host,:host([size=\"sm\"]){--_logo-block-size: var(--odx-size-150);--_logo-spacing: var(--odx-size-37)}:host([size=\"md\"]){--_logo-block-size: var(--odx-size-225);--_logo-spacing: var(--odx-size-37)}:host([size=\"lg\"]){--_logo-block-size: var(--odx-size-300);--_logo-spacing: var(--odx-size-37)}:host([size=\"xl\"]){--_logo-block-size: var(--odx-size-400);--_logo-spacing: var(--odx-size-37)}";
 
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __decorateClass$c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$7(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 let OdxLogoComponent = class extends CustomElement {
@@ -854,14 +981,14 @@ let OdxLogoComponent = class extends CustomElement {
     this.translate = false;
   }
 };
-__decorateClass$9([
+__decorateClass$c([
   property({ reflect: true })
 ], OdxLogoComponent.prototype, "size", 2);
-__decorateClass$9([
+__decorateClass$c([
   property({ type: Boolean, reflect: true })
 ], OdxLogoComponent.prototype, "compact", 2);
-OdxLogoComponent = __decorateClass$9([
-  customElement("odx-logo", [styles$9])
+OdxLogoComponent = __decorateClass$c([
+  customElement("odx-logo", [styles$c])
 ], OdxLogoComponent);
 
 const LogoSize = {
@@ -872,16 +999,16 @@ const LogoSize = {
   XL: "xl"
 };
 
-const styles$8 = ":host{--_color-fill: var(--odx-color-transparent);--_color-fill-hover: var(--odx-color-transparent-hover);--_color-fill-pressed: var(--odx-color-transparent-pressed);--_color-fill-selected: var(--odx-color-selected);--_color-fill-selected-hover: var(--odx-color-selected-hover);--_color-text: inherit;--_icon-size: var(--odx-size-125);--_text-size: var(--odx-typography-font-size-3);--_line-height: var(--odx-typography-line-height-4);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-sm);white-space:nowrap;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,:host::part(anchor){display:inline-flex;place-items:center}:host::part(anchor){overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;background:transparent;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;border:none;gap:inherit;text-transform:inherit;padding-block:calc(var(--_padding-block));padding-inline:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,color,outline-color;background-color:var(--_color-fill);color:var(--_color-text);gap:var(--_padding-inline);font-size:var(--_text-size);line-height:var(--_line-height);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host(:hover){--_color-fill: var(--_color-fill-hover)}:host([selected]:not([selected=\"false\"])){--_color-fill: var(--_color-fill-selected)}:host([selected]:not([selected=\"false\"]):hover){--_color-fill: var(--_color-fill-selected-hover)}:host([selected]:not([selected=\"false\"]):active),:host(:active){--_color-fill: var(--_color-fill-pressed)}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([disabled]:not([disabled=\"false\"]))::part(anchor){--_color-fill: var(--odx-color-disabled-fill);--_color-text: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([size=\"lg\"]){--_icon-size: var(--odx-size-200);--_text-size: var(--odx-typography-font-size-3);--_line-height: var(--odx-size-100);--_padding-block: var(--odx-size-50);--_padding-inline: var(--odx-size-50)}:host([loading]:not([loading=\"false\"]))::part(anchor){color:transparent}::slotted(odx-icon){font-size:var(--_icon-size)}";
+const styles$b = ":host{--_color-fill: var(--odx-color-transparent);--_color-fill-hover: var(--odx-color-transparent-hover);--_color-fill-pressed: var(--odx-color-transparent-pressed);--_color-fill-selected: var(--odx-color-selected);--_color-fill-selected-hover: var(--odx-color-selected-hover);--_color-text: inherit;--_icon-size: var(--odx-size-125);--_text-size: var(--odx-typography-font-size-3);--_line-height: var(--odx-typography-line-height-4);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-sm);white-space:nowrap;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,:host::part(anchor){display:inline-flex;place-items:center}:host::part(anchor){overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;background:transparent;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;border:none;gap:inherit;text-transform:inherit;padding-block:calc(var(--_padding-block));padding-inline:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,color,outline-color;background-color:var(--_color-fill);color:var(--_color-text);gap:var(--_padding-inline);font-size:var(--_text-size);line-height:var(--_line-height);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host(:hover){--_color-fill: var(--_color-fill-hover)}:host([selected]:not([selected=\"false\"])){--_color-fill: var(--_color-fill-selected)}:host([selected]:not([selected=\"false\"]):hover){--_color-fill: var(--_color-fill-selected-hover)}:host([selected]:not([selected=\"false\"]):active),:host(:active){--_color-fill: var(--_color-fill-pressed)}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([disabled]:not([disabled=\"false\"]))::part(anchor){--_color-fill: var(--odx-color-disabled-fill);--_color-text: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([size=\"lg\"]){--_icon-size: var(--odx-size-200);--_text-size: var(--odx-typography-font-size-3);--_line-height: var(--odx-size-100);--_padding-block: var(--odx-size-50);--_padding-inline: var(--odx-size-50)}:host([loading]:not([loading=\"false\"]))::part(anchor){color:transparent}::slotted(*){flex:0 0 auto}::slotted(odx-icon){--size: var(--_icon-size)}::slotted(odx-avatar){--_size: var(--_icon-size)}::slotted([slot=\"end\"]){margin-inline-start:auto}";
 
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$6(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 let OdxNavigationItemComponent = class extends BaseButtonComponent {
@@ -889,22 +1016,15 @@ let OdxNavigationItemComponent = class extends BaseButtonComponent {
     super(...arguments);
     this.selected = false;
   }
-  renderContent() {
-    return html`
-      <slot name="start"></slot>
-      <slot></slot>
-      <slot name="end"></slot>
-    `;
-  }
 };
-__decorateClass$8([
+__decorateClass$b([
   property({ reflect: true })
 ], OdxNavigationItemComponent.prototype, "size", 2);
-__decorateClass$8([
+__decorateClass$b([
   property({ type: Boolean, reflect: true })
 ], OdxNavigationItemComponent.prototype, "selected", 2);
-OdxNavigationItemComponent = __decorateClass$8([
-  customElement("odx-navigation-item", [styles$8])
+OdxNavigationItemComponent = __decorateClass$b([
+  customElement("odx-navigation-item", [styles$b])
 ], OdxNavigationItemComponent);
 
 const NavigationItemSize = {
@@ -912,16 +1032,45 @@ const NavigationItemSize = {
   LG: "lg"
 };
 
-const styles$7 = ":host{--max-inline-size: var(--odx-page-max-inline-size, 100%);--scroll-margin-block-start: calc(var(--header-size, 0px) + var(--subheader-size, 0px));display:grid;min-block-size:100%;grid-template-columns:100%;grid-template-rows:repeat(minmax(0,auto),2) minmax(0px,1fr);grid-template-areas:\"header\" \"subheader\" \"content\"}.header,.subheader{position:sticky;z-index:99}.subheader,.content{inline-size:100%;background-color:var(--odx-color-background-cool);padding-inline:var(--odx-size-75);max-inline-size:var(--max-inline-size)}.header{grid-area:header;inset-block-start:0}.subheader{grid-area:subheader;inset-block-start:var(--header-size, 0px)}.content{block-size:100%;grid-area:content}:host([alignment=\"center\"]){.subheader,.content{margin-inline:auto}}:host([layout=\"narrow\"]){--max-inline-size: var(--odx-page-max-inline-size-narrow)}:host([layout=\"wide\"]){--max-inline-size: var(--odx-page-max-inline-size-wide)}";
+const styles$a = ":host{--_color-fill: var(--odx-palette-transparent);--_color-text: var(--odx-color-foreground);display:inline-flex;place-items:center;padding:var(--odx-size-37) var(--odx-size-75);cursor:pointer;gap:var(--odx-size-75);border-radius:var(--odx-border-radius-controls);transition:var(--odx-transition-reduced);outline:var(--odx-outline-focus);outline-offset:var(--odx-outline-offset-focus);background-color:var(--_color-fill);transition-property:background-color,color,outline-color;user-select:none;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);color:var(--_color-text)}odx-checkbox{margin:0}:host(:hover){--_color-fill: var(--odx-color-transparent-hover)}:host(:active){--_color-fill: var(--odx-color-transparent-pressed)}:host([aria-selected=\"true\"]){--_color-fill: var(--odx-color-selected)}:host([aria-selected=\"true\"]:hover){--_color-fill: var(--odx-color-selected-hover)}:host([disabled]:not([disabled=\"false\"])){--_color-fill: var(--odx-color-disabled-fill);--_color-text: var(--odx-color-disabled-foreground);cursor:not-allowed;pointer-events:none}:host([aria-selected=\"true\"][disabled]:not([disabled=\"false\"])){--_color-fill: var(--odx-color-disabled-fill-selected);--_color-text: var(--odx-color-disabled-foreground-selected)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}slot[name=_checkbox]::slotted(odx-checkbox){margin:0;pointer-events:none}";
 
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$5(target, key, result);
+  if (kind && result) __defProp$7(target, key, result);
+  return result;
+};
+let OdxOptionComponent = class extends OptionControl {
+  render() {
+    return html`
+      ${when(this.type === "checkbox", () => html`<odx-checkbox .checked=${this.selected} ?disabled=${this.disabled} inert></odx-checkbox>`)}
+      <slot name="start"></slot>
+      <slot></slot>
+      <slot name="end"></slot>
+    `;
+  }
+};
+__decorateClass$a([
+  property({ reflect: true })
+], OdxOptionComponent.prototype, "type", 2);
+OdxOptionComponent = __decorateClass$a([
+  customElement("odx-option", [styles$a])
+], OdxOptionComponent);
+
+const styles$9 = ":host{--max-inline-size: var(--odx-page-max-inline-size, 100%);--scroll-margin-block-start: calc(var(--header-size, 0px) + var(--subheader-size, 0px));display:grid;min-block-size:100%;grid-template-columns:100%;grid-template-rows:repeat(minmax(0,auto),2) minmax(0px,1fr);grid-template-areas:\"header\" \"subheader\" \"content\"}.header,.subheader{position:sticky;z-index:99}.subheader,.content{inline-size:100%;background-color:var(--odx-color-background-cool);padding-inline:var(--odx-size-75);max-inline-size:var(--max-inline-size)}.header{grid-area:header;inset-block-start:0}.subheader{grid-area:subheader;inset-block-start:var(--header-size, 0px)}.content{block-size:100%;grid-area:content}:host([alignment=\"center\"]){.subheader,.content{margin-inline:auto}}:host([layout=\"narrow\"]){--max-inline-size: var(--odx-page-max-inline-size-narrow)}:host([layout=\"wide\"]){--max-inline-size: var(--odx-page-max-inline-size-wide)}";
+
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
 let OdxPageComponent = class extends CustomElement {
@@ -945,20 +1094,20 @@ let OdxPageComponent = class extends CustomElement {
     `;
   }
 };
-__decorateClass$7([
+__decorateClass$9([
   query(".header", true)
 ], OdxPageComponent.prototype, "headerElement", 2);
-__decorateClass$7([
+__decorateClass$9([
   query(".subheader", true)
 ], OdxPageComponent.prototype, "subheaderElement", 2);
-__decorateClass$7([
+__decorateClass$9([
   property({ reflect: true })
 ], OdxPageComponent.prototype, "alignment", 2);
-__decorateClass$7([
+__decorateClass$9([
   property({ reflect: true })
 ], OdxPageComponent.prototype, "layout", 2);
-OdxPageComponent = __decorateClass$7([
-  customElement("odx-page", [styles$7])
+OdxPageComponent = __decorateClass$9([
+  customElement("odx-page", [styles$9])
 ], OdxPageComponent);
 
 const PageAlignment = {
@@ -969,11 +1118,11 @@ const PageLayout = {
   WIDE: "wide"
 };
 
-const styles$6 = ":host{display:grid;inline-size:100%;grid-template-columns:minmax(0,auto) minmax(0px,100%);grid-template-rows:minmax(0px,auto) minmax(0px,1fr);grid-template-areas:\"navigation header\" \"navigation content\";justify-content:start;max-inline-size:var(--max-inline-size)}.header,.navigation{background-color:var(--odx-color-fill-main);position:sticky;inset-block-start:var(--scroll-margin-block-start);z-index:98}.content{grid-area:content;margin-block-end:var(--odx-size-150)}.header{grid-area:header}.navigation{--_size: calc(100dvh - var(--scroll-margin-block-start));grid-area:navigation;inset-block-start:var(--scroll-margin-block-start);inset-block-end:0;max-block-size:var(--_size);max-inline-size:10rem;overflow:auto;padding-inline-end:var(--odx-size-75)}";
+const styles$8 = ":host{display:grid;inline-size:100%;grid-template-columns:minmax(0,auto) minmax(0px,100%);grid-template-rows:minmax(0px,auto) minmax(0px,1fr);grid-template-areas:\"navigation header\" \"navigation content\";justify-content:start;max-inline-size:var(--max-inline-size)}.header,.navigation{background-color:var(--odx-color-fill-main);position:sticky;inset-block-start:var(--scroll-margin-block-start);z-index:98}.content{grid-area:content;margin-block-end:var(--odx-size-150)}.header{grid-area:header}.navigation{--_size: calc(100dvh - var(--scroll-margin-block-start));grid-area:navigation;inset-block-start:var(--scroll-margin-block-start);inset-block-end:0;max-block-size:var(--_size);max-inline-size:10rem;overflow:auto;padding-inline-end:var(--odx-size-75)}";
 
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -990,11 +1139,73 @@ let OdxPageLayoutComponent = class extends CustomElement {
     `;
   }
 };
-OdxPageLayoutComponent = __decorateClass$6([
-  customElement("odx-page-layout", [styles$6])
+OdxPageLayoutComponent = __decorateClass$8([
+  customElement("odx-page-layout", [styles$8])
 ], OdxPageLayoutComponent);
 
-const styles$5 = ":host{--max-inline-size: 192px;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);transition:var(--odx-transition-default);transition-property:max-inline-size}.toggle-control{margin-block-start:auto}.toggle-icon{transition:var(--odx-transition-default)}:host([collapsed]:not([collapsed=\"false\"])){--max-inline-size: var(--odx-size-400);.toggle-icon{transform:rotateY(-180deg)}}";
+const styles$7 = ":host{--_indicator-space: calc(var(--odx-size-25) / 2);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-fill: var(--odx-color-selection-control-fill);--_indicator-color-border: var(--odx-color-selection-control-stroke);--_indicator-border-width: var(--odx-border-width-thin);--_label-color-text: var(--odx-color-foreground);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);padding:var(--_indicator-space);transition-property:outline-color}:host,:host::part(indicator),:host::part(content){transition:var(--odx-transition-reduced)}:host::part(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-circle);background-color:var(--_indicator-color-fill);border:var(--odx-border-width-thin) solid var(--_indicator-color-border);border-color:var(--_indicator-color-border);border-width:var(--_indicator-border-width);transition-property:background-color,border,outline;outline:var(--odx-border-width-thick) solid var(--odx-palette-transparent);outline-offset:calc(-1 * var(--odx-border-width-thick))}:host::part(label){display:inline-block}:host::part(content){color:var(--_label-color-text);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:not(:empty))::part(indicator){margin-inline-end:var(--odx-size-75)}:host(:empty)::part(content){display:none}:host(:hover){--_indicator-color-border: var(--odx-color-selection-control-stroke-hover);--_indicator-color-fill: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible){outline-color:var(--odx-color-focus)}:host([checked]:not([checked=\"false\"])){--_indicator-color-border: var(--odx-color-selection-control-fill-selected);--_indicator-color-fill: var(--odx-color-background-main);--_indicator-color-text: var(--odx-color-foreground-light);--_indicator-border-width: var(--odx-border-width-thickest)}:host([disabled]:not([disabled=\"false\"])){--_indicator-color-fill: var(--odx-color-disabled-fill);--_indicator-color-text: var(--odx-palette-transparent);--_indicator-color-border: var(--odx-color-disabled-fill);--_label-color-text: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([disabled]:not([disabled=\"false\"])[checked]:not([checked=\"false\"])){--_indicator-color-border: var(--odx-color-disabled-fill-selected)}:host([readonly]:not([readonly=\"false\"])){--_indicator-color-fill: var(--odx-color-selection-control-fill-readonly);--_indicator-color-border: var(--odx-color-background-main);cursor:default}:host([readonly]:not([readonly=\"false\"])[checked]:not([checked=\"false\"])){--_indicator-color-fill: var(--odx-color-selection-control-fill-selected);--_indicator-border-width: var(--odx-size-50);[part=indicator]{outline-color:var(--odx-color-selection-control-fill-selected)}}";
+
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(result)) || result;
+  return result;
+};
+let OdxRadioButtonComponent = class extends CheckboxControl {
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.internals.role = "radio";
+  }
+  render() {
+    return html`
+      <div part="indicator" role="presentation">
+      </div>
+      <div part="content">
+        <div part="label">
+          <slot></slot>
+        </div>
+        <div part="description">
+          <slot name="description"></slot>
+        </div>
+      </div>
+    `;
+  }
+  toggle(state, emitEvent = false) {
+    super.toggle(state ?? true, emitEvent);
+  }
+};
+OdxRadioButtonComponent = __decorateClass$7([
+  customElement("odx-radio-button", [styles$7])
+], OdxRadioButtonComponent);
+
+const styles$6 = ":host{display:flex;flex-direction:column}::slotted(:is(odx-radio-button,odx-switch)){border-block-end:0;border-color:transparent;width:max-content}:host([variant=\"list\"]) ::slotted(:is(odx-radio-button,odx-switch)){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-separator);padding:var(--odx-size-75);margin:0;width:auto;border-radius:0;outline-offset:0}:host([variant=\"list\"]) ::slotted(:is(odx-radio-button,odx-switch):last-of-type){border-block-end:none}";
+
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$5(target, key, result);
+  return result;
+};
+let OdxRadioGroupComponent = class extends RadioGroupControl {
+};
+__decorateClass$6([
+  property({ reflect: true })
+], OdxRadioGroupComponent.prototype, "variant", 2);
+OdxRadioGroupComponent = __decorateClass$6([
+  customElement("odx-radio-group", [styles$6])
+], OdxRadioGroupComponent);
+
+const RadioGroupVariant = {
+  LIST: "list"
+};
+
+const styles$5 = ":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)}:host([collapsed]:not([collapsed=\"false\"])){--min-inline-size: var(--odx-size-400);--max-inline-size: var(--odx-size-400);.toggle-icon{transform:rotateY(-180deg)}}";
 
 var __defProp$4 = Object.defineProperty;
 var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
@@ -1013,7 +1224,7 @@ var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Ca
 var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var _handleControlClick, _handleSlotChange$1;
-let OdxRailNavigationComponent = class extends CustomElement {
+let OdxRailNavigationComponent = class extends IsTranslatable(CustomElement) {
   constructor() {
     super(...arguments);
     this.collapsed = false;
@@ -1029,17 +1240,26 @@ let OdxRailNavigationComponent = class extends CustomElement {
     });
   }
   render() {
+    const controlLabel = this._translate(this.collapsed ? "controlLabelCollapsed" : "controlLabelExpanded") || null;
     return html`
       <slot @slotchange=${__privateGet$1(this, _handleSlotChange$1)}></slot>
       <odx-navigation-item class="toggle-control" size="lg" @click=${__privateGet$1(this, _handleControlClick)}>
         <odx-icon class="toggle-icon" name="core::chevron-left" slot="start"></odx-icon>
-        <odx-visually-hidden>${this.collapsed ? "Expand" : "Collapse"} navigation</odx-visually-hidden>
+        <odx-visually-hidden>${controlLabel}</odx-visually-hidden>
       </odx-navigation-item>
     `;
   }
   getItems() {
     return this.navigationItems;
   }
+  _getTranslations() {
+    return {
+      en: {
+        controlLabelExpanded: "Collapse navigation",
+        controlLabelCollapsed: "Expand navigation"
+      }
+    };
+  }
 };
 _handleControlClick = new WeakMap();
 _handleSlotChange$1 = new WeakMap();
@@ -1325,4 +1545,4 @@ OdxVisuallyHiddenComponent = __decorateClass([
   customElement("odx-visually-hidden", [styles])
 ], OdxVisuallyHiddenComponent);
 
-export { AvatarSize, AvatarVariant, BadgeVariant, BaseButtonComponent, BaseLink, ButtonSize, ButtonVariant, HeadlineSize, LogoSize, NavigationItemSize, OdxAvatarComponent, OdxAvatarGroupComponent, OdxBadgeComponent, OdxBreadcrumbComponent, OdxBreadcrumbItemComponent, OdxButtonComponent, OdxButtonGroupComponent, OdxFormatBytesComponent, OdxFormatDateComponent, OdxFormatNumberComponent, OdxHeaderActionsComponent, OdxHeaderComponent, OdxHeadlineComponent, OdxIconButtonComponent, OdxLinkComponent, OdxLoadingIndicatorComponent, OdxLogoComponent, OdxNavigationItemComponent, OdxPageComponent, OdxPageLayoutComponent, OdxRailNavigationComponent, OdxRelativeTimeComponent, OdxSearchBarComponent, OdxSeparatorComponent, OdxStackComponent, OdxTextComponent, OdxTitleComponent, OdxVisuallyHiddenComponent, PageAlignment, PageLayout, SearchBarBehavior, SearchEvent, StackAlignItems, StackGap, StackJustifyContent, TextSize, TextVariant, TitleSize };
+export { AvatarSize, AvatarVariant, BadgeVariant, BaseButtonComponent, BaseLink, ButtonSize, ButtonVariant, CheckboxGroupVariant, HeadlineSize, LogoSize, NavigationItemSize, OdxAvatarComponent, OdxAvatarGroupComponent, OdxBadgeComponent, OdxBreadcrumbComponent, OdxBreadcrumbItemComponent, OdxButtonComponent, OdxButtonGroupComponent, OdxCheckboxComponent, OdxCheckboxGroupComponent, OdxFormatBytesComponent, OdxFormatDateComponent, OdxFormatNumberComponent, OdxHeaderActionsComponent, OdxHeaderComponent, OdxHeadlineComponent, OdxIconButtonComponent, OdxLinkComponent, OdxLoadingIndicatorComponent, OdxLogoComponent, OdxNavigationItemComponent, OdxOptionComponent, OdxPageComponent, OdxPageLayoutComponent, OdxRadioButtonComponent, OdxRadioGroupComponent, OdxRailNavigationComponent, OdxRelativeTimeComponent, OdxSearchBarComponent, OdxSeparatorComponent, OdxStackComponent, OdxTextComponent, OdxTitleComponent, OdxVisuallyHiddenComponent, PageAlignment, PageLayout, RadioGroupVariant, SearchBarBehavior, SearchEvent, StackAlignItems, StackGap, StackJustifyContent, TextSize, TextVariant, TitleSize };