@poveste/app 0.19.0 → 0.20.0

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

@@ -1,5 +1,5 @@
+import { loadClientPlugin } from "../../util/client-plugin.js";
 import { createBlock, createCommentVNode, defineComponent, markRaw, mergeProps, openBlock, ref, resolveDynamicComponent, watchEffect } from "@poveste/vendors/vue";
-import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
 var GenericMountStory_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "GenericMountStory",
@@ -8,12 +8,8 @@ var GenericMountStory_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		const props = __props;
 		const mountComponent = ref(null);
 		watchEffect(async () => {
-			const supportPluginId = props.story.file?.supportPluginId;
-			const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : void 0;
-			if (clientPlugin) {
-				const pluginModule = await clientPlugin();
-				mountComponent.value = markRaw(pluginModule.MountStory);
-			}
+			const pluginModule = await loadClientPlugin(props.story.file?.supportPluginId);
+			if (pluginModule) mountComponent.value = markRaw(pluginModule.MountStory);
 		});
 		return (_ctx, _cache) => {
 			return mountComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(mountComponent.value), mergeProps({

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

@@ -1,5 +1,5 @@
+import { loadClientPlugin } from "../../util/client-plugin.js";
 import { createBlock, createCommentVNode, defineComponent, markRaw, mergeProps, openBlock, ref, resolveDynamicComponent, watchEffect } from "@poveste/vendors/vue";
-import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
 var GenericRenderStory_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "GenericRenderStory",
@@ -8,15 +8,8 @@ var GenericRenderStory_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		const props = __props;
 		const mountComponent = ref(null);
 		watchEffect(async () => {
-			const supportPluginId = props.story.file?.supportPluginId;
-			const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : void 0;
-			if (clientPlugin) try {
-				const pluginModule = await clientPlugin();
-				mountComponent.value = markRaw(pluginModule.RenderStory);
-			} catch (e) {
-				console.error(e);
-				throw e;
-			}
+			const pluginModule = await loadClientPlugin(props.story.file?.supportPluginId);
+			if (pluginModule) mountComponent.value = markRaw(pluginModule.RenderStory);
 		});
 		return (_ctx, _cache) => {
 			return mountComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(mountComponent.value), mergeProps({

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

@@ -15,7 +15,6 @@ var DevOnlyToolbarOpenInEditor_vue_vue_type_script_setup_true_lang_default = /*@
 			return openBlock(), createBlock(unref(HstTooltip), { content: __props.tooltip }, {
 				default: withCtx(() => [createVNode(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/router.js

@@ -8,17 +8,20 @@ function createRouterHistory() {
 		default: return createWebHistory(base);
 	}
 }
-var router = createRouter({
-	history: createRouterHistory(),
-	routes: [{
-		path: "/",
-		name: "home",
-		component: () => import("./components/HomeView.js")
-	}, {
-		path: "/story/:storyId",
-		name: "story",
-		component: () => import("./components/story/StoryView.js")
-	}]
-});
+function newRouter() {
+	return createRouter({
+		history: createRouterHistory(),
+		routes: [{
+			path: "/",
+			name: "home",
+			component: () => import("./components/HomeView.js")
+		}, {
+			path: "/story/:storyId",
+			name: "story",
+			component: () => import("./components/story/StoryView.js")
+		}]
+	});
+}
+var router = import.meta.hot ? import.meta.hot.data.router ??= newRouter() : newRouter();
 //#endregion
 export { base, router };

package/dist/bundled/util/client-plugin.js

@@ -0,0 +1,22 @@
+import { occupant } from "./occupant.js";
+import { reportStoryError, toStoryError } from "@poveste/shared";
+import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
+//#region src/app/util/client-plugin.ts
+async function loadClientPlugin(supportPluginId) {
+	const load = supportPluginId ? clientSupportPlugins[supportPluginId] : void 0;
+	if (!load) return;
+	try {
+		return await load();
+	} catch (error) {
+		const { message, stack } = toStoryError(error);
+		const reported = Object.assign(/* @__PURE__ */ new Error(`The story renderer failed to load, and it imports the setup file: ${message}`), { stack });
+		reportStoryError(reported, {
+			storyId: occupant.storyId ?? void 0,
+			variantId: occupant.variantId ?? void 0
+		});
+		console.error(error);
+		return;
+	}
+}
+//#endregion
+export { loadClientPlugin };

package/dist/bundled/util/component-docs-data.js

@@ -0,0 +1 @@
+export { componentDocs } from "virtual:$poveste-component-docs";

package/dist/bundled/util/component-docs.js

@@ -0,0 +1,57 @@
+import { onBeforeUnmount, ref, watch } from "@poveste/vendors/vue";
+//#region src/app/util/component-docs.ts
+function toEntries(result) {
+	return Object.entries(result.components).map(([file, { doc, error }]) => ({
+		file,
+		name: file.split("/").pop().replace(/\.[^.]+$/, ""),
+		...doc ? { doc } : {},
+		...error ? { error } : {}
+	}));
+}
+function tagText(tags, name) {
+	const tag = tags.find((tag) => tag.name === name);
+	return tag ? tag.text ?? "" : void 0;
+}
+/** A `@see` or `@link` points somewhere only when it carries a URL. */
+function tagHref(text) {
+	return /https?:\/\/\S+/.exec(text)?.[0];
+}
+/**
+* The components a story imports, documented. In dev they are asked of the server
+* when this is first used, which is what starts extraction at all (#1159); in a
+* built book they come from what `poveste build` extracted.
+*/
+function useComponentDocs(storyId) {
+	const components = ref();
+	const hot = import.meta.hot;
+	if (!hot) {
+		watch(storyId, async (id) => {
+			const { componentDocs } = await import("./component-docs-data.js");
+			const docs = id ? componentDocs[id] : void 0;
+			components.value = id && docs ? toEntries({
+				storyId: id,
+				components: docs
+			}) : void 0;
+		}, { immediate: true });
+		return { components };
+	}
+	function ask() {
+		if (storyId.value) hot.send("poveste:docgen-request", { storyId: storyId.value });
+	}
+	function onResult(result) {
+		if (result.storyId === storyId.value) components.value = toEntries(result);
+	}
+	hot.on("poveste:docgen-result", onResult);
+	hot.on("poveste:docgen-stale", ask);
+	onBeforeUnmount(() => {
+		hot.off("poveste:docgen-result", onResult);
+		hot.off("poveste:docgen-stale", ask);
+	});
+	watch(storyId, () => {
+		components.value = void 0;
+		ask();
+	}, { immediate: true });
+	return { components };
+}
+//#endregion
+export { tagHref, tagText, toEntries, useComponentDocs };

package/dist/bundled/util/docs.js

@@ -1,5 +1,5 @@
-import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
 import { unindent } from "@poveste/shared";
+import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
 //#region src/app/util/docs.ts
 /** What the variant declares, or what its framework generates from it; `undefined` when neither has anything. */
 async function getDynamicSourceCode(variant, generate) {

package/dist/bundled/util/icons.generated.js

@@ -56,7 +56,7 @@ var iconCollections = [
 			"view-off": { "body": "<path fill=\"currentColor\" d=\"m5.24 22.51l1.43-1.42A14.06 14.06 0 0 1 3.07 16C5.1 10.93 10.7 7 16 7a12.4 12.4 0 0 1 4 .72l1.55-1.56A14.7 14.7 0 0 0 16 5A16.69 16.69 0 0 0 1.06 15.66a1 1 0 0 0 0 .68a16 16 0 0 0 4.18 6.17\"/><path fill=\"currentColor\" d=\"M12 15.73a4 4 0 0 1 3.7-3.7l1.81-1.82a6 6 0 0 0-7.33 7.33Zm18.94-.07a16.4 16.4 0 0 0-5.74-7.44L30 3.41L28.59 2L2 28.59L3.41 30l5.1-5.1A15.3 15.3 0 0 0 16 27a16.69 16.69 0 0 0 14.94-10.66a1 1 0 0 0 0-.68M20 16a4 4 0 0 1-6 3.44L19.44 14a4 4 0 0 1 .56 2m-4 9a13.05 13.05 0 0 1-6-1.58l2.54-2.54a6 6 0 0 0 8.35-8.35l2.87-2.87A14.54 14.54 0 0 1 28.93 16C26.9 21.07 21.3 25 16 25\"/>" },
 			"warning-alt": { "body": "<path fill=\"currentColor\" d=\"M16 23a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 16 23m-1-11h2v9h-2z\"/><path fill=\"currentColor\" d=\"M29 30H3a1 1 0 0 1-.887-1.461l13-25a1 1 0 0 1 1.774 0l13 25A1 1 0 0 1 29 30M4.65 28h22.7l.001-.003L16.002 6.17h-.004L4.648 27.997Z\"/>" }
 		},
-		"lastModified": 1789034045,
+		"lastModified": 1790421921,
 		"aliases": { "software-resource-resource": { "parent": "software-resource-reference" } },
 		"width": 32,
 		"height": 32
@@ -75,7 +75,7 @@ var iconCollections = [
 				"height": 16
 			}
 		},
-		"lastModified": 1789279072,
+		"lastModified": 1791785206,
 		"width": 20,
 		"height": 20
 	},

package/dist/bundled/util/mapping.js

@@ -46,11 +46,7 @@ function mapVariant(variant, existingVariant) {
 			_hPropDefs: {}
 		}),
 		setupApp: void 0,
-		slots: () => ({
-			default: void 0,
-			controls: void 0,
-			source: void 0
-		}),
+		slots: () => ({}),
 		previewReady: false
 	};
 	return result;

