@odx/foundation 1.0.0-beta.9 → 1.0.0-beta.91

package/dist/components/highlight/highlight.d.ts

@@ -1,14 +1,23 @@
-import { CustomElement } from '../../lib/main.js';
-import { PropertyValueMap } from 'lit';
+import { CanBeDisabled, CustomElement } from '../../lib/main.js';
+import { PropertyValues } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-highlight': OdxHighlight;
     }
+    export interface HighlightRegistry {
+        set(name: string, highlight: Highlight): void;
+        delete(name: string): void;
+    }
 }
-export declare class OdxHighlight extends CustomElement {
+declare const OdxHighlight_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
+export declare class OdxHighlight extends OdxHighlight_base {
+    #private;
+    root: Element;
     query?: string | null;
+    selector?: string;
     minlength: number;
-    protected updated(props: PropertyValueMap<this>): void;
-    protected highlight(): void;
+    subtle: boolean;
+    protected updated(props: PropertyValues<this>): void;
 }
+export {};
 //# sourceMappingURL=highlight.d.ts.map

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

@@ -1,25 +1,14 @@
-import { AvailableIcons } from '../../lib/main.js';
+import { OdxIconName } from '@odx/icons';
 import { TemplateResult } from 'lit';
-import { OdxButton } from '../button/index.js';
+import { OdxButton } from '../button/button.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-icon-button': OdxIconButton;
     }
 }
