@poveste/app 0.15.0 → 0.16.0

package/dist/app/style/main.pcss

@@ -2,10 +2,8 @@
    this file is compiled by the postcss CLI into dist/style.css, which rebases
    font URLs relative to the *source* and ships a path into node_modules. Vite
    processes the entries and hashes the files into the book (#219). */
-@import 'floating-vue/dist/style.css';
 @import '@poveste/controls/dist/index.es.css';
 
-@import './floating.pcss';
 @import './transitions.pcss';
 
 /*
@@ -17,6 +15,11 @@
 @import 'tailwindcss/theme.css' layer(theme);
 @import 'tailwindcss/utilities.css' layer(utilities);
 
+/* The chrome's tokens, shared with `@poveste/controls` — see the file for why
+   both packages read them rather than each declaring its own. The relative path
+   is the one `@source` below already uses. */
+@import '../../../../poveste-controls/src/style/tokens.css';
+
 /* v4 auto-detection only scans this package; the app renders controls, so their
    utility classes must be generated here too (was a content glob in v3). */
 @source "../../../../poveste-controls/src";
@@ -32,47 +35,6 @@
    in v3 the `ptw-` prefix applied to the dark class and kept them separate. */
 @custom-variant dark (&:where(.ptw-dark, .ptw-dark *));
 
-@theme {
-  /*
-   * primary + gray are themable at runtime: resolved-theme.ts injects
-   * --_poveste-color-<name>-<key> as space-separated RGB channels, and v4's
-   * native color-mix handles opacity (replacing the v3 withOpacityValue shim).
-   */
-  --color-primary-50: rgb(var(--_poveste-color-primary-50));
-  --color-primary-100: rgb(var(--_poveste-color-primary-100));
-  --color-primary-200: rgb(var(--_poveste-color-primary-200));
-  --color-primary-300: rgb(var(--_poveste-color-primary-300));
-  --color-primary-400: rgb(var(--_poveste-color-primary-400));
-  --color-primary-500: rgb(var(--_poveste-color-primary-500));
-  --color-primary-600: rgb(var(--_poveste-color-primary-600));
-  --color-primary-700: rgb(var(--_poveste-color-primary-700));
-  --color-primary-800: rgb(var(--_poveste-color-primary-800));
-  --color-primary-900: rgb(var(--_poveste-color-primary-900));
-
-  --color-gray-50: rgb(var(--_poveste-color-gray-50));
-  --color-gray-100: rgb(var(--_poveste-color-gray-100));
-  --color-gray-200: rgb(var(--_poveste-color-gray-200));
-  --color-gray-300: rgb(var(--_poveste-color-gray-300));
-  --color-gray-400: rgb(var(--_poveste-color-gray-400));
-  --color-gray-500: rgb(var(--_poveste-color-gray-500));
-  --color-gray-600: rgb(var(--_poveste-color-gray-600));
-  --color-gray-700: rgb(var(--_poveste-color-gray-700));
-  --color-gray-750: rgb(var(--_poveste-color-gray-750));
-  --color-gray-800: rgb(var(--_poveste-color-gray-800));
-  --color-gray-850: rgb(var(--_poveste-color-gray-850));
-  --color-gray-900: rgb(var(--_poveste-color-gray-900));
-  --color-gray-950: rgb(var(--_poveste-color-gray-950));
-
-  /* border radius (ported from the root v3 config) */
-  --radius-sm: 0.25rem;
-  --radius: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-2xl: 1.5rem;
-  --radius-3xl: 2rem;
-}
-
 /*
  * Manual reset — replaces Preflight, which is intentionally disabled.
  *
@@ -108,6 +70,18 @@
     font-family: inherit;
   }
 
+  /* Preflight resets these and the replacement above left them out, so a button
+     carrying no background utility painted the UA `ButtonFace`: grey, near enough
+     to light chrome to pass, a white panel against dark. */
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
+    appearance: button;
+    background-color: transparent;
+    background-image: none;
+  }
+
   a,
   button {
     user-select: none;
@@ -170,7 +144,7 @@
     background-repeat: no-repeat;
     background-position: right;
 
-    /* Subject-side, not `.ptw-dark &` — see the note in floating.pcss. */
+    /* Subject-side, not `.ptw-dark &` — see the note in BaseDropdown.vue. */
     &:where(.ptw-dark, .ptw-dark *) {
       background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
     }

package/dist/bundled/App.vue_vue_type_script_setup_true_lang.js

@@ -31,12 +31,13 @@ var _hoisted_4 = {
 	key: 1,
 	class: "sr-only"
 };
-var _hoisted_5 = { class: "flex flex-col h-full bg-gray-100 dark:bg-gray-750 __poveste-pane-shadow-from-right" };
-var _hoisted_6 = {
+var _hoisted_5 = { class: "flex-1 min-h-0 flex flex-col" };
+var _hoisted_6 = { class: "flex flex-col h-full bg-gray-100 dark:bg-gray-750 __poveste-pane-shadow-from-right" };
+var _hoisted_7 = {
 	"aria-label": "Stories",
 	class: "flex-1 flex flex-col min-h-0"
 };
-var _hoisted_7 = { class: "flex flex-col h-full" };
+var _hoisted_8 = { class: "flex flex-col h-full" };
 var App_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "PovesteApp",
 	setup(__props) {
@@ -116,26 +117,27 @@ var App_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompon
 					})]), createVNode(Breadcrumb_default, {
 						tree: tree$1.value,
 						stories: stories.value
-					}, null, 8, ["tree", "stories"])], 64)) : !storyListVisible.value ? (openBlock(), createElementBlock("header", _hoisted_4, [createElementVNode("h1", null, toDisplayString(unref(povesteConfig).theme?.title ?? "Poveste"), 1)])) : createCommentVNode("", true), createVNode(BaseSplitPane_default, {
+					}, null, 8, ["tree", "stories"])], 64)) : !storyListVisible.value ? (openBlock(), createElementBlock("header", _hoisted_4, [createElementVNode("h1", null, toDisplayString(unref(povesteConfig).theme?.title ?? "Poveste"), 1)])) : createCommentVNode("", true), createElementVNode("main", _hoisted_5, [createVNode(BaseSplitPane_default, {
 						"save-id": "main-horiz",
+						label: "Resize the story list",
 						min: 5,
 						max: 50,
 						"default-split": 15,
 						"show-first": !unref(isMobile) && storyListVisible.value,
 						class: "flex-1 min-h-0"
 					}, {
-						first: withCtx(() => [createElementVNode("div", _hoisted_5, [createVNode(AppHeader_default, { class: "flex-none" }), createElementVNode("nav", _hoisted_6, [createVNode(StoryList_default, {
+						first: withCtx(() => [createElementVNode("div", _hoisted_6, [createVNode(AppHeader_default, { class: "flex-none" }), createElementVNode("nav", _hoisted_7, [createVNode(StoryList_default, {
 							tree: tree$1.value,
 							stories: stories.value,
 							class: "flex-1"
 						}, null, 8, ["tree", "stories"])])])]),
-						last: withCtx(() => [createElementVNode("main", _hoisted_7, [!unref(isMobile) ? (openBlock(), createBlock(TopBar_default, {
+						last: withCtx(() => [createElementVNode("div", _hoisted_8, [!unref(isMobile) ? (openBlock(), createBlock(TopBar_default, {
 							key: 0,
 							onLayout: _cache[2] || (_cache[2] = ($event) => isLayoutOpen.value = true),
 							onSearch: _cache[3] || (_cache[3] = ($event) => isSearchOpen.value = true)
 						})) : createCommentVNode("", true), createVNode(_component_RouterView, { class: "flex-1 min-h-0" })])]),
 						_: 1
-					}, 8, ["show-first"])], 2),
+					}, 8, ["show-first"])])], 2),
 					!unref(isMobile) ? (openBlock(), createBlock(LayoutModal_default, {
 						key: 0,
 						shown: isLayoutOpen.value,

package/dist/bundled/app.css

@@ -17,33 +17,79 @@
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
+/* floating-vue put the same zero on its own wrapper, and the triggers that
+   wanted text to sit normally say `leading-normal` because of it. */
+.poveste-dropdown-trigger {
+  line-height: 0;
+}
+.poveste-dropdown {
+  background: #fff;
+  color: #000;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  box-shadow: 0 6px 30px rgb(0 0 0 / .1);
+  /* A row that paints to the panel's edge has to stop at the rounded corner,
+     which the `overflow-y: auto` on floating-vue's inner element did. */
+  overflow: hidden;
+  z-index: 100;
+
+  /*
+   * What Tailwind's `dark:` compiles to, spelled out because `@apply` in a
+   * single-file component needs a `@reference` and no component here has one.
+   * Not `.ptw-dark &`: the chrome CSS is wrapped in `@scope` and `.ptw-dark`
+   * sits on `<html>`, above the scope root, so a descendant rule keyed on it
+   * never matches and the panel falls back to the light colours (#101). This
+   * puts the condition on the subject instead, and adds no specificity — so it
+   * has to come after the light values to win.
+   */
+&:where(.ptw-dark, .ptw-dark *) {
+    background: var(--color-gray-700);
+    border-color: var(--color-gray-850);
+    color: var(--color-gray-100);
+}
+&:focus-visible {
+    outline: none;
+}
+&[data-state='open'] {
+    transform-origin: var(--reka-popover-content-transform-origin);
+    animation: poveste-dropdown-open .15s cubic-bezier(0, 1, .5, 1);
+}
+}
+@keyframes poveste-dropdown-open {
+from {
+    opacity: 0;
+    transform: scale(.75);
+}
+}
+}
+@scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
 .bind-icon-color[data-v-30c06406] {
   color: var(--v5947d534);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.landscape > div > .dragger[data-v-e5174855] {
+.landscape > div > .dragger[data-v-c01bd041] {
   width: .625rem;
 }
-.portrait > div > .dragger[data-v-e5174855] {
+.portrait > div > .dragger[data-v-c01bd041] {
   height: .625rem;
 }
-.landscape > div > .dragger.dragger-offset-before[data-v-e5174855] {
+.landscape > div > .dragger.dragger-offset-before[data-v-c01bd041] {
   right: 0;
 }
-.portrait > div > .dragger.dragger-offset-before[data-v-e5174855] {
+.portrait > div > .dragger.dragger-offset-before[data-v-c01bd041] {
   bottom: 0;
 }
-.landscape > div > .dragger.dragger-offset-center[data-v-e5174855] {
+.landscape > div > .dragger.dragger-offset-center[data-v-c01bd041] {
   right: -.3125rem;
 }
-.portrait > div > .dragger.dragger-offset-center[data-v-e5174855] {
+.portrait > div > .dragger.dragger-offset-center[data-v-c01bd041] {
   bottom: -.3125rem;
 }
-.landscape > div > .dragger.dragger-offset-after[data-v-e5174855] {
+.landscape > div > .dragger.dragger-offset-after[data-v-c01bd041] {
   right: -.625rem;
 }
-.portrait > div > .dragger.dragger-offset-after[data-v-e5174855] {
+.portrait > div > .dragger.dragger-offset-after[data-v-c01bd041] {
   bottom: -.625rem;
 }
 }
@@ -87,7 +133,24 @@
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.__poveste-code-placeholder[data-v-b595e0d4] {
+.poveste-base-select-popper {
+  /* The trigger's own width, which is what floating-vue's `auto-size` gave. */
+  min-width: var(--reka-popper-anchor-width);
+  z-index: 100;
+&:focus-visible {
+    outline: none;
+}
+}
+.poveste-base-select-options {
+  /* The room Reka measured between the trigger and the viewport edge, which is
+     what `auto-boundary-max-size` gave: a story with more presets than fit below
+     its picker otherwise drew them off the screen, reachable by nothing. */
+  max-height: var(--reka-popover-content-available-height);
+  overflow-y: auto;
+}
+}
+@scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
+.__poveste-code-placeholder[data-v-e112aa54] {
   color: inherit;
   font-size: inherit;
 }
@@ -102,16 +165,16 @@
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-preview-bg[data-v-13932615] {
-  background-color: var(--v538c65b8);
+.bind-preview-bg[data-v-a99edb14] {
+  background-color: var(--v4ce71e65);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-icon-color[data-v-ae85762b] {
-  color: var(--v2b77a04a);
+.bind-icon-color[data-v-bfa057e9] {
+  color: var(--v1061c03c);
 }
-.bind-preview-bg[data-v-ae85762b] {
-  background-color: var(--v8dc7fba0);
+.bind-preview-bg[data-v-bfa057e9] {
+  background-color: var(--v2d8b4c49);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
@@ -128,8 +191,8 @@
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-icon-color[data-v-6b31fb1b] {
-  color: var(--v0fc28fe3);
+.bind-icon-color[data-v-6ba33e62] {
+  color: var(--v3bcafcf8);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {

package/dist/bundled/components/app/AppActions.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,10 @@
 import { povesteConfig } from "../../util/config.js";
 import { isDark, toggleDark } from "../../util/dark.js";
 import { isMobile } from "../../util/responsive.js";
-import { makeTooltip } from "../../util/tooltip.js";
+import ShortcutTooltip_default from "./ShortcutTooltip.js";
 import TopBarChip_default from "./TopBarChip.js";
 import TopBarChipItem_default from "./TopBarChipItem.js";
-import { computed, createBlock, createCommentVNode, createVNode, defineComponent, openBlock, resolveDirective, unref, withCtx, withDirectives } from "@poveste/vendors/vue";
+import { computed, createBlock, createCommentVNode, createVNode, defineComponent, openBlock, unref, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 //#region src/app/components/app/AppActions.vue?vue&type=script&setup=true&lang.ts
 var AppActions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -18,43 +18,60 @@ var AppActions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			return isDark.value ? "carbon:moon" : "carbon:sun";
 		});
 		return (_ctx, _cache) => {
-			const _directive_tooltip = resolveDirective("tooltip");
 			return openBlock(), createBlock(TopBarChip_default, null, {
 				default: withCtx(() => [
-					!unref(isMobile) ? withDirectives((openBlock(), createBlock(TopBarChipItem_default, {
+					!unref(isMobile) ? (openBlock(), createBlock(ShortcutTooltip_default, {
 						key: 0,
-						"aria-label": "Open layout customization",
-						"data-testid": "layout-btn",
-						onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("layout"))
+						description: "Layout",
+						shortcut: ({ isMac }) => isMac ? "meta+shift+l" : "ctrl+shift+l"
 					}, {
-						default: withCtx(() => [createVNode(unref(Icon), {
-							icon: "carbon:panel-expansion",
-							class: "w-4 h-4"
+						default: withCtx(() => [createVNode(TopBarChipItem_default, {
+							"aria-label": "Open layout customization",
+							"data-testid": "layout-btn",
+							onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("layout"))
+						}, {
+							default: withCtx(() => [createVNode(unref(Icon), {
+								icon: "carbon:panel-expansion",
+								class: "w-4 h-4"
+							})]),
+							_: 1
 						})]),
 						_: 1
-					})), [[_directive_tooltip, unref(makeTooltip)("Layout", ({ isMac }) => isMac ? "meta+shift+l" : "ctrl+shift+l")]]) : createCommentVNode("", true),
-					withDirectives((openBlock(), createBlock(TopBarChipItem_default, {
-						"aria-label": "Search stories",
-						"data-testid": "search-btn",
-						onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("search"))
+					}, 8, ["shortcut"])) : createCommentVNode("", true),
+					createVNode(ShortcutTooltip_default, {
+						description: "Search",
+						shortcut: ({ isMac }) => isMac ? "meta+k" : "ctrl+k"
 					}, {
-						default: withCtx(() => [createVNode(unref(Icon), {
-							icon: "carbon:search",
-							class: "w-4 h-4"
+						default: withCtx(() => [createVNode(TopBarChipItem_default, {
+							"aria-label": "Search stories",
+							"data-testid": "search-btn",
+							onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("search"))
+						}, {
+							default: withCtx(() => [createVNode(unref(Icon), {
+								icon: "carbon:search",
+								class: "w-4 h-4"
+							})]),
+							_: 1
 						})]),
 						_: 1
-					})), [[_directive_tooltip, unref(makeTooltip)("Search", ({ isMac }) => isMac ? "meta+k" : "ctrl+k")]]),
-					!unref(povesteConfig).theme.hideColorSchemeSwitch ? withDirectives((openBlock(), createBlock(TopBarChipItem_default, {
+					}, 8, ["shortcut"]),
+					!unref(povesteConfig).theme.hideColorSchemeSwitch ? (openBlock(), createBlock(ShortcutTooltip_default, {
 						key: 1,
-						"aria-label": "Toggle dark mode",
-						onClick: _cache[2] || (_cache[2] = ($event) => unref(toggleDark)())
+						description: "Toggle dark mode",
+						shortcut: ({ isMac }) => isMac ? "meta+shift+d" : "ctrl+shift+d"
 					}, {
-						default: withCtx(() => [createVNode(unref(Icon), {
-							icon: themeIcon.value,
-							class: "w-4 h-4"
-						}, null, 8, ["icon"])]),
+						default: withCtx(() => [createVNode(TopBarChipItem_default, {
+							"aria-label": "Toggle dark mode",
+							onClick: _cache[2] || (_cache[2] = ($event) => unref(toggleDark)())
+						}, {
+							default: withCtx(() => [createVNode(unref(Icon), {
+								icon: themeIcon.value,
+								class: "w-4 h-4"
+							}, null, 8, ["icon"])]),
+							_: 1
+						})]),
 						_: 1
-					})), [[_directive_tooltip, unref(makeTooltip)("Toggle dark mode", ({ isMac }) => isMac ? "meta+shift+d" : "ctrl+shift+d")]]) : createCommentVNode("", true)
+					}, 8, ["shortcut"])) : createCommentVNode("", true)
 				]),
 				_: 1
 			});

package/dist/bundled/components/app/ShortcutTooltip.js

@@ -0,0 +1,5 @@
+import ShortcutTooltip_vue_vue_type_script_setup_true_lang_default from "./ShortcutTooltip.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/app/ShortcutTooltip.vue
+var ShortcutTooltip_default = ShortcutTooltip_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ShortcutTooltip_default as default };

package/dist/bundled/components/app/ShortcutTooltip.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,27 @@
+import { isMac } from "../../util/env.js";
+import { formatKey } from "../../util/keyboard.js";
+import { computed, createBlock, createElementVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref, withCtx } from "@poveste/vendors/vue";
+import { HstTooltip } from "@poveste/controls";
+//#region src/app/components/app/ShortcutTooltip.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex items-center gap-1 mt-2 text-sm" };
+var _hoisted_2 = { class: "border border-gray-600 px-1 rounded-sm text-gray-400" };
+var ShortcutTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ShortcutTooltip",
+	props: {
+		description: {},
+		shortcut: { type: Function }
+	},
+	setup(__props) {
+		const props = __props;
+		const keys = computed(() => props.shortcut({ isMac }).split("+").map((key) => formatKey(key.trim())).join(" "));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(HstTooltip), null, {
+				content: withCtx(() => [createElementVNode("div", null, toDisplayString(__props.description), 1), createElementVNode("div", _hoisted_1, [createElementVNode("span", _hoisted_2, toDisplayString(keys.value), 1)])]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { ShortcutTooltip_vue_vue_type_script_setup_true_lang_default as default };

package/dist/bundled/components/base/BaseDropdown.js

@@ -0,0 +1,6 @@
+import BaseDropdown_vue_vue_type_script_setup_true_lang_default from "./BaseDropdown.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                             */
+//#region src/app/components/base/BaseDropdown.vue
+var BaseDropdown_default = BaseDropdown_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { BaseDropdown_default as default };

package/dist/bundled/components/base/BaseDropdown.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,68 @@
+import { createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeProps, onMounted, openBlock, ref, renderSlot, shallowRef, unref, withCtx } from "@poveste/vendors/vue";
+import { HstTooltip, PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, portalTarget } from "@poveste/controls";
+//#region src/app/components/base/BaseDropdown.vue?vue&type=script&setup=true&lang.ts
+var BaseDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "BaseDropdown",
+	props: {
+		side: { default: "bottom" },
+		align: { default: "center" },
+		alignOffset: { default: 0 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		tooltip: { default: void 0 }
+	},
+	setup(__props) {
+		const props = __props;
+		const open = ref(false);
+		function setOpen(value) {
+			open.value = value && !props.disabled;
+		}
+		const target = shallowRef();
+		onMounted(() => {
+			target.value = portalTarget();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(PopoverRoot), {
+				open: open.value,
+				"onUpdate:open": setOpen
+			}, {
+				default: withCtx(() => [createVNode(unref(PopoverAnchor), { "as-child": "" }, {
+					default: withCtx(() => [createElementVNode("div", mergeProps(_ctx.$attrs, { class: "poveste-dropdown-trigger" }), [createVNode(unref(HstTooltip), { content: open.value ? null : __props.tooltip }, {
+						default: withCtx(() => [createVNode(unref(PopoverTrigger), { "as-child": "" }, {
+							default: withCtx(() => [renderSlot(_ctx.$slots, "default", { open: open.value })]),
+							_: 3
+						})]),
+						_: 3
+					}, 8, ["content"])], 16)]),
+					_: 3
+				}), target.value ? (openBlock(), createBlock(unref(PopoverPortal), {
+					key: 0,
+					to: target.value
+				}, {
+					default: withCtx(() => [createVNode(unref(PopoverContent), {
+						class: "poveste-dropdown",
+						side: __props.side,
+						align: __props.align,
+						"side-offset": 8,
+						"align-offset": __props.alignOffset,
+						"collision-padding": 4
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "popper", { close: () => setOpen(false) })]),
+						_: 3
+					}, 8, [
+						"side",
+						"align",
+						"align-offset"
+					])]),
+					_: 3
+				}, 8, ["to"])) : createCommentVNode("", true)]),
+				_: 3
+			}, 8, ["open"]);
+		};
+	}
+});
+//#endregion
+export { BaseDropdown_vue_vue_type_script_setup_true_lang_default as default };

package/dist/bundled/components/base/BaseOverflowMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,10 @@
+import BaseDropdown_default from "./BaseDropdown.js";
 import { useResizeObserver } from "@poveste/vendors/vue-use";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, onBeforeUnmount, openBlock, reactive, ref, renderSlot, resolveComponent, unref, withCtx } from "@poveste/vendors/vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, onBeforeUnmount, openBlock, reactive, ref, renderSlot, unref, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 //#region src/app/components/base/BaseOverflowMenu.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
-	role: "button",
+	"aria-label": "More",
 	class: "cursor-pointer hover:bg-primary-50 dark:hover:bg-primary-900 w-8 h-full flex items-center justify-center absolute top-0 right-0"
 };
 var _hoisted_2 = { class: "flex flex-col items-stretch" };
@@ -72,7 +73,6 @@ var BaseOverflowMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			return Array.isArray(children) ? children.slice(props.start, props.end) : [];
 		}
 		return (_ctx, _cache) => {
-			const _component_VDropdown = resolveComponent("VDropdown");
 			return openBlock(), createElementBlock("div", {
 				ref_key: "el",
 				ref: el,
@@ -80,12 +80,12 @@ var BaseOverflowMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			}, [createVNode(ChildrenRender, null, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}), visibleChildrenCount.value < children.value.size ? (openBlock(), createBlock(_component_VDropdown, { key: 0 }, {
+			}), visibleChildrenCount.value < children.value.size ? (openBlock(), createBlock(BaseDropdown_default, { key: 0 }, {
 				popper: withCtx(() => [createElementVNode("div", _hoisted_2, [createVNode(ChildrenSlice, { start: visibleChildrenCount.value }, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "overflow")]),
 					_: 3
 				}, 8, ["start"])])]),
-				default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(unref(Icon), {
+				default: withCtx(() => [createElementVNode("button", _hoisted_1, [createVNode(unref(Icon), {
 					icon: "carbon:caret-down",
 					class: "w-4 h-4 opacity-50 group-hover:opacity-100"
 				})])]),

package/dist/bundled/components/base/BaseSelect.js

@@ -1,4 +1,5 @@
 import BaseSelect_vue_vue_type_script_setup_true_lang_default from "./BaseSelect.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                           */
 //#region src/app/components/base/BaseSelect.vue
 var BaseSelect_default = BaseSelect_vue_vue_type_script_setup_true_lang_default;
 //#endregion