@poveste/app 0.20.0 → 0.21.0

package/dist/bundled/app.css

@@ -215,93 +215,121 @@ from {
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
 .poveste-component-docs {
-&[data-v-aa8468d5] {
+&[data-v-3b01b847] {
   padding: 1rem;
   font-size: .875rem;
   color: var(--color-gray-800);
 
   /* On the subject, not `.ptw-dark &`: `.ptw-dark` sits above the `@scope` root (#101). */
 }
-&[data-v-aa8468d5]:where(.ptw-dark, .ptw-dark *) {
+&[data-v-3b01b847]:where(.ptw-dark, .ptw-dark *) {
     color: var(--color-gray-200);
 }
 }
-section + section[data-v-aa8468d5] {
+details + details[data-v-3b01b847] {
   margin-top: 1.5rem;
 }
-h3[data-v-aa8468d5] {
+summary[data-v-3b01b847] {
+  cursor: pointer;
+  margin-bottom: .5rem;
+}
+h3[data-v-3b01b847] {
+  display: inline;
   font-weight: 600;
   font-size: 1rem;
-  margin-bottom: .5rem;
 }
-table[data-v-aa8468d5] {
+table[data-v-3b01b847] {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 1rem;
 }
-th[data-v-aa8468d5] {
+th[data-v-3b01b847] {
   text-align: start;
   font-weight: 500;
   color: var(--color-gray-500);
 }
 th,
 td {
-&[data-v-aa8468d5] {
+&[data-v-3b01b847] {
   padding: .375rem .5rem;
   border-bottom: 1px solid var(--color-gray-200);
   vertical-align: top;
 }
-&[data-v-aa8468d5]:where(.ptw-dark, .ptw-dark *) {
+&[data-v-3b01b847]:where(.ptw-dark, .ptw-dark *) {
     border-color: var(--color-gray-750);
 }
 }
 code {
-&[data-v-aa8468d5] {
+&[data-v-3b01b847] {
   font-size: .8125rem;
   background-color: var(--color-gray-100);
   border-radius: .25rem;
   padding: 0 .25rem;
 }
-&[data-v-aa8468d5]:where(.ptw-dark, .ptw-dark *) {
+&[data-v-3b01b847]:where(.ptw-dark, .ptw-dark *) {
     background-color: var(--color-gray-750);
 }
 }
-pre code[data-v-aa8468d5] {
+pre code[data-v-3b01b847] {
   display: block;
   padding: .5rem;
   margin-top: .25rem;
   white-space: pre-wrap;
 }
-.deprecated[data-v-aa8468d5] {
+.deprecated[data-v-3b01b847] {
   text-decoration: line-through;
 }
-[data-slot='required'][data-v-aa8468d5] {
+/* Its own line: a constraint wrapped beside the name broke mid-phrase in the narrow panel. */
+/* A prop a slot passes its content, under the slot it belongs to. */
+[data-slot-prop] td[data-v-3b01b847]:first-child {
+  padding-inline-start: 1rem;
+}
+[data-slot='generic'][data-v-3b01b847] {
+  display: block;
+  width: fit-content;
+  margin-top: .25rem;
+  font-size: .75rem;
+  font-weight: 400;
+  cursor: help;
+}
+[data-slot='required'][data-v-3b01b847] {
   color: var(--color-red-500);
   margin-inline-start: .125rem;
 }
+[data-slot='model'] {
+&[data-v-3b01b847] {
+  display: inline-block;
+  margin-inline-start: .375rem;
+  color: var(--color-primary-600);
+  cursor: help;
+}
+&[data-v-3b01b847]:where(.ptw-dark, .ptw-dark *) {
+    color: var(--color-primary-400);
+}
+}
 [data-slot='deprecated'],
 [data-slot='default-conflict'] {
-&[data-v-aa8468d5] {
+&[data-v-3b01b847] {
   color: var(--color-amber-600);
   font-weight: 500;
 }
-&[data-v-aa8468d5]:where(.ptw-dark, .ptw-dark *) {
+&[data-v-3b01b847]:where(.ptw-dark, .ptw-dark *) {
     color: var(--color-amber-400);
 }
 }
-[data-slot='default-conflict'][data-v-aa8468d5] {
+[data-slot='default-conflict'][data-v-3b01b847] {
   margin-inline-start: .25rem;
   cursor: help;
 }
-[data-slot='see'][data-v-aa8468d5] {
+[data-slot='see'][data-v-3b01b847] {
   display: block;
   margin-top: .25rem;
 }
-a[data-slot='see'][data-v-aa8468d5] {
+a[data-slot='see'][data-v-3b01b847] {
   color: var(--color-primary-500);
   text-decoration: underline;
 }
-[data-slot='error'][data-v-aa8468d5] {
+[data-slot='error'][data-v-3b01b847] {
   color: var(--color-gray-500);
 }
 }
@@ -323,7 +351,7 @@ a[data-slot='see'][data-v-aa8468d5] {
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.__poveste-code-placeholder[data-v-4b28d655] {
+.__poveste-code-placeholder[data-v-cecbc93b] {
   color: inherit;
   font-size: inherit;
 }
@@ -338,16 +366,16 @@ a[data-slot='see'][data-v-aa8468d5] {
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-preview-bg[data-v-a99edb14] {
-  background-color: var(--v4ce71e65);
+.bind-preview-bg[data-v-bbd56e9f] {
+  background-color: var(--v59fa22e6);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-icon-color[data-v-e0e9a8e1] {
-  color: var(--v2ce2d009);
+.bind-icon-color[data-v-9a717688] {
+  color: var(--ff0ecc2c);
 }
-.bind-preview-bg[data-v-e0e9a8e1] {
-  background-color: var(--v4f3f7242);
+.bind-preview-bg[data-v-9a717688] {
+  background-color: var(--v59a40d7e);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {

package/dist/bundled/components/layout/LayoutModal.vue_vue_type_script_setup_true_lang.js

@@ -1,14 +1,14 @@
 import { onKeyboardShortcut } from "../../util/keyboard.js";
 import LayoutPane_default from "./LayoutPane.js";
-import { createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, unref, vShow, withDirectives } from "@poveste/vendors/vue";
+import { createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, openBlock, ref, unref, vShow, watch, withDirectives, withKeys } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 //#region src/app/components/layout/LayoutModal.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	class: "poveste-layout-modal fixed inset-0 bg-white/80 dark:bg-gray-900/80 z-20",
 	"data-testid": "layout-modal"
 };
-var _hoisted_2 = { class: "bg-white dark:bg-gray-900 md:mt-16 md:mx-auto w-screen max-w-[512px] shadow-xl border border-gray-200 dark:border-gray-750 rounded-lg relative divide-y divide-gray-200 dark:divide-gray-850" };
-var _hoisted_3 = { class: "flex items-center px-6 py-3 text-gray-900 dark:text-gray-100" };
+var _hoisted_2 = { class: "flex items-center px-6 py-3 text-gray-900 dark:text-gray-100" };
+var FOCUSABLE = "button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
 var LayoutModal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "LayoutModal",
 	props: { shown: {
@@ -25,11 +25,50 @@ var LayoutModal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		onKeyboardShortcut(["escape"], () => {
 			if (props.shown) close();
 		});
+		const panel = ref();
+		let opener = null;
+		function focusables() {
+			return [...panel.value?.querySelectorAll(FOCUSABLE) ?? []].filter((element) => !element.hasAttribute("disabled") && element.getClientRects().length > 0);
+		}
+		watch(() => props.shown, async (shown) => {
+			if (shown) {
+				opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+				await nextTick();
+				focusables()[0]?.focus();
+			} else if (opener?.isConnected) {
+				opener.focus();
+				opener = null;
+			}
+		});
+		function keepFocusInside(event) {
+			const elements = focusables();
+			const first = elements[0];
+			const last = elements.at(-1);
+			if (!first || !last) return;
+			if (event.shiftKey && document.activeElement === first) {
+				event.preventDefault();
+				last.focus();
+			} else if (!event.shiftKey && document.activeElement === last) {
+				event.preventDefault();
+				first.focus();
+			}
+		}
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", {
 				class: "absolute inset-0",
 				onClick: _cache[0] || (_cache[0] = ($event) => close())
-			}), createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [_cache[2] || (_cache[2] = createElementVNode("h2", { class: "flex-1 text-sm font-medium m-0" }, " Customize Layout ", -1)), createElementVNode("button", {
+			}), createElementVNode("div", {
+				ref_key: "panel",
+				ref: panel,
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": "poveste-layout-modal-title",
+				class: "bg-white dark:bg-gray-900 md:mt-16 md:mx-auto w-screen max-w-[512px] shadow-xl border border-gray-200 dark:border-gray-750 rounded-lg relative divide-y divide-gray-200 dark:divide-gray-850",
+				onKeydown: withKeys(keepFocusInside, ["tab"])
+			}, [createElementVNode("div", _hoisted_2, [_cache[2] || (_cache[2] = createElementVNode("h2", {
+				id: "poveste-layout-modal-title",
+				class: "flex-1 text-sm font-medium m-0"
+			}, " Customize Layout ", -1)), createElementVNode("button", {
 				type: "button",
 				class: "flex items-center justify-center p-1 bg-transparent border-0 text-gray-500 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer",
 				"aria-label": "Close layout customization",
@@ -39,7 +78,7 @@ var LayoutModal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				icon: "carbon:close",
 				class: "w-5 h-5",
 				"aria-hidden": "true"
-			})])]), createVNode(LayoutPane_default)])], 512)), [[vShow, __props.shown]]);
+			})])]), createVNode(LayoutPane_default)], 544)], 512)), [[vShow, __props.shown]]);
 		};
 	}
 });

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

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

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

@@ -1,68 +1,82 @@
-import { tagHref, tagText } from "../../util/component-docs.js";
-import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref } from "@poveste/vendors/vue";
+import { modelLabel, rootFirst, tagHref, tagText } from "../../util/component-docs.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref } from "@poveste/vendors/vue";
 //#region src/app/components/panel/ComponentDocs.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	class: "poveste-component-docs",
 	"data-testid": "component-docs"
 };
-var _hoisted_2 = ["data-component"];
+var _hoisted_2 = ["open", "data-component"];
 var _hoisted_3 = { "data-slot": "component-name" };
 var _hoisted_4 = {
 	key: 0,
-	"data-slot": "error"
+	title: "The component's type parameters, as its script declares them",
+	"data-slot": "generic"
 };
 var _hoisted_5 = {
+	key: 0,
+	"data-slot": "error"
+};
+var _hoisted_6 = {
 	key: 0,
 	"data-slot": "props"
 };
-var _hoisted_6 = ["data-prop"];
-var _hoisted_7 = {
+var _hoisted_7 = ["data-prop"];
+var _hoisted_8 = {
 	key: 0,
 	title: "Required",
 	"data-slot": "required"
 };
-var _hoisted_8 = { key: 0 };
 var _hoisted_9 = ["title"];
-var _hoisted_10 = {
+var _hoisted_10 = { key: 0 };
+var _hoisted_11 = ["title"];
+var _hoisted_12 = {
 	key: 0,
 	"data-slot": "deprecated"
 };
-var _hoisted_11 = ["href"];
-var _hoisted_12 = {
+var _hoisted_13 = ["href"];
+var _hoisted_14 = {
 	key: 1,
 	"data-slot": "see"
 };
-var _hoisted_13 = {
+var _hoisted_15 = {
 	key: 1,
 	"data-slot": "example"
 };
-var _hoisted_14 = {
+var _hoisted_16 = {
 	key: 1,
 	"data-slot": "slots"
 };
-var _hoisted_15 = ["data-slot-name"];
-var _hoisted_16 = { key: 0 };
-var _hoisted_17 = {
+var _hoisted_17 = ["data-slot-name"];
+var _hoisted_18 = { key: 0 };
+var _hoisted_19 = ["data-slot-prop"];
+var _hoisted_20 = {
 	key: 2,
 	"data-slot": "events"
 };
-var _hoisted_18 = ["data-event"];
-var _hoisted_19 = { key: 0 };
+var _hoisted_21 = ["data-event"];
+var _hoisted_22 = ["title"];
+var _hoisted_23 = { key: 0 };
 var ComponentDocs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ComponentDocs",
-	props: { components: {} },
+	props: {
+		components: {},
+		storyFile: {}
+	},
 	setup(__props) {
+		const props = __props;
+		const ordered = computed(() => rootFirst(props.components, props.storyFile));
 		function shownDefault(prop) {
 			return prop.default ?? prop.defaultTag;
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.components, (component) => {
-				return openBlock(), createElementBlock("section", {
+			return openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(ordered.value, (component, index) => {
+				return openBlock(), createElementBlock("details", {
 					key: component.file,
+					open: ordered.value.length <= unref(3) || index === 0,
 					"data-slot": "component",
 					"data-component": component.name
-				}, [createElementVNode("h3", _hoisted_3, toDisplayString(component.name), 1), component.error ? (openBlock(), createElementBlock("p", _hoisted_4, " Could not read this component's types: " + toDisplayString(component.error), 1)) : component.doc ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-					component.doc.props.length ? (openBlock(), createElementBlock("table", _hoisted_5, [_cache[1] || (_cache[1] = createElementVNode("thead", null, [createElementVNode("tr", null, [
+				}, [createElementVNode("summary", null, [createElementVNode("h3", _hoisted_3, [createTextVNode(toDisplayString(component.name), 1), component.doc?.generic ? (openBlock(), createElementBlock("code", _hoisted_4, "<" + toDisplayString(component.doc.generic) + ">", 1)) : createCommentVNode("", true)])]), component.error ? (openBlock(), createElementBlock("p", _hoisted_5, " Could not read this component's types: " + toDisplayString(component.error), 1)) : component.doc ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+					component.doc.props.length ? (openBlock(), createElementBlock("table", _hoisted_6, [_cache[1] || (_cache[1] = createElementVNode("thead", null, [createElementVNode("tr", null, [
 						createElementVNode("th", null, "Prop"),
 						createElementVNode("th", null, "Type"),
 						createElementVNode("th", null, "Default"),
@@ -72,15 +86,23 @@ var ComponentDocs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 							key: prop.name,
 							"data-prop": prop.name
 						}, [
-							createElementVNode("td", null, [createElementVNode("code", { class: normalizeClass({ deprecated: unref(tagText)(prop.tags, "deprecated") !== void 0 }) }, toDisplayString(prop.name), 3), prop.required ? (openBlock(), createElementBlock("span", _hoisted_7, "*")) : createCommentVNode("", true)]),
+							createElementVNode("td", null, [
+								createElementVNode("code", { class: normalizeClass({ deprecated: unref(tagText)(prop.tags, "deprecated") !== void 0 }) }, toDisplayString(prop.name), 3),
+								prop.required ? (openBlock(), createElementBlock("span", _hoisted_8, "*")) : createCommentVNode("", true),
+								unref(modelLabel)(component.doc, prop.name) ? (openBlock(), createElementBlock("code", {
+									key: 1,
+									title: `Bound two ways with ${unref(modelLabel)(component.doc, prop.name)}, through the update:${prop.name} event`,
+									"data-slot": "model"
+								}, toDisplayString(unref(modelLabel)(component.doc, prop.name)), 9, _hoisted_9)) : createCommentVNode("", true)
+							]),
 							createElementVNode("td", null, [createElementVNode("code", null, toDisplayString(prop.type), 1)]),
-							createElementVNode("td", null, [shownDefault(prop) !== void 0 ? (openBlock(), createElementBlock("code", _hoisted_8, toDisplayString(shownDefault(prop)), 1)) : createCommentVNode("", true), _ctx.__POVESTE_DEV__ && prop.defaultConflict ? (openBlock(), createElementBlock("span", {
+							createElementVNode("td", null, [shownDefault(prop) !== void 0 ? (openBlock(), createElementBlock("code", _hoisted_10, toDisplayString(shownDefault(prop)), 1)) : createCommentVNode("", true), _ctx.__POVESTE_DEV__ && prop.defaultConflict ? (openBlock(), createElementBlock("span", {
 								key: 1,
 								title: `The code's default is shown; the @default tag says ${prop.defaultTag}`,
 								"data-slot": "default-conflict"
-							}, "≠", 8, _hoisted_9)) : createCommentVNode("", true)]),
+							}, "≠", 8, _hoisted_11)) : createCommentVNode("", true)]),
 							createElementVNode("td", null, [
-								unref(tagText)(prop.tags, "deprecated") !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_10, [_cache[0] || (_cache[0] = createTextVNode("Deprecated", -1)), unref(tagText)(prop.tags, "deprecated") ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(": " + toDisplayString(unref(tagText)(prop.tags, "deprecated")), 1)], 64)) : createCommentVNode("", true)])) : createCommentVNode("", true),
+								unref(tagText)(prop.tags, "deprecated") !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_12, [_cache[0] || (_cache[0] = createTextVNode("Deprecated", -1)), unref(tagText)(prop.tags, "deprecated") ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(": " + toDisplayString(unref(tagText)(prop.tags, "deprecated")), 1)], 64)) : createCommentVNode("", true)])) : createCommentVNode("", true),
 								createTextVNode(" " + toDisplayString(prop.description) + " ", 1),
 								(openBlock(true), createElementBlock(Fragment, null, renderList(prop.tags.filter((tag) => tag.name === "see" || tag.name === "link"), (tag) => {
 									return openBlock(), createElementBlock(Fragment, { key: tag.text }, [unref(tagHref)(tag.text ?? "") ? (openBlock(), createElementBlock("a", {
@@ -89,27 +111,33 @@ var ComponentDocs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 										target: "_blank",
 										rel: "noopener",
 										"data-slot": "see"
-									}, toDisplayString(tag.text), 9, _hoisted_11)) : (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(tag.text), 1))], 64);
+									}, toDisplayString(tag.text), 9, _hoisted_13)) : (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(tag.text), 1))], 64);
 								}), 128)),
-								unref(tagText)(prop.tags, "example") ? (openBlock(), createElementBlock("pre", _hoisted_13, [createElementVNode("code", null, toDisplayString(unref(tagText)(prop.tags, "example")), 1)])) : createCommentVNode("", true)
+								unref(tagText)(prop.tags, "example") ? (openBlock(), createElementBlock("pre", _hoisted_15, [createElementVNode("code", null, toDisplayString(unref(tagText)(prop.tags, "example")), 1)])) : createCommentVNode("", true)
 							])
-						], 8, _hoisted_6);
+						], 8, _hoisted_7);
 					}), 128))])])) : createCommentVNode("", true),
-					component.doc.slots.length ? (openBlock(), createElementBlock("table", _hoisted_14, [_cache[2] || (_cache[2] = createElementVNode("thead", null, [createElementVNode("tr", null, [
+					component.doc.slots.length ? (openBlock(), createElementBlock("table", _hoisted_16, [_cache[2] || (_cache[2] = createElementVNode("thead", null, [createElementVNode("tr", null, [
 						createElementVNode("th", null, "Slot"),
 						createElementVNode("th", null, "Type"),
 						createElementVNode("th", null, "Description")
 					])], -1)), createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(component.doc.slots, (slot) => {
-						return openBlock(), createElementBlock("tr", {
-							key: slot.name,
-							"data-slot-name": slot.name
-						}, [
+						return openBlock(), createElementBlock(Fragment, { key: slot.name }, [createElementVNode("tr", { "data-slot-name": slot.name }, [
 							createElementVNode("td", null, [createElementVNode("code", null, toDisplayString(slot.name), 1)]),
-							createElementVNode("td", null, [slot.type ? (openBlock(), createElementBlock("code", _hoisted_16, toDisplayString(slot.type), 1)) : createCommentVNode("", true)]),
+							createElementVNode("td", null, [slot.type && !slot.props?.length ? (openBlock(), createElementBlock("code", _hoisted_18, toDisplayString(slot.type), 1)) : createCommentVNode("", true)]),
 							createElementVNode("td", null, toDisplayString(slot.description), 1)
-						], 8, _hoisted_15);
+						], 8, _hoisted_17), (openBlock(true), createElementBlock(Fragment, null, renderList(slot.props ?? [], (slotProp) => {
+							return openBlock(), createElementBlock("tr", {
+								key: `${slot.name}.${slotProp.name}`,
+								"data-slot-prop": slotProp.name
+							}, [
+								createElementVNode("td", null, [createElementVNode("code", null, toDisplayString(slotProp.name), 1)]),
+								createElementVNode("td", null, [createElementVNode("code", null, toDisplayString(slotProp.type), 1)]),
+								createElementVNode("td", null, toDisplayString(slotProp.description), 1)
+							], 8, _hoisted_19);
+						}), 128))], 64);
 					}), 128))])])) : createCommentVNode("", true),
-					component.doc.events.length ? (openBlock(), createElementBlock("table", _hoisted_17, [_cache[3] || (_cache[3] = createElementVNode("thead", null, [createElementVNode("tr", null, [
+					component.doc.events.length ? (openBlock(), createElementBlock("table", _hoisted_20, [_cache[3] || (_cache[3] = createElementVNode("thead", null, [createElementVNode("tr", null, [
 						createElementVNode("th", null, "Event"),
 						createElementVNode("th", null, "Payload"),
 						createElementVNode("th", null, "Description")
@@ -118,10 +146,14 @@ var ComponentDocs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 							key: event.name,
 							"data-event": event.name
 						}, [
-							createElementVNode("td", null, [createElementVNode("code", null, toDisplayString(event.name), 1)]),
-							createElementVNode("td", null, [event.type ? (openBlock(), createElementBlock("code", _hoisted_19, toDisplayString(event.type), 1)) : createCommentVNode("", true)]),
+							createElementVNode("td", null, [createElementVNode("code", null, toDisplayString(event.name), 1), unref(modelLabel)(component.doc, event.name) ? (openBlock(), createElementBlock("code", {
+								key: 0,
+								title: `Bound two ways with ${unref(modelLabel)(component.doc, event.name)}, with the ${event.name.slice(7)} prop`,
+								"data-slot": "model"
+							}, toDisplayString(unref(modelLabel)(component.doc, event.name)), 9, _hoisted_22)) : createCommentVNode("", true)]),
+							createElementVNode("td", null, [event.type ? (openBlock(), createElementBlock("code", _hoisted_23, toDisplayString(event.type), 1)) : createCommentVNode("", true)]),
 							createElementVNode("td", null, toDisplayString(event.description), 1)
-						], 8, _hoisted_18);
+						], 8, _hoisted_21);
 					}), 128))])])) : createCommentVNode("", true)
 				], 64)) : createCommentVNode("", true)], 8, _hoisted_2);
 			}), 128))]);

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

@@ -1,9 +1,9 @@
 import { povesteConfig } from "../../util/config.js";
 import DevOnlyToolbarOpenInEditor_default from "../toolbar/DevOnlyToolbarOpenInEditor.js";
 import BaseEmpty_default from "../base/BaseEmpty.js";
-import { useComponentDocs } from "../../util/component-docs.js";
+import { onlySections, useComponentDocs } from "../../util/component-docs.js";
 import ComponentDocs_default from "./ComponentDocs.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, toRefs, unref, watch, watchEffect, withCtx } from "@poveste/vendors/vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, toDisplayString, toRefs, unref, watch, watchEffect, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 import { useRoute, useRouter } from "@poveste/vendors/vue-router";
 import { markdownFiles } from "virtual:$poveste-markdown-files";
@@ -51,7 +51,8 @@ var StoryDocs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const emit = __emit;
 		const { story } = toRefs(props);
 		const { renderedDoc } = useStoryDoc(story);
-		const { components } = useComponentDocs(computed(() => story.value?.id));
+		const { components: allComponents, pending, off } = useComponentDocs(computed(() => story.value?.id));
+		const components = computed(() => allComponents.value && onlySections(allComponents.value, story.value?.autoDocs));
 		const router = useRouter();
 		const fakeHost = `http://a.com`;
 		function onClick(e) {
@@ -116,25 +117,48 @@ var StoryDocs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					file: filePath.value,
 					tooltip: "Edit docs in editor"
 				}, null, 8, ["file"])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
