sit-onyx 1.0.0-beta.63 → 1.0.0-beta.65

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

@@ -17,7 +17,7 @@ declare function __VLS_template(): {
 };
 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("../..").OnyxColor;
+    color: import("../../index.ts").OnyxColor;
     dot: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

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

@@ -1,6 +1,7 @@
 import { type DataGridEntry, type OnyxDataGridProps } from "../..";
-declare const _default: <TEntry extends DataGridEntry>(__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<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & Partial<{}> & OnyxDataGridProps<TEntry>> & import("vue").PublicProps;
+import { type DataGridFeature } from "./features";
+declare const _default: <TEntry extends DataGridEntry, TFeatures extends DataGridFeature<TEntry, symbol>[] | []>(__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<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & Partial<{}> & OnyxDataGridProps<TEntry, TFeatures>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {};

package/dist/components/OnyxDataGrid/features/all.d.ts

@@ -0,0 +1,2 @@
+export * from "./sorting/types";
+export { useDataGridSorting as useSorting } from "./sorting/sorting";

package/dist/components/OnyxDataGrid/features/index.d.ts

@@ -1,5 +1,5 @@
 import { type Component, type WatchSource } from "vue";
-import type { DataGridRendererColumn, DataGridRendererRow } from "../../..";
+import type { DataGridRendererColumn, DataGridRendererRow } from "../OnyxDataGridRenderer/types";
 import type { DataGridEntry, DataGridMetadata } from "../types";
 export type DataGridFeature<TEntry extends DataGridEntry, TFeatureName extends symbol> = {
     /**
@@ -51,8 +51,7 @@ export type DataGridFeature<TEntry extends DataGridEntry, TFeatureName extends s
  * });
  * ```
  */
-export declare const createFeature: <TFeatureName extends symbol, TArgs extends unknown[]>(featureDefinition: <TEntry extends DataGridEntry>(...args: TArgs) => DataGridFeature<TEntry, TFeatureName>) => <TEntry extends DataGridEntry>(...args: TArgs) => DataGridFeature<TEntry, TFeatureName>;
-type ExtractTEntry<T> = T extends DataGridFeature<infer I, symbol>[] ? I : never;
+export declare function createFeature<TFeatureName extends symbol, TArgs extends unknown[]>(featureDefinition: <TEntry extends DataGridEntry>(...args: TArgs) => DataGridFeature<TEntry, TFeatureName>): <TEntry extends DataGridEntry>(...args: TArgs) => DataGridFeature<TEntry, TFeatureName>;
 /**
  * Uses the defined datagrid features to provide factory functions.
  * These factories are to be used to map data and configuration to `OnyxDataGridRenderer` properties.
@@ -87,11 +86,10 @@ type ExtractTEntry<T> = T extends DataGridFeature<infer I, symbol>[] ? I : never
  * </template>
  * ```
  */
-export declare const useDataGridFeatures: <T extends DataGridFeature<TEntry, symbol>[] | [], TEntry extends DataGridEntry = ExtractTEntry<T>>(features: T) => {
+export declare const useDataGridFeatures: <TEntry extends DataGridEntry, T extends DataGridFeature<TEntry, symbol>[] | []>(features: T) => {
     /** Takes the column definition and maps all, calls mutation func and maps at the end to RendererCell */
     createRendererRows: (entries: TEntry[], columns: (keyof TEntry)[]) => DataGridRendererRow<TEntry, DataGridMetadata>[];
     /** Takes the column definition and creates a RenderHeader for each, adds actions from features */
     createRendererColumns: (columns: (keyof TEntry)[]) => DataGridRendererColumn<TEntry, object>[];
     watchSources: WatchSource[];
 };
-export {};

package/dist/components/OnyxDataGrid/features/sorting/SortAction.vue.d.ts

@@ -1,4 +1,4 @@
-import type { SortDirection } from "./sorting";
+import type { SortDirection } from "./types";
 type __VLS_Props = {
     /**
      * Label of this Column.

package/dist/components/OnyxDataGrid/features/sorting/sorting.d.ts

@@ -1,6 +1,6 @@
 import type { DataGridEntry } from "../../types";
-export type SortDirection = "asc" | "desc" | "none";
+import type { SortDirection, SortOptions, SortState } from "./types";
 export declare const nextSortDirection: (current?: SortDirection) => SortDirection;
-declare const SORTING_FEATURE: unique symbol;
-export declare const useDataGridSorting: <TEntry extends DataGridEntry>() => import("..").DataGridFeature<TEntry, typeof SORTING_FEATURE>;
-export {};
+export declare const nextSortState: <TEntry extends DataGridEntry>(column: keyof TEntry, current?: SortState<TEntry>) => SortState<TEntry>;
+export declare const SORTING_FEATURE: unique symbol;
+export declare const useDataGridSorting: <TEntry extends DataGridEntry>(options?: SortOptions<DataGridEntry> | undefined) => import("..").DataGridFeature<TEntry, typeof SORTING_FEATURE>;

package/dist/components/OnyxDataGrid/features/sorting/types.d.ts

@@ -0,0 +1,55 @@
+import { type MaybeRef, type MaybeRefOrGetter } from "vue";
+import type { DataGridEntry } from "../../types";
+export type SortDirection = "asc" | "desc" | "none";
+/**
+ * A function to compare two values of type T.
+ * The returned number value indicates the relative order of two values:
+ * -1: less than, 0: equal to, 1: greater than
+ */
+export type Compare<T> = (a: T, b: T) => number;
+/**
+ * The values by which the data is currently sorted.
+ * A `undefined` column or a direction of "none" means no sorting is applied.
+ */
+export type SortState<TEntry extends DataGridEntry> = {
+    /**
+     * The column which is used to sort by.
+     * `undefined` means no sorting is applied.
+     */
+    column: keyof TEntry | undefined;
+    /**
+     * The sorting direction by which the `column` is sorted.
+     * `none` means no sorting is applied.
+     */
+    direction: SortDirection;
+};
+/**
+ * Per column sorting configuration.
+ * If at least one column has configuration, sorting must be explicitly enabled for all columns.
+ */
+export type SortColumnOptions<TEntry extends DataGridEntry> = {
+    [TKey in keyof TEntry]?: {
+        /**
+         * If sorting is enabled for this column.
+         */
+        enabled: boolean;
+        /**
+         * A custom sorting function for this column.
+         * By default the `Intl.Collator` with the current locale is used.
+         */
+        sortFunc?: Compare<TEntry[TKey]>;
+    };
+};
+/**
+ * The options of the sorting feature for the OnyxDataGrid component.
+ */
+export type SortOptions<TEntry extends DataGridEntry> = {
+    /**
+     * The currently applied sorting. Will be updated by the data grid, can be used for reading, updating and watching the applied sorting.
+     */
+    sortState?: MaybeRef<SortState<TEntry>>;
+    /**
+     * The options for each column, including whether sorting is enabled and a custom sorting function. If undefined, sorting is enabled for all columns (default).
+     */
+    columns?: MaybeRefOrGetter<SortColumnOptions<TEntry>>;
+};

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

@@ -1,8 +1,13 @@
+import type { DataGridFeature } from "./features";
 export type DataGridMetadata = Record<string, unknown>;
 /**
  * @experimental The DataGrid is still working in progress and the props will change in the future.
  */
-export type OnyxDataGridProps<TEntry extends DataGridEntry> = {
+export type OnyxDataGridProps<TEntry extends DataGridEntry = DataGridEntry, TFeatures extends DataGridFeature<TEntry, symbol>[] = DataGridFeature<TEntry, symbol>[]> = {
+    /**
+     * Features that should be applied.
+     */
+    features?: TFeatures;
     /**
      * The order of and which columns should be rendered.
      */

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

@@ -13,8 +13,8 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<OnyxIconButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxIconButtonProps> & Readonly<{}>, {
-    type: import("../..").ButtonType;
-    color: import("../..").ButtonColor;
+    type: import("../OnyxButton/types.ts").ButtonType;
+    color: import("../OnyxButton/types.ts").ButtonColor;
     skeleton: import("../../composables/useSkeletonState").SkeletonInjected;
     disabled: import("../OnyxForm/OnyxForm.core").FormInjected<boolean>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,6 +1,6 @@
 import type { OnyxInfoTooltipProps } from "./types";
 declare const _default: import("vue").DefineComponent<OnyxInfoTooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxInfoTooltipProps> & Readonly<{}>, {
-    color: Extract<import("../../index.js").OnyxColor, "neutral" | "danger">;
-    open: import("../OnyxTooltip/types.js").TooltipOpen;
+    color: Extract<import("../../index.ts").OnyxColor, "neutral" | "danger">;
+    open: import("../OnyxTooltip/types.ts").TooltipOpen;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLSpanElement>;
 export default _default;

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

@@ -0,0 +1,40 @@
+import type { MoreListSlotBindings, OnyxMoreListProps } from "./types";
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * List of components to render. Each child must implement the `useMoreChild()` composable.
+         */
+        default(): unknown;
+        /**
+         * Slot to display at the end if not all default slot elements fit in the available width.
+         */
+        more(props: MoreListSlotBindings): unknown;
+    }> & {
+        /**
+         * List of components to render. Each child must implement the `useMoreChild()` composable.
+         */
+        default(): unknown;
+        /**
+         * Slot to display at the end if not all default slot elements fit in the available width.
+         */
+        more(props: MoreListSlotBindings): unknown;
+    };
+    refs: {
+        parentRef: unknown;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<OnyxMoreListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    visibilityChange: (args_0: MoreListSlotBindings) => any;
+}, string, import("vue").PublicProps, Readonly<OnyxMoreListProps> & Readonly<{
+    onVisibilityChange?: ((args_0: MoreListSlotBindings) => any) | undefined;
+}>, {}, {}, {}, {}, 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/OnyxMoreList/types.d.ts

@@ -0,0 +1,27 @@
+import type { MoreListInjectionKey } from "../../composables/useMoreList";
+export type OnyxMoreListProps = {
+    /**
+     * Component to render (e.g. `<ul>` or `<div>`).
+     */
+    is: string;
+    /**
+     * Injection key to use. Must match the one used in the child components.
+     * Will not be reactive so it must not be changed.
+     */
+    injectionKey: MoreListInjectionKey;
+    /**
+     * Whether the intersection observer should be disabled (e.g. when more feature is currently not needed due to mobile layout).
+     * Can increase performance.
+     */
+    disabled?: boolean;
+};
+export type MoreListSlotBindings = {
+    /**
+     * Number of currently fully visible elements.
+     */
+    visibleElements: number;
+    /**
+     * Number of currently completely or partially hidden elements.
+     */
+    hiddenElements: number;
+};

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

@@ -67,7 +67,7 @@ declare const __VLS_component: import("vue").DefineComponent<OnyxNavBarProps, {
      *
      * ```ts
      * const route = useRoute();
-     * const navBarRef = ref<InstanceType<typeof OnyxNavBar>>();
+     * const navBarRef = ref<ComponentInstance<typeof OnyxNavBar>>();
      *
      * watch(() => route.path, () => navBarRef.value?.closeMobileMenus());
      * ```
@@ -80,7 +80,7 @@ declare const __VLS_component: import("vue").DefineComponent<OnyxNavBarProps, {
     onNavigateToStart?: ((event: MouseEvent) => any) | undefined;
     onNavigateBack?: ((event: MouseEvent) => any) | undefined;
 }>, {
-    mobileBreakpoint: import("../..").OnyxBreakpoint | number;
+    mobileBreakpoint: import("@sit-onyx/shared/breakpoints").OnyxBreakpoint | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -17,7 +17,7 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<OnyxMenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxMenuItemProps> & Readonly<{}>, {
-    target: import("../../../..").LinkTarget;
+    target: import("../../../OnyxLink/types.ts").LinkTarget;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLLIElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -20,7 +20,81 @@ declare function __VLS_template(): {
          */
         children?(): unknown;
     };
-    refs: {};
+    refs: {
+        componentRef: ({
+            $: import("vue").ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly href?: string | undefined;
+                readonly withExternalIcon?: (boolean | "auto") | undefined;
+                readonly mobileChildrenOpen?: import("../../../../composables/useManagedState").ManagedProp<boolean> | undefined;
+                readonly label: string;
+                readonly active?: boolean | undefined;
+                readonly isMobile: boolean;
+                readonly "onUpdate:mobileChildrenOpen"?: ((isOpen: 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:mobileChildrenOpen", isOpen: boolean) => void;
+            $el: HTMLLIElement;
+            $options: import("vue").ComponentOptionsBase<Readonly<import("../../../OnyxExternalLinkIcon/types.ts").OnyxExternalLinkIcon & {
+                mobileChildrenOpen?: import("../../../../composables/useManagedState").ManagedProp<boolean>;
+                label: string;
+                active?: boolean;
+            } & {
+                isMobile: boolean;
+            }> & Readonly<{
+                "onUpdate:mobileChildrenOpen"?: ((isOpen: boolean) => any) | undefined;
+            }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                "update:mobileChildrenOpen": (isOpen: 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("../../../OnyxExternalLinkIcon/types.ts").OnyxExternalLinkIcon & {
+            mobileChildrenOpen?: import("../../../../composables/useManagedState").ManagedProp<boolean>;
+            label: string;
+            active?: boolean;
+        } & {
+            isMobile: boolean;
+        }> & Readonly<{
+            "onUpdate:mobileChildrenOpen"?: ((isOpen: boolean) => any) | undefined;
+        }>, never> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+            $slots: Readonly<{
+                button?(): unknown;
+                options?(): unknown;
+            }> & {
+                button?(): unknown;
+                options?(): unknown;
+            };
+        }) | null;
+    };
     rootEl: HTMLLIElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;

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

@@ -15,9 +15,9 @@ declare function __VLS_template(): {
     rootEl: HTMLLIElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("../index.js").OnyxNavButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<import("../index.ts").OnyxNavButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     navigate: (href: string) => any;
-}, string, import("vue").PublicProps, Readonly<import("../index.js").OnyxNavButtonProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<import("../index.ts").OnyxNavButtonProps> & Readonly<{
     onNavigate?: ((href: string) => any) | undefined;
 }>, {
     withExternalIcon: boolean | "auto";

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

@@ -1,5 +1,6 @@
+import type { OnyxBreakpoint } from "@sit-onyx/shared/breakpoints";
 import type { ComputedRef, InjectionKey } from "vue";
-import type { OnyxBreakpoint } from "../../types";
+import type { MoreListInjectionKey } from "../../composables/useMoreList";
 import type { OnyxNavAppAreaProps } from "../OnyxNavAppArea/types";
 export type OnyxNavBarProps = Omit<OnyxNavAppAreaProps, "label"> & {
     /**
@@ -27,3 +28,4 @@ export type OnyxNavBarProps = Omit<OnyxNavAppAreaProps, "label"> & {
  * @returns `true` if mobile, `false` otherwise
  */
 export declare const MOBILE_NAV_BAR_INJECTION_KEY: InjectionKey<ComputedRef<boolean>>;
+export declare const NAV_BAR_MORE_LIST_INJECTION_KEY: MoreListInjectionKey;

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

@@ -17,7 +17,7 @@ declare function __VLS_template(): {
 };
 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<{}>, {
-    truncation: import("../../index.js").TruncationType;
+    truncation: import("../../index.ts").TruncationType;
     multiple: boolean;
     active: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLLIElement>;

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

@@ -10,6 +10,6 @@ declare const _default: import("vue").DefineComponent<OnyxSwitchProps, {}, {}, {
     disabled: boolean | symbol;
     loading: boolean;
     modelValue: boolean;
-    truncation: import("../..").TruncationType;
+    truncation: import("../../index.ts").TruncationType;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -0,0 +1,34 @@
+import type { OnyxTabProps } from "./types";
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Tab panel / content.
+         */
+        default(): unknown;
+        /**
+         * Optional slot to override the tab content. By default, the `label` property will be displayed.
+         */
+        tab?(): unknown;
+    }> & {
+        /**
+         * Tab panel / content.
+         */
+        default(): unknown;
+        /**
+         * Optional slot to override the tab content. By default, the `label` property will be displayed.
+         */
+        tab?(): unknown;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<OnyxTabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxTabProps> & 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/OnyxTab/types.d.ts

@@ -0,0 +1,11 @@
+import type { DensityProp } from "../../composables/density";
+export type OnyxTabProps = DensityProp & {
+    /**
+     * Value of the tab when its selected. Will be the `modelValue` / `v-model` of the `OnyxTabs` component.
+     */
+    value: PropertyKey;
+    /**
+     * Tab label to display. Alternatively, the `tab` slot can be used.
+     */
+    label?: string;
+};

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

@@ -0,0 +1,28 @@
+import { type OnyxTabsProps } from "./types";
+declare const _default: <TValue extends PropertyKey = 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"> & Partial<{}> & OnyxTabsProps<TValue>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        /**
+         * Slots for tab components. Only `OnyxTab` should be used here.
+         */
+        default(): unknown;
+    }> & {
+        /**
+         * Slots for tab components. Only `OnyxTab` should be used here.
+         */
+        default(): unknown;
+    };
+    emit: (evt: "update:modelValue", value: TValue) => void;
+}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -0,0 +1,33 @@
+import type { createTabs } from "@sit-onyx/headless";
+import type { InjectionKey, Ref } from "vue";
+import type { DensityProp } from "../../composables/density";
+export type OnyxTabsProps<TValue extends PropertyKey = PropertyKey> = DensityProp & {
+    /**
+     * Label of the tabs. Needed for accessibility / screen readers.
+     */
+    label: string;
+    /**
+     * Currently selected tab (`value` property of `OnyxTab` component).
+     */
+    modelValue: TValue;
+    /**
+     * If `true`, the tabs will be stretched to the full available width.
+     */
+    stretched?: boolean;
+};
+export type TabsInjectionKey<TValue extends PropertyKey = PropertyKey> = InjectionKey<{
+    /**
+     * Headless composable provided for child tabs for correct accessibility and behavior.
+     */
+    headless: ReturnType<typeof createTabs<TValue>>;
+    /**
+     * Ref to the parent tabs element where the child tabs should be teleported to
+     * to maintain the correct HTML structure.
+     */
+    panelRef: Ref<HTMLElement | undefined>;
+}>;
+/**
+ * Injection key to provide relevant context data from the tabs parent to the
+ * individual child tab components.
+ */
+export declare const TABS_INJECTION_KEY: TabsInjectionKey;

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

@@ -1,5 +1,5 @@
 import type { OnyxTagProps } from "./types";
 declare const _default: import("vue").DefineComponent<OnyxTagProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxTagProps> & Readonly<{}>, {
-    color: import("../..").OnyxColor;
+    color: import("../../index.ts").OnyxColor;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

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

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<OnyxTextareaProps, {}, {},
     required: boolean;
     skeleton: import("../../composables/useSkeletonState").SkeletonInjected;
     disabled: boolean | symbol;
-    autocapitalize: import("../..").Autocapitalize;
+    autocapitalize: import("../OnyxInput/types.ts").Autocapitalize;
     modelValue: string;
     readonly: boolean;
     disableManualResize: boolean;

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

@@ -5,7 +5,7 @@ declare const _default: import("vue").DefineComponent<OnyxToastMessageProps, {},
     onClose?: (() => any) | undefined;
 }>, {
     icon: string | false;
-    color: Extract<import("../..").OnyxColor, "neutral" | "danger" | "warning" | "success">;
+    color: Extract<import("../../index.ts").OnyxColor, "neutral" | "danger" | "warning" | "success">;
     duration: number;
     clickable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -41,7 +41,7 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<OnyxTooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxTooltipProps> & Readonly<{}>, {
-    color: Extract<import("../..").OnyxColor, "neutral" | "danger">;
+    color: Extract<import("../../index.ts").OnyxColor, "neutral" | "danger">;
     position: import("./types").TooltipPosition;
     alignment: import("../../composables/useWedgePosition").WedgePosition | "auto";
     fitParent: boolean;

package/dist/components/examples/DataGrid/SortingDataGrid.vue.d.ts

@@ -0,0 +1,9 @@
+import type { DataGridEntry, OnyxDataGridProps } from "../../..";
+import { DataGridFeatures } from "../../..";
+type __VLS_Props = Pick<OnyxDataGridProps, "columns" | "data">;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    sortChange: (sortState: DataGridFeatures.SortState<DataGridEntry>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSortChange?: ((sortState: DataGridFeatures.SortState<DataGridEntry>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/examples/GridPlayground/EditGridElementDialog/EditGridElementDialog.vue.d.ts

@@ -1,4 +1,4 @@
-import { type OnyxBreakpoint } from "../../../../types";
+import { type OnyxBreakpoint } from "@sit-onyx/shared/breakpoints";
 export type GridElementConfig = {
     columnCount: number;
     breakpoints?: Partial<Record<OnyxBreakpoint, number>>;