@odx/foundation 1.0.0-beta.25 → 1.0.0-beta.251

package/README.md

@@ -1,36 +1,35 @@
 
 # @odx/foundation
 
-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.
+The `@odx/foundation` package is a core part of the ODX Design System, providing essential building blocks for creating consistent and cohesive user interfaces. This package includes foundational components, styles, and utilities to ensure a unified design across all ODX projects.
 
 ### 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.
-
-### Prequisites
-
+- **CSS Framework**: A comprehensive CSS framework that includes layout, typography, and utility classes to streamline styling and ensure consistency
+- **Components**: Reusable web components, including buttons, tables, headers, and more.
+- **i18n**: Internationalization utilities for building multilingual applications, with support for locale changes and translations.
+- **Global Styles**: Comprehensive global styles, including colors, spacing, and themes.
+- **Browser Support**: <a href="https://web-platform-dx.github.io/web-features/supported-browsers/?targetYear=2024" target="_blank">Baseline 2024</a>
 
 ### 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:
+To install `@odx/foundation` and it's peer dependencies in your project, run the following command:
 
 ```bash
 npm install @odx/foundation @odx/icons@next --save 
 ```
 
-> 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. 
+> 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
 
-> Ensure that you have followed the installation and setup instructions for our [**design tokens**](https://npmjs.org/package/@odx/design-tokens) library.
+> 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:
 
@@ -43,18 +42,42 @@ import '@odx/icons/core';
 import '@odx/foundation/loader';
 
 // Load styles (in JS)
-import '@odx/foundation/styles'; // JS
+import '@odx/foundation/styles';
+
 
 ```
 
 ```css
-// Load styles (in CSS)
+/* Load styles (in CSS) */
 @import '@odx/foundation/dist/styles.css';
+
+```
+
+### Framework integration
+
+We currently do not provide any framework specific integration for the `@odx/foundation` package. However, you can easily integrate the web components into your framework of choice by following the standard practices for using web components in that framework.
+
+#### Angular Example
+
+```typescript
+import { Directive, input } from '@angular/core';
+
+@Directive({
+  selector: 'odx-title',
+  host: { '[attr.size]': 'size() || null' },
+})
+export class Title {
+  size = input<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>();
+}
 ```
 
+#### React Example
+
+See <a href="https://lit.dev/docs/frameworks/react/" target="_blank">Lit documentation</a> for more information on how to use web components in React.
+
 ### 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>.
+For detailed documentation on how to use the `@odx/foundation` package, including examples and best practices, please visit our <a href="https://ca-odx-storybook-dev.yellowisland-7b13f2d7.westeurope.azurecontainerapps.io/" target="_blank" rel="noopener">storybook documentation</a>.
 
 ### 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>.
+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/_virtual_class-decorator-runtime.js

@@ -0,0 +1,13 @@
+var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+
+          const __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;
+};
+
+export { __decorateClass as _ };

package/dist/breakpoints/main.d.ts

@@ -0,0 +1,27 @@
+import { BreakpointConfig } from './types.js';
+declare global {
+    namespace ODX.Breakpoints {
+        interface Config {
+            mobile: true;
+            tablet: true;
+            desktop: true;
+        }
+    }
+}
+export declare const defaultBreakpoints: [{
+    readonly name: "mobile";
+    readonly min: 0;
+    readonly max: 575.98;
+}, {
+    readonly name: "tablet";
+    readonly min: 576;
+    readonly max: 991.98;
+}, {
+    readonly name: "desktop";
+    readonly min: 992;
+    readonly max: 1199.98;
+}];
+export default function setupBreakpoints(breakpointsConfig?: BreakpointConfig[]): () => void;
+export type * from './types.js';
+export * from './utils.js';
+//# sourceMappingURL=main.d.ts.map

package/dist/breakpoints/types.d.ts

@@ -0,0 +1,17 @@
+type FilteredKeys<T extends object> = {
+    [K in keyof T as T[K] extends true ? K : never]: T[K];
+};
+export type BreakpointOperator = '<' | '<=' | '>=' | '>';
+export interface BreakpointConfig {
+    name: keyof FilteredKeys<ODX.Breakpoints.Config>;
+    min: number;
+    max: number;
+    customQuery?: string;
+}
+export interface Breakpoint extends BreakpointConfig {
+    id: BreakpointConfig['name'] | `${BreakpointOperator}${BreakpointConfig['name']}`;
+    query: string;
+    operator?: BreakpointOperator;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/breakpoints/utils.d.ts

@@ -0,0 +1,13 @@
+import { Signal } from '../main.js';
+import { Breakpoint, BreakpointConfig, BreakpointOperator } from './types.js';
+export declare const breakpointDirective: import('../utils/main.js').StringAttributeDirective<"odx-breakpoint">;
+export declare const breakpointClassDirective: import('../utils/main.js').StringAttributeDirective<"odx-breakpoint-class">;
+export declare function buildBreakpoint(breakpoint: BreakpointConfig, operator?: BreakpointOperator): Breakpoint;
+export declare function expandBreakpoints(...breakpoints: BreakpointConfig[]): Breakpoint[];
+export declare function observeBreakpoint(breakpoint: Breakpoint, initialValue?: boolean): Signal<Breakpoint & {
+    matches: boolean;
+}>;
+export declare function createBreakpointDirectiveUpdater(breakpoints: Breakpoint[], update?: (target: HTMLElement, change: Breakpoint & {
+    matches: boolean;
+}) => void): () => void;
+//# sourceMappingURL=utils.d.ts.map

package/dist/breakpoints.js

@@ -0,0 +1,112 @@
+import { signal, effect } from '@odx/foundation';
+import { stringAttributeDirective, observeMedia } from '@odx/foundation/utils';
+
+const operators = ["<", "<=", ">=", ">"];
+const breakpointDirective = stringAttributeDirective("odx-breakpoint");
+const breakpointClassDirective = stringAttributeDirective("odx-breakpoint-class");
+function buildBreakpoint(breakpoint, operator) {
+  const id = operator ? `${operator}${breakpoint.name}` : breakpoint.name;
+  let query = `(min-width: ${breakpoint.min}px) and (max-width: ${breakpoint.max}px)`;
+  switch (operator) {
+    case "<":
+      query = `(max-width: ${breakpoint.min - 0.02}px)`;
+      break;
+    case "<=":
+      query = `(max-width: ${breakpoint.max}px)`;
+      break;
+    case ">=":
+      query = `(min-width: ${breakpoint.min}px)`;
+      break;
+    case ">":
+      query = `(min-width: ${breakpoint.max + 0.02}px)`;
+      break;
+  }
+  return { ...breakpoint, id, operator, query: [query, breakpoint.customQuery].filter(Boolean).join(" and ") };
+}
+function expandBreakpoints(...breakpoints) {
+  return breakpoints.flatMap((breakpoint) => [void 0, ...operators].map((operator) => buildBreakpoint(breakpoint, operator)));
+}
+function observeBreakpoint(breakpoint, initialValue = false) {
+  let unobserveMedia;
+  return signal(
+    { ...breakpoint, matches: initialValue },
+    {
+      unwatched: () => {
+        unobserveMedia?.();
+        unobserveMedia = void 0;
+      },
+      watched() {
+        unobserveMedia = observeMedia(breakpoint.query, ({ matches }) => {
+          this.value = { ...breakpoint, matches };
+        });
+      }
+    }
+  );
+}
+function setBreakpointActiveStyles(host, active) {
+  const classNames = breakpointClassDirective.value(host);
+  if (!classNames) {
+    host.hidden = !active;
+    host.inert = !active;
+    return;
+  }
+  for (const className of classNames.split(" ")) {
+    host.classList.toggle(className, active);
+  }
+}
+function createBreakpointDirectiveUpdater(breakpoints, update) {
+  const breakpointCache = /* @__PURE__ */ new WeakMap();
+  const breakpointObservers = breakpoints.map((breakpoint) => observeBreakpoint(breakpoint, false));
+  return () => {
+    const directives = document.querySelectorAll(breakpointDirective.selector);
+    const changes = breakpointObservers.reduce(
+      (breakpoints2, { value }) => {
+        breakpoints2[value.id] = value;
+        return breakpoints2;
+      },
+      {}
+    );
+    let i = directives.length;
+    while (i--) {
+      const directive = directives[i];
+      const change = changes[breakpointDirective.value(directive) || ""];
+      if (!change || change.matches === breakpointCache.get(directive)) continue;
+      breakpointCache.set(directive, change.matches);
+      setBreakpointActiveStyles(directive, change.matches);
+      update?.(directive, change);
+    }
+  };
+}
+
+const defaultBreakpoints = [
+  { name: "mobile", min: 0, max: 575.98 },
+  { name: "tablet", min: 576, max: 991.98 },
+  { name: "desktop", min: 992, max: 1199.98 }
+];
+function setupBreakpoints(breakpointsConfig = []) {
+  const breakpoints = expandBreakpoints(...defaultBreakpoints, ...breakpointsConfig);
+  const directiveUpdater = createBreakpointDirectiveUpdater(breakpoints);
+  let mutationObserver;
+  let unobserveBreakpoints = () => {
+  };
+  function initBreakpoints() {
+    destroyBreakpoints();
+    mutationObserver = new MutationObserver(directiveUpdater);
+    mutationObserver.observe(document.documentElement, {
+      attributes: true,
+      subtree: true,
+      childList: true,
+      attributeFilter: [breakpointDirective.attribute]
+    });
+    unobserveBreakpoints = effect(directiveUpdater);
+  }
+  function destroyBreakpoints() {
+    unobserveBreakpoints();
+    mutationObserver?.disconnect();
+    globalThis.removeEventListener("DOMContentLoaded", initBreakpoints);
+  }
+  globalThis.addEventListener("DOMContentLoaded", initBreakpoints);
+  return destroyBreakpoints;
+}
+
+export { breakpointClassDirective, breakpointDirective, buildBreakpoint, createBreakpointDirectiveUpdater, setupBreakpoints as default, defaultBreakpoints, expandBreakpoints, observeBreakpoint };

package/dist/components/abstract/button-control-element.d.ts

@@ -0,0 +1,20 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { ControlElement } from './control-element.js';
+/**
+ * @csspart base
+ * @csspart spinner
+ * @csspart label
+ *
+ * @slot prefix - Prefix slot
+ * @slot suffix - Suffix slot
+ * @slot - Default slot
+ */
+export declare class ButtonControlElement extends ControlElement {
+    static readonly styles: CSSResultGroup;
+    static shadowRootOptions: ShadowRootInit;
+    focusTarget: HTMLButtonElement;
+    lineClamp: number;
+    protected render(): TemplateResult;
+    protected renderLabel(): TemplateResult;
+}
+//# sourceMappingURL=button-control-element.d.ts.map

package/dist/components/abstract/control-element.d.ts

@@ -0,0 +1,36 @@
+import { CanBeDisabled, CustomElement } from '../../main.js';
+import { ValuesOf } from '../../utils/main.js';
+import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+export declare const controlDirective: import('../../utils/main.js').BooleanAttributeDirective<"data-odx-control">;
+export type ControlSize = ValuesOf<typeof ControlSize>;
+export declare const ControlSize: Pick<{
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "xxl";
+}, "SM" | "MD" | "LG">;
+declare const ControlElement_base: import('../../utils/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
+/**
+ * @csspart spinner
+ *
+ * @slot prefix - Prefix slot
+ * @slot suffix - Suffix slot
+ * @slot - Default slot
+ */
+export declare class ControlElement extends ControlElement_base {
+    static readonly styles: CSSResultGroup;
+    loading: boolean;
+    size: ControlSize;
+    connectedCallback(): void;
+    click(): void;
+    protected updated(props: PropertyValues): void;
+    protected render(): TemplateResult;
+    protected renderContent(): TemplateResult;
+    protected renderLabel(defaultContent?: TemplateResult | string): TemplateResult;
+    protected renderSideSlot(name: 'prefix' | 'suffix', defaultContent?: TemplateResult | string): TemplateResult;
+    protected renderLoadingSpinner(): TemplateResult;
+}
+export {};
+//# sourceMappingURL=control-element.d.ts.map

package/dist/components/abstract/dialog-element.d.ts

@@ -0,0 +1,61 @@
+import { CanBeDisabled, CustomElement } from '../../main.js';
+import { ValuesOf } from '../../utils/main.js';
+import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+export declare const dialogDirective: import('../../utils/main.js').BooleanAttributeDirective<"odx-dialog">;
+export type DialogSize = ValuesOf<typeof DialogSize>;
+export declare const DialogSize: Pick<{
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "xxl";
+}, "SM" | "MD" | "LG">;
+export type DialogLayer = ValuesOf<typeof DialogLayer>;
+export declare const DialogLayer: {
+    SCREEN: string;
+    PAGE: string;
+    CONTAINER: string;
+};
+export declare const DialogShowCommand: import('../../utils/main.js').CommandDirective<"odx-dialog-show">;
+export declare const DialogDismissCommand: import('../../utils/main.js').CommandDirective<"odx-dialog-dismiss">;
+export declare const DialogCloseCommand: import('../../utils/main.js').CommandDirective<"odx-dialog-close">;
+export declare class DialogShowEvent extends Event {
+    static readonly eventName = "dialog-show";
+    constructor(eventInit?: EventInit);
+}
+export declare class DialogCloseEvent extends CustomEvent<{
+    returnValue?: string;
+}> {
+    static readonly eventName = "dialog-close";
+    constructor(eventInit?: CustomEventInit<{
+        returnValue?: string;
+    }>);
+}
+declare const DialogElement_base: import('../../utils/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
+export declare class DialogElement extends DialogElement_base {
+    #private;
+    static readonly styles: CSSResultGroup;
+    backdropDisabled: boolean;
+    dismissible: boolean;
+    open: boolean;
+    layer: DialogLayer;
+    size: DialogSize;
+    get canShow(): boolean;
+    get canClose(): boolean;
+    get canDismiss(): boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    show(): Promise<string | undefined>;
+    close(returnValue?: string): void;
+    dismiss(): void;
+    toggle(state?: boolean, returnValue?: string): boolean;
+    showPopover(): void;
+    hidePopover(): void;
+    togglePopover(state?: boolean): boolean;
+    protected updated(props: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+}
+export {};
+//# sourceMappingURL=dialog-element.d.ts.map

package/dist/components/abstract/link-control-element.d.ts

@@ -0,0 +1,20 @@
+import { TemplateResult } from 'lit';
+import { ButtonControlElement } from './button-control-element.js';
+/**
+ * @csspart base
+ * @csspart spinner
+ * @csspart label
+ *
+ * @slot prefix - Prefix slot
+ * @slot suffix - Suffix slot
+ * @slot - Default slot
+ */
+export declare class LinkControlElement extends ButtonControlElement {
+    focusTarget: HTMLButtonElement & HTMLLinkElement;
+    href: string;
+    target: '_blank' | '_parent' | '_self' | '_top' | '';
+    rel: string;
+    download?: string;
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=link-control-element.d.ts.map

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

@@ -1,15 +1,40 @@
-import { CustomElement } from '../../lib/main.js';
-import { OdxAccordionHeader } from './accordion-header.js';
+import { CustomElement, ExpandableItemManagerHost } from '../../main.js';
+import { ValuesOf } from '../../utils/main.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { ControlSize } from '../abstract/control-element.js';
+import { OdxAccordionItem } from '../accordion-item/accordion-item.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-accordion': OdxAccordion;
     }
 }
-export declare class OdxAccordion extends CustomElement {
-    items: OdxAccordionHeader[];
-    indicatorPosition?: 'start';
+export type AccordionIndicatorPosition = ValuesOf<typeof AccordionIndicatorPosition>;
+export declare const AccordionIndicatorPosition: Pick<{
+    readonly START: "start";
+    readonly CENTER: "center";
+    readonly END: "end";
+}, "START" | "END">;
+/**
+ * @summary A container for grouping a set of accordion items and panels.
+ * @status beta
+ * @since 1.0.0
+ *
+ * @dependencies odx-accordion-item
+ *
+ * @slot - Default slot for accordion items and panels.
+ *
+ * @event expand - Emitted when an accordion item is expanded. Can be canceled to prevent expansion.
+ * @event collapse - Emitted when an accordion item is collapsed. Can be canceled to prevent collapse.
+ */
+export declare class OdxAccordion extends CustomElement implements ExpandableItemManagerHost<OdxAccordionItem> {
+    #private;
+    indicatorPosition: AccordionIndicatorPosition;
     multiple: boolean;
+    size: ControlSize;
     constructor();
-    toggleAll(force?: boolean, emitEvent?: boolean): void;
+    getItems(): OdxAccordionItem[];
+    toggleAll(state?: boolean, emitEvent?: boolean): void;
+    protected render(): TemplateResult | string;
+    protected updated(props: PropertyValues<this>): void;
 }
 //# sourceMappingURL=accordion.d.ts.map

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

@@ -0,0 +1,25 @@
+import { CanBeExpanded } from '../../main.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { ButtonControlElement } from '../abstract/button-control-element.js';
+import { OdxAccordionPanel } from '../accordion-panel/accordion-panel.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-accordion-item': OdxAccordionItem;
+    }
+}
+declare const OdxAccordionItem_base: import('../../utils/main.js').Constructor<CanBeExpanded> & typeof ButtonControlElement;
+/**
+ * @summary An accordion item component that can be expanded or collapsed to show or hide content.
+ * @status beta
+ * @since 1.0.0
+ *
+ * @dependencies odx-accordion-panel
+ */
+export declare class OdxAccordionItem extends OdxAccordionItem_base {
+    connectedCallback(): void;
+    getPanel(): OdxAccordionPanel | null;
+    protected renderContent(): TemplateResult;
+    protected updated(props: PropertyValues<this>): void;
+}
+export {};
+//# sourceMappingURL=accordion-item.d.ts.map

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

@@ -0,0 +1,22 @@
+import { CustomElement } from '../../main.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { ControlSize } from '../abstract/control-element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-accordion-panel': OdxAccordionPanel;
+    }
+}
+/**
+ * @summary A panel component that is used within an accordion to show or hide content.
+ * @status beta
+ * @since 1.0.0
+ *
+ */
+export declare class OdxAccordionPanel extends CustomElement {
+    expanded: boolean;
+    size: ControlSize;
+    connectedCallback(): void;
+    protected updated(props: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=accordion-panel.d.ts.map

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

@@ -0,0 +1,27 @@
+import { OdxIconName } from '@odx/icons';
+import { PropertyValues, TemplateResult } from 'lit';
+import { OdxButton } from '../button/button.js';
+import { TooltipPlacement } from '../tooltip/tooltip.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-action-button': OdxActionButton;
+    }
+}
+export declare class OdxActionButton extends OdxButton {
+    #private;
+    static observeSlots: boolean;
+    private tooltip?;
+    done: boolean;
+    icon?: OdxIconName;
+    label: string;
+    labelPlacement?: TooltipPlacement;
+    statusIcon: OdxIconName;
+    statusLabel: string;
+    statusTimeout: number;
+    replaceContent: boolean;
+    protected firstUpdated(props: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+    protected renderContent(): TemplateResult;
+    protected updated(props: PropertyValues<this>): void;
+}
+//# sourceMappingURL=action-button.d.ts.map

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

@@ -1,24 +1,17 @@
-import { CanBeDisabled, CustomElement } from '../../lib/main.js';
+import { CustomElement } from '../../main.js';
 import { PropertyValues, TemplateResult } from 'lit';
-import { ButtonSize, ButtonVariant } from '../button/index.js';
+import { OdxButton } from '../button/button.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 {
+export declare class OdxActionGroup extends CustomElement {
     #private;
-    private assignedElements;
-    private fallbackElements;
-    private base;
-    private container;
-    connected: boolean;
-    size?: ButtonSize | null;
-    variant?: ButtonVariant | null;
-    connectedCallback(): void;
+    getItems(): OdxButton[];
+    disconnectedCallback(): void;
     protected render(): TemplateResult;
+    protected renderOverflowMenu(items: OdxButton[]): TemplateResult;
     protected updated(props: PropertyValues<this>): void;
 }
-export {};
 //# sourceMappingURL=action-group.d.ts.map

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

@@ -1,5 +1,6 @@
-import { CustomElement } from '../../lib/main.js';
-import { PropertyValueMap, TemplateResult } from 'lit';
+import { CustomElement } from '../../main.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { OdxNavigationItem } from '../navigation-item/navigation-item.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-anchor-navigation': OdxAnchorNavigation;
@@ -8,14 +9,15 @@ declare global {
 declare const OdxAnchorNavigation_base: typeof CustomElement;
 export declare class OdxAnchorNavigation extends OdxAnchorNavigation_base {
     #private;
-    container?: string;
+    readonly activeItem: import('@preact/signals-core').ReadonlySignal<OdxNavigationItem | undefined>;
+    root: Document | HTMLElement;
+    rootMargin?: string;
+    threshold: number;
     vertical: boolean;
     constructor();
-    connectedCallback(): void;
     disconnectedCallback(): void;
-    renderAnchorLink(anchor: Element, isActive?: boolean): unknown;
     protected render(): TemplateResult;
-    protected updated(props: PropertyValueMap<this>): void;
+    protected updated(props: PropertyValues<this>): void;
 }
 export {};
 //# sourceMappingURL=anchor-navigation.d.ts.map

package/dist/components/area-footer/area-footer.d.ts

@@ -0,0 +1,29 @@
+import { CustomElement } from '../../main.js';
+import { ValuesOf } from '../../utils/main.js';
+import { TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-area-footer': OdxAreaFooter;
+    }
+}
+export type AreaFooterAlignment = ValuesOf<typeof AreaFooterAlignment>;
+export declare const AreaFooterAlignment: Pick<{
+    readonly START: "start";
+    readonly CENTER: "center";
+    readonly END: "end";
+}, "START" | "CENTER" | "END">;
+export type AreaFooterSize = ValuesOf<typeof AreaFooterSize>;
+export declare const AreaFooterSize: Pick<{
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "xxl";
+}, "SM" | "MD" | "LG">;
+export declare class OdxAreaFooter extends CustomElement {
+    alignment: AreaFooterAlignment;
+    size: AreaFooterSize;
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=area-footer.d.ts.map