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

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

@@ -0,0 +1,34 @@
+import { OnyxFileCardProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Optional actions to show on the right side of the card.
+         * Recommended to use the OnyxIconButton component here.
+         */
+        actions?(): unknown;
+    }> & {
+        /**
+         * Optional actions to show on the right side of the card.
+         * Recommended to use the OnyxIconButton component here.
+         */
+        actions?(): unknown;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxFileCardProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    validityChange: (validity: ValidityState) => any;
+}, string, import('vue').PublicProps, Readonly<OnyxFileCardProps> & Readonly<{
+    onValidityChange?: ((validity: ValidityState) => any) | undefined;
+}>, {
+    skeleton: import('../../composables/useSkeletonState.js', { with: { "resolution-mode": "import" } }).SkeletonInjected;
+}, {}, {}, {}, 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/OnyxFileCard/types.d.ts

@@ -0,0 +1,49 @@
+import { DensityProp } from '../../composables/density.js';
+import { SkeletonInjected } from '../../composables/useSkeletonState.js';
+import { OnyxColor } from '../../types/colors.js';
+import { BinaryPrefixedSize } from '../../utils/numbers.js';
+import { OnyxFileTypeIconProps } from '../OnyxFileTypeIcon/types.js';
+import { SharedLinkProps } from '../OnyxRouterLink/types.js';
+export type OnyxFileCardProps = DensityProp & Pick<OnyxFileTypeIconProps, "type"> & {
+    /**
+     * Name of the file.
+     */
+    filename: string;
+    /**
+     * File size.
+     * Can be a number in bytes (e.g. 1024 \* 1024 \* 42) or a [binary prefixed size](https://en.wikipedia.org/wiki/Binary_prefix) (e.g. 42MiB).
+     * For the user, the size will be displayed in decimal instead of binary notation (e.g. 42MB instead of 42MiB) since users are mostly non-technical and such visualization is therefore simpler to understand.
+     */
+    size: number | BinaryPrefixedSize;
+    /**
+     * Link to the file. If set, the filename will be rendered as link.
+     */
+    link?: string | SharedLinkProps;
+    /**
+     * Optional status text to show.
+     */
+    status?: FileCardStatus;
+    /**
+     * Optional icon to show. If unset, a default icon will be shown depending on the file `type` property.
+     */
+    icon?: string;
+    /**
+     * Whether to show a skeleton card.
+     */
+    skeleton?: SkeletonInjected;
+};
+export type FileCardStatus = {
+    /**
+     * Status text to show.
+     */
+    text: string;
+    /**
+     * Text color.
+     * If set to "danger", an error icon will be displayed instead of the regular file icon.
+     */
+    color: OnyxColor;
+    /**
+     * Progress in percentage (0-100%). Displays a progress bar accordingly.
+     */
+    progress?: number;
+};

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

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

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

@@ -0,0 +1,13 @@
+import { MediaType } from '../OnyxFileUpload/types.js';
+import { OnyxIconProps } from '../OnyxIcon/types.js';
+export type OnyxFileTypeIconProps = Omit<OnyxIconProps, "icon"> & {
+    /**
+     * Media type of the file, e.g. "application/pdf".
+     * If unset or an unsupported media type is provided, a default icon will be shown.
+     */
+    type?: MediaType;
+};
+/**
+ * A list of media files that have a dedicated icon for the OnyxFileTypeIcon component.
+ */
+export declare const SUPPORTED_FILE_TYPE_ICON_MEDIA_TYPES: ("application/octet-stream" | "application/pdf" | "text/csv" | "audio/mp3" | "video/mp4" | "image/png" | "application/rtf" | "application/vnd.ms-powerpoint" | "application/vnd.openxmlformats-officedocument.presentationml.presentation" | "application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" | "application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document" | "text/html" | "application/zip" | "application/vnd.rar" | "application/x-7z-compressed" | "application/x-tar" | "application/gzip" | "application/x-bzip2")[];

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