-				!unref(renderedDoc) && !unref(components)?.length ? (openBlock(), createBlock(BaseEmpty_default, { key: 1 }, {
+				_ctx.__POVESTE_DEV__ && !unref(renderedDoc) && !components.value?.length && unref(pending) ? (openBlock(), createBlock(BaseEmpty_default, {
+					key: 1,
+					"data-testid": "docs-pending"
+				}, {
+					default: withCtx(() => [
+						createVNode(unref(Icon), {
+							icon: "carbon:circle-dash",
+							class: "w-8 h-8 opacity-50 mb-6 animate-spin"
+						}),
+						_cache[0] || (_cache[0] = createTextVNode(" Reading component types… ", -1)),
+						_cache[1] || (_cache[1] = createElementVNode("span", { class: "text-sm opacity-70 mt-2" }, "The first time can take a while.", -1))
+					]),
+					_: 1
+				})) : !unref(pending) && !unref(renderedDoc) && !components.value?.length && unref(off) ? (openBlock(), createBlock(BaseEmpty_default, {
+					key: 2,
+					"data-testid": "docs-off"
+				}, {
 					default: withCtx(() => [createVNode(unref(Icon), {
 						icon: "carbon:document-unknown",
 						class: "w-8 h-8 opacity-50 mb-6"
-					}), _cache[0] || (_cache[0] = createTextVNode(" No documentation available ", -1))]),
+					}), createTextVNode(" " + toDisplayString(unref(off)), 1)]),
+					_: 1
+				})) : !unref(pending) && !unref(renderedDoc) && !components.value?.length ? (openBlock(), createBlock(BaseEmpty_default, { key: 3 }, {
+					default: withCtx(() => [createVNode(unref(Icon), {
+						icon: "carbon:document-unknown",
+						class: "w-8 h-8 opacity-50 mb-6"
+					}), _cache[2] || (_cache[2] = createTextVNode(" No documentation available ", -1))]),
 					_: 1
 				})) : createCommentVNode("", true),
 				unref(renderedDoc) ? (openBlock(), createElementBlock("div", {
-					key: 2,
+					key: 4,
 					ref_key: "renderedEl",
 					ref: renderedEl,
 					class: "prose dark:prose-invert p-4 max-w-none",
 					"data-testid": "story-docs",
 					innerHTML: unref(renderedDoc)
 				}, null, 8, _hoisted_1)) : createCommentVNode("", true),
