@odx/foundation 1.0.0-beta.50 → 1.0.0-beta.51

package/dist/components.js

@@ -1,11 +1,11 @@
-import { CanBeExpanded, InteractiveElement, getUniqueId, toAriaBooleanAttribute, customElement, requestUpdateOnAriaChange, CustomElement, ExpandableItemManager, enumFrom, Size, Variant, optionalAttr, InteractiveLink, createIntersectionObserver, createMutationObserver, getElementFromEvent, Shape, CanBeDisabled, optionalSlot, CheckboxGroupFormControl, CheckboxFormControl, toggleAttribute, SharedResizeObserver, PopoverPlacement, PopoverHost, getKeyboardEventInfo, PopoverPlacementOptions, searchTextContent, FormControl, ActiveDescendantsController, getAssignedElement, parseDate, waitForAnimations, forwardEvent, CanBeSelected, WithLoadingState, FocusTrapController, OptionControl, toPx, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation';
+import { CanBeExpanded, InteractiveElement, getUniqueId, toAriaBooleanAttribute, customElement, requestUpdateOnAriaChange, CustomElement, ExpandableItemManager, enumFrom, Size, Variant, optionalAttr, InteractiveLink, createIntersectionObserver, createMutationObserver, getElementFromEvent, Shape, CanBeDisabled, optionalSlot, CheckboxGroupFormControl, CheckboxFormControl, toggleAttribute, SharedResizeObserver, PopoverPlacement, PopoverHost, getKeyInfo, PopoverPlacementOptions, searchTextContent, FormControl, ActiveDescendantsController, getAssignedElement, parseDate, waitForAnimations, forwardEvent, CanBeSelected, WithLoadingState, OptionControl, toPx, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation';
 import { html, isServer, css, nothing } from 'lit';
 import { property, queryAssignedElements, state, queryAll, query } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import { signal, computed, SignalWatcher } from '@lit-labs/preact-signals';
 import { repeat } from 'lit/directives/repeat.js';
 import { IsLocalized, setTranslation } from '@odx/foundation/i18n';
-import { R as RovingTabindexController, r as round, d as debounce } from './vendor-C_8wBEOn.js';
+import { R as RovingTabindexController, r as round, d as debounce } from './vendor-kPOMiFOM.js';
 import { createContext, consume, provide } from '@lit/context';
 
 const styles$1d = ":host{display:block;margin-block:var(--odx-size-37)}:host([expanded])::part(indicator){--rotate: 180deg}";
@@ -799,7 +799,7 @@ OdxButtonGroup = __decorateClass$1a([
   customElement("odx-button-group", [styles$10])
 ], OdxButtonGroup);
 
-const styles$$ = ":host{--_card-padding: var(--odx-size-150);display:grid;grid-template-areas:\"image image\" \"avatar avatar\" \"title header-actions\" \"content content\" \"footer footer\";grid-template-columns:1fr auto;place-content:flex-start;border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-main);padding:var(--_card-padding);max-width:100%;overflow:clip}.header,.title{display:flex;place-items:center;margin-block-end:var(--odx-size-50);min-block-size:var(--odx-size-225);overflow:hidden}.title{grid-area:title}.header{grid-area:header-actions}.avatar{display:flex;grid-area:avatar;place-items:flex-end;margin-block-start:calc(-1 * var(--odx-size-50))}.image{position:relative;grid-area:image;margin:calc(-1 * var(--_card-padding));margin-block-end:var(--odx-size-150)}.image:after{position:absolute;inset:0;transition:var(--odx-transition-default);opacity:0;background-color:var(--odx-color-background-transparent-hover);content:\"\";pointer-events:none;backdrop-filter:blur(var(--odx-elevation-blur))}:host::part(content){grid-area:content}:host::part(footer){grid-area:footer}[part=image-container]+[part=avatar-container]{block-size:0}slot[name=image]::slotted(*){max-block-size:100%;max-inline-size:100%;pointer-events:none;object-fit:cover;aspect-ratio:16 / 9;user-select:none}slot[name=avatar]::slotted(*){margin:0}:host(:hover){cursor:pointer}:host(:hover) .image:after{opacity:1}";
+const styles$$ = ":host{--_card-padding: var(--odx-size-150);display:grid;grid-template-areas:\"image image\" \"avatar avatar\" \"title header-actions\" \"content content\" \"footer footer\";grid-template-columns:1fr auto;place-content:flex-start;border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-level-1);padding:var(--_card-padding);max-width:100%;overflow:clip}.header,.title{display:flex;place-items:center;margin-block-end:var(--odx-size-50);min-block-size:var(--odx-size-225);overflow:hidden}.title{grid-area:title}.header{grid-area:header-actions}.avatar{display:flex;grid-area:avatar;place-items:flex-end;margin-block-start:calc(-1 * var(--odx-size-50))}.image{position:relative;grid-area:image;margin:calc(-1 * var(--_card-padding));margin-block-end:var(--odx-size-150)}.image:after{position:absolute;inset:0;transition:var(--odx-transition-default);opacity:0;background-color:var(--odx-color-background-transparent-hover);content:\"\";pointer-events:none;backdrop-filter:blur(var(--odx-elevation-blur))}:host::part(content){grid-area:content}:host::part(footer){grid-area:footer}[part=image-container]+[part=avatar-container]{block-size:0}slot[name=image]::slotted(*){max-block-size:100%;max-inline-size:100%;pointer-events:none;object-fit:cover;aspect-ratio:16 / 9;user-select:none}slot[name=avatar]::slotted(*){margin:0}:host(:hover){cursor:pointer}:host(:hover) .image:after{opacity:1}";
 
 var __defProp$19 = Object.defineProperty;
 var __getOwnPropDesc$19 = Object.getOwnPropertyDescriptor;
@@ -1169,8 +1169,7 @@ let OdxDropdown = class extends PopoverHost {
       this.togglePopover();
     });
     __privateAdd$p(this, _handleKeyboardEvent$1, (event) => {
-      const { actions } = getKeyboardEventInfo(event);
-      if (!actions.enter || event.defaultPrevented) return;
+      if (!getKeyInfo(event).enter || event.defaultPrevented) return;
       if (!this.isPopoverOpen()) {
         event.stopImmediatePropagation();
       }
@@ -1395,14 +1394,14 @@ let OdxAutocomplete = class extends CanBeDisabled(FormControl(CustomElement)) {
     });
     __privateAdd$n(this, _handleControlKeyboardEvent, (event) => {
       if (!this.control) return;
-      const { actions, direction } = getKeyboardEventInfo(event);
-      if (actions.enter || actions.start || actions.end || direction.down || direction.up) {
+      const key = getKeyInfo(event);
+      if (key.enter || key.start || key.end || key.down || key.up) {
         event.preventDefault();
       }
-      if (actions.space) {
+      if (key.space) {
         event.stopImmediatePropagation();
       }
-      if (this.activeDescendants.activeItem && actions.enter) {
+      if (this.activeDescendants.activeItem && key.enter) {
         __privateMethod$e(this, _OdxAutocomplete_instances, handleControlValueChange_fn).call(this, this.activeDescendants.activeItem.getTextLabel());
       }
     });
@@ -1846,7 +1845,7 @@ OdxTitle = __decorateClass$V([
   customElement("odx-title", [styles$Q])
 ], OdxTitle);
 
-const styles$P = "@layer base{:host{display:block;position:relative}.base{display:flex;block-size:var(--odx-size-300);background-color:var(--odx-color-background-main);column-gap:var(--odx-size-150);padding-inline:var(--odx-size-150);place-items:center;z-index:1;position:relative}.background{position:absolute;inset:0;z-index:0;background-color:var(--odx-color-background-main);clip-path:inset(0 -100vmax);box-shadow:0 0 0 100vmax var(--odx-color-background-main)}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$P = "@layer base{:host{display:block;position:relative}.base{display:flex;position:relative;column-gap:var(--odx-size-150);place-items:center;z-index:1;background-color:var(--odx-color-background-level-1);padding-inline:var(--odx-size-150);block-size:var(--odx-size-300)}.background{position:absolute;inset:0;z-index:0;box-shadow:0 0 0 100vmax var(--odx-color-background-level-1);background-color:var(--odx-color-background-level-1);clip-path:inset(0 -100vmax)}odx-logo{flex:0 0 auto}::slotted(odx-title){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 (width <= 600px){odx-logo{display:none}}}";
 
 var __defProp$U = Object.defineProperty;
 var __getOwnPropDesc$U = Object.getOwnPropertyDescriptor;
@@ -2081,7 +2080,7 @@ OdxImage = __decorateClass$R([
   customElement("odx-image", [styles$M])
 ], OdxImage);
 
-const styles$L = "@layer base{:host{--_color-background: var(--odx-color-background-main);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-separator);--_icon-size: var(--odx-size-150);display:flex;gap:var(--odx-size-75);align-items:flex-start;transition:var(--odx-transition-reduced);transition-property:background-color,color,display,opacity;background-color:var(--_color-background);padding:var(--odx-size-75);line-height:var(--odx-typography-line-height-base);color:var(--_color-foreground);transition-behavior:allow-discrete;@starting-style{opacity:0}}.icon{--size: var(--_icon-size)}.base{flex:1 1 auto;line-height:var(--odx-typography-line-height-base);font-size:var(--odx-typography-font-size-2)}.action{--_color-foreground: inherit;margin-block-start:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-37))}}@layer state{:host([hidden]){display:none;opacity:0}}@layer variant{:host([variant=\"accent\"]){--_color-background: var(--odx-palette-blue-10);--_color-stroke: var(--odx-palette-blue-60)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-muted);--_color-foreground: var(--odx-palette-red-90);--_color-stroke: var(--odx-palette-red-60)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-background-warning-muted);--_color-stroke: var(--odx-palette-yellow-60)}:host([variant=\"success\"]){--_color-background: var(--odx-color-background-success-muted);--_color-stroke: var(--odx-palette-green-60)}:host([emphasized]){border-inline-start:var(--odx-border-width-thickest) solid var(--_color-stroke);padding-inline-start:calc(var(--odx-size-75) - var(--odx-border-width-thickest))}}";
+const styles$L = "@layer base{:host{--_color-background: var(--odx-color-background-level-1);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-separator);--_icon-size: var(--odx-size-150);display:flex;gap:var(--odx-size-75);align-items:flex-start;transition:var(--odx-transition-reduced);transition-property:background-color,color,display,opacity;background-color:var(--_color-background);padding:var(--odx-size-75);line-height:var(--odx-typography-line-height-base);color:var(--_color-foreground);transition-behavior:allow-discrete;@starting-style{opacity:0}}.icon{--size: var(--_icon-size)}.base{flex:1 1 auto;line-height:var(--odx-typography-line-height-base);font-size:var(--odx-typography-font-size-2)}.action{--_color-foreground: inherit;margin-block-start:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-37))}}@layer state{:host([hidden]){display:none;opacity:0}}@layer variant{:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-muted);--_color-stroke: var(--odx-palette-blue-60)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-muted);--_color-foreground: var(--odx-palette-red-90);--_color-stroke: var(--odx-palette-red-60)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-background-warning-muted);--_color-stroke: var(--odx-palette-yellow-60)}:host([variant=\"success\"]){--_color-background: var(--odx-color-background-success-muted);--_color-stroke: var(--odx-palette-green-60)}:host([emphasized]){border-block-end:var(--odx-border-width-thick) solid var(--_color-stroke);padding-block-end:calc(var(--odx-size-75) - var(--odx-border-width-thick))}}";
 
 var __defProp$Q = Object.defineProperty;
 var __getOwnPropDesc$Q = Object.getOwnPropertyDescriptor;
@@ -2178,8 +2177,7 @@ let OdxInput = class extends FormControl(CustomElement) {
       this.value = event.target.value;
     });
     __privateAdd$i(this, _handleKeyDown$2, (event) => {
-      const { actions } = getKeyboardEventInfo(event);
-      if (!actions.escape) return;
+      if (!getKeyInfo(event).escape) return;
       event.preventDefault();
       this.clear();
     });
@@ -2772,22 +2770,15 @@ var __decorateClass$D = (decorators, target, key, kind) => {
 var __accessCheck$d = (obj, member, msg) => member.has(obj) || __typeError$d("Cannot " + msg);
 var __privateGet$b = (obj, member, getter) => (__accessCheck$d(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$d = (obj, member, value) => member.has(obj) ? __typeError$d("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _focusTrap, _handleSlotChange$4, _handleToggle;
+var _handleSlotChange$4;
 let OdxMainMenu = class extends CustomElement {
   constructor() {
-    super();
-    __privateAdd$d(this, _focusTrap, new FocusTrapController(this));
+    super(...arguments);
     __privateAdd$d(this, _handleSlotChange$4, () => {
       for (const link of this.links) {
         link.slot ||= "link-navigation";
       }
     });
-    __privateAdd$d(this, _handleToggle, ({ newState }) => {
-      __privateGet$b(this, _focusTrap).toggle(newState === "open");
-    });
-    if (!isServer) {
-      this.addEventListener("toggle", __privateGet$b(this, _handleToggle));
-    }
   }
   connectedCallback() {
     super.connectedCallback();
@@ -2820,9 +2811,7 @@ let OdxMainMenu = class extends CustomElement {
     `;
   }
 };
-_focusTrap = new WeakMap();
 _handleSlotChange$4 = new WeakMap();
-_handleToggle = new WeakMap();
 __decorateClass$D([
   queryAssignedElements({ selector: "odx-link", flatten: true })
 ], OdxMainMenu.prototype, "links", 2);
@@ -2924,21 +2913,20 @@ let OdxMenu = class extends PopoverHost {
       this.hidePopover();
     });
     __privateAdd$c(this, _handleKeyDown$1, (event) => {
-      const { actions } = getKeyboardEventInfo(event);
-      if ((actions.tab || actions.backTab) && this.isPopoverOpen()) {
+      const key = getKeyInfo(event);
+      if ((key.tab || key.backTab) && this.isPopoverOpen()) {
         event?.preventDefault();
         event.stopPropagation();
         this.hidePopover();
         return;
       }
-      if (!actions.enter && !actions.space) return;
+      if (!key.enter && !key.space) return;
       const [activeItem] = this.getItems().filter((item) => item.tabIndex === 0);
       if (!activeItem) return;
       activeItem.click();
     });
     __privateAdd$c(this, _handleReferenceKeyDown, (event) => {
-      const { direction } = getKeyboardEventInfo(event);
-      if (!direction.down) return;
+      if (!getKeyInfo(event).down) return;
       this.showPopover();
     });
   }
@@ -2992,7 +2980,7 @@ OdxMenu = __decorateClass$A([
   customElement("odx-menu", [styles$y])
 ], OdxMenu);
 
-const styles$x = "@layer base{:host{--max-inline-size: 640px;--margin-block-start: var(--odx-size-450);--_modal-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_modal-transition-offset-x: 0;--_modal-transition-offset-y: calc(-1 * var(--_modal-offset));--_modal-outer-padding: var(--odx-breakpoint-spacing-150);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-default);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0}.base{transform:translateY(var(--odx-size-100));transition-property:opacity,display,overlay,transform,outline;margin-block-start:var(--margin-block-start);border:0;border-radius:var(--odx-border-radius-ml);box-shadow:var(--odx-shadow-level-2);background:transparent;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));overflow:unset;color:var(--odx-color-foreground-rest);&::backdrop{transition-property:opacity;background-color:var(--odx-color-backdrop);backdrop-filter:blur(var(--odx-elevation-blur))}}.inner{display:flex;flex-direction:column;border-radius:inherit;background-color:var(--odx-color-background-main);padding:var(--odx-spacing-50) var(--odx-breakpoint-spacing-150);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.header{padding-inline-end:var(--odx-size-300)}.content{padding:var(--odx-size-75) 0}.dismiss-action{position:absolute;inset-block-start:var(--odx-spacing-50);inset-inline-end:var(--odx-breakpoint-spacing-150)}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline-color:var(--odx-focus-ring-color)}.base[open]{transform:translate(0);&,&::backdrop{opacity:1;@starting-style{opacity:0}}@starting-style{transform:translateY(var(--odx-size-100))}}}";
+const styles$x = "@layer base{:host{--max-inline-size: 640px;--margin-block-start: var(--odx-size-450);--_modal-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_modal-transition-offset-x: 0;--_modal-transition-offset-y: calc(-1 * var(--_modal-offset));--_modal-outer-padding: var(--odx-breakpoint-spacing-150);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-default);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0}.base{transform:translateY(var(--odx-size-100));transition-property:opacity,display,overlay,transform,outline;margin-block-start:var(--margin-block-start);border:0;border-radius:var(--odx-border-radius-ml);box-shadow:var(--odx-shadow-level-2);background:transparent;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));overflow:unset;color:var(--odx-color-foreground-rest);&::backdrop{transition-property:opacity;background-color:var(--odx-color-backdrop);backdrop-filter:blur(var(--odx-elevation-blur))}}.inner{display:flex;flex-direction:column;border-radius:inherit;background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-50) var(--odx-breakpoint-spacing-150);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.header{padding-inline-end:var(--odx-size-300)}.content{padding:var(--odx-size-75) 0}.dismiss-action{position:absolute;inset-block-start:var(--odx-spacing-50);inset-inline-end:var(--odx-breakpoint-spacing-150)}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline-color:var(--odx-focus-ring-color)}.base[open]{transform:translate(0);&,&::backdrop{opacity:1;@starting-style{opacity:0}}@starting-style{transform:translateY(var(--odx-size-100))}}}";
 
 var __defProp$z = Object.defineProperty;
 var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
@@ -3037,8 +3025,7 @@ let OdxModal = class extends CustomElement {
     this.showRequested = false;
     this.open = false;
     __privateAdd$b(this, _handleKeyDown, (event) => {
-      const { actions } = getKeyboardEventInfo(event);
-      if (!actions.escape) return;
+      if (!getKeyInfo(event).escape) return;
       event.preventDefault();
       this.dismiss();
     });
@@ -3170,7 +3157,7 @@ OdxNavigationItem = __decorateClass$y([
   customElement("odx-navigation-item", [styles$w])
 ], OdxNavigationItem);
 
-const styles$v = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: inherit;display:inline-flex;gap:var(--odx-size-75);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,color,outline-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-outline-offset-focus);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding:var(--odx-size-37) var(--odx-size-75);color:var(--_color-foreground);user-select:none}odx-checkbox{margin:0}:host(:hover){--_color-background: var(--odx-color-background-transparent-hover)}:host([odx-active]),:host(:active){--_color-background: var(--odx-color-background-transparent-pressed)}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected)}:host([selected]:hover){--_color-background: var(--odx-color-background-transparent-selected-hover)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed;pointer-events:none}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([selected][odx-active]),:host([selected]:active){--_color-background: var(--odx-color-background-transparent-selected-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}";
+const styles$v = ":host{--_color-background: var(--odx-color-background-transparent);--_color-foreground: inherit;display:inline-flex;gap:var(--odx-size-75);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,color,outline-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-outline-offset-focus);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding:var(--odx-size-37) var(--odx-size-75);color:var(--_color-foreground);user-select:none}odx-checkbox{margin:0}:host(:hover){--_color-background: var(--odx-color-background-transparent-hover)}:host([odx-active]),:host(:active){--_color-background: var(--odx-color-background-transparent-pressed)}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected)}:host([selected]:hover){--_color-background: var(--odx-color-background-transparent-selected-hover)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed;pointer-events:none}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([selected][odx-active]),:host([selected]:active){--_color-background: var(--odx-color-background-transparent-selected-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}";
 
 var __defProp$x = Object.defineProperty;
 var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
@@ -3199,7 +3186,7 @@ OdxOption = __decorateClass$x([
   customElement("odx-option", [styles$v])
 ], OdxOption);
 
-const styles$u = ":host{display:grid;grid-template-areas:\"navigation header sidebar\" \"navigation content sidebar\" \"footer footer footer\";grid-template-rows:minmax(0,auto) minmax(0,1fr) minmax(0,auto);grid-template-columns:minmax(0,auto) minmax(0,100%) minmax(0,auto);justify-content:start;padding-inline:var(--odx-size-75);inline-size:100%;max-inline-size:var(--max-inline-size)}.header,.navigation,.sidebar{position:sticky;inset-block-start:var(--scroll-margin-block-start);z-index:98;background-color:var(--odx-color-background-cool)}.navigation,.sidebar{--_size: calc(100dvh - var(--scroll-margin-block-start));inset-block-end:0;max-block-size:var(--_size);overflow:auto}.content{display:flex;flex-direction:column;grid-area:content;margin-block-end:var(--odx-size-150)}.footer{grid-area:footer}.header{grid-area:header}.navigation{grid-area:navigation;padding-inline-end:var(--odx-size-75)}.sidebar{grid-area:sidebar;padding-inline-start:var(--odx-size-75)}";
+const styles$u = ":host{display:grid;grid-template-areas:\"navigation header sidebar\" \"navigation content sidebar\" \"footer footer footer\";grid-template-rows:minmax(0,auto) minmax(0,1fr) minmax(0,auto);grid-template-columns:minmax(0,auto) minmax(0,100%) minmax(0,auto);justify-content:start;padding-inline:var(--odx-size-75);inline-size:100%;max-inline-size:var(--max-inline-size)}.header,.navigation,.sidebar{position:sticky;inset-block-start:var(--scroll-margin-block-start);z-index:98;background-color:var(--odx-color-background-base)}.navigation,.sidebar{--_size: calc(100dvh - var(--scroll-margin-block-start));inset-block-end:0;max-block-size:var(--_size);overflow:auto}.content{display:flex;flex-direction:column;grid-area:content;margin-block-end:var(--odx-size-150)}.footer{grid-area:footer}.header{grid-area:header}.navigation{grid-area:navigation;padding-inline-end:var(--odx-size-75)}.sidebar{grid-area:sidebar;padding-inline-start:var(--odx-size-75)}";
 
 var __defProp$w = Object.defineProperty;
 var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
@@ -3228,7 +3215,7 @@ OdxPageLayout = __decorateClass$w([
   customElement("odx-page-layout", [styles$u])
 ], OdxPageLayout);
 
-const styles$t = "@layer base{: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;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\";grid-template-rows:minmax(0,auto) minmax(0,auto) minmax(0,1fr) minmax(0,auto);grid-template-columns:100%;min-block-size:100dvh}.header,.subheader{position:sticky;z-index:99}.subheader,.content{background-color:var(--odx-color-background-cool);padding-inline:var(--odx-size-75);inline-size:100%;max-inline-size:var(--max-inline-size)}.header{inset-block-start:0;grid-area:header}.subheader{inset-block-start:var(--header-size, 0);grid-area:subheader}.content{grid-area:content;block-size:100%}.footer{grid-area:footer}::slotted(odx-page-layout){min-block-size:100%}}@layer variant{: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$t = "@layer base{: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;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\";grid-template-rows:minmax(0,auto) minmax(0,auto) minmax(0,1fr) minmax(0,auto);grid-template-columns:100%;min-block-size:100dvh}.header,.subheader{position:sticky;z-index:99}.subheader,.content{background-color:var(--odx-color-background-base);padding-inline:var(--odx-size-75);inline-size:100%;max-inline-size:var(--max-inline-size)}.header{inset-block-start:0;grid-area:header}.subheader{inset-block-start:var(--header-size, 0);grid-area:subheader}.content{grid-area:content;block-size:100%}.footer{grid-area:footer}::slotted(odx-page-layout){min-block-size:100%}}@layer variant{: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$v = Object.defineProperty;
 var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
@@ -4147,18 +4134,18 @@ let OdxSlider = class extends CustomElement {
     });
     this.context = sliderContext.defaultValue;
     __privateAdd$6(this, _handleKeyboardEvent, (event) => {
-      const { actions, direction } = getKeyboardEventInfo(event);
+      const key = getKeyInfo(event);
       const target = event.target;
-      if (target.localName !== OdxSliderHandle.selector || actions.tab || actions.backTab || target.disabled) return;
+      if (target.localName !== OdxSliderHandle.selector || key.tab || key.backTab || target.disabled) return;
       event.preventDefault();
       event.stopPropagation();
-      if (direction.left || direction.down) {
+      if (key.left || key.down) {
         target.value -= this.step;
-      } else if (direction.right || direction.up) {
+      } else if (key.right || key.up) {
         target.value += this.step;
-      } else if (actions.start) {
+      } else if (key.start) {
         target.value = this.context.min;
-      } else if (actions.end) {
+      } else if (key.end) {
         target.value = this.context.max;
       }
     });
@@ -4972,7 +4959,7 @@ OdxToast = __decorateClass$5([
   customElement("odx-toast", [styles$4])
 ], OdxToast);
 
-const styles$3 = ":host{--_border-radius: var(--odx-border-radius-sm);--_color-background: transparent;--_color-stroke: var(--odx-color-stroke-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_size: var(--odx-size-225);--_padding-inline: var(--odx-size-75);display:inline-flex;position:relative;place-items:center;transition:var(--odx-transition-default);transition-property:color,background-color,border-color,outline-color;margin:var(--odx-size-37);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);outline-color:var(--_color-stroke);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding-inline:var(--_padding-inline);block-size:var(--_size);color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);user-select:none}:host::part(label){display:inline-block}:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}:host([pressed]){--_color-background: var(--odx-color-background-control-selected);--_color-foreground: var(--odx-color-foreground-inverse-static);--_color-stroke: var(--odx-color-stroke-control-selected)}:host([pressed]:not(:is([readonly],[disabled])):hover){--_color-background: var(--odx-color-background-control-selected-hover)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-foreground: var(--odx-color-selection-control-foreground-readonly);--_color-stroke: var(--odx-color-stroke-control-readonly);cursor:default}:host([pressed][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}";
+const styles$3 = ":host{--_border-radius: var(--odx-border-radius-sm);--_color-background: transparent;--_color-stroke: var(--odx-color-stroke-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_size: var(--odx-size-225);--_padding-inline: var(--odx-size-75);display:inline-flex;position:relative;place-items:center;transition:var(--odx-transition-default);transition-property:color,background-color,border-color,outline-color;margin:var(--odx-size-37);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding-inline:var(--_padding-inline);block-size:var(--_size);color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);user-select:none}:host::part(label){display:inline-block}:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}:host([pressed]){--_color-background: var(--odx-color-background-control-selected);--_color-foreground: var(--odx-color-foreground-inverse-static);--_color-stroke: var(--odx-color-stroke-control-selected)}:host([pressed]:not(:is([readonly],[disabled])):hover){--_color-background: var(--odx-color-background-control-selected-hover)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-foreground: var(--odx-color-selection-control-foreground-readonly);--_color-stroke: var(--odx-color-stroke-control-readonly);cursor:default}:host([pressed][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}";
 
 var __defProp$4 = Object.defineProperty;
 var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;

package/dist/i18n.js

@@ -1,7 +1,7 @@
 import { signal, effect, computed, SignalWatcher } from '@lit-labs/preact-signals';
 import { parseDate, dedupeMixin } from '@odx/foundation';
 import { property } from 'lit/decorators.js';
-import { f as flattenObject } from './vendor-C_8wBEOn.js';
+import { f as flattenObject } from './vendor-kPOMiFOM.js';
 
 const I18nConfig = (config) => ({
   defaultLocale: () => navigator.language,

package/dist/loader.js

@@ -1,11 +1,8 @@
-async function defineCustomElements() {
+(async function defineCustomElements() {
   const { OdxPopover } = await import('@odx/foundation');
   const components = Object.values(await import('@odx/foundation/components'));
   for (const entry of [OdxPopover, ...components]) {
-    if (typeof entry !== "function" || !("define" in entry)) continue;
-    entry.define?.();
+    if (typeof entry !== "function" || !("define" in entry) || typeof entry.define !== "function") continue;
+    entry.define();
   }
-}
-defineCustomElements();
-
-export { defineCustomElements };
+})();

package/dist/main.js

@@ -1,10 +1,10 @@
 import { LitElement, html, unsafeCSS, isServer, nothing } from 'lit';
 import { property, queryAssignedElements, query, state } from 'lit/decorators.js';
-import { u as uniqBy, r as round, R as RovingTabindexController, m as minBy } from './vendor-C_8wBEOn.js';
-export { p as enumFrom } from './vendor-C_8wBEOn.js';
-import { createFocusTrap } from 'focus-trap';
+import { u as uniqBy, r as round, R as RovingTabindexController, m as minBy, t as throttle } from './vendor-kPOMiFOM.js';
+export { p as enumFrom } from './vendor-kPOMiFOM.js';
 import { arrow, flip, computePosition, offset, shift, size, hide, autoUpdate } from '@floating-ui/dom';
 import { when } from 'lit/directives/when.js';
+import { createIntersectionObserver as createIntersectionObserver$1, createResizeObserver as createResizeObserver$1 } from '@odx/foundation';
 export { computed, effect } from '@lit-labs/preact-signals';
 
 const Shape = {
@@ -40,17 +40,15 @@ const Variant = {
 const customElementStyles = "@layer reset,base,variant,state;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas,svg{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{odx-stack{display:block}.odx-stack{&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}--flow: column;display:flex;flex-flow:var(--flow);max-inline-size:100%;align-items:stretch;justify-content:flex-start;gap:var(--odx-size-75);text-align:start}}@layer base{.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}[indicator-position=start] odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}[indicator-position=start] odx-accordion-item[expanded]::part(indicator){--rotate: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@layer reset{:host{border:none;border-color:transparent;outline:none}}";
 
 function mergeStyleSheets(...stylesheets) {
-  const mergedStyles = [];
-  for (const styles of stylesheets) {
-    if (!styles) continue;
-    mergedStyles.push(typeof styles === "string" ? unsafeCSS(styles) : styles);
-  }
+  const mergedStyles = stylesheets.filter(Boolean).map((styles) => {
+    return typeof styles === "string" ? unsafeCSS(styles) : styles;
+  });
   return uniqBy(mergedStyles.flat(3), String);
 }
 function customElement(selector, styles = []) {
   return (target) => {
     target.selector = selector;
-    target.styles = mergeStyleSheets(customElementStyles, target.styles, ...styles);
+    target.styles = mergeStyleSheets(customElementStyles, target.styles ?? "", ...styles);
     target.define = () => {
       if (customElements.get(selector)) return;
       customElements.define(selector, target);
@@ -99,6 +97,13 @@ function parseDate(value) {
   }
   return Number.isNaN(date.getTime()) ? null : date;
 }
+function createIntersectionObserver(callback, options) {
+  try {
+    return new IntersectionObserver(callback, options);
+  } catch {
+    return { root: null, rootMargin: "", thresholds: [], takeRecords: () => [], observe: () => void 0, disconnect: () => void 0, unobserve: () => void 0 };
+  }
+}
 function createMutationObserver(callback) {
   try {
     return new MutationObserver(callback);
@@ -106,6 +111,13 @@ function createMutationObserver(callback) {
     return { takeRecords: () => [], observe: () => void 0, disconnect: () => void 0 };
   }
 }
+function createResizeObserver(callback) {
+  try {
+    return new ResizeObserver(callback);
+  } catch {
+    return { observe: () => void 0, disconnect: () => void 0, unobserve: () => void 0 };
+  }
+}
 function findClosestDocument(node) {
   let parent = node.parentNode;
   while (parent && parent.nodeType !== Node.DOCUMENT_FRAGMENT_NODE && parent.nodeType !== Node.DOCUMENT_NODE) {
@@ -151,15 +163,6 @@ function fromAriaBooleanAttribute(value) {
 function toPx(value) {
   return Number.isNaN(Number(value)) ? null : `${round(Number(value), 2)}px`;
 }
-function limit(fn, fpsLimit = 60) {
-  let lastUpdate = 0;
-  return (...args) => {
-    const now = performance.now();
-    if (now - lastUpdate < 1e3 / fpsLimit) return;
-    lastUpdate = now;
-    fn(...args);
-  };
-}
 function getAssignedElement(root, options) {
   const { slot, selector } = options ?? {};
   const slotSelector = `slot${slot ? `[name=${slot}]` : ":not([name])"}`;
@@ -298,44 +301,20 @@ const FormControl = dedupeMixin((superClass) => {
   return FormControlElement;
 });
 
-const KeyboardKey = {
-  ARROW_UP: "ArrowUp",
-  ARROW_DOWN: "ArrowDown",
-  ARROW_LEFT: "ArrowLeft",
-  ARROW_RIGHT: "ArrowRight",
-  ENTER: "Enter",
-  ESCAPE: "Escape",
-  SPACE: " ",
-  TAB: "Tab",
-  BACKSPACE: "Backspace",
-  DELETE: "Delete",
-  END: "End",
-  HOME: "Home",
-  PAGE_UP: "PageUp",
-  PAGE_DOWN: "PageDown",
-  SHIFT: "Shift",
-  CONTROL: "Control",
-  ALT: "Alt",
-  META: "Meta"
-};
-function getKeyboardEventInfo(event) {
-  const { key } = event;
-  const up = key === KeyboardKey.ARROW_UP;
-  const right = key === KeyboardKey.ARROW_RIGHT;
-  const down = key === KeyboardKey.ARROW_DOWN;
-  const left = key === KeyboardKey.ARROW_LEFT;
+function getKeyInfo(event) {
+  const { key, shiftKey } = event;
   return {
-    axis: { x: left || right, y: up || down },
-    direction: { up, right, down, left },
-    actions: {
-      enter: key === KeyboardKey.ENTER,
-      escape: key === KeyboardKey.ESCAPE,
-      space: key === KeyboardKey.SPACE,
-      tab: key === KeyboardKey.TAB && !event.shiftKey,
-      backTab: key === KeyboardKey.TAB && event.shiftKey,
-      start: key === KeyboardKey.HOME,
-      end: key === KeyboardKey.END
-    }
+    up: key === "ArrowUp",
+    right: key === "ArrowRight",
+    down: key === "ArrowDown",
+    left: key === "ArrowLeft",
+    enter: key === "Enter",
+    escape: key === "Escape",
+    space: key === "Space",
+    tab: !shiftKey && key === "Tab",
+    backTab: shiftKey && key === "Tab",
+    start: key === "Home",
+    end: key === "End"
   };
 }
 
@@ -361,8 +340,8 @@ class CheckboxFormControl extends FormControl(CustomElement) {
       this.toggle(void 0, true);
     };
     this.#handleKeyboardEvent = (event) => {
-      const { actions } = getKeyboardEventInfo(event);
-      if (!actions.enter && !actions.space) return;
+      const key = getKeyInfo(event);
+      if (!key.enter && !key.space) return;
       const { localName } = event.target;
       event.preventDefault();
       if (event.type === "keydown" || LINK_SELECTORS.has(localName)) return;
@@ -578,16 +557,16 @@ class ActiveDescendantsController {
     this.#options.onChange?.(previousActiveItem, activeItem, previousActiveItem === void 0 && !!activeItem);
   }
   #handleKeyboardEvent = (event) => {
-    const { actions, direction } = getKeyboardEventInfo(event);
-    if (!direction.up && !direction.down && !actions.start && !actions.end) return;
+    const key = getKeyInfo(event);
+    if (!key.up && !key.down && !key.start && !key.end) return;
     event.preventDefault();
-    if (direction.down) {
+    if (key.down) {
       this.next();
-    } else if (direction.up) {
+    } else if (key.up) {
       this.previous();
-    } else if (actions.start) {
+    } else if (key.start) {
       this.first();
-    } else if (actions.end) {
+    } else if (key.end) {
       this.last();
     }
   };
@@ -729,8 +708,8 @@ class ListboxFormControl extends FormControl(CustomElement) {
       if (event.target !== this) return;
       const activeOption = this.activeDescendants.activeItem;
       if (!activeOption) return;
-      const { actions } = getKeyboardEventInfo(event);
-      if (!actions.enter && !actions.space) return;
+      const key = getKeyInfo(event);
+      if (!key.enter && !key.space) return;
       if (this.multiple) {
         event.stopPropagation();
         event.stopImmediatePropagation();
@@ -959,55 +938,6 @@ class ExpandableItemManager {
   };
 }
 
-const FocusTrapControllerOptions = (options) => ({
-  escapeDeactivates: false,
-  tabbableOptions: { getShadowRoot: true },
-  ...options
-});
-class FocusTrapController {
-  #host;
-  #options;
-  #focusTrap;
-  constructor(host, options) {
-    this.#host = host;
-    this.#options = FocusTrapControllerOptions(options);
-    this.#host.addController(this);
-  }
-  async activate() {
-    await this.#host.updateComplete;
-    this.#focusTrap?.activate();
-  }
-  async deactivate() {
-    await this.#host.updateComplete;
-    this.#focusTrap?.deactivate();
-  }
-  async toggle(state) {
-    if (state ?? !this.#focusTrap?.active) {
-      return this.activate();
-    }
-    return this.deactivate();
-  }
-  async hostConnected() {
-    await this.#host.updateComplete;
-    this.#focusTrap ??= createFocusTrap(this.#host, {
-      ...this.#options,
-      checkCanFocusTrap: this.#checkCanFocusTrap.bind(this),
-      checkCanReturnFocus: this.#checkCanReturnFocus.bind(this)
-    });
-  }
-  hostDisconnected() {
-    this.deactivate();
-  }
-  async #checkCanFocusTrap(containers) {
-    await waitForAnimations(this.#host);
-    await this.#options.checkCanFocusTrap?.(containers);
-  }
-  async #checkCanReturnFocus(trigger) {
-    await waitForAnimations(this.#host);
-    await this.#options.checkCanReturnFocus?.(trigger);
-  }
-}
-
 var __defProp$8 = Object.defineProperty;
 var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
 var __decorateClass$8 = (decorators, target, key, kind) => {
@@ -1586,7 +1516,7 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
     this.#positionUpdater = autoUpdate(
       this.referenceElement,
       this,
-      limit(() => this.referenceElement && computePopoverPlacement(this.referenceElement, this, this.options)),
+      throttle(() => this.referenceElement && computePopoverPlacement(this.referenceElement, this, this.options), 1e3 / 30),
       { animationFrame: true }
     );
   }
@@ -1702,79 +1632,46 @@ function searchTextContent(options) {
   return ranges;
 }
 
-function createIntersectionObserver(callback, options) {
-  try {
-    return new IntersectionObserver(callback, options);
-  } catch {
-    return { root: null, rootMargin: "", thresholds: [], takeRecords: () => [], observe: () => void 0, disconnect: () => void 0, unobserve: () => void 0 };
-  }
-}
 class SharedIntersectionObserverInstance {
   #observer;
   #handlers = /* @__PURE__ */ new WeakMap();
-  #updateLog = /* @__PURE__ */ new WeakMap();
   observe(target, handler, options = { fpsLimit: 60 }) {
-    this.#observer ??= createIntersectionObserver(this.#handleIntersection);
     this.unobserve(target);
-    this.#handlers.set(target, [handler, options.fpsLimit]);
+    this.#handlers.set(target, throttle(handler, 1e3 / options.fpsLimit));
+    this.#observer ??= createIntersectionObserver$1((entries) => {
+      if (!this.#observer) return;
+      for (const entry of entries) {
+        this.#handlers.get(entry.target)?.([entry], this.#observer);
+      }
+    });
     this.#observer.observe(target);
   }
   unobserve(target) {
     this.#observer?.unobserve(target);
     this.#handlers.delete(target);
   }
-  #handleIntersection = (entries) => {
-    if (!this.#observer) return;
-    for (const entry of entries) {
-      const [handler, fpsLimit] = this.#handlers.get(entry.target) ?? [];
-      if (typeof handler !== "function" || !this.#shouldUpdate(entry.target, fpsLimit)) continue;
-      handler?.([entry], this.#observer);
-      this.#updateLog.set(entry.target, performance.now());
-    }
-  };
-  #shouldUpdate(target, fpsLimit) {
-    if (!target.isConnected || typeof fpsLimit !== "number" || fpsLimit < 1) return false;
-    return performance.now() - (this.#updateLog.get(target) ?? 0) >= 1e3 / fpsLimit;
-  }
 }
 const SharedIntersectionObserver = new SharedIntersectionObserverInstance();
 
-function createResizeObserver(callback) {
-  try {
-    return new ResizeObserver(callback);
-  } catch {
-    return { observe: () => void 0, disconnect: () => void 0, unobserve: () => void 0 };
-  }
-}
 class SharedResizeObserverInstance {
   #observer;
   #handlers = /* @__PURE__ */ new WeakMap();
-  #updateLog = /* @__PURE__ */ new WeakMap();
   observe(target, handler, options = { fpsLimit: 30 }) {
     this.unobserve(target);
-    const { fpsLimit, ...observerOptions } = options;
-    this.#observer ??= createResizeObserver(this.#handleResize);
-    this.#handlers.set(target, [handler, fpsLimit]);
-    this.#observer.observe(target, observerOptions);
+    this.#handlers.set(target, throttle(handler, 1e3 / options.fpsLimit));
+    this.#observer ??= createResizeObserver$1((entries) => {
+      if (!this.#observer) return;
+      for (const entry of entries) {
+        this.#handlers.get(entry.target)?.([entry], this.#observer);
+      }
+    });
+    this.#observer.observe(target, options);
   }
   unobserve(target) {
     this.#observer?.unobserve(target);
     this.#handlers.delete(target);
   }
-  #handleResize = (entries) => {
-    if (!this.#observer) return;
-    for (const entry of entries) {
-      const [handler, fpsLimit] = this.#handlers.get(entry.target) ?? [];
-      if (typeof handler !== "function" || !this.#shouldUpdate(entry.target, fpsLimit ?? 60)) continue;
-      handler?.([entry], this.#observer);
-      this.#updateLog.set(entry.target, performance.now());
-    }
-  };
-  #shouldUpdate(target, fpsLimit) {
-    if (!target.isConnected || fpsLimit < 1) return false;
-    return performance.now() - (this.#updateLog.get(target) ?? 0) >= 1e3 / fpsLimit;
-  }
 }
 const SharedResizeObserver = new SharedResizeObserverInstance();
 
-export { ActiveDescendant, ActiveDescendantsController, ActiveDescendantsControllerOptions, CanBeDisabled, CanBeExpanded, CanBeSelected, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, DragController, DragControllerOptions, ExpandableItemManager, ExpandableItemManagerOptions, FocusTrapController, FocusTrapControllerOptions, FormControl, IS_DRAG_ACTIVE_ATTRIBUTE, InteractiveElement, InteractiveLink, IsDraggable, KeyboardKey, ListboxFormControl, NumberControl, OdxPopover, OptionControl, PopoverHost, PopoverPlacement, PopoverPlacementOptions, PopoverSide, RadioGroupFormControl, Shape, SharedIntersectionObserver, SharedResizeObserver, Size, State, Variant, WithLoadingState, clearUniqueIdCache, createIntersectionObserver, createMutationObserver, createResizeObserver, customElement, dedupeMixin, findClosestDocument, forwardEvent, fromAriaBooleanAttribute, getAssignedElement, getElementFromEvent, getKeyboardEventInfo, getUniqueId, isDraggableElement, limit, optionalAttr, optionalSlot, parseDate, requestUpdateOnAriaChange, searchTextContent, toAriaBooleanAttribute, toPx, toggleAttribute, waitForAnimations };
+export { ActiveDescendant, ActiveDescendantsController, ActiveDescendantsControllerOptions, CanBeDisabled, CanBeExpanded, CanBeSelected, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, DragController, DragControllerOptions, ExpandableItemManager, ExpandableItemManagerOptions, FormControl, IS_DRAG_ACTIVE_ATTRIBUTE, InteractiveElement, InteractiveLink, IsDraggable, ListboxFormControl, NumberControl, OdxPopover, OptionControl, PopoverHost, PopoverPlacement, PopoverPlacementOptions, PopoverSide, RadioGroupFormControl, Shape, SharedIntersectionObserver, SharedResizeObserver, Size, State, Variant, WithLoadingState, clearUniqueIdCache, createIntersectionObserver, createMutationObserver, createResizeObserver, customElement, dedupeMixin, findClosestDocument, forwardEvent, fromAriaBooleanAttribute, getAssignedElement, getElementFromEvent, getKeyInfo, getUniqueId, isDraggableElement, optionalAttr, optionalSlot, parseDate, requestUpdateOnAriaChange, searchTextContent, toAriaBooleanAttribute, toPx, toggleAttribute, waitForAnimations };

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

@@ -1,11 +1,11 @@
-import { CustomElement, EnumString } from '../../lib/main.js';
+import { CustomElement, EnumValues } from '../../lib/main.js';
 import { OdxAccordionItem } from '../accordion-item/accordion-item.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-accordion': OdxAccordion;
     }
 }
-export type AccordionIndicatorPosition = EnumString<typeof AccordionIndicatorPosition>;
+export type AccordionIndicatorPosition = EnumValues<typeof AccordionIndicatorPosition>;
 export declare const AccordionIndicatorPosition: {
     readonly start: "start";
     readonly end: "end";