package/dist/style.css

@@ -759,6 +759,8 @@
       --color-red-600: oklch(57.7% 0.245 27.325);
       --color-red-700: oklch(50.5% 0.213 27.518);
       --color-orange-500: oklch(70.5% 0.213 47.604);
+      --color-amber-400: oklch(82.8% 0.189 84.429);
+      --color-amber-600: oklch(66.6% 0.179 58.318);
       --color-gray-50: var(--_poveste-color-gray-50, #fafafa);
       --color-gray-100: var(--_poveste-color-gray-100, #f4f4f5);
       --color-gray-200: var(--_poveste-color-gray-200, #e4e4e7);
@@ -780,8 +782,6 @@
       --text-lg--line-height: calc(1.75 / 1.125);
       --text-2xl: 1.5rem;
       --text-2xl--line-height: calc(2 / 1.5);
-      --text-5xl: 3rem;
-      --text-5xl--line-height: 1;
       --font-weight-medium: 500;
       --font-weight-bold: 700;
       --tracking-wide: 0.025em;
@@ -1437,6 +1437,9 @@
     .inline-flex {
       display: inline-flex;
     }
+    .table {
+      display: table;
+    }
     .h-2 {
       height: calc(var(--spacing) * 2);
     }
@@ -1467,12 +1470,6 @@
     .h-16 {
       height: calc(var(--spacing) * 16);
     }
-    .h-20 {
-      height: calc(var(--spacing) * 20);
-    }
-    .h-32 {
-      height: calc(var(--spacing) * 32);
-    }
     .h-48 {
       height: calc(var(--spacing) * 48);
     }
@@ -1497,9 +1494,6 @@
     .h-\[51px\] {
       height: 51px;
     }
-    .h-\[100px\] {
-      height: 100px;
-    }
     .h-fit {
       height: fit-content;
     }
@@ -1560,9 +1554,6 @@
     .w-28 {
       width: calc(var(--spacing) * 28);
     }
-    .w-32 {
-      width: calc(var(--spacing) * 32);
-    }
     .w-64 {
       width: calc(var(--spacing) * 64);
     }
@@ -1841,10 +1832,6 @@
       border-style: var(--tw-border-style);
       border-width: 0px;
     }
-    .border-2 {
-      border-style: var(--tw-border-style);
-      border-width: 2px;
-    }
     .border-8 {
       border-style: var(--tw-border-style);
       border-width: 8px;
@@ -1971,12 +1958,6 @@
         background-color: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
       }
     }
-    .bg-gray-500\/50 {
-      background-color: var(--color-gray-500);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-gray-500) 50%, transparent);
-      }
-    }
     .bg-primary-50 {
       background-color: var(--color-primary-50);
     }
