@odx/foundation 1.0.0-beta.21 → 1.0.0-beta.210

package/README.md

@@ -1,23 +1,23 @@
 
 # @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.
 
+### 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 
@@ -43,15 +43,57 @@ 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';
+
+```
+
+#### Native Styles
+
+The `@odx/foundation` package provides native styles that can be used to apply the ODX Design System's visual language to native HTML elements. These styles ensure that your application maintains a consistent look and feel across all components, whether they are custom web components or standard HTML elements.
+
+In order to use the native styles, you need to import the `styles.css` file from the `@odx/foundation` package. This file contains all the necessary CSS rules to style native HTML elements according to the ODX Design System.
+
+```js
+// Load styles (in JS)
+import '@odx/foundation/styles-native'; // JS
 ```
 
+```css
+/* Load styles (in CSS) */
+@import '@odx/foundation/dist/styles-native.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 <odx-link href="https://lit.dev/docs/frameworks/react/" target="_blank" strong>Lit documentation</odx-link> 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>.

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,15 +1,20 @@
-import { CustomElement } from '../../lib/main.js';
-import { OdxAccordionHeader } from './accordion-header.js';
+import { ControlSize, CustomElement, ExpandableItemManagerHost } from '../../main.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { AccordionItemIndicatorPosition, OdxAccordionItem } from '../accordion-item/accordion-item.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-accordion': OdxAccordion;
     }
 }
-export declare class OdxAccordion extends CustomElement {
-    items: OdxAccordionHeader[];
-    controlPosition?: 'start';
+export declare class OdxAccordion extends CustomElement implements ExpandableItemManagerHost<OdxAccordionItem> {
+    #private;
+    indicatorPosition: AccordionItemIndicatorPosition;
     multiple: boolean;
+    size: ControlSize;
     constructor();
-    toggleAll(force?: boolean, emitEvent?: boolean): void;
+    protected render(): TemplateResult | string;
+    getItems(): OdxAccordionItem[];
+    toggleAll(state?: boolean, emitEvent?: boolean): void;
+    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, InteractiveControlElement } from '../../main.js';
+import { ValuesOf } from '../../utils/main.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { OdxAccordionPanel } from '../accordion-panel/accordion-panel.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-accordion-item': OdxAccordionItem;
+    }
+}
+export type AccordionItemIndicatorPosition = ValuesOf<typeof AccordionItemIndicatorPosition>;
+export declare const AccordionItemIndicatorPosition: Pick<{
+    readonly START: "start";
+    readonly CENTER: "center";
+    readonly END: "end";
+}, "START" | "END">;
+declare const OdxAccordionItem_base: import('../../utils/main.js').Constructor<CanBeExpanded> & typeof InteractiveControlElement;
+export declare class OdxAccordionItem extends OdxAccordionItem_base {
+    indicatorPosition: AccordionItemIndicatorPosition;
+    getPanel(): OdxAccordionPanel | null;
+    connectedCallback(): void;
+    protected renderContent(): TemplateResult;
+    protected willUpdate(props: PropertyValues<this>): void;
+}
+export {};
+//# sourceMappingURL=accordion-item.d.ts.map

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

@@ -1,13 +1,14 @@
-import { CustomElement } from '../../lib/main.js';
-import { TemplateResult } from 'lit';
+import { CustomElement } from '../../main.js';
+import { PropertyValues, TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-accordion-panel': OdxAccordionPanel;
     }
 }
 export declare class OdxAccordionPanel extends CustomElement {
-    hidden: boolean;
+    expanded: boolean;
     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,28 @@
+import { OdxIconName } from '@odx/icons';
+import { PropertyValues, TemplateResult } from 'lit';
+import { OdxButton } from '../button/button.js';
+import { OdxTooltip, TooltipPlacement } from '../tooltip/tooltip.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-action-button': OdxActionButton;
+    }
+}
+export declare class OdxActionButton extends OdxButton {
+    #private;
+    protected tooltip?: OdxTooltip;
+    done: boolean;
+    icon: OdxIconName | undefined;
+    label: string;
+    labelPlacement?: TooltipPlacement;
+    statusIcon: OdxIconName;
+    statusMessage: string;
+    statusTimeout: number;
+    statusMessageTimeout: number;
+    replaceContent: boolean;
+    protected firstUpdated(props: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+    protected renderContent(): TemplateResult;
+    protected renderLabel(label: TemplateResult | string): 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/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-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

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

@@ -1,14 +1,30 @@
-import { CustomElement } from '../../lib/main.js';
+import { CustomElement } from '../../main.js';
+import { ValuesOf } from '../../utils/main.js';
 import { TemplateResult } from 'lit';
-import { AreaHeaderSize, AreaHeaderVariant } from './area-header.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-area-header': OdxAreaHeader;
     }
 }
