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

package/dist/cdk/interactive/interactive-element.d.ts

@@ -13,11 +13,11 @@ declare const InteractiveElement_base: import('../../lib/main.js').Constructor<i
  * @slot suffix - Contains the button's icon or state indicator, e.g. a spinner.
  * @slot - Contains button text
  */
-export declare class InteractiveElement extends InteractiveElement_base implements InteractiveElement {
+export declare class InteractiveElement extends InteractiveElement_base {
     #private;
     static readonly styles: import('lit').CSSResult;
     nativeElement: HTMLButtonElement | HTMLAnchorElement;
-    loaderSlot?: 'prefix' | 'suffix';
+    loaderSlot?: 'prefix' | 'suffix' | 'default';
     lineClamp: 1 | 2;
     protected render(): TemplateResult;
     protected renderContent(withSpinner?: boolean): TemplateResult;

package/dist/cdk/popover/popover.models.d.ts

@@ -1,4 +1,5 @@
-export type PopoverPlacement = (typeof PopoverPlacement)[keyof typeof PopoverPlacement];
+import { EnumString } from '../../lib/main.js';
+export type PopoverPlacement = EnumString<typeof PopoverPlacement>;
 export declare const PopoverPlacement: {
     readonly TOP: "top";
     readonly TOP_START: "top-start";
@@ -24,7 +25,7 @@ export interface PopoverPlacementOptions {
     outerPadding: number;
 }
 export declare function PopoverPlacementOptions(options?: Partial<PopoverPlacementOptions>): PopoverPlacementOptions;
-export type PopoverSide = (typeof PopoverSide)[keyof typeof PopoverSide];
+export type PopoverSide = EnumString<typeof PopoverSide>;
 export declare const PopoverSide: {
     readonly TOP: "top";
     readonly RIGHT: "right";

package/dist/cdk.js

@@ -1,7 +1,7 @@
 import { FormControl, CustomElement, getKeyboardEventInfo, toAriaBooleanAttribute, CanBeHighlighted, CanBeDisabled, getUniqueId, getElementFromEvent, ActiveDescendantsController, dedupeMixin, optionalAttr, requestUpdateOnAriaChange, WithLoadingState, getAssignedElements, toPx, waitForAnimations, findClosestDocument, createMutationObserver, customElement } from '@odx/foundation';
 import { isServer, html, unsafeCSS } from 'lit';
 import { property, queryAssignedElements, query, state } from 'lit/decorators.js';
-import { R as RovingTabindexController, m as minBy } from './vendor-dJxQG085.js';
+import { R as RovingTabindexController, m as minBy } from './vendor-Cef33Vym.js';
 import { when } from 'lit/directives/when.js';
 import { arrow, flip, computePosition, offset, shift, size, hide, autoUpdate } from '@floating-ui/dom';
 
@@ -580,7 +580,7 @@ class DragController {
   }
 }
 
-const styles$2 = "@layer base{:host{--_color-background: var(--odx-color-transparent);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed);--_color-foreground: var(--odx-color-foreground-base);--_color-foreground-hover: var(--odx-color-foreground-base);--_color-foreground-pressed: var(--odx-color-foreground-base);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: 0;--_margin-icon: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-controls);margin-block:var(--_margin-block);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,[part=base]{display:inline-flex;place-items:center;place-content:center}[part=base]{overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform,block-size;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_font-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-normal);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}[part=base]::-moz-focus-inner{padding:0;border:0}[part=loader]{--_size: calc(var(--_icon-size) - var(--odx-size-25));color:var(--_color-foreground);margin-inline:calc(var(--_margin-icon) + var(--odx-size-25))}[part=label]{margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline)}:is(odx-icon),::slotted(:is(odx-avatar,odx-icon)){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-size-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-size-37) -50%}::slotted(odx-avatar){--_color-background: var(--odx-color-transparent-pressed);--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing))}}@layer state{:host(:not([aria-busy=\"true\"])) [part=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([aria-busy=\"true\"])) [part=base]:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([aria-busy=\"true\"]){cursor:default}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-background-hover: var(--odx-color-disabled-fill);--_color-background-pressed: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host(:is([align-badge=\"end\"],[align-badge=\"center\"])) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0}:host([align-badge=\"end\"]) ::slotted([slot=\"badge\"]){translate:var(--odx-size-37) 50%}:host([align-badge=\"center\"]) ::slotted([slot=\"badge\"]){inset-inline:auto;translate:0 calc(50% + var(--_badge-margin))}}";
+const styles$2 = "@layer base{:host{--_color-background: var(--odx-color-transparent);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed);--_color-foreground: var(--odx-color-foreground-base);--_color-foreground-hover: var(--odx-color-foreground-base);--_color-foreground-pressed: var(--odx-color-foreground-base);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: 0;--_margin-icon: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-controls);margin-block:var(--_margin-block);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,[part=base]{display:inline-flex;place-items:center;place-content:center}[part=base]{overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform,block-size;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_font-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-normal);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}[part=base]::-moz-focus-inner{padding:0;border:0}[part=loader]{--_size: calc(var(--_icon-size) - var(--odx-size-25));color:var(--_color-foreground);margin-inline:calc(var(--_margin-icon) + var(--odx-size-12))}[part=label]{margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline)}:is(odx-icon),::slotted(:is(odx-avatar,odx-icon)){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-size-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-size-37) -50%}::slotted(odx-avatar){--_color-background: var(--odx-color-transparent-pressed);--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing))}}@layer state{:host(:not([aria-busy=\"true\"])) [part=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([aria-busy=\"true\"])) [part=base]:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([aria-busy=\"true\"]){cursor:default}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-background-hover: var(--odx-color-disabled-fill);--_color-background-pressed: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host(:is([align-badge=\"end\"],[align-badge=\"center\"])) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0}:host([align-badge=\"end\"]) ::slotted([slot=\"badge\"]){translate:var(--odx-size-37) 50%}:host([align-badge=\"center\"]) ::slotted([slot=\"badge\"]){inset-inline:auto;translate:0 calc(50% + var(--_badge-margin))}}";
 
 var __defProp$3 = Object.defineProperty;
 var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
@@ -712,6 +712,9 @@ renderSlot_fn = function(name, force) {
   return html`<slot name=${optionalAttr(name)}></slot>`;
 };
 isLoaderSlot_fn = function(name) {
+  if (name === void 0 && this.loaderSlot === "default") {
+    return true;
+  }
   return name === (this.loaderSlot || Object.values(["prefix", "suffix"]).find((slot) => getAssignedElements(this, slot).length > 0));
 };
 InteractiveElement.styles = unsafeCSS(styles$2);

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

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

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

@@ -1,3 +1,2 @@
 export * from './area-header.js';
-export * from './area-header.models.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,10 +1,33 @@
-import { CustomElement } from '../../lib/main.js';
-import { AvatarShape, AvatarSize, AvatarVariant } from './avatar.models.js';
+import { CustomElement, EnumString } from '../../lib/main.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-avatar': OdxAvatar;
     }
 }
+export type AvatarShape = EnumString<typeof AvatarShape>;
+export declare const AvatarShape: Pick<{
+    readonly CIRCLE: "circle";
+    readonly RECTANGLE: "rectangle";
+}, "CIRCLE" | "RECTANGLE">;
+export type AvatarSize = EnumString<typeof AvatarSize>;
+export declare const AvatarSize: Pick<{
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "xxl";
+}, "SM" | "MD" | "LG" | "XL">;
+export type AvatarVariant = EnumString<typeof AvatarVariant>;
+export declare const AvatarVariant: Pick<{
+    readonly NEUTRAL: "neutral";
+    readonly PRIMARY: "primary";
+    readonly ACCENT: "accent";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly GHOST: "ghost";
+}, "NEUTRAL" | "PRIMARY">;
 export declare class OdxAvatar extends CustomElement {
     shape?: AvatarShape;
     size?: AvatarSize;

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

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

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

@@ -1,6 +1,6 @@
 import { CustomElement } from '../../lib/main.js';
 import { PropertyValues } from 'lit';
-import { AvatarSize, AvatarVariant, OdxAvatar } from '../avatar/index.js';
+import { AvatarSize, AvatarVariant, OdxAvatar } from '../avatar/avatar.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-avatar-group': OdxAvatarGroup;

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

@@ -1,11 +1,20 @@
-import { CustomElement } from '../../lib/main.js';
+import { CustomElement, EnumString } from '../../lib/main.js';
 import { TemplateResult } from 'lit';
-import { BadgeVariant } from './badge.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-badge': OdxBadge;
     }
 }
