@dpa-id-components/dpa-shared-components 22.0.0-next.2 → 22.0.0-next.4

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

@@ -21,9 +21,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "list-item-click": (value: string, shouldCloseMenu: boolean) => any;
+    "list-item-click": (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onList-item-click"?: ((value: string, shouldCloseMenu: boolean) => any) | undefined;
+    "onList-item-click"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -34,7 +34,11 @@ declare function toggle(): void;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     open: typeof open;
     close: typeof close;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    toggle: (isOpen: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: ((isOpen: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -2,7 +2,7 @@ type __VLS_Slots = {
     /**
      * Label content.
      */
-    default?: () => any;
+    default: () => any;
 };
 type __VLS_Props = {
     id?: string;

package/dist/dpa-shared-components.js

@@ -2181,7 +2181,7 @@ var On = /* @__PURE__ */ e(Tn, [["render", Dn]]), kn = { class: "sr-only" }, An
 				"py-3": e.checkboxSize === "md"
 			}, e.overrideClasses, t.$attrs.class)),
 			tabindex: "0",
-			onClick: n[1] ||= fe((n) => t.$emit("list-item-click", e.value, !0), ["prevent", "stop"])
+			onClick: n[1] ||= fe((n) => t.$emit("list-item-click", e.value), ["prevent", "stop"])
 		}, [
 			e.checkBoxMenu ? (j(), s(wn, {
 				key: 0,
@@ -2189,7 +2189,7 @@ var On = /* @__PURE__ */ e(Tn, [["render", Dn]]), kn = { class: "sr-only" }, An
 				"model-value": e.isChecked,
 				disabled: e.disabled,
 				size: e.checkboxSize,
-				onClick: n[0] ||= fe((n) => t.$emit("list-item-click", e.value, !1), ["stop"])
+				onClick: n[0] ||= fe((n) => t.$emit("list-item-click", e.value), ["stop"])
 			}, {
 				default: q(() => [u("span", kn, [L(t.$slots, "default")])]),
 				_: 3
@@ -4158,7 +4158,7 @@ function Ar(e, t, n) {
 	});
 }
 //#endregion
-//#region node_modules/.pnpm/@vueuse+core@14.3.0_vue@3.5.33_typescript@6.0.3_/node_modules/@vueuse/core/dist/index.js
+//#region node_modules/.pnpm/@vueuse+core@14.3.0_vue@3.5.34_typescript@6.0.3_/node_modules/@vueuse/core/dist/index.js
 var jr = yr ? window : void 0;
 yr && window.document, yr && window.navigator, yr && window.location;
 function Mr(e) {
@@ -5184,7 +5184,7 @@ function Ia(e, t) {
 	delete e[t];
 }
 //#endregion
-//#region node_modules/.pnpm/@floating-ui+vue@1.1.11_vue@3.5.33_typescript@6.0.3_/node_modules/@floating-ui/vue/dist/floating-ui.vue.mjs
+//#region node_modules/.pnpm/@floating-ui+vue@1.1.11_vue@3.5.34_typescript@6.0.3_/node_modules/@floating-ui/vue/dist/floating-ui.vue.mjs
 function La(e) {
 	return typeof e == "object" && !!e && "$el" in e;
 }
@@ -8170,7 +8170,7 @@ var cl = class e extends rl {
 	}
 };
 //#endregion
-//#region node_modules/.pnpm/@vuepic+vue-datepicker@12.1.0_vue@3.5.33_typescript@6.0.3_/node_modules/@vuepic/vue-datepicker/dist/vue-datepicker.js
+//#region node_modules/.pnpm/@vuepic+vue-datepicker@12.1.0_vue@3.5.34_typescript@6.0.3_/node_modules/@vuepic/vue-datepicker/dist/vue-datepicker.js
 function ll() {
 	return y("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
@@ -14495,8 +14495,9 @@ var Pf = /* @__PURE__ */ e(Mf, [["render", Nf]]), Ff = /* @__PURE__ */ h({
 		},
 		placement: { default: "bottom-start" }
 	},
-	setup(e, { expose: t }) {
-		let n = G("reference"), r = G("floating"), i = F(e.initiallyOpen), { floatingStyles: o, update: s } = Ua(n, r, {
+	emits: ["toggle"],
+	setup(e, { expose: t, emit: n }) {
+		let r = n, i = G("reference"), o = G("floating"), { floatingStyles: s, update: c } = Ua(i, o, {
 			placement: e.placement,
 			middleware: [
 				Da(4),
@@ -14504,41 +14505,46 @@ var Pf = /* @__PURE__ */ e(Mf, [["render", Nf]]), Ff = /* @__PURE__ */ h({
 				Oa()
 			],
 			whileElementsMounted: Ea
+		}), d = F(e.initiallyOpen);
+		ce(d, (e) => {
+			r("toggle", e);
 		});
-		function c() {
-			i.value = !0;
+		function f() {
+			d.value = !0;
 		}
-		function d() {
-			i.value = !1;
+		function m() {
+			d.value = !1;
 		}
-		function f() {
-			i.value = !i.value;
+		function h() {
+			d.value = !d.value;
 		}
 		return t({
-			open: c,
-			close: d
-		}), (t, m) => ue((j(), l("div", {
+			open: f,
+			close: m
+		}), (t, n) => ue((j(), l("div", {
 			ref_key: "reference",
-			ref: n,
+			ref: i,
 			class: "w-fit",
-			onClick: m[0] ||= (...e) => H(s) && H(s)(...e)
+			onClick: n[0] ||= (...e) => H(c) && H(c)(...e)
 		}, [L(t.$slots, "button", D(v({
-			open: c,
-			close: d,
-			toggle: f,
-			isOpen: i.value
+			open: f,
+			close: m,
+			toggle: h,
+			isOpen: d.value
 		})), void 0, !0), p(a, { name: e.animate ? "fade-up" : "none" }, {
 			default: q(() => [ue(u("div", {
 				ref_key: "floating",
-				ref: r,
-				style: O(H(o)),
+				ref: o,
+				style: O(H(s)),
 				class: "z-10 w-fit rounded-sm bg-neutral [text-align:initial] [--transition-close-duration:100ms] [--transition-duration:200ms]",
 				"data-side": e.placement
-			}, [L(t.$slots, "default", D(v({ close: d })), void 0, !0)], 12, Rf), [[se, i.value]])]),
+			}, [L(t.$slots, "default", D(v({ close: m })), void 0, !0)], 12, Rf), [[se, d.value]])]),
 			_: 3
-		}, 8, ["name"])])), [[H(Lf), d]]);
+		}, 8, ["name"])])), [[H(Lf), () => {
+			d.value && m();
+		}]]);
 	}
-}), [["__scopeId", "data-v-24e7c3cc"]]), Bf = { class: "flex items-center gap-2" }, Vf = { class: "block w-max max-w-full divide-y overflow-hidden rounded-sm text-base/6 shadow-lg focus:outline-hidden sm:text-sm/5" }, Hf = {
+}), [["__scopeId", "data-v-0d999552"]]), Bf = { class: "flex items-center gap-2" }, Vf = { class: "block w-max max-w-full divide-y overflow-hidden rounded-sm text-base/6 shadow-lg focus:outline-hidden sm:text-sm/5" }, Hf = {
 	key: 0,
 	class: "flex items-center gap-2 rounded-t-sm px-4 py-2 text-neutral-primary [&:has(>input:focus-visible)]:focus-outline [&:has(>input:focus-visible)]:-outline-offset-2"
 }, Uf = ["placeholder"], Wf = {
@@ -14630,17 +14636,16 @@ var Pf = /* @__PURE__ */ e(Mf, [["render", Nf]]), Ff = /* @__PURE__ */ h({
 		return (t, i) => (j(), s(zf, {
 			"initially-open": e.isOpen,
 			animate: e.animate,
-			placement: e.floatingUiPlacement
+			placement: e.floatingUiPlacement,
+			onToggle: i[2] ||= (e) => e ? t.$emit("open") : t.$emit("close")
 		}, {
-			button: q(({ toggle: n, isOpen: r }) => [p(fn, {
-				class: E(["w-full justify-between", { "border-neutral-subtle": r }]),
+			button: q(({ toggle: t, isOpen: n }) => [p(fn, {
+				class: E(["w-full justify-between", { "border-neutral-subtle": n }]),
 				appearance: e.active ? "primary" : e.buttonAppearance,
 				disabled: e.disabled,
 				size: e.filterButtonSize,
 				"data-testid": "menu-button",
-				onClick: (e) => {
-					n(), r ? t.$emit("close") : t.$emit("open");
-				}
+				onClick: t
 			}, {
 				default: q(() => [u("div", Bf, [e.iconLeft ? (j(), s(Te, {
 					key: 0,
@@ -14658,7 +14663,7 @@ var Pf = /* @__PURE__ */ e(Mf, [["render", Nf]]), Ff = /* @__PURE__ */ h({
 				"size",
 				"onClick"
 			])]),
-			default: q(({ close: a }) => [u("div", Vf, [
+			default: q(() => [u("div", Vf, [
 				e.hasSearch ? (j(), l("div", Hf, [p(Te, {
 					class: "shrink-0 text-neutral-emphasis",
 					name: "search",
@@ -14694,9 +14699,7 @@ var Pf = /* @__PURE__ */ e(Mf, [["render", Nf]]), Ff = /* @__PURE__ */ h({
 					"checkbox-appearance": e.checkboxAppearance,
 					class: E(["hover:bg-neutral-whisper focus:bg-neutral-faint", { "border-t": t.hasDividerAbove }]),
 					"data-testid": `menu-option-button-${n}`,
-					onListItemClick: (e, n) => {
-						g(t), n && a();
-					}
+					onListItemClick: (e) => g(t)
 				}, {
 					default: q(() => [f(z(t.label), 1)]),
 					_: 2
@@ -14721,7 +14724,9 @@ var Pf = /* @__PURE__ */ e(Mf, [["render", Nf]]), Ff = /* @__PURE__ */ h({
 					"icon-name": "reset",
 					size: "xs",
 					"data-testid": "menu-search-reset-button",
-					onClick: i[1] ||= (e) => t.$emit("reset")
+					onClick: i[1] ||= (e) => {
+						r.value = "", t.$emit("reset");
+					}
 				}, {
 					default: q(() => [p(Te, { name: "reset" }), f(" " + z(e.resetLabel), 1)]),
 					_: 1
@@ -14862,7 +14867,7 @@ var Pf = /* @__PURE__ */ e(Mf, [["render", Nf]]), Ff = /* @__PURE__ */ h({
 			default: q(() => [ue(u("input", w({
 				id: r.value,
 				"onUpdate:modelValue": i[0] ||= (e) => t.value = e,
-				class: ["inline-flex aspect-square appearance-none items-center justify-center rounded-full border-2 bg-neutral align-middle transition-colors after:size-2 after:rounded-full checked:after:content-[''] not-read-only:enabled:cursor-pointer disabled:border-neutral-muted disabled:text-neutral-soft disabled:checked:after:bg-neutral-muted", {
+				class: ["inline-flex aspect-square appearance-none items-center justify-center rounded-full border-2 bg-neutral align-middle transition-colors after:size-2 after:rounded-full checked:after:content-[''] enabled:cursor-pointer disabled:border-neutral-muted disabled:text-neutral-soft disabled:checked:after:bg-neutral-muted", {
 					"size-4": e.size === "sm",
 					"size-5": e.size === "md",
 					"border-primary checked:after:bg-primary enabled:hover:border-primary-hover": e.appearance === "primary",
@@ -15398,7 +15403,7 @@ var Pf = /* @__PURE__ */ e(Mf, [["render", Nf]]), Ff = /* @__PURE__ */ h({
 			"target"
 		]));
 	}
-}), Ep = { class: "relative" }, Dp = ["id"], Op = /* @__PURE__ */ h({
+}), Ep = ["id"], Dp = /* @__PURE__ */ h({
 	inheritAttrs: !1,
 	__name: "UiToggleButton",
 	props: /* @__PURE__ */ C({
@@ -15421,37 +15426,28 @@ var Pf = /* @__PURE__ */ e(Mf, [["render", Nf]]), Ff = /* @__PURE__ */ h({
 		}, {
 			default: q(() => [
 				e.labelPosition === "left" ? L(n.$slots, "default", { key: 0 }) : c("", !0),
-				u("div", Ep, [
-					ue(u("input", w({
-						id: r.value,
-						"onUpdate:modelValue": i[0] ||= (e) => t.value = e,
-						type: "checkbox",
-						"data-testid": "toggleButton",
-						role: "switch",
-						class: "sr-only"
-					}, {
-						...n.$attrs,
-						class: null
-					}), null, 16, Dp), [[re, t.value]]),
-					u("div", { class: E(["line rounded-full shadow-inner transition-opacity duration-200 ease-in-out", {
-						"bg-secondary opacity-50": t.value,
-						"bg-neutral-faint": !t.value,
-						"h-3 w-6": e.size === "sm",
-						"h-4 w-10": e.size === "lg"
-					}]) }, null, 2),
-					u("div", { class: E([{
-						"translate-x-full bg-secondary": t.value,
-						"bg-neutral-muted": !t.value,
-						"-top-0.5 size-4": e.size === "sm",
-						"-top-1 size-6": e.size === "lg"
-					}, "dot absolute -left-1 rounded-full shadow-sm transition-transform duration-200 ease-in-out"]) }, null, 2)
-				]),
+				ue(u("input", w({
+					id: r.value,
+					"onUpdate:modelValue": i[0] ||= (e) => t.value = e,
+					class: ["relative appearance-none rounded-full shadow-inner transition-opacity duration-200 ease-in-out after:absolute after:-left-1 after:block after:rounded-full after:shadow-sm after:transition-transform after:duration-200 after:ease-in-out after:content-[''] enabled:cursor-pointer", {
+						"bg-secondary-emphasis after:translate-x-full after:bg-secondary": t.value,
+						"bg-neutral-faint after:bg-neutral-muted": !t.value,
+						"h-3 w-6 after:-top-0.5 after:size-4": e.size === "sm",
+						"h-4 w-10 after:-top-1 after:size-6": e.size === "lg"
+					}],
+					type: "checkbox",
+					role: "switch",
+					"data-testid": "toggleButton"
+				}, {
+					...n.$attrs,
+					class: null
+				}), null, 16, Ep), [[re, t.value]]),
 				e.labelPosition === "right" ? L(n.$slots, "default", { key: 1 }) : c("", !0)
 			]),
 			_: 3
 		}, 8, ["for", "class"]));
 	}
-}), kp = ["data-placement"], Ap = /* @__PURE__ */ h({
+}), Op = ["data-placement"], kp = /* @__PURE__ */ h({
 	inheritAttrs: !1,
 	__name: "UiTooltip",
 	props: {
@@ -15525,17 +15521,17 @@ var Pf = /* @__PURE__ */ e(Mf, [["render", Nf]]), Ff = /* @__PURE__ */ h({
 			"leave-active-class",
 			"leave-to-class",
 			"enter-from-class"
-		])], 12, kp)], 8, ["disabled"]))], 2));
+		])], 12, Op)], 8, ["disabled"]))], 2));
 	}
-}), jp = {
+}), Ap = {
 	sm: "40rem",
 	md: "48rem",
 	lg: "64rem",
 	xl: "80rem",
 	"2xl": "96rem"
 };
-function Mp() {
-	let e = Vr(jp).current();
+function jp() {
+	let e = Vr(Ap).current();
 	return {
 		currentBreakpoint: e,
 		sm: o(() => e.value.includes("sm")),
@@ -15546,4 +15542,4 @@ function Mp() {
 	};
 }
 //#endregion
-export { Ie as DpaMediaItem, Le as UiBadge, fn as UiButton, gn as UiButtonGroup, bn as UiCard, Mn as UiCheckBoxGroup, wn as UiCheckbox, Nn as UiChip, In as UiCollapseNavigation, gr as UiColorPicker, uf as UiDatePicker, hf as UiDialog, _f as UiFilterBadge, bf as UiFilterButton, Te as UiIcon, Sf as UiIconButton, Ef as UiInfoContent, Af as UiInput, xn as UiLabel, On as UiList, jn as UiListItem, Ff as UiMediaTypeIcon, qf as UiMenu, Jf as UiMenuItem, Yf as UiMenuList, Zf as UiOverlay, ep as UiOverlayMenu, zf as UiPopover, rp as UiRadioButton, ip as UiRadioInputGroup, up as UiSearchBar, mp as UiSearchInput, hp as UiSection, gp as UiSectionDivider, yp as UiSelect, bp as UiSkeletonBox, Sp as UiSnackbar, wp as UiSpinner, Tp as UiTextButton, Op as UiToggleButton, Ap as UiTooltip, un as cn, Mp as useBreakpoints, Lf as vClickAway };
+export { Ie as DpaMediaItem, Le as UiBadge, fn as UiButton, gn as UiButtonGroup, bn as UiCard, Mn as UiCheckBoxGroup, wn as UiCheckbox, Nn as UiChip, In as UiCollapseNavigation, gr as UiColorPicker, uf as UiDatePicker, hf as UiDialog, _f as UiFilterBadge, bf as UiFilterButton, Te as UiIcon, Sf as UiIconButton, Ef as UiInfoContent, Af as UiInput, xn as UiLabel, On as UiList, jn as UiListItem, Ff as UiMediaTypeIcon, qf as UiMenu, Jf as UiMenuItem, Yf as UiMenuList, Zf as UiOverlay, ep as UiOverlayMenu, zf as UiPopover, rp as UiRadioButton, ip as UiRadioInputGroup, up as UiSearchBar, mp as UiSearchInput, hp as UiSection, gp as UiSectionDivider, yp as UiSelect, bp as UiSkeletonBox, Sp as UiSnackbar, wp as UiSpinner, Tp as UiTextButton, Dp as UiToggleButton, kp as UiTooltip, un as cn, jp as useBreakpoints, Lf as vClickAway };

package/dist/src/components/UiButtonGroup/UiButtonGroup.stories.ts

@@ -1,11 +1,15 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import type {
+  ComponentPropsAndSlots,
+  Meta,
+  StoryObj,
+} from "@storybook/vue3-vite";
 import { ref } from "vue";
 
 import UiButton from "../UiButton/UiButton.vue";
 
 import UiButtonGroup from "./UiButtonGroup.vue";
 
-type PropsAndStoryProps = InstanceType<typeof UiButtonGroup> & {
+type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiButtonGroup> & {
   activeButton: number;
 };
 
@@ -15,14 +19,14 @@ const meta = {
     activeButton: { control: "number" },
   },
   args: {
-    activeButton: 0,
+    activeButton: 1,
   },
   title: "Ui/UiButtonGroup",
   component: UiButtonGroup,
-} satisfies Meta<PropsAndStoryProps>;
+} satisfies Meta<PropsAndCustomArgs>;
 
 export default meta;
-type Story = StoryObj<PropsAndStoryProps>;
+type Story = StoryObj<PropsAndCustomArgs>;
 
 export const Default: Story = {
   render: (args) => ({
@@ -46,7 +50,4 @@ export const Default: Story = {
       </UiButtonGroup>
     `,
   }),
-  args: {
-    activeButton: 1,
-  },
 };

package/dist/src/components/UiCheckbox/UiCheckbox.stories.ts

@@ -1,19 +1,28 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import type {
+  ComponentPropsAndSlots,
+  Meta,
+  StoryObj,
+} from "@storybook/vue3-vite";
 import { ref } from "vue";
 
 import UiCheckbox from "./UiCheckbox.vue";
 
+type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiCheckbox> & {
+  name?: string;
+  disabled?: boolean;
+};
+
 const meta = {
   title: "forms/UiCheckbox",
   component: UiCheckbox,
   argTypes: {
     // Attributes
-    // @ts-ignore Storybook doesn't know that **any** component can receive arbitrary attributes and enforces this on the type level.
+    name: { control: "text" },
     disabled: { control: "boolean" },
   },
   args: {
     // Attributes
-    // @ts-ignore Storybook doesn't know that **any** component can receive arbitrary attributes and enforces this on the type level.
+    name: "name",
     disabled: false,
 
     // Props
@@ -24,10 +33,10 @@ const meta = {
     default: "Checkbox",
     errors: "",
   },
-} satisfies Meta<typeof UiCheckbox>;
+} satisfies Meta<PropsAndCustomArgs>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<PropsAndCustomArgs>;
 
 export const Default: Story = {
   render: (args) => ({

package/dist/src/components/UiIcon/UiIcon.stories.ts

@@ -1,9 +1,13 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import type {
+  ComponentPropsAndSlots,
+  Meta,
+  StoryObj,
+} from "@storybook/vue3-vite";
 
 import { icons } from "./icons.ts";
 import UiIcon from "./UiIcon.vue";
 
-type PropsAndStoryProps = InstanceType<typeof UiIcon> & {
+type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiIcon> & {
   outline: boolean;
 };
 
@@ -18,10 +22,10 @@ const meta = {
   argTypes: {
     outline: { control: "boolean" },
   },
-} satisfies Meta<PropsAndStoryProps>;
+} satisfies Meta<PropsAndCustomArgs>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<PropsAndCustomArgs>;
 
 export const Default: Story = {
   render: (args) => ({

package/dist/src/components/UiInput/UiInput.stories.ts

@@ -1,14 +1,24 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import type {
+  ComponentPropsAndSlots,
+  Meta,
+  StoryObj,
+} from "@storybook/vue3-vite";
 import { action } from "storybook/actions";
 
 import UiInput from "./UiInput.vue";
 
+type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiInput> & {
+  name?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+};
+
 const meta = {
   title: "forms/UiInput",
   component: UiInput,
   args: {
     // Attributes
-    // @ts-ignore Storybook doesn't know that **any** component can receive arbitrary attributes and enforces this on the type level.
     name: "name",
     disabled: false,
     readonly: false,
@@ -24,8 +34,8 @@ const meta = {
   },
   argTypes: {
     // Attributes
-    // @ts-ignore Storybook doesn't know that **any** component can receive arbitrary attributes and enforces this on the type level.
     name: { control: "text" },
+    placeholder: { control: "text" },
     disabled: { control: "boolean" },
     readonly: { control: "boolean" },
   },
@@ -53,17 +63,16 @@ const meta = {
       update: action("update:modelValue"),
     },
   }),
-} satisfies Meta<typeof UiInput>;
+} satisfies Meta<PropsAndCustomArgs>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<PropsAndCustomArgs>;
 
 export const Default: Story = {};
 
 export const Placeholder: Story = {
   args: {
     // Attributes
-    // @ts-ignore
     placeholder: "Some placeholder text",
 
     // Slots

package/dist/src/components/UiListItem/UiListItem.vue

@@ -13,7 +13,7 @@
       )
     "
     tabindex="0"
-    @click.prevent.stop="$emit('list-item-click', value, true)"
+    @click.prevent.stop="$emit('list-item-click', value)"
   >
     <UiCheckbox
       v-if="checkBoxMenu"
@@ -21,7 +21,7 @@
       :model-value="isChecked"
       :disabled="disabled"
       :size="checkboxSize"
-      @click.stop="$emit('list-item-click', value, false)"
+      @click.stop="$emit('list-item-click', value)"
     >
       <span class="sr-only"><slot /></span>
     </UiCheckbox>
@@ -85,6 +85,6 @@ const {
 }>();
 
 defineEmits<{
-  "list-item-click": [value: string, shouldCloseMenu: boolean];
+  "list-item-click": [value: string];
 }>();
 </script>

package/dist/src/components/UiMediaTypeIcon/UiMediaTypeIcon.stories.ts

@@ -1,9 +1,13 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import type {
+  ComponentPropsAndSlots,
+  Meta,
+  StoryObj,
+} from "@storybook/vue3-vite";
 
 import { icons } from "./icons.ts";
 import UiMediaTypeIcon from "./UiMediaTypeIcon.vue";
 
-type PropsAndStoryProps = InstanceType<typeof UiMediaTypeIcon> & {
+type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiMediaTypeIcon> & {
   outline: boolean;
 };
 
@@ -18,10 +22,10 @@ const meta = {
   argTypes: {
     outline: { control: "boolean" },
   },
-} satisfies Meta<PropsAndStoryProps>;
+} satisfies Meta<PropsAndCustomArgs>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<PropsAndCustomArgs>;
 
 export const Default: Story = {
   render: (args) => ({

package/dist/src/components/UiMenu/UiMenu.spec.ts

@@ -301,7 +301,7 @@ describe("UiMenu", () => {
 
     await items[0].trigger("click");
     expect(wrapper.find('[data-testid="menu-option-list"]').isVisible()).toBe(
-      false,
+      true,
     );
   });
 });