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

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/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>>;

package/dist/composables/useMoreList.d.ts

@@ -0,0 +1,118 @@
+import { type InjectionKey, type Ref } from "vue";
+/**
+ * Template ref of either a native HTML element or a custom Vue component.
+ */
+export type HTMLOrInstanceRef = Element | {
+    $el: Element;
+} | null | undefined;
+/**
+ * Injection key for providing "more" data to child components of a list to e.g. render a "+3 more" indicator.
+ */
+export type MoreListInjectionKey = InjectionKey<{
+    /**
+     * Map of components in the list. Key = unique ID, value = component template ref
+     */
+    components: Map<string, Ref<HTMLOrInstanceRef>>;
+    /**
+     * List of component IDs that are currently fully visible.
+     */
+    visibleElements: Ref<string[]>;
+    /**
+     * Whether the intersection observer should be disabled (e.g. when more feature is currently not needed due to mobile layout).
+     */
+    disabled: Ref<boolean>;
+}>;
+export type UseMoreListOptions = {
+    /**
+     * Vue template ref for the parent element containing the list of components.
+     */
+    parentRef: Ref<HTMLOrInstanceRef>;
+    /**
+     * Refs for the individual components in the list.
+     */
+    componentRefs: Map<string, Ref<HTMLOrInstanceRef>>;
+    /**
+     * Whether the intersection observer should be disabled (e.g. when more feature is currently not needed due to mobile layout).
+     */
+    disabled?: Ref<boolean>;
+};
+/**
+ * Composable for managing a list of components where e.g. a "+3" more indicator should be shown if not all components
+ * fit into the available width.
+ *
+ * @example
+ *
+ * ```vue
+ * <script lang="ts" setup>
+ * import { ref, type ComponentInstance } from "vue";
+ * import { useMore } from "../../composables/useMore";
+ * import OnyxNavButton from "../OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue";
+ *
+ * const parentRef = ref<HTMLElement>();
+ * const componentRefs = ref<ComponentInstance<typeof OnyxNavButton>[]>([]);
+ *
+ * const { visibleElements, hiddenElements } = useMore({ parentRef, componentRefs });
+ * </script>
+ *
+ * <template>
+ *   <div ref="parentRef" class="onyx-more">
+ *     <OnyxNavButton v-for="i in 16" ref="componentRefs" :key="i" :label="`Nav button ${i}`" />
+ *   </div>
+ * </template>
+ *
+ * <style lang="scss">
+ * @use "../../styles/mixins/layers.scss";
+ *
+ * .onyx-more {
+ *   @include layers.component() {
+ *     display: flex;
+ *     align-items: center;
+ *     overflow-x: clip;
+ *   }
+ * }
+ * </style>
+ * ```
+ */
+export declare const useMoreList: (options: UseMoreListOptions) => {
+    /**
+     * IDs of currently completely visible components in the list.
+     */
+    visibleElements: Ref<string[], string[]>;
+    /**
+     * IDs of currently fully or partially hidden components in the list.
+     */
+    hiddenElements: import("vue").ComputedRef<string[]>;
+};
+/**
+ * Composable that must be implemented in all list children when using `useMore` to correctly observe the visibility of the elements.
+ *
+ * @example
+ *
+ * ```vue
+ * <script lang="ts" setup
+ * const { componentRef, isVisible } = useMoreChild();
+ * </script>
+ *
+ * <template
+ *  <div ref="componentRef" :class="{ hidden: !isVisible }"> Your content... </div>
+ * </template>
+ *
+ * <style>
+ * .hidden {
+ *  visibility: hidden;
+ * }
+ * </style>
+ * ```
+ */
+export declare const useMoreListChild: (injectionKey: MoreListInjectionKey) => {
+    /**
+     * Component template ref.
+     */
+    componentRef: Ref<HTMLOrInstanceRef, HTMLOrInstanceRef>;
+    /**
+     * Whether the component is currently visible.
+     * Should hide itself visually (e.g. using "visibility: hidden").
+     * Do not use v-if, v-show or "display: none" since the more feature does not work then when resizing
+     */
+    isVisible: import("vue").ComputedRef<boolean>;
+};