+export type BadgeVariant = EnumString<typeof BadgeVariant>;
+export declare const BadgeVariant: Pick<{
+    readonly NEUTRAL: "neutral";
+    readonly PRIMARY: "primary";
+    readonly ACCENT: "accent";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly GHOST: "ghost";
+}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
 export declare class OdxBadge extends CustomElement {
     compact?: boolean;
     pulse?: boolean;

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

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

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

@@ -1,11 +1,36 @@
+import { EnumString } from '../../lib/main.js';
 import { InteractiveElement } from '../../cdk/main.js';
 import { TemplateResult } from 'lit';
-import { ButtonBadgeAlign, ButtonSize, ButtonVariant } from './button.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-button': OdxButton;
     }
 }
+export type ButtonBadgeAlign = EnumString<typeof ButtonBadgeAlign>;
+export declare const ButtonBadgeAlign: {
+    readonly START: "start";
+    readonly CENTER: "center";
+    readonly END: "end";
+};
+export type ButtonSize = EnumString<typeof ButtonSize>;
+export declare const ButtonSize: Pick<{
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "xxl";
+}, "XS" | "SM" | "MD" | "LG">;
+export type ButtonVariant = EnumString<typeof ButtonVariant>;
+export declare const ButtonVariant: Pick<{
+    readonly NEUTRAL: "neutral";
+    readonly PRIMARY: "primary";
+    readonly ACCENT: "accent";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly GHOST: "ghost";
+}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "DANGER" | "GHOST">;
 /**
  * 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

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

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

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

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

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

@@ -1,3 +1,2 @@
 export * from './checkbox-group.js';
-export * from './checkbox-group.models.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,11 +1,20 @@
-import { CanBeDisabled, CustomElement } from '../../lib/main.js';
+import { CanBeDisabled, CustomElement, EnumString } from '../../lib/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
-import { ChipVariant } from './chip.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-chip': OdxChip;
     }
 }
+export type ChipVariant = EnumString<typeof ChipVariant>;
+export declare const ChipVariant: Pick<{
+    readonly NEUTRAL: "neutral";
+    readonly PRIMARY: "primary";
+    readonly ACCENT: "accent";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly GHOST: "ghost";
+}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
 declare const OdxChip_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
 export declare class OdxChip extends OdxChip_base {
     #private;

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

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

package/dist/components/circular-progress-bar/circular-progress-bar.d.ts

@@ -1,11 +1,19 @@
-import { CustomElement } from '../../lib/main.js';
+import { CustomElement, EnumString } from '../../lib/main.js';
 import { PropertyValueMap, TemplateResult } from 'lit';
-import { CircularProgressBarSize } from './circular-progress-bar.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-circular-progress-bar': OdxCircularProgressBar;
     }
 }
+export type CircularProgressBarSize = EnumString<typeof CircularProgressBarSize>;
+export declare const CircularProgressBarSize: Pick<{
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "xxl";
+}, "SM" | "MD" | "LG">;
 /**
  * A circular progress bar that indicates the progress of a task.
  * @summary Displays the progress of a task in a circular format
@@ -33,7 +41,7 @@ export declare class OdxCircularProgressBar extends CustomElement {
     /**
      * The size of the progress bar.
      */
