@poveste/app 0.10.0 → 0.12.0

package/dist/app/style/main.pcss

@@ -25,7 +25,6 @@
    its utility classes live in a package v4 never scans. */
 @source "../../../../poveste/src/node/markdown.ts";
 
-/* TODO(#36): port the v3 typography theme() customization to v4 CSS. */
 @plugin '@tailwindcss/typography';
 
 /* Chrome dark mode. Deliberately a distinct class from the story-side
@@ -181,7 +180,7 @@
 /*
  * Typography (@tailwindcss/typography) customization — ported from the v3
  * `theme.extend.typography` JS config to CSS. Unlayered so it overrides the
- * plugin's layered defaults. Needs a visual pass on the docs/markdown pages.
+ * plugin's layered defaults.
  */
 .prose {
   --tw-prose-invert-quote-borders: var(--color-gray-800);
@@ -207,7 +206,7 @@
       }
     }
 
-    &:is(h1, h2, h3, h4, th) {
+    &:is(h1, h2, h3, h4) {
       margin-bottom: 0.75rem;
 
       &:not(:first-child) {

package/dist/bundled/App.vue_vue_type_script_setup_true_lang.js

@@ -18,7 +18,7 @@ import SearchModal_default from "./components/search/SearchModal.js";
 import GenericMountStory_default from "./components/story/GenericMountStory.js";
 import { mapFile } from "./util/mapping.js";
 import { useTitle } from "@poveste/vendors/vue-use";
-import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeStyle, onMounted, openBlock, ref, resolveComponent, unref, watch, withCtx } from "@poveste/vendors/vue";
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeStyle, onMounted, openBlock, ref, resolveComponent, toDisplayString, unref, watch, withCtx } from "@poveste/vendors/vue";
 import { files, onUpdate, tree } from "virtual:$poveste-stories";
 //#region src/app/App.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-app-root h-full" };
@@ -31,12 +31,15 @@ var _hoisted_3 = {
 	class: "h-full flex flex-col divide-y divide-gray-100 dark:divide-gray-800"
 };
 var _hoisted_4 = { class: "flex items-center gap-2 pr-4" };
-var _hoisted_5 = { class: "flex flex-col h-full bg-gray-100 dark:bg-gray-750 __poveste-pane-shadow-from-right" };
-var _hoisted_6 = { class: "flex flex-col h-full" };
+var _hoisted_5 = { class: "grow flex flex-col min-h-0" };
+var _hoisted_6 = { class: "flex flex-col h-full bg-gray-100 dark:bg-gray-750 __poveste-pane-shadow-from-right" };
 var _hoisted_7 = {
-	key: 2,
-	class: "h-full flex flex-col"
+	"aria-label": "Stories",
+	class: "flex-1 flex flex-col min-h-0"
 };
+var _hoisted_8 = { class: "flex flex-col h-full" };
+var _hoisted_9 = { class: "sr-only" };
+var _hoisted_10 = { class: "h-full flex flex-col" };
 var App_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "PovesteApp",
 	setup(__props) {
@@ -118,7 +121,7 @@ var App_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompon
 							tree: tree$1.value,
 							stories: stories.value
 						}, null, 8, ["tree", "stories"]),
