@odx/foundation 1.0.0-alpha.8 → 1.0.0-beta.0

package/README.md

@@ -3,54 +3,58 @@
 
 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
+### Prequisites
 
-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.
+### Install
+
+[<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)
+
+
+To install `@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)
 
-Once installed, you can import the foundational components and styles into your project:
 
-### Install core icons
+### Setup
+
+> Ensure that you have followed the installation and setup instructions for our [**design tokens**](https://npmjs.org/package/@odx/design-tokens) library.
+
+Once installed, you can import the foundational components and styles into your project:
 
 ```js
+// Load core icons
 import '@odx/icons';
 import '@odx/icons/core';
-```
 
-### Fonts and styles
+// Load components
+import '@odx/foundation/loader';
 
-```js
-// JS
-import '@odx/foundation/fonts';
-import '@odx/foundation/styles';
+// Load styles (in JS)
+import '@odx/foundation/styles'; // JS
 
-// CSS
-@import '@odx/foundation/assets/fonts.css';
-@import '@odx/foundation/styles.css';
 ```
 
-### Install all components
-```js
-// JS
-import '@odx/foundation/components';
+```css
+// Load styles (in CSS)
+@import '@odx/foundation/dist/styles.css';
 ```
 
-## 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/is-draggable.d.ts

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

package/dist/cdk/main.d.ts

@@ -1,7 +1,7 @@
 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-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.js';
+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.js

@@ -1,6 +1,6 @@
 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.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';
 
@@ -128,7 +128,7 @@ class DragController {
   }
 }
 