-    size: CircularProgressBarSize;
+    size?: CircularProgressBarSize;
     firstUpdated(changes: PropertyValueMap<this>): void;
     disconnectedCallback(): void;
     protected render(): TemplateResult;

package/dist/components/circular-progress-bar/index.d.ts

@@ -1,3 +1,2 @@
 export * from './circular-progress-bar.js';
-export * from './circular-progress-bar.models.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,12 +1,16 @@
-import { CanBeDisabled } from '../../lib/main.js';
+import { CanBeDisabled, EnumString } from '../../lib/main.js';
 import { OdxPopover, PopoverHost, PopoverPlacementOptions } from '../../cdk/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
-import { DropdownPlacement } from './dropdown.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-dropdown': OdxDropdown;
     }
 }
+export type DropdownPlacement = EnumString<typeof DropdownPlacement>;
+export declare const DropdownPlacement: {
+    readonly TOP: "top";
+    readonly BOTTOM: "bottom";
+};
 declare const OdxDropdown_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof PopoverHost;
 export declare class OdxDropdown extends OdxDropdown_base {
     #private;

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

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

package/dist/components/headline/headline.d.ts

@@ -1,11 +1,19 @@
-import { CustomElement } from '../../lib/main.js';
+import { CustomElement, EnumString } from '../../lib/main.js';
 import { PropertyValueMap } from 'lit';
-import { HeadlineSize } from './headline.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-headline': OdxHeadline;
     }
 }