-/**
- * 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 OdxIconButton extends OdxButton {
-    icon?: AvailableIcons;
+    float: boolean;
+    icon?: OdxIconName;
     protected renderContent(): TemplateResult;
 }
 //# sourceMappingURL=icon-button.d.ts.map

package/dist/components/image/image.d.ts

@@ -1,5 +1,5 @@
 import { CustomElement } from '../../lib/main.js';
-import { HTMLTemplateResult, PropertyValues, TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-image': OdxImage;
@@ -10,7 +10,7 @@ interface Resource {
 }
 declare class ResourceLoader<T = Blob> {
     load(resource: Resource): Promise<T | null>;
-    protected parseResponse(response: Response): Promise<T>;
+    protected parseResponse(response: Response): T;
 }
 declare class ImageLoader extends ResourceLoader<HTMLImageElement> {
     load(options: Resource): Promise<HTMLImageElement>;
@@ -25,8 +25,8 @@ export declare class OdxImage extends CustomElement {
     alt?: string | null;
     height?: number | null;
     width?: number | null;
-    protected render(): HTMLTemplateResult | TemplateResult | string;
-    protected renderLoader(): HTMLTemplateResult | TemplateResult | string;
+    protected render(): TemplateResult;
+    protected renderLoader(): TemplateResult;
     protected updated(props: PropertyValues<this>): void;
     load(src: string): Promise<void>;
 }

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

@@ -1,16 +1,26 @@
-import { AvailableIcons, CustomElement } from '../../lib/main.js';
+import { CustomElement, ValuesOf } from '../../lib/main.js';
+import { OdxIconName } from '@odx/icons';
 import { TemplateResult } from 'lit';
-import { InlineMessageVariant } from './inline-message.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-inline-message': OdxInlineMessage;
     }
 }
+export type InlineMessageVariant = ValuesOf<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" | "PRIMARY" | "SUCCESS" | "WARNING" | "DANGER">;
 export declare class OdxInlineMessage extends CustomElement {
     closable: boolean;
-    emphasized: boolean;
-    icon?: AvailableIcons;
-    variant?: InlineMessageVariant;
+    strong: boolean;
+    icon?: OdxIconName | null;
+    variant: InlineMessageVariant;
     show(): void;
     hide(): Promise<void>;
     protected render(): TemplateResult;

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

@@ -1,21 +1,28 @@
-import { CustomElement } from '../../lib/main.js';
-import { TemplateResult } from 'lit';
-import { InputVariant } from './input.models.js';
+import { FormControl } from '../../lib/main.js';
+import { OdxIconName } from '@odx/icons';
+import { nothing, PropertyValues, TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-input': OdxInput;
     }
 }
-declare const OdxInput_base: import('../../lib/main.js').Constructor<import('../../lib/main.js').IsFormControl<string>> & typeof CustomElement;
-export declare class OdxInput extends OdxInput_base {
+export declare class OdxInput extends FormControl<string> {
     #private;
-    static readonly formAssociated = true;
+    private nativeInput;
+    block: boolean;
     clearable: boolean;
+    hideControls: boolean;
     placeholder: string;
+    min?: number;
+    max?: number;
+    step?: number;
     type: HTMLInputElement['type'];
-    variant?: InputVariant | null;
+    value: string;
     clear(): void;
+    stepUp(): void;
+    stepDown(): void;
+    protected willUpdate(props: PropertyValues<this>): void;
     protected render(): TemplateResult;
+    protected renderControl(type: string, icon: OdxIconName, listener: EventListener, disabled: boolean): TemplateResult | typeof nothing;
 }
-export {};
 //# sourceMappingURL=input.d.ts.map

package/dist/components/kpi/kpi.d.ts

@@ -0,0 +1,36 @@
+import { CustomElement, ValuesOf } from '../../lib/main.js';
+import { TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-kpi': OdxKpi;
+    }
+}
+export type KpiSize = ValuesOf<typeof KpiSize>;
+export declare const KpiSize: Pick<{
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "xxl";
+}, "SM" | "MD" | "LG">;
+export type KpiVariant = ValuesOf<typeof KpiVariant>;
+export declare const KpiVariant: 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" | "DANGER">;
+export declare class OdxKpi extends CustomElement {
+    label: string;
+    unit?: string;
+    value: string;
+    size: KpiSize;
+    variant: KpiVariant;
+    vertical: boolean;
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=kpi.d.ts.map

package/dist/components/line-clamp/line-clamp.d.ts

@@ -1,5 +1,5 @@
 import { CustomElement } from '../../lib/main.js';
-import { PropertyValueMap } from 'lit';
+import { PropertyValues } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-line-clamp': OdxLineClamp;
@@ -7,6 +7,6 @@ declare global {
 }
 export declare class OdxLineClamp extends CustomElement {
     max?: number | null;
-    protected updated(props: PropertyValueMap<this>): void;
+    protected updated(props: PropertyValues<this>): void;
 }
 //# sourceMappingURL=line-clamp.d.ts.map

package/dist/components/link/link.d.ts

@@ -1,11 +1,11 @@
-import { BaseLink } from './base-link.js';
+import { InteractiveLink } from '../../lib/main.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-link': OdxLink;
     }
 }
-export declare class OdxLink extends BaseLink {
-    emphasized: boolean;
+export declare class OdxLink extends InteractiveLink {
+    strong: boolean;
     subtle: boolean;
 }
 //# sourceMappingURL=link.d.ts.map

package/dist/components/list/list.d.ts

@@ -1,12 +1,15 @@
 import { CustomElement } from '../../lib/main.js';
+import { OdxListItem } from '../list-item/list-item.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-list': OdxList;
     }
 }
 export declare class OdxList extends CustomElement {
+    items: OdxListItem[];
     multiple: boolean;
     constructor();
     connectedCallback(): void;
+    toggleAll(state?: boolean, emitEvent?: boolean): void;
 }
 //# sourceMappingURL=list.d.ts.map

package/dist/components/{list → list-item}/list-item.d.ts

@@ -1,25 +1,26 @@
-import { CanBeExpanded, CanBeSelected } from '../../lib/main.js';
+import { CanBeExpanded, InteractiveElement } from '../../lib/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
-import { BaseButton } from '../button/index.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-list-item': OdxListItem;
     }
 }
-declare const OdxListItem_base: import('../../lib/main.js').Constructor<CanBeSelected> & import('../../lib/main.js').Constructor<CanBeExpanded> & typeof BaseButton;
+declare const OdxListItem_base: import('../../lib/main.js').Constructor<CanBeExpanded> & typeof InteractiveElement;
 export declare class OdxListItem extends OdxListItem_base {
     #private;
     private expandableItems;
+    region?: HTMLElementTagNameMap['odx-toggle-content'];
     compact: boolean;
-    muted: boolean;
+    subtle: boolean;
+    selected: boolean;
     withExpandControl: boolean;
     withExpandIndicator: boolean;
-    constructor();
     isExpandable(): boolean;
+    getExpandControl(): HTMLElement | null;
     connectedCallback(): void;
     protected render(): TemplateResult;
     protected renderContent(): TemplateResult;
-    protected updated(props: PropertyValues<this>): void;
+    protected willUpdate(props: PropertyValues<this>): void;
 }
 export {};
 //# sourceMappingURL=list-item.d.ts.map

package/dist/components/loader.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=loader.d.ts.map

package/dist/components/loading-overlay/loading-overlay.d.ts

@@ -6,16 +6,15 @@ declare global {
     }
 }
 export declare const LOADING_OVERLAY_HOST_DIRECTIVE = "odx-loading-overlay-host";
-declare const OdxLoadingOverlay_base: import('../../lib/main.js').Constructor<import('../../lib/main.js').HasLoadingState> & typeof CustomElement;
-export declare class OdxLoadingOverlay extends OdxLoadingOverlay_base {
+export declare class OdxLoadingOverlay extends CustomElement {
     #private;
     private readonly overlay;
     get loadingContainer(): HTMLElement;
+    loading: boolean;
     disconnectedCallback(): void;
     protected updated(props: PropertyValues<this>): Promise<void>;
     protected render(): TemplateResult;
     protected showOverlay(): void;
     protected hideOverlay(): void;
 }
-export {};
 //# sourceMappingURL=loading-overlay.d.ts.map

package/dist/components/loading-spinner/loading-spinner.d.ts

@@ -6,8 +6,7 @@ declare global {
     }
 }
 export declare class OdxLoadingSpinner extends CustomElement {
-    #private;
-    variant?: 'dots' | null;
+    variant?: 'dots';
     protected render(): TemplateResult;
 }
 //# sourceMappingURL=loading-spinner.d.ts.map

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

@@ -1,12 +1,20 @@
-import { CustomElement } from '../../lib/main.js';
-import { LogoSize } from './logo.models.js';
+import { CustomElement, ValuesOf } from '../../lib/main.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-logo': OdxLogo;
     }
 }
+export type LogoSize = ValuesOf<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;
+    size: LogoSize;
     compact: boolean;
     connectedCallback(): void;
 }

package/dist/components/main-menu/index.d.ts

@@ -1,6 +1,6 @@
+export * from './main-menu.js';
 export * from './main-menu-button.js';
 export * from './main-menu-link.js';
 export * from './main-menu-subtitle.js';
 export * from './main-menu-title.js';
-export * from './main-menu.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/main-menu/main-menu-link.d.ts

@@ -1,9 +1,9 @@
-import { BaseLink } from '../link/index.js';
+import { InteractiveLink } from '../../lib/main.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-main-menu-link': OdxMainMenuLink;
     }
 }
-export declare class OdxMainMenuLink extends BaseLink {
+export declare class OdxMainMenuLink extends InteractiveLink {
 }
 //# sourceMappingURL=main-menu-link.d.ts.map

package/dist/components/main-menu/main-menu.d.ts

@@ -8,7 +8,6 @@ declare global {
 export declare class OdxMainMenu extends CustomElement {
     #private;
     private links;
-    constructor();
     connectedCallback(): void;
     toggle(): void;
     open(): void;

package/dist/components/main.d.ts

@@ -1,64 +1,72 @@
-export * from './accordion/index.js';
-export * from './action-group/index.js';
+export * from './accordion/accordion.js';
+export * from './accordion-item/accordion-item.js';
+export * from './accordion-panel/accordion-panel.js';
+export * from './action-button/action-button.js';
 export * from './anchor-navigation/index.js';
-export * from './area-header/index.js';
-export * from './avatar-group/index.js';
-export * from './avatar/index.js';
-export * from './badge/index.js';
+export * from './area-header/area-header.js';
+export * from './avatar/avatar.js';
+export * from './avatar-group/avatar-group.js';
+export * from './badge/badge.js';
 export * from './breadcrumbs/index.js';
-export * from './button-group/index.js';
-export * from './button/index.js';
-export * from './card/index.js';
-export * from './checkbox-group/index.js';
-export * from './checkbox/index.js';
-export * from './chip/index.js';
-export * from './circular-progress-bar/index.js';
-export * from './content-box/index.js';
-export * from './dropdown/index.js';
-export * from './form-field/index.js';
+export * from './button/button.js';
+export * from './button-group/button-group.js';
+export * from './card/card.js';
+export * from './checkbox/checkbox.js';
+export * from './checkbox-group/checkbox-group.js';
+export * from './chip/chip.js';
+export * from './circular-progress-bar/circular-progress-bar.js';
+export * from './combobox/autocomplete.js';
+export * from './content-box/content-box.js';
+export * from './dropdown/dropdown.js';
+export * from './form-field/form-field.js';
 export * from './format/index.js';
 export * from './header/index.js';
-export * from './headline/index.js';
-export * from './highlight/index.js';
-export * from './icon-button/index.js';
-export * from './image/index.js';
-export * from './inline-message/index.js';
-export * from './input/index.js';
-export * from './line-clamp/index.js';
-export * from './link/index.js';
-export * from './list/index.js';
-export * from './loading-overlay/index.js';
-export * from './loading-spinner/index.js';
-export * from './logo/index.js';
+export * from './headline/headline.js';
+export * from './highlight/highlight.js';
+export * from './icon-button/icon-button.js';
+export * from './image/image.js';
+export * from './inline-message/inline-message.js';
+export * from './input/input.js';
+export * from './kpi/kpi.js';
+export * from './line-clamp/line-clamp.js';
+export * from './link/link.js';
+export * from './list/list.js';
+export * from './list-item/list-item.js';
+export * from './loading-overlay/loading-overlay.js';
+export * from './loading-spinner/loading-spinner.js';
+export * from './logo/logo.js';
 export * from './main-menu/index.js';
-export * from './menu-item/index.js';
 export * from './menu/index.js';
-export * from './modal/index.js';
-export * from './navigation-item/index.js';
-export * from './option/index.js';
-export * from './page-layout/index.js';
-export * from './page/index.js';
-export * from './pagination/index.js';
-export * from './progress-bar/index.js';
-export * from './radio-button/index.js';
-export * from './radio-group/index.js';
-export * from './rail-navigation/index.js';
+export * from './menu-item/menu-item.js';
+export * from './modal/modal.js';
+export * from './navigation-item/navigation-item.js';
+export * from './option/option.js';
+export * from './page/page.js';
+export * from './page-layout/page-layout.js';
+export * from './pagination/pagination.js';
+export * from './popover/popover.js';
+export * from './progress-bar/progress-bar.js';
+export * from './radio-button/radio-button.js';
+export * from './radio-group/radio-group.js';
+export * from './rail-navigation/rail-navigation.js';
 export * from './search-bar/index.js';
-export * from './select/index.js';
-export * from './separator/index.js';
-export * from './skeleton/index.js';
+export * from './select/select.js';
+export * from './separator/separator.js';
+export * from './skeleton/skeleton.js';
 export * from './slider/index.js';
-export * from './spacer/index.js';
-export * from './spinbox/index.js';
-export * from './stack/index.js';
-export * from './switch/index.js';
+export * from './spacer/spacer.js';
+export * from './spinbox/spinbox.js';
+export * from './stack/stack.js';
+export * from './status/status.js';
+export * from './switch/switch.js';
 export * from './table/index.js';
-export * from './text/index.js';
-export * from './title/index.js';
-export * from './toast/index.js';
-export * from './toggle-button/index.js';
-export * from './toggle-content/index.js';
-export * from './tooltip/index.js';
-export * from './translate/index.js';
-export * from './visually-hidden/index.js';
+export * from './text/text.js';
+export * from './title/title.js';
+export * from './toast/toast.js';
+export * from './toggle-button/toggle-button.js';
+export * from './toggle-button-group/toggle-button-group.js';
+export * from './toggle-content/toggle-content.js';
+export * from './tooltip/tooltip.js';
+export * from './translate/translate.js';
+export * from './visually-hidden/visually-hidden.js';
 //# sourceMappingURL=main.d.ts.map

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

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

package/dist/components/menu/menu.d.ts

@@ -1,18 +1,16 @@
-import { CustomElement } from '../../lib/main.js';
-import { PopoverHost } from '../../cdk/main.js';
 import { TemplateResult } from 'lit';
-import { OdxMenuItem } from '../menu-item/index.js';
+import { OdxMenuItem } from '../menu-item/menu-item.js';
+import { PopoverHost } from '../popover/popover-host.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-menu': OdxMenu;
     }
 }
-declare const OdxMenu_base: import('../../lib/main.js').Constructor<PopoverHost> & typeof CustomElement;
-export declare class OdxMenu extends OdxMenu_base {
+export declare class OdxMenu extends PopoverHost {
     #private;
     getItems(): OdxMenuItem[];
     connectedCallback(): void;
-    mountPopover(referenceElement?: HTMLElement): void;
+    mountPopover(referenceElement: HTMLElement | null): void;
     unmountPopover(referenceElement: HTMLElement): void;
     onBeforePopoverShow(): void;
     onPopoverShow(): void;
@@ -20,5 +18,4 @@ export declare class OdxMenu extends OdxMenu_base {
     protected isMenuItem(element: Element): element is OdxMenuItem;
     protected render(): TemplateResult;
 }
-export {};
 //# sourceMappingURL=menu.d.ts.map

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

@@ -1,15 +1,14 @@
-import { AvailableIcons } from '../../lib/main.js';
-import { TemplateResult, nothing } from 'lit';
-import { BaseButton } from '../button/index.js';
+import { InteractiveElement } from '../../lib/main.js';
+import { OdxIconName } from '@odx/icons';
+import { TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-menu-item': OdxMenuItem;
     }
 }
-export declare class OdxMenuItem extends BaseButton {
-    icon?: AvailableIcons | null;
+export declare class OdxMenuItem extends InteractiveElement {
+    icon?: OdxIconName | null;
     protected renderContent(): TemplateResult;
     connectedCallback(): void;
-    protected renderOverlay(): typeof nothing;
 }
 //# sourceMappingURL=menu-item.d.ts.map

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

@@ -1,23 +1,25 @@
-import { CustomElement } from '../../lib/main.js';
+import { CustomElement, ValuesOf } 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 = ValuesOf<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 {
     #private;
-    private closeRequested;
-    private showRequested;
     private dialog;
     private modalContainer;
     backdropDisabled?: boolean;
-    dismissable?: boolean;
+    dismissible: boolean;
     open: boolean;
-    variant?: ModalVariant | null;
+    layout: ModalLayout;
     constructor();
     connectedCallback(): void;
     canShow?: ModalGuardFn;

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

@@ -1,14 +1,22 @@
-import { CanBeSelected } from '../../lib/main.js';
-import { BaseButton } from '../button/index.js';
-import { NavigationItemSize } from './navigation-item.models.js';
+import { InteractiveElement, ValuesOf } from '../../lib/main.js';
+import { PropertyValues } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-navigation-item': OdxNavigationItem;
     }
 }
-declare const OdxNavigationItem_base: import('../../lib/main.js').Constructor<CanBeSelected> & typeof BaseButton;
-export declare class OdxNavigationItem extends OdxNavigationItem_base {
-    size?: NavigationItemSize | null;
+export type NavigationItemSize = ValuesOf<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">;
+export declare class OdxNavigationItem extends InteractiveElement {
+    size: NavigationItemSize;
+    selected: boolean;
+    protected willUpdate(props: PropertyValues<this>): void;
 }
-export {};
 //# sourceMappingURL=navigation-item.d.ts.map

package/dist/components/option/option.d.ts

@@ -6,7 +6,6 @@ declare global {
     }
 }
 export declare class OdxOption extends OptionControl {
-    type?: 'checkbox' | null;
     protected render(): TemplateResult;
 }
 //# sourceMappingURL=option.d.ts.map