@poveste/app 0.19.1 → 0.21.0

package/dist/bundled/app.css

@@ -1,4 +1,45 @@
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
+.poveste-top-bar-chip-item {
+  display: flex;
+  align-items: center;
+  gap: .25rem;
+  padding: .375rem .625rem;
+  border: 0;
+  font: inherit;
+  color: var(--color-gray-900);
+  cursor: pointer;
+@media (prefers-reduced-motion: no-preference) {
+    transition: color .15s ease-out, background-color .15s ease-out;
+}
+&:hover {
+    background-color: rgb(255 255 255 / .5);
+    color: var(--color-primary-500);
+}
+&:active {
+    background-color: rgb(255 255 255 / .7);
+}
+
+  /* Inset: the chip clips its items to its rounded border. */
+&:focus-visible {
+    outline: 2px solid var(--color-primary-500);
+    outline-offset: -2px;
+}
+
+  /* Spelled out on the subject: `.ptw-dark` sits above the `@scope` root, so a
+     descendant rule keyed on it never matches from in here (#101). */
+&:where(.ptw-dark, .ptw-dark *) {
+    color: var(--color-gray-100);
+&:hover {
+      background-color: rgb(255 255 255 / .1);
+      color: var(--color-primary-400);
+}
+&:active {
+      background-color: rgb(255 255 255 / .15);
+}
+}
+}
+}
+@scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
 .bind-tree-margin[data-v-83161585] {
   margin-left: var(--v0299061e);
 }
