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

package/README.md

@@ -1,26 +1,25 @@
 
 # @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
+- **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.
 
+### Prerequisites
 
 ### 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 
+npm install @odx/design-tokens @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. 

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/components/accordion/accordion.d.ts

@@ -1,11 +1,23 @@
-import { CustomElement } from '../../lib/main.js';
+import { CustomElement, ValuesOf } from '../../lib/main.js';
+import { PropertyValues } from 'lit';
+import { AccordionItemSize, OdxAccordionItem } from '../accordion-item/accordion-item.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-accordion': OdxAccordion;
     }
 }
+export type AccordionIndicatorPosition = ValuesOf<typeof AccordionIndicatorPosition>;
+export declare const AccordionIndicatorPosition: {
+    readonly START: "start";
+    readonly END: "end";
+};
 export declare class OdxAccordion extends CustomElement {
+    /** @internal */
+    items: OdxAccordionItem[];
+    indicatorPosition: AccordionIndicatorPosition;
     multiple: boolean;
+    size?: AccordionItemSize;
     constructor();
+    protected updated(props: PropertyValues<this>): void;
+    toggleAll(state?: boolean, emitEvent?: boolean): void;
 }
-//# sourceMappingURL=accordion.d.ts.map

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

@@ -0,0 +1,25 @@
+import { CanBeExpanded, InteractiveElement, ValuesOf } from '../../lib/main.js';
+import { PropertyValues, TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-accordion-item': OdxAccordionItem;
+    }
+}
+export type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
+export declare const AccordionItemSize: Pick<{
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "xxl";
+}, "SM" | "MD" | "LG">;
+declare const OdxAccordionItem_base: import('../../lib/main.js').Constructor<CanBeExpanded> & typeof InteractiveElement;
+export declare class OdxAccordionItem extends OdxAccordionItem_base {
+    #private;
+    size: AccordionItemSize;
+    get panel(): HTMLElement | null;
+    protected renderContent(): TemplateResult;
+    protected willUpdate(props: PropertyValues<this>): void;
+}
+export {};

package/dist/components/{accordion → accordion-panel}/accordion-panel.d.ts

@@ -10,4 +10,3 @@ export declare class OdxAccordionPanel extends CustomElement {
     connectedCallback(): void;
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=accordion-panel.d.ts.map

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

@@ -0,0 +1,26 @@
+import { OdxIconName } from '@odx/icons';
+import { PropertyValues, TemplateResult } from 'lit';
+import { OdxButton } from '../button/button.js';
+import { OdxTooltip } from '../tooltip/tooltip.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-action-button': OdxActionButton;
+    }
+}
+export declare class OdxActionButton extends OdxButton {
+    #private;
+    protected tooltip?: OdxTooltip;
+    /** @internal */
+    protected isStatusMessageShown: boolean;
+    done: boolean;
+    icon: OdxIconName | undefined;
+    statusIcon: OdxIconName;
+    statusMessage: string;
+    statusTimeout: number;
+    statusMessageTimeout: number;
+    replaceContent: boolean;
+    protected firstUpdated(props: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+    protected renderContent(): TemplateResult;
+    protected willUpdate(props: PropertyValues<this>): void;
+}

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

@@ -1,5 +1,5 @@
 import { CustomElement } from '../../lib/main.js';
-import { PropertyValueMap, TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-anchor-navigation': OdxAnchorNavigation;
@@ -8,14 +8,13 @@ declare global {
 declare const OdxAnchorNavigation_base: typeof CustomElement;
 export declare class OdxAnchorNavigation extends OdxAnchorNavigation_base {
     #private;
+    private navigationItems;
     container?: string;
     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/anchor-navigation/anchor-observer.d.ts

@@ -1,11 +1,13 @@
+import { InteractiveLink } from '../../lib/main.js';
+export interface AnchorObserverOptions {
+    threshold?: number;
+}
 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;
+    readonly root: Document | Element;
+    readonly activeAnchors: import('@preact/signals-core').ReadonlySignal<InteractiveLink[]>;
+    constructor(root: Document | Element, options?: AnchorObserverOptions);
     disconnect(): void;
-    updateAnchors: () => void;
+    isAnchorActive(anchor: InteractiveLink): boolean;
+    updateAnchors(anchors?: InteractiveLink[]): void;
 }
-//# sourceMappingURL=anchor-observer.d.ts.map

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

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

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

@@ -1,14 +1,20 @@
-import { CustomElement } from '../../lib/main.js';
+import { CustomElement, ValuesOf } from '../../lib/main.js';
 import { TemplateResult } from 'lit';
-import { AreaHeaderSize, AreaHeaderVariant } from './area-header.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-area-header': OdxAreaHeader;
     }
 }
+export type AreaHeaderSize = ValuesOf<typeof AreaHeaderSize>;
+export declare const AreaHeaderSize: Pick<{
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "xxl";
+}, "SM" | "MD" | "LG" | "XL">;
 export declare class OdxAreaHeader extends CustomElement {
-    size?: AreaHeaderSize;
-    variant?: AreaHeaderVariant;
+    size: AreaHeaderSize;
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=area-header.d.ts.map

package/dist/components/auto-grid/auto-grid.d.ts

@@ -0,0 +1,16 @@
+import { CustomElement, ValuesOf } from '../../lib/main.js';
+import { TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-auto-grid': OdxAutoGrid;
+    }
+}
+export type AutoGridMode = ValuesOf<typeof AutoGridMode>;
+export declare const AutoGridMode: {
+    readonly FIT: "fit";
+    readonly FILL: "fill";
+};
+export declare class OdxAutoGrid extends CustomElement {
+    mode: AutoGridMode;
+    protected render(): TemplateResult;
+}

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

@@ -1,14 +1,39 @@
-import { CustomElement } from '../../lib/main.js';
-import { TemplateResult } from 'lit';
-import { AvatarSize, AvatarVariant } from './avatar.models.js';
+import { CustomElement, ValuesOf } from '../../lib/main.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-avatar': OdxAvatar;
     }
 }
