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

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

@@ -0,0 +1,8 @@
+import { OnyxSystemButtonProps } from './types.js';
+declare const _default: import('vue').DefineComponent<OnyxSystemButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxSystemButtonProps> & Readonly<{}>, {
+    skeleton: import('../../composables/useSkeletonState.js', { with: { "resolution-mode": "import" } }).SkeletonInjected;
+    disabled: import('../OnyxForm/OnyxForm.core.js', { with: { "resolution-mode": "import" } }).FormInjected<boolean>;
+    autofocus: boolean;
+    color: import('./types.js', { with: { "resolution-mode": "import" } }).SystemButtonColor;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,5 +1,5 @@
-import type { OnyxButtonProps } from "../OnyxButton/types";
-export type OnyxSystemButtonProps = Pick<OnyxButtonProps, "disabled" | "autofocus" | "skeleton"> & {
+import { OnyxButtonProps } from '../OnyxButton/types.js';
+export type OnyxSystemButtonProps = Pick<OnyxButtonProps, "disabled" | "autofocus" | "skeleton" | "link"> & {
     /**
      * Button label / text to show. Is always required (even if `icon` is set) for screen readers / accessibility.
      */

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

@@ -1,4 +1,4 @@
-import type { OnyxTabProps } from "./types";
+import { OnyxTabProps } from './types.js';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
@@ -24,10 +24,10 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<OnyxTabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxTabProps> & Readonly<{}>, {
+declare const __VLS_component: import('vue').DefineComponent<OnyxTabProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxTabProps> & Readonly<{}>, {
+    skeleton: import('../../composables/useSkeletonState.js', { with: { "resolution-mode": "import" } }).SkeletonInjected;
     disabled: boolean;
-    skeleton: import("../../composables/useSkeletonState").SkeletonInjected;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, 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 & {

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

@@ -1,5 +1,5 @@
-import type { DensityProp } from "../../composables/density";
-import type { SkeletonInjected } from "../../composables/useSkeletonState";
+import { DensityProp } from '../../composables/density.js';
+import { SkeletonInjected } from '../../composables/useSkeletonState.js';
 export type OnyxTabProps = DensityProp & {
     /**
      * Value of the tab when its selected. Will be the `modelValue` / `v-model` of the `OnyxTabs` component.

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

@@ -0,0 +1,24 @@
+import { OnyxTableProps, OnyxTableSlots } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<OnyxTableSlots> & OnyxTableSlots;
+    refs: {
+        tableRef: HTMLTableElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxTableProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxTableProps> & Readonly<{}>, {
+    striped: boolean;
+    withVerticalBorders: boolean;
+    withPageScrolling: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    tableRef: HTMLTableElement;
+}, 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/OnyxTable/types.d.ts

@@ -1,4 +1,5 @@
-import type { DensityProp } from "../../composables/density";
+import { HTMLAttributes } from 'vue';
+import { DensityProp } from '../../composables/density.js';
 export type OnyxTableProps = DensityProp & {
     /**
      * Whether to use striped row background colors.
@@ -20,6 +21,47 @@ export type OnyxTableProps = DensityProp & {
      * Slot `head` must be filled for this to work and `withVerticalBorders` property should be set.
      */
     columnGroups?: TableColumnGroup[];
+    /**
+     * Additional HTML attributes for the scroll container.
+     * Supports attributes like id, class, style, and events.
+     */
+    scrollContainerAttrs?: HTMLAttributes;
+};
+export type OnyxTableSlots = {
+    /**
+     * Table content. Must only contain valid HTML `<tbody>` children like `<tr>` and `<td>`.
+     */
+    default(): unknown[];
+    /**
+     * Table header. Must only contain valid HTML `<thead>` children like `<tr>` and `<th>`.
+     */
+    head?(): unknown;
+    /**
+     * Optional slot to customize the empty state when no body content exist.
+     * It is recommended to use the `<OnyxEmpty>` component here.
+     *
+     * If unset, a default translated message will be displayed for the current locale.
+     */
+    empty?(props: {
+        defaultMessage: string;
+    }): unknown;
+    /**
+     * Optional slot for showing a headline above the table (top left). See OnyxHeadline component.
+     */
+    headline?(): unknown;
+    /**
+     * Optional slot for showing table actions above the table (top right). See OnyxIconButton and OnyxButton component.
+     */
+    actions?(): unknown;
+    /**
+     * Optional slot for displaying a pagination below the table (bottom right). See OnyxPagination component.
+     */
+    pagination?(): unknown;
+    /**
+     * Optional slot for displaying additional information below the table (bottom left).
+     * Useful for showing a legend, page size selection etc.
+     */
+    bottomLeft?(): unknown;
 };
 /**
  * Table group that is rendered as `<colgroup>` and corresponding `<th scope="colgroup">` inside the table.

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

@@ -1,9 +1,9 @@
-import { type OnyxTabsProps } from "./types";
+import { OnyxTabsProps } from './types.js';
 declare const _default: <TValue extends PropertyKey = PropertyKey>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly "onUpdate:modelValue"?: ((value: TValue) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & Partial<{}> & OnyxTabsProps<TValue>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & OnyxTabsProps<TValue> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: Readonly<{
         /**
@@ -17,9 +17,7 @@ declare const _default: <TValue extends PropertyKey = PropertyKey>(__VLS_props:
         default(): unknown;
     };
     emit: (evt: "update:modelValue", value: TValue) => void;
-}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}> & {
+}>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;

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

@@ -1,8 +1,8 @@
-import type { createTabs } from "@sit-onyx/headless";
-import type { InjectionKey, Ref } from "vue";
-import type { DensityProp } from "../../composables/density";
-import type { SkeletonProvidedProp } from "../../composables/useSkeletonState";
-import type { HeadlineType } from "../OnyxHeadline/types";
+import { createTabs } from '@sit-onyx/headless';
+import { InjectionKey, Ref, ShallowRef } from 'vue';
+import { DensityProp } from '../../composables/density.js';
+import { SkeletonProvidedProp } from '../../composables/useSkeletonState.js';
+import { HeadlineType } from '../OnyxHeadline/types.js';
 export type OnyxTabsProps<TValue extends PropertyKey = PropertyKey> = DensityProp & Partial<SkeletonProvidedProp> & {
     /**
      * Label of the tabs. Needed for accessibility / screen readers.
@@ -31,7 +31,7 @@ export type TabsInjectionKey<TValue extends PropertyKey = PropertyKey> = Injecti
      * Ref to the parent tabs element where the child tabs should be teleported to
      * to maintain the correct HTML structure.
      */
-    panelRef: Ref<HTMLElement | undefined>;
+    panel: Readonly<ShallowRef<HTMLElement | null>>;
     /**
      * Tab size passed down from the parent so it can be set once for all tabs.
      */

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

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

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

@@ -1,5 +1,6 @@
-import type { DensityProp } from "../../composables/density";
-import type { OnyxColor } from "../../types/colors";
+import { DensityProp } from '../../composables/density.js';
+import { SkeletonInjected } from '../../composables/useSkeletonState.js';
+import { OnyxColor } from '../../types/colors.js';
 export type OnyxTagProps = DensityProp & {
     /**
      * The text content of the tag.
@@ -13,4 +14,26 @@ export type OnyxTagProps = DensityProp & {
      * An icon which will be displayed on the left side of the label.
      */
     icon?: string;
+    /**
+     * Determines whether the Tag is clickable or not.
+     * If a string is provided, it is used as tooltip label.
+     * If an object is provided, it contains the tooltip label and an optional action icon.
+     *
+     * The label must describe the on-click action, e.g. "Click to remove the tag."
+     */
+    clickable?: string | {
+        /**
+         * The label displayed on the Tooltip
+         */
+        label: string;
+        /**
+         * An icon displayed on the right side of the label.
+         * Should be used to indicate an action (e.g., dismissing).
+         */
+        actionIcon?: string;
+    };
+    /**
+     * Whether to show a skeleton tag.
+     */
+    skeleton?: SkeletonInjected;
 };

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

@@ -0,0 +1,22 @@
+import { OnyxTextareaProps } from './types.js';
+declare const _default: import('vue').DefineComponent<OnyxTextareaProps, {
+    input: Readonly<import('vue').ShallowRef<HTMLTextAreaElement | null>>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    validityChange: (validity: ValidityState) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<OnyxTextareaProps> & Readonly<{
+    onValidityChange?: ((validity: ValidityState) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => 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>;
+    requiredMarker: import('../OnyxForm/OnyxForm.core.js', { with: { "resolution-mode": "import" } }).FormInjected<import('../../composables/required.js', { with: { "resolution-mode": "import" } }).RequiredMarkerType>;
+    readonly: boolean;
+    autocapitalize: import('../../composables/useLenientMaxLengthValidation.js', { with: { "resolution-mode": "import" } }).Autocapitalize;
+    disableManualResize: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    inputRef: HTMLTextAreaElement;
+}, any>;
+export default _default;

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

@@ -1,8 +1,5 @@
-import type { DensityProp } from "../../composables/density";
-import type { RequiredMarkerProp } from "../../composables/required";
-import type { CustomValidityProp } from "../../composables/useCustomValidity";
-import type { OnyxInputProps } from "../OnyxInput/types";
-export type OnyxTextareaProps = DensityProp & RequiredMarkerProp & CustomValidityProp & Pick<OnyxInputProps, "label" | "labelTooltip" | "hideLabel" | "modelValue" | "placeholder" | "autocapitalize" | "autofocus" | "name" | "readonly" | "disabled" | "minlength" | "maxlength" | "withCounter" | "message" | "success" | "skeleton"> & {
+import { OnyxInputProps } from '../OnyxInput/types.js';
+export type OnyxTextareaProps = Omit<OnyxInputProps, "autocomplete" | "hideClearIcon" | "hideSuccessIcon" | "loading" | "pattern" | "type"> & {
     /**
      * Override the default autosize behavior (height adjusts based on the current value).
      * By default, the textarea will autosize while maintaining at least 3 and at most 10 rows.

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

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

package/dist/components/OnyxToast/useToast.d.ts

@@ -1,5 +1,5 @@
-import { type ComputedRef, type InjectionKey } from "vue";
-import type { OnyxToastMessageProps } from "../OnyxToastMessage/types";
+import { ComputedRef, InjectionKey } from 'vue';
+import { OnyxToastMessageProps } from '../OnyxToastMessage/types.js';
 export type ToastProvider = {
     /**
      * Readonly list of currently active toasts.

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

@@ -0,0 +1,12 @@
+import { OnyxToastMessageProps } from './types.js';
+declare const _default: import('vue').DefineComponent<OnyxToastMessageProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<OnyxToastMessageProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    icon: string | false;
+    color: Extract<import('../../index.js', { with: { "resolution-mode": "import" } }).OnyxColor, "neutral" | "danger" | "warning" | "success">;
+    duration: number;
+    clickable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,5 +1,5 @@
-import type { DensityProp } from "../../composables/density";
-import type { OnyxColor } from "../../types";
+import { DensityProp } from '../../composables/density.js';
+import { OnyxColor } from '../../types/index.js';
 export type OnyxToastMessageProps = DensityProp & {
     /**
      * Main toast headline.

package/dist/components/OnyxTooltip/OnyxTooltip.ct-utils.d.ts

@@ -1,4 +1,4 @@
-import type { Locator, Page } from "@playwright/test";
+import { Locator, Page } from '@playwright/test';
 type PageLocater = Page | Locator;
 export declare const tooltipUtils: (page: Page) => {
     getTrigger: (type: "label" | "error" | "message", prev?: PageLocater) => Locator;

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

@@ -1,5 +1,6 @@
-import type { VNode } from "vue";
-import type { OnyxTooltipProps } from "./types";
+import { AriaAttributes, VNode } from 'vue';
+import { Nullable } from '../../types/utils.js';
+import { OnyxTooltipProps } from './types.js';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
@@ -9,7 +10,7 @@ declare function __VLS_template(): {
          * **Accessibility**: You must ensure that the trigger attributes are bound to a button when the `open` prop is not `hover`!
          */
         default(params: {
-            trigger: object;
+            trigger: AriaAttributes;
         }): VNode;
         /**
          * Optional slot to place custom content for the tooltip text.
@@ -24,7 +25,7 @@ declare function __VLS_template(): {
          * **Accessibility**: You must ensure that the trigger attributes are bound to a button when the `open` prop is not `hover`!
          */
         default(params: {
-            trigger: object;
+            trigger: AriaAttributes;
         }): VNode;
         /**
          * Optional slot to place custom content for the tooltip text.
@@ -34,19 +35,28 @@ declare function __VLS_template(): {
         tooltip?(): unknown;
     };
     refs: {
-        tooltipWrapperRef: HTMLDivElement;
-        tooltipRef: HTMLDivElement;
+        tooltipWrapperRefEl: HTMLDivElement;
+        tooltipRefEl: HTMLDivElement;
     };
     rootEl: HTMLDivElement;
 };
 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<{}>, {
-    open: import("./types").TooltipOpen;
-    color: Extract<import("../../index.ts").OnyxColor, "neutral" | "danger" | "success">;
-    position: import("./types").TooltipPosition;
-    alignment: import("../../composables/useWedgePosition").WedgePosition | "auto";
+declare const __VLS_component: import('vue').DefineComponent<OnyxTooltipProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (open: Nullable<boolean>) => any;
+}, string, import('vue').PublicProps, Readonly<OnyxTooltipProps> & Readonly<{
+    "onUpdate:open"?: ((open: Nullable<boolean>) => any) | undefined;
+}>, {
+    open: boolean | null;
+    color: Extract<import('../../index.js', { with: { "resolution-mode": "import" } }).OnyxColor, "neutral" | "danger" | "success">;
+    alignment: import('../../composables/useOpenAlignment.js', { with: { "resolution-mode": "import" } }).OpenAlignment | "auto";
+    alignsWithEdge: boolean;
     fitParent: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+    position: import('../../composables/useAnchorPositionPolyfill.js', { with: { "resolution-mode": "import" } }).AnchorPosition | "auto";
+    trigger: import('./types.js', { with: { "resolution-mode": "import" } }).TooltipTrigger;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    tooltipWrapperRefEl: HTMLDivElement;
+    tooltipRefEl: 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/OnyxTooltip/types.d.ts

@@ -1,7 +1,8 @@
-import type { MaybeRefOrGetter } from "vue";
-import type { DensityProp } from "../../composables/density";
-import type { WedgePosition } from "../../composables/useWedgePosition";
-import type { OnyxColor } from "../../types";
+import { MaybeRefOrGetter } from 'vue';
+import { DensityProp } from '../../composables/density.js';
+import { AnchorPosition } from '../../composables/useAnchorPositionPolyfill.js';
+import { OpenAlignment } from '../../composables/useOpenAlignment.js';
+import { Nullable, OnyxColor } from '../../types/index.js';
 export type TooltipOptions = {
     /**
      * Number of milliseconds to use as debounce when showing/hiding the tooltip.
@@ -21,33 +22,48 @@ export type OnyxTooltipProps = DensityProp & {
      * Optional icon to show on the left of the text.
      */
     icon?: string;
+    /**
+     * Tooltip color.
+     */
     color?: Extract<OnyxColor, "neutral" | "danger" | "success">;
     /**
      * How to position the tooltip relative to the parent element.
      */
-    position?: TooltipPosition;
+    position?: AnchorPosition | "auto";
     /**
-     * How to align the wedge relative to the parent element.
+     * Specifies how to align the tooltip relative to the parent element.
+     * This is applicable only for top and bottom positioning.
      */
-    alignment?: WedgePosition | "auto";
+    alignment?: OpenAlignment | "auto";
     /**
      * If `true`, the tooltip will match the width of the parent/slot element.
      */
     fitParent?: boolean;
     /**
-     * How to open/trigger the tooltip. You can set a boolean to force show/hide the tooltip.
-     * When open is not the default value `hover`, the component will act as an "toggletip":
-     * - tooltip: Describes the associated element
-     * - toggletip: Gives additional information about in the current context
+     * Whether the tooltip is currently open/visible. If unset, the state will be managed internally.
+     */
+    open?: Nullable<boolean>;
+    /**
+     * Whether the tooltip is triggered on hover or click. Can also be an object with additional options.
+     *
+     * - hover: tooltip - describes the associated element
+     * - click: toggletip - gives additional information about in the current context
      *
      * The "toggletip" is implemented using an aria-live region.
      * See also: https://inclusive-components.design/tooltips-toggletips/
      */
-    open?: TooltipOpen;
+    trigger?: TooltipTrigger;
+    /**
+     * Determines whether the tooltip aligns with the edge of the parent element,
+     * depending on the specified alignment.
+     */
+    alignsWithEdge?: boolean;
+    /**
+     * Determines whether the tooltip should be rendered without a wedge (triangle).
+     */
+    withoutWedge?: boolean;
 };
-export declare const TOOLTIP_POSITIONS: readonly ["top", "bottom", "auto"];
-export type TooltipPosition = (typeof TOOLTIP_POSITIONS)[number];
-export type TooltipOpen = "hover" | "click" | boolean | ({
+export type TooltipTrigger = "hover" | "click" | ({
     type: "hover";
 } & Partial<TooltipOptions>) | ({
     type: "click";

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

@@ -1,4 +1,4 @@
-import type { OnyxVisuallyHiddenProps } from "./types";
+import { OnyxVisuallyHiddenProps } from './types.js';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
@@ -16,9 +16,9 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<OnyxVisuallyHiddenProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxVisuallyHiddenProps> & Readonly<{}>, {
+declare const __VLS_component: import('vue').DefineComponent<OnyxVisuallyHiddenProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxVisuallyHiddenProps> & Readonly<{}>, {
     is: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, 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 & {

package/dist/components/examples/ComponentShowcase/ComponentShowcase.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_PublicProps = {
+    "dark"?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:dark": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:dark"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/illustrations/OnyxErrorSVG/OnyxErrorSVG.d.vue.ts

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

package/dist/components/illustrations/OnyxFileUploadSVG/OnyxFileUploadSVG.d.vue.ts

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

package/dist/components/illustrations/OnyxFileUploadSVG/types.d.ts

@@ -0,0 +1,10 @@
+export type OnyxFileUploadSVGProps = {
+    /**
+     * Whether the illustration should be displayed in disabled styles.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the illustration should be displayed in active styles.
+     */
+    active?: boolean;
+};

package/dist/components/illustrations/index.d.ts

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

package/dist/composables/animation.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This function allows to synchronizes CSS animations with the same name across the entire document.
+ * The sync will not be executed immediately and is deemed "low-priority".
+ */
+export declare const requestAnimationSync: (animationName: string) => void;

package/dist/composables/checkAll.d.ts

@@ -1,5 +1,5 @@
-import { type Ref } from "vue";
-import type { SelectOptionValue } from "../types";
+import { Ref } from 'vue';
+import { SelectOptionValue } from '../types/index.js';
 export declare const useCheckAll: <TValue extends SelectOptionValue = SelectOptionValue>(enabledOptionValues: Ref<TValue[]>, modelValue: Ref<TValue[]>, onChangeCallback: (newValue: TValue[]) => void) => {
     /**
      * Current "select all" checkbox state.
@@ -7,7 +7,7 @@ export declare const useCheckAll: <TValue extends SelectOptionValue = SelectOpti
      * - indeterminate if at least one but not all options are checked
      * - unchecked if no options are checked
      */
-    state: import("vue").ComputedRef<{
+    state: import('vue').ComputedRef<{
         modelValue: boolean;
         indeterminate: true | undefined;
     }>;

package/dist/composables/density.d.ts

@@ -8,7 +8,7 @@ export type DensityProp = {
     density?: Density;
 };
 export declare const useDensity: (props: DensityProp) => {
-    densityClass: import("vue").ComputedRef<{
+    densityClass: import('vue').ComputedRef<{
         [x: string]: boolean;
     }>;
 };

package/dist/composables/required.d.ts

@@ -1,26 +1,20 @@
+import { Ref } from 'vue';
 export declare const RequiredMarkerTypes: readonly ["optional", "required"];
 export type RequiredMarkerType = (typeof RequiredMarkerTypes)[number];
-export type RequiredMarkerProp = {
+export type RequiredProp = {
     /**
      * Whether the a value for this form element is required.
      */
     required?: boolean;
-    /**
-     * Required mode: `optional` will show an `(optional)` text after the label for optional inputs.
-     * `required` will show an `*` indicator for required inputs after the label instead.
-     * No marker will be visible if the label is hidden.
-     * @default undefined By default the parents setting is used, if none is defined on any `required` is the default.
-     */
-    requiredMarker?: RequiredMarkerType;
 };
-export declare const useRequired: (props: RequiredMarkerProp) => {
+export declare const useRequired: (props: RequiredProp, requiredMarker: Readonly<Ref<RequiredMarkerType>>) => {
     /**
      * Class that configures which type of required marker is used.
      */
-    requiredTypeClass: import("vue").ComputedRef<{
-        [x: string]: "required" | "optional" | undefined;
+    requiredTypeClass: import('vue').ComputedRef<{
+        [x: string]: boolean;
     }>;
-    requiredMarkerClass: import("vue").ComputedRef<{
+    requiredMarkerClass: import('vue').ComputedRef<{
         "onyx-required-marker": boolean | undefined;
         "onyx-optional-marker": boolean;
     }>;

package/dist/composables/scrollEnd.d.ts

@@ -1,4 +1,4 @@
-import { type MaybeRef, type Ref } from "vue";
+import { MaybeRef, Ref } from 'vue';
 export type UseScrollEndOptions = {
     /**
      * Whether the scroll container is currently loading. Will pause scroll listeners if `true`.
@@ -24,5 +24,5 @@ export declare const useScrollEnd: (options: UseScrollEndOptions) => {
     vScrollEnd: {
         mounted: (el: Pick<HTMLElement, "addEventListener" | "removeEventListener">) => void;
     };
-    isScrollEnd: Ref<boolean, boolean>;
+    isScrollEnd: Readonly<Ref<boolean, boolean>>;
 };

package/dist/composables/themeTransition.d.ts

@@ -1,3 +1,3 @@
-import type { ColorSchemeValue } from "src/components/OnyxNavBar/modules";
-import { type Ref } from "vue";
+import { Ref } from 'vue';
+import { ColorSchemeValue } from '../components/OnyxNavBar/modules/index.js';
 export declare const useThemeTransition: (theme: Ref<ColorSchemeValue>) => void;

package/dist/composables/useAnchorPositionPolyfill.d.ts

@@ -0,0 +1,20 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+import { OpenAlignment } from './useOpenAlignment.js';
+import { VueTemplateRefElement } from './useResizeObserver.js';
+export type AnchorPosition = "top" | "top right" | "top left" | "right" | "bottom" | "bottom right" | "bottom left" | "left";
+type UseAnchorPositionPolyfillOptions = {
+    positionedRef: Ref<VueTemplateRefElement>;
+    targetRef: Ref<VueTemplateRefElement>;
+    positionArea: MaybeRefOrGetter<AnchorPosition>;
+    alignment: MaybeRefOrGetter<OpenAlignment>;
+    alignsWithEdge: MaybeRefOrGetter<boolean>;
+    fitParent: MaybeRefOrGetter<boolean>;
+    offset?: number;
+};
+export declare const useAnchorPositionPolyfill: ({ positionedRef, targetRef, positionArea, alignment, alignsWithEdge, fitParent, offset, }: UseAnchorPositionPolyfillOptions) => {
+    leftPosition: Ref<string, string>;
+    topPosition: Ref<string, string>;
+    updateAnchorPositionPolyfill: () => void;
+    useragentSupportsAnchorApi: Ref<boolean, boolean>;
+};
+export {};

package/dist/composables/useAutoFocus.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from 'vue';
+export declare const useAutofocus: (inputRef: Ref<HTMLElement | null>, props: {
+    autofocus: boolean;
+    loading?: boolean;
+}) => void;