-						createVNode(_component_RouterView, { class: "grow" })
+						createElementVNode("main", _hoisted_5, [createVNode(_component_RouterView, { class: "grow" })])
 					])) : unref(layoutStore).settings.storyListVisible ? (openBlock(), createBlock(BaseSplitPane_default, {
 						key: 1,
 						"save-id": "main-horiz",
@@ -127,20 +130,20 @@ var App_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompon
 						"default-split": 15,
 						class: "h-full"
 					}, {
-						first: withCtx(() => [createElementVNode("div", _hoisted_5, [createVNode(AppHeader_default, { class: "flex-none" }), 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("div", _hoisted_6, [createVNode(TopBar_default, {
+						}, null, 8, ["tree", "stories"])])])]),
+						last: withCtx(() => [createElementVNode("main", _hoisted_8, [createVNode(TopBar_default, {
 							onLayout: _cache[2] || (_cache[2] = ($event) => isLayoutOpen.value = true),
 							onSearch: _cache[3] || (_cache[3] = ($event) => isSearchOpen.value = true)
 						}), createVNode(_component_RouterView, { class: "flex-1 min-h-0" })])]),
 						_: 1
-					})) : (openBlock(), createElementBlock("div", _hoisted_7, [createVNode(TopBar_default, {
+					})) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createElementVNode("header", _hoisted_9, [createElementVNode("h1", null, toDisplayString(unref(povesteConfig).theme?.title ?? "Poveste"), 1)]), createElementVNode("main", _hoisted_10, [createVNode(TopBar_default, {
 						onLayout: _cache[4] || (_cache[4] = ($event) => isLayoutOpen.value = true),
 						onSearch: _cache[5] || (_cache[5] = ($event) => isSearchOpen.value = true)
-					}), createVNode(_component_RouterView, { class: "flex-1 min-h-0" })])),
+					}), createVNode(_component_RouterView, { class: "flex-1 min-h-0" })])], 64)),
 					!unref(isMobile) ? (openBlock(), createBlock(LayoutModal_default, {
 						key: 3,
 						shown: isLayoutOpen.value,

package/dist/bundled/app.css

@@ -1,9 +1,9 @@
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-tree-margin[data-v-a603aebf] {
-  margin-left: var(--v18724f1f);
+.bind-tree-margin[data-v-184d6cf3] {
+  margin-left: var(--v516f2a64);
 }
-.bind-icon-color[data-v-a603aebf] {
-  color: var(--v45b473db);
+.bind-icon-color[data-v-184d6cf3] {
+  color: var(--v2fa7200a);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
@@ -93,7 +93,7 @@
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.__poveste-code-placeholder[data-v-61bf773e] {
+.__poveste-code-placeholder[data-v-3d88bdb3] {
   color: inherit;
   font-size: inherit;
 }
@@ -108,8 +108,8 @@
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-preview-bg[data-v-fa6bb28c] {
-  background-color: var(--v6d3c2da2);
+.bind-preview-bg[data-v-380b627d] {
+  background-color: var(--v0cb511a0);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
@@ -149,8 +149,8 @@ img.colorize-black[data-v-f632abed] {
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-icon-color[data-v-f8cfc1bd] {
-  color: var(--v1c6fbe98);
+.bind-icon-color[data-v-f4bf5500] {
+  color: var(--v1311c0c1);
 }
 }
 /*$vite$:1*/

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

@@ -34,6 +34,7 @@ var AppActions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 						_: 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"))
 					}, {
@@ -45,6 +46,7 @@ var AppActions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					})), [[_directive_tooltip, unref(makeTooltip)("Search", ({ isMac }) => isMac ? "meta+k" : "ctrl+k")]]),
 					!unref(povesteConfig).theme.hideColorSchemeSwitch ? withDirectives((openBlock(), createBlock(TopBarChipItem_default, {
 						key: 1,
+						"aria-label": "Toggle dark mode",
 						onClick: _cache[2] || (_cache[2] = ($event) => unref(toggleDark)())
 					}, {
 						default: withCtx(() => [createVNode(unref(Icon), {

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

@@ -1,19 +1,20 @@
 import { povesteConfig } from "../../util/config.js";
 import AppLogo_default from "./AppLogo.js";
-import { createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, unref } from "@poveste/vendors/vue";
+import { createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, toDisplayString, unref } from "@poveste/vendors/vue";
 //#region src/app/components/app/AppHeader.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-app-header px-4 h-14 flex items-center gap-2" };
-var _hoisted_2 = { class: "py-3 sm:py-4 flex-1 h-full flex items-center pr-2" };
-var _hoisted_3 = ["href"];
+var _hoisted_2 = { class: "sr-only" };
+var _hoisted_3 = { class: "py-3 sm:py-4 flex-1 h-full flex items-center pr-2" };
+var _hoisted_4 = ["href"];
 var AppHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "AppHeader",
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("a", {
+			return openBlock(), createElementBlock("header", _hoisted_1, [createElementVNode("h1", _hoisted_2, toDisplayString(unref(povesteConfig).theme?.title ?? "Poveste"), 1), createElementVNode("div", _hoisted_3, [createElementVNode("a", {
 				href: unref(povesteConfig).theme?.logoHref,
 				target: "_blank",
 				class: "w-full h-full flex items-center"
-			}, [createVNode(AppLogo_default, { class: "max-w-full max-h-full" })], 8, _hoisted_3)])]);
+			}, [createVNode(AppLogo_default, { class: "max-w-full max-h-full" })], 8, _hoisted_4)])]);
 		};
 	}
 });

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

@@ -2,9 +2,12 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import { createElementBlock, openBlock, renderSlot } from "@poveste/vendors/vue";
 //#region src/app/components/app/TopBarChipItem.vue
 var _sfc_main = {};
-var _hoisted_1 = { class: "poveste-top-bar-chip-item flex items-center gap-1 px-2.5 py-1.5 hover:bg-white/50 active:bg-white/70 dark:hover:bg-white/10 dark:active:bg-white/15 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer text-gray-900 dark:text-gray-100 transition-colors" };
+var _hoisted_1 = ["role"];
 function _sfc_render(_ctx, _cache) {
-	return openBlock(), createElementBlock("a", _hoisted_1, [renderSlot(_ctx.$slots, "default")]);
+	return openBlock(), createElementBlock("a", {
+		role: _ctx.$attrs.href ? void 0 : "button",
+		class: "poveste-top-bar-chip-item flex items-center gap-1 px-2.5 py-1.5 hover:bg-white/50 active:bg-white/70 dark:hover:bg-white/10 dark:active:bg-white/15 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer text-gray-900 dark:text-gray-100 transition-colors"
+	}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
 }
 var TopBarChipItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
 //#endregion

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

@@ -1,13 +1,14 @@
 import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, ref, renderSlot, watch, withKeys, withModifiers } from "@poveste/vendors/vue";
 //#region src/app/components/base/BaseCheckbox.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "text-white w-[16px] h-[16px] relative" };
-var _hoisted_2 = {
+var _hoisted_1 = ["aria-checked"];
+var _hoisted_2 = { class: "text-white w-[16px] h-[16px] relative" };
+var _hoisted_3 = {
 	width: "16",
 	height: "16",
 	viewBox: "0 0 24 24",
 	class: "relative z-10"
 };
-var _hoisted_3 = ["stroke-dasharray", "stroke-dashoffset"];
+var _hoisted_4 = ["stroke-dasharray", "stroke-dashoffset"];
 var BaseCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "BaseCheckbox",
 	props: { modelValue: {
@@ -18,6 +19,7 @@ var BaseCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const animationEnabled = ref(false);
 		function toggle() {
 			emit("update:modelValue", !props.modelValue);
 			animationEnabled.value = true;
@@ -26,7 +28,6 @@ var BaseCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		const dasharray = ref(0);
 		const progress = computed(() => props.modelValue ? 1 : 0);
 		const dashoffset = computed(() => (1 - progress.value) * dasharray.value);
-		const animationEnabled = ref(false);
 		watch(path, () => {
 			dasharray.value = path.value.getTotalLength?.() ?? 21.21;
 		});
@@ -34,10 +35,11 @@ var BaseCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			return openBlock(), createElementBlock("div", {
 				role: "checkbox",
 				tabindex: "0",
+				"aria-checked": __props.modelValue,
 				class: "poveste-base-checkbox flex items-center gap-2 select-none px-4 py-3 cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-700",
 				onClick: _cache[0] || (_cache[0] = ($event) => toggle()),
 				onKeydown: [_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => toggle(), ["prevent"]), ["enter"])), _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => toggle(), ["prevent"]), ["space"]))]
-			}, [createElementVNode("div", _hoisted_1, [createElementVNode("div", { class: normalizeClass(["border group-active:bg-gray-500/20 rounded-sm box-border absolute inset-0 transition-border duration-150 ease-out", [__props.modelValue ? "border-primary-500 border-8" : "border-black/25 dark:border-white/25 delay-150"]]) }, null, 2), (openBlock(), createElementBlock("svg", _hoisted_2, [createElementVNode("path", {
+			}, [createElementVNode("div", _hoisted_2, [createElementVNode("div", { class: normalizeClass(["border group-active:bg-gray-500/20 rounded-sm box-border absolute inset-0 transition-border duration-150 ease-out", [__props.modelValue ? "border-primary-500 border-8" : "border-black/25 dark:border-white/25 delay-150"]]) }, null, 2), (openBlock(), createElementBlock("svg", _hoisted_3, [createElementVNode("path", {
 				ref_key: "path",
 				ref: path,
 				d: "m 4 12 l 5 5 l 10 -10",
@@ -45,7 +47,7 @@ var BaseCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				class: normalizeClass(["stroke-white stroke-2 duration-200 ease-in-out", [animationEnabled.value ? "transition-all" : "transition-none", { "delay-150": __props.modelValue }]]),
 				"stroke-dasharray": dasharray.value,
 				"stroke-dashoffset": dashoffset.value
-			}, null, 10, _hoisted_3)]))]), renderSlot(_ctx.$slots, "default")], 32);
+			}, null, 10, _hoisted_4)]))]), renderSlot(_ctx.$slots, "default")], 40, _hoisted_1);
 		};
 	}
 });

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

