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

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

@@ -1,5 +1,6 @@
 import type { OnyxAppLayoutProps } from "./types";
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: Readonly<{
         /** Navigation area of the application */
         navBar?(): unknown;
@@ -20,12 +21,12 @@ declare function __VLS_template(): {
         appOverlay?(): unknown;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<OnyxAppLayoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxAppLayoutProps> & Readonly<{}>, {
     navBarAlignment: "top" | "left";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,5 +1,6 @@
 import type { OnyxAvatarProps } from "./types";
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: Readonly<{
         /**
          * Optional slot to override the default initials. Will only be used if `type` is `initials`.
@@ -12,12 +13,12 @@ declare function __VLS_template(): {
         default?(): unknown;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: HTMLElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<OnyxAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxAvatarProps> & Readonly<{}>, {
     size: "16px" | "24px" | "32px" | "48px" | "64px" | "96px";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,4 +1,5 @@
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: Readonly<{
         /**
          * Default slot to place the avatars.
@@ -11,10 +12,10 @@ declare function __VLS_template(): {
         default(): unknown;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,5 +1,6 @@
 import type { OnyxBadgeProps } from "./types";
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: Readonly<{
         /**
          * Badge content.
@@ -12,13 +13,13 @@ declare function __VLS_template(): {
         default?(): unknown;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<OnyxBadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxBadgeProps> & Readonly<{}>, {
     color: import("../..").OnyxColor;
     dot: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -4,7 +4,7 @@ declare const _default: <TValue extends SelectOptionValue = SelectOptionValue>(_
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onValidityChange?: ((validity: ValidityState) => any) | undefined;
         readonly "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onValidityChange" | "onUpdate:modelValue"> & OnyxCheckboxProps<TValue>> & import("vue").PublicProps;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onValidityChange" | "onUpdate:modelValue"> & Partial<{}> & OnyxCheckboxProps<TValue>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {};

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

@@ -3,7 +3,7 @@ import type { OnyxCheckboxGroupProps } from "./types";
 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 "onUpdate:modelValue"?: ((value: TValue[]) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & OnyxCheckboxGroupProps<TValue>> & import("vue").PublicProps;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & Partial<{}> & OnyxCheckboxGroupProps<TValue>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {};

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

@@ -0,0 +1,16 @@
+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;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => 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/OnyxDataGrid/OnyxDataGridRenderer/OnyxDataGridRenderer.vue.d.ts

@@ -1,7 +1,7 @@
 import type { DataGridEntry, DataGridMetadata } from "../types";
 import type { OnyxDataGridRendererProps } from "./types";
 declare const _default: <TEntry extends DataGridEntry, TMetadata extends DataGridMetadata>(__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> & OnyxDataGridRendererProps<TEntry, TMetadata>> & import("vue").PublicProps;
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & Partial<{}> & OnyxDataGridRendererProps<TEntry, TMetadata>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {};

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

@@ -74,7 +74,7 @@ export type DataGridRendererCellComponentProps<TEntry extends DataGridEntry, TMe
     /**
      * Complete row data.
      */
-    row: TEntry;
+    row: Readonly<TEntry>;
     /**
      * Cell data that is provided to the component via the `metadata` prop.
      */

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

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    /**
+     * label of the column
+     */
+    label: string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        actions?(): unknown;
+    }> & {
+        actions?(): unknown;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,97 @@
+import { type Component, type WatchSource } from "vue";
+import type { DataGridRendererColumn, DataGridRendererRow } from "../../..";
+import type { DataGridEntry, DataGridMetadata } from "../types";
+export type DataGridFeature<TEntry extends DataGridEntry, TFeatureName extends symbol> = {
+    /**
+     * Unique name and identifier of the datagrid feature
+     */
+    name: TFeatureName;
+    /**
+     * An array of reactive states that should trigger a datagrid re-generation
+     */
+    watch: WatchSource[];
+    /**
+     * Allows modifying the datagrid state as a whole.
+     */
+    mutation?: {
+        func: (state: Readonly<TEntry>[]) => void;
+    };
+    /**
+     * Allows the modification of the headers.
+     */
+    header?: {
+        /**
+         * Adds header icon button(s).
+         * `iconComponent` of an action is shown after the header label.
+         * The components must be ARIA-conform buttons.
+         */
+        actions?: (column: keyof TEntry) => {
+            iconComponent: Component;
+            listComponent?: never;
+        }[];
+    };
+};
+/**
+ * Helper function that infers the generics of the DataGridFeature type.
+ * @example
+ * ```ts
+ *
+ * const MY_FEATURE = Symbol("TABLE_HEADER_BUTTON");
+ * export const useDataGridHeaderButton = createFeature(<TEntry extends DataGridEntry>() => {
+ *   return {
+ *     name: MY_FEATURE,
+ *     header: {
+ *       actions: (column) => [
+ *         {
+ *           iconComponent: h('button', { onClick: (column) => console.log(`Clicked on ${column}`) },),
+ *         },
+ *       ],
+ *     },
+ *   };
+ * });
+ * ```
+ */
+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;
+/**
+ * Uses the defined datagrid features to provide factory functions.
+ * These factories are to be used to map data and configuration to `OnyxDataGridRenderer` properties.
+ * The properties are then used to render the data grid.
+ *
+ * Make use of the `watchSources` to trigger re-rendering when state changes occur.
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * // ...
+ * // imports, props, emits, etc.
+ * const withHeaderButton = useDataGridHeaderButton<TEntry>();
+ *
+ * const { watchSources, createRendererRows, createRendererColumns } = useDataGridFeatures([withHeaderButton]);
+ *
+ * const renderCols: Ref<DataGridRendererColumn<TEntry, object>[]> = ref([]);
+ * const renderRows: Ref<DataGridRendererRow<TEntry, DataGridMetadata>[]> = ref([]);
+ *
+ * const { columns, data } = toRefs(props);
+ *
+ * watch(
+ *   [columns, data, ...watchSources],
+ *   ([newColumns, newData]) => {
+ *     renderCols.value = createRendererColumns(newColumns);
+ *     renderRows.value = createRendererRows(newData, newColumns);
+ *   },
+ *   { immediate: true },
+ * );
+ * </script>
+ * <template>
+ *   <OnyxDataGridRenderer :columns="renderCols" :rows="renderRows" />
+ * </template>
+ * ```
+ */
+export declare const useDataGridFeatures: <T extends DataGridFeature<TEntry, symbol>[] | [], TEntry extends DataGridEntry = ExtractTEntry<T>>(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

@@ -0,0 +1,13 @@
+import type { SortDirection } from "./sorting";
+type __VLS_Props = {
+    /**
+     * Label of this Column.
+     */
+    columnLabel: string;
+    /**
+     * The current sorting direction, that should be indicated.
+     */
+    sortDirection?: SortDirection;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,6 @@
+import type { DataGridEntry } from "../../types";
+export type SortDirection = "asc" | "desc" | "none";
+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 {};

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

@@ -1,4 +1,17 @@
 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> = {
+    /**
+     * The order of and which columns should be rendered.
+     */
+    columns: (keyof TEntry)[];
+    /**
+     * The data that should be used to fill the datagrid.
+     */
+    data: TEntry[];
+};
 /**
  * "Raw" user data for a data grid entry/row, e.g. fetched from a backend service.
  */

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

@@ -1,5 +1,6 @@
 import type { OnyxDialogProps } from "./types";
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: Readonly<{
         /**
          * Dialog content. For accessibility purposes it is strongly recommended
@@ -18,7 +19,7 @@ declare function __VLS_template(): {
     refs: {
         dialogRef: HTMLDialogElement;
     };
-    attrs: Partial<{}>;
+    rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<OnyxDialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -1,5 +1,6 @@
 import { type DensityProp } from "../../composables/density";
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: Readonly<{
         /**
          * Label / text to display.
@@ -20,10 +21,10 @@ declare function __VLS_template(): {
         icon?(): unknown;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<DensityProp, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DensityProp> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<DensityProp, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DensityProp> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,5 +1,16 @@
-import { type FormErrorMessages } from "../../composables/useCustomValidity";
+import { type FormMessages } from "../../composables/useCustomValidity";
+type __VLS_Props = {
+    /**
+     * The given component will be shown inside a tooltip when
+     * errorMessages are provided. Without errorMessages, the
+     * component will not be rendered inside a slot.
+     */
+    errorMessages?: FormMessages;
+    /** We don't show an error if the content is not interactive */
+    disabled?: boolean;
+};
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: Readonly<{
         /**
          * Any component. Will be wrapped in an OnyxTooltip showing
@@ -16,28 +27,10 @@ declare function __VLS_template(): {
     refs: {
         targetRef: HTMLDivElement;
     };
-    attrs: Partial<{}>;
+    rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<{
-    /**
-     * The given component will be shown inside a tooltip when
-     * errorMessages are provided. Without errorMessages, the
-     * component will not be rendered inside a slot.
-     */
-    errorMessages?: FormErrorMessages;
-    /** We don't show an error if the content is not interactive */
-    disabled?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    /**
-     * The given component will be shown inside a tooltip when
-     * errorMessages are provided. Without errorMessages, the
-     * component will not be rendered inside a slot.
-     */
-    errorMessages?: FormErrorMessages;
-    /** We don't show an error if the content is not interactive */
-    disabled?: boolean;
-}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,5 +1,6 @@
 import type { OnyxFormProps } from "./types";
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: Readonly<{
         /**
          * Any form content
@@ -12,13 +13,13 @@ declare function __VLS_template(): {
         default?(): unknown;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: HTMLFormElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<OnyxFormProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxFormProps> & Readonly<{}>, {
     disabled: boolean;
     showError: import("../../composables/useErrorClass").ShowErrorMode;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLFormElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,5 +1,6 @@
 import type { OnyxFormElementProps } from "./types";
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: Readonly<{
         /** The place for the actual form element */
         default(props: {
@@ -12,13 +13,13 @@ declare function __VLS_template(): {
         }): unknown;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<OnyxFormElementProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxFormElementProps> & Readonly<{}>, {
     required: boolean;
     id: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,5 +1,5 @@
 import type { RequiredMarkerProp } from "../../composables/required";
-import type { FormErrorMessages } from "../../composables/useCustomValidity";
+import type { FormMessages } from "../../composables/useCustomValidity";
 export type OnyxFormElementProps = RequiredMarkerProp & {
     /**
      * The id of a labelable form-related element.
@@ -39,7 +39,7 @@ export type OnyxFormElementProps = RequiredMarkerProp & {
     /**
      * Error messages that inform about causes for invalidity of form components
      */
-    errorMessages?: FormErrorMessages;
+    errorMessages?: FormMessages;
     /**
      * Maximum number of characters that are allowed to be entered.
      * Warning: when the value is (pre)set programmatically,

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

@@ -1,5 +1,6 @@
 import type { OnyxHeadlineProps } from "./types";
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: Readonly<{
         /**
          * Headline content.
@@ -12,7 +13,7 @@ declare function __VLS_template(): {
         default(): unknown;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<OnyxHeadlineProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxHeadlineProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,5 +1,6 @@
 import type { OnyxIconButtonProps } from "./types";
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: Readonly<{
         /** Slot for an custom icon. Will have no effect if property `icon` is passed. */
         default(): unknown;
@@ -8,7 +9,7 @@ declare function __VLS_template(): {
         default(): unknown;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: any;
 };
 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<{}>, {

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

@@ -2,5 +2,5 @@ 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;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLSpanElement>;
 export default _default;

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

@@ -1,5 +1,6 @@
 import type { OnyxLinkProps } from "./types";
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: Readonly<{
         /**
          * Link label.
@@ -12,13 +13,13 @@ declare function __VLS_template(): {
         default(): unknown;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: HTMLAnchorElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<OnyxLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxLinkProps> & Readonly<{}>, {
     target: import("./types").LinkTarget;
     withExternalIcon: boolean | "auto";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLAnchorElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,5 +1,6 @@
 import type { OnyxListItemProps } from "./types";
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: Readonly<{
         /**
          * Option content.
@@ -12,7 +13,7 @@ declare function __VLS_template(): {
         default(): unknown;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: HTMLLIElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<OnyxListItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxListItemProps> & Readonly<{}>, {
@@ -20,7 +21,7 @@ declare const __VLS_component: import("vue").DefineComponent<OnyxListItemProps,
     checked: boolean;
     selected: boolean;
     active: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, 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/OnyxLoadingIndicator/CircleSpinner.vue.d.ts

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

package/dist/components/OnyxLoadingIndicator/LoadingDots.vue.d.ts

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

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

@@ -1,5 +1,6 @@
 import type { OnyxMobileNavButtonProps } from "./types";
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: Readonly<{
         /**
          * Slot for the menu content when it's open.
@@ -12,7 +13,7 @@ declare function __VLS_template(): {
         default(): unknown;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<OnyxMobileNavButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -21,7 +22,7 @@ declare const __VLS_component: import("vue").DefineComponent<OnyxMobileNavButton
     "onUpdate:open"?: ((isOpen: boolean) => any) | undefined;
 }>, {
     open: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,5 +1,6 @@
 import type { OnyxNavAppAreaProps } from "./types";
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: Readonly<{
         /**
          * Optional slot to override the content.
@@ -12,10 +13,10 @@ declare function __VLS_template(): {
         default?(): unknown;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: HTMLButtonElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<OnyxNavAppAreaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxNavAppAreaProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<OnyxNavAppAreaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxNavAppAreaProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLButtonElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {