@odx/foundation 1.0.0-beta.24 → 1.0.0-beta.240

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,22 @@
+import { BreakpointConfig } from './models.js';
+export declare const defaultBreakpoints: {
+    readonly mobile: {
+        readonly id: "mobile";
+        readonly min: 0;
+        readonly max: 575.98;
+    };
+    readonly tablet: {
+        readonly id: "tablet";
+        readonly min: 576;
+        readonly max: 991.98;
+    };
+    readonly desktop: {
+        readonly id: "desktop";
+        readonly min: 992;
+        readonly max: 1199.98;
+    };
+};
+export default function setupBreakpoints(breakpointsConfig?: BreakpointConfig[]): () => void;
+export type * from './models.js';
+export * from './utils.js';
+//# sourceMappingURL=main.d.ts.map

package/dist/breakpoints/models.d.ts

@@ -0,0 +1,15 @@
+export interface BreakpointConfig {
+    id: string;
+    min: number;
+    max: number;
+    customQuery?: string;
+}
+export type BreakpointOperator = '<' | '<=' | '>=' | '>';
+export type Breakpoint = BreakpointConfig & {
+    query: string;
+    operator?: BreakpointOperator;
+};
+export type BreakpointChange = Breakpoint & {
+    matches: boolean;
+};
+//# sourceMappingURL=models.d.ts.map

package/dist/breakpoints/utils.d.ts

@@ -0,0 +1,13 @@
+import { Signal } from '../signals/main.js';
+import { Breakpoint, BreakpointChange, BreakpointConfig, BreakpointOperator } from './models.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 const breakpointActiveDirective: import('../utils/main.js').BooleanAttributeDirective<"odx-breakpoint-active">;
+export declare function buildBreakpoint(breakpoint: BreakpointConfig, operator?: BreakpointOperator): Breakpoint;
+export declare function generateBreakpointStyles(breakpoints: Breakpoint[]): string;
+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: BreakpointChange) => void): () => void;
+//# sourceMappingURL=utils.d.ts.map

package/dist/breakpoints.js

@@ -0,0 +1,118 @@
+import { signal, effect } from '@odx/foundation/signals';
+import { stringAttributeDirective, booleanAttributeDirective, observeMedia } from '@odx/foundation/utils';
+
+const operators = ["<", "<=", ">=", ">"];
+const breakpointDirective = stringAttributeDirective("odx-breakpoint");
+const breakpointClassDirective = stringAttributeDirective("odx-breakpoint-class");
+const breakpointActiveDirective = booleanAttributeDirective({
+  name: "odx-breakpoint-active",
+  onUpdate: (directive, value) => {
+    if (!breakpointClassDirective.applied(directive)) return;
+    const classNames = breakpointClassDirective.value(directive)?.split(" ") ?? [];
+    for (const className of classNames) {
+      directive.classList.toggle(className, value);
+    }
+  }
+});
+function buildBreakpoint(breakpoint, operator) {
+  const id = operator ? `${operator}${breakpoint.id}` : breakpoint.id;
+  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 generateBreakpointStyles(breakpoints) {
+  const selectors = breakpoints.map((breakpoint) => `[${breakpointDirective.attribute}="${breakpoint.id}"]`);
+  const excludedSelectors = [breakpointActiveDirective.selector, breakpointClassDirective.selector].map((selector) => `:not(${selector})`);
+  return `:where(${selectors.join(", ")})${excludedSelectors.join("")} { display: none !important; }`;
+}
+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?.();
+      },
+      watched() {
+        unobserveMedia = observeMedia(breakpoint.query, ({ matches }) => {
+          this.value = { ...breakpoint, matches };
+        });
+      }
+    }
+  );
+}
+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;
+      update?.(directive, change);
+      breakpointActiveDirective.toggle(directive, change.matches);
+      breakpointCache.set(directive, change.matches);
+    }
+  };
+}
+
+const defaultBreakpoints = {
+  mobile: { id: "mobile", min: 0, max: 575.98 },
+  tablet: { id: "tablet", min: 576, max: 991.98 },
+  desktop: { id: "desktop", min: 992, max: 1199.98 }
+};
+function setupBreakpoints(breakpointsConfig = []) {
+  const breakpoints = expandBreakpoints(...Object.values(defaultBreakpoints), ...breakpointsConfig);
+  const directiveUpdater = createBreakpointDirectiveUpdater(breakpoints);
+  let mutationObserver;
+  let unobserveBreakpoints = () => {
+  };
+  let stylesElement;
+  function initBreakpoints() {
+    destroyBreakpoints();
+    stylesElement ??= document.createElement("style");
+    stylesElement.id = "odx-breakpoint-styles";
+    stylesElement.textContent = generateBreakpointStyles(breakpoints);
+    document.head.appendChild(stylesElement);
+    mutationObserver = new MutationObserver(directiveUpdater);
+    mutationObserver.observe(document.documentElement, {
+      attributes: true,
+      subtree: true,
+      childList: true,
+      attributeFilter: [breakpointDirective.attribute]
+    });
+    unobserveBreakpoints = effect(directiveUpdater);
+  }
+  function destroyBreakpoints() {
+    stylesElement && document.head.removeChild(stylesElement);
+    unobserveBreakpoints();
+    mutationObserver?.disconnect();
+    globalThis.removeEventListener("DOMContentLoaded", initBreakpoints);
+  }
+  globalThis.addEventListener("DOMContentLoaded", initBreakpoints);
+  return destroyBreakpoints;
+}
+
+export { breakpointActiveDirective, breakpointClassDirective, breakpointDirective, buildBreakpoint, createBreakpointDirectiveUpdater, setupBreakpoints as default, defaultBreakpoints, expandBreakpoints, generateBreakpointStyles, observeBreakpoint };

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,11 +1,18 @@
-import { CustomElement, EnumString } from '../../lib/main.js';
+import { CustomElement } from '../../main.js';
+import { ValuesOf } from '../../utils/main.js';
 import { TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-area-header': OdxAreaHeader;
     }
 }