+export type HeadlineSize = EnumString<typeof HeadlineSize>;
+export declare const HeadlineSize: Pick<{
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "xxl";
+}, "SM" | "MD" | "LG" | "XL">;
 export declare class OdxHeadline extends CustomElement {
     size?: HeadlineSize;
     protected willUpdate(props: PropertyValueMap<this>): void;

package/dist/components/headline/index.d.ts

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

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

@@ -19,6 +19,7 @@ declare global {
  * @slot - Contains button text
  */
 export declare class OdxIconButton extends OdxButton {
+    float: boolean;
     icon?: AvailableIcons;
     protected renderContent(): TemplateResult;
 }

package/dist/components/inline-message/index.d.ts

@@ -1,3 +1,2 @@
 export * from './inline-message.js';
-export * from './inline-message.models.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/inline-message/inline-message.d.ts

@@ -1,15 +1,24 @@
-import { AvailableIcons, CustomElement } from '../../lib/main.js';
+import { AvailableIcons, CustomElement, EnumString } from '../../lib/main.js';
 import { TemplateResult } from 'lit';
-import { InlineMessageVariant } from './inline-message.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-inline-message': OdxInlineMessage;
     }
 }
+export type InlineMessageVariant = EnumString<typeof InlineMessageVariant>;
+export declare const InlineMessageVariant: Pick<{
+    readonly NEUTRAL: "neutral";
+    readonly PRIMARY: "primary";
+    readonly ACCENT: "accent";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly GHOST: "ghost";
+}, "NEUTRAL" | "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
 export declare class OdxInlineMessage extends CustomElement {
     closable: boolean;
     emphasized: boolean;
-    icon?: AvailableIcons;
+    icon?: AvailableIcons | null;
     variant?: InlineMessageVariant;
     show(): void;
     hide(): Promise<void>;

package/dist/components/input/index.d.ts

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

package/dist/components/input/input.d.ts

@@ -1,6 +1,5 @@
 import { CustomElement } from '../../lib/main.js';
 import { TemplateResult } from 'lit';
-import { InputVariant } from './input.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-input': OdxInput;
@@ -15,7 +14,6 @@ export declare class OdxInput extends OdxInput_base {
     clearable: boolean;
     placeholder: string;
     type: HTMLInputElement['type'];
-    variant?: InputVariant | null;
     clear(): void;
     focus(): void;
     protected render(): TemplateResult;

package/dist/components/logo/index.d.ts

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

package/dist/components/logo/logo.d.ts

@@ -1,10 +1,18 @@
-import { CustomElement } from '../../lib/main.js';
-import { LogoSize } from './logo.models.js';
+import { CustomElement, EnumString } from '../../lib/main.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-logo': OdxLogo;
     }
 }
+export type LogoSize = EnumString<typeof LogoSize>;
+export declare const LogoSize: 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 OdxLogo extends CustomElement {
     size?: LogoSize;
     compact: boolean;

package/dist/components/main.d.ts

@@ -52,9 +52,11 @@ export * from './slider/index.js';
 export * from './spacer/index.js';
 export * from './spinbox/index.js';
 export * from './stack/index.js';
+export * from './status/index.js';
 export * from './switch/index.js';
 export * from './table/index.js';
 export * from './text/index.js';
+export * from './timeline/index.js';
 export * from './title/index.js';
 export * from './toast/index.js';
 export * from './toggle-button/index.js';

package/dist/components/modal/index.d.ts

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

package/dist/components/modal/modal.d.ts

@@ -1,11 +1,15 @@
-import { CustomElement } from '../../lib/main.js';
+import { CustomElement, EnumString } from '../../lib/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
-import { ModalVariant } from './modal.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-modal': OdxModal;
     }
 }