+export type AvatarShape = ValuesOf<typeof AvatarShape>;
+export declare const AvatarShape: Pick<{
+    readonly CIRCLE: "circle";
+    readonly RECTANGLE: "rectangle";
+}, "CIRCLE" | "RECTANGLE">;
+export type AvatarSize = ValuesOf<typeof AvatarSize>;
+export declare const AvatarSize: Pick<{
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "xxl";
+}, "SM" | "MD" | "LG" | "XL" | "XXL">;
+export type AvatarVariant = ValuesOf<typeof AvatarVariant>;
+export declare const AvatarVariant: Pick<{
+    readonly NEUTRAL: "neutral";
+    readonly NEUTRAL_SUBTLE: "neutral-subtle";
+    readonly PRIMARY: "primary";
+    readonly PRIMARY_SUBTLE: "primary-subtle";
+    readonly ACCENT: "accent";
+    readonly ACCENT_SUBTLE: "accent-subtle";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly DANGER_SUBTLE: "danger-subtle";
+    readonly GHOST: "ghost";
+}, "NEUTRAL" | "PRIMARY" | "PRIMARY_SUBTLE" | "ACCENT" | "ACCENT_SUBTLE">;
 export declare class OdxAvatar extends CustomElement {
-    size?: AvatarSize;
-    variant?: AvatarVariant;
-    protected render(): TemplateResult;
+    shape: AvatarShape;
+    size: AvatarSize;
+    variant: AvatarVariant;
 }
-//# sourceMappingURL=avatar.d.ts.map

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

@@ -1,15 +1,27 @@
-import { CustomElement } from '../../lib/main.js';
+import { CustomElement, ValuesOf } from '../../lib/main.js';
 import { TemplateResult } from 'lit';
-import { BadgeVariant } from './badge.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-badge': OdxBadge;
     }
 }
