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

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

@@ -0,0 +1,28 @@
+import { Nullable } from '../../types/index.js';
+import { OnyxSelectDialogProps } from './types.js';
+declare const _default: <TValue extends string>(__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;
+        readonly "onUpdate:open"?: ((open: Nullable<boolean>) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:open"> & OnyxSelectDialogProps<TValue> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        /**
+         * Optional slot to add custom content, e.g. a description to the dialog header (below the headline).
+         */
+        description?(): unknown;
+    }> & {
+        /**
+         * Optional slot to add custom content, e.g. a description to the dialog header (below the headline).
+         */
+        description?(): unknown;
+    };
+    emit: ((evt: "update:modelValue", value: TValue) => void) & ((evt: "update:open", open: Nullable<boolean>) => 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/OnyxSelectDialog/types.d.ts

@@ -0,0 +1,30 @@
+import { OnyxModalProps } from '../OnyxModal/types.js';
+export type OnyxSelectDialogProps<TValue extends string = string> = Pick<OnyxModalProps, "open" | "density" | "label"> & {
+    /**
+     * List of available options.
+     */
+    options: SelectDialogOption<TValue>[];
+    /**
+     * Value of the currently selected option.
+     */
+    modelValue: TValue;
+};
+export type SelectDialogOption<TValue extends string = string> = {
+    /**
+     * Value to use when the option is selected.
+     */
+    value: TValue;
+    /**
+     * Visual label.
+     */
+    label: string;
+    /**
+     * Icon to display next to the label. Must be a valid SVG string.
+     * **Will be render using `v-html` so make sure to trust or sanitize the content!**
+     */
+    icon?: string;
+    /**
+     * Optional option description.
+     */
+    description?: string;
+};

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

@@ -1,19 +1,17 @@
-import type { SelectOptionValue } from "../../types";
-import type { OnyxSelectInputProps } from "./types";
+import { SelectOptionValue } from '../../types/index.js';
+import { OnyxSelectInputProps } from './types.js';
 declare const _default: <TValue extends 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 onValidityChange?: ((validity: ValidityState) => any) | undefined;
         readonly onInputClick?: (() => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onValidityChange" | "onInputClick"> & Partial<{}> & OnyxSelectInputProps> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{
-        focus: () => void | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onValidityChange" | "onInputClick"> & OnyxSelectInputProps & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{
+        input: Readonly<import('vue').ShallowRef<HTMLInputElement | null>>;
     }>): void;
     attrs: any;
     slots: {};
     emit: ((evt: "validityChange", validity: ValidityState) => void) & ((evt: "inputClick") => void);
-}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}> & {
+}>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;

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

@@ -1,13 +1,7 @@
-import type { DensityProp } from "../../composables/density";
-import type { RequiredMarkerProp } from "../../composables/required";
-import type { CustomValidityProp } from "../../composables/useCustomValidity";
-import type { SkeletonInjected } from "../../composables/useSkeletonState";
-import type { AutofocusProp } from "../../types";
-import type { FormInjectedProps } from "../OnyxForm/OnyxForm.core";
-import type { SharedFormElementProps } from "../OnyxFormElement/types";
+import { SharedFormElementProps } from '../OnyxFormElement/types.js';
 export declare const MULTISELECT_TEXT_MODE: readonly ["summary", "preview"];
 export type MultiselectTextMode = (typeof MULTISELECT_TEXT_MODE)[number];
