sit-onyx 1.0.0-beta.136 → 1.0.0-beta.138

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

@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<OnyxButtonProps, {}, {}, {
     rippleRef: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {
         events: import("vue").Ref<Record<string, (event: MouseEvent) => void>, Record<string, (event: MouseEvent) => void>>;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {
-        rippleTrigger: HTMLSpanElement;
+        rippleTriggerRef: HTMLSpanElement;
     }, HTMLSpanElement, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};

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

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

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

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

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

@@ -17,7 +17,7 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<OnyxLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxLinkProps> & Readonly<{}>, {
-    target: import("./types").LinkTarget;
+    target: import("../OnyxRouterLink/types.ts").LinkTarget;
     withExternalIcon: boolean | "auto";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLAnchorElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

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

@@ -1,10 +1,3 @@
-import type { OnyxExternalLinkIcon } from "../OnyxExternalLinkIcon/types";
-export type OnyxLinkProps = OnyxExternalLinkIcon & {
-    /**
-     * Where to display the linked URL (same tab, new tab etc.).
-     * For `_blank`, the `rel="noreferrer"` will be set automatically.
-     */
-    target?: LinkTarget;
-};
-export declare const LINK_TARGETS: readonly ["_self", "_blank", "_parent", "_top"];
-export type LinkTarget = (typeof LINK_TARGETS)[number];
+import type { OnyxExternalLinkIconProps } from "../OnyxExternalLinkIcon/types";
+import type { SharedLinkProps } from "../OnyxRouterLink/types";
+export type OnyxLinkProps = OnyxExternalLinkIconProps & SharedLinkProps;

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

@@ -15,6 +15,6 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
     onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
-    input: HTMLInputElement;
+    inputRef: HTMLInputElement;
 }, any>;
 export default _default;

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

@@ -67,9 +67,9 @@ declare const __VLS_component: import("vue").DefineComponent<OnyxNavBarProps, {
      *
      * ```ts
      * const route = useRoute();
-     * const navBarRef = ref<ComponentInstance<typeof OnyxNavBar>>();
+     * const navBar = useTemplateRef("navBarRef");
      *
-     * watch(() => route.path, () => navBarRef.value?.closeMobileMenus());
+     * watch(() => route.path, () => navBar.value?.closeMobileMenus());
      * ```
      */
     closeMobileMenus: () => void;

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

@@ -16,9 +16,7 @@ declare function __VLS_template(): {
     rootEl: HTMLLIElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<OnyxMenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxMenuItemProps> & Readonly<{}>, {
-    target: import("../../../OnyxLink/types.ts").LinkTarget;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLLIElement>;
+declare const __VLS_component: import("vue").DefineComponent<OnyxMenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxMenuItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLLIElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,11 +1,6 @@
 import type { OnyxColor } from "../../../../types";
-import type { OnyxLinkProps } from "../../../OnyxLink/types";
-export type OnyxMenuItemProps = Pick<OnyxLinkProps, "target"> & {
-    /**
-     * URL that the menu item points to.
-     * If the property is set the menuitem will act as an anchor, otherwise it will act as an button.
-     */
-    href?: string;
+import type { WithLinkProp } from "../../../OnyxRouterLink/types";
+export type OnyxMenuItemProps = WithLinkProp & {
     /**
      * Whether the menu item is currently active.
      * This is the case if the given link is currently opened.

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

@@ -0,0 +1,26 @@
+import type { OnyxNavButtonProps } from "./types";
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Trigger of the nav button (e.g. a native button or link component).
+         */
+        default(): unknown;
+    }> & {
+        /**
+         * Trigger of the nav button (e.g. a native button or link component).
+         */
+        default(): unknown;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<OnyxNavButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxNavButtonProps> & Readonly<{}>, {}, {}, {}, {}, 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/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue.d.ts

@@ -30,8 +30,9 @@ declare function __VLS_template(): {
             $data: {};
             $props: {
                 readonly mobileChildrenOpen?: boolean | undefined;
-                readonly href?: string | undefined;
-                readonly withExternalIcon?: (boolean | "auto") | undefined;
+                readonly link?: string | (import("../../../OnyxRouterLink/types.ts").SharedLinkProps & Partial<Pick<import("../../../OnyxRouterLink/types.ts").SharedLinkProps, "href">> & {
+                    withExternalIcon?: boolean | "auto";
+                }) | undefined;
                 readonly label: string;
                 readonly active?: boolean | undefined;
                 readonly isMobile: boolean;
@@ -53,7 +54,7 @@ declare function __VLS_template(): {
             $el: HTMLLIElement;
             $options: import("vue").ComponentOptionsBase<Readonly<{
                 mobileChildrenOpen?: boolean;
-            } & import("../../../OnyxExternalLinkIcon/types.ts").OnyxExternalLinkIcon & {
+            } & import("../../../OnyxRouterLink/types.ts").WithLinkProp<true> & {
                 label: string;
                 active?: boolean;
             } & {
@@ -84,7 +85,7 @@ declare function __VLS_template(): {
             $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
         } & Readonly<{}> & Omit<Readonly<{
             mobileChildrenOpen?: boolean;
-        } & import("../../../OnyxExternalLinkIcon/types.ts").OnyxExternalLinkIcon & {
+        } & import("../../../OnyxRouterLink/types.ts").WithLinkProp<true> & {
             label: string;
             active?: boolean;
         } & {
@@ -116,15 +117,15 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     "onUpdate:mobileChildrenOpen"?: ((value: boolean) => any) | undefined;
 }>, {
     active: boolean;
-    withExternalIcon: boolean | "auto";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
     componentRef: ({
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: {
             readonly mobileChildrenOpen?: boolean | undefined;
-            readonly href?: string | undefined;
-            readonly withExternalIcon?: (boolean | "auto") | undefined;
+            readonly link?: string | (import("../../../OnyxRouterLink/types.ts").SharedLinkProps & Partial<Pick<import("../../../OnyxRouterLink/types.ts").SharedLinkProps, "href">> & {
+                withExternalIcon?: boolean | "auto";
+            }) | undefined;
             readonly label: string;
             readonly active?: boolean | undefined;
             readonly isMobile: boolean;
@@ -146,7 +147,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
         $el: HTMLLIElement;
         $options: import("vue").ComponentOptionsBase<Readonly<{
             mobileChildrenOpen?: boolean;
-        } & import("../../../OnyxExternalLinkIcon/types.ts").OnyxExternalLinkIcon & {
+        } & import("../../../OnyxRouterLink/types.ts").WithLinkProp<true> & {
             label: string;
             active?: boolean;
         } & {
@@ -177,7 +178,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
     } & Readonly<{}> & Omit<Readonly<{
         mobileChildrenOpen?: boolean;
-    } & import("../../../OnyxExternalLinkIcon/types.ts").OnyxExternalLinkIcon & {
+    } & import("../../../OnyxRouterLink/types.ts").WithLinkProp<true> & {
         label: string;
         active?: boolean;
     } & {

package/dist/components/OnyxNavBar/modules/OnyxNavButton/types.d.ts

@@ -1,5 +1,5 @@
-import type { OnyxExternalLinkIcon } from "../../../OnyxExternalLinkIcon/types";
-export type OnyxNavButtonProps = OnyxExternalLinkIcon & {
+import type { WithLinkProp } from "../../../OnyxRouterLink/types";
+export type OnyxNavButtonProps = WithLinkProp<true> & {
     /**
      * Label to show inside the Nav item.
      * You can use the `default` slot to display custom content.

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

@@ -19,9 +19,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("../index.ts
     navigate: (href: string, event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<import("../index.ts").OnyxNavButtonProps> & Readonly<{
     onNavigate?: ((href: string, event: MouseEvent) => any) | undefined;
-}>, {
-    withExternalIcon: boolean | "auto";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLLIElement>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLLIElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,6 +1,6 @@
 declare const _default: import("vue").DefineComponent<{}, {
     events: import("vue").Ref<Record<string, (event: MouseEvent) => void>, Record<string, (event: MouseEvent) => void>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {
-    rippleTrigger: HTMLSpanElement;
+    rippleTriggerRef: HTMLSpanElement;
 }, HTMLSpanElement>;
 export default _default;

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

@@ -0,0 +1,21 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default(): unknown;
+    }> & {
+        default(): unknown;
+    };
+    refs: {};
+    rootEl: HTMLAnchorElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("./types").SharedLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("./types").SharedLinkProps> & Readonly<{}>, {
+    target: import("./types").LinkTarget;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLAnchorElement>;
+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/OnyxRouterLink/types.d.ts

@@ -0,0 +1,22 @@
+import type { OnyxExternalLinkIconProps } from "../OnyxExternalLinkIcon/types";
+export type OnyxRouterLinkProps = SharedLinkProps;
+export type SharedLinkProps = {
+    /**
+     * The URL/link to point to.
+     * Will use the projects router for internal links if provided, see [OnyxRouterLink](https://storybook.onyx.schwarz/?path=/docs/support-routerlink--docs) for further details.
+     */
+    href: string;
+    /**
+     * Where to display the linked URL (same tab, new tab etc.).
+     * For `_blank`, the `rel="noreferrer"` will be set automatically.
+     */
+    target?: LinkTarget;
+};
+export declare const LINK_TARGETS: readonly ["_self", "_blank", "_parent", "_top"];
+export type LinkTarget = (typeof LINK_TARGETS)[number];
+export type WithLinkProp<TExternalLink extends boolean = false> = {
+    /**
+     * If set, the component will be rendered as link instead of a button.
+     */
+    link?: string | (TExternalLink extends true ? SharedLinkProps & OnyxExternalLinkIconProps : SharedLinkProps);
+};

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

@@ -1,5 +1,5 @@
 import type { createTabs } from "@sit-onyx/headless";
-import type { InjectionKey, Ref } from "vue";
+import type { InjectionKey, Ref, ShallowRef } from "vue";
 import type { DensityProp } from "../../composables/density";
 import type { SkeletonProvidedProp } from "../../composables/useSkeletonState";
 import type { HeadlineType } from "../OnyxHeadline/types";
@@ -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/OnyxTooltip/OnyxTooltip.vue.d.ts

@@ -1,4 +1,4 @@
-import type { AriaAttributes, VNode } from "vue";
+import { type AriaAttributes, type VNode } from "vue";
 import type { OnyxTooltipProps } from "./types";
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -34,8 +34,8 @@ declare function __VLS_template(): {
         tooltip?(): unknown;
     };
     refs: {
-        tooltipWrapperRef: HTMLDivElement;
-        tooltipRef: HTMLDivElement;
+        tooltipWrapperRefEl: HTMLDivElement;
+        tooltipRefEl: HTMLDivElement;
     };
     rootEl: HTMLDivElement;
 };
@@ -48,8 +48,8 @@ declare const __VLS_component: import("vue").DefineComponent<OnyxTooltipProps, {
     fitParent: boolean;
     alignsWithEdge: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
-    tooltipWrapperRef: HTMLDivElement;
-    tooltipRef: HTMLDivElement;
+    tooltipWrapperRefEl: HTMLDivElement;
+    tooltipRefEl: HTMLDivElement;
 }, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/composables/useLink.d.ts

@@ -0,0 +1,15 @@
+import { type InjectionKey } from "vue";
+/**
+ * Internal behavior of the `OnyxRouterLink`. Should be used for navigation. Considers the user provided router.
+ */
+export declare const useLink: () => {
+    navigate: (e: MouseEvent, href: string) => void;
+};
+export type ProvideRouterOptions = {
+    /**
+     * Programmatically navigate to a new URL.
+     * @see https://router.vuejs.org/api/interfaces/Router.html#push-
+     */
+    push: (to: string) => void;
+};
+export declare const ROUTER_INJECTION_KEY: InjectionKey<ProvideRouterOptions>;

package/dist/composables/useLink.spec-d.d.ts

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

package/dist/composables/useOpenDirection.d.ts

@@ -1,6 +1,6 @@
-import { type MaybeRef } from "vue";
+import { type ShallowRef } from "vue";
 export type OpenDirection = "top" | "bottom";
-export declare const useOpenDirection: (element: MaybeRef<Element | undefined>, defaultDirection?: OpenDirection) => {
+export declare const useOpenDirection: (element: Readonly<ShallowRef<Element | null | undefined>>, defaultDirection?: OpenDirection) => {
     /**
      * Direction in which the flyout etc. should open to.
      */

package/dist/composables/useRipple.d.ts

@@ -1,15 +1,15 @@
-import { type Ref } from "vue";
+import { type ShallowRef } from "vue";
 export type RippleInstance = {
     id: string;
     left: string;
     top: string;
     animationEnded: boolean;
 };
-export declare const useRipple: (container: Ref<Pick<HTMLElement, "getBoundingClientRect"> | undefined>) => {
-    isPointerDown: Ref<boolean, boolean>;
+export declare const useRipple: (container: Readonly<ShallowRef<Pick<HTMLElement, "getBoundingClientRect"> | null>>) => {
+    isPointerDown: import("vue").Ref<boolean, boolean>;
     ripples: import("vue").Reactive<Map<string, RippleInstance>>;
     startRipple: (event: MouseEvent) => string | undefined;
     hideRipples: () => void;
     hideRipple: (el: Pick<HTMLElement, "dataset">) => void;
-    events: Ref<Record<string, (event: MouseEvent) => void>, Record<string, (event: MouseEvent) => void>>;
+    events: import("vue").Ref<Record<string, (event: MouseEvent) => void>, Record<string, (event: MouseEvent) => void>>;
 };

package/dist/composables/useWedgePosition.d.ts

@@ -1,6 +1,6 @@
-import { type MaybeRef } from "vue";
+import { type ShallowRef } from "vue";
 export type WedgePosition = "center" | "left" | "right";
-export declare const useWedgePosition: (element: MaybeRef<Element | undefined>, tooltipElement: MaybeRef<Element | undefined>) => {
+export declare const useWedgePosition: (element: Readonly<ShallowRef<Element | null>>, tooltipElement: Readonly<ShallowRef<Element | null>>) => {
     /**
      * Direction in which the flyout etc. should open to.
      */

package/dist/i18n/locales/en-US.json

@@ -96,7 +96,7 @@
         "empty": "This table is empty."
     },
     "link": {
-        "opensExternally": "Opens in a new tab."
+        "opensExternally": "(opens in a new tab)"
     },
     "navItemOptionsLabel": "Subpages of {label}",
     "navigation": {