-				unref(components)?.length ? (openBlock(), createBlock(ComponentDocs_default, {
-					key: 3,
-					components: unref(components)
-				}, null, 8, ["components"])) : createCommentVNode("", true)
+				components.value?.length ? (openBlock(), createBlock(ComponentDocs_default, {
+					key: 5,
+					components: components.value,
+					"story-file": unref(story).file?.filePath
+				}, null, 8, ["components", "story-file"])) : createCommentVNode("", true)
 			], 32);
 		};
 	}

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-4b28d655"]]);
+var StorySourceCode_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StorySourceCode_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-cecbc93b"]]);
 //#endregion
 export { StorySourceCode_default as default };

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

@@ -1,6 +1,6 @@
 import { isDark } from "../../util/dark.js";
 import BaseEmpty_default from "../base/BaseEmpty.js";
-import { getDynamicSourceCode, getStaticSourceCode, loadGenerateSourceCode } from "../../util/docs.js";
+import { getDynamicSourceCode, getStaticSourceCode, loadGenerateSourceCode, sourceLang } from "../../util/docs.js";
 import { getHighlighter } from "../../util/highlighter.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, markRaw, nextTick, normalizeClass, onMounted, openBlock, ref, shallowRef, toDisplayString, unref, watch, watchEffect, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