@@ -0,0 +1,40 @@
+import { Nullable } from '../../types/utils.js';
+import { OnyxFileCardProps } from '../OnyxFileCard/types.js';
+import { OnyxFileUploadProps } from './types.js';
+declare const _default: <TMultiple extends boolean = false, TModelValue extends TMultiple extends true ? File[] : Nullable<File> = TMultiple extends true ? File[] : Nullable<File>>(__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: TModelValue) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & OnyxFileUploadProps<TMultiple> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        /**
+         * Optional slot to override the displayed file card for each file.
+         *
+         * @param file The current file being rendered
+         * @param props File card props that would originally be passed to the OnyxFileCard if this slot would not be used
+         */
+        default?(props: {
+            file: File;
+            props: OnyxFileCardProps;
+        }): unknown;
+    }> & {
+        /**
+         * Optional slot to override the displayed file card for each file.
+         *
+         * @param file The current file being rendered
+         * @param props File card props that would originally be passed to the OnyxFileCard if this slot would not be used
+         */
+        default?(props: {
+            file: File;
+            props: OnyxFileCardProps;
+        }): unknown;
+    };
+    emit: (evt: "update:modelValue", value: TModelValue) => void;
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -0,0 +1,91 @@
+import { DensityProp } from '../../composables/density.js';
+import { SkeletonInjected } from '../../composables/useSkeletonState.js';
+import { Nullable } from '../../types/utils.js';
+import { BinaryPrefixedSize } from '../../utils/numbers.js';
+import { FormInjected } from '../OnyxForm/OnyxForm.core.js';
+import { SharedFormElementProps } from '../OnyxFormElement/types.js';
+export type OnyxFileUploadProps<TMultiple extends boolean> = DensityProp & Pick<SharedFormElementProps, "name"> & {
+    /**
+     * Currently selected file(s).
+     * If `multiple` property is enabled, this value is an array, otherwise a single file.
+     */
+    modelValue?: TMultiple extends true ? File[] : Nullable<File>;
+    /**
+     * Whether multiple files can be selected.
+     * If `true`, the `modelValue` property will be an array, otherwise a single value.
+     */
+    multiple?: boolean & TMultiple;
+    /**
+     * File types to accept/allow for the upload.
+     * If undefined or an empty array, all types will be allowed.
+     *
+     * For a full list of media types, see the [official docs](https://www.iana.org/assignments/media-types/media-types.xhtml).
+     *
+     * @see: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file#unique_file_type_specifiers
+     */
+    accept?: FileType[];
+    /**
+     * Max. allowed file size per file.
+     * Can be a number in bytes (e.g. 1024 \* 1024 \* 42) or a [binary prefixed size](https://en.wikipedia.org/wiki/Binary_prefix) (e.g. 42MiB).
+     * For the user, the size will be displayed in decimal instead of binary notation (e.g. 42MB instead of 42MiB) since users are mostly non-technical and such visualization is therefore simpler to understand.
+     *
+     * To limit the total size when `multiple` is enabled, you can use the `maxTotalSize` property.
+     */
+    maxSize?: number | BinaryPrefixedSize;
+    /**
+     * Max. allowed total file size for all files when `multiple` is enabled.
+     * Can be a number in bytes (e.g. 1024 \* 1024 \* 42) or a [binary prefixed size](https://en.wikipedia.org/wiki/Binary_prefix) (e.g. 42MiB).
+     * For the user, the size will be displayed in decimal instead of binary notation (e.g. 42MB instead of 42MiB) since users are mostly non-technical and such visualization is therefore simpler to understand.
+     *
+     * To limit the size per-file, you can use the `maxSize` property.
+     */
+    maxTotalSize?: TMultiple extends true ? number | BinaryPrefixedSize : never;
+    /**
+     * Max. file count that can be selected if `multiple` is enabled.
+     */
+    maxCount?: TMultiple extends true ? number : never;
+    /**
+     * Whether to replace all existing files when `multiple` is enabled.
+     * By default, newly selected files will be added to the current selection.
+     */
+    replace?: boolean & (TMultiple extends true ? boolean : never);
+    /**
+     * Whether the upload is disabled.
+     */
+    disabled?: FormInjected<boolean>;
+    /**
+     * The size of the upload container
+     * @default large
+     */
+    size?: FileUploadSize;
+    /**
+     * Whether to show a skeleton upload.
+     */
+    skeleton?: SkeletonInjected;
+    /**
+     * How to display the selected files.
+     * - list: Shows a list of all files (no height limit)
+     * - maxHeight: Shows a list of files with a max height that when exceeding, the list becomes scrollable
+     * By default the max height is set to 3 files but can be customized by setting the `--onyx-file-upload-max-files` CSS variable to
+     * the desired number of visible items. Note: The list will always display half of the next invisible file to visually indicate
+     * that there are more files available.
+     * - button: Shows a show/hide all files button. By default all files are visible (same behavior as "list" type).
+     * - hidden: Hides the list completely. Useful when implementing a custom solution.
+     *
+     * @default list
+     */
+    listType?: FileUploadListType;
+};
+/**
+ * Unique file type specifier.
+ * For a full list of media types, see the [official docs](https://www.iana.org/assignments/media-types/media-types.xhtml).
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file#unique_file_type_specifiers
+ */
+export type FileType = `.${string}` | `${"audio" | "video" | "image"}/*` | MediaType;
+/**
+ * For a full list of media types, see the [official docs](https://www.iana.org/assignments/media-types/media-types.xhtml).
+ */
+export type MediaType = `${"application" | "audio" | "font" | "image" | "model" | "text" | "video"}/${string}`;
+export type FileUploadSize = "large" | "medium" | "small";
+export type FileUploadListType = "list" | "maxHeight" | "button" | "hidden";

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

