@poveste/app 0.15.0 → 0.16.0

package/dist/bundled/components/panel/StorySourceCode.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,11 @@
 import { isDark } from "../../util/dark.js";
 import BaseEmpty_default from "../base/BaseEmpty.js";
 import { getHighlighter } from "../../util/highlighter.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, markRaw, nextTick, normalizeClass, onMounted, openBlock, ref, resolveDirective, shallowRef, toDisplayString, unref, watch, watchEffect, withCtx, withDirectives } from "@poveste/vendors/vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, markRaw, nextTick, normalizeClass, onMounted, openBlock, ref, shallowRef, toDisplayString, unref, watch, watchEffect, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { HstCopyIcon, HstTooltip } from "@poveste/controls";
 import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
 import { unindent } from "@poveste/shared";
-import { HstCopyIcon } from "@poveste/controls";
 //#region src/app/components/panel/StorySourceCode.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-story-source-code bg-gray-50 dark:bg-gray-750 h-full overflow-hidden flex flex-col" };
 var _hoisted_2 = {
@@ -93,23 +93,28 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			if (scroller.value) scroller.value.scrollTop = lastScroll;
 		});
 		return (_ctx, _cache) => {
-			const _directive_tooltip = resolveDirective("tooltip");
 			return openBlock(), createElementBlock("div", _hoisted_1, [!error.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
 				_cache[2] || (_cache[2] = createElementVNode("div", { class: "text-gray-900 dark:text-gray-100" }, " Source ", -1)),
 				_cache[3] || (_cache[3] = createElementVNode("div", { class: "flex-1" }, null, -1)),
-				createElementVNode("div", _hoisted_3, [withDirectives((openBlock(), createElementBlock("button", {
-					class: normalizeClass(["flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-l transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden", [displayedSource.value !== "dynamic" ? "max-w-6 opacity-70" : "max-w-[82px] text-primary-800 dark:text-primary-400", dynamicSourceCode.value ? "cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50" : displayedSource.value !== "dynamic" && "opacity-50"]]),
-					onClick: _cache[0] || (_cache[0] = ($event) => dynamicSourceCode.value && (displayedSource.value = "dynamic"))
-				}, [createVNode(unref(Icon), {
-					icon: "carbon:flash",
-					class: "w-4 h-4 flex-none"
-				}), createElementVNode("span", { class: normalizeClass(["transition-opacity duration-300", { "opacity-0": displayedSource.value !== "dynamic" }]) }, " Dynamic ", 2)], 2)), [[_directive_tooltip, !dynamicSourceCode.value ? "Dynamic source code is not available" : displayedSource.value !== "dynamic" ? "Switch to dynamic source" : null]]), withDirectives((openBlock(), createElementBlock("button", {
-					class: normalizeClass(["flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-r transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden", [displayedSource.value !== "static" ? "max-w-6 opacity-70" : "max-w-[63px] text-primary-800 dark:text-primary-400", staticSourceCode.value ? "cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50" : displayedSource.value !== "static" && "opacity-50"]]),
-					onClick: _cache[1] || (_cache[1] = ($event) => staticSourceCode.value && (displayedSource.value = "static"))
-				}, [createVNode(unref(Icon), {
-					icon: "carbon:document",
-					class: "w-4 h-4 flex-none"
-				}), createElementVNode("span", { class: normalizeClass(["transition-opacity duration-300", { "opacity-0": displayedSource.value !== "static" }]) }, " Static ", 2)], 2)), [[_directive_tooltip, !staticSourceCode.value ? "Static source code is not available" : displayedSource.value !== "static" ? "Switch to static source" : null]])]),
+				createElementVNode("div", _hoisted_3, [createVNode(unref(HstTooltip), { content: !dynamicSourceCode.value ? "Dynamic source code is not available" : displayedSource.value !== "dynamic" ? "Switch to dynamic source" : null }, {
+					default: withCtx(() => [createElementVNode("button", {
+						class: normalizeClass(["flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-l transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden", [displayedSource.value !== "dynamic" ? "max-w-6 opacity-70" : "max-w-[82px] text-primary-800 dark:text-primary-400", dynamicSourceCode.value ? "cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50" : displayedSource.value !== "dynamic" && "opacity-50"]]),
+						onClick: _cache[0] || (_cache[0] = ($event) => dynamicSourceCode.value && (displayedSource.value = "dynamic"))
+					}, [createVNode(unref(Icon), {
+						icon: "carbon:flash",
+						class: "w-4 h-4 flex-none"
+					}), createElementVNode("span", { class: normalizeClass(["transition-opacity duration-300", { "opacity-0": displayedSource.value !== "dynamic" }]) }, " Dynamic ", 2)], 2)]),
+					_: 1
+				}, 8, ["content"]), createVNode(unref(HstTooltip), { content: !staticSourceCode.value ? "Static source code is not available" : displayedSource.value !== "static" ? "Switch to static source" : null }, {
+					default: withCtx(() => [createElementVNode("button", {
+						class: normalizeClass(["flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-r transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden", [displayedSource.value !== "static" ? "max-w-6 opacity-70" : "max-w-[63px] text-primary-800 dark:text-primary-400", staticSourceCode.value ? "cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50" : displayedSource.value !== "static" && "opacity-50"]]),
+						onClick: _cache[1] || (_cache[1] = ($event) => staticSourceCode.value && (displayedSource.value = "static"))
+					}, [createVNode(unref(Icon), {
+						icon: "carbon:document",
+						class: "w-4 h-4 flex-none"
+					}), createElementVNode("span", { class: normalizeClass(["transition-opacity duration-300", { "opacity-0": displayedSource.value !== "static" }]) }, " Static ", 2)], 2)]),
+					_: 1
+				}, 8, ["content"])]),
 				createVNode(unref(HstCopyIcon), {
 					content: displayedSourceCode.value,
 					class: "flex-none"

package/dist/bundled/components/story/StoryResponsivePreview.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default from "./StoryResponsivePreview.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                       */
 //#region src/app/components/story/StoryResponsivePreview.vue
-var StoryResponsivePreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-13932615"]]);
+var StoryResponsivePreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a99edb14"]]);
 //#endregion
 export { StoryResponsivePreview_default as default };

package/dist/bundled/components/story/StoryResponsivePreview.vue_vue_type_script_setup_true_lang.js

@@ -2,9 +2,9 @@ import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
 import CheckerboardPattern_default from "../misc/CheckerboardPattern.js";
 import HatchedPattern_default from "../misc/HatchedPattern.js";
 import { useEventListener } from "@poveste/vendors/vue-use";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createVNode, defineComponent, normalizeClass, onUnmounted, openBlock, ref, renderSlot, unref, useCssVars, withDirectives } from "@poveste/vendors/vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createVNode, defineComponent, normalizeClass, onUnmounted, openBlock, ref, renderSlot, unref, useCssVars, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
-import { VTooltip } from "@poveste/vendors/floating-vue";
+import { HstTooltip } from "@poveste/controls";
 //#region src/app/components/story/StoryResponsivePreview.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-story-responsive-preview w-full h-full flex-1 rounded-lg relative overflow-hidden" };
 var _hoisted_2 = {
@@ -12,7 +12,7 @@ var _hoisted_2 = {
 	class: "absolute inset-0 w-full h-full bg-gray-100 dark:bg-gray-750 rounded-r-lg border-l-2 border-gray-500/10 dark:border-gray-700/30 overflow-hidden"
 };
 var _hoisted_3 = ["data-testid"];
-var _hoisted_4 = { class: "w-full h-full relative" };
+var _hoisted_4 = { class: "w-full flex-1 relative grid" };
 var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StoryResponsivePreview",
 	props: {
@@ -23,7 +23,7 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 		}
 	},
 	setup(__props) {
-		useCssVars((_ctx) => ({ "v538c65b8": unref(settings).backgroundColor }));
+		useCssVars((_ctx) => ({ "v4ce71e65": unref(settings).backgroundColor }));
 		const props = __props;
 		const settings = usePreviewSettingsStore().currentSettings;
 		const resizing = ref(false);
@@ -135,53 +135,56 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 				} : "h-full",
 				isResponsiveEnabled.value && finalHeight.value ? "overflow-hidden" : "overflow-auto"
 			]]) }, [createElementVNode("div", {
-				class: normalizeClass(["rounded-lg min-h-full relative", __props.responsive ? "bind-preview-bg" : ""]),
+				class: normalizeClass(["rounded-lg min-h-full relative flex flex-col", __props.responsive ? "bind-preview-bg" : ""]),
 				"data-testid": __props.responsive ? "responsive-preview-bg" : void 0
 			}, [unref(settings).checkerboard && __props.responsive ? (openBlock(), createBlock(CheckerboardPattern_default, {
 				key: 0,
 				class: "absolute inset-0 w-full h-full text-gray-500/20"
-			})) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(["h-full relative", __props.responsive ? "p-8" : ""]) }, [createElementVNode("div", _hoisted_4, [_cache[0] || (_cache[0] = createElementVNode("div", { class: "absolute inset-0" }, null, -1)), renderSlot(_ctx.$slots, "default", {
+			})) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(["flex-1 relative flex flex-col", __props.responsive ? "p-8" : ""]) }, [createElementVNode("div", _hoisted_4, [_cache[0] || (_cache[0] = createElementVNode("div", { class: "absolute inset-0" }, null, -1)), renderSlot(_ctx.$slots, "default", {
 				isResponsiveEnabled: isResponsiveEnabled.value,
 				finalWidth: finalWidth.value,
 				finalHeight: finalHeight.value,
 				resizing: resizing.value
-			}, void 0, true)]), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[1] || (_cache[1] = createStaticVNode("<div class=\"absolute top-5 left-8 h-2 w-px bg-gray-400/25\" data-v-13932615></div><div class=\"absolute top-5 right-8 h-2 w-px bg-gray-400/25\" data-v-13932615></div><div class=\"absolute bottom-5 left-8 h-2 w-px bg-gray-400/25\" data-v-13932615></div><div class=\"absolute bottom-5 right-8 h-2 w-px bg-gray-400/25\" data-v-13932615></div><div class=\"absolute left-5 top-8 w-2 h-px bg-gray-400/25\" data-v-13932615></div><div class=\"absolute left-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-13932615></div><div class=\"absolute right-5 top-8 w-2 h-px bg-gray-400/25\" data-v-13932615></div><div class=\"absolute right-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-13932615></div>", 8))], 64)) : createCommentVNode("", true)], 2)], 10, _hoisted_3), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-				withDirectives((openBlock(), createElementBlock("div", {
-					ref_key: "horizontalDragger",
-					ref: horizontalDragger,
-					class: "absolute w-4 top-0 bottom-4 right-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ew-resize group hover:text-primary-500"
-				}, [createVNode(unref(Icon), {
-					icon: "mdi:drag-vertical-variant",
-					class: "w-4 h-4 opacity-20 group-hover:opacity-90"
-				})])), [[
-					unref(VTooltip),
-					sizeTooltip.value,
-					void 0,
-					{ right: true }
-				]]),
-				withDirectives((openBlock(), createElementBlock("div", {
-					ref_key: "verticalDragger",
-					ref: verticalDragger,
-					class: "absolute h-4 left-0 right-4 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ns-resize group hover:text-primary-500"
-				}, [createVNode(unref(Icon), {
-					icon: "mdi:drag-horizontal-variant",
-					class: "w-4 h-4 opacity-20 group-hover:opacity-90"
-				})])), [[
-					unref(VTooltip),
-					sizeTooltip.value,
-					void 0,
-					{ bottom: true }
-				]]),
-				withDirectives(createElementVNode("div", {
-					ref_key: "cornerDragger",
-					ref: cornerDragger,
-					class: "absolute w-4 h-4 right-0 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-nwse-resize group hover:text-primary-500"
-				}, null, 512), [[
-					unref(VTooltip),
-					sizeTooltip.value,
-					void 0,
-					{ bottom: true }
-				]])
+			}, void 0, true)]), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[1] || (_cache[1] = createStaticVNode("<div class=\"absolute top-5 left-8 h-2 w-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute top-5 right-8 h-2 w-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute bottom-5 left-8 h-2 w-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute bottom-5 right-8 h-2 w-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute left-5 top-8 w-2 h-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute left-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute right-5 top-8 w-2 h-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute right-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-a99edb14></div>", 8))], 64)) : createCommentVNode("", true)], 2)], 10, _hoisted_3), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+				createVNode(unref(HstTooltip), {
+					content: sizeTooltip.value,
+					side: "right"
+				}, {
+					default: withCtx(() => [createElementVNode("div", {
+						ref_key: "horizontalDragger",
+						ref: horizontalDragger,
+						class: "absolute w-4 top-0 bottom-4 right-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ew-resize group hover:text-primary-500"
+					}, [createVNode(unref(Icon), {
+						icon: "mdi:drag-vertical-variant",
+						class: "w-4 h-4 opacity-20 group-hover:opacity-90"
+					})], 512)]),
+					_: 1
+				}, 8, ["content"]),
+				createVNode(unref(HstTooltip), {
+					content: sizeTooltip.value,
+					side: "bottom"
+				}, {
+					default: withCtx(() => [createElementVNode("div", {
+						ref_key: "verticalDragger",
+						ref: verticalDragger,
+						class: "absolute h-4 left-0 right-4 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ns-resize group hover:text-primary-500"
+					}, [createVNode(unref(Icon), {
+						icon: "mdi:drag-horizontal-variant",
+						class: "w-4 h-4 opacity-20 group-hover:opacity-90"
+					})], 512)]),
+					_: 1
+				}, 8, ["content"]),
+				createVNode(unref(HstTooltip), {
+					content: sizeTooltip.value,
+					side: "bottom"
+				}, {
+					default: withCtx(() => [createElementVNode("div", {
+						ref_key: "cornerDragger",
+						ref: cornerDragger,
+						class: "absolute w-4 h-4 right-0 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-nwse-resize group hover:text-primary-500"
+					}, null, 512)]),
+					_: 1
+				}, 8, ["content"])
 			], 64)) : createCommentVNode("", true)], 2)], 512)]);
 		};
 	}

