@odx/foundation 1.0.0-beta.13 → 1.0.0-beta.130

package/dist/cdk.js

@@ -1,948 +0,0 @@
-import { FormControl, CustomElement, getKeyboardEventInfo, toAriaBooleanAttribute, CanBeHighlighted, CanBeDisabled, toggleAttribute, getUniqueId, getElementFromEvent, ActiveDescendantsController, dedupeMixin, optionalAttr, requestUpdateOnAriaChange, WithLoadingState, getAssignedElements, toPx, waitForAnimations, findClosestDocument, createMutationObserver, customElement } from '@odx/foundation';
-import { isServer, html, unsafeCSS } from 'lit';
-import { property, queryAssignedElements, query, state } from 'lit/decorators.js';
-import { R as RovingTabindexController, m as minBy } from './vendor-dJxQG085.js';
-import { when } from 'lit/directives/when.js';
-import { arrow, flip, computePosition, offset, shift, size, hide, autoUpdate } from '@floating-ui/dom';
-
-var __defProp$9 = 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$9(target, key, result);
-  return result;
-};
-const LINK_SELECTORS = /* @__PURE__ */ new Set(["a", "button", "odx-link"]);
-class CheckboxFormControl extends FormControl(CustomElement) {
-  constructor() {
-    super();
-    this.role = null;
-    this.checked = false;
-    this.#handleClick = ({ target }) => {
-      const { localName } = target;
-      if (LINK_SELECTORS.has(localName)) return;
-      this.toggle(void 0, true);
-    };
-    this.#handleKeyboardEvent = (event) => {
-      const { actions } = getKeyboardEventInfo(event);
-      if (!actions.enter && !actions.space) return;
-      const { localName } = event.target;
-      event.preventDefault();
-      if (event.type === "keydown" || LINK_SELECTORS.has(localName)) return;
-      this.toggle(void 0, true);
-    };
-    if (!isServer) {
-      this.addEventListener("click", this.#handleClick);
-      this.addEventListener("keydown", this.#handleKeyboardEvent);
-      this.addEventListener("keyup", this.#handleKeyboardEvent);
-    }
-  }
-  static {
-    this.shadowRootOptions = {
-      ...CustomElement.shadowRootOptions,
-      delegatesFocus: false
-    };
-  }
-  toFormValue() {
-    if (this.value) {
-      return this.checked ? this.value : null;
-    }
-    return this.checked ? "on" : null;
-  }
-  toggle(state, emitEvent = false) {
-    const currentState = this.checked;
-    const newState = state ?? !currentState;
-    if (this.disabled || this.readonly || newState === currentState) return;
-    this.checked = newState;
-    if (!emitEvent || !this.emit("change")) return;
-    this.checked = currentState;
-  }
-  connectedCallback() {
-    this.tabIndex = 0;
-    super.connectedCallback();
-    this.role ||= "checkbox";
-  }
-  updateAriaAttributes() {
-    super.updateAriaAttributes?.();
-    this.ariaChecked = toAriaBooleanAttribute(this.checked, false);
-  }
-  #handleClick;
-  #handleKeyboardEvent;
-}
-__decorateClass$9([
-  property({ type: Boolean, reflect: true })
-], CheckboxFormControl.prototype, "checked", 2);
-
-var __defProp$8 = 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;
-  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);
-  return result;
-};
-const GROUP_CONTROL_SELECTOR = "odx-checkbox-group-control";
-const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormControl(CustomElement) {
-  constructor() {
-    super();
-    this.value = [];
-    this.#handleChangeEvent = (event) => {
-      const { target } = event;
-      if (!this.isControl(target)) return;
-      if (target.checked) {
-        this.updateValue([...this.value, target.value], true);
-        return;
-      }
-      this.updateValue(
-        this.value.filter((value) => value !== target.value),
-        true
-      );
-    };
-    if (!isServer) {
-      this.addEventListener("change", this.#handleChangeEvent);
-    }
-  }
-  get childGroups() {
-    return this.elements.filter((element) => element instanceof _CheckboxGroupFormControl);
-  }
-  get controls() {
-    return this.#findCheckboxControls((element) => !element.hasAttribute(GROUP_CONTROL_SELECTOR)).concat(this.childGroups.flatMap((group) => group.controls));
-  }
-  get groupControls() {
-    return this.#findCheckboxControls((element) => element.hasAttribute(GROUP_CONTROL_SELECTOR));
-  }
-  toFormValue() {
-    const formData = new FormData();
-    this.value.forEach((value, index) => {
-      formData.append(`${this.name}[${index}]`, value);
-    });
-    return formData;
-  }
-  isIndeterminate() {
-    return this.value.length > 0 && this.value.length < this.controls.length;
-  }
-  isControl(element) {
-    return element instanceof CheckboxFormControl;
-  }
-  updated(props) {
-    super.updated(props);
-    if (props.has("value")) {
-      this.updateCheckboxControls((control) => {
-        control.checked = this.value.includes(control.value);
-      });
-      for (const groupControl of this.groupControls) {
-        if (groupControl instanceof CheckboxFormControl && "indeterminate" in groupControl) {
-          groupControl.indeterminate = this.isIndeterminate();
-          groupControl.checked = this.controls.length > 0 && this.value.length === this.controls.length;
-        }
-      }
-    }
-    if (props.has("name")) {
-      this.updateCheckboxControls((control) => {
-        control.name = this.name;
-      });
-    }
-    if (props.has("disabled")) {
-      this.updateCheckboxControls((control) => {
-        control.disabled = this.disabled;
-      });
-    }
-    if (props.has("readonly")) {
-      this.updateCheckboxControls((control) => {
-        control.readonly = this.readonly;
-      });
-    }
-  }
-  updateCheckboxControls(updateFn) {
-    this.controls.forEach(updateFn);
-  }
-  updateValue(value, dispatchEvent) {
-    this.value = value;
-    if (!dispatchEvent) return;
-    this.emit("change");
-  }
-  #handleChangeEvent;
-  #findCheckboxControls(predicate) {
-    return this.elements.filter((element) => this.isControl(element) && predicate(element));
-  }
-};
-__decorateClass$8([
-  queryAssignedElements({ flatten: true })
-], _CheckboxGroupFormControl.prototype, "elements", 2);
-__decorateClass$8([
-  property({ type: Array })
-], _CheckboxGroupFormControl.prototype, "value", 2);
-let CheckboxGroupFormControl = _CheckboxGroupFormControl;
-
-var __defProp$7 = 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;
-  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);
-  return result;
-};
-class OptionControl extends CanBeHighlighted(CanBeDisabled(CustomElement)) {
-  constructor() {
-    super(...arguments);
-    this.role = null;
-    this.value = "";
-    this.selected = false;
-  }
-  #label;
-  set label(value) {
-    this.#label = value;
-  }
-  get label() {
-    return this.#label || this.getTextLabel();
-  }
-  getTextLabel() {
-    return this.textContent?.trim() ?? "";
-  }
-  toggle(force) {
-    toggleAttribute(this, "odx-active", force ?? !this.hasAttribute("odx-active"));
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role ||= "option";
-    this.id ||= getUniqueId(this.localName);
-  }
-  willUpdate(props) {
-    super.willUpdate?.(props);
-    if (props.has("selected")) {
-      this.ariaSelected = toAriaBooleanAttribute(this.selected, false);
-    }
-  }
-}
-__decorateClass$7([
-  property({ type: String })
-], OptionControl.prototype, "label", 1);
-__decorateClass$7([
-  property()
-], OptionControl.prototype, "value", 2);
-__decorateClass$7([
-  property({ type: Boolean })
-], OptionControl.prototype, "selected", 2);
-__decorateClass$7([
-  property({ reflect: true })
-], OptionControl.prototype, "type", 2);
-
-var __defProp$6 = 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$6(target, key, result);
-  return result;
-};
-class ListboxFormControl extends FormControl(CustomElement) {
-  constructor() {
-    super();
-    this.#selectedOptions = /* @__PURE__ */ new Map();
-    this.autoSelect = false;
-    this.multiple = false;
-    this.value = "";
-    this.#handleBlur = (_event) => {
-      this.#activeDecendants.deactivate();
-    };
-    this.#handleClick = (event) => {
-      const option = getElementFromEvent(event, (node) => node instanceof OptionControl);
-      if (!option) return;
-      this.toggleOption(option);
-    };
-    this.#handleFocus = (_event) => {
-      const selectedIndex = this.options.findIndex((option) => !option.disabled && option.selected);
-      this.#activeDecendants.activate(selectedIndex === -1 ? void 0 : selectedIndex);
-    };
-    this.#handleKeyEvent = (event) => {
-      const activeOption = this.#activeDecendants.activeItem;
-      if (!activeOption) return;
-      const { actions } = getKeyboardEventInfo(event);
-      if (actions.enter || actions.space || actions.tab && this.canAutoSelect(activeOption)) {
-        if (this.multiple) {
-          event.stopPropagation();
-          event.stopImmediatePropagation();
-        }
-        this.toggleOption(activeOption);
-      }
-    };
-    if (!isServer) {
-      this.addEventListener("blur", this.#handleBlur);
-      this.addEventListener("focusin", this.#handleFocus);
-      this.addEventListener("click", this.#handleClick);
-      this.addEventListener("keydown", this.#handleKeyEvent);
-    }
-    this.#activeDecendants = new ActiveDescendantsController(this, {
-      getItems: () => this.options,
-      onChange: (_, option, firstChange) => {
-        option?.scrollIntoView();
-        if (!option || !this.canAutoSelect(option) || firstChange || option.selected) return;
-        this.toggleOption(option, true);
-      }
-    });
-  }
-  #activeDecendants;
-  #selectedOptions;
-  get selectedOptions() {
-    return this.#selectedOptions.values();
-  }
-  canAutoSelect(option) {
-    return this.autoSelect && !option.disabled && !this.multiple;
-  }
-  canSelect(option) {
-    return !option.disabled;
-  }
-  toggleOption(option, state) {
-    if (!this.canSelect(option)) return;
-    const newState = state ?? (this.required && !this.multiple || !option.selected);
-    if (this.disabled || newState === option.selected) return;
-    option.selected = newState;
-    this.updateValue(option);
-    if (newState) {
-      option.scrollIntoView();
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role ||= "listbox";
-    this.id ||= getUniqueId(this.localName);
-  }
-  updateValue(option) {
-    if (this.multiple) {
-      const value = typeof this.value === "string" ? [this.value].filter(Boolean) : this.value;
-      this.value = option.selected ? [...value, option.value] : value.filter((value2) => value2 !== option.value);
-    } else {
-      this.value = option.selected ? option.value : "";
-    }
-    this.#activeDecendants.select(option);
-    this.updateSelection();
-    this.emit("change");
-  }
-  willUpdate(props) {
-    super.willUpdate?.(props);
-    if (props.has("multiple")) {
-      this.#handleMultipleChange();
-    }
-    if (props.has("required") || props.has("value")) {
-      const [selectedOption] = this.#selectedOptions.values();
-      if (!selectedOption?.selected) return;
-      this.setValidity({ valueMissing: this.required && this.value.length === 0 }, selectedOption);
-    }
-  }
-  updateSelection() {
-    if (this.disabled) return;
-    for (const option of this.options ?? []) {
-      if (option.disabled) continue;
-      option.selected = this.multiple ? this.value.includes(option.value) : this.value === option.value;
-      if (option.selected) {
-        this.#selectedOptions.set(option.value, option);
-      } else {
-        this.#selectedOptions.delete(option.value);
-      }
-    }
-  }
-  #handleBlur;
-  #handleClick;
-  #handleFocus;
-  #handleKeyEvent;
-  #handleMultipleChange() {
-    const optionType = this.multiple ? "checkbox" : null;
-    for (const option of this.options) {
-      option.type = optionType;
-    }
-    if (this.multiple) return;
-    const [selectedOption] = this.#selectedOptions.values();
-    if (selectedOption) {
-      this.updateValue(selectedOption);
-    }
-  }
-}
-__decorateClass$6([
-  property({ type: Boolean, attribute: "auto-select", reflect: true })
-], ListboxFormControl.prototype, "autoSelect", 2);
-__decorateClass$6([
-  property({ type: Boolean, reflect: true })
-], ListboxFormControl.prototype, "multiple", 2);
-__decorateClass$6([
-  property()
-], ListboxFormControl.prototype, "value", 2);
-
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(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;
-};
-class RadioGroupFormControl extends FormControl(CustomElement) {
-  static {
-    this.shadowRootOptions = {
-      ...CustomElement.shadowRootOptions,
-      delegatesFocus: true
-    };
-  }
-  constructor() {
-    super();
-    if (!isServer) {
-      this.addEventListener("change", this.#handleChange, { capture: true });
-      new RovingTabindexController(this, {
-        direction: "both",
-        elements: () => this.getControls(),
-        elementEnterAction: (element) => element.click(),
-        focusInIndex: (elements) => elements.findIndex((element) => element.checked)
-      });
-    }
-  }
-  getControls() {
-    return this.elements.filter((element) => this.isControl(element));
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role ||= "radiogroup";
-  }
-  isControl(element) {
-    return element instanceof CheckboxFormControl;
-  }
-  update(changes) {
-    super.update?.(changes);
-    if (changes.has("value")) {
-      this.updateCheckboxControls((control) => {
-        control.checked = this.value.includes(control.value);
-      });
-    }
-    if (changes.has("name")) {
-      this.updateCheckboxControls((control) => {
-        control.name = this.name;
-      });
-    }
-    if (changes.has("disabled")) {
-      this.updateCheckboxControls((control) => {
-        control.disabled = this.disabled;
-      });
-    }
-    if (changes.has("readonly")) {
-      this.updateCheckboxControls((control) => {
-        control.readonly = this.readonly;
-      });
-    }
-    if (changes.has("required") || changes.has("value")) {
-      const [firstControl] = this.getControls();
-      if (!firstControl) return;
-      this.setValidity({ valueMissing: this.required && this.value.length === 0 }, firstControl);
-    }
-  }
-  async updateCheckboxControls(updateFn) {
-    await 0;
-    this.getControls().forEach(updateFn);
-  }
-  #handleChange = ({ target }) => {
-    if (!this.isControl(target) || this.value === target.value) return;
-    this.value = target.value;
-  };
-}
-__decorateClass$5([
-  queryAssignedElements({ flatten: true })
-], RadioGroupFormControl.prototype, "elements", 2);
-
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(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$4(target, key, result);
-  return result;
-};
-const IS_DRAG_ACTIVE_ATTRIBUTE = "odx-drag-active";
-function isDraggableElement(element) {
-  if (element instanceof HTMLElement) {
-    return "isDragActive" in element;
-  }
-  return false;
-}
-const IsDraggable = dedupeMixin((superClass) => {
-  class IsDraggableElement extends superClass {
-    constructor() {
-      super(...arguments);
-      this.dragDisabled = false;
-    }
-    get isDragActive() {
-      return this.hasAttribute(IS_DRAG_ACTIVE_ATTRIBUTE);
-    }
-    dragStart() {
-      this.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, true);
-    }
-    afterDragEnd() {
-      this.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, false);
-    }
-  }
-  __decorateClass$4([
-    property({ type: Boolean })
-  ], IsDraggableElement.prototype, "dragDisabled", 2);
-  return IsDraggableElement;
-});
-
-const DragControllerOptions = (config) => ({
-  getDraggableElements: () => [],
-  ...config
-});
-class DragController {
-  #host;
-  #options;
-  #dragTargets = /* @__PURE__ */ new WeakSet();
-  #listeners = /* @__PURE__ */ new Map();
-  get draggableElements() {
-    return this.#options.getDraggableElements().filter((element) => !element.dragDisabled);
-  }
-  get container() {
-    return this.#options.getContainer?.() ?? this.#host;
-  }
-  constructor(host, options) {
-    this.#host = host;
-    this.#options = DragControllerOptions(options);
-    this.#host.addController(this);
-  }
-  hostConnected() {
-    this.#host.style.touchAction = "none";
-  }
-  hostDisconnected() {
-    this.#host.style.touchAction = "";
-    for (const removeListener of this.#listeners.values()) {
-      removeListener();
-    }
-  }
-  hostUpdated() {
-    this.#dragTargets = new WeakSet(this.draggableElements);
-    this.#host.removeEventListener("pointerdown", this.#handleDragStart);
-    this.#host.addEventListener("pointerdown", this.#handleDragStart);
-  }
-  isDraggable(element) {
-    return isDraggableElement(element) && this.#dragTargets.has(element);
-  }
-  #handleDragStart = async (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    const target = this.#getDragTarget(event);
-    if (!target) return;
-    const onPointerMove = (event2) => this.#handleDragMove(event2, target);
-    const onPointerUp = (event2) => this.#handleDragEnd(event2, target);
-    target.beforeDragStart?.({ event, position: this.#calculatePosition(event) });
-    this.#host.setPointerCapture(event.pointerId);
-    this.#host.addEventListener("pointermove", onPointerMove);
-    this.#host.addEventListener("pointerup", onPointerUp, { once: true });
-    this.#listeners.set(target, () => {
-      this.#host.removeEventListener("pointermove", onPointerMove);
-      this.#host.removeEventListener("pointerup", onPointerUp);
-    });
-    await 0;
-    target.dragStart?.({ event, position: this.#calculatePosition(event) });
-  };
-  #handleDragMove = (event, target) => {
-    event.preventDefault();
-    event.stopPropagation();
-    target.dragMove?.({ event, position: this.#calculatePosition(event) });
-  };
-  #handleDragEnd = async (event, target) => {
-    event.preventDefault();
-    event.stopPropagation();
-    target.dragEnd?.({ event, position: this.#calculatePosition(event) });
-    this.#host.releasePointerCapture(event.pointerId);
-    this.#listeners.get(target)?.();
-    this.#listeners.delete(target);
-    this.#host.requestUpdate();
-    await this.#host.updateComplete;
-    target.afterDragEnd?.({ event, position: this.#calculatePosition(event) });
-  };
-  #calculatePosition(event) {
-    const { left, top, width } = this.container.getBoundingClientRect();
-    return { x: (event.clientX - left) / width * 100, y: (event.clientY - top) / width * 100 };
-  }
-  #getDragTarget(event) {
-    if (event.target === this.#host) {
-      return minBy(this.draggableElements, (element) => element.getDistance?.(this.container, event) ?? Number.MAX_SAFE_INTEGER) ?? null;
-    }
-    return null;
-  }
-}
-
-const styles$2 = "@layer base{:host{--_color-background: var(--odx-color-transparent);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed);--_color-foreground: var(--odx-color-foreground-base);--_color-foreground-hover: var(--odx-color-foreground-base);--_color-foreground-pressed: var(--odx-color-foreground-base);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: 0;--_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-controls);margin-block:var(--_margin-block);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,[part=base]{display:inline-flex;place-items:center;place-content:center}[part=base]{overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform,block-size;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_font-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-normal);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}[part=base]::-moz-focus-inner{padding:0;border:0}[part=loader]{--_size: calc(var(--_icon-size) - var(--odx-size-25));color:var(--_color-foreground);margin-inline:calc(var(--_margin-icon) + var(--odx-size-25))}[part=label]{margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline)}:is(odx-icon),::slotted(:is(odx-avatar,odx-icon)){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-size-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-size-37) -50%}::slotted(odx-avatar){--_color-background: var(--odx-color-transparent-pressed);--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing))}}@layer state{:host(:not([aria-busy=\"true\"])) [part=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([aria-busy=\"true\"])) [part=base]:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([aria-busy=\"true\"]){cursor:default}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-background-hover: var(--odx-color-disabled-fill);--_color-background-pressed: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host(:is([align-badge=\"end\"],[align-badge=\"center\"])) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0}:host([align-badge=\"end\"]) ::slotted([slot=\"badge\"]){translate:var(--odx-size-37) 50%}:host([align-badge=\"center\"]) ::slotted([slot=\"badge\"]){inset-inline:auto;translate:0 calc(50% + var(--_badge-margin))}}";
-
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(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$3(target, key, result);
-  return result;
-};
-let InteractiveLink = class extends CanBeDisabled(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.href = "";
-    this.target = "";
-    this.rel = "noreferrer noopener";
-  }
-  render() {
-    const { ariaLabel, ariaHasPopup, ariaExpanded, ariaCurrent, ariaHidden } = this;
-    return html`<a
-      part="base"
-      role="button"
-      aria-label="${optionalAttr(ariaLabel)}"
-      aria-haspopup="${optionalAttr(ariaHasPopup)}"
-      aria-expanded="${optionalAttr(ariaExpanded)}"
-      aria-current="${optionalAttr(ariaCurrent)}"
-      aria-hidden="${optionalAttr(ariaHidden)}"
-      href=${optionalAttr(this.href)}
-      target=${optionalAttr(this.href && this.target)}
-      download=${optionalAttr(this.href && this.download)}
-      rel=${optionalAttr(this.href && this.rel)}
-    >
-      ${this.renderContent()}
-    </a>`;
-  }
-  renderContent() {
-    return html`<slot></slot>`;
-  }
-};
-InteractiveLink.shadowRootOptions = {
-  ...CustomElement.shadowRootOptions,
-  delegatesFocus: true
-};
-__decorateClass$3([
-  query('[part~="base"]', true)
-], InteractiveLink.prototype, "nativeElement", 2);
-__decorateClass$3([
-  property()
-], InteractiveLink.prototype, "href", 2);
-__decorateClass$3([
-  property()
-], InteractiveLink.prototype, "target", 2);
-__decorateClass$3([
-  property()
-], InteractiveLink.prototype, "rel", 2);
-__decorateClass$3([
-  property()
-], InteractiveLink.prototype, "download", 2);
-InteractiveLink = __decorateClass$3([
-  requestUpdateOnAriaChange(["ariaLabel", "ariaHasPopup", "ariaExpanded", "ariaCurrent", "ariaHidden", "role"])
-], InteractiveLink);
-
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(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$2(target, key, result);
-  return result;
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _InteractiveElement_instances, renderSlot_fn, isLoaderSlot_fn;
-let InteractiveElement = class extends WithLoadingState(InteractiveLink) {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _InteractiveElement_instances);
-    this.lineClamp = 2;
-  }
-  render() {
-    return html`${when(
-      this.href,
-      () => super.render(),
-      () => this.renderButton()
-    )}`;
-  }
-  renderContent(withSpinner = true) {
-    return html`
-      ${__privateMethod(this, _InteractiveElement_instances, renderSlot_fn).call(this, "prefix", !withSpinner)}
-      <odx-line-clamp part="label" .max=${this.lineClamp}>
-        ${__privateMethod(this, _InteractiveElement_instances, renderSlot_fn).call(this, void 0, !withSpinner)}
-      </odx-line-clamp>
-      ${__privateMethod(this, _InteractiveElement_instances, renderSlot_fn).call(this, "suffix", !withSpinner)}
-    `;
-  }
-  renderButton() {
-    const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
-    const type = "type" in this ? this.type : "button";
-    return html`
-      <button
-        part="base"
-        role="button"
-        aria-label="${optionalAttr(ariaLabel)}"
-        aria-haspopup="${optionalAttr(ariaHasPopup)}"
-        aria-expanded="${optionalAttr(ariaExpanded)}"
-        type=${type}
-        ?disabled=${this.disabled || this.loading}
-      >
-        ${this.renderContent()}
-      </button>
-    `;
-  }
-  renderLoader() {
-    return html`<odx-loading-spinner part="loader"></odx-loading-spinner>`;
-  }
-};
-_InteractiveElement_instances = new WeakSet();
-renderSlot_fn = function(name, force) {
-  if (!force && this.loading && __privateMethod(this, _InteractiveElement_instances, isLoaderSlot_fn).call(this, name)) {
-    return this.renderLoader();
-  }
-  return html`<slot name=${optionalAttr(name)}></slot>`;
-};
-isLoaderSlot_fn = function(name) {
-  return name === (this.loaderSlot || Object.values(["prefix", "suffix"]).find((slot) => getAssignedElements(this, slot).length > 0));
-};
-InteractiveElement.styles = unsafeCSS(styles$2);
-__decorateClass$2([
-  property({ type: Number, attribute: "line-clamp" })
-], InteractiveElement.prototype, "lineClamp", 2);
-InteractiveElement = __decorateClass$2([
-  requestUpdateOnAriaChange(["ariaLabel", "ariaHasPopup", "ariaExpanded", "role"])
-], InteractiveElement);
-
-const styles$1 = "@layer base{:host{--max-block-size: 100%;--max-inline-size: 100%;--_popover-color-background: var(--odx-color-transparent);--_popover-color-foreground: var(--odx-color-foreground-base);--_popover-min-block-size: inherit;--_popover-max-block-size: 100%;--_popover-min-inline-size: inherit;--_popover-max-inline-size: 100%;--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-size-50);--_popover-shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_popover-outer-padding: var(--odx-size-75);--_max-block-size: min(var(--_popover-max-block-size), var(--max-block-size));--_max-inline-size: min(var(--_popover-max-inline-size), var(--max-inline-size));background-color:transparent;opacity:0;transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:opacity var(--_popover-transition),transform var(--_popover-transition) allow-discrete,overlay var(--_popover-transition) allow-discrete,display var(--_popover-transition) allow-discrete;max-block-size:var(--_max-block-size);max-inline-size:var(--_max-inline-size);margin:0;top:var(--_popover-position-y);left:var(--_popover-position-x)}:host(:popover-open){display:flex;opacity:1;transform:translate(0);@starting-style{opacity:0;transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y))}}}@layer state{:host,:host([popover-placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-1 * var(--_popover-offset));padding-block:var(--_popover-outer-padding) var(--_popover-offset);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding))}:host([popover-placement^=\"right\"]){--_popover-transition-offset-x: var(--_popover-offset);--_popover-transition-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding))}:host([popover-placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: var(--_popover-offset);padding-block:var(--_popover-offset) var(--_popover-outer-padding);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding))}:host([popover-placement^=\"left\"]){--_popover-transition-offset-x: calc(-1 * var(--_popover-offset));--_popover-transition-offset-y: 0;padding-inline:var(--_popover-outer-padding) var(--_popover-offset);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding))}}";
-
-const PopoverPlacement = {
-  TOP: "top",
-  TOP_START: "top-start",
-  TOP_END: "top-end",
-  RIGHT: "right",
-  RIGHT_START: "right-start",
-  RIGHT_END: "right-end",
-  BOTTOM: "bottom",
-  BOTTOM_START: "bottom-start",
-  BOTTOM_END: "bottom-end",
-  LEFT: "left",
-  LEFT_START: "left-start",
-  LEFT_END: "left-end"
-};
-function PopoverPlacementOptions(options) {
-  return {
-    placement: PopoverPlacement.BOTTOM,
-    enableFallback: true,
-    fallbackAxisSideDirection: "end",
-    matchReferenceWidth: false,
-    offset: 0,
-    outerPadding: 24,
-    ...options
-  };
-}
-const PopoverSide = {
-  TOP: PopoverPlacement.TOP,
-  RIGHT: PopoverPlacement.RIGHT,
-  BOTTOM: PopoverPlacement.BOTTOM,
-  LEFT: PopoverPlacement.LEFT
-};
-
-function getPopoverSide(placement) {
-  return placement.split("-")[0];
-}
-async function computePopoverPlacement(referenceElement, floatingElement, options) {
-  const { arrowElement, placement, offset: offset$1, matchReferenceWidth, enableFallback, fallbackAxisSideDirection, minHeight, outerPadding } = options;
-  const arrowSize = arrowElement?.offsetWidth ?? 0;
-  const arrowMiddleware = arrowElement ? arrow({ element: arrowElement, padding: arrowSize * 3 }) : void 0;
-  const flipMiddleWare = enableFallback ? flip({ fallbackAxisSideDirection }) : void 0;
-  floatingElement.setAttribute("popover-placement", placement);
-  const result = await computePosition(referenceElement, floatingElement, {
-    strategy: "fixed",
-    placement,
-    middleware: [
-      offset(offset$1 + arrowSize / 2),
-      shift({ padding: 12 }),
-      flipMiddleWare,
-      size({
-        apply: ({ availableHeight, availableWidth, rects, placement: currentPlacement }) => {
-          floatingElement.style.setProperty("--_popover-min-inline-size", matchReferenceWidth ? toPx(rects.reference.width) : null);
-          floatingElement.style.setProperty("--_popover-max-inline-size", toPx(availableWidth));
-          floatingElement.style.setProperty("--_popover-min-block-size", minHeight ? toPx(Math.min(availableHeight, minHeight)) : null);
-          floatingElement.style.setProperty("--_popover-max-block-size", toPx(availableHeight));
-          floatingElement.setAttribute("popover-placement", currentPlacement);
-        }
-      }),
-      arrowMiddleware,
-      hide()
-    ]
-  });
-  let arrowPositionX = null;
-  let arrowPositionY = null;
-  if (arrowElement && result.middlewareData.arrow) {
-    const popoverSide = getPopoverSide(result.placement);
-    const { arrow: arrow2 } = result.middlewareData;
-    const arrowOffsetX = popoverSide === PopoverSide.LEFT ? floatingElement.offsetWidth - outerPadding - 0.5 * arrowSize : outerPadding - 0.5 * arrowSize;
-    const arrowOffsetY = popoverSide === PopoverSide.TOP ? floatingElement.offsetHeight - outerPadding - 0.5 * arrowSize : outerPadding - 0.5 * arrowSize;
-    arrowPositionX = arrow2.x ?? arrowOffsetX;
-    arrowPositionY = arrow2.y ?? arrowOffsetY;
-  }
-  floatingElement.style.setProperty("--_popover-position-x", toPx(result.x));
-  floatingElement.style.setProperty("--_popover-position-y", toPx(result.y));
-  floatingElement.style.setProperty("--_popover-arrow-position-x", toPx(arrowPositionX));
-  floatingElement.style.setProperty("--_popover-arrow-position-y", toPx(arrowPositionY));
-}
-
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(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$1(target, key, result);
-  return result;
-};
-class PopoverHost extends CustomElement {
-  constructor() {
-    super();
-    this.isOpen = false;
-    this.referenceElement = null;
-    this.anchor = "";
-    this.#handleToggle = async ({ newState }) => {
-      if (this.isOpen) {
-        this.onBeforePopoverShow?.();
-        await waitForAnimations(this);
-        this.onPopoverShow?.();
-      } else {
-        this.onBeforePopoverHide?.();
-        await waitForAnimations(this);
-        this.onPopoverHide?.();
-      }
-      this.isOpen = newState === "open";
-    };
-    if (!isServer) {
-      this.addEventListener("toggle", this.#handleToggle);
-    }
-  }
-  static {
-    this.styles = unsafeCSS(styles$1);
-  }
-  #observer;
-  get options() {
-    return PopoverPlacementOptions({ placement: this.placement ?? PopoverPlacement.BOTTOM });
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.popover ??= "auto";
-    this.#connectObserver();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#disconnectObserver();
-  }
-  mountPopover(referenceElement) {
-    if (this.referenceElement && this.referenceElement !== referenceElement) {
-      this.unmountPopover(this.referenceElement);
-    }
-    if (!referenceElement) {
-      this.referenceElement = null;
-      return;
-    }
-    this.referenceElement = referenceElement;
-    autoUpdate(
-      this.referenceElement,
-      this,
-      () => (
-        // biome-ignore lint/style/noNonNullAssertion: Reference element is defined when mounting popover
-        computePopoverPlacement(this.referenceElement, this, this.options)
-      )
-    );
-  }
-  unmountPopover(referenceElement) {
-    this.hidePopover();
-  }
-  isPopoverOpen() {
-    return this.isOpen;
-  }
-  togglePopover(force) {
-    const isOpen = force ?? !this.isPopoverOpen();
-    if (isOpen && this.canPopoverShow?.() !== false) {
-      this.showPopover();
-    } else if (this.canPopoverHide?.() !== false) {
-      this.hidePopover();
-    }
-    return isOpen;
-  }
-  #findReferenceElement(anchor) {
-    return findClosestDocument(this)?.getElementById(anchor);
-  }
-  #connectObserver() {
-    this.#disconnectObserver();
-    this.mountPopover(this.#findReferenceElement(this.anchor));
-    this.#observer = createMutationObserver(() => {
-      const referenceElement = this.anchor ? this.#findReferenceElement(this.anchor) : null;
-      if (this.referenceElement === referenceElement) return;
-      this.mountPopover(referenceElement);
-    });
-    this.#observer.observe(document.documentElement, { subtree: true, attributeFilter: ["id", "anchor"] });
-  }
-  #disconnectObserver() {
-    this.#observer?.disconnect();
-    this.#observer = void 0;
-  }
-  #handleToggle;
-}
-__decorateClass$1([
-  state()
-], PopoverHost.prototype, "isOpen", 2);
-__decorateClass$1([
-  state()
-], PopoverHost.prototype, "referenceElement", 2);
-__decorateClass$1([
-  property({ reflect: true })
-], PopoverHost.prototype, "anchor", 2);
-__decorateClass$1([
-  property({ reflect: true })
-], PopoverHost.prototype, "placement", 2);
-
-const styles = ":host{--_arrow-size: var(--odx-size-50);--_outer-padding: var(--odx-size-75);--_border-radius: var(--odx-popover-border-radius, var(--odx-border-radius-controls));display:flex;background-color:transparent;border-radius:var(--_border-radius);padding-block:var(--_outer-padding);box-shadow:var(--_popover-shadow)}:host::part(arrow),:host{background-color:var(--_popover-color-background)}:host::part(content){display:flex;flex-direction:column;position:relative;inset-block-start:0!important;inset-inline-start:0!important;block-size:fit-content;min-block-size:var(--_popover-min-block-size);max-block-size:100%;min-inline-size:var(--_popover-min-inline-size);max-inline-size:100%;color:var(--_popover-color-foreground);padding-inline:var(--_outer-padding);border-radius:inherit;z-index:2;overflow:auto;scrollbar-width:thin;scroll-behavior:smooth;scroll-padding-block:calc(var(--odx-size-150) + var(--_outer-padding))}:host::part(arrow){border-radius:var(--odx-border-radius-sm);position:absolute;inline-size:var(--_arrow-size);block-size:var(--_arrow-size);z-index:3;inset:0;transform:translate3d(var(--_popover-arrow-position-x),var(--_popover-arrow-position-y),0) rotate(45deg)}";
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(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(target, key, result);
-  return result;
-};
-let OdxPopover = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.showArrow = false;
-  }
-  render() {
-    return html`
-      <div part="content">
-        <slot></slot>
-      </div>
-      ${when(this.showArrow, () => html`<div part="arrow"></div>`)}
-    `;
-  }
-};
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], OdxPopover.prototype, "showArrow", 2);
-OdxPopover = __decorateClass([
-  customElement("odx-popover", [styles])
-], OdxPopover);
-
-export { CheckboxFormControl, CheckboxGroupFormControl, DragController, DragControllerOptions, IS_DRAG_ACTIVE_ATTRIBUTE, InteractiveElement, InteractiveLink, IsDraggable, ListboxFormControl, OdxPopover, OptionControl, PopoverHost, PopoverPlacement, PopoverPlacementOptions, PopoverSide, RadioGroupFormControl, isDraggableElement };