@@ -0,0 +1,10 @@
+import { OnyxFilterTagProps } from './types.js';
+declare const _default: import('vue').DefineComponent<OnyxFilterTagProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:active": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<OnyxFilterTagProps> & Readonly<{
+    "onUpdate:active"?: ((value: boolean) => any) | undefined;
+}>, {
+    skeleton: import('../../composables/useSkeletonState.js', { with: { "resolution-mode": "import" } }).SkeletonInjected;
+    active: boolean | null;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,8 @@
+import { Nullable } from '../../types/utils.js';
+import { OnyxTagProps } from '../OnyxTag/types.js';
+export type OnyxFilterTagProps = Omit<OnyxTagProps, "color" | "clickable"> & {
+    /**
+     * If `true` the filter is selected, shows an 'x' icon and can be removed on click.
+     */
+    active?: Nullable<boolean>;
+};

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

@@ -1,5 +1,6 @@
-import { type Reactive, type Ref } from "vue";
-import type { ShowErrorMode } from "../../composables/useErrorClass";
+import { Reactive, Ref } from 'vue';
+import { RequiredMarkerType } from '../../composables/required.js';
+import { ShowErrorMode } from '../../composables/useErrorClass.js';
 /**
  * Props on the `OnyxForm` component.
  * These are injected, so that they can be used in the form child components.
@@ -10,18 +11,28 @@ export type FormProps = {
      * Disabled makes the element not mutable, focusable, or even submitted with the form.
      * It will also not be validated.
      *
-     * Defaults to `false`.
+     * @default `false`
      */
     disabled?: boolean;
     /**
      * Configures if and when errors are shown.
-     * When `true`, errors will be shown initially.
-     * When `false`, errors will never be shown. ⚠️ Only the displaying of the error is effected! An error can still block submission!
+     * - `true`: errors will be shown initially.
+     * - `false`: errors will never be shown. ⚠️ Only the displaying of the error is effected! An error can still block submission!
+     * - "touched": only shows an error *after* a user has significantly interacted with the input, see [:user-invalid](https://drafts.csswg.org/selectors/#user-invalid-pseudo)
      *
-     * The default is `"touched"`, which only shows an error *after* a user has significantly interacted with the input.
-     * See [:user-invalid](https://drafts.csswg.org/selectors/#user-invalid-pseudo).
+     * @default "touched"
      */
     showError?: ShowErrorMode;
+    /**
+     * How to display the required / optional marker.
+     * - optional: will show an `(optional)` text after the label for optional form elements.
+     * - 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;
 };
 /**
  * Props that may be used by the form child components.
@@ -29,20 +40,37 @@ export type FormProps = {
 export type FormComputedProps = {
     [TKey in keyof FormProps]-?: FormProps[TKey];
 };
-/**
- * ❗️ DO NOT USE THIS TYPE ❗️
- *
- * Manual replication of the `keyof FormProps` type.
- * Unfortunately this is necessary because Vue can only supports simple index types.
- *
- * See discussion in https://github.com/vuejs/core/issues/8286
- */
-export type __DONT_USE_VUE_FIX_KeyOfFormProps = "disabled" | "showError";
 /**
  * Props that may be used by the form child components.
  */
 export type FormInjectedProps = {
-    [TKey in __DONT_USE_VUE_FIX_KeyOfFormProps]?: FormInjected<FormProps[TKey]>;
+    /**
+     * Whether the input should be disabled and prevent the user from interacting with it.
+     * Disabled makes the element not mutable, focusable, or even submitted with the form.
+     * It will also not be validated.
+     *
+     * @default Inherits value from closest `<OnyxForm>` component or `false` if none exists
+     */
+    disabled?: FormInjected<boolean>;
+    /**
+     * Configures if and when errors are shown.
+     * - `true`: errors will be shown initially.
+     * - `false`: errors will never be shown. ⚠️ Only the displaying of the error is effected! An error can still block submission!
+     * - "touched": only shows an error *after* a user has significantly interacted with the input, see [:user-invalid](https://drafts.csswg.org/selectors/#user-invalid-pseudo)
+     *
+     * @default Inherits value from closest `<OnyxForm>` component or `touched` if none exists
+     */
+    showError?: FormInjected<ShowErrorMode>;
+    /**
+     * How to display the required / optional marker.
+     * - optional: will show an `(optional)` text after the label for optional form elements.
+     * - required: will show an `*` indicator for required inputs after the label instead.
+     *
+     * No marker will be visible if the label is hidden.
+     *
+     * @default Inherits value from closest `<OnyxForm>` component or `required` if none exists
+     */
+    requiredMarker?: FormInjected<RequiredMarkerType>;
 };
 /**
  * Symbol for the injected form injected properties.
@@ -87,4 +115,5 @@ export declare const provideFormContext: (formProps: Reactive<FormProps> | undef
 export declare const useFormContext: (props: Reactive<FormInjectedProps>) => {
     disabled: Readonly<Ref<boolean, boolean>>;
     showError: Readonly<Ref<boolean | "touched", boolean | "touched">>;
+    requiredMarker: Readonly<Ref<"optional" | "required", "optional" | "required">>;
 };

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

@@ -1,4 +1,4 @@
-import type { OnyxFormProps } from "./types";
+import { OnyxFormProps } from './types.js';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
@@ -16,10 +16,10 @@ declare function __VLS_template(): {
     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<{}>, {
+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, {}, HTMLFormElement>;
+    showError: import('../../composables/useErrorClass.js', { with: { "resolution-mode": "import" } }).ShowErrorMode;
+}, {}, {}, {}, 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/OnyxForm/types.d.ts

@@ -1,4 +1,4 @@
-import type { DensityProp } from "../../composables/density";
-import type { SkeletonProvidedProp } from "../../composables/useSkeletonState";
-import type { FormProps } from "./OnyxForm.core";
+import { DensityProp } from '../../composables/density.js';
+import { SkeletonProvidedProp } from '../../composables/useSkeletonState.js';
+import { FormProps } from './OnyxForm.core.js';
 export type OnyxFormProps = FormProps & Partial<SkeletonProvidedProp> & DensityProp;

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

@@ -0,0 +1,13 @@
+import { FormMessages } from '../../composables/useCustomValidity.js';
+type __VLS_Props = {
+    /**
+     * Message to display.
+     */
+    messages: FormMessages;
+    /**
+     * How the message should be colored and displayed.
+     */
+    type: "danger" | "success" | "neutral";
+};
+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/OnyxFormElement/OnyxFormElement.ct-utils.d.ts