package/dist/bundled/components/story/StoryVariantGridItem.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default from "./StoryVariantGridItem.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                     */
 //#region src/app/components/story/StoryVariantGridItem.vue
-var StoryVariantGridItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ae85762b"]]);
+var StoryVariantGridItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-bfa057e9"]]);
 //#endregion
 export { StoryVariantGridItem_default as default };

package/dist/bundled/components/story/StoryVariantGridItem.vue_vue_type_script_setup_true_lang.js

@@ -11,10 +11,10 @@ import { getSourceCode } from "../../util/docs.js";
 import CheckerboardPattern_default from "../misc/CheckerboardPattern.js";
 import StoryVariantSinglePreviewRemote_default from "./StoryVariantSinglePreviewRemote.js";
 import { useResizeObserver } from "@poveste/vendors/vue-use";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, resolveComponent, resolveDirective, toDisplayString, toRefs, unref, useCssVars, watch, withCtx, withDirectives, withModifiers } from "@poveste/vendors/vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, resolveComponent, toDisplayString, toRefs, unref, useCssVars, watch, withCtx, withModifiers } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { HstCopyIcon, HstTooltip } from "@poveste/controls";
 import { useRouter } from "@poveste/vendors/vue-router";
-import { HstCopyIcon } from "@poveste/controls";
 //#region src/app/components/story/StoryVariantGridItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex-none flex items-center" };
 var _hoisted_2 = { class: "truncate flex-1" };
