sit-onyx 1.0.0-beta.99 → 1.0.0

package/README.md

@@ -1,9 +1,5 @@
 <div align="center" style="text-align: center">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" type="image/svg+xml" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-light.svg">
-    <source media="(prefers-color-scheme: light)" type="image/svg+xml" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg">
-    <img alt="onyx logo" src="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg" width="160px">
-  </picture>
+  <img alt="onyx logo" src="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo.svg" height="96px">
 </div>
 
 <br>

package/dist/components/OnyxAccordion/OnyxAccordion.d.vue.ts

@@ -0,0 +1,26 @@
+import { OnyxAccordionProps } from './types.js';
+declare const _default: <TValue extends PropertyKey>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: TValue[]) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & OnyxAccordionProps<TValue> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        /**
+         * Displays OnyxAccordionItem components.
+         */
+        default(): unknown;
+    }> & {
+        /**
+         * Displays OnyxAccordionItem components.
+         */
+        default(): unknown;
+    };
+    emit: (evt: "update:modelValue", value: TValue[]) => void;
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/OnyxAccordion/types.d.ts

@@ -0,0 +1,45 @@
+import { InjectionKey, Ref } from 'vue';
+import { DensityProp } from '../../composables/density.js';
+import { SkeletonInjected } from '../../composables/useSkeletonState.js';
+import { Nullable } from '../../types/index.js';
+export type OnyxAccordionProps<TValue extends PropertyKey> = DensityProp & {
+    /**
+     * Currently opened items. Will include the `value` property of the nested `OnyxAccordionItems`.
+     */
+    modelValue?: Nullable<TValue[]>;
+    /**
+     *  if `true`, only one accordion item can be open at the same time.
+     */
+    exclusive?: boolean;
+    /**
+     * Disable the accordion.
+     */
+    disabled?: boolean;
+    /**
+     * If set, the specified number of skeleton accordions will be shown.
+     */
+    skeleton?: SkeletonInjected;
+    /**
+     * Accordion type. Will have different visual representations.
+     * Please note that "nested-large" and "nested-small" should only be used inside other components like e.g. the [OnyxSidebar](https://storybook.onyx.schwarz/?path=/docs/navigation-sidebar--default).
+     */
+    type?: AccordionType;
+};
+export type AccordionInjectionKey<TValue extends PropertyKey> = InjectionKey<{
+    /**
+     * IDs of currently open AccordionItems.
+     */
+    openItems: Readonly<Ref<PropertyKey[]>>;
+    /**
+     * Function to update the open state of an AccordionItem.
+     * @param id - The unique ID of the AccordionItem.
+     * @param value - Whether the AccordionItem should be open (true) or closed (false).
+     */
+    updateOpen: (id: TValue, value: boolean) => void;
+    disabled: Ref<boolean>;
+    skeleton: Ref<SkeletonInjected>;
+    type: Ref<AccordionType>;
+}>;
+export declare const ACCORDION_INJECTION_KEY: AccordionInjectionKey<PropertyKey>;
+export declare const ACCORDION_TYPES: readonly ["default", "nested-large", "nested-small", "card"];
+export type AccordionType = (typeof ACCORDION_TYPES)[number];

package/dist/components/OnyxAccordionItem/OnyxAccordionItem.d.vue.ts