@@ -4,6 +4,7 @@ import { createBlock, createElementVNode, mergeProps, normalizeClass, openBlock,
 //#region src/app/components/base/BaseListItemLink.vue
 var _hoisted_1 = [
 	"href",
+	"aria-current",
 	"onClick",
 	"onKeyup"
 ];
@@ -12,6 +13,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createBlock(_component_RouterLink, mergeProps({ class: "poveste-base-list-item-link" }, _ctx.$attrs, { custom: "" }), {
 		default: withCtx(({ isActive: linkIsActive, href, navigate }) => [createElementVNode("a", {
 			href,
+			"aria-current": (_ctx.isActive != null ? _ctx.isActive : linkIsActive) ? "page" : void 0,
 			class: normalizeClass(["flex items-center gap-2 text-gray-900 dark:text-gray-100", [_ctx.$attrs.class, (_ctx.isActive != null ? _ctx.isActive : linkIsActive) ? "active bg-primary-500 hover:bg-primary-600 text-white dark:text-black" : "hover:bg-primary-100 dark:hover:bg-primary-900"]]),
 			onClick: ($event) => _ctx.handleNavigate($event, navigate),
 			onKeyup: [withKeys(($event) => _ctx.handleNavigate($event, navigate), ["enter"]), withKeys(($event) => _ctx.handleNavigate($event, navigate), ["space"])]

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

@@ -26,8 +26,8 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		const saveId = computed(() => `${props.story.id}:${props.variant.id}`);
 		const omitKeys = ["_hPropDefs"];
 		const defaultState = toPresetState(props.variant.state, omitKeys);
-		const selectedOption = useStorage(`_poveste-presets/${saveId.value}/selected`, DEFAULT_ID);
-		const presetStates = useStorage(`_poveste-presets/${saveId.value}/states`, /* @__PURE__ */ new Map());
+		const selectedOption = useStorage(`_poveste-presets/${saveId.value}/selected`, DEFAULT_ID, void 0, { writeDefaults: false });
+		const presetStates = useStorage(`_poveste-presets/${saveId.value}/states`, /* @__PURE__ */ new Map(), void 0, { writeDefaults: false });
 		const presetsOptions = computed(() => {
 			const options = { [DEFAULT_ID]: "Initial state" };
 			presetStates.value.forEach((value, key) => {
@@ -125,11 +125,13 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 					_: 1
 				}, 8, ["modelValue", "options"])], 512),
 				withDirectives(createVNode(unref(Icon), {
+					"data-testid": "preset-save",
 					icon: savedNotif.value ? "carbon:checkmark" : "carbon:save",
 					class: normalizeClass(["cursor-pointer w-4 h-4 hover:text-primary-500 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100", [canEdit.value ? "opacity-50 hover:opacity-100" : "opacity-25 pointer-events-none"]]),
 					onClick: _cache[7] || (_cache[7] = ($event) => savePreset())
 				}, null, 8, ["icon", "class"]), [[_directive_tooltip, savedNotif.value ? "Saved!" : canEdit.value ? "Save to preset" : null]]),
 				withDirectives(createVNode(unref(Icon), {
+					"data-testid": "preset-create",
 					icon: "carbon:add-alt",
 					class: "cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100",
 					onClick: _cache[8] || (_cache[8] = ($event) => createPreset())

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

@@ -12,12 +12,12 @@ var StoryEvents_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		const hasEvents = computed(() => eventsStore.events.length);
 		onMounted(resetUnseen);
 		watch(() => eventsStore.unseen, resetUnseen);
+		const eventsElement = ref();
 		async function resetUnseen() {
 			if (eventsStore.unseen > 0) eventsStore.unseen = 0;
 			await nextTick();
 			eventsElement.value.scrollTo({ top: eventsElement.value.scrollHeight });
 		}
-		const eventsElement = ref();
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				ref_key: "eventsElement",

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

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StorySourceCode_vue_vue_type_script_setup_true_lang_default from "./StorySourceCode.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                */
 //#region src/app/components/panel/StorySourceCode.vue
-var StorySourceCode_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StorySourceCode_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-61bf773e"]]);
+var StorySourceCode_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StorySourceCode_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3d88bdb3"]]);
 //#endregion
 export { StorySourceCode_default as default };

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

@@ -38,6 +38,7 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const highlighter = shallowRef();
 		const dynamicSourceCode = ref("");
 		const error = ref(null);
+		const displayedSource = ref("dynamic");
 		watch(() => [props.variant, generateSourceCodeFn.value], async () => {
 			if (!generateSourceCodeFn.value) return;
 			error.value = null;
@@ -63,7 +64,6 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			const sourceLoader = props.story.file?.source;
 			if (sourceLoader) staticSourceCode.value = (await sourceLoader()).default;
 		}, { immediate: true });
-		const displayedSource = ref("dynamic");
 		const displayedSourceCode = computed(() => {
 			if (displayedSource.value === "dynamic") return dynamicSourceCode.value;
 			return staticSourceCode.value;

package/dist/bundled/components/search/SearchItem.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import SearchItem_vue_vue_type_script_setup_true_lang_default from "./SearchItem.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                           */
 //#region src/app/components/search/SearchItem.vue
-var SearchItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(SearchItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f8cfc1bd"]]);
+var SearchItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(SearchItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f4bf5500"]]);
 //#endregion
 export { SearchItem_default as default };

package/dist/bundled/components/search/SearchItem.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import BaseListItem_default from "../base/BaseListItem.js";
 import SearchItemContent_default from "./SearchItemContent.js";
 import { createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, openBlock, ref, toRefs, unref, useCssVars, withCtx } from "@poveste/vendors/vue";
 //#region src/app/components/search/SearchItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-selected"];
+var _hoisted_1 = ["aria-selected", "data-selected"];
 var SearchItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "SearchItem",
 	props: {
@@ -19,7 +19,7 @@ var SearchItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 	},
 	emits: { close: () => true },
 	setup(__props, { emit: __emit }) {
-		useCssVars((_ctx) => ({ "v1c6fbe98": __props.result.iconColor }));
+		useCssVars((_ctx) => ({ "v1311c0c1": __props.result.iconColor }));
 		const props = __props;
 		const emit = __emit;
 		const el = ref();
@@ -33,6 +33,8 @@ var SearchItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			return openBlock(), createElementBlock("div", {
 				ref_key: "el",
 				ref: el,
+				role: "option",
+				"aria-selected": unref(selected),
 				class: "poveste-search-item",
 				"data-testid": "search-item",
 				"data-selected": unref(selected) ? "" : void 0

package/dist/bundled/components/search/SearchPane.vue_vue_type_script_setup_true_lang.js

@@ -7,16 +7,29 @@ import BaseEmpty_default from "../base/BaseEmpty.js";
 import { onUpdate, searchData } from "./search-title-data.js";
 import SearchItem_default from "./SearchItem.js";
 import { refDebounced, useFocus } from "@poveste/vendors/vue-use";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, shallowRef, unref, vModelText, watch, withCtx, withDirectives, withKeys, withModifiers } from "@poveste/vendors/vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, shallowRef, toDisplayString, unref, vModelText, watch, withCtx, withDirectives, withKeys, withModifiers } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 import { useRouter } from "@poveste/vendors/vue-router";
 import Fuse from "fuse.js";
 import { registeredCommands } from "virtual:$poveste-commands";
 //#region src/app/components/search/SearchPane.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
+var _hoisted_1 = [
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant"
+];
+var _hoisted_2 = {
 	key: 1,
+	id: "poveste-search-results",
+	role: "listbox",
+	"aria-label": "Search results",
 	class: "max-h-[400px] overflow-y-auto rounded-b-lg"
 };
+var _hoisted_3 = {
+	class: "sr-only",
+	"aria-live": "polite",
+	role: "status"
+};
 var MAX_RESULTS = 50;
 var SearchPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "SearchPane",
@@ -182,6 +195,13 @@ var SearchPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			return list.slice(0, MAX_RESULTS);
 		});
 		const { selectedIndex, selectNext, selectPrevious } = useSelection(results);
+		const resultsAnnouncement = computed(() => {
+			if (!rateLimitedSearch.value) return "";
+			if (!results.value.length) return "No results";
+			const count = `${results.value.length} result${results.value.length === 1 ? "" : "s"}`;
+			const current = results.value[selectedIndex.value];
+			return current ? `${count}. ${current.title}, ${selectedIndex.value + 1} of ${results.value.length}` : count;
+		});
 		const router = useRouter();
 		onKeyboardShortcut(["enter"], () => {
 			if (!props.shown) return;
@@ -192,37 +212,53 @@ var SearchPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			close();
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", {
-				class: "poveste-search-pane flex items-center gap-4 pl-6 border border-transparent focus-visible:border-primary-500",
-				onClick: _cache[4] || (_cache[4] = ($event) => focused.value = true)
-			}, [createVNode(unref(Icon), {
-				icon: "carbon:search",
-				class: "flex-none w-4 h-4"
-			}), withDirectives(createElementVNode("input", {
-				ref_key: "input",
-				ref: input,
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchInputText.value = $event),
-				placeholder: "Search for stories, variants...",
-				class: "bg-transparent w-full flex-1 pl-0 pr-6 py-4 outline-none",
-				onKeydown: [
-					_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => unref(selectNext)(), ["prevent"]), ["down"])),
-					_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => unref(selectPrevious)(), ["prevent"]), ["up"])),
-					_cache[3] || (_cache[3] = withKeys(($event) => close(), ["escape"]))
-				]
-			}, null, 544), [[vModelText, searchInputText.value]])]), unref(rateLimitedSearch) && !results.value.length ? (openBlock(), createBlock(BaseEmpty_default, {
-				key: 0,
-				class: "no-animation"
-			}, {
-				default: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode(" No results ", -1)])]),
-				_: 1
-			})) : results.value.length ? (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(results.value, (result, index) => {
-				return openBlock(), createBlock(SearchItem_default, {
-					key: result.id,
-					result,
-					selected: index === unref(selectedIndex),
-					onClose: _cache[5] || (_cache[5] = ($event) => close())
-				}, null, 8, ["result", "selected"]);
-			}), 128))])) : createCommentVNode("", true)], 64);
+			return openBlock(), createElementBlock(Fragment, null, [
+				createElementVNode("div", {
+					class: "poveste-search-pane flex items-center gap-4 pl-6 border border-transparent focus-visible:border-primary-500",
+					onClick: _cache[4] || (_cache[4] = ($event) => focused.value = true)
+				}, [createVNode(unref(Icon), {
+					icon: "carbon:search",
+					class: "flex-none w-4 h-4"
+				}), withDirectives(createElementVNode("input", {
+					ref_key: "input",
+					ref: input,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchInputText.value = $event),
+					type: "search",
+					role: "combobox",
+					"aria-label": "Search for stories and variants",
+					"aria-autocomplete": "list",
+					"aria-expanded": results.value.length > 0,
+					"aria-controls": results.value.length ? "poveste-search-results" : void 0,
+					"aria-activedescendant": results.value.length ? `poveste-search-option-${unref(selectedIndex)}` : void 0,
+					placeholder: "Search for stories, variants...",
+					class: "bg-transparent w-full flex-1 pl-0 pr-6 py-4 outline-none",
+					onKeydown: [
+						_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => unref(selectNext)(), ["prevent"]), ["down"])),
+						_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => unref(selectPrevious)(), ["prevent"]), ["up"])),
+						_cache[3] || (_cache[3] = withKeys(($event) => close(), ["escape"]))
+					]
+				}, null, 40, _hoisted_1), [[vModelText, searchInputText.value]])]),
+				unref(rateLimitedSearch) && !results.value.length ? (openBlock(), createBlock(BaseEmpty_default, {
+					key: 0,
+					class: "no-animation"
+				}, {
+					default: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode(" No results ", -1)])]),
+					_: 1
+				})) : results.value.length ? (openBlock(), createElementBlock("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(results.value, (result, index) => {
+					return openBlock(), createBlock(SearchItem_default, {
+						id: `poveste-search-option-${index}`,
+						key: result.id,
+						result,
+						selected: index === unref(selectedIndex),
+						onClose: _cache[5] || (_cache[5] = ($event) => close())
+					}, null, 8, [
+						"id",
+						"result",
+						"selected"
+					]);
+				}), 128))])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_3, toDisplayString(resultsAnnouncement.value), 1)
+			], 64);
 		};
 	}
 });

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-fa6bb28c"]]);
+var StoryResponsivePreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-380b627d"]]);
 //#endregion
 export { StoryResponsivePreview_default as default };

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

