@odx/foundation 1.0.0-beta.217 → 1.0.0-beta.219

package/README.md

@@ -23,14 +23,14 @@ To install `@odx/foundation` and it's peer dependencies in your project, run the
 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:
 
@@ -90,13 +90,13 @@ export class Title {
 
 #### React Example
 
-See <odx-link href="https://lit.dev/docs/frameworks/react/" target="_blank" strong>Lit documentation</odx-link> for more information on how to use web components in React.
+See <a href="https://lit.dev/docs/frameworks/react/" target="_blank">Lit documentation</a> for more information on how to use web components in React.
 
 
 
 ### Documentation
 
-For detailed documentation on how to use the `@odx/foundation` package, including examples and best practices, please visit our <a href="https://odx.draeger.com" target="_blank" rel="noopener">**documentation**</a>.
+For detailed documentation on how to use the `@odx/foundation` package, including examples and best practices, please visit our <a href="https://odx.draeger.com" target="_blank" rel="noopener">documentation</a>.
 
 ### Contact
-For questions, feedback, or support, please reach out to us through our <a href="https://odx.draeger.com/contact" target="_blank" rel="noopener">**contact page**</a>.
+For questions, feedback, or support, please reach out to us through our <a href="https://odx.draeger.com/contact" target="_blank" rel="noopener">contact page</a>.

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

@@ -26,10 +26,13 @@ export declare const AvatarVariant: Pick<{
     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";
-}, "NEUTRAL" | "PRIMARY" | "ACCENT">;
+    readonly DANGER_GHOST: "danger-ghost";
+    readonly GHOST: "ghost";
+}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "GHOST">;
 export declare class OdxAvatar extends CustomElement {
     interactive: boolean;
     name: string;

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

@@ -6,11 +6,6 @@ declare global {
         'odx-badge': OdxBadge;
     }
 }
-export type BadgeAppearance = ValuesOf<typeof BadgeAppearance>;
-export declare const BadgeAppearance: Pick<{
-    readonly FILL: "fill";
-    readonly GHOST: "ghost";
-}, "FILL" | "GHOST">;
 export type BadgeSize = ValuesOf<typeof BadgeSize>;
 export declare const BadgeSize: Pick<{
     readonly XS: "xs";
@@ -26,12 +21,14 @@ export declare const BadgeVariant: Pick<{
     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";
-}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
+    readonly DANGER_GHOST: "danger-ghost";
+    readonly GHOST: "ghost";
+}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "ACCENT_GHOST" | "SUCCESS" | "WARNING" | "DANGER" | "DANGER_GHOST" | "GHOST">;
 export declare class OdxBadge extends CustomElement {
-    appearance: BadgeAppearance;
     animated: boolean;
     compact: boolean;
     size: BadgeSize;

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

@@ -10,15 +10,23 @@ declare global {
         'odx-breadcrumbs': OdxBreadcrumbs;
     }
 }
-export type BreadcrumbsAppearance = ValuesOf<typeof BreadcrumbsAppearance>;
-export declare const BreadcrumbsAppearance: Pick<{
-    readonly FILL: "fill";
+export type BreadcrumbsVariant = ValuesOf<typeof BreadcrumbsVariant>;
+export declare const BreadcrumbsVariant: Pick<{
+    readonly NEUTRAL: "neutral";
+    readonly NEUTRAL_SUBTLE: "neutral-subtle";
+    readonly PRIMARY: "primary";
+    readonly ACCENT: "accent";
+    readonly ACCENT_GHOST: "accent-ghost";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly DANGER_GHOST: "danger-ghost";
     readonly GHOST: "ghost";
-}, "FILL" | "GHOST">;
+}, "PRIMARY" | "GHOST">;
 export declare class OdxBreadcrumbs extends CustomElement {
     #private;
-    appearance: BreadcrumbsAppearance;
     max: number;
+    variant: BreadcrumbsVariant;
     connectedCallback(): void;
     protected render(): TemplateResult;
     protected updated(props: PropertyValues<this>): void;

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

@@ -7,11 +7,6 @@ declare global {
     }
 }
 export declare const buttonDirective: import('../../utils/main.js').BooleanAttributeDirective<"odx-button">;
