@odx/foundation 1.0.0-alpha.4 → 1.0.0-alpha.41

package/README.md

@@ -3,54 +3,59 @@
 
 The `@odx/foundation` package is an integral element of the ODX Design System, offering essential building blocks for developing consistent and cohesive user interfaces. This package provides foundational styles for layout, typography, and global styles, ensuring a unified design across all ODX projects.
 
-## Features
+### Features
 
 - **Layout Styles**: Standardized layout styles to maintain consistency across different pages and elements.
 - **Typography**: Predefined typography styles for headers, paragraphs, and other text elements to ensure a cohesive look and feel.
 - **Global Styles**: Comprehensive global styles that set the base for your application's design, including colors, spacing, and more.
 
-## Setup
+### Install
 
-To include `@odx/foundation` in your project, run the following command:
+[<img alt="NPM Version (with dist tag)" src="https://img.shields.io/npm/v/%40odx%2Ffoundation/latest?style=flat-square">](https://npmjs.org/package/@odx/foundation)
 
-> We depend on the <a href="https://lit.dev" target="_blank" rel="noopener">**Lit package**</a> for building web elements because it offers a lightweight, efficient framework with a simple syntax for creating fast, reusable elements. Its powerful templating system ensures high performance and seamless user experience. Lit is also highly interoperable, making it easy to integrate with other frameworks and libraries.
+To include `@odx/foundation` in your project, run the following command:
 
 ```bash
-npm install @odx/foundation @odx/icons@4.0.0-rc.10 --save 
+npm install @odx/foundation @odx/icons@next --save 
 ```
 
-## Usage
+> We depend on the <a href="https://lit.dev" target="_blank" rel="noopener">**Lit package**</a> for building web elements because it offers a lightweight, efficient framework with a simple syntax for creating fast, reusable elements. Its powerful templating system ensures high performance and seamless user experience. Lit is also highly interoperable, making it easy to integrate with other frameworks and libraries. 
+> 
+> [<img src="https://img.shields.io/npm/dependency-version/@odx/foundation/lit" />](https://npmjs.org/package/lit)
+
+
+### Setup
 
 Once installed, you can import the foundational components and styles into your project:
 
-### Install core icons
+#### Install core icons
 
 ```js
 import '@odx/icons';
 import '@odx/icons/core';
 ```
 
-### Install all components
-```js
-// JS
-import '@odx/foundation/components';
-```
-
-### Fonts and styles
+#### Fonts and styles
 
 ```js
 // JS
-import '@odx/foundation/fonts';
+import '@odx/design-tokens/fonts';
 import '@odx/foundation/styles';
 
 // CSS
-@import '@odx/foundation/fonts.css';
-@import '@odx/foundation/styles.css';
+@import '@odx/design-tokens/dist/assets/fonts.css';
+@import '@odx/foundation/dist/styles.css';
+```
+
+#### Load and install all components
+
+```js
+import '@odx/foundation/loader';
 ```
 
-## Documentation
+### Documentation
 
 For detailed documentation on how to use the `@odx/foundation` package, including examples and best practices, please visit our <a href="https://odx.draeger.com" target="_blank" rel="noopener">**documentation**</a>.
 
-## Contact
+### Contact
 For questions, feedback, or support, please reach out to us through our <a href="https://odx.draeger.com/contact" target="_blank" rel="noopener">**contact page**</a>.

package/dist/cdk/drag-drop/drag.controller.d.ts

@@ -1,5 +1,5 @@
 import { ReactiveController, ReactiveElement } from 'lit';
-import { DraggableElement } from './is-draggable';
+import { DraggableElement } from './is-draggable.js';
 export interface DragControllerOptions<T extends DraggableElement = DraggableElement> {
     getDraggableElements: () => T[];
     getContainer?: () => HTMLElement;

package/dist/cdk/drag-drop/is-draggable.d.ts

@@ -1,6 +1,6 @@
-import { Constructor } from '@odx/foundation';
+import { Constructor } from '../../lib/main.js';
 import { LitElement } from 'lit';
-import { DragEvent, Position } from './drag-events';
+import { DragEvent, Position } from './drag-events.js';
 export declare const IS_DRAG_ACTIVE_ATTRIBUTE = "odx-drag-active";
 export declare class CanBeDragged {
     dragDisabled: boolean;

package/dist/cdk/main.d.ts

@@ -1,7 +1,7 @@
-export * from './drag-drop/drag-events';
-export * from './drag-drop/drag.controller';
-export * from './drag-drop/is-draggable';
-export * from './popover/popover-host.mixin';
-export * from './popover/popover.component';
-export * from './popover/popover.models';
+export * from './drag-drop/drag-events.js';
+export * from './drag-drop/drag.controller.js';
+export * from './drag-drop/is-draggable.js';
+export * from './popover/popover-host.js';
+export * from './popover/popover.js';
+export * from './popover/popover.models.js';
 //# sourceMappingURL=main.d.ts.map

package/dist/cdk/popover/{popover-host.mixin.d.ts → popover-host.d.ts}

@@ -1,9 +1,10 @@
-import { Constructor, CustomElement } from '@odx/foundation';
-import { PopoverPlacement } from './popover.models';
+import { Constructor, CustomElement } from '../../lib/main.js';
+import { PopoverPlacement, PopoverPlacementOptions } from './popover.models.js';
 export interface PopoverHost {
     referenceElement: HTMLElement | null;
     anchor: string;
     placement?: PopoverPlacement;
+    get options(): PopoverPlacementOptions;
     isPopoverOpen(): boolean;
     mountPopover(referenceElement?: HTMLElement | null): void;
     unmountPopover(referenceElement: HTMLElement): void;
@@ -15,4 +16,4 @@ export interface PopoverHost {
 }
 export type PopoverHostElement = PopoverHost & CustomElement;
 export declare const PopoverHost: <T extends Constructor<CustomElement>>(superClass: T) => Constructor<PopoverHost> & T;
-//# sourceMappingURL=popover-host.mixin.d.ts.map
+//# sourceMappingURL=popover-host.d.ts.map

package/dist/cdk/popover/popover.d.ts

@@ -0,0 +1,12 @@
+import { CustomElement } from '../../lib/main.js';
+import { TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-popover': OdxPopover;
+    }
+}
+export declare class OdxPopover extends CustomElement {
+    showArrow: boolean;
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=popover.d.ts.map

package/dist/cdk/popover/popover.utils.d.ts

@@ -1,5 +1,5 @@
 import { FloatingElement, ReferenceElement } from '@floating-ui/dom';
-import { PopoverPlacement, PopoverPlacementOptions, PopoverSide } from './popover.models';
+import { PopoverPlacement, PopoverPlacementOptions, PopoverSide } from './popover.models.js';
 export declare function getPopoverSide(placement: PopoverPlacement): PopoverSide;
 export declare function computePopoverPlacement(referenceElement: ReferenceElement, floatingElement: FloatingElement, options: PopoverPlacementOptions): Promise<void>;
 //# sourceMappingURL=popover.utils.d.ts.map

package/dist/cdk.js

@@ -0,0 +1,356 @@
+import { dedupeMixin, createOptions, toPx, waitForAnimations, findClosestDocument, createMutationObserver, customElement, CustomElement } from '@odx/foundation';
+import { property, state } from 'lit/decorators.js';
+import { m as minBy, a as computePosition, o as offset, s as shift, f as flip, b as size, d as arrow, h as hide, e as autoUpdate } from './vendor-C_WVAD3D.js';
+import { isServer, unsafeCSS, html } from 'lit';
+import { when } from 'lit/directives/when.js';
+
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+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;
+};
+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$2([
+    property({ type: Boolean })
+  ], IsDraggableElement.prototype, "dragDisabled", 2);
+  return IsDraggableElement;
+});
+
+const DragControllerOptions = createOptions({
+  getDraggableElements: () => []
+});
+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;
+    }
+    if (this.isDraggable(event.target)) {
+      return event.target;
+    }
+    return null;
+  }
+}
+
+const styles$1 = "@layer base{:host{--max-block-size: 100%;--max-inline-size: 100%;--_popover-color-background: var(--odx-color-transparent);--_popover-color-foreground: inherit;--_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;padding:var(--_popover-offset);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-start:var(--_popover-outer-padding);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-end: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-end: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-start:var(--_popover-outer-padding);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"
+};
+const PopoverPlacementOptions = createOptions({
+  placement: PopoverPlacement.BOTTOM,
+  enableFallback: true,
+  fallbackAxisSideDirection: "end",
+  matchReferenceWidth: false,
+  offset: 0,
+  outerPadding: 24
+});
+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, {
+    placement,
+    middleware: [
+      offset(offset$1 + arrowSize / 2),
+      shift({ padding: 0 }),
+      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;
+};
+const PopoverHost = dedupeMixin((superClass) => {
+  class PopoverHostClass extends superClass {
+    // biome-ignore lint/suspicious/noExplicitAny: This is a mixin
+    constructor(...args) {
+      super(...args);
+      this.isOpen = false;
+      this.referenceElement = null;
+      this.anchor = "";
+      this.#handleToggle = async ({ newState }) => {
+        this.isOpen = newState === "open";
+        if (this.isOpen) {
+          this.onBeforePopoverShow?.();
+          await waitForAnimations(this);
+          this.onPopoverShow?.();
+        } else {
+          this.onBeforePopoverHide?.();
+          await waitForAnimations(this);
+          this.onPopoverHide?.();
+        }
+      };
+      if (!isServer) {
+        this.addEventListener("toggle", this.#handleToggle);
+      }
+    }
+    static {
+      this.styles = [superClass.styles ?? [], unsafeCSS(styles$1)].flat(2);
+    }
+    #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 || this.matches(":popover-open");
+    }
+    togglePopover(force) {
+      const isOpen = force ?? !this.isPopoverOpen();
+      if (isOpen) {
+        this.showPopover();
+      } else {
+        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()
+  ], PopoverHostClass.prototype, "isOpen", 2);
+  __decorateClass$1([
+    state()
+  ], PopoverHostClass.prototype, "referenceElement", 2);
+  __decorateClass$1([
+    property({ reflect: true })
+  ], PopoverHostClass.prototype, "anchor", 2);
+  __decorateClass$1([
+    property({ reflect: true })
+  ], PopoverHostClass.prototype, "placement", 2);
+  return PopoverHostClass;
+});
+
+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}:host::part(arrow),:host::part(content){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%;box-shadow:var(--_popover-shadow);color:var(--_popover-color-foreground);padding:var(--_outer-padding);border-radius:var(--_border-radius);z-index:2;overflow:auto}: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 { DragController, IS_DRAG_ACTIVE_ATTRIBUTE, IsDraggable, OdxPopover, PopoverHost, PopoverPlacement, PopoverPlacementOptions, PopoverSide, isDraggableElement };

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