@@ -23,7 +23,7 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 		}
 	},
 	setup(__props) {
-		useCssVars((_ctx) => ({ "v6d3c2da2": unref(settings).backgroundColor }));
+		useCssVars((_ctx) => ({ "v0cb511a0": unref(settings).backgroundColor }));
 		const props = __props;
 		const settings = usePreviewSettingsStore().currentSettings;
 		const resizing = ref(false);
@@ -40,6 +40,7 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 				onUnmountedCleanupFns.splice(onUnmountedCleanupFns.indexOf(removeListener), 1);
 			};
 		}
+		const previewWrapper = ref();
 		function useDragger(el, value, min, max, axis) {
 			function onMouseDown(event) {
 				event.preventDefault();
@@ -97,7 +98,6 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 		const horizontalDragger = ref();
 		const verticalDragger = ref();
 		const cornerDragger = ref();
-		const previewWrapper = ref();
 		useDragger(horizontalDragger, responsiveWidth, 32, 2e4, "x");
 		useDragger(verticalDragger, responsiveHeight, 32, 2e4, "y");
 		useDragger(cornerDragger, responsiveWidth, 32, 2e4, "x");
@@ -130,7 +130,7 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 				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-fa6bb28c></div><div class=\"absolute top-5 right-8 h-2 w-px bg-gray-400/25\" data-v-fa6bb28c></div><div class=\"absolute bottom-5 left-8 h-2 w-px bg-gray-400/25\" data-v-fa6bb28c></div><div class=\"absolute bottom-5 right-8 h-2 w-px bg-gray-400/25\" data-v-fa6bb28c></div><div class=\"absolute left-5 top-8 w-2 h-px bg-gray-400/25\" data-v-fa6bb28c></div><div class=\"absolute left-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-fa6bb28c></div><div class=\"absolute right-5 top-8 w-2 h-px bg-gray-400/25\" data-v-fa6bb28c></div><div class=\"absolute right-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-fa6bb28c></div>", 8))], 64)) : createCommentVNode("", true)], 2)], 10, _hoisted_3), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+			}, 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-380b627d></div><div class=\"absolute top-5 right-8 h-2 w-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute bottom-5 left-8 h-2 w-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute bottom-5 right-8 h-2 w-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute left-5 top-8 w-2 h-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute left-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute right-5 top-8 w-2 h-px bg-gray-400/25\" data-v-380b627d></div><div class=\"absolute right-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-380b627d></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,

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

