sit-onyx 1.0.0-beta.99 → 1.0.0

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

@@ -0,0 +1,39 @@
+import { MaybeRef, MaybeRefOrGetter } from 'vue';
+import { DataGridEntry } from '../../types.js';
+import { DataGridFeatureOptions } from '../index.js';
+export type SelectionState = {
+    /**
+     * If the `contingent` set refers to entries that are included in the final selection or excluded from it.
+     * The `selectMode` is closely coupled with the `HeaderSelectionCheckbox` which is used to "select all" or "deselect all".
+     * It allows for tracking selections even when not all rows are known.
+     * This especially useful in case of pagination or asynchronous data loading.
+     *
+     * Based on this there are the following scenarios:
+     *
+     * | selectMode | selected.size |      result      | HeaderSelectionCheckbox |
+     * |------------|:-------------:|:----------------:|-------------------------|
+     * | "include"  |      == 0     | nothing selected | unchecked               |
+     * | "include"  |       > 0     |   some selected  | indeterminate           |
+     * | "exclude"  |      == 0     |   all selected   | checked                 |
+     * | "exclude"  |       > 0     |   some selected  | indeterminate           |
+     *
+     */
+    selectMode: "include" | "exclude";
+    /**
+     * The entries that are included or excluded from the selection, based on `selectMode`.
+     */
+    contingent: Set<DataGridEntry["id"]>;
+};
+/**
+ * The options of the selection feature for the OnyxDataGrid component.
+ */
+export type SelectionOptions = Pick<DataGridFeatureOptions<DataGridEntry, object>, "enabled"> & {
+    /**
+     * The currently active selection.
+     */
+    selectionState?: MaybeRef<SelectionState>;
+    /**
+     * If `true` the selection checkbox of a row will only be shown if the row is hovered or selected.
+     */
+    hover?: MaybeRefOrGetter<boolean>;
+};

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

@@ -1,4 +1,4 @@
-import type { SortDirection } from "./types";
+import { SortDirection } from './types.js';
 type __VLS_Props = {
     /**
      * Label of this Column.
@@ -9,5 +9,5 @@ type __VLS_Props = {
      */
     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>;
+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/defaults.d.ts

@@ -0,0 +1,9 @@
+import { Compare } from './types.js';
+export declare const STRING_COMPARE: (a: unknown, b: unknown, collator: Intl.Collator) => number;
+export declare const NUMBER_COMPARE: (a: unknown, b: unknown) => number;
+export declare const BOOLEAN_COMPARE: (a: unknown, b: unknown) => number;
+/**
+ * Compares only the time of two dates, ignoring the date part.
+ */
+export declare const TIME_COMPARE: (a: unknown, b: unknown, collator: Intl.Collator) => number;
+export declare const DEFAULT_COMPARES: Record<PropertyKey, Compare<unknown>>;

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

@@ -1,5 +1,35 @@
-import type { DataGridEntry } from "../../types";
-import type { SortDirection, SortOptions } from "./types";
-export declare const nextSortDirection: (current?: SortDirection) => SortDirection;
+import { Ref } from 'vue';
+import { DataGridEntry } from '../../types.js';
+import { InternalColumnConfig } from '../index.js';
+import { SortDirection, SortOptions, SortState } from './types.js';
+export declare const nextSortDirection: (current?: SortDirection, skipNone?: boolean) => SortDirection;
 export declare const SORTING_FEATURE: unique symbol;
-export declare const useSorting: <TEntry extends DataGridEntry>(options?: SortOptions<TEntry> | undefined) => import("..").DataGridFeature<TEntry, typeof SORTING_FEATURE>;
+export declare const useSorting: <TEntry extends DataGridEntry>(options?: SortOptions<TEntry>) => (ctx: import('../index.js').DataGridFeatureContext) => {
+    name: symbol;
+    watch: (Ref<SortState<TEntry>, SortState<TEntry>> | import('vue').ComputedRef<Intl.Collator>)[];
+    mutation: {
+        func: (data: Readonly<TEntry>[]) => Readonly<TEntry>[];
+    };
+    modifyColumns: {
+        func: (_finalConfig: readonly InternalColumnConfig<TEntry, any>[]) => readonly InternalColumnConfig<TEntry, any>[];
+        order: number;
+    }[];
+    header: {
+        actions: ({ key: column, label }: InternalColumnConfig<any, any>) => ({
+            iconComponent: import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+                [key: string]: any;
+            }>;
+            menuItems: import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+                [key: string]: any;
+            }>[];
+        } | {
+            iconComponent: {
+                iconComponent: import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+                    [key: string]: any;
+                }>;
+                alwaysShowInHeader: boolean;
+            };
+            menuItems?: undefined;
+        })[];
+    };
+};

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