-export type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
-export declare const ButtonAppearance: Pick<{
-    readonly FILL: "fill";
-    readonly GHOST: "ghost";
-}, "FILL" | "GHOST">;
 export type ButtonBadgePosition = ValuesOf<typeof ButtonBadgePosition>;
 export declare const ButtonBadgePosition: Pick<{
     readonly START: "start";
@@ -24,15 +19,17 @@ export declare const ButtonVariant: Pick<{
     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";
-}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "WARNING" | "DANGER">;
+    readonly DANGER_GHOST: "danger-ghost";
+    readonly GHOST: "ghost";
+}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "WARNING" | "DANGER" | "DANGER_GHOST" | "GHOST">;
 export declare class OdxButton extends LinkControlElement {
     #private;
     static readonly formAssociated = true;
     active: boolean;
-    appearance: ButtonAppearance;
     badgePosition: ButtonBadgePosition;
     /**
      * The type of the button.

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

@@ -1,13 +1,12 @@
 import { ControlSize, CustomElement } from '../../main.js';
 import { PropertyValues, TemplateResult } from 'lit';
-import { ButtonAppearance, ButtonVariant } from '../button/button.js';
+import { ButtonVariant } from '../button/button.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-button-group': OdxButtonGroup;
     }
 }
 export declare class OdxButtonGroup extends CustomElement {
-    appearance?: ButtonAppearance;
     size: ControlSize;
     variant?: ButtonVariant;
     vertical: boolean;

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

@@ -6,16 +6,24 @@ declare global {
         'odx-card': OdxCard;
     }
 }
-export type CardAppearance = ValuesOf<typeof CardAppearance>;
-export declare const CardAppearance: Pick<{
-    readonly FILL: "fill";
+export type CardVariant = ValuesOf<typeof CardVariant>;
+export declare const CardVariant: 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";
-}, "FILL" | "GHOST">;
+}, "NEUTRAL" | "GHOST">;
 declare const OdxCard_base: import('../../utils/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
 export declare class OdxCard extends OdxCard_base {
     #private;
-    appearance: CardAppearance;
     interactive: boolean;
+    variant: CardVariant;
     protected updated(props: PropertyValues<this>): void;
     protected render(): TemplateResult;
 }

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

@@ -12,9 +12,12 @@ export declare const ChipVariant: Pick<{
     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" | "NEUTRAL_SUBTLE" | "PRIMARY" | "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
 declare const OdxChip_base: import('../../utils/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
 export declare class OdxChip extends OdxChip_base {

package/dist/components/empty-state/empty-state.d.ts

@@ -28,9 +28,12 @@ export declare const EmptyStateVariant: Pick<{
     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" | "NEUTRAL_SUBTLE" | "DANGER">;
 export declare class OdxEmptyState extends CustomElement {
     alignment: EmptyStateAlignment;

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

@@ -16,9 +16,12 @@ export declare const HighlightVariant: Pick<{
     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" | "ACCENT" | "DANGER">;
 declare const OdxHighlight_base: import('../../utils/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
 export declare class OdxHighlight extends OdxHighlight_base {

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

@@ -13,9 +13,12 @@ export declare const InlineMessageVariant: Pick<{
     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" | "SUCCESS" | "WARNING" | "DANGER">;
 export declare class OdxInlineMessage extends CustomElement {
     dismissible: boolean;

package/dist/components/key-value/key-value.d.ts

@@ -32,9 +32,12 @@ export declare const KeyValueVariant: Pick<{
     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" | "ACCENT" | "SUCCESS" | "DANGER">;
 export declare class OdxKeyValue extends CustomElement {
     alignment: KeyValueAlignment;

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

@@ -22,9 +22,12 @@ export declare const MenuItemVariant: Pick<{
     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" | "DANGER">;
 export declare class OdxMenuItem extends LinkControlElement {
     protected loadingSpinnerSlot: "prefix";

package/dist/components/status/status.d.ts

@@ -12,9 +12,12 @@ export declare const StatusVariant: Pick<{
     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" | "SUCCESS" | "WARNING" | "DANGER">;
 export declare class OdxStatus extends CustomElement {
     animated: boolean;

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

@@ -16,6 +16,7 @@ export declare const TabBarAlignment: Pick<{
 export declare class OdxTabBar extends CustomElement {
     #private;
     private readonly containerElement?;
+    private readonly indicatorElement?;
     private readonly scrollContainer?;
     alignment: TabBarAlignment;
     autoSelect: boolean;
@@ -26,6 +27,8 @@ export declare class OdxTabBar extends CustomElement {
     vertical: boolean;
     get selectedItem(): OdxNavigationItem | undefined;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     getItems(): OdxNavigationItem[];
     selectItem(item: OdxNavigationItem): void;
     selectPreviousItem(): void;

package/dist/components/text/text.d.ts

@@ -20,9 +20,12 @@ export declare const TextVariant: Pick<{
     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" | "NEUTRAL_SUBTLE" | "ACCENT" | "SUCCESS" | "DANGER">;
 export declare class OdxText extends CustomElement {
     strong: boolean;

package/dist/components/tile/tile.d.ts

@@ -12,9 +12,12 @@ export declare const TileVariant: Pick<{
     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">;
 export type TileAlignment = ValuesOf<typeof TileAlignment>;
 export declare const TileAlignment: Pick<{

package/dist/components/toast/toast.d.ts

@@ -13,9 +13,12 @@ export declare const ToastVariant: Pick<{
     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" | "SUCCESS" | "WARNING" | "DANGER">;
 export declare class OdxToast extends CustomElement {
     icon?: OdxIconName;

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

@@ -8,11 +8,19 @@ declare global {
         'odx-toggle-button': OdxToggleButton;
     }
 }
-export type ToggleButtonAppearance = ValuesOf<typeof ToggleButtonAppearance>;
-export declare const ToggleButtonAppearance: Pick<{
-    readonly FILL: "fill";
+export type ToggleButtonVariant = ValuesOf<typeof ToggleButtonVariant>;
+export declare const ToggleButtonVariant: 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";
-}, "FILL" | "GHOST">;
+}, "ACCENT" | "GHOST">;
 export type ToggleButtonSize = ValuesOf<typeof ToggleButtonSize>;
 export declare const ToggleButtonSize: Pick<{
     readonly XS: "xs";
@@ -24,13 +32,13 @@ export declare const ToggleButtonSize: Pick<{
 }, "SM" | "MD" | "LG">;
 declare const OdxToggleButton_base: import('../../utils/main.js').Constructor<CheckboxControl> & typeof CustomElement;
 export declare class OdxToggleButton extends OdxToggleButton_base {
-    appearance: ToggleButtonAppearance;
     label?: string;
     labelChecked?: string;
     labelPlacement?: TooltipPlacement;
     icon?: OdxIconName;
     iconChecked?: OdxIconName;
     size: ToggleButtonSize;
+    variant: ToggleButtonVariant;
     connectedCallback(): void;
     protected render(): TemplateResult;
     protected willUpdate(props: PropertyValues<this>): void;

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

@@ -1,6 +1,6 @@
 import { CustomElement, RadioGroupControl } from '../../main.js';
 import { PropertyValues, TemplateResult } from 'lit';
-import { OdxToggleButton, ToggleButtonAppearance, ToggleButtonSize } from '../toggle-button/toggle-button.js';
+import { OdxToggleButton, ToggleButtonSize, ToggleButtonVariant } from '../toggle-button/toggle-button.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-toggle-button-group': OdxToggleButtonGroup;
@@ -9,8 +9,8 @@ declare global {
 declare const OdxToggleButtonGroup_base: import('../../utils/types.js').Constructor<RadioGroupControl<OdxToggleButton>> & typeof CustomElement;
 export declare class OdxToggleButtonGroup extends OdxToggleButtonGroup_base {
     #private;
-    appearance: ToggleButtonAppearance;
     size: ToggleButtonSize;
+    variant?: ToggleButtonVariant;
     constructor();
     isControl(element: HTMLElement): element is OdxToggleButton;
     protected render(): TemplateResult | string;

package/dist/components/tooltip/tooltip.d.ts

@@ -36,9 +36,12 @@ export declare const TooltipVariant: Pick<{
     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" | "ACCENT" | "DANGER">;
 export declare class OdxTooltip extends PopoverHost {
     #private;