sit-onyx 1.0.0-beta.98 → 1.0.0-dev-20250912111044

package/dist/components/OnyxNavBar/modules/OnyxNavItem/types.d.ts

@@ -1,2 +1,19 @@
-import type { OnyxNavButtonProps } from "../OnyxNavButton/types";
-export type OnyxNavItemProps = OnyxNavButtonProps;
+import { Nullable } from '../../../../types/index.js';
+import { WithLinkProp } from '../../../OnyxRouterLink/types.js';
+export type OnyxNavItemProps = WithLinkProp<true> & {
+    /**
+     * Label to show inside the Nav item.
+     * You can use the `default` slot to display custom content.
+     */
+    label: string;
+    /**
+     * Whether the nav item is currently active.
+     * If any nested option is active, the parent nav item will also be marked as active.
+     * If "auto" and a [router](https://onyx.schwarz/development/router.html) is provided, the active state will be determined automatically based on the current route.
+     */
+    active?: boolean | "auto";
+    /**
+     * Controls whether child elements are open.
+     */
+    open?: Nullable<boolean>;
+};

package/dist/components/OnyxNavBar/modules/OnyxNavItemFacade/OnyxNavItemFacade.d.vue.ts

@@ -0,0 +1,41 @@
+import { OnyxMenuItemProps } from '../OnyxMenuItem/types.js';
+type __VLS_Props = OnyxMenuItemProps & {
+    /**
+     * The render context of the nav item.
+     * Styling is changed based on the context prop.
+     */
+    context: "mobile" | "list" | "navbar";
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Button/link text and additional inline content.
+         */
+        default(): unknown;
+        /**
+         * Children items of the nav item.
+         */
+        children(): unknown;
+    }> & {
+        /**
+         * Button/link text and additional inline content.
+         */
+        default(): unknown;
+        /**
+         * Children items of the nav item.
+         */
+        children(): unknown;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/OnyxNavBar/modules/OnyxTimer/OnyxTimer.d.vue.ts

@@ -0,0 +1,12 @@
+import { OnyxTimerProps } from './types.js';
+declare const _default: import('vue').DefineComponent<OnyxTimerProps, {
+    /**
+     * Time (in milliseconds) that the timer has left.
+     */
+    timeLeft: Readonly<import('vue').Ref<number, number>>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    timerEnded: () => any;
+}, string, import('vue').PublicProps, Readonly<OnyxTimerProps> & Readonly<{
+    onTimerEnded?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/OnyxNavBar/modules/OnyxUserMenu/{OnyxUserMenu.vue.d.ts → OnyxUserMenu.d.vue.ts}

@@ -1,4 +1,4 @@
-import type { OnyxUserMenuProps } from "./types";
+import { OnyxUserMenuProps } from './types.js';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
@@ -24,13 +24,13 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<OnyxUserMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:flyoutOpen": (isOpen: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<OnyxUserMenuProps> & Readonly<{
-    "onUpdate:flyoutOpen"?: ((isOpen: boolean) => any) | undefined;
+declare const __VLS_component: import('vue').DefineComponent<OnyxUserMenuProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:flyoutOpen": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<OnyxUserMenuProps> & Readonly<{
+    "onUpdate:flyoutOpen"?: ((value: boolean) => any) | undefined;
 }>, {
-    flyoutOpen: import("../../../../composables/useManagedState").ManagedProp<boolean>;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    flyoutOpen: boolean | null;
+}, {}, {}, {}, 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 & {

package/dist/components/OnyxNavBar/modules/OnyxUserMenu/{UserMenuLayout.vue.d.ts → UserMenuLayout.d.vue.ts}

@@ -1,20 +1,22 @@
-import { type ManagedProp } from "../../../../composables/useManagedState";
-import type { SelectOptionValue } from "../../../../types";
+import { Nullable, SelectOptionValue } from '../../../../types/index.js';
 declare const _default: <TValue extends SelectOptionValue = SelectOptionValue>(__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:flyoutOpen"?: ((isOpen: boolean) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:flyoutOpen"> & Partial<{}> & {
+        readonly "onUpdate:flyoutOpen"?: ((value: boolean) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:flyoutOpen"> & {
         /**
          * If the mobile layout should be used instead of the desktop layout.
          */
         isMobile: boolean;
         /**
-         * Controls the open state of the user menu flyout.
-         * Will be managed automatically, if not provided as a prop.
+         * Controls whether the flyout menu is open.
          */
-        flyoutOpen?: ManagedProp<boolean>;
-    }> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+        flyoutOpen?: Nullable<boolean>;
+        /**
+         * Whether the flyout is disabled and can not be opened.
+         */
+        disabled?: boolean;
+    } & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: Readonly<{
         /**
@@ -43,10 +45,8 @@ declare const _default: <TValue extends SelectOptionValue = SelectOptionValue>(_
         options?(): unknown;
         footer?(): unknown;
     };
-    emit: (evt: "update:flyoutOpen", isOpen: boolean) => void;
-}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}> & {
+    emit: (evt: "update:flyoutOpen", value: boolean) => void;
+}>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;

package/dist/components/OnyxNavBar/modules/OnyxUserMenu/types.d.ts

@@ -1,20 +1,26 @@
-import type { ManagedProp } from "../../../../composables/useManagedState";
+import { Nullable } from '../../../../types/index.js';
+import { OnyxAvatarProps } from '../../../OnyxAvatar/types.js';
 export type OnyxUserMenuProps = {
     /**
-     * User name.
+     * Full user name.
+     *
+     * @example "John Doe"
      */
-    username: string;
+    fullName: string;
     /**
      * User avatar. If unset or an error occurs while loading, a fallback will be displayed with the username initials.
      */
-    avatar?: string;
+    avatar?: string | Omit<OnyxAvatarProps, "size">;
     /**
      * Optional user description that is displayed when the menu is opened.
      */
     description?: string;
     /**
-     * If the flyout is expanded or not. Only has an effect in desktop (non-mobile) mode.
-     * If `undefined`, the state will be managed internally.
+     * Controls whether the flyout menu is open.
      */
-    flyoutOpen?: ManagedProp<boolean>;
+    flyoutOpen?: Nullable<boolean>;
+    /**
+     * Whether the user menu is disabled and can not be opened.
+     */
+    disabled?: boolean;
 };

package/dist/components/OnyxNavBar/modules/index.d.ts

@@ -1,17 +1,17 @@
-export { default as OnyxColorSchemeDialog } from "./OnyxColorSchemeDialog/OnyxColorSchemeDialog.vue";
-export * from "./OnyxColorSchemeDialog/types";
-export { default as OnyxColorSchemeMenuItem } from "./OnyxColorSchemeMenuItem/OnyxColorSchemeMenuItem.vue";
-export * from "./OnyxColorSchemeMenuItem/types";
-export { default as OnyxFlyoutMenu } from "./OnyxFlyoutMenu/OnyxFlyoutMenu.vue";
-export { default as OnyxMenuItem } from "./OnyxMenuItem/OnyxMenuItem.vue";
-export * from "./OnyxMenuItem/types";
-export { default as OnyxNavButton } from "./OnyxNavButton/OnyxNavButton.vue";
-export * from "./OnyxNavButton/types";
-export { default as OnyxNavItem } from "./OnyxNavItem/OnyxNavItem.vue";
-export * from "./OnyxNavItem/types";
-export { default as OnyxNavSeparator } from "./OnyxNavSeparator/OnyxNavSeparator.vue";
-export * from "./OnyxNavSeparator/types";
-export { default as OnyxTimer } from "./OnyxTimer/OnyxTimer.vue";
-export * from "./OnyxTimer/types";
-export { default as OnyxUserMenu } from "./OnyxUserMenu/OnyxUserMenu.vue";
-export * from "./OnyxUserMenu/types";
+export { default as OnyxColorSchemeDialog } from './OnyxColorSchemeDialog/OnyxColorSchemeDialog.vue';
+export * from './OnyxColorSchemeDialog/types.js';
+export { default as OnyxColorSchemeMenuItem } from './OnyxColorSchemeMenuItem/OnyxColorSchemeMenuItem.vue';
+export * from './OnyxColorSchemeMenuItem/types.js';
+export { default as OnyxFlyoutMenu } from './OnyxFlyoutMenu/OnyxFlyoutMenu.vue';
+export { default as OnyxLanguageMenuItem } from './OnyxLanguageMenuItem/OnyxLanguageMenuItem.vue';
+export * from './OnyxLanguageMenuItem/types.js';
+export { default as OnyxMenuItem } from './OnyxMenuItem/OnyxMenuItem.vue';
+export * from './OnyxMenuItem/types.js';
+export { default as OnyxNavItem } from './OnyxNavItem/OnyxNavItem.vue';
+export * from './OnyxNavItem/types.js';
+export * from './OnyxNavItem/types.js';
+export { default as OnyxNavItemFacade } from './OnyxNavItemFacade/OnyxNavItemFacade.vue';
+export { default as OnyxTimer } from './OnyxTimer/OnyxTimer.vue';
+export * from './OnyxTimer/types.js';
+export { default as OnyxUserMenu } from './OnyxUserMenu/OnyxUserMenu.vue';
+export * from './OnyxUserMenu/types.js';

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

@@ -1,25 +1,29 @@
-import type { OnyxBreakpoint } from "@sit-onyx/shared/breakpoints";
-import type { ComputedRef, InjectionKey } from "vue";
-import type { MoreListInjectionKey } from "../../composables/useMoreList";
-import type { OnyxNavAppAreaProps } from "../OnyxNavAppArea/types";
-export type OnyxNavBarProps = Omit<OnyxNavAppAreaProps, "label"> & {
+import { ComputedRef, InjectionKey, Ref, TeleportProps } from 'vue';
+import { MoreListInjectionKey } from '../../composables/useMoreList.js';
+import { OnyxBreakpoint } from '../../utils/breakpoints.js';
+import { OnyxNavAppAreaProps } from '../OnyxNavAppArea/types.js';
+export type OnyxNavBarProps = Pick<OnyxNavAppAreaProps, "appName" | "logoUrl"> & {
     /**
      * Whether to show a back button.
      */
     withBackButton?: boolean;
     /**
-     * Custom (aria) label for the app click area.
-     * @default Translated "Go to home" depending on the current locale.
+     * Override app area.
+     * @default Link to "/" route with a translated "Go to home" aria-label depending on the current locale.
      */
-    appAreaLabel?: string;
+    appArea?: Omit<OnyxNavAppAreaProps, "appName" | "logoUrl">;
     /**
-     * Breakpoint name when the nav bar should switch into mobile mode.
-     * Will switch if **smaller** than the given breakpoint.
-     * Can be either a pre-defined onyx breakpoint or custom width in pixels.
+     *
+     * Determines if and when the `OnyxNavBar` should render in mobile mode.
+     *
+     * `mobile` prop can be one of the following;
+     *  - a `boolean`: The NavBar renders in mobile mode, when `true`.
+     *  - a `OnyxBreakpoint`: The NavBar renders in mobile mode, when the current breakpoint matches or is smaller.
+     *  - a `number`: The NavBar renders in mobile when the viewport width is smaller than the provided value.
      *
      * @see [onyx docs](https://onyx.schwarz/development/breakpoints.html) for more information.
      */
-    mobileBreakpoint?: OnyxBreakpoint | number;
+    mobile?: boolean | OnyxBreakpoint | number;
 };
 /**
  * [Vue injection key](https://vuejs.org/guide/components/provide-inject) that is provided by the nav bar
@@ -28,4 +32,41 @@ export type OnyxNavBarProps = Omit<OnyxNavAppAreaProps, "label"> & {
  * @returns `true` if mobile, `false` otherwise
  */
 export declare const MOBILE_NAV_BAR_INJECTION_KEY: InjectionKey<ComputedRef<boolean>>;
+/**
+ * [Vue injection key](https://vuejs.org/guide/components/provide-inject) that is provided by the nav items
+ * to communicate child nav items whether they should render as flyout or list item.
+ *
+ * @returns `true` if outermost parent, `false` otherwise
+ */
+export declare const NAV_BAR_IS_TOP_LEVEL_INJECTION_KEY: InjectionKey<boolean>;
 export declare const NAV_BAR_MORE_LIST_INJECTION_KEY: MoreListInjectionKey;
+/**
+ * [Vue injection key](https://vuejs.org/guide/components/provide-inject) that is provided by the nav bar to communicate the teleport target id for navitems that should be put into the more list.
+ */
+export declare const NAV_BAR_MORE_LIST_TARGET_INJECTION_KEY: InjectionKey<Ref<TeleportProps["to"]>>;
+export type OnyxNavBarSlots = {
+    /**
+     * [`OnyxNavItem`](/docs/navigation-navbar-modules-navitem--docs) components should be placed and nested here to build the navigation.
+     */
+    default?: () => unknown;
+    /**
+     * Optional slot to override the app area content (logo and app name, e.g. with a custom icon / `OnyxIcon` component).
+     */
+    appArea?: () => unknown;
+    /**
+     * Optional context area on the right to display additional (global) components, like user login, global settings etc.
+     */
+    contextArea?: () => unknown;
+    /**
+     * Same as `contextArea` slot on desktop (will be placed next to it) but on mobile, the components inside will stay
+     * in the mobile nav bar itself and will not be collapsed into the context menu button.
+     *
+     * Global actions like e.g. search or notification center can be placed here that should always be directly accessible on mobile.
+     */
+    globalContextArea?: () => unknown;
+    /**
+     * Label for displaying the currently active page in mobile mode.
+     * If a child of a nav item is active, it should displayed the child label instead of the parent.
+     */
+    mobileActivePage?: () => unknown;
+};

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

@@ -0,0 +1,48 @@
+import { OnyxNotificationCardProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Notification content/description.
+         */
+        default(): unknown;
+        /**
+         * Optional custom footer actions/buttons.
+         */
+        actions?(): unknown;
+        /**
+         * Optional custom header actions to display inside a flyout menu.
+         * Will only be shown when hovering the notification card or focussing via keyboard.
+         * You must only put [OnyxMenuItem](https://storybook.onyx.schwarz/?path=/docs/basic-menuitem--docs) components here.
+         */
+        headerActions?: unknown;
+    }> & {
+        /**
+         * Notification content/description.
+         */
+        default(): unknown;
+        /**
+         * Optional custom footer actions/buttons.
+         */
+        actions?(): unknown;
+        /**
+         * Optional custom header actions to display inside a flyout menu.
+         * Will only be shown when hovering the notification card or focussing via keyboard.
+         * You must only put [OnyxMenuItem](https://storybook.onyx.schwarz/?path=/docs/basic-menuitem--docs) components here.
+         */
+        headerActions?: unknown;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxNotificationCardProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxNotificationCardProps> & Readonly<{}>, {
+    skeleton: import('../../composables/useSkeletonState.js', { with: { "resolution-mode": "import" } }).SkeletonInjected;
+}, {}, {}, {}, 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/OnyxNotificationCard/types.d.ts

@@ -0,0 +1,25 @@
+import { DensityProp } from '../../composables/density.js';
+import { SkeletonInjected } from '../../composables/useSkeletonState.js';
+import { DateValue } from '../OnyxDatePicker/types.js';
+export type OnyxNotificationCardProps = DensityProp & {
+    /**
+     * Notification headline/title.
+     */
+    headline: string;
+    /**
+     * Time when the notification was created.
+     */
+    createdAt: DateValue;
+    /**
+     * Whether the notification is unread / not acknowledged by the user yet.
+     */
+    unread?: boolean;
+    /**
+     * Optional icon to show.
+     */
+    icon?: string;
+    /**
+     * Whether to show a skeleton.
+     */
+    skeleton?: SkeletonInjected;
+};

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

@@ -0,0 +1,29 @@
+import { OnyxNotificationDotProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Main content where the dot will be positioned in relation to.
+         */
+        default(): unknown;
+    }> & {
+        /**
+         * Main content where the dot will be positioned in relation to.
+         */
+        default(): unknown;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxNotificationDotProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxNotificationDotProps> & Readonly<{}>, {
+    hidden: boolean;
+    color: "primary" | "neutral" | "danger" | "warning" | "success" | "info";
+}, {}, {}, {}, 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/OnyxNotificationDot/types.d.ts

@@ -0,0 +1,11 @@
+import { OnyxBadgeProps } from '../OnyxBadge/types.js';
+export type OnyxNotificationDotProps = {
+    /**
+     * If `true`, the dot will be hidden.
+     */
+    hidden?: boolean;
+    /**
+     * Dot color.
+     */
+    color?: OnyxBadgeProps["color"];
+};

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

@@ -0,0 +1,40 @@
+import { OnyxNotificationMessageProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Description/preview of the notification content.
+         */
+        default(): unknown;
+        /**
+         * Slot to provide optional buttons/actions.
+         */
+        buttons?(): unknown;
+    }> & {
+        /**
+         * Description/preview of the notification content.
+         */
+        default(): unknown;
+        /**
+         * Slot to provide optional buttons/actions.
+         */
+        buttons?(): unknown;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxNotificationMessageProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<OnyxNotificationMessageProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    duration: number;
+}, {}, {}, {}, 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/OnyxNotificationMessage/types.d.ts

@@ -0,0 +1,17 @@
+export type OnyxNotificationMessageProps = {
+    /**
+     * Notification headline/title.
+     */
+    headline: string;
+    /**
+     * Duration in milliseconds for the notification to close automatically.
+     * Timer will be paused when hovering the toast.
+     *
+     * Can be set to `0` to disable the auto closing.
+     */
+    duration?: number;
+    /**
+     * Optional icon to display.
+     */
+    icon?: string;
+};

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

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/OnyxNotifications/useNotification.d.ts

@@ -0,0 +1,60 @@
+import { ComputedRef, InjectionKey } from 'vue';
+import { OnyxButtonProps } from '../OnyxButton/types.js';
+import { OnyxNotificationMessageProps } from '../OnyxNotificationMessage/types.js';
+export type NotificationsProvider = {
+    /**
+     * Readonly list of currently active notifications.
+     */
+    notifications: ComputedRef<ProvidedNotification[]>;
+    /**
+     * Shows a single notification.
+     */
+    show: (notification: ShowNotificationOptions) => void;
+    /**
+     * Removes the notification with the given `id`.
+     */
+    remove: (id: ProvidedNotification["id"]) => void;
+};
+export type ProvidedNotification = ShowNotificationOptions & {
+    /**
+     * Unique notification id used to identify the notification.
+     */
+    id: number;
+    /**
+     * Handler that should remove the notification. Will be called when the notification closes.
+     * Is only used for internal onyx usage.
+     */
+    onClose: () => void;
+};
+export type ShowNotificationOptions = OnyxNotificationMessageProps & {
+    /**
+     * Description/preview of the notification content.
+     */
+    description: string;
+    /**
+     * Slot to provide optional buttons/actions.
+     */
+    buttons?: (OnyxButtonProps & {
+        /**
+         * Callback that is called when the button is clicked.
+         */
+        onClick?: () => void;
+    })[];
+};
+export declare const NOTIFICATIONS_PROVIDER_INJECTION_KEY: InjectionKey<NotificationsProvider>;
+/**
+ * Creates a new notifications provider that can be used with `useNotification()`.
+ * Should be provided once on global app level with:
+ *
+ * @example
+ * ```ts
+ * import { createNotificationsProvider, NOTIFICATIONS_PROVIDER_INJECTION_KEY } from "sit-onyx";
+ *
+ * app.provide(NOTIFICATIONS_PROVIDER_INJECTION_KEY, createNotificationsProvider());
+ * ```
+ */
+export declare const createNotificationsProvider: () => NotificationsProvider;
+/**
+ * Composable for showing notifications.
+ */
+export declare const useNotification: () => NotificationsProvider;

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

@@ -0,0 +1,66 @@
+import { OnyxPageLayoutProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Main content area of the page.
+         */
+        default(): unknown;
+        /**
+         * Optional (left) sidebar.
+         * Recommended component: [OnyxSidebar](https://storybook.onyx.schwarz/?path=/docs/navigation-sidebar--docs)
+         *
+         * For semantic HTML, it is recommended to use HTML elements like `<aside>` here, which is already the case when using the [OnyxSidebar](https://storybook.onyx.schwarz/?path=/docs/navigation-sidebar--docs).
+         */
+        sidebar?(): unknown;
+        /**
+         * Optional (right) sidebar.
+         * Recommended component: [OnyxSidebar](https://storybook.onyx.schwarz/?path=/docs/navigation-sidebar--docs)
+         *
+         * For semantic HTML, it is recommended to use HTML elements like `<aside>` here, which is already the case when using the [OnyxSidebar](https://storybook.onyx.schwarz/?path=/docs/navigation-sidebar--docs).
+         */
+        sidebarRight?(): unknown;
+        /**
+         * Optional page footer.
+         * For semantic HTML, it is recommended to use HTML elements like `<footer>` here.
+         */
+        footer?(): unknown;
+    }> & {
+        /**
+         * Main content area of the page.
+         */
+        default(): unknown;
+        /**
+         * Optional (left) sidebar.
+         * Recommended component: [OnyxSidebar](https://storybook.onyx.schwarz/?path=/docs/navigation-sidebar--docs)
+         *
+         * For semantic HTML, it is recommended to use HTML elements like `<aside>` here, which is already the case when using the [OnyxSidebar](https://storybook.onyx.schwarz/?path=/docs/navigation-sidebar--docs).
+         */
+        sidebar?(): unknown;
+        /**
+         * Optional (right) sidebar.
+         * Recommended component: [OnyxSidebar](https://storybook.onyx.schwarz/?path=/docs/navigation-sidebar--docs)
+         *
+         * For semantic HTML, it is recommended to use HTML elements like `<aside>` here, which is already the case when using the [OnyxSidebar](https://storybook.onyx.schwarz/?path=/docs/navigation-sidebar--docs).
+         */
+        sidebarRight?(): unknown;
+        /**
+         * Optional page footer.
+         * For semantic HTML, it is recommended to use HTML elements like `<footer>` here.
+         */
+        footer?(): unknown;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxPageLayoutProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxPageLayoutProps> & Readonly<{}>, {
+    footerAlignment: "full" | "page";
+}, {}, {}, {}, 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/OnyxPageLayout/types.d.ts

@@ -1,12 +1,15 @@
-import type { SkeletonProvidedProp } from "../../composables/useSkeletonState";
+import { SkeletonProvidedProp } from '../../composables/useSkeletonState.js';
 export type OnyxPageLayoutProps = Partial<SkeletonProvidedProp> & {
-    /** When the page includes a sidebar as well as a footer,
-     * footerAsideSidebar will restrict the footer to span
-     * only the page main area and not the sidebar.
+    /**
+     * How the footer is aligned when used together with a sidebar.
+     * - full: footer will span the full screen width below the sidebar/page.
+     * - page: footer will be restricted to the page width and is placed aside the sidebar.
      */
-    footerAsideSidebar?: boolean;
-    /** Hides the sidebar even if the slot is filled.
-     * Useful e.g. for implementing a collapsible sidebar.
+    footerAlignment?: "full" | "page";
+    /**
+     * If `true`, the default responsive page content padding will be removed.
+     * You can use the `onyx-grid-layout` CSS class on your own which is used internally for the padding.
+     * Useful when e.g. implementing a page with a full width hero image at the top, followed by content below.
      */
-    hideSidebar?: boolean;
+    noPadding?: boolean;
 };