@poveste/app 0.3.0 → 0.3.2

package/dist/bundled/app.css

@@ -54,6 +54,32 @@
 }
 }
 @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>';
+  initial-value: 0;
+  inherits: false;
+}
+/* Layered so a `transition-none` utility can still win — see #104. */
+@layer components {
+.poveste-home-counter-value {
+&[data-v-5760c084] {
+    counter-reset: poveste-count var(--poveste-count, 0);
+
+    /* Opt in, so an engine without the query animates nothing. */
+}
+&[data-v-5760c084]::after {
+      content: counter(poveste-count);
+}
+@media (prefers-reduced-motion: no-preference) {
+&[data-v-5760c084] {
+      transition: --poveste-count 700ms ease-out 100ms;
+}
+}
+}
+}
+}
+@scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
 .base-empty[data-v-57f8bebf]:not(.no-animation) {
   animation: base-empty-57f8bebf .15s .2s both;
 }

package/dist/bundled/components/HomeView.vue_vue_type_script_setup_true_lang.js

@@ -6,7 +6,11 @@ import { computed, createElementBlock, createElementVNode, createVNode, defineCo
 //#region src/app/components/HomeView.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-home-view flex md:flex-col gap-12 items-center justify-center h-full" };
 var _hoisted_2 = ["src"];
-var _hoisted_3 = { class: "flex !md:flex-col flex-wrap justify-evenly gap-2 px-4 py-2 bg-gray-100 dark:bg-gray-750 rounded border border-gray-500/30" };
+var _hoisted_3 = {
+	role: "group",
+	"aria-label": "Book contents",
+	class: "flex !md:flex-col flex-wrap justify-evenly gap-2 px-4 py-2 bg-gray-100 dark:bg-gray-750 rounded border border-gray-500/30"
+};
 var HomeView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "HomeView",
 	setup(__props) {

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

@@ -1,5 +1,7 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
 import HomeCounter_vue_vue_type_script_setup_true_lang_default from "./HomeCounter.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                            */
 //#region src/app/components/app/HomeCounter.vue
-var HomeCounter_default = HomeCounter_vue_vue_type_script_setup_true_lang_default;
+var HomeCounter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(HomeCounter_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-5760c084"]]);
 //#endregion
 export { HomeCounter_default as default };

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

@@ -1,10 +1,10 @@
-import { createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, toDisplayString, unref } from "@poveste/vendors/vue";
+import { createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeStyle, onMounted, openBlock, ref, toDisplayString, unref, useTemplateRef, watch } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 //#region src/app/components/app/HomeCounter.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "p-2 flex items-center gap-x-2" };
-var _hoisted_2 = { class: "flex flex-col leading-none" };
-var _hoisted_3 = { class: "text-primary-500 min-w-[80px] font-bold" };
-var _hoisted_4 = { class: "text-sm text-gray-900 dark:text-gray-100" };
+var _hoisted_1 = { class: "poveste-home-counter p-2 flex items-center gap-x-2" };
+var _hoisted_2 = { class: "flex flex-col leading-none m-0" };
+var _hoisted_3 = { class: "order-2 text-sm text-gray-900 dark:text-gray-100" };
+var _hoisted_4 = { class: "sr-only ms-0" };
 var HomeCounter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "HomeCounter",
 	props: {
@@ -23,11 +23,31 @@ var HomeCounter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 	},
 	setup(__props) {
 		const props = __props;
+		const displayCount = ref(0);
+		const valueEl = useTemplateRef("valueEl");
+		onMounted(async () => {
+			await nextTick();
+			valueEl.value?.offsetWidth;
+			displayCount.value = props.count;
+		});
+		watch(() => props.count, (value) => {
+			displayCount.value = value;
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(Icon), {
 				icon: props.icon,
 				class: "text-2xl text-gray-700 dark:text-gray-300 flex-none"
-			}, null, 8, ["icon"]), createElementVNode("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(__props.count), 1), createElementVNode("span", _hoisted_4, toDisplayString(__props.title), 1)])]);
+			}, null, 8, ["icon"]), createElementVNode("dl", _hoisted_2, [
+				createElementVNode("dt", _hoisted_3, toDisplayString(__props.title), 1),
+				createElementVNode("dd", {
+					ref_key: "valueEl",
+					ref: valueEl,
+					class: "poveste-home-counter-value order-1 ms-0 text-primary-500 min-w-[80px] font-bold",
+					style: normalizeStyle({ "--poveste-count": displayCount.value }),
+					"aria-hidden": "true"
+				}, null, 4),
+				createElementVNode("dd", _hoisted_4, toDisplayString(__props.count), 1)
+			])]);
 		};
 	}
 });

package/dist/style.css

@@ -424,6 +424,17 @@
     .visible {
       visibility: visible;
     }
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border-width: 0;
+    }
     .absolute {
       position: absolute;
     }