+export type AreaHeaderAlignment = ValuesOf<typeof AreaHeaderAlignment>;
+export declare const AreaHeaderAlignment: Pick<{
+    readonly START: "start";
+    readonly CENTER: "center";
+    readonly END: "end";
+}, "START" | "CENTER" | "END">;
+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";
+}, "XS" | "SM" | "MD" | "LG" | "XL">;
 export declare class OdxAreaHeader extends CustomElement {
-    size?: AreaHeaderSize;
-    variant?: AreaHeaderVariant;
+    #private;
+    alignment: AreaHeaderAlignment;
+    size: AreaHeaderSize;
     protected render(): TemplateResult;
 }
 //# sourceMappingURL=area-header.d.ts.map

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

@@ -0,0 +1,27 @@
+import { ActiveDescendantsController, CustomElement, FormAssociated } from '../../main.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { OdxDropdown } from '../dropdown/dropdown.js';
+import { OdxHighlight } from '../highlight/highlight.js';
+import { OdxOption } from '../option/option.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-autocomplete': OdxAutocomplete;
+    }
+}
+declare const OdxAutocomplete_base: import('../../utils/main.js').Constructor<FormAssociated<string>> & typeof CustomElement;
+export declare class OdxAutocomplete extends OdxAutocomplete_base {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    protected readonly activeDescendants: ActiveDescendantsController<OdxOption>;
+    protected get options(): OdxOption[];
+    protected readonly highlight: OdxHighlight;
+    protected readonly dropdown: OdxDropdown;
+    minQueryLength: number;
+    searchFn: (option: OdxOption, query?: string) => boolean;
+    get control(): HTMLInputElement | undefined;
+    get controlValue(): string;
+    protected firstUpdated(props: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+}
+export {};
+//# sourceMappingURL=autocomplete.d.ts.map

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

@@ -1,13 +1,42 @@
-import { CustomElement } from '../../lib/main.js';
-import { AvatarShape, AvatarSize, AvatarVariant } from './avatar.models.js';
+import { CustomElement } from '../../main.js';
+import { ValuesOf } from '../../utils/main.js';
+import { PropertyValues, TemplateResult } from 'lit';
 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";
+}, "XS" | "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 ACCENT: "accent";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+}, "NEUTRAL" | "PRIMARY" | "ACCENT">;
 export declare class OdxAvatar extends CustomElement {
-    shape?: AvatarShape;
-    size?: AvatarSize;
-    variant?: AvatarVariant;
+    interactive: boolean;
+    name: string;
+    shape: AvatarShape;
+    size: AvatarSize;
+    variant: AvatarVariant;
+    protected willUpdate(props: PropertyValues): void;
+    protected render(): TemplateResult;
 }
 //# sourceMappingURL=avatar.d.ts.map

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

@@ -1,15 +1,42 @@
-import { CustomElement } from '../../lib/main.js';
+import { CustomElement } from '../../main.js';
+import { ValuesOf } from '../../utils/main.js';
 import { TemplateResult } from 'lit';
-import { BadgeVariant } from './badge.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-badge': OdxBadge;
     }
 }