@@ -34,8 +34,8 @@ var StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 	emits: { resize: (_width, _height) => true },
 	setup(__props, { emit: __emit }) {
 		useCssVars((_ctx) => ({
-			"v2b77a04a": unref(variant).iconColor,
-			"v8dc7fba0": unref(settings).backgroundColor
+			"v1061c03c": unref(variant).iconColor,
+			"v2d8b4c49": unref(settings).backgroundColor
 		}));
 		const props = __props;
 		const emit = __emit;
@@ -76,27 +76,29 @@ var StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 		});
 		return (_ctx, _cache) => {
 			const _component_RouterLink = resolveComponent("RouterLink");
-			const _directive_tooltip = resolveDirective("tooltip");
 			return openBlock(), createElementBlock("div", {
 				ref_key: "el",
 				ref: el,
 				class: "poveste-story-variant-grid-item cursor-default flex flex-col gap-y-1 group"
-			}, [createElementVNode("div", _hoisted_1, [withDirectives((openBlock(), createBlock(_component_RouterLink, {
-				to: unref(targetRoute),
-				class: normalizeClass(["rounded w-max px-2 py-0.5 min-w-16 cursor-pointer flex items-center gap-1 flex-shrink", {
-					"hover:bg-gray-200 text-gray-500 dark:hover:bg-gray-800": !unref(isActive),
-					"bg-primary-200 hover:bg-primary-300 text-primary-800 dark:bg-primary-700 dark:hover:bg-primary-800 dark:text-primary-200": unref(isActive)
-				}])
-			}, {
-				default: withCtx(() => [createVNode(unref(Icon), {
-					icon: unref(variant).icon ?? "carbon:cube",
-					class: normalizeClass(["w-4 h-4 opacity-50", {
-						"text-gray-500": !unref(isActive) && !unref(variant).iconColor,
-						"bind-icon-color": !unref(isActive) && unref(variant).iconColor
+			}, [createElementVNode("div", _hoisted_1, [createVNode(unref(HstTooltip), { content: unref(variant).title }, {
+				default: withCtx(() => [createVNode(_component_RouterLink, {
+					to: unref(targetRoute),
+					class: normalizeClass(["rounded w-max px-2 py-0.5 min-w-16 cursor-pointer flex items-center gap-1 flex-shrink", {
+						"hover:bg-gray-200 text-gray-500 dark:hover:bg-gray-800": !unref(isActive),
+						"bg-primary-200 hover:bg-primary-300 text-primary-800 dark:bg-primary-700 dark:hover:bg-primary-800 dark:text-primary-200": unref(isActive)
 					}])
-				}, null, 8, ["icon", "class"]), createElementVNode("span", _hoisted_2, toDisplayString(unref(variant).title), 1)]),
+				}, {
+					default: withCtx(() => [createVNode(unref(Icon), {
+						icon: unref(variant).icon ?? "carbon:cube",
+						class: normalizeClass(["w-4 h-4 opacity-50", {
+							"text-gray-500": !unref(isActive) && !unref(variant).iconColor,
+							"bind-icon-color": !unref(isActive) && unref(variant).iconColor
+						}])
+					}, null, 8, ["icon", "class"]), createElementVNode("span", _hoisted_2, toDisplayString(unref(variant).title), 1)]),
+					_: 1
+				}, 8, ["to", "class"])]),
 				_: 1
-			}, 8, ["to", "class"])), [[_directive_tooltip, unref(variant).title]]), createElementVNode("div", _hoisted_3, [createVNode(unref(HstCopyIcon), { content: () => unref(getSourceCode)(__props.story, unref(variant)) }, null, 8, ["content"]), createVNode(ToolbarNewTab_default, {
+			}, 8, ["content"]), createElementVNode("div", _hoisted_3, [createVNode(unref(HstCopyIcon), { content: () => unref(getSourceCode)(__props.story, unref(variant)) }, null, 8, ["content"]), createVNode(ToolbarNewTab_default, {
 				variant: unref(variant),
 				story: __props.story
 			}, null, 8, ["variant", "story"])])]), createElementVNode("div", {

package/dist/bundled/components/story/StoryVariantSingle.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StoryVariantSingle_vue_vue_type_script_setup_true_lang_default from "./StoryVariantSingle.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                   */
 //#region src/app/components/story/StoryVariantSingle.vue
-var StoryVariantSingle_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryVariantSingle_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-6b31fb1b"]]);
+var StoryVariantSingle_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryVariantSingle_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-6ba33e62"]]);
 //#endregion
 export { StoryVariantSingle_default as default };

package/dist/bundled/components/story/StoryVariantSingle.vue_vue_type_script_setup_true_lang.js

@@ -16,7 +16,7 @@ var StoryVariantSingle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 	__name: "StoryVariantSingle",
 	emits: { openVariantMenu: () => true },
 	setup(__props) {
-		useCssVars((_ctx) => ({ "v0fc28fe3": variant.value?.iconColor }));
+		useCssVars((_ctx) => ({ "v3bcafcf8": variant.value?.iconColor }));
 		const storyStore = useStoryStore();
 		const hasSingleVariant = computed(() => storyStore.currentStory?.variants.length === 1);
 		const variant = computed(() => storyStore.currentVariant ?? null);
@@ -24,6 +24,7 @@ var StoryVariantSingle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(BaseSplitPane_default, {
 				"save-id": "story-single-main-split",
+				label: "Resize the variant list",
 				min: 5,
 				max: 40,
 				"default-split": 17,

package/dist/bundled/components/story/StoryView.vue_vue_type_script_setup_true_lang.js

@@ -72,6 +72,7 @@ var StoryView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			}, null, 8, ["story"])], 512)) : (openBlock(), createBlock(BaseSplitPane_default, {
 				key: 1,
 				"save-id": `story-main-${placement.value}`,
+				label: "Resize the preview",
 				orientation: splitOrientation.value,
 				min: 30,
 				max: 95,

package/dist/bundled/components/toolbar/DevOnlyToolbarOpenInEditor.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,8 @@
 import TopBarChipItem_default from "../app/TopBarChipItem.js";
 import { openInEditor } from "../../util/open-in-editor.js";
-import { createBlock, createVNode, defineComponent, openBlock, resolveDirective, unref, withCtx, withDirectives } from "@poveste/vendors/vue";
+import { createBlock, createVNode, defineComponent, openBlock, unref, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { HstTooltip } from "@poveste/controls";
 //#region src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue?vue&type=script&setup=true&lang.ts
 var DevOnlyToolbarOpenInEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "DevOnlyToolbarOpenInEditor",
@@ -11,19 +12,21 @@ var DevOnlyToolbarOpenInEditor_vue_vue_type_script_setup_true_lang_default = /*@
 	},
 	setup(__props) {
 		return (_ctx, _cache) => {
-			const _directive_tooltip = resolveDirective("tooltip");
-			return withDirectives((openBlock(), createBlock(TopBarChipItem_default, {
-				"aria-label": "Open story in editor",
-				target: "_blank",
-				class: "poveste-toolbar-open-in-editor",
-				onClick: _cache[0] || (_cache[0] = ($event) => unref(openInEditor)(__props.file))
-			}, {
-				default: withCtx(() => [createVNode(unref(Icon), {
-					icon: "carbon:script-reference",
-					class: "w-4 h-4"
+			return openBlock(), createBlock(unref(HstTooltip), { content: __props.tooltip }, {
+				default: withCtx(() => [createVNode(TopBarChipItem_default, {
+					"aria-label": "Open story in editor",
+					target: "_blank",
+					class: "poveste-toolbar-open-in-editor",
+					onClick: _cache[0] || (_cache[0] = ($event) => unref(openInEditor)(__props.file))
+				}, {
+					default: withCtx(() => [createVNode(unref(Icon), {
+						icon: "carbon:script-reference",
+						class: "w-4 h-4"
+					})]),
+					_: 1
 				})]),
 				_: 1
-			})), [[_directive_tooltip, __props.tooltip]]);
+			}, 8, ["content"]);
 		};
 	}
 });

package/dist/bundled/components/toolbar/ToolbarBackground.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,14 @@
 import { povesteConfig } from "../../util/config.js";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
 import BaseCheckbox_default from "../base/BaseCheckbox.js";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, resolveComponent, resolveDirective, toDisplayString, unref, withCtx, withDirectives } from "@poveste/vendors/vue";
+import BaseDropdown_default from "../base/BaseDropdown.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString, unref, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 //#region src/app/components/toolbar/ToolbarBackground.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "flex items-center gap-1 px-2.5 py-1.5 hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer text-gray-900 dark:text-gray-100 transition-colors group" };
+var _hoisted_1 = {
+	class: "flex items-center gap-1 px-2.5 py-1.5 hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer text-gray-900 dark:text-gray-100 transition-colors group",
+	"aria-label": "Preview appearance"
+};
 var _hoisted_2 = {
 	class: "flex flex-col items-stretch",
 	"data-testid": "background-popper"
@@ -44,23 +48,16 @@ var ToolbarBackground_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		const showColorScheme = !povesteConfig.theme.hideColorSchemeSwitch;
 		const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets?.length;
 		return (_ctx, _cache) => {
-			const _component_VDropdown = resolveComponent("VDropdown");
-			const _directive_tooltip = resolveDirective("tooltip");
-			return unref(showDropdown) ? (openBlock(), createBlock(_component_VDropdown, {
+			return unref(showDropdown) ? (openBlock(), createBlock(BaseDropdown_default, {
 				key: 0,
-				placement: "bottom-end",
-				skidding: 6,
+				side: "bottom",
+				align: "end",
+				"align-offset": 6,
+				tooltip: "Preview appearance",
 				class: "poveste-toolbar-background flex-none",
 				"data-testid": "toolbar-background"
 			}, {
-				default: withCtx(({ shown }) => [withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(Icon), {
-					icon: "carbon:color-palette",
-					class: "w-4 h-4"
-				}), createVNode(unref(Icon), {
-					icon: "carbon:chevron-down",
-					class: "w-3 h-3 opacity-40 group-hover:opacity-70"
-				})])), [[_directive_tooltip, shown ? "" : "Preview appearance"]])]),
-				popper: withCtx(({ hide }) => [createElementVNode("div", _hoisted_2, [
+				popper: withCtx(({ close }) => [createElementVNode("div", _hoisted_2, [
 					showColorScheme ? (openBlock(), createElementBlock("div", _hoisted_3, [(openBlock(), createElementBlock(Fragment, null, renderList(colorSchemeOptions, (option) => {
 						return createElementVNode("button", {
 							key: option.value,
@@ -85,7 +82,7 @@ var ToolbarBackground_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 							class: normalizeClass(["px-4 py-3 cursor-pointer text-left flex items-baseline gap-4", [unref(settings).backgroundColor === option.color ? "bg-primary-500 hover:bg-primary-600 text-white dark:text-black" : "bg-transparent hover:bg-primary-100 dark:hover:bg-primary-700"]]),
 							onClick: ($event) => {
 								unref(previewSettings).setBackgroundColor(option.color);
-								hide();
+								close();
 							}
 						}, [createElementVNode("span", _hoisted_6, toDisplayString(option.label), 1), option.color !== "$checkerboard" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_7, toDisplayString(option.color), 1), createElementVNode("div", {
 							class: "w-4 h-4 rounded-full border border-black/20 dark:border-white/20 flex items-center justify-center text-xs",
@@ -96,6 +93,13 @@ var ToolbarBackground_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 						}, [option.contrastColor ? (openBlock(), createElementBlock("span", _hoisted_8, "a")) : createCommentVNode("", true)], 4)], 64)) : createCommentVNode("", true)], 10, _hoisted_5);
 					}), 128))
 				])]),
+				default: withCtx(() => [createElementVNode("button", _hoisted_1, [createVNode(unref(Icon), {
+					icon: "carbon:color-palette",
+					class: "w-4 h-4"
+				}), createVNode(unref(Icon), {
+					icon: "carbon:chevron-down",
+					class: "w-3 h-3 opacity-40 group-hover:opacity-70"
+				})])]),
 				_: 1
 			})) : createCommentVNode("", true);
 		};

package/dist/bundled/components/toolbar/ToolbarNewTab.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,8 @@
 import TopBarChipItem_default from "../app/TopBarChipItem.js";
 import { getSandboxUrl } from "../../util/sandbox.js";
-import { computed, createBlock, createVNode, defineComponent, openBlock, resolveDirective, unref, withCtx, withDirectives } from "@poveste/vendors/vue";
+import { computed, createBlock, createVNode, defineComponent, openBlock, unref, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { HstTooltip } from "@poveste/controls";
 //#region src/app/components/toolbar/ToolbarNewTab.vue?vue&type=script&setup=true&lang.ts
 var ToolbarNewTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ToolbarNewTab",
@@ -15,19 +16,21 @@ var ToolbarNewTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			return getSandboxUrl(props.story, props.variant);
 		});
 		return (_ctx, _cache) => {
-			const _directive_tooltip = resolveDirective("tooltip");
-			return withDirectives((openBlock(), createBlock(TopBarChipItem_default, {
-				href: sandboxUrl.value,
-				target: "_blank",
-				"aria-label": "Open variant in new tab",
-				class: "poveste-toolbar-new-tab"
-			}, {
-				default: withCtx(() => [createVNode(unref(Icon), {
-					icon: "carbon:launch",
-					class: "w-4 h-4"
-				})]),
+			return openBlock(), createBlock(unref(HstTooltip), { content: "Open variant in new tab" }, {
+				default: withCtx(() => [createVNode(TopBarChipItem_default, {
+					href: sandboxUrl.value,
+					target: "_blank",
+					"aria-label": "Open variant in new tab",
+					class: "poveste-toolbar-new-tab"
+				}, {
+					default: withCtx(() => [createVNode(unref(Icon), {
+						icon: "carbon:launch",
+						class: "w-4 h-4"
+					})]),
+					_: 1
+				}, 8, ["href"])]),
 				_: 1
-			}, 8, ["href"])), [[_directive_tooltip, "Open variant in new tab"]]);
+			});
 		};
 	}
 });

package/dist/bundled/components/toolbar/ToolbarResponsiveSize.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,10 @@
 import { povesteConfig } from "../../util/config.js";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
 import BaseCheckbox_default from "../base/BaseCheckbox.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, normalizeClass, openBlock, renderList, resolveComponent, resolveDirective, toDisplayString, unref, vModelText, withCtx, withDirectives } from "@poveste/vendors/vue";
+import BaseDropdown_default from "../base/BaseDropdown.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, normalizeClass, openBlock, renderList, toDisplayString, unref, vModelText, withCtx, withDirectives } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { HstTooltip } from "@poveste/controls";
 //#region src/app/components/toolbar/ToolbarResponsiveSize.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex flex-col items-stretch" };
 var _hoisted_2 = { class: "flex items-center gap-2 px-4 py-3" };
@@ -29,15 +31,15 @@ var ToolbarResponsiveSize_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 		const responsiveWidth = autoWhenEmpty("responsiveWidth");
 		const responsiveHeight = autoWhenEmpty("responsiveHeight");
 		return (_ctx, _cache) => {
-			const _component_VDropdown = resolveComponent("VDropdown");
-			const _directive_tooltip = resolveDirective("tooltip");
-			return openBlock(), createBlock(_component_VDropdown, {
-				placement: "bottom-end",
-				skidding: 6,
+			return openBlock(), createBlock(BaseDropdown_default, {
+				side: "bottom",
+				align: "end",
+				"align-offset": 6,
 				disabled: !unref(povesteConfig).responsivePresets?.length,
+				tooltip: "Responsive sizes",
 				class: "poveste-toolbar-responsive-size flex-none"
 			}, {
-				popper: withCtx(({ hide }) => [createElementVNode("div", _hoisted_1, [
+				popper: withCtx(({ close }) => [createElementVNode("div", _hoisted_1, [
 					createVNode(BaseCheckbox_default, {
 						modelValue: unref(settings).rotate,
 						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(settings).rotate = $event)
@@ -46,21 +48,27 @@ var ToolbarResponsiveSize_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 						_: 1
 					}, 8, ["modelValue"]),
 					createElementVNode("div", _hoisted_2, [
-						withDirectives(createElementVNode("input", {
-							"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(responsiveWidth) ? responsiveWidth.value = $event : null),
-							type: "number",
-							class: "bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0",
-							step: "16",
-							placeholder: "Auto"
-						}, null, 512), [[vModelText, unref(responsiveWidth)], [_directive_tooltip, "Responsive width (px)"]]),
+						createVNode(unref(HstTooltip), { content: "Responsive width (px)" }, {
+							default: withCtx(() => [withDirectives(createElementVNode("input", {
+								"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(responsiveWidth) ? responsiveWidth.value = $event : null),
+								type: "number",
+								class: "bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0",
+								step: "16",
+								placeholder: "Auto"
+							}, null, 512), [[vModelText, unref(responsiveWidth)]])]),
+							_: 1
+						}),
 						_cache[4] || (_cache[4] = createElementVNode("span", { class: "opacity-50" }, "×", -1)),
-						withDirectives(createElementVNode("input", {
-							"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(responsiveHeight) ? responsiveHeight.value = $event : null),
-							type: "number",
-							class: "bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0",
-							step: "16",
-							placeholder: "Auto"
-						}, null, 512), [[vModelText, unref(responsiveHeight)], [_directive_tooltip, "Responsive height (px)"]])
+						createVNode(unref(HstTooltip), { content: "Responsive height (px)" }, {
+							default: withCtx(() => [withDirectives(createElementVNode("input", {
+								"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(responsiveHeight) ? responsiveHeight.value = $event : null),
+								type: "number",
+								class: "bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0",
+								step: "16",
+								placeholder: "Auto"
+							}, null, 512), [[vModelText, unref(responsiveHeight)]])]),
+							_: 1
+						})
 					]),
 					(openBlock(true), createElementBlock(Fragment, null, renderList(unref(povesteConfig).responsivePresets, (preset, index) => {
 						return openBlock(), createElementBlock("button", {
@@ -69,7 +77,7 @@ var ToolbarResponsiveSize_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 							onClick: ($event) => {
 								unref(settings).responsiveWidth = preset.width;
 								unref(settings).responsiveHeight = preset.height ?? null;
-								hide();
+								close();
 							}
 						}, [createTextVNode(toDisplayString(preset.label) + " ", 1), createElementVNode("span", _hoisted_4, [
 							preset.width ? (openBlock(), createElementBlock("span", _hoisted_5, [createTextVNode(toDisplayString(preset.width), 1), !preset.height ? (openBlock(), createElementBlock("span", _hoisted_6, "px")) : createCommentVNode("", true)])) : createCommentVNode("", true),
@@ -78,13 +86,16 @@ var ToolbarResponsiveSize_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 						])], 10, _hoisted_3);
 					}), 128))
 				])]),
-				default: withCtx(() => [withDirectives((openBlock(), createElementBlock("div", { class: normalizeClass(["flex items-center gap-1 px-2.5 py-1.5 text-gray-900 dark:text-gray-100 transition-colors group", { "hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer": unref(povesteConfig).responsivePresets?.length }]) }, [createVNode(unref(Icon), {
+				default: withCtx(() => [createElementVNode("button", {
+					class: normalizeClass(["flex items-center gap-1 px-2.5 py-1.5 text-gray-900 dark:text-gray-100 transition-colors group", { "hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer": unref(povesteConfig).responsivePresets?.length }]),
+					"aria-label": "Responsive sizes"
+				}, [createVNode(unref(Icon), {
 					icon: "carbon:devices",
 					class: "w-4 h-4"
 				}), createVNode(unref(Icon), {
 					icon: "carbon:chevron-down",
 					class: "w-3 h-3 opacity-40 group-hover:opacity-70"
-				})], 2)), [[_directive_tooltip, "Responsive sizes"]])]),
+				})], 2)]),
 				_: 1
 			}, 8, ["disabled"]);
 		};