@@ -493,6 +504,12 @@
     .z-100 {
       z-index: 100;
     }
+    .order-1 {
+      order: 1;
+    }
+    .order-2 {
+      order: 2;
+    }
     .container {
       width: 100%;
       @media (width >= 40rem) {
@@ -547,6 +564,9 @@
     .my-8 {
       margin-block: calc(var(--spacing) * 8);
     }
+    .ms-0 {
+      margin-inline-start: 0px;
+    }
     .prose {
       color: var(--tw-prose-body);
       max-width: 65ch;
@@ -995,6 +1015,9 @@
     .block {
       display: block;
     }
+    .contents {
+      display: contents;
+    }
     .flex {
       display: flex;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/app",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Pre-bundled UI for Poveste",
   "author": {
     "name": "Sorin Gitlan"
@@ -30,9 +30,9 @@
   "dependencies": {
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
-    "@poveste/controls": "^0.3.0",
-    "@poveste/shared": "^0.3.0",
-    "@poveste/vendors": "^0.3.0"
+    "@poveste/shared": "^0.3.2",
+    "@poveste/controls": "^0.3.2",
+    "@poveste/vendors": "^0.3.2"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.3",

package/src/app/components/HomeView.vue

@@ -40,7 +40,12 @@ const stats = computed(() => {
       alt="Logo"
       class="w-64 h-64 opacity-25 mb-8 hidden md:block"
     >
-    <div class="flex !md:flex-col flex-wrap justify-evenly gap-2 px-4 py-2 bg-gray-100 dark:bg-gray-750 rounded border border-gray-500/30">
+    <!-- Not a live region: counts move repeatedly while stories are collected. -->
+    <div
+      role="group"
+      aria-label="Book contents"
+      class="flex !md:flex-col flex-wrap justify-evenly gap-2 px-4 py-2 bg-gray-100 dark:bg-gray-750 rounded border border-gray-500/30"
+    >
       <HomeCounter
         title="Stories"
         icon="carbon:cube"

package/src/app/components/app/HomeCounter.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
+import { nextTick, onMounted, ref, useTemplateRef, watch } from 'vue'
 
 const props = defineProps({
   icon: {
@@ -15,25 +16,70 @@ const props = defineProps({
     default: 0,
   },
 })
+
+// Starts at 0 so the transition has a value to animate from.
+const displayCount = ref(0)
+const valueEl = useTemplateRef<HTMLElement>('valueEl')
+
+onMounted(async () => {
+  await nextTick()
+  // Forced read, not rAF: rAF never fires in a background tab, leaving the
+  // count at 0. This resolves the starting value whether or not we're visible.
+  void valueEl.value?.offsetWidth
+  displayCount.value = props.count
+})
+
+watch(() => props.count, (value) => {
+  displayCount.value = value
+})
 </script>
 
 <template>
-  <div class="p-2 flex items-center gap-x-2">
+  <div class="poveste-home-counter p-2 flex items-center gap-x-2">
     <Icon
       :icon="props.icon"
       class="text-2xl text-gray-700 dark:text-gray-300 flex-none"
     />
-    <div class="flex flex-col leading-none">
-      <span
-        class="text-primary-500 min-w-[80px] font-bold"
-      >
-        {{ count }}
-      </span>
-      <span
-        class="text-sm text-gray-900 dark:text-gray-100"
-      >
+    <!-- `order` keeps the number on top without putting `dd` before its `dt`. -->
+    <dl class="flex flex-col leading-none m-0">
+      <dt class="order-2 text-sm text-gray-900 dark:text-gray-100">
         {{ title }}
-      </span>
-    </div>
+      </dt>
+      <!-- Generated content, so hidden from AT; the real value follows. -->
+      <dd
+        ref="valueEl"
+        class="poveste-home-counter-value order-1 ms-0 text-primary-500 min-w-[80px] font-bold"
+        :style="{ '--poveste-count': displayCount }"
+        aria-hidden="true"
+      />
+      <dd class="sr-only ms-0">
+        {{ count }}
+      </dd>
+    </dl>
   </div>
 </template>
+
+<style scoped>
+/* Outside the layer — registration is document-global, not cascaded. */
+@property --poveste-count {
+  syntax: '<integer>';
+  initial-value: 0;
+  inherits: false;
+}
+
+/* Layered so a `transition-none` utility can still win — see #104. */
+@layer components {
+  .poveste-home-counter-value {
+    counter-reset: poveste-count var(--poveste-count, 0);
+
+    &::after {
+      content: counter(poveste-count);
+    }
+
+    /* Opt in, so an engine without the query animates nothing. */
+    @media (prefers-reduced-motion: no-preference) {
+      transition: --poveste-count 700ms ease-out 100ms;
+    }
+  }
+}
+</style>