+export type BadgeAppearance = ValuesOf<typeof BadgeAppearance>;
+export declare const BadgeAppearance: Pick<{
+    readonly FILL: "fill";
+    readonly SUBTLE: "subtle";
+    readonly GHOST: "ghost";
+}, "FILL" | "GHOST">;
+export type BadgeSize = ValuesOf<typeof BadgeSize>;
+export declare const BadgeSize: Pick<{
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "xxl";
+}, "SM" | "MD" | "LG">;
+export type BadgeVariant = ValuesOf<typeof BadgeVariant>;
+export declare const BadgeVariant: Pick<{
+    readonly NEUTRAL: "neutral";
+    readonly NEUTRAL_SUBTLE: "neutral-subtle";
+    readonly PRIMARY: "primary";
+    readonly ACCENT: "accent";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
 export declare class OdxBadge extends CustomElement {
-    compact?: boolean;
-    pulse?: boolean;
-    variant?: BadgeVariant;
+    appearance: BadgeAppearance;
+    animated: boolean;
+    compact: boolean;
+    size: BadgeSize;
+    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 { CustomElement } from '../../main.js';
 import { PropertyValues, TemplateResult } from 'lit';
-interface BreadcrumbsItem {
+export interface BreadcrumbsItem {
     href: string;
     label: string;
 }
@@ -11,13 +11,9 @@ declare global {
 }
 export declare class OdxBreadcrumbs extends CustomElement {
     #private;
-    private itemElements;
-    private renderedItemElements;
     max: number;
-    items?: BreadcrumbsItem[] | null;
-    protected firstUpdated(props: PropertyValues<this>): void;
+    connectedCallback(): void;
     protected render(): TemplateResult;
     protected updated(props: PropertyValues<this>): void;
 }
-export {};
 //# sourceMappingURL=breadcrumbs.d.ts.map

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

@@ -1,41 +1,51 @@
-import { InteractiveElement } from '../../cdk/main.js';
+import { LinkControlElement } from '../../main.js';
+import { ValuesOf } from '../../utils/main.js';
 import { TemplateResult } from 'lit';
-import { ButtonBadgeAlign, ButtonSize, ButtonVariant } from './button.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-button': OdxButton;
     }
 }
-/**
- * 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 InteractiveElement {
+export declare const buttonDirective: import('../../utils/main.js').BooleanAttributeDirective<"odx-button">;
+export type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
+export declare const ButtonAppearance: Pick<{
+    readonly FILL: "fill";
+    readonly SUBTLE: "subtle";
+    readonly GHOST: "ghost";
+}, "FILL" | "GHOST">;
+export type ButtonBadgePosition = ValuesOf<typeof ButtonBadgePosition>;
+export declare const ButtonBadgePosition: Pick<{
+    readonly START: "start";
+    readonly CENTER: "center";
+    readonly END: "end";
+}, "START" | "END">;
+export type ButtonVariant = ValuesOf<typeof ButtonVariant>;
+export declare const ButtonVariant: Pick<{
+    readonly NEUTRAL: "neutral";
+    readonly NEUTRAL_SUBTLE: "neutral-subtle";
+    readonly PRIMARY: "primary";
+    readonly ACCENT: "accent";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "WARNING" | "DANGER">;
+export declare class OdxButton extends LinkControlElement {
     #private;
     static readonly formAssociated = true;
-    alignBadge?: ButtonBadgeAlign;
-    block: boolean;
+    active: boolean;
+    appearance: ButtonAppearance;
+    badgePosition: ButtonBadgePosition;
     /**
      * The type of the button.
      */
     type: 'button' | 'submit' | 'reset';
-    /**
-     * The size of the button.
-     */
-    size?: ButtonSize;
     /**
      * The variant of the button.
      */
-    variant?: ButtonVariant;
+    variant: ButtonVariant;
     constructor();
-    protected render(): TemplateResult;
+    isActive(): boolean;
+    connectedCallback(): void;
+    protected renderContent(): TemplateResult;
 }
 //# sourceMappingURL=button.d.ts.map

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

@@ -1,13 +1,18 @@
-import { CanBeDisabled, CustomElement } from '../../lib/main.js';
+import { ControlSize, CustomElement } from '../../main.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { ButtonAppearance, ButtonVariant } from '../button/button.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 {
-    block: boolean;
+export declare class OdxButtonGroup extends CustomElement {
+    appearance?: ButtonAppearance;
+    size: ControlSize;
+    variant?: ButtonVariant;
     vertical: boolean;
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+    protected updated(props: PropertyValues<this>): void;
 }
-export {};
 //# sourceMappingURL=button-group.d.ts.map

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

@@ -1,12 +1,23 @@
-import { CanBeDisabled, CustomElement } from '../../lib/main.js';
-import { TemplateResult } from 'lit';
+import { CanBeDisabled, CustomElement } from '../../main.js';
+import { ValuesOf } from '../../utils/main.js';
+import { PropertyValues, TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-card': OdxCard;
     }
 }
-declare const OdxCard_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
+export type CardAppearance = ValuesOf<typeof CardAppearance>;
+export declare const CardAppearance: Pick<{
+    readonly FILL: "fill";
+    readonly SUBTLE: "subtle";
+    readonly GHOST: "ghost";
+}, "FILL" | "GHOST">;
+declare const OdxCard_base: import('../../utils/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
 export declare class OdxCard extends OdxCard_base {
+    #private;
+    appearance: CardAppearance;
+    interactive: boolean;
+    protected updated(props: PropertyValues<this>): void;
     protected render(): TemplateResult;
 }
 export {};

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

@@ -1,14 +1,14 @@
-import { CheckboxFormControl } from '../../cdk/main.js';
-import { PropertyValueMap, TemplateResult } from 'lit';
+import { CheckboxControl, CustomElement } from '../../main.js';
+import { PropertyValues, TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-checkbox': OdxCheckbox;
     }
 }
-export declare class OdxCheckbox extends CheckboxFormControl {
-    indeterminate: boolean;
+declare const OdxCheckbox_base: import('../../utils/types.js').Constructor<CheckboxControl> & typeof CustomElement;
+export declare class OdxCheckbox extends OdxCheckbox_base {
     protected render(): TemplateResult;
-    protected willUpdate(props: PropertyValueMap<this>): void;
-    toggle(state?: boolean, dispatchEvent?: boolean): void;
+    protected willUpdate(props: PropertyValues<this>): void;
 }
+export {};
 //# sourceMappingURL=checkbox.d.ts.map