@@ -0,0 +1,37 @@
+import { OnyxAccordionItemProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Displays the header content.
+         */
+        header(): unknown;
+        /**
+         * Displays the panel content.
+         */
+        default?(): unknown;
+    }> & {
+        /**
+         * Displays the header content.
+         */
+        header(): unknown;
+        /**
+         * Displays the panel content.
+         */
+        default?(): unknown;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxAccordionItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxAccordionItemProps> & Readonly<{}>, {
+    skeleton: import('../../composables/useSkeletonState.js', { with: { "resolution-mode": "import" } }).SkeletonInjected;
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/OnyxAccordionItem/types.d.ts

@@ -0,0 +1,17 @@
+import { DensityProp } from '../../composables/density.js';
+import { SkeletonInjected } from '../../composables/useSkeletonState.js';
+export type OnyxAccordionItemProps = DensityProp & {
+    /**
+     * Value that is used inside the `OnyxAccordion` when the item is open.
+     * Must be unique across one accordion.
+     */
+    value: PropertyKey;
+    /**
+     * Whether the accordion is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show a skeleton accordion.
+     */
+    skeleton?: SkeletonInjected;
+};

package/dist/components/OnyxAlertModal/OnyxAlertModal.d.vue.ts

@@ -0,0 +1,69 @@
+import { Nullable } from '../../types/utils.js';
+import { OnyxAlertModalProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Modal content.
+         */
+        default(): unknown;
+        /**
+         * Optional slot to override the headline with custom content.
+         * If unset, the `label` property will be shown.
+         */
+        headline?(bindings: Pick<OnyxAlertModalProps, "label">): unknown;
+        /**
+         * Slot to display custom actions at the bottom of the modal, e.g. buttons for confirm or cancelling the current user workflow.
+         * Focus is automatically set to the first focusable element inside the modal dialog.
+         * If this is a button, it should be the least destructive action, to prevent users from accidentally confirming non-reversible actions.
+         *
+         * If you have to, you can use the `autofocus` button attribute to force the initial focus on another button.
+         *
+         * @example
+         * ```vue
+         * <OnyxButton label="Cancel" color="neutral" mode="plain" autofocus />
+         * ```
+         */
+        actions?(): unknown;
+    }> & {
+        /**
+         * Modal content.
+         */
+        default(): unknown;
+        /**
+         * Optional slot to override the headline with custom content.
+         * If unset, the `label` property will be shown.
+         */
+        headline?(bindings: Pick<OnyxAlertModalProps, "label">): unknown;
+        /**
+         * Slot to display custom actions at the bottom of the modal, e.g. buttons for confirm or cancelling the current user workflow.
+         * Focus is automatically set to the first focusable element inside the modal dialog.
+         * If this is a button, it should be the least destructive action, to prevent users from accidentally confirming non-reversible actions.
+         *
+         * If you have to, you can use the `autofocus` button attribute to force the initial focus on another button.
+         *
+         * @example
+         * ```vue
+         * <OnyxButton label="Cancel" color="neutral" mode="plain" autofocus />
+         * ```
+         */
+        actions?(): unknown;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxAlertModalProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (open: Nullable<boolean>) => any;
+}, string, import('vue').PublicProps, Readonly<OnyxAlertModalProps> & Readonly<{
+    "onUpdate:open"?: ((open: Nullable<boolean>) => any) | undefined;
+}>, {
+    icon: Pick<import('../OnyxIcon/types.js', { with: { "resolution-mode": "import" } }).OnyxIconProps, "icon" | "color">;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/OnyxAlertModal/types.d.ts

@@ -0,0 +1,8 @@
+import { OnyxBasicDialogProps } from '../OnyxBasicDialog/types.js';
+import { OnyxIconProps } from '../OnyxIcon/types.js';
+export type OnyxAlertModalProps = Pick<OnyxBasicDialogProps, "density" | "nonDismissible" | "label" | "open"> & {
+    /**
+     * Optional icon to show.
+     */
+    icon?: Pick<OnyxIconProps, "icon" | "color">;
+};

package/dist/components/OnyxAppLayout/OnyxAppLayout.d.vue.ts

@@ -0,0 +1,50 @@
+import { OnyxAppLayoutProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Page content area of the application. Recommended component: [OnyxPageLayout](https://storybook.onyx.schwarz/?path=/docs/layout-pagelayout--docs).
+         *
+         * For semantic HTML, it is recommend to use HTML elements like `<main>`
+         */
+        default(): unknown;
+        /**
+         * Navigation area of the application. Recommended components:
+         * - for top alignment: [OnyxNavBar](https://storybook.onyx.schwarz/?path=/docs/navigation-navbar--docs)
+         * - for left alignment: no onyx component yet, create your own custom one
+         *
+         * For implementing page-level sidebars, please use the [OnyxPageLayout](https://onyx.schwarz/?path=/story/layout-pagelayout--sidebar).
+         * For semantic HTML, it is recommended to use HTML elements like `<header>` and `<nav>` here, which is already the case when using the above recommended components.
+         */
+        navBar?(): unknown;
+    }> & {
+        /**
+         * Page content area of the application. Recommended component: [OnyxPageLayout](https://storybook.onyx.schwarz/?path=/docs/layout-pagelayout--docs).
+         *
+         * For semantic HTML, it is recommend to use HTML elements like `<main>`
+         */
+        default(): unknown;
+        /**
+         * Navigation area of the application. Recommended components:
+         * - for top alignment: [OnyxNavBar](https://storybook.onyx.schwarz/?path=/docs/navigation-navbar--docs)
+         * - for left alignment: no onyx component yet, create your own custom one
+         *
+         * For implementing page-level sidebars, please use the [OnyxPageLayout](https://onyx.schwarz/?path=/story/layout-pagelayout--sidebar).
+         * For semantic HTML, it is recommended to use HTML elements like `<header>` and `<nav>` here, which is already the case when using the above recommended components.
+         */
+        navBar?(): unknown;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxAppLayoutProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxAppLayoutProps> & Readonly<{}>, {
+    navBarAlignment: "top" | "left";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/OnyxAppLayout/types.d.ts

@@ -1,4 +1,6 @@
 export type OnyxAppLayoutProps = {
-    /** Whether the nav bar will stick to the left or to the top of the app */
+    /**
+     * Alignment/position of the `navBar` slot.
+     */
     navBarAlignment?: "top" | "left";
 };

package/dist/components/OnyxAvatar/OnyxAvatar.d.vue.ts

@@ -0,0 +1,5 @@
+import { OnyxAvatarProps } from './types.js';
+declare const _default: import('vue').DefineComponent<OnyxAvatarProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxAvatarProps> & Readonly<{}>, {
+    size: "16px" | "24px" | "32px" | "48px" | "64px" | "96px";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+export default _default;

package/dist/components/OnyxAvatar/types.d.ts

@@ -1,13 +1,25 @@
-import type { IconSize, IconSizeProp } from "../OnyxIcon/types";
+import { IconSize, IconSizeProp } from '../OnyxIcon/types.js';
 export type OnyxAvatarProps = IconSizeProp<Exclude<IconSize, "12px">> & {
     /**
-     * Label (e.g. the user name), required for accessibility.
-     * Will also determine the displayed initials.
+     * Full user name. Will determine the displayed initials.
+     *
+     * @example "John Doe"
      */
-    label: string;
+    fullName: DisplayName;
     /**
      * Image URL to show. If unset or an error occurs while loading, a fallback will be displayed
      * with the initials.
      */
     src?: string;
+    /**
+     * Initials to use. If unset, they will be inferred automatically from the `fullName` property.
+     */
+    initials?: string;
+};
+export type DisplayName = string | {
+    name: string;
+    /**
+     * Locale of the given name. Will be used for formatting.
+     */
+    locale: string;
 };

package/dist/components/OnyxAvatarStack/{OnyxAvatarStack.vue.d.ts → OnyxAvatarStack.d.vue.ts}

@@ -15,7 +15,7 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/OnyxBadge/{OnyxBadge.vue.d.ts → OnyxBadge.d.vue.ts}

@@ -1,4 +1,4 @@
-import type { OnyxBadgeProps } from "./types";
+import { OnyxBadgeProps } from './types.js';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
@@ -16,10 +16,10 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<OnyxBadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxBadgeProps> & Readonly<{}>, {
-    color: import("../../index.ts").OnyxColor;
+declare const __VLS_component: import('vue').DefineComponent<OnyxBadgeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxBadgeProps> & Readonly<{}>, {
+    color: import('../../index.js', { with: { "resolution-mode": "import" } }).OnyxColor;
     dot: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/OnyxBadge/types.d.ts

@@ -1,5 +1,5 @@
-import type { DensityProp } from "../../composables/density";
-import type { OnyxColor } from "../../types/colors";
+import { DensityProp } from '../../composables/density.js';
+import { OnyxColor } from '../../types/colors.js';
 export type OnyxBadgeProps = DensityProp & {
     /**
      * The color of the badge.

package/dist/components/{OnyxDialog/OnyxDialog.vue.d.ts → OnyxBasicDialog/OnyxBasicDialog.d.vue.ts}

@@ -1,4 +1,4 @@
-import type { OnyxDialogProps } from "./types";
+import { OnyxBasicDialogProps } from './types.js';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
@@ -18,19 +18,24 @@ declare function __VLS_template(): {
     };
     refs: {
         dialogRef: HTMLDialogElement;
+        contentRef: HTMLDivElement;
     };
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<OnyxDialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: () => any;
-}, string, import("vue").PublicProps, Readonly<OnyxDialogProps> & Readonly<{
-    onClose?: (() => any) | undefined;
+declare const __VLS_component: import('vue').DefineComponent<OnyxBasicDialogProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<OnyxBasicDialogProps> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
 }>, {
-    open: boolean;
     alert: boolean;
     modal: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    nonDismissible: boolean;
+    alignment: import('./types.js', { with: { "resolution-mode": "import" } }).DialogAlignment;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    dialogRef: HTMLDialogElement;
+    contentRef: HTMLDivElement;
+}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/OnyxBasicDialog/types.d.ts

@@ -0,0 +1,35 @@
+import { DensityProp } from '../../composables/density.js';
+import { Nullable } from '../../types/index.js';
+export type OnyxBasicDialogProps = DensityProp & {
+    /**
+     * (Aria) label that describes the dialog. Required for accessibility / screen readers.
+     */
+    label: string;
+    /**
+     * Whether the dialog is open.
+     */
+    open?: Nullable<boolean>;
+    /**
+     * Whether the dialog is a modal.
+     * If `true`, interaction with the rest of the page is prevented and a backdrop is displayed.
+     * Also the `close` event is emitted when pressing "Escape".
+     */
+    modal?: boolean;
+    /**
+     * Whether to prevent closing the dialog when clicking outside or pressing the `Escape` key.
+     */
+    nonDismissible?: boolean;
+    /**
+     * Whether the dialog is an [alert dialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/).
+     * Should be set for better accessibility / screen reader support when the dialog
+     * interrupts the user's workflow to communicate an important message and acquire a response,
+     * e.g. a delete confirmation.
+     */
+    alert?: boolean;
+    /**
+     * How to align the dialog horizontally. If "left" or "right", the modal will also be made full height.
+     */
+    alignment?: DialogAlignment;
+};
+export declare const DIALOG_ALIGNMENTS: readonly ["left", "center", "right"];
+export type DialogAlignment = (typeof DIALOG_ALIGNMENTS)[number];

package/dist/components/OnyxBasicPopover/OnyxBasicPopover.d.vue.ts

@@ -0,0 +1,64 @@
+import { AriaAttributes } from 'vue';
+import { OnyxBasicPopoverProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * The always visible parent to which the popover is aligned.
+         * `trigger` can optionally set to a button to explicitly connect the the button and popover.
+         */
+        default(params: {
+            trigger: AriaAttributes;
+        }): unknown;
+        /**
+         * Content shown in the popover when it is expanded.
+         */
+        content(): unknown;
+    }> & {
+        /**
+         * The always visible parent to which the popover is aligned.
+         * `trigger` can optionally set to a button to explicitly connect the the button and popover.
+         */
+        default(params: {
+            trigger: AriaAttributes;
+        }): unknown;
+        /**
+         * Content shown in the popover when it is expanded.
+         */
+        content(): unknown;
+    };
+    refs: {
+        popoverWrapper: HTMLDivElement;
+        popover: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxBasicPopoverProps, {
+    /**
+     * Actual used popover position.
+     */
+    popoverPosition: import('vue').ComputedRef<"top" | "left" | "right" | "top right" | "top left" | "bottom" | "bottom right" | "bottom left">;
+    /**
+     * Actual used popover alignment.
+     */
+    popoverAlignment: import('vue').ComputedRef<import('../../composables/useOpenAlignment.js', { with: { "resolution-mode": "import" } }).OpenAlignment>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<OnyxBasicPopoverProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    role: "menu" | "listbox" | "tree" | "grid" | "dialog";
+    alignment: import('../../composables/useOpenAlignment.js', { with: { "resolution-mode": "import" } }).OpenAlignment | "auto";
+    position: import('../../composables/useAnchorPositionPolyfill.js', { with: { "resolution-mode": "import" } }).AnchorPosition | "auto";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    popoverWrapper: HTMLDivElement;
+    popover: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/OnyxBasicPopover/types.d.ts

@@ -0,0 +1,37 @@
+import { AnchorPosition } from '../../composables/useAnchorPositionPolyfill.js';
+import { OpenAlignment } from '../../composables/useOpenAlignment.js';
+import { Nullable } from '../../types/utils.js';
+export type OnyxBasicPopoverProps = {
+    /**
+     * Aria label for the popover.
+     */
+    label: string;
+    /**
+     * Indicates whether the element is expanded or collapsed.
+     */
+    open?: Nullable<boolean>;
+    /**
+     * How to position the popover relative to the parent element.
+     */
+    position?: AnchorPosition | "auto";
+    /**
+     * Specifies how to align the popover relative to the parent element.
+     * This is applicable only for top and bottom positioning.
+     */
+    alignment?: OpenAlignment | "auto";
+    /**
+     * If `true`, the popover will match the width of the parent/slot element.
+     */
+    fitParent?: boolean;
+    /**
+     * Whether the popover is disabled and can not be opened.
+     */
+    disabled?: boolean;
+    /**
+     * Role for the popover.
+     * This can be used to control the ARIA role for accessibility.
+     *
+     * @default "dialog"
+     */
+    role?: "menu" | "listbox" | "tree" | "grid" | "dialog";
+};

package/dist/components/OnyxBottomBar/OnyxBottomBar.d.vue.ts

@@ -0,0 +1,36 @@
+import { OnyxBottomBarProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Bottom bar content. This slot is left aligned and should be used by buttons and icon buttons.
+         */
+        left?(): unknown;
+        /**
+         * Bottom bar content. This slot is right aligned and should be used by buttons and icon buttons.
+         */
+        default?(): unknown;
+    }> & {
+        /**
+         * Bottom bar content. This slot is left aligned and should be used by buttons and icon buttons.
+         */
+        left?(): unknown;
+        /**
+         * Bottom bar content. This slot is right aligned and should be used by buttons and icon buttons.
+         */
+        default?(): unknown;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxBottomBarProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxBottomBarProps> & Readonly<{}>, {
+    hideBorder: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/OnyxBottomBar/types.d.ts

@@ -0,0 +1,7 @@
+import { DensityProp } from '../../composables/density.js';
+export type OnyxBottomBarProps = DensityProp & {
+    /**
+     * Whether to remove the top border / separator.
+     */
+    hideBorder?: boolean;
+};

package/dist/components/OnyxBreadcrumb/OnyxBreadcrumb.d.vue.ts

@@ -0,0 +1,32 @@
+import { OnyxBreadcrumbProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Breadcrumb items (see `OnyxBreadcrumbItem` component).
+         */
+        default(): unknown;
+    }> & {
+        /**
+         * Breadcrumb items (see `OnyxBreadcrumbItem` component).
+         */
+        default(): unknown;
+    };
+    refs: {
+        moreListRef: HTMLDivElement;
+    };
+    rootEl: HTMLElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxBreadcrumbProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxBreadcrumbProps> & Readonly<{}>, {
+    container: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    moreListRef: HTMLDivElement;
+}, HTMLElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/OnyxBreadcrumb/types.d.ts

@@ -0,0 +1,32 @@
+import { InjectionKey, Ref, TeleportProps } from 'vue';
+import { DensityProp } from '../../composables/density.js';
+import { MoreListInjectionKey } from '../../composables/useMoreList.js';
+export declare const BREADCRUMB_MORE_LIST_INJECTION_KEY: MoreListInjectionKey;
+export declare const BREADCRUMB_MORE_LIST_TARGET_INJECTION_KEY: InjectionKey<Ref<TeleportProps["to"]>>;
+export type OnyxBreadcrumbProps = DensityProp & {
+    /**
+     * If `true`, the component will be shown inside a styled container.
+     * Recommended when used together with a nav bar or sidebar.
+     */
+    container?: boolean;
+    /**
+     * Custom home item.
+     */
+    home?: BreadcrumbHomeItem;
+    /**
+     * Whether to show all nested breadcrumb items as skeleton.
+     */
+    skeleton?: boolean;
+};
+export type BreadcrumbHomeItem = {
+    /**
+     * Text label for the home item. Will show the passed label instead of an icon.
+     */
+    label?: string;
+    /**
+     * Link of the home item.
+     *
+     * @default "/"
+     */
+    link?: string;
+};