@@ -0,0 +1,18 @@
+import { CanBeExpanded, CustomElement } from '../../lib/main.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { OdxAccordionPanel } from './accordion-panel.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-accordion-header': OdxAccordionHeader;
+    }
+}
+declare const OdxAccordionHeader_base: import('../../lib/main.js').Constructor<CanBeExpanded> & typeof CustomElement;
+export declare class OdxAccordionHeader extends OdxAccordionHeader_base {
+    #private;
+    get panel(): OdxAccordionPanel | null;
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+    protected willUpdate(props: PropertyValues<this>): void;
+}
+export {};
+//# sourceMappingURL=accordion-header.d.ts.map

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

@@ -0,0 +1,12 @@
+import { CustomElement } from '../../lib/main.js';
+import { TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-accordion-panel': OdxAccordionPanel;
+    }
+}
+export declare class OdxAccordionPanel extends CustomElement {
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=accordion-panel.d.ts.map

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

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

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

@@ -1,4 +1,4 @@
-export * from './accordion-header.component';
-export * from './accordion-panel.component';
-export * from './accordion.component';
+export * from './accordion-header.js';
+export * from './accordion-panel.js';
+export * from './accordion.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,24 @@
+import { CanBeDisabled, CustomElement } from '../../lib/main.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { ButtonSize, ButtonVariant } from '../button/index.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-action-group': OdxActionGroup;
+    }
+}
+declare const OdxActionGroup_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
+export declare class OdxActionGroup extends OdxActionGroup_base {
+    #private;
+    private assignedElements;
+    private fallbackElements;
+    private base;
+    private container;
+    connected: boolean;
+    size?: ButtonSize | null;
+    variant?: ButtonVariant | null;
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+    protected updated(props: PropertyValues<this>): void;
+}
+export {};
+//# sourceMappingURL=action-group.d.ts.map