+export type ModalLayout = EnumString<typeof ModalLayout>;
+export declare const ModalLayout: {
+    MODAL: string;
+    SIDESHEET: string;
+};
 export type ModalHookFn = (modal: OdxModal) => Promise<void> | void;
 export type ModalGuardFn = (modal: OdxModal) => Promise<boolean> | boolean;
 export declare class OdxModal extends CustomElement {
@@ -17,7 +21,7 @@ export declare class OdxModal extends CustomElement {
     backdropDisabled?: boolean;
     dismissable?: boolean;
     open: boolean;
-    variant?: ModalVariant | null;
+    layout?: ModalLayout;
     constructor();
     connectedCallback(): void;
     canShow?: ModalGuardFn;

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

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

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

@@ -1,11 +1,19 @@
-import { CanBeSelected } from '../../lib/main.js';
+import { CanBeSelected, EnumString } from '../../lib/main.js';
 import { InteractiveElement } from '../../cdk/main.js';
-import { NavigationItemSize } from './navigation-item.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-navigation-item': OdxNavigationItem;
     }
 }
+export type NavigationItemSize = EnumString<typeof NavigationItemSize>;
+export declare const NavigationItemSize: Pick<{
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "xxl";
+}, "MD" | "LG">;
 declare const OdxNavigationItem_base: import('../../lib/main.js').Constructor<CanBeSelected> & typeof InteractiveElement;
 export declare class OdxNavigationItem extends OdxNavigationItem_base {
     size?: NavigationItemSize | null;

package/dist/components/page/index.d.ts

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

package/dist/components/page/page.d.ts

@@ -1,16 +1,24 @@
-import { CustomElement } from '../../lib/main.js';
+import { CustomElement, EnumString } from '../../lib/main.js';
 import { TemplateResult } from 'lit';
-import { PageAlignment, PageLayout } from './page.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-page': OdxPage;
     }
 }
+export type PageAlignment = EnumString<typeof PageAlignment>;
+export declare const PageAlignment: {
+    readonly CENTER: "center";
+};
+export type PageLayout = EnumString<typeof PageLayout>;
+export declare const PageLayout: {
+    readonly NARROW: "narrow";
+    readonly WIDE: "wide";
+};
 export declare class OdxPage extends CustomElement {
     headerElement: HTMLElement;
     subheaderElement: HTMLElement;
-    alignment?: PageAlignment | null;
-    layout?: PageLayout | null;
+    alignment?: PageAlignment;
+    layout?: PageLayout;
     firstUpdated(): void;
     protected render(): TemplateResult;
 }

package/dist/components/progress-bar/index.d.ts

@@ -1,3 +1,2 @@
 export * from './progress-bar.js';
-export * from './progress-bar.models.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/progress-bar/progress-bar.d.ts

@@ -1,11 +1,16 @@
-import { CustomElement } from '../../lib/main.js';
+import { CustomElement, EnumString } from '../../lib/main.js';
 import { TemplateResult } from 'lit';
-import { ProgressState } from './progress-bar.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-progress-bar': OdxProgressBar;
     }
 }
+export type ProgressState = EnumString<typeof ProgressState>;
+export declare const ProgressState: {
+    readonly CONFIRM: "confirm";
+    readonly SUCCESS: "success";
+    readonly ERROR: "error";
+};
 export declare class OdxProgressBar extends CustomElement {
     readonly content: HTMLElement[];
     indeterminate: boolean;

package/dist/components/radio-group/index.d.ts

@@ -1,3 +1,2 @@
 export * from './radio-group.js';
-export * from './radio-group.models.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,11 +1,16 @@
+import { EnumString } from '../../lib/main.js';
 import { RadioGroupFormControl } from '../../cdk/main.js';
-import { RadioGroupVariant } from './radio-group.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-radio-group': OdxRadioGroup;
     }
 }
+export type RadioGroupLayout = EnumString<typeof RadioGroupLayout>;
+export declare const RadioGroupLayout: {
+    readonly INLINE: "inline";
+    readonly LIST: "list";
+};
 export declare class OdxRadioGroup extends RadioGroupFormControl {
-    variant?: RadioGroupVariant;
+    layout?: RadioGroupLayout;
 }
 //# sourceMappingURL=radio-group.d.ts.map

package/dist/components/search-bar/index.d.ts

@@ -1,4 +1,3 @@
 export * from './search-bar.events.js';
 export * from './search-bar.js';
-export * from './search-bar.models.js';
 //# sourceMappingURL=index.d.ts.map