@odx/foundation 1.0.0-alpha.2 → 1.0.0-alpha.20

package/README.md

@@ -16,7 +16,7 @@ To include `@odx/foundation` in your project, run the following command:
 > 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.
 
 ```bash
-npm install @odx/foundation @odx/icons@4.0.0-rc.10 --save 
+npm install @odx/foundation @odx/icons@next --save 
 ```
 
 ## Usage
@@ -30,12 +30,6 @@ import '@odx/icons';
 import '@odx/icons/core';
 ```
 
-### Install all components
-```js
-// JS
-import '@odx/foundation/components';
-```
-
 ### Fonts and styles
 
 ```js
@@ -44,8 +38,14 @@ import '@odx/foundation/fonts';
 import '@odx/foundation/styles';
 
 // CSS
-@import '@odx/foundation/fonts.css';
-@import '@odx/foundation/styles.css';
+@import '@odx/foundation/dist/assets/fonts.css';
+@import '@odx/foundation/dist/styles.css';
+```
+
+### Install all components
+```js
+// JS
+import '@odx/foundation/components';
 ```
 
 ## Documentation

package/dist/assets/fonts.css

@@ -2,19 +2,19 @@
   font-family: "Draeger Pangea Text";
   font-style: normal;
   font-weight: 400;
-  src: url("./assets/draeger-pangea-text-regular.woff2") format("woff2");
+  src: url("./draeger-pangea-text-regular.woff2") format("woff2");
 }
 
 @font-face {
   font-family: "Draeger Pangea Text";
   font-style: normal;
   font-weight: 500;
-  src: url("./assets/draeger-pangea-text-medium.woff2") format("woff2");
+  src: url("./draeger-pangea-text-medium.woff2") format("woff2");
 }
 
 @font-face {
   font-family: "Draeger Pangea Text";
   font-style: normal;
   font-weight: 600;
-  src: url("./assets/draeger-pangea-text-semibold.woff2") format("woff2");
+  src: url("./draeger-pangea-text-semibold.woff2") format("woff2");
 }

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.mixin.js';
+export * from './popover/popover.component.js';
+export * from './popover/popover.models.js';
 //# sourceMappingURL=main.d.ts.map

package/dist/cdk/popover/popover-host.mixin.d.ts

@@ -1,5 +1,5 @@
-import { Constructor, CustomElement } from '@odx/foundation';
-import { PopoverPlacement } from './popover.models';
+import { Constructor, CustomElement } from '../../lib/main.js';
+import { PopoverPlacement } from './popover.models.js';
 export interface PopoverHost {
     referenceElement: HTMLElement | null;
     anchor: string;

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

@@ -1,4 +1,4 @@
-import { CustomElement } from '@odx/foundation';
+import { CustomElement } from '../../lib/main.js';
 import { TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {

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,345 @@
+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-okSCJWYL.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 = ":host{--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-size-50);background-color:transparent;opacity:0;padding:var(--_popover-offset);position-try:flip-block,flip-inline,flip-inline flip-block;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(--_popover-max-block-size, 100%);max-inline-size:var(--_popover-max-inline-size, 100%);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))}}:host,:host([placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-1 * var(--_popover-offset))}:host([placement^=\"right\"]){--_popover-transition-offset-x: var(--_popover-offset);--_popover-transition-offset-y: 0}:host([placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: var(--_popover-offset)}:host([placement^=\"left\"]){--_popover-transition-offset-x: calc(-1 * var(--_popover-offset));--_popover-transition-offset-y: 0}";
+
+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;
+  const result = await computePosition(referenceElement, floatingElement, {
+    placement,
+    middleware: [
+      offset(offset$1 + arrowSize / 2),
+      shift({ padding: 0 }),
+      flipMiddleWare,
+      size({
+        padding: 0,
+        apply: ({ availableHeight, availableWidth, rects }) => {
+          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));
+        }
+      }),
+      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)];
+    }
+    #observer;
+    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, () => computePopoverPlacement(this.referenceElement, this, PopoverPlacementOptions()));
+    }
+    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{--color-background: transparent;--color-foreground: inherit;--min-block-size: inherit;--max-block-size: 100%;--min-inline-size: inherit;--max-inline-size: inherit;--_arrow-size: var(--odx-size-50);--_outer-padding: var(--odx-size-75);--_shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_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(--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(--min-block-size);max-block-size:var(--max-block-size);min-inline-size:var(--min-inline-size);max-inline-size:var(--max-inline-size);box-shadow:var(--_shadow);color:var(--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 OdxPopoverComponent = 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 })
+], OdxPopoverComponent.prototype, "showArrow", 2);
+OdxPopoverComponent = __decorateClass([
+  customElement("odx-popover", [styles])
+], OdxPopoverComponent);
+
+export { DragController, IS_DRAG_ACTIVE_ATTRIBUTE, IsDraggable, OdxPopoverComponent, PopoverHost, PopoverPlacement, PopoverPlacementOptions, PopoverSide, isDraggableElement };

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

@@ -1,11 +1,11 @@
-import { CustomElement, WithAriaControls } from '@odx/foundation';
+import { CustomElement, WithAriaControls } from '../../lib/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-accordion-header': OdxAccordionHeaderComponent;
     }
 }
-declare const OdxAccordionHeaderComponent_base: import('@odx/foundation').Constructor<WithAriaControls> & typeof CustomElement;
+declare const OdxAccordionHeaderComponent_base: import('../../lib/main.js', { with: { "resolution-mode": "import" } }).Constructor<WithAriaControls> & typeof CustomElement;
 export declare class OdxAccordionHeaderComponent extends OdxAccordionHeaderComponent_base {
     set expanded(value: boolean);
     get expanded(): boolean;

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

@@ -1,4 +1,4 @@
-import { CustomElement } from '@odx/foundation';
+import { CustomElement } from '../../lib/main.js';
 import { TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,6 +1,6 @@
-import { CustomElement } from '@odx/foundation';
+import { CustomElement } from '../../lib/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
-import { OdxAccordionHeaderComponent } from './accordion-header.component';
+import { OdxAccordionHeaderComponent } from './accordion-header.component.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-accordion': OdxAccordionComponent;

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

@@ -0,0 +1,10 @@
+import { OdxAccordionComponent } from './main.js';
+import { StoryObj } from '@storybook/web-components';
+declare const _default: {
+    title: string;
+};
+export default _default;
+type Story = StoryObj<OdxAccordionComponent>;
+export declare const Demo: Story;
+export declare const Nested: Story;
+//# sourceMappingURL=accordion.stories.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.component.js';
+export * from './accordion-panel.component.js';
+export * from './accordion.component.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/action-group/action-group.component.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': OdxActionGroupComponent;
+    }
+}
+declare const OdxActionGroupComponent_base: import('../../lib/main.js', { with: { "resolution-mode": "import" } }).Constructor<CanBeDisabled> & typeof CustomElement;
+export declare class OdxActionGroupComponent extends OdxActionGroupComponent_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.component.d.ts.map

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

@@ -0,0 +1,13 @@
+import { OdxActionGroupComponent } from '../main.js';
+import { StoryObj } from '@storybook/web-components';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+};
+export default _default;
+type Story = StoryObj<OdxActionGroupComponent & {
+    content: string | TemplateResult;
+}>;
+export declare const Demo: Story;
+export declare const Connected: Story;
+//# sourceMappingURL=action-group.stories.d.ts.map

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

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

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

@@ -0,0 +1,21 @@
+import { CustomElement } from '../../lib/main.js';
+import { PropertyValueMap, TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-anchor-navigation': OdxAnchorNavigationComponent;
+    }
+}
+declare const OdxAnchorNavigationComponent_base: typeof CustomElement;
+export declare class OdxAnchorNavigationComponent extends OdxAnchorNavigationComponent_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.component.d.ts.map

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

@@ -0,0 +1,12 @@
+import { OdxAnchorNavigationComponent } from '../main.js';
+import { StoryObj } from '@storybook/web-components';
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+type Story = StoryObj<OdxAnchorNavigationComponent>;
+export declare const Demo: Story;
+//# sourceMappingURL=anchor-navigation.stories.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("@lit-labs/signals", { with: { "resolution-mode": "import" } }).Signal.State<Element[]>;
+    readonly visibleAnchors: import("@lit-labs/signals", { with: { "resolution-mode": "import" } }).Signal.Computed<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.component.js';
+export * from './anchor-observer.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/area-header/area-header.component.d.ts

@@ -1,6 +1,6 @@
-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;

package/dist/components/area-header/area-header.stories.d.ts

@@ -0,0 +1,9 @@
+import { OdxAreaHeaderComponent } from '../main.js';
+import { StoryObj } from '@storybook/web-components';
+declare const _default: {
+    title: string;
+};
+export default _default;
+type Story = StoryObj<OdxAreaHeaderComponent>;
+export declare const Demo: Story;
+//# sourceMappingURL=area-header.stories.d.ts.map

package/dist/components/area-header/index.d.ts

@@ -1,3 +1,3 @@
-export * from './area-header.component';
-export * from './area-header.models';
+export * from './area-header.component.js';
+export * from './area-header.models.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/avatar/avatar.component.d.ts

@@ -1,6 +1,6 @@
-import { CustomElement } from '@odx/foundation';
+import { CustomElement } from '../../lib/main.js';
 import { TemplateResult } from 'lit';
-import { AvatarSize, AvatarVariant } from './avatar.models';
+import { AvatarSize, AvatarVariant } from './avatar.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-avatar': OdxAvatarComponent;