+export type BadgeVariant = ValuesOf<typeof BadgeVariant>;
+export declare const BadgeVariant: Pick<{
+    readonly NEUTRAL: "neutral";
+    readonly NEUTRAL_SUBTLE: "neutral-subtle";
+    readonly PRIMARY: "primary";
+    readonly PRIMARY_SUBTLE: "primary-subtle";
+    readonly ACCENT: "accent";
+    readonly ACCENT_SUBTLE: "accent-subtle";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly DANGER_SUBTLE: "danger-subtle";
+    readonly GHOST: "ghost";
+}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
 export declare class OdxBadge extends CustomElement {
-    compact?: boolean;
-    pulse?: boolean;
-    variant?: BadgeVariant;
+    compact: boolean;
+    pulse: boolean;
+    variant: BadgeVariant;
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=badge.d.ts.map

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

@@ -1,6 +1,6 @@
 import { CustomElement } from '../../lib/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
-interface BreadcrumbsItem {
+export interface BreadcrumbsItem {
     href: string;
     label: string;
 }
@@ -12,12 +12,9 @@ declare global {
 export declare class OdxBreadcrumbs extends CustomElement {
     #private;
     private itemElements;
-    private renderedItemElements;
     max: number;
-    items?: BreadcrumbsItem[] | null;
+    items?: BreadcrumbsItem[];
     protected firstUpdated(props: PropertyValues<this>): void;
     protected render(): TemplateResult;
     protected updated(props: PropertyValues<this>): void;
 }
-export {};
-//# sourceMappingURL=breadcrumbs.d.ts.map

package/dist/components/{breadcrumbs → breadcrumbs-item}/breadcrumbs-item.d.ts

@@ -1,6 +1,6 @@
 import { CustomElement } from '../../lib/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
-import { OdxLink } from '../link/index.js';
+import { OdxLink } from '../link/link.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-breadcrumbs-item': OdxBreadcrumbsItem;
@@ -8,10 +8,7 @@ declare global {
 }
 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/button/button.d.ts

@@ -1,29 +1,36 @@
-import { InteractiveElement } from '../../cdk/main.js';
-import { TemplateResult } from 'lit';
-import { ButtonBadgeAlign, ButtonSize, ButtonVariant } from './button.models.js';
+import { InteractiveElement, ValuesOf } from '../../lib/main.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-button': OdxButton;
     }
 }
-declare const OdxButton_base: import('../../lib/main.js').Constructor<import('../../lib/main.js').HasLoadingState> & typeof InteractiveElement;
-/**
- * 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
- * other buttons.
- * @summary Triggers actions on the page or in the background
- * @csspart button - Internal button element
- * @csspart prefix - Container for the prefix slot
- * @csspart suffix - Container for the suffix slot
- * @slot prefix - Contains the button's icon or state indicator, e.g. a spinner.
- * @slot suffix - Contains the button's icon or state indicator, e.g. a spinner.
- * @slot - Contains button text
- */
-export declare class OdxButton extends OdxButton_base {
+export type ButtonSize = ValuesOf<typeof ButtonSize>;
+export declare const ButtonSize: Pick<{
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "xxl";
+}, "XS" | "SM" | "MD" | "LG">;
+export type ButtonVariant = ValuesOf<typeof ButtonVariant>;
+export declare const ButtonVariant: Pick<{
+    readonly NEUTRAL: "neutral";
+    readonly NEUTRAL_SUBTLE: "neutral-subtle";
+    readonly PRIMARY: "primary";
+    readonly PRIMARY_SUBTLE: "primary-subtle";
+    readonly ACCENT: "accent";
+    readonly ACCENT_SUBTLE: "accent-subtle";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly DANGER_SUBTLE: "danger-subtle";
+    readonly GHOST: "ghost";
+}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "DANGER" | "GHOST">;
+export declare class OdxButton extends InteractiveElement {
     #private;
+    /** @internal */
     static readonly formAssociated = true;
-    alignBadge?: ButtonBadgeAlign;
-    block: boolean;
     /**
      * The type of the button.
      */
@@ -31,13 +38,11 @@ export declare class OdxButton extends OdxButton_base {
     /**
      * The size of the button.
      */
-    size?: ButtonSize;
+    size: ButtonSize;
     /**
      * The variant of the button.
      */
-    variant?: ButtonVariant;
+    variant: ButtonVariant;
     constructor();
-    protected render(): TemplateResult;
+    connectedCallback(): void;
 }
-export {};
-//# sourceMappingURL=button.d.ts.map

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

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

package/dist/components/card/card.d.ts

@@ -1,5 +1,5 @@
 import { CanBeDisabled, CustomElement } from '../../lib/main.js';
-import { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-card': OdxCard;
@@ -7,7 +7,8 @@ declare global {
 }
 declare const OdxCard_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
 export declare class OdxCard extends OdxCard_base {
+    interactive: boolean;
+    protected updated(_changedProperties: PropertyValues): void;
     protected render(): TemplateResult;
 }
 export {};
-//# sourceMappingURL=card.d.ts.map

package/dist/components/checkbox/checkbox.d.ts

@@ -1,5 +1,5 @@
-import { CheckboxFormControl } from '../../cdk/main.js';
-import { PropertyValueMap, TemplateResult } from 'lit';
+import { CheckboxFormControl } from '../../lib/main.js';
+import { PropertyValues, TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-checkbox': OdxCheckbox;
@@ -8,7 +8,6 @@ declare global {
 export declare class OdxCheckbox extends CheckboxFormControl {
     indeterminate: boolean;
     protected render(): TemplateResult;
-    protected willUpdate(props: PropertyValueMap<this>): void;
+    protected willUpdate(props: PropertyValues<this>): void;
     toggle(state?: boolean, dispatchEvent?: boolean): void;
 }
-//# sourceMappingURL=checkbox.d.ts.map

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

@@ -1,14 +1,18 @@
-import { CheckboxGroupFormControl } from '../../cdk/main.js';
+import { ValuesOf, CheckboxGroupFormControl } from '../../lib/main.js';
 import { TemplateResult } from 'lit';
-import { CheckboxGroupVariant } from './checkbox-group.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-checkbox-group': OdxCheckboxGroup;
     }
 }
+export type CheckboxGroupLayout = ValuesOf<typeof CheckboxGroupLayout>;
+export declare const CheckboxGroupLayout: {
+    readonly VERTICAL: "vertical";
+    readonly HORIZONTAL: "horizontal";
+    readonly LIST: "list";
+};
 export declare class OdxCheckboxGroup extends CheckboxGroupFormControl {
     #private;
-    variant?: CheckboxGroupVariant;
+    layout: CheckboxGroupLayout;
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=checkbox-group.d.ts.map

package/dist/components/chip/chip.d.ts

@@ -1,22 +1,34 @@
-import { CanBeDisabled, CustomElement } from '../../lib/main.js';
+import { CanBeDisabled, CustomElement, ValuesOf } from '../../lib/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
-import { ChipVariant } from './chip.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-chip': OdxChip;
     }
 }
+export type ChipVariant = ValuesOf<typeof ChipVariant>;
+export declare const ChipVariant: Pick<{
+    readonly NEUTRAL: "neutral";
+    readonly NEUTRAL_SUBTLE: "neutral-subtle";
+    readonly PRIMARY: "primary";
+    readonly PRIMARY_SUBTLE: "primary-subtle";
+    readonly ACCENT: "accent";
+    readonly ACCENT_SUBTLE: "accent-subtle";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly DANGER_SUBTLE: "danger-subtle";
+    readonly GHOST: "ghost";
+}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
 declare const OdxChip_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
 export declare class OdxChip extends OdxChip_base {
     #private;
     protected actionElement?: HTMLElement;
     removable: boolean;
     interactive: boolean;
-    variant?: ChipVariant;
+    variant: ChipVariant;
     protected render(): TemplateResult;
     protected renderAction(): TemplateResult;
     protected willUpdate(props: PropertyValues<this>): void;
     protected updated(props: PropertyValues<this>): void;
 }
 export {};
-//# sourceMappingURL=chip.d.ts.map

package/dist/components/combobox/autocomplete.d.ts

@@ -0,0 +1,24 @@
+import { ActiveDescendantsController, FormControl, OptionControl } from '../../lib/main.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { OdxDropdown } from '../dropdown/dropdown.js';
+import { OdxHighlight } from '../highlight/highlight.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-autocomplete': OdxAutocomplete;
+    }
+}
+export declare class OdxAutocomplete extends FormControl {
+    #private;
+    /** @internal */
+    static shadowRootOptions: ShadowRootInit;
+    protected readonly activeDescendants: ActiveDescendantsController<OptionControl>;
+    protected options: OptionControl[];
+    protected readonly highlight: OdxHighlight;
+    protected readonly dropdown: OdxDropdown;
+    minQueryLength: number;
+    searchFn: (option: OptionControl, query?: string) => boolean;
+    get control(): HTMLInputElement | undefined;
+    get controlValue(): string;
+    protected firstUpdated(props: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+}

package/dist/components/content-box/content-box.d.ts

@@ -8,4 +8,3 @@ declare global {
 export declare class OdxContentBox extends CustomElement {
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=content-box.d.ts.map

package/dist/components/dropdown/dropdown.d.ts

@@ -1,28 +1,24 @@
-import { CanBeDisabled } from '../../lib/main.js';
-import { OdxPopover, PopoverHost, PopoverPlacementOptions } from '../../cdk/main.js';
+import { PopoverPlacementOptions, ValuesOf } from '../../lib/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
-import { DropdownPlacement } from './dropdown.models.js';
+import { PopoverHost } from '../popover/popover-host.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-dropdown': OdxDropdown;
     }
 }
-declare const OdxDropdown_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof PopoverHost;
-export declare class OdxDropdown extends OdxDropdown_base {
+export type DropdownPlacement = ValuesOf<typeof DropdownPlacement>;
+export declare const DropdownPlacement: {
+    readonly TOP: "top";
+    readonly BOTTOM: "bottom";
+};
+export declare class OdxDropdown extends PopoverHost {
     #private;
-    popoverElement: OdxPopover;
     matchReferenceWidth: boolean;
     placement: DropdownPlacement;
     get options(): PopoverPlacementOptions;
     connectedCallback(): void;
-    mountPopover(referenceElement?: HTMLElement | null): void;
+    mountPopover(referenceElement: HTMLElement | null): void;
     unmountPopover(referenceElement: HTMLElement): void;
-    onBeforePopoverShow(): void;
-    onPopoverShow(): void;
-    onBeforePopoverHide(): void;
-    onPopoverHide(): void;
     protected render(): TemplateResult;
     protected willUpdate(props: PropertyValues<this>): void;
 }
-export {};
-//# sourceMappingURL=dropdown.d.ts.map