@@ -2149,10 +2130,6 @@
       font-size: var(--text-2xl);
       line-height: var(--tw-leading, var(--text-2xl--line-height));
     }
-    .text-5xl {
-      font-size: var(--text-5xl);
-      line-height: var(--tw-leading, var(--text-5xl--line-height));
-    }
     .text-lg {
       font-size: var(--text-lg);
       line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -2558,12 +2535,6 @@
         background-color: color-mix(in oklab, var(--color-gray-600) 50%, transparent);
       }
     }
-    .active\:bg-white\/70:active {
-      background-color: color-mix(in srgb, #fff 70%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
-      }
-    }
     @media (width >= 40rem) {
       .sm\:h-4 {
         height: calc(var(--spacing) * 4);
@@ -2656,12 +2627,6 @@
         border-color: color-mix(in oklab, var(--color-white) 25%, transparent);
       }
     }
-    .dark\:bg-black:where(.ptw-dark, .ptw-dark *) {
-      background-color: var(--color-black);
-    }
-    .dark\:bg-gray-600:where(.ptw-dark, .ptw-dark *) {
-      background-color: var(--color-gray-600);
-    }
     .dark\:bg-gray-700:where(.ptw-dark, .ptw-dark *) {
       background-color: var(--color-gray-700);
     }