@@ -1,5 +1,5 @@
-import type { MountResultJsx } from "@playwright/experimental-ct-vue";
-import { type Locator, type Page } from "@playwright/test";
+import { MountResultJsx } from '@playwright/experimental-ct-vue';
+import { Locator, Page } from '@playwright/test';
 type PageOrLocator = Page | Locator | MountResultJsx;
 type FormElementTooltip = "label" | "message";
 export declare const createFormElementUtils: (page: PageOrLocator) => {

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

@@ -0,0 +1,27 @@
+import { Nullable } from '../../types/index.js';
+import { OnyxFormElementProps } from './types.js';
+declare const _default: <T>(__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?: Nullable<T>) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & OnyxFormElementProps<T> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        /** The place for the actual form element */
+        default(props: {
+            id: string;
+        }): unknown;
+    }> & {
+        /** The place for the actual form element */
+        default(props: {
+            id: string;
+        }): unknown;
+    };
+    emit: (evt: "update:modelValue", value?: Nullable<T>) => void;
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -1,11 +1,17 @@
-import type { RequiredMarkerProp } from "../../composables/required";
-import type { CustomMessageType, FormMessages } from "../../composables/useCustomValidity";
-export type OnyxFormElementProps = Omit<SharedFormElementProps, "error" | "message" | "success"> & {
+import { DensityProp } from '../../composables/density.js';
+import { RequiredProp } from '../../composables/required.js';
+import { CustomMessageType, CustomValidityProp, FormMessages } from '../../composables/useCustomValidity.js';
+import { SharedTextInputProps } from '../../composables/useLenientMaxLengthValidation.js';
+import { SkeletonInjected } from '../../composables/useSkeletonState.js';
+import { AutofocusProp, Nullable } from '../../types/index.js';
+import { FormInjectedProps } from '../OnyxForm/OnyxForm.core.js';
+export type OnyxFormElementProps<T> = Omit<SharedFormElementProps, "error" | "message" | "success"> & Omit<SharedTextInputProps, "modelValue"> & {
     errorMessages?: FormMessages;
     message?: FormMessages;
     successMessages?: FormMessages;
+    modelValue?: Nullable<T>;
 };
-export type SharedFormElementProps = RequiredMarkerProp & {
+export type SharedFormElementProps = FormInjectedProps & RequiredProp & DensityProp & CustomValidityProp & AutofocusProp & {
     /**
      * The id of a labelable form-related element.
      * If not given an id will be generated.
@@ -17,10 +23,6 @@ export type SharedFormElementProps = RequiredMarkerProp & {
      * Used to reference the input in JavaScript or in submitted form data.
      */
     name?: string;
-    /**
-     * Current value of the form element.
-     */
-    modelValue?: unknown;
     /**
      * Label to show above the form element. Required due to accessibility / screen readers.
      * If you want to visually hide the label, use the `hideLabel` property.
@@ -39,9 +41,17 @@ export type SharedFormElementProps = RequiredMarkerProp & {
      */
     hideLabel?: boolean;
     /**
-     * Error messages that gives details about the cause of a form elements invalidity.
+     * Whether the input should be readonly.
+     */
+    readonly?: boolean;
+    /**
+     * Whether the input is loading. User interaction will be disabled.
      */
-    error?: CustomMessageType;
+    loading?: boolean;
+    /**
+     * Whether to show a skeleton input.
+     */
+    skeleton?: SkeletonInjected;
     /**
      * Message / help text to display below the form element.
      * Will be replaced by an error message if the form element is invalid.
@@ -52,14 +62,7 @@ export type SharedFormElementProps = RequiredMarkerProp & {
      */
     success?: CustomMessageType;
     /**
-     * Maximum number of characters that are allowed to be entered.
-     * Warning: when the value is (pre)set programmatically,
-     * the input invalidity will not be detected by the browser, it will only turn invalid
-     * as soon as a user interacts with the input (types something).
-     */
-    maxlength?: number;
-    /**
-     * If `true`, a character counter will be displayed if `maxLength` is set.
+     * Placeholder to show when the value is empty.
      */
-    withCounter?: boolean;
+    placeholder?: string;
 };

package/dist/components/OnyxGlobalFAB/OnyxGlobalFAB.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/OnyxGlobalFAB/useGlobalFAB.d.ts

@@ -0,0 +1,56 @@
+import { ComputedRef, InjectionKey, MaybeRefOrGetter, Ref } from 'vue';
+import { OnyxFABItemProps } from '../OnyxFABItem/types.js';
+export type GlobalFABProvider = {
+    /**
+     * Readonly list of currently active items.
+     */
+    items: ComputedRef<Ref<ProvidedFABItem>[]>;
+    /**
+     * add the FABOption.
+     */
+    add: (item: MaybeRefOrGetter<ProvidedFABItem>) => void;
+    /**
+     * removes the FABOption with the given `id`.
+     */
+    remove: (id: ProvidedFABItem["id"]) => void;
+};
+export type ProvidedFABItem = OnyxFABItemProps & {
+    /**
+     * Unique FABItem id used to identify the FABItem.
+     */
+    id: PropertyKey;
+    /**
+     * How to align the item relative to the viewport.
+     * If at least one item is left aligned, all items will be left aligned.
+     *
+     * @default "right"
+     */
+    alignment?: "left" | "right";
+    /**
+     * Overrides properties of this FAB item if it's not the only available option.
+     * If there are multiple FAB items displayed, the properties defined here will
+     * take precedence for *this specific item*.
+     */
+    ifOption?: Partial<Omit<ProvidedFABItem, "ifOption" | "id">>;
+    /**
+     * Callback when the FABItem is clicked.
+     */
+    onClick?: () => unknown;
+};
+export declare const GLOBAL_FAB_PROVIDER_INJECTION_KEY: InjectionKey<GlobalFABProvider>;
+/**
+ * Creates a new FABItem provider that can be used with `useGlobalFAB()`.
+ * Should be provided once on global app level with:
+ *
+ * @example
+ * ```ts
+ * import { createGlobalFABProvider, GLOBAL_FAB_PROVIDER_INJECTION_KEY } from "sit-onyx";
+ *
+ * app.provide(GLOBAL_FAB_PROVIDER_INJECTION_KEY, createGlobalFABProvider());
+ * ```
+ */
+export declare const createGlobalFABProvider: () => GlobalFABProvider;
+/**
+ * Composable for showing FABItems.
+ */
+export declare const useGlobalFAB: () => GlobalFABProvider;

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

@@ -0,0 +1,28 @@
+import { OnyxHeadlineProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Headline content.
+         */
+        default(): unknown;
+    }> & {
+        /**
+         * Headline content.
+         */
+        default(): unknown;
+    };
+    refs: {};
+    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<{}>, {
+    skeleton: import('../../composables/useSkeletonState.js', { with: { "resolution-mode": "import" } }).SkeletonInjected;
+}, {}, {}, {}, 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/OnyxHeadline/types.d.ts

@@ -1,9 +1,25 @@
+import { SkeletonInjected } from '../../composables/useSkeletonState.js';
 export type OnyxHeadlineProps = {
     /**
-     * Headline type. Please note that only h1-h4 are intended to be used from UX perspective.
-     * h5 and h6 will have the same styles as h4 and should only be used for semantic reasons.
+     * Semantical headline type. Should match the page hierarchy and should not skip hierarchies (e.g. h2 should be followed by h3 etc.).
      */
     is: HeadlineType;
+    /**
+     * Visual size of the headline (h1-h6). Will default to but can be different from the semantical `is` property.
+     * Please note that only h1-h4 are intended to be used from UX perspective, h5 and h6 will have the same styles as h4.
+     */
+    showAs?: Exclude<HeadlineType, "h5" | "h6">;
+    /**
+     * Unique headline hash/ID (without "#") that is used to show a "#" icon on hover. Makes the headline clickable and a URL that points to this headline
+     * is copied to the users clipboard. Will be automatically normalized when containing non URL-safe characters.
+     *
+     * @example "about-us"
+     */
+    hash?: string;
+    /**
+     * Whether to show a skeleton headline.
+     */
+    skeleton?: SkeletonInjected;
 };
 export declare const HEADLINE_TYPES: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
 export type HeadlineType = (typeof HEADLINE_TYPES)[number];

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

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