@@ -82,7 +82,7 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			}
 		});
 		const sourceHtml = computed(() => displayedSourceCode.value ? highlighter.value?.codeToHtml(displayedSourceCode.value, {
-			lang: "html",
+			lang: sourceLang(props.story),
 			theme: isDark.value ? "github-dark" : "github-light-high-contrast"
 		}) : "");
 		let lastScroll = 0;

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

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

@@ -1,3 +1,4 @@
+import { usePreviewDark } from "../../util/color-scheme.js";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
 import CheckerboardPattern_default from "../misc/CheckerboardPattern.js";
 import HatchedPattern_default from "../misc/HatchedPattern.js";
@@ -23,9 +24,10 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 		}
 	},
 	setup(__props) {
-		useCssVars((_ctx) => ({ "v4ce71e65": unref(settings).backgroundColor }));
+		useCssVars((_ctx) => ({ "v59fa22e6": unref(settings).backgroundColor }));
 		const props = __props;
 		const settings = usePreviewSettingsStore().currentSettings;
+		const previewDark = usePreviewDark(settings);
 		const resizing = ref(false);
 		const onUnmountedCleanupFns = [];
 		onUnmounted(() => {
@@ -127,7 +129,7 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 				ref: previewWrapper,
 				class: "h-full overflow-auto relative"
 			}, [createElementVNode("div", { class: normalizeClass(["rounded-lg relative", [
-				__props.responsive ? "bg-white dark:bg-gray-700" : "",
+				__props.responsive ? unref(previewDark) ? "bg-gray-700" : "bg-white" : "",
 				isResponsiveEnabled.value ? {
 					"w-fit": !!finalWidth.value,
 					"h-fit": !!finalHeight.value,
@@ -145,7 +147,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-a99edb14></div><div class=\"absolute top-5 right-8 h-2 w-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute bottom-5 left-8 h-2 w-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute bottom-5 right-8 h-2 w-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute left-5 top-8 w-2 h-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute left-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute right-5 top-8 w-2 h-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute right-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-a99edb14></div>", 8))], 64)) : createCommentVNode("", true)], 2)], 10, _hoisted_3), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+			}, 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-bbd56e9f></div><div class=\"absolute top-5 right-8 h-2 w-px bg-gray-400/25\" data-v-bbd56e9f></div><div class=\"absolute bottom-5 left-8 h-2 w-px bg-gray-400/25\" data-v-bbd56e9f></div><div class=\"absolute bottom-5 right-8 h-2 w-px bg-gray-400/25\" data-v-bbd56e9f></div><div class=\"absolute left-5 top-8 w-2 h-px bg-gray-400/25\" data-v-bbd56e9f></div><div class=\"absolute left-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-bbd56e9f></div><div class=\"absolute right-5 top-8 w-2 h-px bg-gray-400/25\" data-v-bbd56e9f></div><div class=\"absolute right-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-bbd56e9f></div>", 8))], 64)) : createCommentVNode("", true)], 2)], 10, _hoisted_3), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
 				createVNode(unref(HstTooltip), {
 					content: sizeTooltip.value,
 					side: "right"

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

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