@@ -94,6 +135,46 @@ from {
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
+.poveste-layout-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+  padding: 1rem 1.5rem;
+  border: 0;
+  font: inherit;
+  text-align: start;
+  color: var(--color-gray-900);
+  cursor: pointer;
+&:hover {
+    background-color: var(--color-primary-100);
+}
+&:focus-visible {
+    outline: 2px solid var(--color-primary-500);
+    outline-offset: -2px;
+}
+&.active {
+    background-color: var(--color-primary-500);
+    color: var(--color-white);
+&:hover {
+      background-color: var(--color-primary-600);
+}
+}
+
+  /* Spelled out on the subject: `.ptw-dark` sits above the `@scope` root, so a
+     descendant rule keyed on it never matches from in here (#101). */
+&:where(.ptw-dark, .ptw-dark *) {
+    color: var(--color-gray-100);
+&:hover {
+      background-color: var(--color-primary-900);
+}
+&.active {
+      color: var(--color-black);
+}
+}
+}
+}
+@scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
 /* Outside the layer — registration is document-global, not cascaded. */
 @property --poveste-count {
   syntax: '<integer>';
@@ -133,6 +214,126 @@ from {
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
+.poveste-component-docs {
+&[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-3b01b847]:where(.ptw-dark, .ptw-dark *) {
+    color: var(--color-gray-200);
+}
+}
+details + details[data-v-3b01b847] {
+  margin-top: 1.5rem;
+}
+summary[data-v-3b01b847] {
+  cursor: pointer;
+  margin-bottom: .5rem;
+}
+h3[data-v-3b01b847] {
+  display: inline;
+  font-weight: 600;
+  font-size: 1rem;
+}
+table[data-v-3b01b847] {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1rem;
+}
+th[data-v-3b01b847] {
+  text-align: start;
+  font-weight: 500;
+  color: var(--color-gray-500);
+}
+th,
+td {
+&[data-v-3b01b847] {
+  padding: .375rem .5rem;
+  border-bottom: 1px solid var(--color-gray-200);
+  vertical-align: top;
+}
+&[data-v-3b01b847]:where(.ptw-dark, .ptw-dark *) {
+    border-color: var(--color-gray-750);
+}
+}
+code {
+&[data-v-3b01b847] {
+  font-size: .8125rem;
+  background-color: var(--color-gray-100);
+  border-radius: .25rem;
+  padding: 0 .25rem;
+}
+&[data-v-3b01b847]:where(.ptw-dark, .ptw-dark *) {
+    background-color: var(--color-gray-750);
+}
+}
+pre code[data-v-3b01b847] {
+  display: block;
+  padding: .5rem;
+  margin-top: .25rem;
+  white-space: pre-wrap;
+}
+.deprecated[data-v-3b01b847] {
+  text-decoration: line-through;
+}
+/* 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-3b01b847] {
+  color: var(--color-amber-600);
+  font-weight: 500;
+}
+&[data-v-3b01b847]:where(.ptw-dark, .ptw-dark *) {
+    color: var(--color-amber-400);
+}
+}
+[data-slot='default-conflict'][data-v-3b01b847] {
+  margin-inline-start: .25rem;
+  cursor: help;
+}
+[data-slot='see'][data-v-3b01b847] {
+  display: block;
+  margin-top: .25rem;
+}
+a[data-slot='see'][data-v-3b01b847] {
+  color: var(--color-primary-500);
+  text-decoration: underline;
+}
+[data-slot='error'][data-v-3b01b847] {
+  color: var(--color-gray-500);
+}
+}
+@scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
 .poveste-base-select-popper {
   /* The trigger's own width, which is what floating-vue's `auto-size` gave. */
   min-width: var(--reka-popper-anchor-width);
@@ -150,7 +351,7 @@ from {
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.__poveste-code-placeholder[data-v-ed711d57] {
+.__poveste-code-placeholder[data-v-cecbc93b] {
   color: inherit;
   font-size: inherit;
 }
@@ -165,16 +366,16 @@ from {
 }
 }
 @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/HomeView.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
-import { customLogos, povesteConfig } from "../util/config.js";
+import { customLogos } from "../util/config.js";
 import { useStoryStore } from "../stores/story.js";
-import poveste_default from "../assets/poveste.js";
+import "../assets/poveste.js";
 import HomeCounter_default from "./app/HomeCounter.js";
 import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock } from "@poveste/vendors/vue";
 //#region src/app/components/HomeView.vue?vue&type=script&setup=true&lang.ts
@@ -14,7 +14,7 @@ var _hoisted_3 = {
 var HomeView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "HomeView",
 	setup(__props) {
-		const logoUrl = computed(() => povesteConfig.theme?.logo?.square ? customLogos?.square ?? "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%20width='512'%20height='512'%20fill='none'%3e%3cdefs%3e%3clinearGradient%20id='pv'%20x1='96'%20y1='416'%20x2='416'%20y2='96'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%2324C56A'/%3e%3cstop%20offset='1'%20stop-color='%2317A6C6'/%3e%3c/linearGradient%3e%3c/defs%3e%3crect%20x='16'%20y='16'%20width='480'%20height='480'%20rx='112'%20fill='url(%23pv)'/%3e%3crect%20x='140'%20y='142'%20width='232'%20height='44'%20rx='16'%20fill='%23fff'/%3e%3crect%20x='151'%20y='217'%20width='88'%20height='146'%20rx='9'%20stroke='%23fff'%20stroke-width='22'/%3e%3crect%20x='172'%20y='244'%20width='30'%20height='92'%20rx='13'%20fill='%23fff'/%3e%3crect%20x='262'%20y='206'%20width='110'%20height='168'%20rx='20'%20fill='%23fff'/%3e%3crect%20x='284'%20y='226'%20width='66'%20height='58'%20rx='13'%20fill='url(%23pv)'/%3e%3c/svg%3e" : poveste_default);
+		const logoUrl = computed(() => customLogos?.square ?? "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%20width='512'%20height='512'%20fill='none'%3e%3cdefs%3e%3clinearGradient%20id='pv'%20x1='96'%20y1='416'%20x2='416'%20y2='96'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%2324C56A'/%3e%3cstop%20offset='1'%20stop-color='%2317A6C6'/%3e%3c/linearGradient%3e%3c/defs%3e%3crect%20x='16'%20y='16'%20width='480'%20height='480'%20rx='112'%20fill='url(%23pv)'/%3e%3crect%20x='140'%20y='142'%20width='232'%20height='44'%20rx='16'%20fill='%23fff'/%3e%3crect%20x='151'%20y='217'%20width='88'%20height='146'%20rx='9'%20stroke='%23fff'%20stroke-width='22'/%3e%3crect%20x='172'%20y='244'%20width='30'%20height='92'%20rx='13'%20fill='%23fff'/%3e%3crect%20x='262'%20y='206'%20width='110'%20height='168'%20rx='20'%20fill='%23fff'/%3e%3crect%20x='284'%20y='226'%20width='66'%20height='58'%20rx='13'%20fill='url(%23pv)'/%3e%3c/svg%3e");
 		const storyStore = useStoryStore();
 		const stats = computed(() => {
 			let storyCount = 0;

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

@@ -1,7 +1,7 @@
 import { customLogos, povesteConfig } from "../../util/config.js";
 import { isDark } from "../../util/dark.js";
-import poveste_text_dark_default from "../../assets/poveste-text-dark.js";
-import poveste_text_default from "../../assets/poveste-text.js";
+import "../../assets/poveste-text-dark.js";
+import "../../assets/poveste-text.js";
 import { computed, createElementBlock, defineComponent, openBlock } from "@poveste/vendors/vue";
 //#region src/app/components/app/AppLogo.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["src", "alt"];
@@ -9,8 +9,8 @@ var AppLogo_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 	__name: "AppLogo",
 	setup(__props) {
 		const logoUrl = computed(() => {
-			if (isDark.value) return povesteConfig.theme.logo?.dark ? customLogos?.dark ?? "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODcwIDUxMiIgZmlsbD0ibm9uZSI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InB2dyIgeDE9Ijk2IiB5MT0iNDE2IiB4Mj0iNDE2IiB5Mj0iOTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMjRDNTZBIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzE3QTZDNiIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHJlY3QgeD0iMTYiIHk9IjE2IiB3aWR0aD0iNDgwIiBoZWlnaHQ9IjQ4MCIgcng9IjExMiIgZmlsbD0idXJsKCNwdncpIi8+CiAgPHJlY3QgeD0iMTQwIiB5PSIxNDIiIHdpZHRoPSIyMzIiIGhlaWdodD0iNDQiIHJ4PSIxNiIgZmlsbD0iI2ZmZiIvPgogIDxyZWN0IHg9IjE1MSIgeT0iMjE3IiB3aWR0aD0iODgiIGhlaWdodD0iMTQ2IiByeD0iOSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIyIi8+CiAgPHJlY3QgeD0iMTcyIiB5PSIyNDQiIHdpZHRoPSIzMCIgaGVpZ2h0PSI5MiIgcng9IjEzIiBmaWxsPSIjZmZmIi8+CiAgPHJlY3QgeD0iMjYyIiB5PSIyMDYiIHdpZHRoPSIxMTAiIGhlaWdodD0iMTY4IiByeD0iMjAiIGZpbGw9IiNmZmYiLz4KICA8cmVjdCB4PSIyODQiIHk9IjIyNiIgd2lkdGg9IjY2IiBoZWlnaHQ9IjU4IiByeD0iMTMiIGZpbGw9InVybCgjcHZ3KSIvPgogIDx0ZXh0IHg9IjY3NiIgeT0iMjU2IiBkb21pbmFudC1iYXNlbGluZT0iY2VudHJhbCIgZm9udC1mYW1pbHk9InVpLXNhbnMtc2VyaWYsIHN5c3RlbS11aSwgLWFwcGxlLXN5c3RlbSwgJ1NlZ29lIFVJJywgUm9ib3RvLCBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjMyMCIgZm9udC13ZWlnaHQ9IjQwMCIgbGV0dGVyLXNwYWNpbmc9Ii00IiBmaWxsPSIjZjhmYWZjIj5Qb3Zlc3RlPC90ZXh0Pgo8L3N2Zz4K" : poveste_text_dark_default;
-			return povesteConfig.theme.logo?.light ? customLogos?.light ?? "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODcwIDUxMiIgZmlsbD0ibm9uZSI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InB2dyIgeDE9Ijk2IiB5MT0iNDE2IiB4Mj0iNDE2IiB5Mj0iOTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMjRDNTZBIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzE3QTZDNiIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHJlY3QgeD0iMTYiIHk9IjE2IiB3aWR0aD0iNDgwIiBoZWlnaHQ9IjQ4MCIgcng9IjExMiIgZmlsbD0idXJsKCNwdncpIi8+CiAgPHJlY3QgeD0iMTQwIiB5PSIxNDIiIHdpZHRoPSIyMzIiIGhlaWdodD0iNDQiIHJ4PSIxNiIgZmlsbD0iI2ZmZiIvPgogIDxyZWN0IHg9IjE1MSIgeT0iMjE3IiB3aWR0aD0iODgiIGhlaWdodD0iMTQ2IiByeD0iOSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIyIi8+CiAgPHJlY3QgeD0iMTcyIiB5PSIyNDQiIHdpZHRoPSIzMCIgaGVpZ2h0PSI5MiIgcng9IjEzIiBmaWxsPSIjZmZmIi8+CiAgPHJlY3QgeD0iMjYyIiB5PSIyMDYiIHdpZHRoPSIxMTAiIGhlaWdodD0iMTY4IiByeD0iMjAiIGZpbGw9IiNmZmYiLz4KICA8cmVjdCB4PSIyODQiIHk9IjIyNiIgd2lkdGg9IjY2IiBoZWlnaHQ9IjU4IiByeD0iMTMiIGZpbGw9InVybCgjcHZ3KSIvPgogIDx0ZXh0IHg9IjY3NiIgeT0iMjU2IiBkb21pbmFudC1iYXNlbGluZT0iY2VudHJhbCIgZm9udC1mYW1pbHk9InVpLXNhbnMtc2VyaWYsIHN5c3RlbS11aSwgLWFwcGxlLXN5c3RlbSwgJ1NlZ29lIFVJJywgUm9ib3RvLCBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjMyMCIgZm9udC13ZWlnaHQ9IjQwMCIgbGV0dGVyLXNwYWNpbmc9Ii00IiBmaWxsPSIjMWUyOTNiIj5Qb3Zlc3RlPC90ZXh0Pgo8L3N2Zz4K" : poveste_text_default;
+			if (isDark.value) return customLogos?.dark ?? "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODcwIDUxMiIgZmlsbD0ibm9uZSI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InB2dyIgeDE9Ijk2IiB5MT0iNDE2IiB4Mj0iNDE2IiB5Mj0iOTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMjRDNTZBIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzE3QTZDNiIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHJlY3QgeD0iMTYiIHk9IjE2IiB3aWR0aD0iNDgwIiBoZWlnaHQ9IjQ4MCIgcng9IjExMiIgZmlsbD0idXJsKCNwdncpIi8+CiAgPHJlY3QgeD0iMTQwIiB5PSIxNDIiIHdpZHRoPSIyMzIiIGhlaWdodD0iNDQiIHJ4PSIxNiIgZmlsbD0iI2ZmZiIvPgogIDxyZWN0IHg9IjE1MSIgeT0iMjE3IiB3aWR0aD0iODgiIGhlaWdodD0iMTQ2IiByeD0iOSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIyIi8+CiAgPHJlY3QgeD0iMTcyIiB5PSIyNDQiIHdpZHRoPSIzMCIgaGVpZ2h0PSI5MiIgcng9IjEzIiBmaWxsPSIjZmZmIi8+CiAgPHJlY3QgeD0iMjYyIiB5PSIyMDYiIHdpZHRoPSIxMTAiIGhlaWdodD0iMTY4IiByeD0iMjAiIGZpbGw9IiNmZmYiLz4KICA8cmVjdCB4PSIyODQiIHk9IjIyNiIgd2lkdGg9IjY2IiBoZWlnaHQ9IjU4IiByeD0iMTMiIGZpbGw9InVybCgjcHZ3KSIvPgogIDx0ZXh0IHg9IjY3NiIgeT0iMjU2IiBkb21pbmFudC1iYXNlbGluZT0iY2VudHJhbCIgZm9udC1mYW1pbHk9InVpLXNhbnMtc2VyaWYsIHN5c3RlbS11aSwgLWFwcGxlLXN5c3RlbSwgJ1NlZ29lIFVJJywgUm9ib3RvLCBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjMyMCIgZm9udC13ZWlnaHQ9IjQwMCIgbGV0dGVyLXNwYWNpbmc9Ii00IiBmaWxsPSIjZjhmYWZjIj5Qb3Zlc3RlPC90ZXh0Pgo8L3N2Zz4K";
+			return customLogos?.light ?? "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODcwIDUxMiIgZmlsbD0ibm9uZSI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InB2dyIgeDE9Ijk2IiB5MT0iNDE2IiB4Mj0iNDE2IiB5Mj0iOTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMjRDNTZBIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzE3QTZDNiIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHJlY3QgeD0iMTYiIHk9IjE2IiB3aWR0aD0iNDgwIiBoZWlnaHQ9IjQ4MCIgcng9IjExMiIgZmlsbD0idXJsKCNwdncpIi8+CiAgPHJlY3QgeD0iMTQwIiB5PSIxNDIiIHdpZHRoPSIyMzIiIGhlaWdodD0iNDQiIHJ4PSIxNiIgZmlsbD0iI2ZmZiIvPgogIDxyZWN0IHg9IjE1MSIgeT0iMjE3IiB3aWR0aD0iODgiIGhlaWdodD0iMTQ2IiByeD0iOSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIyIi8+CiAgPHJlY3QgeD0iMTcyIiB5PSIyNDQiIHdpZHRoPSIzMCIgaGVpZ2h0PSI5MiIgcng9IjEzIiBmaWxsPSIjZmZmIi8+CiAgPHJlY3QgeD0iMjYyIiB5PSIyMDYiIHdpZHRoPSIxMTAiIGhlaWdodD0iMTY4IiByeD0iMjAiIGZpbGw9IiNmZmYiLz4KICA8cmVjdCB4PSIyODQiIHk9IjIyNiIgd2lkdGg9IjY2IiBoZWlnaHQ9IjU4IiByeD0iMTMiIGZpbGw9InVybCgjcHZ3KSIvPgogIDx0ZXh0IHg9IjY3NiIgeT0iMjU2IiBkb21pbmFudC1iYXNlbGluZT0iY2VudHJhbCIgZm9udC1mYW1pbHk9InVpLXNhbnMtc2VyaWYsIHN5c3RlbS11aSwgLWFwcGxlLXN5c3RlbSwgJ1NlZ29lIFVJJywgUm9ib3RvLCBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjMyMCIgZm9udC13ZWlnaHQ9IjQwMCIgbGV0dGVyLXNwYWNpbmc9Ii00IiBmaWxsPSIjMWUyOTNiIj5Qb3Zlc3RlPC90ZXh0Pgo8L3N2Zz4K";
 		});
 		const altText = computed(() => `${povesteConfig.theme.title} logo`);
 		return (_ctx, _cache) => {

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

@@ -1,13 +1,17 @@
 import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
-import { createElementBlock, openBlock, renderSlot } from "@poveste/vendors/vue";
+/* empty css                                               */
+import { createBlock, openBlock, renderSlot, resolveDynamicComponent, withCtx } from "@poveste/vendors/vue";
 //#region src/app/components/app/TopBarChipItem.vue
 var _sfc_main = {};
-var _hoisted_1 = ["role"];
 function _sfc_render(_ctx, _cache) {
-	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);
+	return openBlock(), createBlock(resolveDynamicComponent(_ctx.$attrs["href"] ? "a" : "button"), {
+		type: _ctx.$attrs["href"] ? void 0 : "button",
+		class: "poveste-top-bar-chip-item",
+		"data-slot": "top-bar-chip-item"
+	}, {
+		default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+		_: 3
+	}, 8, ["type"]);
 }
 var TopBarChipItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
 //#endregion

package/dist/bundled/components/layout/LayoutItem.js

@@ -1,4 +1,5 @@
 import LayoutItem_vue_vue_type_script_setup_true_lang_default from "./LayoutItem.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                           */
 //#region src/app/components/layout/LayoutItem.vue
 var LayoutItem_default = LayoutItem_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1,5 +1,4 @@
-import BaseListItem_default from "../base/BaseListItem.js";
-import { createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "@poveste/vendors/vue";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 //#region src/app/components/layout/LayoutItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex-1" };
@@ -14,27 +13,25 @@ var LayoutItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 	emits: ["click"],
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(BaseListItem_default, {
-				"is-active": __props.isActive,
-				class: "px-6 py-4 gap-4",
-				onNavigate: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click"))
-			}, {
-				default: withCtx(() => [
-					createVNode(unref(Icon), {
-						class: "w-4 h-4 flex-none",
-						icon: __props.icon,
-						"aria-hidden": "true"
-					}, null, 8, ["icon"]),
-					createElementVNode("span", _hoisted_1, toDisplayString(__props.title), 1),
-					__props.stateIcon ? (openBlock(), createBlock(unref(Icon), {
-						key: 0,
-						class: "w-4 h-4 flex-none opacity-70",
-						icon: __props.stateIcon,
-						"aria-hidden": "true"
-					}, null, 8, ["icon"])) : createCommentVNode("", true)
-				]),
-				_: 1
-			}, 8, ["is-active"]);
+			return openBlock(), createElementBlock("button", {
+				type: "button",
+				class: normalizeClass(["poveste-layout-item", { active: __props.isActive }]),
+				"data-slot": "layout-item",
+				onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click"))
+			}, [
+				createVNode(unref(Icon), {
+					class: "w-4 h-4 flex-none",
+					icon: __props.icon,
+					"aria-hidden": "true"
+				}, null, 8, ["icon"]),
+				createElementVNode("span", _hoisted_1, toDisplayString(__props.title), 1),
+				__props.stateIcon ? (openBlock(), createBlock(unref(Icon), {
+					key: 0,
+					class: "w-4 h-4 flex-none opacity-70",
+					icon: __props.stateIcon,
+					"aria-hidden": "true"
+				}, null, 8, ["icon"])) : createCommentVNode("", true)
+			], 2);
 		};
 	}
 });

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

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+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-3b01b847"]]);
+//#endregion
+export { ComponentDocs_default as default };

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

@@ -0,0 +1,164 @@
+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 = ["open", "data-component"];
+var _hoisted_3 = { "data-slot": "component-name" };
+var _hoisted_4 = {
+	key: 0,
+	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_7 = ["data-prop"];
+var _hoisted_8 = {
+	key: 0,
+	title: "Required",
+	"data-slot": "required"
+};
+var _hoisted_9 = ["title"];
+var _hoisted_10 = { key: 0 };
+var _hoisted_11 = ["title"];
+var _hoisted_12 = {
+	key: 0,
+	"data-slot": "deprecated"
+};
+var _hoisted_13 = ["href"];
+var _hoisted_14 = {
+	key: 1,
+	"data-slot": "see"
+};
+var _hoisted_15 = {
+	key: 1,
+	"data-slot": "example"
+};
+var _hoisted_16 = {
+	key: 1,
+	"data-slot": "slots"
+};
+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_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: {},
+		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(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("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"),
+						createElementVNode("th", null, "Description")
+					])], -1)), createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(component.doc.props, (prop) => {
+						return openBlock(), createElementBlock("tr", {
+							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_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_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_11)) : createCommentVNode("", true)]),
+							createElementVNode("td", null, [
+								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", {
+										key: 0,
+										href: unref(tagHref)(tag.text ?? ""),
+										target: "_blank",
+										rel: "noopener",
+										"data-slot": "see"
+									}, 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_15, [createElementVNode("code", null, toDisplayString(unref(tagText)(prop.tags, "example")), 1)])) : createCommentVNode("", true)
+							])
+						], 8, _hoisted_7);
+					}), 128))])])) : createCommentVNode("", true),
+					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(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 && !slot.props?.length ? (openBlock(), createElementBlock("code", _hoisted_18, toDisplayString(slot.type), 1)) : createCommentVNode("", true)]),
+							createElementVNode("td", null, toDisplayString(slot.description), 1)
+						], 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_20, [_cache[3] || (_cache[3] = createElementVNode("thead", null, [createElementVNode("tr", null, [
+						createElementVNode("th", null, "Event"),
+						createElementVNode("th", null, "Payload"),
+						createElementVNode("th", null, "Description")
+					])], -1)), createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(component.doc.events, (event) => {
+						return openBlock(), createElementBlock("tr", {
+							key: event.name,
+							"data-event": event.name
+						}, [
+							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_21);
+					}), 128))])])) : createCommentVNode("", true)
+				], 64)) : createCommentVNode("", true)], 8, _hoisted_2);
+			}), 128))]);
+		};
+	}
+});
+//#endregion
+export { ComponentDocs_vue_vue_type_script_setup_true_lang_default as default };