sit-onyx 1.0.0-alpha.13 → 1.0.0-alpha.131

package/README.md

@@ -16,48 +16,6 @@ A design system and Vue.js component library created by [Schwarz IT](https://it.
 
 <br />
 
-## Getting Started
+## Documentation
 
-Install the npm package with your corresponding package manager:
-
-### pnpm
-
-```sh
-pnpm add sit-onyx
-```
-
-### npm
-
-```sh
-npm install sit-onyx
-```
-
-### yarn
-
-```sh
-yarn install sit-onyx
-```
-
-After that, import the global CSS file in your `main.ts` file:
-
-```ts
-import "sit-onyx/style.css";
-// if you override some onyx styles (e.g. CSS variables),
-// make sure to import your custom CSS file after the default "sit-onyx/style.css"
-```
-
-Components are now ready to be used, e.g.:
-
-```vue
-<script lang="ts" setup>
-import { OnyxButton } from "sit-onyx";
-</script>
-
-<template>
-  <OnyxButton label="Click me" />
-</template>
-```
-
-<br />
-
-## [Contributing](../../CONTRIBUTING.md)
+You can find our documentation [here](https://onyx.schwarz).

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

@@ -0,0 +1,50 @@
+import { OnyxAppLayoutProps } from './types';
+
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxAppLayoutProps>, {
+    navBarAlignment: string;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxAppLayoutProps>, {
+    navBarAlignment: string;
+}>>>, {
+    navBarAlignment: "top" | "left";
+}, {}>, Readonly<{
+    /** Navigation area of the application */
+    navBar?(): unknown;
+    /** Page content area of the application */
+    default(): unknown;
+    /** Overlays that cover the page and exclude the nav area */
+    pageOverlay?(): unknown;
+    /** Overlays that cover the complete page */
+    appOverlay?(): unknown;
+}> & {
+    /** Navigation area of the application */
+    navBar?(): unknown;
+    /** Page content area of the application */
+    default(): unknown;
+    /** Overlays that cover the page and exclude the nav area */
+    pageOverlay?(): unknown;
+    /** Overlays that cover the complete page */
+    appOverlay?(): unknown;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,4 @@
+export type OnyxAppLayoutProps = {
+    /** Whether the nav bar will stick to the left or to the top of the app */
+    navBarAlignment?: "top" | "left";
+};

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

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

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

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

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

@@ -0,0 +1,45 @@
+import { OnyxAvatarProps } from './types';
+
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxAvatarProps>, {
+    size: string;
+    type: string;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxAvatarProps>, {
+    size: string;
+    type: string;
+}>>>, {
+    type: "initials" | "female" | "male";
+    size: "16px" | "24px" | "32px" | "48px" | "64px" | "96px";
+}, {}>, Readonly<{
+    /**
+     * Optional slot to override the default initials. Will only be used if `type` is `initials`.
+     */
+    default?(): unknown;
+}> & {
+    /**
+     * Optional slot to override the default initials. Will only be used if `type` is `initials`.
+     */
+    default?(): unknown;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,20 @@
+import { IconSize, IconSizeProp } from '../OnyxIcon/types';
+
+export type OnyxAvatarProps = IconSizeProp<Exclude<IconSize, "12px">> & {
+    /**
+     * Label (e.g. the user name), required for accessibility.
+     * For `type="initials"`, the label will determine the displayed initials.
+     */
+    label: string;
+    /**
+     * Image URL to show. If unset or an error occurs while loading, a fallback will be displayed
+     * depending on the `type` property.
+     */
+    src?: string;
+    /**
+     * Avatar type to use.
+     */
+    type?: AvatarType;
+};
+export declare const AVATAR_TYPES: readonly ["initials", "female", "male"];
+export type AvatarType = (typeof AVATAR_TYPES)[number];

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

@@ -0,0 +1,17 @@
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>, Readonly<{
+    /**
+     * Default slot to place the avatars.
+     */
+    default(): unknown;
+}> & {
+    /**
+     * Default slot to place the avatars.
+     */
+    default(): unknown;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,45 @@
+import { OnyxBadgeProps } from './types';
+
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxBadgeProps>, {
+    color: string;
+    dot: boolean;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxBadgeProps>, {
+    color: string;
+    dot: boolean;
+}>>>, {
+    color: "primary" | "secondary" | "neutral" | "danger" | "warning" | "success" | "info";
+    dot: boolean;
+}, {}>, Readonly<{
+    /**
+     * Badge content.
+     */
+    default?(): unknown;
+}> & {
+    /**
+     * Badge content.
+     */
+    default?(): unknown;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,18 @@
+import { DensityProp } from '../../composables/density';
+import { OnyxColor } from '../../types/colors';
+
+export type OnyxBadgeProps = DensityProp & {
+    /**
+     * The color of the badge.
+     */
+    color?: OnyxColor;
+    /**
+     * An icon which will be displayed inside the badge.
+     * Note: If the icon property is set, the default slot will not be rendered.
+     */
+    icon?: string;
+    /**
+     * If `true`, only a colored dot will be displayed instead of the icon or slot content.
+     */
+    dot?: boolean;
+};

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

@@ -1,22 +1,30 @@
-import type { ButtonProps } from "./types";
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonProps>, {
-    label: string;
+import { OnyxButtonProps } from './types';
+
+declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxButtonProps>, {
     disabled: boolean;
+    loading: boolean;
     type: string;
-    variation: string;
+    color: string;
     mode: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonProps>, {
-    label: string;
+    skeleton: boolean;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxButtonProps>, {
     disabled: boolean;
+    loading: boolean;
     type: string;
-    variation: string;
+    color: string;
     mode: string;
-}>>>, {
+    skeleton: boolean;
+}>>> & {
+    onClick?: (() => any) | undefined;
+}, {
     type: "button" | "submit" | "reset";
-    label: string;
+    color: "primary" | "neutral" | "danger";
     disabled: boolean;
-    variation: "primary" | "secondary" | "danger";
+    loading: boolean;
     mode: "default" | "outline" | "plain";
+    skeleton: boolean;
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -1,4 +1,6 @@
-export type ButtonProps = {
+import { DensityProp } from '../../composables/density';
+
+export type OnyxButtonProps = DensityProp & {
     /**
      * The text content of the button.
      */
@@ -7,6 +9,10 @@ export type ButtonProps = {
      * If the button should be disabled or not.
      */
     disabled?: boolean;
+    /**
+     * Shows a loading indicator.
+     */
+    loading?: boolean;
     /**
      * The button type.
      */
@@ -14,15 +20,23 @@ export type ButtonProps = {
     /**
      * The color of the button.
      */
-    variation?: ButtonVariation;
+    color?: ButtonColor;
     /**
      * The style of the button.
      */
     mode?: ButtonMode;
+    /**
+     * An icon which will be displayed on the left side of the label.
+     */
+    icon?: string;
+    /**
+     * Whether to show a skeleton button.
+     */
+    skeleton?: boolean;
 };
 export declare const BUTTON_TYPES: readonly ["button", "submit", "reset"];
 export type ButtonType = (typeof BUTTON_TYPES)[number];
-export declare const BUTTON_VARIATIONS: readonly ["primary", "secondary", "danger"];
-export type ButtonVariation = (typeof BUTTON_VARIATIONS)[number];
+export declare const BUTTON_COLORS: readonly ["primary", "neutral", "danger"];
+export type ButtonColor = (typeof BUTTON_COLORS)[number];
 export declare const BUTTON_MODES: readonly ["default", "outline", "plain"];
 export type ButtonMode = (typeof BUTTON_MODES)[number];

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

@@ -0,0 +1,75 @@
+import { SelectOptionValue } from '../../types';
+
+declare const _default: <TValue extends SelectOptionValue = SelectOptionValue>(__VLS_props: {
+    required?: boolean | undefined;
+    label: string;
+    value: TValue;
+    density?: "default" | "compact" | "cozy" | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    skeleton?: boolean | undefined;
+    customError?: string | undefined;
+    indeterminate?: boolean | undefined;
+    hideLabel?: boolean | undefined;
+    truncation?: "ellipsis" | "multiline" | undefined;
+    requiredMarker?: "required" | "optional" | undefined;
+    modelValue?: boolean | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onValidityChange?: ((validity: ValidityState) => any) | undefined;
+} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, __VLS_ctx?: {
+    attrs: any;
+    slots: {};
+    emit: ((evt: "validityChange", validity: ValidityState) => void) & ((evt: "update:modelValue", value: boolean) => void);
+} | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
+    props: {
+        required?: boolean | undefined;
+        label: string;
+        value: TValue;
+        density?: "default" | "compact" | "cozy" | undefined;
+        disabled?: boolean | undefined;
+        loading?: boolean | undefined;
+        skeleton?: boolean | undefined;
+        customError?: string | undefined;
+        indeterminate?: boolean | undefined;
+        hideLabel?: boolean | undefined;
+        truncation?: "ellipsis" | "multiline" | undefined;
+        requiredMarker?: "required" | "optional" | undefined;
+        modelValue?: boolean | undefined;
+        "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+        onValidityChange?: ((validity: ValidityState) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "validityChange", validity: ValidityState) => void) & ((evt: "update:modelValue", value: boolean) => void);
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: {
+        props: {
+            required?: boolean | undefined;
+            label: string;
+            value: TValue;
+            density?: "default" | "compact" | "cozy" | undefined;
+            disabled?: boolean | undefined;
+            loading?: boolean | undefined;
+            skeleton?: boolean | undefined;
+            customError?: string | undefined;
+            indeterminate?: boolean | undefined;
+            hideLabel?: boolean | undefined;
+            truncation?: "ellipsis" | "multiline" | undefined;
+            requiredMarker?: "required" | "optional" | undefined;
+            modelValue?: boolean | undefined;
+            "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+            onValidityChange?: ((validity: ValidityState) => any) | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+        attrs: any;
+        slots: {};
+        emit: ((evt: "validityChange", validity: ValidityState) => void) & ((evt: "update:modelValue", value: boolean) => void);
+    } | undefined;
+};
+export default _default;
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -1,22 +1,14 @@
-export type OnyxCheckboxProps = {
+import { RequiredMarkerProp } from '../../composables/required';
+import { CustomValidityProp } from '../../composables/useCustomValidity';
+import { BaseSelectOption, SelectOptionValue } from '../../types';
+
+export type OnyxCheckboxProps<TValue extends SelectOptionValue = SelectOptionValue> = BaseSelectOption<TValue> & RequiredMarkerProp & CustomValidityProp & {
     /**
      * Whether the checkbox is checked.
      */
     modelValue?: boolean;
-    /**
-     * Label to show.
-     */
-    label?: string;
     /**
      * If `true`, an indeterminate indicator is shown.
      */
     indeterminate?: boolean;
-    /**
-     * Whether to disable the checkbox and prevent user interaction.
-     */
-    disabled?: boolean;
-    /**
-     * Whether the checkbox is required / has to be checked.
-     */
-    required?: boolean;
 };

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

@@ -0,0 +1,63 @@
+import { SelectOptionValue } from '../../types';
+
+declare const _default: <TValue extends SelectOptionValue>(__VLS_props: {
+    density?: "default" | "compact" | "cozy" | undefined;
+    disabled?: boolean | undefined;
+    skeleton?: number | undefined;
+    modelValue?: TValue[] | undefined;
+    "onUpdate:modelValue"?: ((value: TValue[]) => any) | undefined;
+    options: import('./types').CheckboxGroupOption<TValue>[];
+    headline?: string | undefined;
+    direction?: "horizontal" | "vertical" | undefined;
+    withCheckAll?: boolean | {
+        label?: string | undefined;
+    } | undefined;
+} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, __VLS_ctx?: {
+    attrs: any;
+    slots: {};
+    emit: (evt: "update:modelValue", value: TValue[]) => void;
+} | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
+    props: {
+        density?: "default" | "compact" | "cozy" | undefined;
+        disabled?: boolean | undefined;
+        skeleton?: number | undefined;
+        modelValue?: TValue[] | undefined;
+        "onUpdate:modelValue"?: ((value: TValue[]) => any) | undefined;
+        options: import('./types').CheckboxGroupOption<TValue>[];
+        headline?: string | undefined;
+        direction?: "horizontal" | "vertical" | undefined;
+        withCheckAll?: boolean | {
+            label?: string | undefined;
+        } | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: (evt: "update:modelValue", value: TValue[]) => void;
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: {
+        props: {
+            density?: "default" | "compact" | "cozy" | undefined;
+            disabled?: boolean | undefined;
+            skeleton?: number | undefined;
+            modelValue?: TValue[] | undefined;
+            "onUpdate:modelValue"?: ((value: TValue[]) => any) | undefined;
+            options: import('./types').CheckboxGroupOption<TValue>[];
+            headline?: string | undefined;
+            direction?: "horizontal" | "vertical" | undefined;
+            withCheckAll?: boolean | {
+                label?: string | undefined;
+            } | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+        attrs: any;
+        slots: {};
+        emit: (evt: "update:modelValue", value: TValue[]) => void;
+    } | undefined;
+};
+export default _default;
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -0,0 +1,42 @@
+import { DensityProp } from '../../composables/density';
+import { RequiredMarkerProp } from '../../composables/required';
+import { BaseSelectOption, Direction, SelectOptionValue } from '../../types';
+
+export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp & {
+    /**
+     * Checkbox options.
+     */
+    options: CheckboxGroupOption<TValue>[];
+    /**
+     * Currently checked checkboxes.
+     */
+    modelValue?: TValue[];
+    /**
+     * Headline to show above all checkboxes which is also the fieldset legend.
+     */
+    headline?: string;
+    /**
+     * Direction of the checkboxes.
+     */
+    direction?: Direction;
+    /**
+     * If true, an additional checkbox will be displayed to check/uncheck all options.
+     * Disabled and skeleton checkboxes will be excluded from the check/uncheck behavior.
+     */
+    withCheckAll?: boolean | {
+        /**
+         * Label for the `select all` checkbox.
+         * If unset, a default label will be shown depending on the current locale/language.
+         */
+        label?: string;
+    };
+    /**
+     * Whether all checkboxes should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If set, the specified number of skeleton radio buttons will be shown.
+     */
+    skeleton?: number;
+};
+export type CheckboxGroupOption<TValue extends SelectOptionValue = SelectOptionValue> = BaseSelectOption<TValue> & RequiredMarkerProp;

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

@@ -0,0 +1,56 @@
+import { OnyxDialogProps } from './types';
+
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxDialogProps>, {
+    open: boolean;
+    modal: boolean;
+    alert: boolean;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxDialogProps>, {
+    open: boolean;
+    modal: boolean;
+    alert: boolean;
+}>>> & {
+    onClose?: (() => any) | undefined;
+}, {
+    open: boolean;
+    modal: boolean;
+    alert: boolean;
+}, {}>, Readonly<{
+    /**
+     * Dialog content. For accessibility purposes it is strongly recommended
+     * to focus an element inside the dialog when it opens. The element will depend
+     * on your use case (e.g. an input, button etc.).
+     */
+    default(): unknown;
+}> & {
+    /**
+     * Dialog content. For accessibility purposes it is strongly recommended
+     * to focus an element inside the dialog when it opens. The element will depend
+     * on your use case (e.g. an input, button etc.).
+     */
+    default(): unknown;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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