@odx/foundation 1.0.0-beta.270 → 1.0.0-beta.272

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## 1.0.0-beta.272
+
+### Major Changes
+
+- Move component behavior utilities and controllers into `@odx/foundation/components` entry point
+- Remove entry point `@odx/foundation/utils`, use root entry point `@odx/foundation` to import utilities instead
+- Remove `type` property from `odx-loading-spinner`
+
+### Minor Changes
+
+- Add `odx-loading-dots` component
+- Remove obsolete backdrop element from `odx-loading-overlay`
+- Add padding to `odx-loading-spinner` to align spinner size with icon sizes
+
+### Bug Fixes
+
+- Align `odx-accordion-item` indicator size with design spec for size `lg`
+- Align `odx-avatar` with design spec
+- Remove `min-width` from `odx-area-header` side slots
+- Use touch-target of `36px` due to overflow issues
+
+## 1.0.0-beta.271
+
+### Bug Fixes
+
+- Fix `odx-area-header` base slot positioning and overflow issues
+- Fix `odx-loading-overlay` not hiding correctly when `loading` is set to `false`
+
+
 ## 1.0.0-beta.270
 
 ### Major Changes
@@ -157,7 +186,7 @@
 
 ### Minor Changes
 
-- Update selected options label for multiselection in `odx-select` component to match design spec
+- Update selected options label for multi selection in `odx-select` component to match design spec
 
 ### Bug Fixes
 

package/dist/{lib → components/abstract}/behaviors/can-be-disabled.d.ts