@@ -14,7 +14,7 @@ import { computed, createBlock, createCommentVNode, createElementBlock, createEl
 import { Icon } from "@poveste/vendors/iconify";
 import { SANDBOX_ERROR } from "@poveste/shared";
 //#region src/app/components/story/StoryVariantSinglePreviewRemote.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["src"];
+var _hoisted_1 = ["src", "title"];
 var _hoisted_2 = {
 	key: 0,
 	class: "poveste-story-error absolute inset-0 overflow-auto p-6 bg-white dark:bg-gray-900",
@@ -222,6 +222,7 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 					}]),
 					style: normalizeStyle(previewStyle(isResponsiveEnabled, finalWidth, finalHeight)),
 					"data-testid": "preview-iframe",
+					title: `Preview of ${__props.story.title} — ${__props.variant.title}`,
 					onLoad: _cache[0] || (_cache[0] = ($event) => onIframeLoad())
 				}, null, 46, _hoisted_1), storyError.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
 					createElementVNode("div", _hoisted_3, [createVNode(unref(Icon), {

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

@@ -13,6 +13,7 @@ var DevOnlyToolbarOpenInEditor_vue_vue_type_script_setup_true_lang_default = /*@
 		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))

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

@@ -19,6 +19,7 @@ var ToolbarNewTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			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), {

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

@@ -10,6 +10,7 @@ var ToolbarTextDirection_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 		return (_ctx, _cache) => {
 			const _directive_tooltip = resolveDirective("tooltip");
 			return withDirectives((openBlock(), createBlock(TopBarChipItem_default, {
+				"aria-label": "Toggle text direction",
 				class: "poveste-toolbar-text-direction",
 				onClick: _cache[0] || (_cache[0] = ($event) => unref(settings).textDirection = unref(settings).textDirection === "ltr" ? "rtl" : "ltr")
 			}, {

package/dist/bundled/components/tree/StoryListItem.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StoryListItem_vue_vue_type_script_setup_true_lang_default from "./StoryListItem.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                              */
 //#region src/app/components/tree/StoryListItem.vue
-var StoryListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryListItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a603aebf"]]);
+var StoryListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryListItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-184d6cf3"]]);
 //#endregion
 export { StoryListItem_default as default };