@odx/foundation 1.0.0-beta.22 → 1.0.0-beta.220

package/README.md

@@ -1,36 +1,36 @@
 
 # @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 
 ```
 
-> 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 +43,60 @@ 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 <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://odx.draeger.com" target="_blank" rel="noopener">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/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,45 @@
-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 ACCENT_GHOST: "accent-ghost";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly DANGER_GHOST: "danger-ghost";
+    readonly GHOST: "ghost";
+}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "GHOST">;
 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,38 @@
-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 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 ACCENT_GHOST: "accent-ghost";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly DANGER_GHOST: "danger-ghost";
+    readonly GHOST: "ghost";
+}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "ACCENT_GHOST" | "SUCCESS" | "WARNING" | "DANGER" | "DANGER_GHOST" | "GHOST">;
 export declare class OdxBadge extends CustomElement {
-    compact?: boolean;
-    pulse?: boolean;
-    variant?: BadgeVariant;
+    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,7 @@
-import { CustomElement } from '../../lib/main.js';
+import { CustomElement } from '../../main.js';
+import { ValuesOf } from '../../utils/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
-interface BreadcrumbsItem {
+export interface BreadcrumbsItem {
     href: string;
     label: string;
 }
@@ -9,15 +10,25 @@ declare global {
         'odx-breadcrumbs': OdxBreadcrumbs;
     }
 }
+export type BreadcrumbsVariant = ValuesOf<typeof BreadcrumbsVariant>;
+export declare const BreadcrumbsVariant: Pick<{
+    readonly NEUTRAL: "neutral";
+    readonly NEUTRAL_SUBTLE: "neutral-subtle";
+    readonly PRIMARY: "primary";
+    readonly ACCENT: "accent";
+    readonly ACCENT_GHOST: "accent-ghost";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly DANGER_GHOST: "danger-ghost";
+    readonly GHOST: "ghost";
+}, "PRIMARY" | "GHOST">;
 export declare class OdxBreadcrumbs extends CustomElement {
     #private;
-    private itemElements;
-    private renderedItemElements;
     max: number;
-    items?: BreadcrumbsItem[] | null;
-    protected firstUpdated(props: PropertyValues<this>): void;
+    variant: BreadcrumbsVariant;
+    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,47 @@
-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 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 ACCENT_GHOST: "accent-ghost";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly DANGER_GHOST: "danger-ghost";
+    readonly GHOST: "ghost";
+}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "WARNING" | "DANGER" | "DANGER_GHOST" | "GHOST">;
+export declare class OdxButton extends LinkControlElement {
     #private;
     static readonly formAssociated = true;
-    alignBadge?: ButtonBadgeAlign;
-    block: boolean;
+    active: boolean;
+    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,17 @@
-import { CanBeDisabled, CustomElement } from '../../lib/main.js';
+import { ControlSize, CustomElement } from '../../main.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { 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 {
+    size: ControlSize;
+    variant?: ButtonVariant;
     vertical: boolean;
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+    protected updated(props: PropertyValues<this>): void;
 }
-export {};
 //# sourceMappingURL=button-group.d.ts.map