sit-onyx 1.0.0-beta.53 → 1.0.0-beta.55

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

@@ -2,9 +2,9 @@ import type { OnyxButtonProps } from "./types";
 declare const _default: import("vue").DefineComponent<OnyxButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxButtonProps> & Readonly<{}>, {
     type: import("./types").ButtonType;
     color: import("./types").ButtonColor;
+    skeleton: import("../../composables/useSkeletonState").SkeletonInjected;
     disabled: import("../OnyxForm/OnyxForm.core").FormInjected<boolean>;
     loading: boolean;
     mode: import("./types").ButtonMode;
-    skeleton: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,4 +1,5 @@
 import type { DensityProp } from "../../composables/density";
+import type { SkeletonInjected } from "../../composables/useSkeletonState";
 import type { AutofocusProp } from "../../types";
 import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 export type OnyxButtonProps = DensityProp & AutofocusProp & {
@@ -33,7 +34,7 @@ export type OnyxButtonProps = DensityProp & AutofocusProp & {
     /**
      * Whether to show a skeleton button.
      */
-    skeleton?: boolean;
+    skeleton?: SkeletonInjected;
 };
 export declare const BUTTON_TYPES: readonly ["button", "submit", "reset"];
 export type ButtonType = (typeof BUTTON_TYPES)[number];

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

@@ -1,16 +1,48 @@
 import { type Reactive, type Ref } from "vue";
+import type { ShowErrorMode } from "../../composables/useErrorClass";
 /**
  * Props on the `OnyxForm` component.
  * These are injected, so that they can be used in the form child components.
  */
-export type FormInjectedProps = {
-    disabled: boolean;
+export type FormProps = {
+    /**
+     * 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.
+     *
+     * Defaults to `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!
+     *
+     * 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).
+     */
+    showError?: ShowErrorMode;
+};
+/**
+ * Props that may be used by the form child components.
+ */
+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.
  */
-type LocalProps = {
-    [TKey in keyof FormInjectedProps]?: FormInjected<FormInjectedProps[TKey]>;
+export type FormInjectedProps = {
+    [TKey in __DONT_USE_VUE_FIX_KeyOfFormProps]?: FormInjected<FormProps[TKey]>;
 };
 /**
  * Symbol for the injected form injected properties.
@@ -33,7 +65,7 @@ export type FORM_INJECTED = typeof FORM_INJECTED_SYMBOL;
  * ```
  */
 export type FormInjected<T> = T | FORM_INJECTED;
-export declare const provideFormContext: (formProps: Reactive<FormInjectedProps> | undefined) => void;
+export declare const provideFormContext: (formProps: Reactive<FormProps> | undefined) => void;
 /**
  * Provides the injected form properties (if available).
  * Otherwise a defined default is used.
@@ -52,7 +84,7 @@ export declare const provideFormContext: (formProps: Reactive<FormInjectedProps>
  * const { disabled, readonly } = useFormContext(props);
  * ```
  */
-export declare const useFormContext: (props: Reactive<LocalProps>) => {
-    disabled: Ref<boolean, boolean>;
+export declare const useFormContext: (props: Reactive<FormInjectedProps>) => {
+    disabled: Readonly<Ref<boolean, boolean>>;
+    showError: Readonly<Ref<boolean | "touched", boolean | "touched">>;
 };
-export {};

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

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

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

@@ -15,7 +15,10 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
 };
 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<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<OnyxFormProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxFormProps> & Readonly<{}>, {
+    disabled: boolean;
+    showError: import("../../composables/useErrorClass").ShowErrorMode;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 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,3 +1,4 @@
 import type { DensityProp } from "../../composables/density";
-import type { FormInjectedProps } from "./OnyxForm.core";
-export type OnyxFormProps = Partial<FormInjectedProps> & DensityProp;
+import type { SkeletonProvidedProp } from "../../composables/useSkeletonState";
+import type { FormProps } from "./OnyxForm.core";
+export type OnyxFormProps = FormProps & Partial<SkeletonProvidedProp> & DensityProp;

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

@@ -14,8 +14,8 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<OnyxIconButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxIconButtonProps> & Readonly<{}>, {
     type: import("../..").ButtonType;
     color: import("../..").ButtonColor;
+    skeleton: import("../../composables/useSkeletonState").SkeletonInjected;
     disabled: import("../OnyxForm/OnyxForm.core").FormInjected<boolean>;
-    skeleton: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -1,4 +1,5 @@
 import type { DensityProp } from "../../composables/density";
+import type { SkeletonInjected } from "../../composables/useSkeletonState";
 import type { AutofocusProp } from "../../types";
 import type { ButtonColor, ButtonType } from "../OnyxButton/types";
 import type { FormInjected } from "../OnyxForm/OnyxForm.core";
@@ -31,5 +32,5 @@ export type OnyxIconButtonProps = DensityProp & AutofocusProp & {
     /**
      * Whether to show a skeleton button.
      */
-    skeleton?: boolean;
+    skeleton?: SkeletonInjected;
 };

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

@@ -1,3 +1,4 @@
+import { FORM_INJECTED_SYMBOL } from "../OnyxForm/OnyxForm.core";
 import type { OnyxInputProps } from "./types";
 declare const _default: import("vue").DefineComponent<OnyxInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     validityChange: (validity: ValidityState) => any;
@@ -8,10 +9,11 @@ declare const _default: import("vue").DefineComponent<OnyxInputProps, {}, {}, {}
 }>, {
     type: import("./types").InputType;
     required: boolean;
-    disabled: import("../OnyxForm/OnyxForm.core").FormInjected<boolean>;
+    skeleton: import("../../composables/useSkeletonState").SkeletonInjected;
+    disabled: boolean | typeof FORM_INJECTED_SYMBOL;
+    showError: boolean | "touched" | typeof FORM_INJECTED_SYMBOL;
     autocapitalize: import("./types").Autocapitalize;
     loading: boolean;
-    skeleton: boolean;
     modelValue: string;
     readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,10 +1,11 @@
 import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
+import type { SkeletonInjected } from "../../composables/useSkeletonState";
 import type { AutofocusProp } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm.core";
+import type { FormInjectedProps } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
-export type OnyxInputProps = DensityProp & RequiredMarkerProp & CustomValidityProp & Omit<OnyxFormElementProps, "modelValue" | "errorMessages"> & AutofocusProp & {
+export type OnyxInputProps = FormInjectedProps & DensityProp & RequiredMarkerProp & CustomValidityProp & Omit<OnyxFormElementProps, "modelValue" | "errorMessages"> & AutofocusProp & {
     /**
      * Current value of the input.
      */
@@ -47,10 +48,6 @@ export type OnyxInputProps = DensityProp & RequiredMarkerProp & CustomValidityPr
      * Whether the input should be readonly.
      */
     readonly?: boolean;
-    /**
-     * Whether the input should be disabled.
-     */
-    disabled?: FormInjected<boolean>;
     /**
      * Whether the input is loading. User interaction will be disabled.
      */
@@ -65,7 +62,7 @@ export type OnyxInputProps = DensityProp & RequiredMarkerProp & CustomValidityPr
     /**
      * Whether to show a skeleton input.
      */
-    skeleton?: boolean;
+    skeleton?: SkeletonInjected;
 };
 export declare const INPUT_TYPES: readonly ["email", "password", "search", "tel", "text", "url"];
 export type InputType = (typeof INPUT_TYPES)[number];

package/dist/components/OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue.d.ts

@@ -1,8 +1,15 @@
 import { type OnyxMenuItemProps } from "./types";
 declare function __VLS_template(): {
-    slots: {
-        default?(_: {}): any;
-        default?(_: {}): any;
+    slots: Readonly<{
+        /**
+         * Text content of the menu item.
+         */
+        default: () => unknown;
+    }> & {
+        /**
+         * Text content of the menu item.
+         */
+        default: () => unknown;
     };
     refs: {};
     attrs: Partial<{}>;

package/dist/components/OnyxNavBar/modules/OnyxNavButton/NavButtonLayout.vue.d.ts

@@ -15,6 +15,9 @@ declare const __VLS_component: import("vue").DefineComponent<import("../../../On
     label: string;
     active?: boolean;
 } & {
+    /**
+     * If the mobile layout should be used.
+     */
     isMobile: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:mobileChildrenOpen": (isOpen: boolean) => any;
@@ -23,6 +26,9 @@ declare const __VLS_component: import("vue").DefineComponent<import("../../../On
     label: string;
     active?: boolean;
 } & {
+    /**
+     * If the mobile layout should be used.
+     */
     isMobile: boolean;
 }> & Readonly<{
     "onUpdate:mobileChildrenOpen"?: ((isOpen: boolean) => any) | undefined;

package/dist/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue.d.ts

@@ -4,8 +4,15 @@ declare const _default: <TValue extends SelectOptionValue = SelectOptionValue>(_
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly "onUpdate:flyoutOpen"?: ((isOpen: boolean) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:flyoutOpen"> & {
+        /**
+         * If the mobile layout should be used instead of the desktop layout.
+         */
         isMobile: boolean;
-        flyoutOpen: ManagedProp<boolean>;
+        /**
+         * Controls the open state of the user menu flyout.
+         * Will be managed automatically, if not provided as a prop.
+         */
+        flyoutOpen?: ManagedProp<boolean>;
     }> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;

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

@@ -1,4 +1,5 @@
-export type OnyxPageLayoutProps = {
+import type { SkeletonProvidedProp } from "../../composables/useSkeletonState";
+export type OnyxPageLayoutProps = Partial<SkeletonProvidedProp> & {
     /** When the page includes a sidebar as well as a footer,
      * footerAsideSidebar will restrict the footer to span
      * only the page main area and not the sidebar.

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

@@ -1,12 +1,13 @@
 import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
+import type { SkeletonInjected } from "../../composables/useSkeletonState";
 import type { AutofocusProp } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm.core";
+import type { FormInjectedProps } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 export declare const MULTISELECT_TEXT_MODE: readonly ["summary", "preview"];
 export type MultiselectTextMode = (typeof MULTISELECT_TEXT_MODE)[number];
-export type OnyxSelectInputProps = DensityProp & RequiredMarkerProp & CustomValidityProp & AutofocusProp & Omit<OnyxFormElementProps, "modelValue" | "maxlength" | "withCounter"> & {
+export type OnyxSelectInputProps = FormInjectedProps & DensityProp & RequiredMarkerProp & CustomValidityProp & AutofocusProp & Omit<OnyxFormElementProps, "modelValue" | "maxlength" | "withCounter"> & {
     /**
      * Current label(s) of the select.
      */
@@ -18,14 +19,10 @@ export type OnyxSelectInputProps = DensityProp & RequiredMarkerProp & CustomVali
      *            A number-badge appears next to it including a tooltip with all selected names.
      */
     textMode?: MultiselectTextMode;
-    /**
-     * Whether the select should be disabled.
-     */
-    disabled?: FormInjected<boolean>;
     /**
      * Whether to show a skeleton select.
      */
-    skeleton?: boolean;
+    skeleton?: SkeletonInjected;
     /**
      * Whether the select should be readonly.
      */

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

@@ -1,3 +1,4 @@
+import { FORM_INJECTED_SYMBOL } from "../OnyxForm/OnyxForm.core";
 import type { OnyxStepperProps } from "./types";
 declare const _default: import("vue").DefineComponent<OnyxStepperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     validityChange: (validity: ValidityState) => any;
@@ -6,9 +7,10 @@ declare const _default: import("vue").DefineComponent<OnyxStepperProps, {}, {},
     onValidityChange?: ((validity: ValidityState) => any) | undefined;
     "onUpdate:modelValue"?: ((value?: number | undefined) => any) | undefined;
 }>, {
-    disabled: import("../OnyxForm/OnyxForm.core").FormInjected<boolean>;
+    skeleton: import("../../composables/useSkeletonState").SkeletonInjected;
+    disabled: boolean | typeof FORM_INJECTED_SYMBOL;
+    showError: boolean | "touched" | typeof FORM_INJECTED_SYMBOL;
     loading: boolean;
-    skeleton: boolean;
     step: number;
     readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,10 +1,11 @@
 import type { DensityProp } from "../../composables/density";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
+import type { SkeletonInjected } from "../../composables/useSkeletonState";
 import type { AutofocusProp } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm.core";
+import type { FormInjectedProps } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 import type { Autocomplete } from "../OnyxInput/types";
-export type OnyxStepperProps = DensityProp & CustomValidityProp & Omit<OnyxFormElementProps, "modelValue" | "errorMessages" | "withCounter" | "maxlength"> & AutofocusProp & {
+export type OnyxStepperProps = FormInjectedProps & DensityProp & CustomValidityProp & Omit<OnyxFormElementProps, "modelValue" | "errorMessages" | "withCounter" | "maxlength"> & AutofocusProp & {
     /**
      * Current value of the input.
      */
@@ -38,10 +39,6 @@ export type OnyxStepperProps = DensityProp & CustomValidityProp & Omit<OnyxFormE
      * @see [MDN autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
      */
     autocomplete?: Autocomplete;
-    /**
-     * Whether to disable the input and prevent user interaction.
-     */
-    disabled?: FormInjected<boolean>;
     /**
      * Whether the input should be readonly.
      */
@@ -53,5 +50,5 @@ export type OnyxStepperProps = DensityProp & CustomValidityProp & Omit<OnyxFormE
     /**
      * Whether to show a skeleton input.
      */
-    skeleton?: boolean;
+    skeleton?: SkeletonInjected;
 };

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

@@ -1,3 +1,4 @@
+import { FORM_INJECTED_SYMBOL } from "../OnyxForm/OnyxForm.core";
 import type { OnyxSwitchProps } from "./types";
 declare const _default: import("vue").DefineComponent<OnyxSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     validityChange: (validity: ValidityState) => any;
@@ -6,9 +7,9 @@ declare const _default: import("vue").DefineComponent<OnyxSwitchProps, {}, {}, {
     onValidityChange?: ((validity: ValidityState) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
-    disabled: import("../OnyxForm/OnyxForm.core").FormInjected<boolean>;
+    skeleton: import("../../composables/useSkeletonState").SkeletonInjected;
+    disabled: boolean | typeof FORM_INJECTED_SYMBOL;
     loading: boolean;
-    skeleton: boolean;
     modelValue: boolean;
     truncation: import("../..").TruncationType;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,9 +1,10 @@
 import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
+import type { SkeletonInjected } from "../../composables/useSkeletonState";
 import type { AutofocusProp, TruncationType } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm.core";
-export type OnyxSwitchProps = DensityProp & RequiredMarkerProp & CustomValidityProp & AutofocusProp & {
+import type { FormInjectedProps } from "../OnyxForm/OnyxForm.core";
+export type OnyxSwitchProps = FormInjectedProps & DensityProp & RequiredMarkerProp & CustomValidityProp & AutofocusProp & {
     /**
      * Whether the switch should be checked or not.
      */
@@ -12,10 +13,6 @@ export type OnyxSwitchProps = DensityProp & RequiredMarkerProp & CustomValidityP
      * The label of the switch.
      */
     label: string;
-    /**
-     * Whether to disable the switch and prevent user interaction.
-     */
-    disabled?: FormInjected<boolean>;
     /**
      * Shows a loading indicator.
      */
@@ -32,5 +29,5 @@ export type OnyxSwitchProps = DensityProp & RequiredMarkerProp & CustomValidityP
     /**
      * Whether to show a skeleton switch.
      */
-    skeleton?: boolean;
+    skeleton?: SkeletonInjected;
 };

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

@@ -1,3 +1,4 @@
+import { FORM_INJECTED_SYMBOL } from "../OnyxForm/OnyxForm.core";
 import type { OnyxTextareaProps } from "./types";
 declare const _default: import("vue").DefineComponent<OnyxTextareaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     validityChange: (validity: ValidityState) => any;
@@ -7,9 +8,9 @@ declare const _default: import("vue").DefineComponent<OnyxTextareaProps, {}, {},
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     required: boolean;
-    disabled: import("../OnyxForm/OnyxForm.core").FormInjected<boolean>;
+    skeleton: import("../../composables/useSkeletonState").SkeletonInjected;
+    disabled: boolean | typeof FORM_INJECTED_SYMBOL;
     autocapitalize: import("../..").Autocapitalize;
-    skeleton: boolean;
     modelValue: string;
     readonly: boolean;
     disableManualResize: boolean;

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

@@ -1,7 +1,15 @@
 import type { OnyxVisuallyHiddenProps } from "./types";
 declare function __VLS_template(): {
-    slots: {
-        default?(_: {}): any;
+    slots: Readonly<{
+        /**
+         * Content that should be visually hidden.
+         */
+        default: () => unknown;
+    }> & {
+        /**
+         * Content that should be visually hidden.
+         */
+        default: () => unknown;
     };
     refs: {};
     attrs: Partial<{}>;

package/dist/components/examples/ComponentShowcase/ComponentShowcase.vue.d.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": (dark: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:dark"?: ((dark: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/examples/GridPlayground/EditGridElementDialog/EditGridElementDialog.vue.d.ts

@@ -4,6 +4,10 @@ export type GridElementConfig = {
     breakpoints?: Partial<Record<OnyxBreakpoint, number>>;
 };
 declare const _default: import("vue").DefineComponent<{
+    /**
+     * Controls if the dialog is shown or not.
+     * State is reset when the dialog is closed.
+     */
     open?: boolean;
     /**
      * Initial value. Useful if editing an existing element.
@@ -14,6 +18,10 @@ declare const _default: import("vue").DefineComponent<{
     apply: (element: GridElementConfig) => any;
     close: () => any;
 }, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Controls if the dialog is shown or not.
+     * State is reset when the dialog is closed.
+     */
     open?: boolean;
     /**
      * Initial value. Useful if editing an existing element.

package/dist/components/examples/GridPlayground/GridBadge/GridBadge.vue.d.ts

@@ -1,11 +1,29 @@
 import type { OnyxColor } from "../../../../types";
 declare const _default: import("vue").DefineComponent<{
+    /**
+     * Value shown on the badge itself.
+     */
     value: string | number;
+    /**
+     * Label shown after the value.
+     */
     label: string;
+    /**
+     * The badge color.
+     */
     color: Extract<OnyxColor, "info" | "warning" | "danger">;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Value shown on the badge itself.
+     */
     value: string | number;
+    /**
+     * Label shown after the value.
+     */
     label: string;
+    /**
+     * The badge color.
+     */
     color: Extract<OnyxColor, "info" | "warning" | "danger">;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/examples/GridPlayground/GridElement/GridElement.vue.d.ts

@@ -22,10 +22,22 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<GridElementConfig & {
+    /**
+     * Rendered label of the grid element.
+     */
     label: string;
+    /**
+     * If the element should be rendered in the outline or default variant.
+     */
     mode?: "default" | "outline";
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GridElementConfig & {
+    /**
+     * Rendered label of the grid element.
+     */
     label: string;
+    /**
+     * If the element should be rendered in the outline or default variant.
+     */
     mode?: "default" | "outline";
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/components/examples/GridPlayground/GridOverlay/GridOverlay.vue.d.ts

@@ -1,6 +1,12 @@
 declare const _default: import("vue").DefineComponent<{
+    /**
+     * The number of grid columns.
+     */
     columns?: number;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * The number of grid columns.
+     */
     columns?: number;
 }> & Readonly<{}>, {
     columns: number;

package/dist/composables/density.d.ts

@@ -9,6 +9,6 @@ export type DensityProp = {
 };
 export declare const useDensity: (props: DensityProp) => {
     densityClass: import("vue").ComputedRef<{
-        [x: string]: "default" | "compact" | "cozy" | undefined;
+        [x: string]: boolean;
     }>;
 };

package/dist/composables/useErrorClass.d.ts

@@ -0,0 +1,14 @@
+import { type Ref } from "vue";
+/**
+ * All possible `showError` values.
+ */
+export declare const ShowErrorModes: readonly [true, false, "touched"];
+/**
+ * Configures if and when errors are shown.
+ * When `true`, errors will be shown initially.
+ * When `false`, errors will never be shown.
+ * `"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).
+ */
+export type ShowErrorMode = (typeof ShowErrorModes)[number];
+export declare const useErrorClass: (showError: Readonly<Ref<ShowErrorMode>>) => import("vue").ComputedRef<"onyx-form-element--immediate-invalid" | "onyx-form-element--suppress-invalid" | "onyx-form-element--touched-invalid">;

package/dist/composables/useSkeletonState.d.ts

@@ -0,0 +1,54 @@
+import { type ComputedRef, type Reactive } from "vue";
+/**
+ * Prop on the parent component.
+ * It's value is provided, so that it can be used in child components.
+ */
+export type SkeletonProvidedProp = {
+    skeleton: boolean;
+};
+/**
+ * Prop that may be used by the child components.
+ */
+type LocalProps = {
+    skeleton: SKELETON_INJECTED | boolean;
+};
+/**
+ * Symbol for the skeleton injected property.
+ */
+export declare const SKELETON_INJECTED_SYMBOL: unique symbol;
+export type SKELETON_INJECTED = typeof SKELETON_INJECTED_SYMBOL;
+/**
+ * Prop type used by child elements, which indicates that the prop value is taken from the parent by default.
+ * The prop **MUST** use `SKELETON_INJECTED_SYMBOL` as default value.
+ * `useSkeletonContext` is used to access the injected parent property.
+ *
+ * @example
+ * ```ts
+ * const props = withDefaults(defineProps<OnyxComponentProps>(), {
+ *   skeleton: SKELETON_INJECTED_SYMBOL,
+ * });
+ *
+ * const skeleton = useSkeletonContext(props);
+ * ```
+ */
+export type SkeletonInjected = SKELETON_INJECTED | boolean;
+export declare const provideSkeletonContext: (parentElementProps: Reactive<SkeletonProvidedProp> | undefined) => void;
+/**
+ * Provides the injected parent property (if available).
+ * Otherwise a defined default is used.
+ * A prop defined on the child component will always take precedence over the injected parent property.
+ *
+ * The prop **MUST** use `SKELETON_INJECTED_SYMBOL` as default value.
+ * The type `SkeletonInjected<T>` can be used as PropType wrapper.
+ *
+ * @example
+ * ```ts
+ * const props = withDefaults(defineProps<OnyxComponentProps>(), {
+ *   skeleton: SKELETON_INJECTED_SYMBOL, // By default, the parent injected value is used
+ * });
+ *
+ * const skeleton = useSkeletonContext(props);
+ * ```
+ */
+export declare const useSkeletonContext: (props: Reactive<LocalProps>) => ComputedRef<boolean>;
+export {};