package/dist/components/action-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from './action-group.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/anchor-navigation/anchor-navigation.d.ts

@@ -0,0 +1,21 @@
+import { CustomElement } from '../../lib/main.js';
+import { PropertyValueMap, TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-anchor-navigation': OdxAnchorNavigation;
+    }
+}
+declare const OdxAnchorNavigation_base: typeof CustomElement;
+export declare class OdxAnchorNavigation extends OdxAnchorNavigation_base {
+    #private;
+    container?: string;
+    vertical: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    renderAnchorLink(anchor: Element, isActive?: boolean): unknown;
+    protected render(): TemplateResult;
+    protected updated(props: PropertyValueMap<this>): void;
+}
+export {};
+//# sourceMappingURL=anchor-navigation.d.ts.map

package/dist/components/anchor-navigation/anchor-observer.d.ts

@@ -0,0 +1,11 @@
+export declare class AnchorObserver {
+    #private;
+    readonly root: Element | Document;
+    readonly anchors: import('@preact/signals-core').Signal<Element[]>;
+    readonly visibleAnchors: import('@preact/signals-core').ReadonlySignal<Element[]>;
+    constructor(root?: Element | null);
+    observe(): void;
+    disconnect(): void;
+    updateAnchors: () => void;
+}
+//# sourceMappingURL=anchor-observer.d.ts.map

package/dist/components/anchor-navigation/index.d.ts

@@ -0,0 +1,3 @@
+export * from './anchor-navigation.js';
+export * from './anchor-observer.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/area-header/{area-header.component.d.ts → area-header.d.ts}

@@ -1,14 +1,14 @@
-import { CustomElement } from '@odx/foundation';
+import { CustomElement } from '../../lib/main.js';
 import { TemplateResult } from 'lit';
-import { AreaHeaderSize, AreaHeaderVariant } from './area-header.models';
+import { AreaHeaderSize, AreaHeaderVariant } from './area-header.models.js';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-area-header': OdxAreaHeaderComponent;
+        'odx-area-header': OdxAreaHeader;
     }
 }
-export declare class OdxAreaHeaderComponent extends CustomElement {
+export declare class OdxAreaHeader extends CustomElement {
     size?: AreaHeaderSize;
     variant?: AreaHeaderVariant;
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=area-header.component.d.ts.map
+//# sourceMappingURL=area-header.d.ts.map