-export type AreaHeaderSize = EnumString<typeof AreaHeaderSize>;
+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";
@@ -13,9 +20,11 @@ export declare const AreaHeaderSize: Pick<{
     readonly LG: "lg";
     readonly XL: "xl";
     readonly XXL: "xxl";
-}, "SM" | "MD" | "LG" | "XL">;
+}, "XS" | "SM" | "MD" | "LG" | "XL">;
 export declare class OdxAreaHeader extends CustomElement {
-    size?: AreaHeaderSize;
+    #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,15 +1,17 @@
-import { CustomElement, EnumString } from '../../lib/main.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 = EnumString<typeof AvatarShape>;
+export type AvatarShape = ValuesOf<typeof AvatarShape>;
 export declare const AvatarShape: Pick<{
     readonly CIRCLE: "circle";
     readonly RECTANGLE: "rectangle";
 }, "CIRCLE" | "RECTANGLE">;
-export type AvatarSize = EnumString<typeof AvatarSize>;
+export type AvatarSize = ValuesOf<typeof AvatarSize>;
 export declare const AvatarSize: Pick<{
     readonly XS: "xs";
     readonly SM: "sm";
@@ -17,20 +19,27 @@ export declare const AvatarSize: Pick<{
     readonly LG: "lg";
     readonly XL: "xl";
     readonly XXL: "xxl";
-}, "SM" | "MD" | "LG" | "XL">;
-export type AvatarVariant = EnumString<typeof AvatarVariant>;
+}, "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">;
+}, "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,24 +1,41 @@
-import { CustomElement, EnumString } from '../../lib/main.js';
+import { CustomElement } from '../../main.js';
+import { ValuesOf } from '../../utils/main.js';
 import { TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-badge': OdxBadge;
     }
 }
-export type BadgeVariant = EnumString<typeof BadgeVariant>;
+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" | "SUCCESS" | "WARNING" | "DANGER">;
+}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "ACCENT_GHOST" | "SUCCESS" | "WARNING" | "DANGER" | "DANGER_GHOST">;
 export declare class OdxBadge extends CustomElement {
-    compact?: boolean;
-    pulse?: boolean;
-    variant?: BadgeVariant;
+    #private;
+    animated: boolean;
+    compact: boolean;
+    contrast: boolean;
+    loading: boolean;
+    size: BadgeSize;
+    variant: BadgeVariant;
     protected render(): TemplateResult;
 }
 //# sourceMappingURL=badge.d.ts.map