@poveste/app 0.11.0 → 0.12.1

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 };

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

@@ -7,10 +7,7 @@ import { useRoute } from "@poveste/vendors/vue-router";
 //#region src/app/components/tree/StoryListItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "bind-tree-margin flex items-center gap-2 pl-4 min-w-0" };
 var _hoisted_2 = { class: "truncate" };
-var _hoisted_3 = {
-	key: 1,
-	class: "opacity-40 text-sm"
-};
+var _hoisted_3 = ["aria-label"];
 var StoryListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StoryListItem",
 	props: {
@@ -19,8 +16,8 @@ var StoryListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 	},
 	setup(__props) {
 		useCssVars((_ctx) => ({
-			"v18724f1f": filePadding.value,
-			"v45b473db": _ctx.story.iconColor
+			"v516f2a64": filePadding.value,
+			"v2fa7200a": _ctx.story.iconColor
 		}));
 		const props = __props;
 		const errorStore = useStoryErrorStore();
@@ -60,7 +57,12 @@ var StoryListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 						"data-testid": "story-error-marker",
 						"aria-label": "A variant of this story threw while rendering"
 					})) : createCommentVNode("", true),
-					!__props.story.docsOnly ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.story.variants.length), 1)) : createCommentVNode("", true)
+					!__props.story.docsOnly ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: "opacity-40 text-sm",
+						"aria-label": `${__props.story.variants.length} ${__props.story.variants.length === 1 ? "variant" : "variants"}`,
+						role: "note"
+					}, toDisplayString(__props.story.variants.length), 9, _hoisted_3)) : createCommentVNode("", true)
 				]),
 				_: 1
 			}, 8, ["to"])], 512);

package/dist/style.css

@@ -2499,7 +2499,7 @@
           text-decoration: underline;
         }
       }