-export type OnyxSelectInputProps = FormInjectedProps & DensityProp & RequiredMarkerProp & CustomValidityProp & AutofocusProp & Omit<SharedFormElementProps, "modelValue" | "maxlength" | "withCounter"> & {
+export type OnyxSelectInputProps = Omit<SharedFormElementProps, "maxlength" | "withCounter"> & {
     /**
      * Current label(s) of the select.
      */
@@ -19,26 +13,10 @@ export type OnyxSelectInputProps = FormInjectedProps & DensityProp & RequiredMar
      *            A number-badge appears next to it including a tooltip with all selected names.
      */
     textMode?: MultiselectTextMode;
-    /**
-     * Whether to show a skeleton select.
-     */
-    skeleton?: SkeletonInjected;
-    /**
-     * Whether the select should be readonly.
-     */
-    readonly?: boolean;
-    /**
-     * Shows a loading indicator.
-     */
-    loading?: boolean;
     /**
      * Whether to hide the check icon when the input is in a success state.
      */
     hideSuccessIcon?: boolean;
-    /**
-     * Placeholder to show when the value is empty.
-     */
-    placeholder?: string;
     /**
      * Highlight input as if it has focus.
      */

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

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

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

@@ -1,5 +1,5 @@
-import type { TruncationType } from "../../types";
-import type { OnyxListItemProps } from "../OnyxListItem/types";
+import { TruncationType } from '../../types/index.js';
+import { OnyxListItemProps } from '../OnyxListItem/types.js';
 export type OnyxSelectOptionProps = Pick<OnyxListItemProps, "active" | "density"> & {
     /**
      * Adds a checkbox to the option

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

@@ -0,0 +1,5 @@
+import { OnyxSeparatorProps } from './types.js';
+declare const _default: import('vue').DefineComponent<OnyxSeparatorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxSeparatorProps> & Readonly<{}>, {
+    orientation: import('../../index.js', { with: { "resolution-mode": "import" } }).Orientation;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,7 @@
+import { Orientation } from '../../types/index.js';
+export type OnyxSeparatorProps = {
+    /**
+     * Orientation of the separator.
+     */
+    orientation?: Orientation;
+};

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

@@ -0,0 +1,190 @@
+import { OnyxSidebarProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Main sidebar content/body.
+         */
+        default(): unknown;
+        /**
+         * Optional header slot to show above the body.
+         */
+        header?(): unknown;
+        /**
+         * Optional footer slot to show below the body.
+         */
+        footer?(): unknown;
+        /**
+         * Description slot of the `OnyxModalDialog`. Only available if the `temporary` property is set.
+         */
+        description?(): unknown;
+    }> & {
+        /**
+         * Main sidebar content/body.
+         */
+        default(): unknown;
+        /**
+         * Optional header slot to show above the body.
+         */
+        header?(): unknown;
+        /**
+         * Optional footer slot to show below the body.
+         */
+        footer?(): unknown;
+        /**
+         * Description slot of the `OnyxModalDialog`. Only available if the `temporary` property is set.
+         */
+        description?(): unknown;
+    };
+    refs: {
+        sidebarRef: HTMLElement;
+        modalRef: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly label: string;
+                readonly density?: import('../../composables/density.js', { with: { "resolution-mode": "import" } }).Density | undefined;
+                readonly alert?: boolean | undefined;
+                readonly open?: import('../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>;
+                readonly nonDismissible?: boolean | undefined;
+                readonly "onUpdate:open"?: ((open: import('../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>) => any) | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: "update:open", open: import('../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>) => void;
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<import('../OnyxModal/types.js', { with: { "resolution-mode": "import" } }).OnyxModalProps> & Readonly<{
+                "onUpdate:open"?: ((open: import('../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>) => any) | undefined;
+            }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                "update:open": (open: import('../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>) => any;
+            }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import('vue').nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{}> & Omit<Readonly<import('../OnyxModal/types.js', { with: { "resolution-mode": "import" } }).OnyxModalProps> & Readonly<{
+            "onUpdate:open"?: ((open: import('../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>) => any) | undefined;
+        }>, never> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: Readonly<{
+                default(): unknown;
+                headline?(bindings: Pick<import('../OnyxModal/types.js', { with: { "resolution-mode": "import" } }).OnyxModalProps, "label">): unknown;
+                description?(): unknown;
+                footer?(): unknown;
+            }> & {
+                default(): unknown;
+                headline?(bindings: Pick<import('../OnyxModal/types.js', { with: { "resolution-mode": "import" } }).OnyxModalProps, "label">): unknown;
+                description?(): unknown;
+                footer?(): unknown;
+            };
+        }) | null;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxSidebarProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<OnyxSidebarProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    alignment: import('./types.js', { with: { "resolution-mode": "import" } }).SidebarAlignment;
+    resizable: boolean;
+    collapseSidebar: import('../../utils/breakpoints.js', { with: { "resolution-mode": "import" } }).OnyxBreakpoint | number | false;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    sidebarRef: HTMLElement;
+    modalRef: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly label: string;
+            readonly density?: import('../../composables/density.js', { with: { "resolution-mode": "import" } }).Density | undefined;
+            readonly alert?: boolean | undefined;
+            readonly open?: import('../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>;
+            readonly nonDismissible?: boolean | undefined;
+            readonly "onUpdate:open"?: ((open: import('../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>) => any) | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: "update:open", open: import('../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>) => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<import('../OnyxModal/types.js', { with: { "resolution-mode": "import" } }).OnyxModalProps> & Readonly<{
+            "onUpdate:open"?: ((open: import('../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>) => any) | undefined;
+        }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            "update:open": (open: import('../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>) => any;
+        }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{}> & Omit<Readonly<import('../OnyxModal/types.js', { with: { "resolution-mode": "import" } }).OnyxModalProps> & Readonly<{
+        "onUpdate:open"?: ((open: import('../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>) => any) | undefined;
+    }>, never> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: Readonly<{
+            default(): unknown;
+            headline?(bindings: Pick<import('../OnyxModal/types.js', { with: { "resolution-mode": "import" } }).OnyxModalProps, "label">): unknown;
+            description?(): unknown;
+            footer?(): unknown;
+        }> & {
+            default(): unknown;
+            headline?(bindings: Pick<import('../OnyxModal/types.js', { with: { "resolution-mode": "import" } }).OnyxModalProps, "label">): unknown;
+            description?(): unknown;
+            footer?(): unknown;
+        };
+    }) | null;
+}, 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/OnyxSidebar/modules/OnyxSidebarItem/OnyxSidebarItem.d.vue.ts

@@ -0,0 +1,28 @@
+import { OnyxSidebarItemProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Content of the sidebar item.
+         */
+        default(): unknown;
+    }> & {
+        /**
+         * Content of the sidebar item.
+         */
+        default(): unknown;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxSidebarItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxSidebarItemProps> & Readonly<{}>, {
+    active: boolean | "auto";
+}, {}, {}, {}, 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/OnyxSidebar/modules/OnyxSidebarItem/types.d.ts

@@ -0,0 +1,9 @@
+import { DensityProp } from '../../../../composables/density.js';
+import { WithLinkProp } from '../../../OnyxRouterLink/types.js';
+export type OnyxSidebarItemProps = DensityProp & WithLinkProp & {
+    /**
+     * Whether the item is currently 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. (only when `link` property is set).
+     */
+    active?: boolean | "auto";
+};

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

@@ -0,0 +1,2 @@
+export { default as OnyxSidebarItem } from './OnyxSidebarItem/OnyxSidebarItem.vue';
+export * from './OnyxSidebarItem/types.js';

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

@@ -0,0 +1,40 @@
+import { DensityProp } from '../../composables/density.js';
+import { OnyxBreakpoint } from '../../utils/breakpoints.js';
+import { OnyxModalProps } from '../OnyxModal/types.js';
+export type OnyxSidebarProps = DensityProp & {
+    /**
+     * (Aria) label that describes the dialog. Required for accessibility / screen readers.
+     * When the `temporary` property is set, the label will be used as the displayed label/headline by default.
+     */
+    label: string;
+    /**
+     * If set, the sidebar will be shown as an temporary overlay above the page content instead of in-place.
+     */
+    temporary?: TemporarySidebar;
+    /**
+     * Whether the sidebar should be manually resizable by the user by dragging the right border.
+     */
+    resizable?: boolean;
+    /**
+     * Where the sidebar is positioned on the page.
+     * Note: When using the non-drawer sidebar (default), you need to do the actual positioning on the page manually. You can use the [OnyxPageLayout](https://storybook.onyx.schwarz/?path=/story/layout-pagelayout--sidebar-right) for this.
+     */
+    alignment?: SidebarAlignment;
+    /**
+     * Controls the collapsing behavior of the sidebar.
+     * - If set to a `OnyxBreakpoint` enum value (e.g., `md`), the sidebar will collapse when the screen width
+     * is at or below that breakpoint.
+     * - If set to a `number`, the sidebar will collapse when the screen width is at or below this pixel value.
+     * - If set to `false`, the sidebar will never collapse automatically based on screen width.
+     * @default `sm`
+     */
+    collapseSidebar?: OnyxBreakpoint | number | false;
+};
+export declare const SIDEBAR_ALIGNMENT: readonly ["left", "right"];
+export type SidebarAlignment = (typeof SIDEBAR_ALIGNMENT)[number];
+export type TemporarySidebar = Pick<OnyxModalProps, "open" | "nonDismissible"> & {
+    /**
+     * If `true`, the sidebar will have a small gap from the viewport and have rounded corners.
+     */
+    floating?: boolean;
+};

package/dist/components/OnyxSkeleton/OnyxSkeleton.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, {}, HTMLElement>;
+export default _default;

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

@@ -0,0 +1,22 @@
+import { Nullable } from '../../types/index.js';
+import { OnyxStepperProps } from './types.js';
+declare const _default: import('vue').DefineComponent<OnyxStepperProps, {
+    input: Readonly<import('vue').ShallowRef<HTMLInputElement | null>>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    validityChange: (validity: ValidityState) => any;
+    "update:modelValue": (value?: Nullable<number>) => any;
+}, string, import('vue').PublicProps, Readonly<OnyxStepperProps> & Readonly<{
+    onValidityChange?: ((validity: ValidityState) => any) | undefined;
+    "onUpdate:modelValue"?: ((value?: Nullable<number>) => any) | undefined;
+}>, {
+    skeleton: import('../../composables/useSkeletonState.js', { with: { "resolution-mode": "import" } }).SkeletonInjected;
+    disabled: import('../OnyxForm/OnyxForm.core.js', { with: { "resolution-mode": "import" } }).FormInjected<boolean>;
+    showError: import('../OnyxForm/OnyxForm.core.js', { with: { "resolution-mode": "import" } }).FormInjected<import('../../composables/useErrorClass.js', { with: { "resolution-mode": "import" } }).ShowErrorMode>;
+    readonly: boolean;
+    loading: boolean;
+    stepSize: number;
+    hideButtons: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    inputRef: HTMLInputElement;
+}, any>;
+export default _default;

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

@@ -1,15 +1,7 @@
-import type { DensityProp } from "../../composables/density";
-import type { CustomValidityProp } from "../../composables/useCustomValidity";
-import type { SkeletonInjected } from "../../composables/useSkeletonState";
-import type { AutofocusProp } from "../../types";
-import type { FormInjectedProps } from "../OnyxForm/OnyxForm.core";
-import type { SharedFormElementProps } from "../OnyxFormElement/types";
-import type { Autocomplete } from "../OnyxInput/types";
-export type OnyxStepperProps = FormInjectedProps & DensityProp & CustomValidityProp & Omit<SharedFormElementProps, "modelValue" | "errorMessages" | "withCounter" | "maxlength"> & AutofocusProp & {
-    /**
-     * Placeholder to show when the value is empty.
-     */
-    placeholder?: string;
+import { Autocomplete } from '../../composables/useLenientMaxLengthValidation.js';
+import { Nullable } from '../../types/index.js';
+import { SharedFormElementProps } from '../OnyxFormElement/types.js';
+export type OnyxStepperProps = Omit<SharedFormElementProps, "errorMessages" | "withCounter" | "maxlength"> & {
     /**
      * The minimum allowed value.
      */
@@ -19,26 +11,25 @@ export type OnyxStepperProps = FormInjectedProps & DensityProp & CustomValidityP
      */
     max?: number;
     /**
-     * Incremental step.
+     * Defines how much the value is adjusted when clicking the +/- button.
      */
+    stepSize?: number;
     /**
-     * Incremental step.
-     * @deprecated
-     */
-    step?: number;
-    /**
-     * The smallest allowed value and rounded precision
+     * Number of decimal places to show. Can also be negative. Value will be rounded if needed to match the specified precision.
+     *
+     * @example For `precision=2` with `modelValue=5`, "5.00" will be displayed.
+     * @example For `precision=-2` with `modelValue=60`, "100" will be displayed.
+     * @example For `precision=0`, only full numbers without decimals will be displayed.
      */
     precision?: number;
     /**
-     * The increment number
-     * @default precision is the default stepSize
-     */
-    stepSize?: number;
-    /**
-     * Ensure no wrong number can be inputed
+     * Defines step size for valid/allowed values. Will show an error if invalid value is entered.
+     * Can be independent of the `stepSize` property.
+     *
+     * @example For `validStepSize` 0.01, only multiples of 0.01 are valid (useful for currencies)
+     * @example For `stepSize=4` `validStepSize=2`, only even numbers are valid and the user can adjust the value by 4 when clicking the +/- button.
      */
-    stripStep?: boolean;
+    validStepSize?: number;
     /**
      * Specify how to provide automated assistance in filling out the input.
      * Some autocomplete values might required specific browser permissions to be allowed by the user.
@@ -48,15 +39,18 @@ export type OnyxStepperProps = FormInjectedProps & DensityProp & CustomValidityP
      */
     autocomplete?: Autocomplete;
     /**
-     * Whether the input should be readonly.
+     * If true, the +/- button will be hidden.
      */
-    readonly?: boolean;
+    hideButtons?: boolean;
     /**
-     * Whether the input is loading. User interaction will be disabled.
+     * Controls number formatting when the input is not focused:
+     * - `true`: format number with default locale formatting (e.g. "1,000")
+     * - `false` or `undefined`: no formatting
+     * - function: custom formatter receives the numeric value and returns a string
      */
-    loading?: boolean;
+    formatNumber?: boolean | ((modalValue: number) => string);
     /**
-     * Whether to show a skeleton input.
+     * current number input
      */
-    skeleton?: SkeletonInjected;
+    modelValue?: Nullable<number>;
 };

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

@@ -0,0 +1,22 @@
+import { OnyxSwitchProps } from './types.js';
+type __VLS_Props = OnyxSwitchProps;
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    input: Readonly<import('vue').ShallowRef<HTMLInputElement | null>>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    validityChange: (validity: ValidityState) => any;
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onValidityChange?: ((validity: ValidityState) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    skeleton: import('../../composables/useSkeletonState.js', { with: { "resolution-mode": "import" } }).SkeletonInjected;
+    disabled: import('../OnyxForm/OnyxForm.core.js', { with: { "resolution-mode": "import" } }).FormInjected<boolean>;
+    showError: import('../OnyxForm/OnyxForm.core.js', { with: { "resolution-mode": "import" } }).FormInjected<import('../../composables/useErrorClass.js', { with: { "resolution-mode": "import" } }).ShowErrorMode>;
+    requiredMarker: import('../OnyxForm/OnyxForm.core.js', { with: { "resolution-mode": "import" } }).FormInjected<import('../../composables/required.js', { with: { "resolution-mode": "import" } }).RequiredMarkerType>;
+    loading: boolean;
+    modelValue: boolean | null;
+    truncation: import('../../index.js', { with: { "resolution-mode": "import" } }).TruncationType;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    inputRef: HTMLInputElement;
+}, any>;
+export default _default;

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

@@ -1,33 +1,7 @@
-import type { DensityProp } from "../../composables/density";
-import type { RequiredMarkerProp } from "../../composables/required";
-import type { CustomValidityProp } from "../../composables/useCustomValidity";
-import type { SkeletonInjected } from "../../composables/useSkeletonState";
-import type { AutofocusProp, TruncationType } from "../../types";
-import type { FormInjectedProps } from "../OnyxForm/OnyxForm.core";
-export type OnyxSwitchProps = FormInjectedProps & DensityProp & RequiredMarkerProp & CustomValidityProp & AutofocusProp & {
+import { BaseSelectOption, Nullable, SelectOptionValue } from '../../types/index.js';
+export type OnyxSwitchProps<TValue extends SelectOptionValue = SelectOptionValue> = Omit<BaseSelectOption<TValue>, "value"> & {
     /**
      * Whether the switch should be checked or not.
      */
-    modelValue?: boolean;
-    /**
-     * The label of the switch.
-     */
-    label: string;
-    /**
-     * Shows a loading indicator.
-     */
-    loading?: boolean;
-    /**
-     * If `true`, the label will be visually hidden and the `title` attribute will be set.
-     * For accessibility / screen readers, the aria-label will still be set.
-     */
-    hideLabel?: boolean;
-    /**
-     * How to truncate the label if it exceeds the max width.
-     */
-    truncation?: TruncationType;
-    /**
-     * Whether to show a skeleton switch.
-     */
-    skeleton?: SkeletonInjected;
+    modelValue?: Nullable<boolean>;
 };