@@ -1,5 +1,5 @@
-import { Constructor } from '../../utils/main.js';
-import { CustomElement } from '../custom-element.js';
+import { Constructor } from '../../../main.js';
+import { CustomElement } from '../../custom-element.js';
 export interface CanBeDisabled extends CustomElement {
     disabled: boolean;
     focusDisabled: boolean;

package/dist/{lib → components/abstract}/behaviors/checkbox-control.d.ts

@@ -1,8 +1,8 @@
-import { Constructor } from '../../utils/main.js';
-import { CustomElement } from '../custom-element.js';
+import { Constructor } from '../../../main.js';
+import { CustomElement } from '../../custom-element.js';
 import { FormAssociated } from './form-associated.js';
 type AriaCheckboxRoles = 'checkbox' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'radio' | 'switch';
-export declare const checkboxControlDirective: import('../../utils/main.js').BooleanAttributeDirective<"data-odx-checkbox-control">;
+export declare const checkboxControlDirective: import('../../../main.js').BooleanAttributeDirective<"data-odx-checkbox-control">;
 export interface CheckboxControl extends FormAssociated {
     controlled: boolean;
     checked: boolean;

package/dist/{lib → components/abstract}/behaviors/checkbox-group-control.d.ts

@@ -1,8 +1,8 @@
 import { PropertyValues } from 'lit';
-import { CustomElement } from '../custom-element.js';
+import { CustomElement } from '../../custom-element.js';
 import { CheckboxControl } from './checkbox-control.js';
 import { FormAssociated } from './form-associated.js';
-declare const CheckboxGroupControl_base: import('../../utils/main.js').Constructor<FormAssociated> & typeof CustomElement;
+declare const CheckboxGroupControl_base: import('../../../main.js').Constructor<FormAssociated> & typeof CustomElement;
 export declare class CheckboxGroupControl extends CheckboxGroupControl_base {
     #private;
     private selection;

package/dist/{lib → components/abstract}/behaviors/form-associated.d.ts

@@ -1,5 +1,5 @@
-import { Constructor } from '../../utils/main.js';
-import { CustomElement } from '../custom-element.js';
+import { Constructor } from '../../../main.js';
+import { CustomElement } from '../../custom-element.js';
 import { CanBeDisabled } from './can-be-disabled.js';
 export interface FormAssociated extends CanBeDisabled, CustomElement {
     name: string;

package/dist/{lib → components/abstract}/behaviors/with-presets.d.ts

@@ -1,6 +1,6 @@
-import { Constructor } from '../../utils/main.js';
+import { Constructor } from '../../../main.js';
 import { TemplateResult } from 'lit';
-import { CustomElement } from '../custom-element.js';
+import { CustomElement } from '../../custom-element.js';
 export type PresetsConfig<T extends CustomElement> = Record<string, Partial<T> & {
     render?: () => TemplateResult;
 }>;

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

@@ -1,13 +1,10 @@
 import { CSSResultGroup, TemplateResult } from 'lit';
 import { ControlElement } from './control-element.js';
 /**
- * @csspart base
- * @csspart spinner
+ * Base element for button control components
+ *
  * @csspart label
  *
- * @slot prefix - Prefix slot
- * @slot suffix - Suffix slot
- * @slot - Default slot
  */
 export declare class ButtonControlElement extends ControlElement {
     static readonly styles: CSSResultGroup;

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

@@ -1,18 +1,18 @@
-import { CanBeDisabled, CustomElement } from '../../main.js';
-import { ValuesOf } from '../../utils/main.js';
 import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-export declare const controlDirective: import('../../utils/main.js').BooleanAttributeDirective<"data-odx-control">;
+import { CustomElement } from '../custom-element.js';
+import { CanBeDisabled } from './behaviors/can-be-disabled.js';
+import { ValuesOf } from './models.js';
+export declare const controlDirective: import('../../main.js').BooleanAttributeDirective<"data-odx-control">;
 export type ControlSize = ValuesOf<typeof ControlSize>;
-export declare const ControlSize: Pick<{
-    readonly XS: "xs";
+export declare const ControlSize: {
     readonly SM: "sm";
     readonly MD: "md";
     readonly LG: "lg";
-    readonly XL: "xl";
-    readonly XXL: "xxl";
-}, "SM" | "MD" | "LG">;
-declare const ControlElement_base: import('../../utils/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
+};
+declare const ControlElement_base: import('../../main.js').Constructor<CanBeDisabled> & typeof CustomElement;
 /**
+ * Base element for control components
+ *
  * @csspart label
  *
  * @slot prefix - Prefix slot

package/dist/{lib → components/abstract}/controllers/active-descendants-controller.d.ts

@@ -1,5 +1,5 @@
 import { ReactiveController, ReactiveElement } from 'lit';
-export declare const activeDirective: import('../../utils/main.js').BooleanAttributeDirective<"data-odx-active">;
+export declare const activeDirective: import('../../../main.js').BooleanAttributeDirective<"data-odx-active">;
 export interface ActiveDescendant extends HTMLElement {
     canActivate(): boolean;
     isActive(): boolean;

package/dist/{lib → components/abstract}/controllers/drag.controller.d.ts

@@ -17,7 +17,7 @@ export interface IsDraggable extends LitElement {
     afterDragEnd?(event: DragEvent): void;
     getDistance?(container: HTMLElement, position: DragPosition): number;
 }
-export declare const dragActiveDirective: import('../../utils/main.js').BooleanAttributeDirective<"data-odx-drag-active">;
+export declare const dragActiveDirective: import('../../../main.js').BooleanAttributeDirective<"data-odx-drag-active">;
 export interface DragControllerOptions<T extends IsDraggable = IsDraggable> {
     getDraggableElements: () => T[];
     getContainer?: () => HTMLElement;

package/dist/components/abstract/controllers/expandable-controller.d.ts

@@ -0,0 +1,28 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+import { CustomElement } from '../../custom-element.js';
+export interface CanBeExpanded extends CustomElement {
+    expandControl?: HTMLElement;
+    expanded: boolean;
+    isExpandable(): boolean;
+    toggle(state?: boolean, emitEvent?: boolean): void;
+}
+export interface ExpandableItemManagerHost<T extends CanBeExpanded = CanBeExpanded> extends ReactiveElement {
+    multiple?: boolean;
+    getItems(): T[];
+    toggleAll(state?: boolean, emitEvent?: boolean): void;
+}
+export declare class CollapseEvent extends CustomEvent<boolean> {
+    static readonly eventName = "collapse";
+    constructor(eventInit?: CustomEventInit<boolean>);
+}
+export declare class ExpandEvent extends CustomEvent<boolean> {
+    static readonly eventName = "expand";
+    constructor(eventInit?: CustomEventInit<boolean>);
+}
+export declare function toggleExpandableItem(target: CanBeExpanded, state?: boolean, emitEvent?: boolean): void;
+export declare class ExpandableItemManager<T extends CanBeExpanded = CanBeExpanded> implements ReactiveController {
+    #private;
+    constructor(host: ExpandableItemManagerHost<T>);
+    hostConnected?(): void;
+}
+//# sourceMappingURL=expandable-controller.d.ts.map

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

@@ -1,25 +1,17 @@
-import { CanBeDisabled, CustomElement } from '../../main.js';
-import { ValuesOf } from '../../utils/main.js';
 import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-export declare const dialogDirective: import('../../utils/main.js').BooleanAttributeDirective<"odx-dialog">;
-export type DialogSize = ValuesOf<typeof DialogSize>;
-export declare const DialogSize: Pick<{
-    readonly XS: "xs";
-    readonly SM: "sm";
-    readonly MD: "md";
-    readonly LG: "lg";
-    readonly XL: "xl";
-    readonly XXL: "xxl";
-}, "SM" | "MD" | "LG">;
+import { CustomElement } from '../custom-element.js';
+import { CanBeDisabled } from './behaviors/can-be-disabled.js';
+import { ValuesOf } from './models.js';
+export declare const dialogDirective: import('../../main.js').BooleanAttributeDirective<"odx-dialog">;
 export type DialogLayer = ValuesOf<typeof DialogLayer>;
 export declare const DialogLayer: {
     SCREEN: string;
     PAGE: string;
     CONTAINER: string;
 };
-export declare const DialogShowCommand: import('../../utils/main.js').CommandDirective<"odx-dialog-show">;
-export declare const DialogDismissCommand: import('../../utils/main.js').CommandDirective<"odx-dialog-dismiss">;
-export declare const DialogCloseCommand: import('../../utils/main.js').CommandDirective<"odx-dialog-close">;
+export declare const DialogShowCommand: import('../../main.js').CommandDirective<"odx-dialog-show">;
+export declare const DialogDismissCommand: import('../../main.js').CommandDirective<"odx-dialog-dismiss">;
+export declare const DialogCloseCommand: import('../../main.js').CommandDirective<"odx-dialog-close">;
 export declare class DialogShowEvent extends Event {
     static readonly eventName = "dialog-show";
     constructor(eventInit?: EventInit);
@@ -32,7 +24,17 @@ export declare class DialogCloseEvent extends CustomEvent<{
         returnValue?: string;
     }>);
 }
-declare const DialogElement_base: import('../../utils/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
+declare const DialogElement_base: import('../../main.js').Constructor<CanBeDisabled> & typeof CustomElement;
+/**
+ * Base element for dialog components
+ *
+ * @csspart base
+ *
+ * @slot - Default slot
+ *
+ * @event {DialogShowEvent} dialog-show - Emitted when the dialog is requested to be shown. Can be canceled to prevent showing
+ * @event {DialogCloseEvent} dialog-close - Emitted when the dialog is requested to be closed. Can be canceled to prevent closing
+ */
 export declare class DialogElement extends DialogElement_base {
     #private;
     static readonly styles: CSSResultGroup;
@@ -40,7 +42,6 @@ export declare class DialogElement extends DialogElement_base {
     dismissible: boolean;
     layer: DialogLayer;
     open: boolean;
-    size: DialogSize;
     get canShow(): boolean;
     get canClose(): boolean;
     get canDismiss(): boolean;

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

@@ -1,12 +1,13 @@
-import { Alignment, FormAssociated } from '../../main.js';
 import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { FormAssociated } from './behaviors/form-associated.js';
 import { ControlElement } from './control-element.js';
-declare const InputControlElement_base: import('../../utils/main.js').Constructor<FormAssociated> & typeof ControlElement;
+import { Alignment } from './models.js';
+declare const InputControlElement_base: import('../../main.js').Constructor<FormAssociated> & typeof ControlElement;
 /**
+ * Base element for input control components
  *
- * @slot prefix - Prefix slot
- * @slot suffix - Suffix slot
- * @slot - Default slot
+ * @csspart input
+ * @csspart unit
  */
 export declare class InputControlElement extends InputControlElement_base {
     #private;

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

@@ -1,6 +1,8 @@
 import { TemplateResult } from 'lit';
 import { ButtonControlElement } from './button-control-element.js';
 /**
+ * Base element for link control components
+ *
  * @csspart base
  * @csspart spinner
  * @csspart label

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

@@ -1,8 +1,8 @@
 import { PropertyValues } from 'lit';
-import { CanBeDisabled } from '../../lib/behaviors/can-be-disabled.js';
-import { FormAssociated } from '../../lib/behaviors/form-associated.js';
-import { ActiveDescendant, ActiveDescendantsController } from '../../lib/controllers/active-descendants-controller.js';
-import { CustomElement } from '../../lib/custom-element.js';
+import { CustomElement } from '../custom-element.js';
+import { CanBeDisabled } from './behaviors/can-be-disabled.js';
+import { FormAssociated } from './behaviors/form-associated.js';
+import { ActiveDescendant, ActiveDescendantsController } from './controllers/active-descendants-controller.js';
 export interface OptionControl extends ActiveDescendant, CanBeDisabled {
     label: string;
     type?: 'checkbox';
@@ -10,7 +10,7 @@ export interface OptionControl extends ActiveDescendant, CanBeDisabled {
     selected: boolean;
     value: string;
 }
-declare const ListboxControlElement_base: import('../../utils/main.js').Constructor<FormAssociated> & typeof CustomElement;
+declare const ListboxControlElement_base: import('../../main.js').Constructor<FormAssociated> & typeof CustomElement;
 export declare class ListboxControlElement<Option extends OptionControl = OptionControl> extends ListboxControlElement_base {
     #private;
     protected readonly activeDescendants: ActiveDescendantsController<Option>;

package/dist/components/abstract/models.d.ts

@@ -0,0 +1,21 @@
+export type ValuesOf<T extends object> = T[keyof T];
+export type Alignment = ValuesOf<typeof Alignment>;
+export declare const Alignment: {
+    readonly START: "start";
+    readonly CENTER: "center";
+    readonly END: "end";
+};
+export type Variant = ValuesOf<typeof Variant>;
+export declare const Variant: {
+    readonly NEUTRAL: "neutral";
+    readonly PRIMARY: "primary";
+    readonly ACCENT: "accent";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly ACCENT_GHOST: "accent-ghost";
+    readonly DANGER_GHOST: "danger-ghost";
+    readonly SUBTLE: "subtle";
+    readonly GHOST: "ghost";
+};
+//# sourceMappingURL=models.d.ts.map

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

@@ -1,8 +1,8 @@
-import { CustomElement, ExpandableItemManagerHost } from '../../main.js';
-import { ValuesOf } from '../../utils/main.js';
 import { PropertyValues } from 'lit';
-import { ControlSize } from '../abstract/control-element.js';
-import { OdxAccordionItem } from '../accordion-item/accordion-item.js';
+import { ExpandableItemManagerHost } from '../abstract/controllers/expandable-controller.js';
+import { ValuesOf } from '../abstract/models.js';
+import { AccordionItemSize, OdxAccordionItem } from '../accordion-item/accordion-item.js';
+import { CustomElement } from '../custom-element.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-accordion': OdxAccordion;
@@ -16,21 +16,19 @@ export declare const AccordionIndicatorPlacement: Pick<{
 }, "START" | "END">;
 /**
  * @summary A container for grouping a set of accordion items and panels.
- * @status beta
- * @since 1.0.0
  *
  * @dependencies odx-accordion-item
  *
  * @slot - Default slot for accordion items and panels.
  *
- * @event expand - Emitted when an accordion item is expanded. Can be canceled to prevent expansion.
+ * @event expand - @see {OdxAccordionItem}
  * @event collapse - Emitted when an accordion item is collapsed. Can be canceled to prevent collapse.
  */
 export declare class OdxAccordion extends CustomElement implements ExpandableItemManagerHost<OdxAccordionItem> {
     #private;
     indicatorPlacement: AccordionIndicatorPlacement;
     multiple: boolean;
-    size: ControlSize;
+    size: AccordionItemSize;
     constructor();
     connectedCallback(): void;
     getItems(): OdxAccordionItem[];

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

@@ -1,25 +1,34 @@
-import { CanBeExpanded } from '../../main.js';
 import { PropertyValues, TemplateResult } from 'lit';
 import { ButtonControlElement } from '../abstract/button-control-element.js';
+import { CanBeExpanded } from '../abstract/controllers/expandable-controller.js';
+import { ValuesOf } from '../abstract/models.js';
 import { OdxAccordionPanel } from '../accordion-panel/accordion-panel.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-accordion-item': OdxAccordionItem;
     }
 }
-declare const OdxAccordionItem_base: import('../../utils/main.js').Constructor<CanBeExpanded> & typeof ButtonControlElement;
+export type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
+export declare const AccordionItemSize: Pick<{
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+}, "MD" | "LG">;
 /**
  * @summary An accordion item component that can be expanded or collapsed to show or hide content.
- * @status beta
- * @since 1.0.0
- *
  * @dependencies odx-accordion-panel
+ *
+ * @event expand - Emitted when an accordion item is expanded. Can be canceled to prevent expansion.
+ * @event collapse - Emitted when an accordion item is collapsed. Can be canceled to prevent collapse.
  */
-export declare class OdxAccordionItem extends OdxAccordionItem_base {
+export declare class OdxAccordionItem extends ButtonControlElement implements CanBeExpanded {
+    expanded: boolean;
+    size: AccordionItemSize;
     connectedCallback(): void;
     getPanel(): OdxAccordionPanel | null;
+    isExpandable(): boolean;
+    toggle(state?: boolean, emitEvent?: boolean): void;
     protected renderContent(): TemplateResult;
     protected updated(props: PropertyValues<this>): void;
 }
-export {};
 //# sourceMappingURL=accordion-item.d.ts.map

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

@@ -1,6 +1,6 @@
-import { CustomElement } from '../../main.js';
 import { PropertyValues, TemplateResult } from 'lit';
 import { ControlSize } from '../abstract/control-element.js';
+import { CustomElement } from '../custom-element.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-accordion-panel': OdxAccordionPanel;
@@ -8,9 +8,8 @@ declare global {
 }
 /**
  * @summary A panel component that is used within an accordion to show or hide content.
- * @status beta
- * @since 1.0.0
  *
+ * @slot - Default slot for panel content
  */
 export declare class OdxAccordionPanel extends CustomElement {
     expanded: boolean;

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

@@ -1,6 +1,6 @@
-import { CustomElement } from '../../main.js';
 import { PropertyValues, TemplateResult } from 'lit';
 import { OdxButton } from '../button/button.js';
+import { CustomElement } from '../custom-element.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-action-group': OdxActionGroup;

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

@@ -1,6 +1,6 @@
 import { SignalWatcher } from '@lit-labs/signals';
-import { CustomElement } from '../../main.js';
 import { PropertyValues, TemplateResult } from 'lit';
+import { CustomElement } from '../custom-element.js';
 import { OdxNavigationItem } from '../navigation-item/navigation-item.js';
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,6 +1,6 @@
-import { CustomElement } from '../../main.js';
-import { ValuesOf } from '../../utils/main.js';
 import { TemplateResult } from 'lit';
+import { ValuesOf } from '../abstract/models.js';
+import { CustomElement } from '../custom-element.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-area-footer': OdxAreaFooter;
@@ -13,14 +13,11 @@ export declare const AreaFooterAlignment: Pick<{
     readonly END: "end";
 }, "START" | "CENTER" | "END">;
 export type AreaFooterSize = ValuesOf<typeof AreaFooterSize>;
-export declare const AreaFooterSize: Pick<{
-    readonly XS: "xs";
+export declare const AreaFooterSize: {
     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;

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

@@ -1,20 +1,19 @@
-import { CustomElement } from '../../main.js';
-import { ValuesOf } from '../../utils/main.js';
 import { TemplateResult } from 'lit';
+import { ValuesOf } from '../abstract/models.js';
+import { CustomElement } from '../custom-element.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-area-header': OdxAreaHeader;
     }
 }
 export type AreaHeaderSize = ValuesOf<typeof AreaHeaderSize>;
-export declare const AreaHeaderSize: Pick<{
+export declare const AreaHeaderSize: {
     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 {
     #private;
     static observeSlots: boolean;

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

@@ -1,5 +1,7 @@
-import { ActiveDescendantsController, CustomElement, FormAssociated } from '../../main.js';
 import { PropertyValues, TemplateResult } from 'lit';
+import { FormAssociated } from '../abstract/behaviors/form-associated.js';
+import { ActiveDescendantsController } from '../abstract/controllers/active-descendants-controller.js';
+import { CustomElement } from '../custom-element.js';
 import { OdxDropdown } from '../dropdown/dropdown.js';
 import { OdxHighlight } from '../highlight/highlight.js';
 import { OdxOption } from '../option/option.js';
@@ -8,7 +10,7 @@ declare global {
         'odx-autocomplete': OdxAutocomplete;
     }
 }
-declare const OdxAutocomplete_base: import('../../utils/main.js').Constructor<FormAssociated> & typeof CustomElement;
+declare const OdxAutocomplete_base: import('../../main.js').Constructor<FormAssociated> & typeof CustomElement;
 export declare class OdxAutocomplete extends OdxAutocomplete_base {
     #private;
     static shadowRootOptions: ShadowRootInit;

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

@@ -1,6 +1,6 @@
-import { CustomElement } from '../../main.js';
-import { ValuesOf } from '../../utils/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
+import { ValuesOf } from '../abstract/models.js';
+import { CustomElement } from '../custom-element.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-avatar': OdxAvatar;
@@ -12,14 +12,14 @@ export declare const AvatarShape: {
     readonly RECTANGLE: "rectangle";
 };
 export type AvatarSize = ValuesOf<typeof AvatarSize>;
-export declare const AvatarSize: Pick<{
+export declare const AvatarSize: {
     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";
@@ -35,7 +35,6 @@ export declare const AvatarVariant: Pick<{
 }, "NEUTRAL" | "PRIMARY" | "ACCENT" | "GHOST">;
 export declare class OdxAvatar extends CustomElement {
     interactive: boolean;
-    name: string;
     shape: AvatarShape;
     size: AvatarSize;
     variant: AvatarVariant;

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

@@ -1,20 +1,17 @@
-import { CustomElement } from '../../main.js';
-import { ValuesOf } from '../../utils/main.js';
 import { TemplateResult } from 'lit';
+import { ValuesOf } from '../abstract/models.js';
+import { CustomElement } from '../custom-element.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-badge': OdxBadge;
     }
 }
 export type BadgeSize = ValuesOf<typeof BadgeSize>;
-export declare const BadgeSize: Pick<{
-    readonly XS: "xs";
+export declare const BadgeSize: {
     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";

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

@@ -1,6 +1,6 @@
-import { CustomElement } from '../../main.js';
-import { ValuesOf } from '../../utils/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
+import { ValuesOf } from '../abstract/models.js';
+import { CustomElement } from '../custom-element.js';
 import { OdxLink } from '../link/link.js';
 export interface BreadcrumbsItem {
     href: string;

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

@@ -1,12 +1,12 @@
-import { ValuesOf } from '../../utils/main.js';
 import { TemplateResult } from 'lit';
 import { LinkControlElement } from '../abstract/link-control-element.js';
+import { ValuesOf } from '../abstract/models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-button': OdxButton;
     }
 }
-export declare const buttonDirective: import('../../utils/main.js').BooleanAttributeDirective<"data-odx-button">;
+export declare const buttonDirective: import('../../main.js').BooleanAttributeDirective<"data-odx-button">;
 export type ButtonBadgePlacement = ValuesOf<typeof ButtonBadgePlacement>;
 export declare const ButtonBadgePlacement: Pick<{
     readonly START: "start";

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

@@ -1,7 +1,7 @@
-import { CustomElement } from '../../main.js';
 import { PropertyValues, TemplateResult } from 'lit';
 import { ControlSize } from '../abstract/control-element.js';
 import { ButtonVariant, OdxButton } from '../button/button.js';
+import { CustomElement } from '../custom-element.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-button-group': OdxButtonGroup;

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

@@ -1,6 +1,7 @@
-import { CanBeDisabled, CustomElement } from '../../main.js';
-import { ValuesOf } from '../../utils/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
+import { CanBeDisabled } from '../abstract/behaviors/can-be-disabled.js';
+import { ValuesOf } from '../abstract/models.js';
+import { CustomElement } from '../custom-element.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-card': OdxCard;
@@ -19,7 +20,7 @@ export declare const CardVariant: Pick<{
     readonly SUBTLE: "subtle";
     readonly GHOST: "ghost";
 }, "NEUTRAL" | "GHOST">;
-declare const OdxCard_base: import('../../utils/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
+declare const OdxCard_base: import('../../main.js').Constructor<CanBeDisabled> & typeof CustomElement;
 export declare class OdxCard extends OdxCard_base {
     #private;
     static observeSlots: boolean;