-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 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",
@@ -167,6 +167,7 @@ async function computePopoverPlacement(referenceElement, floatingElement, option
   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: [
@@ -174,12 +175,12 @@ async function computePopoverPlacement(referenceElement, floatingElement, option
       shift({ padding: 0 }),
       flipMiddleWare,
       size({
-        padding: 0,
-        apply: ({ availableHeight, availableWidth, rects }) => {
+        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,
@@ -237,9 +238,12 @@ const PopoverHost = dedupeMixin((superClass) => {
       }
     }
     static {
-      this.styles = [superClass.styles ?? [], unsafeCSS(styles$1)];
+      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";
@@ -258,7 +262,14 @@ const PopoverHost = dedupeMixin((superClass) => {
         return;
       }
       this.referenceElement = referenceElement;
-      autoUpdate(this.referenceElement, this, () => computePopoverPlacement(this.referenceElement, this, PopoverPlacementOptions()));
+      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();
@@ -309,7 +320,7 @@ const PopoverHost = dedupeMixin((superClass) => {
   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)}";
+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;scrollbar-width:thin}: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;
@@ -321,7 +332,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let OdxPopoverComponent = class extends CustomElement {
+let OdxPopover = class extends CustomElement {
   constructor() {
     super(...arguments);
     this.showArrow = false;
@@ -337,9 +348,9 @@ let OdxPopoverComponent = class extends CustomElement {
 };
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], OdxPopoverComponent.prototype, "showArrow", 2);
-OdxPopoverComponent = __decorateClass([
+], OdxPopover.prototype, "showArrow", 2);
+OdxPopover = __decorateClass([
   customElement("odx-popover", [styles])
-], OdxPopoverComponent);
+], OdxPopover);
 
-export { DragController, IS_DRAG_ACTIVE_ATTRIBUTE, IsDraggable, OdxPopoverComponent, PopoverHost, PopoverPlacement, PopoverPlacementOptions, PopoverSide, isDraggableElement };
+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.js';
-export * from './accordion-panel.component.js';
-export * from './accordion.component.js';
+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.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

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

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

package/dist/components/avatar/{avatar.component.d.ts → avatar.d.ts}

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

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

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

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

@@ -0,0 +1,14 @@
+import { CustomElement } from '../../lib/main.js';
+import { TemplateResult } from 'lit';
+import { AvatarSize, AvatarVariant, OdxAvatar } from '../avatar/index.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-avatar-group': OdxAvatarGroup;
+    }
+}
+export declare class OdxAvatarGroup extends CustomElement implements Pick<OdxAvatar, 'size' | 'variant'> {
+    size?: AvatarSize;
+    variant?: AvatarVariant;
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=avatar-group.d.ts.map

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

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

package/dist/components/badge/{badge.component.d.ts → badge.d.ts}

@@ -1,13 +1,15 @@
-import { CustomElement } from '@odx/foundation';
+import { CustomElement } from '../../lib/main.js';
 import { TemplateResult } from 'lit';
 import { BadgeVariant } from './badge.models.js';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-badge': OdxBadgeComponent;
+        'odx-badge': OdxBadge;
     }
 }
-export declare class OdxBadgeComponent extends CustomElement {
+export declare class OdxBadge extends CustomElement {
+    compact?: boolean;
+    pulse?: boolean;
     variant?: BadgeVariant;
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=badge.component.d.ts.map
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/badge/badge.models.d.ts

@@ -7,4 +7,8 @@ export declare const BadgeVariant: {
     WARNING: string;
     DANGER: string;
 };
+export type BadgeType = (typeof BadgeType)[keyof typeof BadgeType];
+export declare const BadgeType: {
+    STATUS: string;
+};
 //# sourceMappingURL=badge.models.d.ts.map

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

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

package/dist/components/breadcrumbs/breadcrumbs-item.d.ts

@@ -0,0 +1,17 @@
+import { CustomElement } from '../../lib/main.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { OdxLink } from '../link/index.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-breadcrumbs-item': OdxBreadcrumbsItem;
+    }
+}
+export declare class OdxBreadcrumbsItem extends CustomElement {
+    private linkElements;
+    fallback: boolean;
+    isLast(): boolean;
+    protected get interactiveElement(): OdxLink | null;
+    protected render(): TemplateResult;
+    protected updated(props: PropertyValues<this>): void;
+}
+//# sourceMappingURL=breadcrumbs-item.d.ts.map

package/dist/components/breadcrumbs/{breadcrumbs.component.d.ts → breadcrumbs.d.ts}

@@ -1,4 +1,4 @@
-import { CustomElement } from '@odx/foundation';
+import { CustomElement } from '../../lib/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
 interface BreadcrumbsItem {
     href: string;
@@ -6,10 +6,10 @@ interface BreadcrumbsItem {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-breadcrumbs': OdxBreadcrumbsComponent;
+        'odx-breadcrumbs': OdxBreadcrumbs;
     }
 }
-export declare class OdxBreadcrumbsComponent extends CustomElement {
+export declare class OdxBreadcrumbs extends CustomElement {
     #private;
     private itemElements;
     private renderedItemElements;
@@ -20,4 +20,4 @@ export declare class OdxBreadcrumbsComponent extends CustomElement {
     protected updated(props: PropertyValues<this>): void;
 }
 export {};
-//# sourceMappingURL=breadcrumbs.component.d.ts.map
+//# sourceMappingURL=breadcrumbs.d.ts.map

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

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

package/dist/components/button/base-button.d.ts

@@ -1,6 +1,6 @@
 import { TemplateResult, nothing } from 'lit';
 import { BaseLink } from '../link/index.js';
-declare const BaseButtonComponent_base: import('../../dist/lib/main.js', { with: { "resolution-mode": "import" } }).Constructor<import('../../dist/lib/main.js', { with: { "resolution-mode": "import" } }).HasLoadingState> & typeof BaseLink;
+declare const BaseButton_base: import('../../lib/main.js').Constructor<import('../../lib/main.js').HasLoadingState> & typeof BaseLink;
 /**
  * A button is clickable text or an icon that triggers an action on the page or in the background.
  * Depending on the action, content, and hierarchy, a button can be used on its own or grouped with
@@ -13,11 +13,13 @@ declare const BaseButtonComponent_base: import('../../dist/lib/main.js', { with:
  * @slot suffix - Contains the button's icon or state indicator, e.g. a spinner.
  * @slot - Contains button text
  */
-export declare class BaseButtonComponent extends BaseButtonComponent_base {
+export declare class BaseButton extends BaseButton_base {
+    static readonly styles: import('lit').CSSResult;
+    lineClamp: 1 | 2;
     protected render(): TemplateResult;
-    protected renderContent(): TemplateResult;
+    protected renderContent(withSpinner?: boolean): TemplateResult;
     protected renderButton(): TemplateResult<1>;
-    protected renderSlot(name: 'prefix' | 'suffix'): TemplateResult;
+    protected renderSlot(name: 'prefix' | 'suffix', force?: boolean): TemplateResult;
     protected renderOverlay(): TemplateResult | typeof nothing;
     protected renderSpinner(overlay?: boolean): TemplateResult;
 }

package/dist/components/button/{button.component.d.ts → button.d.ts}

@@ -1,11 +1,12 @@
-import { BaseButtonComponent } from './base-button.js';
+import { TemplateResult } from 'lit';
+import { BaseButton } from './base-button.js';
 import { ButtonSize, ButtonVariant } from './button.models.js';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-button': OdxButtonComponent;
+        'odx-button': OdxButton;
     }
 }
-declare const OdxButtonComponent_base: import('../../dist/lib/main.js', { with: { "resolution-mode": "import" } }).Constructor<import('../../dist/lib/main.js', { with: { "resolution-mode": "import" } }).HasLoadingState> & typeof BaseButtonComponent;
+declare const OdxButton_base: import('../../lib/main.js').Constructor<import('../../lib/main.js').HasLoadingState> & typeof BaseButton;
 /**
  * A button is clickable text or an icon that triggers an action on the page or in the background.
  * Depending on the action, content, and hierarchy, a button can be used on its own or grouped with
@@ -18,9 +19,10 @@ declare const OdxButtonComponent_base: import('../../dist/lib/main.js', { with:
  * @slot suffix - Contains the button's icon or state indicator, e.g. a spinner.
  * @slot - Contains button text
  */
-export declare class OdxButtonComponent extends OdxButtonComponent_base {
+export declare class OdxButton extends OdxButton_base {
     #private;
     static readonly formAssociated = true;
+    alignBadge?: 'center' | 'end';
     block: boolean;
     /**
      * The type of the button.
@@ -35,6 +37,7 @@ export declare class OdxButtonComponent extends OdxButtonComponent_base {
      */
     variant?: ButtonVariant;
     constructor();
+    protected render(): TemplateResult;
 }
 export {};
-//# sourceMappingURL=button.component.d.ts.map
+//# sourceMappingURL=button.d.ts.map

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

@@ -1,4 +1,4 @@
 export * from './base-button.js';
-export * from './button.component.js';
+export * from './button.js';
 export * from './button.models.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,21 @@
+import { CanBeDisabled, CustomElement } from '../../lib/main.js';
+import { PropertyValues } from 'lit';
+import { ButtonSize, ButtonVariant } from '../button/index.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-button-group': OdxButtonGroup;
+    }
+}
+declare const OdxButtonGroup_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
+export declare class OdxButtonGroup extends OdxButtonGroup_base {
+    private buttons;
+    private allButtons;
+    block: boolean;
+    connected: boolean;
+    vertical: boolean;
+    size?: ButtonSize | null;
+    variant?: ButtonVariant | null;
+    protected updated(props: PropertyValues<this>): void;
+}
+export {};
+//# sourceMappingURL=button-group.d.ts.map

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

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