-      &:is(h1, h2, h3, h4, th) {
+      &:is(h1, h2, h3, h4) {
         margin-bottom: 0.75rem;
         &:not(:first-child) {
           margin-top: 1.25rem;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@poveste/app",
   "type": "module",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "Pre-bundled UI for Poveste",
   "author": {
-    "name": "Sorin Gitlan"
+    "name": "Sorin Gitlan",
+    "url": "https://x.com/50rayn"
   },
   "license": "MIT",
   "homepage": "https://poveste.dev",
@@ -38,11 +39,11 @@
   },
   "dependencies": {
     "@fontsource/noto-sans-display": "^5.3.0",
+    "@poveste/controls": "^0.12.1",
+    "@poveste/shared": "^0.12.1",
+    "@poveste/vendors": "^0.12.1",
     "fuse.js": "^7.0.0",
-    "shiki": "^3.0.0",
-    "@poveste/controls": "^0.11.0",
-    "@poveste/shared": "^0.11.0",
-    "@poveste/vendors": "^0.11.0"
+    "shiki": "^3.0.0"
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.2.25",
@@ -54,13 +55,13 @@
     "@tailwindcss/typography": "^0.5.15",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.10.1",
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue": "^6.0.0",
     "chokidar": "^4.0.1",
     "concurrently": "^9.1.0",
     "fs-extra": "^11.2.0",
     "globby": "^14.0.2",
     "pathe": "^1.1.2",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.23",
     "postcss-cli": "^11.0.1",
     "tailwindcss": "^4.3.3",
     "typescript": "5.6.3",

package/src/app/App.vue

@@ -111,6 +111,9 @@ const layoutStore = useLayoutStore()
 
 <template>
   <div class="poveste-app-root h-full">
+    <!-- The book is a page and axe's page-level rules apply to it, unlike the
+         sandbox, which renders one isolated component (#310). -->
+
     <div
       v-if="storyStore.currentStory"
       class="poveste-app hidden"
@@ -144,7 +147,9 @@ const layoutStore = useLayoutStore()
           :tree="tree"
           :stories="stories"
         />
-        <RouterView class="grow" />
+        <main class="grow flex flex-col min-h-0">
+          <RouterView class="grow" />
+        </main>
       </div>
 
       <BaseSplitPane
@@ -158,34 +163,48 @@ const layoutStore = useLayoutStore()
         <template #first>
           <div class="flex flex-col h-full bg-gray-100 dark:bg-gray-750 __poveste-pane-shadow-from-right">
             <AppHeader class="flex-none" />
-            <StoryList
-              :tree="tree"
-              :stories="stories"
-              class="flex-1"
-            />
+            <nav
+              aria-label="Stories"
+              class="flex-1 flex flex-col min-h-0"
+            >
+              <StoryList
+                :tree="tree"
+                :stories="stories"
+                class="flex-1"
+              />
+            </nav>
           </div>
         </template>
 
         <template #last>
-          <div class="flex flex-col h-full">
+          <main class="flex flex-col h-full">
             <TopBar
               @layout="isLayoutOpen = true"
               @search="isSearchOpen = true"
             />
             <RouterView class="flex-1 min-h-0" />
-          </div>
+          </main>
         </template>
       </BaseSplitPane>
-      <div
-        v-else
-        class="h-full flex flex-col"
-      >
-        <TopBar
-          @layout="isLayoutOpen = true"
-          @search="isSearchOpen = true"
-        />
-        <RouterView class="flex-1 min-h-0" />
-      </div>
+      <template v-else>
+        <!--
+          The story list is hidden in this layout, and `AppHeader` went with it —
+          taking the page's only `h1` and its banner. A heading has to exist in
+          every layout, and it has to sit inside a landmark, so this branch
+          carries its own (#310).
+        -->
+        <header class="sr-only">
+          <h1>{{ povesteConfig.theme?.title ?? 'Poveste' }}</h1>
+        </header>
+
+        <main class="h-full flex flex-col">
+          <TopBar
+            @layout="isLayoutOpen = true"
+            @search="isSearchOpen = true"
+          />
+          <RouterView class="flex-1 min-h-0" />
+        </main>
+      </template>
 
       <LayoutModal
         v-if="!isMobile"

package/src/app/components/app/AppActions.vue

@@ -35,6 +35,7 @@ const themeIcon = computed(() => {
 
     <TopBarChipItem
       v-tooltip="makeTooltip('Search', ({ isMac }) => isMac ? 'meta+k' : 'ctrl+k')"
+      aria-label="Search stories"
       data-testid="search-btn"
       @click="$emit('search')"
     >
@@ -47,6 +48,7 @@ const themeIcon = computed(() => {
     <TopBarChipItem
       v-if="!povesteConfig.theme.hideColorSchemeSwitch"
       v-tooltip="makeTooltip('Toggle dark mode', ({ isMac }) => isMac ? 'meta+shift+d' : 'ctrl+shift+d')"
+      aria-label="Toggle dark mode"
       @click="toggleDark()"
     >
       <Icon

package/src/app/components/app/AppHeader.vue

@@ -4,9 +4,14 @@ import AppLogo from './AppLogo.vue'
 </script>
 
 <template>
-  <div
+  <header
     class="poveste-app-header px-4 h-14 flex items-center gap-2"
   >
+    <!-- A page needs exactly one h1, and it has to sit inside a landmark or it
+         is content outside any region itself (#310). -->
+    <h1 class="sr-only">
+      {{ povesteConfig.theme?.title ?? 'Poveste' }}
+    </h1>
     <div class="py-3 sm:py-4 flex-1 h-full flex items-center pr-2">
       <a
         :href="povesteConfig.theme?.logoHref"
@@ -18,5 +23,5 @@ import AppLogo from './AppLogo.vue'
         />
       </a>
     </div>
-  </div>
+  </header>
 </template>

package/src/app/components/app/TopBarChipItem.vue

@@ -1,5 +1,8 @@
 <template>
+  <!-- Without an href this is not a link, so `aria-label` on it is prohibited and
+       it has no accessible role. Chip items are used both ways (#310). -->
   <a
+    :role="$attrs.href ? undefined : '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"
   >
     <slot />

package/src/app/components/base/BaseCheckbox.vue

@@ -12,6 +12,9 @@ const emit = defineEmits({
   'update:modelValue': (_newValue: boolean) => true,
 })
 
+// Off until the first toggle, so the tick does not animate itself in on mount.
+const animationEnabled = ref(false)
+
 function toggle() {
   emit('update:modelValue', !props.modelValue)
   animationEnabled.value = true
@@ -23,7 +26,6 @@ const path = ref<SVGPathElement>()
 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,6 +36,7 @@ watch(path, () => {
   <div
     role="checkbox"
     tabindex="0"
+    :aria-checked="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"
     @click="toggle()"
     @keydown.enter.prevent="toggle()"

package/src/app/components/base/BaseListItemLink.vue

@@ -37,6 +37,7 @@ export default defineComponent({
   >
     <a
       :href="href"
+      :aria-current="(isActive != null ? isActive : linkIsActive) ? 'page' : undefined"
       class="flex items-center gap-2 text-gray-900 dark:text-gray-100"
       :class="[
         $attrs.class,

package/src/app/components/panel/StatePresets.vue

@@ -20,14 +20,24 @@ const omitKeys = ['_hPropDefs']
 
 const defaultState = toPresetState(props.variant.state, omitKeys)
 
+/*
+ * `writeDefaults: false`: these are keyed per variant, so writing the default on
+ * mount persisted "no presets, default selected" for every variant merely
+ * browsed. Nothing prunes them, and a renamed variant orphans its keys forever
+ * because no code path can match them again (#326).
+ */
 const selectedOption = useStorage<string>(
   `_poveste-presets/${saveId.value}/selected`,
   DEFAULT_ID,
+  undefined,
+  { writeDefaults: false },
 )
 
 const presetStates = useStorage<Map<string, { state: Record<string, unknown>, label: string }>>(
   `_poveste-presets/${saveId.value}/states`,
   new Map(),
+  undefined,
+  { writeDefaults: false },
 )
 
 const presetsOptions = computed(() => {
@@ -176,6 +186,7 @@ onClickOutside(select, stopEditing)
     </div>
     <Icon
       v-tooltip="savedNotif ? 'Saved!' : canEdit ? 'Save to preset' : null"
+      data-testid="preset-save"
       :icon="savedNotif ? 'carbon:checkmark' : 'carbon:save'"
       class="cursor-pointer w-4 h-4 hover:text-primary-500 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
       :class="[
@@ -185,6 +196,7 @@ onClickOutside(select, stopEditing)
     />
     <Icon
       v-tooltip="'Create new preset'"
+      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"
       @click="createPreset()"

package/src/app/components/panel/StoryEvents.vue

@@ -12,6 +12,8 @@ const hasEvents = computed(() => eventsStore.events.length)
 onMounted(resetUnseen)
 watch(() => eventsStore.unseen, resetUnseen)
 
+const eventsElement = ref<HTMLDivElement>()
+
 async function resetUnseen() {
   if (eventsStore.unseen > 0) {
     eventsStore.unseen = 0
@@ -19,8 +21,6 @@ async function resetUnseen() {
   await nextTick()
   eventsElement.value.scrollTo({ top: eventsElement.value.scrollHeight })
 }
-
-const eventsElement = ref<HTMLDivElement>()
 </script>
 
 <template>

package/src/app/components/panel/StorySourceCode.vue

@@ -30,6 +30,11 @@ const highlighter = shallowRef<Highlighter>()
 const dynamicSourceCode = ref('')
 const error = ref<string>(null)
 
+// Above the watch that assigns it: the callback is async but runs immediately,
+// and a story whose `slots()` throws reaches the auto-switch below before its
+// first `await` — with the declaration underneath, that path hits the TDZ.
+const displayedSource = ref<'dynamic' | 'static'>('dynamic')
+
 watch(() => [props.variant, generateSourceCodeFn.value], async () => {
   if (!generateSourceCodeFn.value) return
   error.value = null
@@ -75,8 +80,6 @@ watch(() => [props.story, props.story?.file?.source], async () => {
   immediate: true,
 })
 
-const displayedSource = ref<'dynamic' | 'static'>('dynamic')
-
 const displayedSourceCode = computed(() => {
   if (displayedSource.value === 'dynamic') {
     return dynamicSourceCode.value

package/src/app/components/search/SearchItem.vue

@@ -39,6 +39,8 @@ function action() {
 <template>
   <div
     ref="el"
+    role="option"
+    :aria-selected="selected"
     class="poveste-search-item"
     data-testid="search-item"
     :data-selected="selected ? '' : undefined"

package/src/app/components/search/SearchPane.vue

@@ -279,6 +279,23 @@ const {
   selectPrevious,
 } = useSelection(results)
 
+// Announced to a screen reader on every change: the count when a search returns
+// something, and which result is focused as the arrows move. Both are silent
+// otherwise — arrowing only changes styling.
+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
+})
+
 // Activation
 
 const router = useRouter()
@@ -321,6 +338,13 @@ onKeyboardShortcut(['enter'], () => {
     <input
       ref="input"
       v-model="searchInputText"
+      type="search"
+      role="combobox"
+      aria-label="Search for stories and variants"
+      aria-autocomplete="list"
+      :aria-expanded="results.length > 0"
+      :aria-controls="results.length ? 'poveste-search-results' : undefined"
+      :aria-activedescendant="results.length ? `poveste-search-option-${selectedIndex}` : undefined"
       placeholder="Search for stories, variants..."
       class="bg-transparent w-full flex-1 pl-0 pr-6 py-4 outline-none"
       @keydown.down.prevent="selectNext()"
@@ -338,14 +362,32 @@ onKeyboardShortcut(['enter'], () => {
 
   <div
     v-else-if="results.length"
+    id="poveste-search-results"
+    role="listbox"
+    aria-label="Search results"
     class="max-h-[400px] overflow-y-auto rounded-b-lg"
   >
     <SearchItem
       v-for="(result, index) of results"
+      :id="`poveste-search-option-${index}`"
       :key="result.id"
       :result="result"
       :selected="index === selectedIndex"
       @close="close()"
     />
   </div>
+
+  <!--
+    Arrowing through results was a purely visual state change: `selectedIndex`
+    drove styling and nothing else, so a screen reader announced nothing on
+    typing, nothing on arrowing, and nothing on selecting (#311). The count is
+    what tells you the search did anything at all.
+  -->
+  <div
+    class="sr-only"
+    aria-live="polite"
+    role="status"
+  >
+    {{ resultsAnnouncement }}
+  </div>
 </template>

package/src/app/components/story/StoryResponsivePreview.vue

@@ -41,6 +41,8 @@ function addWindowListener(event: string, listener: (event: any) => unknown) {
   }
 }
 
+const previewWrapper = ref<HTMLDivElement>()
+
 function useDragger(el: Ref<HTMLDivElement>, value: Ref<number>, min: number, max: number, axis: 'x' | 'y') {
   function onMouseDown(event: MouseEvent) {
     event.preventDefault()
@@ -109,7 +111,6 @@ const responsiveHeight = computed({
 const horizontalDragger = ref<HTMLDivElement>()
 const verticalDragger = ref<HTMLDivElement>()
 const cornerDragger = ref<HTMLDivElement>()
-const previewWrapper = ref<HTMLDivElement>()
 
 useDragger(horizontalDragger, responsiveWidth, 32, 20000, 'x')
 useDragger(verticalDragger, responsiveHeight, 32, 20000, 'y')

package/src/app/components/story/StoryVariantSinglePreviewRemote.vue

@@ -322,6 +322,7 @@ function onIframeLoad() {
       }"
       :style="previewStyle(isResponsiveEnabled, finalWidth, finalHeight)"
       data-testid="preview-iframe"
+      :title="`Preview of ${story.title} — ${variant.title}`"
       @load="onIframeLoad()"
     />
 

package/src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue

@@ -12,6 +12,7 @@ defineProps<{
 <template>
   <TopBarChipItem
     v-tooltip="tooltip"
+    aria-label="Open story in editor"
     target="_blank"
     class="poveste-toolbar-open-in-editor"
     @click="openInEditor(file)"

package/src/app/components/toolbar/ToolbarNewTab.vue

@@ -20,6 +20,7 @@ const sandboxUrl = computed(() => {
     v-tooltip="'Open variant in new tab'"
     :href="sandboxUrl"
     target="_blank"
+    aria-label="Open variant in new tab"
     class="poveste-toolbar-new-tab"
   >
     <Icon

package/src/app/components/toolbar/ToolbarTextDirection.vue

@@ -9,6 +9,7 @@ const settings = usePreviewSettingsStore().currentSettings
 <template>
   <TopBarChipItem
     v-tooltip="`Switch to text direction ${settings.textDirection === 'ltr' ? 'Right to Left' : 'Left to Right'}`"
+    aria-label="Toggle text direction"
     class="poveste-toolbar-text-direction"
     @click="settings.textDirection = settings.textDirection === 'ltr' ? 'rtl' : 'ltr'"
   >

package/src/app/components/tree/StoryListItem.vue

@@ -69,6 +69,8 @@ useScrollOnActive(isActive, el)
       <span
         v-if="!story.docsOnly"
         class="opacity-40 text-sm"
+        :aria-label="`${story.variants.length} ${story.variants.length === 1 ? 'variant' : 'variants'}`"
+        role="note"
       >
         {{ story.variants.length }}
       </span>

package/src/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) {