@@ -2804,12 +2769,6 @@
     .dark\:focus\:border-primary-500:where(.ptw-dark, .ptw-dark *):focus {
       border-color: var(--color-primary-500);
     }
-    .dark\:active\:bg-white\/15:where(.ptw-dark, .ptw-dark *):active {
-      background-color: color-mix(in srgb, #fff 15%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
-      }
-    }
     .poveste-story-list-folder-button:hover .\[\.poveste-story-list-folder-button\:hover_\&\]\:opacity-100 {
       opacity: 100%;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/app",
   "type": "module",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "Pre-bundled UI for Poveste",
   "author": {
     "name": "Sorin Gitlan",
@@ -36,16 +36,16 @@
     "node": ">=22.22.2"
   },
   "dependencies": {
-    "@poveste/controls": "^0.19.0",
-    "@poveste/shared": "^0.19.0",
-    "@poveste/vendors": "^0.19.0",
+    "@poveste/controls": "^0.20.0",
+    "@poveste/shared": "^0.20.0",
+    "@poveste/vendors": "^0.20.0",
     "fuse.js": "^7.0.0",
-    "shiki": "^4.4.3"
+    "shiki": "^4.5.0"
   },
   "devDependencies": {
     "@fontsource/noto-sans-display": "^5.3.0",
-    "@iconify-json/carbon": "^1.2.27",
-    "@iconify-json/fluent": "1.2.58",
+    "@iconify-json/carbon": "^1.2.28",
+    "@iconify-json/fluent": "1.2.60",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/ri": "^1.2.10",
     "@iconify/utils": "^3.1.7",
@@ -53,11 +53,11 @@
     "@tailwindcss/postcss": "^4.3.3",
     "@tailwindcss/typography": "^0.5.20",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^26.6.3",
-    "@vitejs/plugin-vue": "^6.0.9",
+    "@types/node": "^26.6.5",
+    "@vitejs/plugin-vue": "^6.0.10",
     "@vueuse/core": "^15.0.0",
     "chokidar": "^5.0.0",
-    "concurrently": "^10.0.5",
+    "concurrently": "^10.0.6",
     "fs-extra": "^11.4.1",
     "globby": "^16.2.4",
     "pathe": "^2.0.3",
@@ -66,11 +66,11 @@
     "postcss-cli": "^12.0.0",
     "tailwindcss": "^4.3.3",
     "typescript": "6.0.3",
-    "vite": "^8.3.1",
-    "vitest": "^5.0.2",
-    "vue": "^3.5.43",
-    "vue-router": "^5.3.1",
-    "vue-tsc": "^3.3.11"
+    "vite": "^8.3.4",
+    "vitest": "^5.0.4",
+    "vue": "^3.5.44",
+    "vue-router": "^5.4.0",
+    "vue-tsc": "^3.3.13"
   },
   "scripts": {
     "build": "pnpm run icons && rimraf dist && vite build && pnpm run build:css && node ./scripts/copy.mjs",

package/src/app/components/HomeView.vue

@@ -2,10 +2,10 @@
 import { computed } from 'vue'
 import PovesteLogo from '../assets/poveste.svg'
 import { useStoryStore } from '../stores/story'
-import { customLogos, povesteConfig } from '../util/config'
+import { customLogos } from '../util/config'
 import HomeCounter from './app/HomeCounter.vue'
 
-const logoUrl = computed(() => povesteConfig.theme?.logo?.square ? customLogos?.square ?? PovesteLogo : PovesteLogo)
+const logoUrl = computed(() => customLogos?.square ?? PovesteLogo)
 const storyStore = useStoryStore()
 
 const stats = computed(() => {

package/src/app/components/app/AppLogo.vue

@@ -6,15 +6,13 @@ import PovesteLogoLight from '../../assets/poveste-text.svg'
 import { customLogos, povesteConfig } from '../../util/config'
 import { isDark } from '../../util/dark'
 
-// `theme.logo` is what the config asked for; `customLogos` is the resolved URL
-// map from the virtual module. Two objects, so a check on one narrows nothing
-// about the other — and falling back to the bundled logo beats rendering an
-// `<img>` with no `src` if they ever disagree.
+// `customLogos` holds a served URL for each logo the config names. The config's
+// own entries are paths on the machine that built the book, and are not sent (#1383).
 const logoUrl = computed(() => {
   if (isDark.value) {
-    return povesteConfig.theme.logo?.dark ? customLogos?.dark ?? PovesteLogoDark : PovesteLogoDark
+    return customLogos?.dark ?? PovesteLogoDark
   }
-  return povesteConfig.theme.logo?.light ? customLogos?.light ?? PovesteLogoLight : PovesteLogoLight
+  return customLogos?.light ?? PovesteLogoLight
 })
 
 const altText = computed(() => `${povesteConfig.theme.title} logo`)

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

@@ -1,10 +1,59 @@
 <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"
+  <!-- A link where it navigates, a button everywhere else. An `<a>` without an
+       href is not focusable, so a keyboard could not reach the chip (#1351). -->
+  <component
+    :is="$attrs['href'] ? 'a' : 'button'"
+    :type="$attrs['href'] ? undefined : 'button'"
+    class="poveste-top-bar-chip-item"
+    data-slot="top-bar-chip-item"
   >
     <slot />
-  </a>
+  </component>
 </template>
+
+<style lang="postcss">
+.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);
+    }
+  }
+}
+</style>

package/src/app/components/layout/LayoutItem.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import BaseListItem from '../base/BaseListItem.vue'
 
 defineProps<{
   title: string
@@ -15,10 +14,14 @@ defineEmits<{
 </script>
 
 <template>
-  <BaseListItem
-    :is-active="isActive"
-    class="px-6 py-4 gap-4"
-    @navigate="$emit('click')"
+  <!-- A button: `BaseListItem` is an `<a>` with no href, which a keyboard cannot
+       reach (#1351). -->
+  <button
+    type="button"
+    class="poveste-layout-item"
+    :class="{ active: isActive }"
+    data-slot="layout-item"
+    @click="$emit('click')"
   >
     <Icon
       class="w-4 h-4 flex-none"
@@ -32,5 +35,52 @@ defineEmits<{
       :icon="stateIcon"
       aria-hidden="true"
     />
-  </BaseListItem>
+  </button>
 </template>
+
+<style lang="postcss">
+.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);
+    }
+  }
+}
+</style>