@@ -1,17 +1,18 @@
-import { type MaybeRef, type MaybeRefOrGetter } from "vue";
-import type { DataGridEntry } from "../../types";
+import { MaybeRef } from 'vue';
+import { DataGridEntry } from '../../types.js';
+import { DataGridFeatureOptions } from '../index.js';
 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;
+export type Compare<T> = (a: T, b: T, collator: Intl.Collator) => 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 = DataGridEntry> = {
+export type SortState<TEntry extends DataGridEntry> = {
     /**
      * The column which is used to sort by.
      * `undefined` means no sorting is applied.
@@ -24,32 +25,26 @@ export type SortState<TEntry extends DataGridEntry = DataGridEntry> = {
     direction: SortDirection;
 };
 /**
- * Per column sorting configuration.
- * If at least one column has configuration, sorting must be explicitly enabled for all columns.
+ * The options of the sorting feature for the OnyxDataGrid component.
  */
-export type SortColumnOptions<TEntry extends DataGridEntry> = {
+export type SortOptions<TEntry extends DataGridEntry> = DataGridFeatureOptions<TEntry, {
     [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> = {
+}, true> & {
     /**
      * 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).
+     * The `Intl.Collator` used for the default (string-based) sorting.
+     * The collator allows for customizing the sorting behavior, see [MDN Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator).
+     *
+     * Defaults to `new Intl.Collator(i18n.locale.value, { numeric: true })` where `i18n` is the OnyxI18n instance.
      */
-    columns?: MaybeRefOrGetter<SortColumnOptions<TEntry> | undefined>;
+    collator?: MaybeRef<Intl.Collator>;
 };

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

@@ -0,0 +1,13 @@
+import { ModifyColumns } from '../index.js';
+import { DataGridEntry } from '../../types.js';
+import { StickyColumnsOptions } from './types.js';
+export declare const STICKY_COLUMNS_FEATURE: unique symbol;
+export declare const useStickyColumns: <TEntry extends DataGridEntry>(options?: StickyColumnsOptions<TEntry>) => () => {
+    name: symbol;
+    watch: (import('vue').Ref<boolean, boolean> | import('vue').ComputedRef<"left" | "right"> | import('vue').ComputedRef<(keyof TEntry)[]>)[];
+    modifyColumns: ModifyColumns<TEntry>;
+    scrollContainerAttributes: () => {
+        ref: (el: Element | import('vue').ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import('vue').ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, import('vue').ComponentProvideOptions>, {}, {}, "", {}, any> | null) => void;
+        onScrollCapturePassive: (e: Event) => void;
+    };
+};

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

@@ -0,0 +1,14 @@
+import { MaybeRef } from 'vue';
+import { DataGridEntry } from '../../types.js';
+export type StickyColumnsOptions<TEntry extends DataGridEntry> = {
+    /**
+     * Defines the columns that should remain sticky.
+     */
+    columns: MaybeRef<(keyof TEntry)[]>;
+    /**
+     * Determines the side to which the columns are sticked.
+     *
+     * @default "left"
+     */
+    position?: MaybeRef<"left" | "right">;
+};

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

@@ -1,9 +1,34 @@
-import type { DataGridFeature } from "./features";
+import { HTMLAttributes } from 'vue';
+import { SkeletonInjected } from '../../composables/useSkeletonState.js';
+import { IfExtends, IfNotEmpty, MaybePick, RecordValues, UnionByKey } from '../../types/index.js';
+import { OnyxHeadlineProps } from '../OnyxHeadline/types.js';
+import { OnyxTableProps } from '../OnyxTable/types.js';
+import { BASE_FEATURE } from './features/base/base.js';
+import { ColumnConfig, ColumnConfigTypeOption, ColumnGroupConfig, DataGridFeature, InternalColumnConfig, TypeRenderer, TypeRenderMap } from './features/index.js';
 export type DataGridMetadata = Record<string, unknown>;
+/**
+ * Makes registered types of typeRenderers available for use in the column configuration.
+ * Extracts all registered `Keys` and their `TOptions` types and maps them to the `ColumnConfigurationTypeOption`.
+ */
+export type MapTypeRenderOptions<T> = {
+    [Key in keyof T]: T[Key] extends TypeRenderer<infer _, infer TOptions> ? ColumnConfigTypeOption<Key, TOptions> : ColumnConfigTypeOption<Key, unknown>;
+};
+/**
+ * A type that can either be the type itself or an array of it.
+ */
+export type MaybeArray<T> = T | Array<T>;
+/**
+ * Unwraps the typeRenderers from the given feature(s).
+ *
+ */
+export type ColumnTypesFromFeatures<TFeatures extends MaybeArray<DataGridFeature<any, any, any>>> = IfExtends<RecordValues<MapTypeRenderOptions<IfNotEmpty<MaybePick<UnionByKey<ReturnType<TFeatures extends any[] ? TFeatures[number] : TFeatures>>, "typeRenderer">>>>, ColumnConfigTypeOption<PropertyKey, unknown>>;
 /**
  * @experimental The DataGrid is still working in progress and the props will change in the future.
  */
-export type OnyxDataGridProps<TEntry extends DataGridEntry = DataGridEntry, TFeatures extends DataGridFeature<TEntry, symbol>[] = DataGridFeature<TEntry, symbol>[]> = {
+export type OnyxDataGridProps<TEntry extends DataGridEntry, TColumnGroup extends ColumnGroupConfig, TTypeRenderer extends TypeRenderMap<TEntry>, TFeatureName extends symbol, TFeatures extends DataGridFeature<TEntry, TTypeRenderer, TFeatureName>[] = never, TTypes extends ColumnConfigTypeOption<PropertyKey, unknown> = ColumnTypesFromFeatures<[
+    ReturnType<typeof BASE_FEATURE>,
+    ...TFeatures
+]>> = {
     /**
      * Features that should be applied.
      * They allow the modification of the behavior and rendering.
@@ -11,19 +36,68 @@ export type OnyxDataGridProps<TEntry extends DataGridEntry = DataGridEntry, TFea
      * Check the Storybook examples (e.g. [Sorting](/?path=/story/data-datagrid-features--sorting)) for more details on how the features are used and configured.
      */
     features?: TFeatures;
+    /**
+     * When `async` is `true`, the data transformation of supported features is disabled and externalized.
+     * This allows for backend handling of data fetching and data transformation.
+     */
+    async?: boolean;
     /**
      * The order of and which columns should be rendered.
      */
-    columns: (keyof TEntry)[];
+    columns: ColumnConfig<TEntry, TColumnGroup, TTypes>[];
+    /**
+     * Configuration for the column groups defined via the `columns` configuration.
+     */
+    columnGroups?: TColumnGroup;
     /**
      * The data that should be used to fill the datagrid.
      */
     data: TEntry[];
-};
+    /**
+     *  Whether to show skeleton rows. Can be set to `true` to use a pre-defined skeleton row count or you can pass a number to define a specific count.
+     */
+    skeleton?: SkeletonInjected;
+    /**
+     * Headline to display above the data grid.
+     */
+    headline?: string | DataGridHeadline;
+} & Omit<OnyxTableProps, "columnGroups" | "scrollContainerAttrs">;
 /**
  * "Raw" user data for a data grid entry/row, e.g. fetched from a backend service.
  */
 export type DataGridEntry = {
-    id: PropertyKey;
     [key: PropertyKey]: unknown;
+    /**
+     * Unique ID of the data grid entry/row.
+     */
+    id: PropertyKey;
+    /**
+     * Additional options for this row.
+     */
+    [DataGridRowOptionsSymbol]?: DataGridEntryOptions;
+};
+export type DataGridEntryOptions = {
+    /**
+     * Attributes that are bound directly to the `<tr>` element of the row.
+     */
+    trAttributes?: HTMLAttributes;
+    /**
+     * Overrides which columns to render in which order.
+     * Useful if e.g. adding a custom full-width row inside a data grid feature.
+     */
+    columns?: Omit<InternalColumnConfig<{
+        id: PropertyKey;
+    }>, "label">[];
+};
+export declare const DataGridRowOptionsSymbol: unique symbol;
+export type DataGridHeadline = Partial<OnyxHeadlineProps> & {
+    /**
+     * Headline text.
+     */
+    text: string;
+    /**
+     * Optional row count to display. If set to `true`, the count will be determined automatically.
+     * Can also be set to a custom number (useful when e.g. using async pagination).
+     */
+    rowCount?: boolean | number;
 };

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

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -1,9 +1,10 @@
-import type { OnyxInputProps } from "../OnyxInput/types";
+import { Nullable } from '../../types/index.js';
+import { OnyxInputProps } from '../OnyxInput/types.js';
 export type OnyxDatePickerProps = Omit<OnyxInputProps, "type" | "modelValue" | "autocapitalize" | "maxlength" | "minlength" | "pattern" | "withCounter" | "placeholder" | "autocomplete"> & {
     /**
      * Current date value. Supports all data types that are parsable by `new Date()`.
      */
-    modelValue?: DateValue;
+    modelValue?: Nullable<DateValue>;
     /**
      * Whether the user should be able to select only date or date + time.
      */

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

@@ -0,0 +1,68 @@
+import { OnyxDialogProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * The trigger for the dialog. Should be an interactive component like a button or link.
+         */
+        trigger?(params: {
+            /**
+             * Attributes and event listeners that must be bound to an interactive element (button or link), that should act as the dialog trigger.
+             */
+            trigger: object;
+        }): unknown;
+        /**
+         * Dialog content.
+         */
+        default(): unknown;
+        /**
+         * Optional slot to override the headline with custom content.
+         * If unset, the `label` property will be shown.
+         */
+        headline?(bindings: Pick<OnyxDialogProps, "label">): unknown;
+        /**
+         * Optional footer slot to e.g. show action buttons (see OnyxBottomBar component).
+         */
+        footer?(): unknown;
+    }> & {
+        /**
+         * The trigger for the dialog. Should be an interactive component like a button or link.
+         */
+        trigger?(params: {
+            /**
+             * Attributes and event listeners that must be bound to an interactive element (button or link), that should act as the dialog trigger.
+             */
+            trigger: object;
+        }): unknown;
+        /**
+         * Dialog content.
+         */
+        default(): unknown;
+        /**
+         * Optional slot to override the headline with custom content.
+         * If unset, the `label` property will be shown.
+         */
+        headline?(bindings: Pick<OnyxDialogProps, "label">): unknown;
+        /**
+         * Optional footer slot to e.g. show action buttons (see OnyxBottomBar component).
+         */
+        footer?(): unknown;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxDialogProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<OnyxDialogProps> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+}>, {
+    open: boolean | null;
+}, {}, {}, {}, 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/OnyxDialog/types.d.ts

@@ -1,24 +1,4 @@
-import type { DensityProp } from "../../composables/density";
-export type OnyxDialogProps = DensityProp & {
-    /**
-     * (Aria) label that describes the dialog. Required for accessibility / screen readers.
-     */
-    label: string;
-    /**
-     * Whether the dialog is open.
-     */
-    open?: boolean;
-    /**
-     * Whether the dialog is a modal.
-     * If `true`, interaction with the rest of the page is prevented and a backdrop is displayed.
-     * Also the `close` event is emitted when pressing "Escape".
-     */
-    modal?: boolean;
-    /**
-     * Whether the dialog is an [alert dialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/).
-     * Should be set for better accessibility / screen reader support when the dialog
-     * interrupts the user's workflow to communicate an important message and acquire a response,
-     * e.g. a delete confirmation.
-     */
-    alert?: boolean;
-};
+import { DensityProp } from '../../composables/density.js';
+import { OnyxBasicDialogProps } from '../OnyxBasicDialog/types.js';
+import { OnyxBasicPopoverProps } from '../OnyxBasicPopover/types.js';
+export type OnyxDialogProps = DensityProp & Omit<OnyxBasicPopoverProps, "role" | "fitParent"> & Pick<OnyxBasicDialogProps, "nonDismissible">;

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

@@ -1,4 +1,4 @@
-import { type DensityProp } from "../../composables/density";
+import { DensityProp } from '../../composables/density.js';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
@@ -10,6 +10,10 @@ declare function __VLS_template(): {
          * Optional slot to override the default icon.
          */
         icon?(): unknown;
+        /**
+         * Optional slot to place custom buttons.
+         */
+        buttons?(): unknown;
     }> & {
         /**
          * Label / text to display.
@@ -19,12 +23,16 @@ declare function __VLS_template(): {
          * Optional slot to override the default icon.
          */
         icon?(): unknown;
+        /**
+         * Optional slot to place custom buttons.
+         */
+        buttons?(): unknown;
     };
     refs: {};
     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, {}, HTMLDivElement>;
+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 → OnyxErrorTooltip.d.vue.ts}

@@ -1,4 +1,4 @@
-import { type FormMessages } from "../../composables/useCustomValidity";
+import { FormMessages } from '../../composables/useCustomValidity.js';
 type __VLS_Props = {
     /**
      * The given component will be shown inside a tooltip when
@@ -6,7 +6,9 @@ type __VLS_Props = {
      * component will not be rendered inside a slot.
      */
     errorMessages?: FormMessages;
-    /** We don't show an error if the content is not interactive */
+    /**
+     * We don't show an error if the content is not interactive
+     */
     disabled?: boolean;
 };
 declare function __VLS_template(): {
@@ -30,7 +32,9 @@ declare function __VLS_template(): {
     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 __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, {
+    targetRef: HTMLDivElement;
+}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -0,0 +1,5 @@
+import { OnyxExternalLinkIconProps } from './types.js';
+declare const _default: import('vue').DefineComponent<OnyxExternalLinkIconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxExternalLinkIconProps> & Readonly<{}>, {
+    withExternalIcon: boolean | "auto";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,8 +1,5 @@
-export type OnyxExternalLinkIcon = {
-    /**
-     * The URL/link to point to.
-     */
-    href?: string;
+import { SharedLinkProps } from '../OnyxRouterLink/types.js';
+export type OnyxExternalLinkIconProps = Partial<Pick<SharedLinkProps, "href">> & {
     /**
      * Whether to show the external link icon.
      * If set to `auto`, it will be shown when the `href` leads to another website

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

@@ -0,0 +1,34 @@
+import { OnyxFABProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Nested options to show inside a flyout.
+         */
+        default?(): unknown;
+    }> & {
+        /**
+         * Nested options to show inside a flyout.
+         */
+        default?(): unknown;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxFABProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<OnyxFABProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    skeleton: import('../../composables/useSkeletonState.js', { with: { "resolution-mode": "import" } }).SkeletonInjected;
+    open: boolean | null;
+    alignment: "left" | "right";
+}, {}, {}, {}, 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/OnyxFAB/types.d.ts

@@ -0,0 +1,13 @@
+import { Nullable } from '../../types/index.js';
+import { OnyxFABButtonProps } from '../OnyxFABButton/types.js';
+export type OnyxFABProps = OnyxFABButtonProps & {
+    /**
+     * How to align the component relative to the viewport.
+     */
+    alignment?: "left" | "right";
+    /**
+     * Whether the element is expanded or collapsed.
+     * If unset, the open state is manged internally.
+     */
+    open?: Nullable<boolean>;
+};

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

@@ -0,0 +1,5 @@
+import { OnyxFABButtonProps } from './types.js';
+declare const _default: import('vue').DefineComponent<OnyxFABButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxFABButtonProps> & Readonly<{}>, {
+    skeleton: import('../../composables/useSkeletonState.js', { with: { "resolution-mode": "import" } }).SkeletonInjected;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,22 @@
+import { DensityProp } from '../../composables/density.js';
+import { SkeletonInjected } from '../../composables/useSkeletonState.js';
+import { WithLinkProp } from '../OnyxRouterLink/types.js';
+export type OnyxFABButtonProps = DensityProp & WithLinkProp & {
+    /**
+     * (Aria) Label of the action button that describes the action.
+     */
+    label: string;
+    /**
+     * If `true`, the label will be visually hidden.
+     * For accessibility / screen readers, the aria-label will still be set.
+     */
+    hideLabel?: boolean;
+    /**
+     * Icon to show in the action button.
+     */
+    icon?: string;
+    /**
+     * Whether to show a skeleton button.
+     */
+    skeleton?: SkeletonInjected;
+};

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

@@ -0,0 +1,3 @@
+import { OnyxFABItemProps } from './types.js';
+declare const _default: import('vue').DefineComponent<OnyxFABItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxFABItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLIElement>;
+export default _default;

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

@@ -0,0 +1,17 @@
+import { DensityProp } from '../../composables/density.js';
+import { WithLinkProp } from '../OnyxRouterLink/types.js';
+export type OnyxFABItemProps = DensityProp & WithLinkProp & {
+    /**
+     * Text label to show
+     */
+    label: string;
+    /**
+     * If `true`, the label will be visually hidden.
+     * For accessibility / screen readers, the aria-label will still be set.
+     */
+    hideLabel?: boolean;
+    /**
+     * Optional icon to show.
+     */
+    icon?: string;
+};