picocrank 1.25.2 → 1.27.0

package/supplemental-themes/dracula-alucard/theme.css

@@ -32,7 +32,7 @@ html[data-theme="dark"] {
 	--dt-warning-fg: var(--dt-surface);
 
 	--body-bg-color: var(--dt-background);
-	--surface-bg-color: var(--dt-surface);
+	--section-bg-color: var(--dt-surface);
 	--standout-bg-color: var(--dt-surface);
 	--section-header-bg-color: var(--dt-surface);
 	--shadow-color: var(--dt-shadow-strong);
@@ -41,8 +41,6 @@ html[data-theme="dark"] {
 	--muted-text-color: var(--dt-muted);
 	--annotation-key-color: var(--dt-muted);
 	--link-color: var(--dt-accent);
-	--nav-grid-accent-fg: var(--link-color);
-	--nav-grid-accent-bg: var(--link-color);
 	--border-color: var(--dt-border);
 
 	--hover-background-color: var(--dt-selection);
@@ -65,6 +63,9 @@ html[data-theme="dark"] {
 	--input-fg-color: var(--dt-foreground);
 	--control-option-bg-color: var(--dt-background);
 	--control-hover-bg-color: var(--dt-overlay);
+	--control-checked-bg: color-mix(in srgb, var(--dt-green) 35%, var(--standout-bg-color));
+	--control-checked-hover-bg: color-mix(in srgb, var(--dt-green) 45%, var(--standout-bg-color));
+	--control-checked-fg: var(--dt-foreground);
 	--menu-hover-bg-color: var(--dt-selection);
 
 	--table-row-hover-bg: var(--dt-selection);
@@ -87,19 +88,11 @@ html[data-theme="dark"] {
 	--karma-bad: var(--dt-red);
 	--karma-warning: var(--dt-yellow);
 	--karma-severe: var(--dt-orange);
-	--karma-important: var(--dt-purple);
 	--karma-note: var(--dt-cyan);
 	--karma-info: var(--dt-overlay);
 	--karma-old: var(--dt-muted);
 
-	--karma-good-fg: var(--dt-green);
-	--karma-bad-fg: var(--dt-red);
-	--karma-warning-fg: var(--dt-yellow);
-	--karma-severe-fg: var(--dt-orange);
-	--karma-important-fg: var(--dt-purple);
-	--karma-note-fg: var(--dt-cyan);
-	--karma-info-fg: var(--dt-muted);
-	--karma-old-fg: var(--dt-muted);
+	--karma-on-bg-fg: var(--dt-good-fg);
 }
 
 html[data-theme="light"] {
@@ -126,7 +119,7 @@ html[data-theme="light"] {
 	--dt-warning-fg: var(--dt-background);
 
 	--body-bg-color: var(--dt-background);
-	--surface-bg-color: var(--dt-surface);
+	--section-bg-color: var(--dt-surface);
 	--standout-bg-color: var(--dt-surface);
 	--section-header-bg-color: var(--dt-surface);
 	--shadow-color: var(--dt-shadow-strong);
@@ -135,8 +128,6 @@ html[data-theme="light"] {
 	--muted-text-color: var(--dt-muted);
 	--annotation-key-color: var(--dt-muted);
 	--link-color: var(--dt-accent);
-	--nav-grid-accent-fg: var(--link-color);
-	--nav-grid-accent-bg: var(--link-color);
 	--border-color: var(--dt-border);
 
 	--hover-background-color: var(--dt-selection);
@@ -159,6 +150,9 @@ html[data-theme="light"] {
 	--input-fg-color: var(--dt-foreground);
 	--control-option-bg-color: var(--dt-overlay);
 	--control-hover-bg-color: var(--dt-selection);
+	--control-checked-bg: color-mix(in srgb, var(--dt-green) 20%, var(--standout-bg-color));
+	--control-checked-hover-bg: color-mix(in srgb, var(--dt-green) 28%, var(--standout-bg-color));
+	--control-checked-fg: var(--dt-foreground);
 	--menu-hover-bg-color: var(--dt-selection);
 
 	--table-row-hover-bg: var(--dt-selection);
@@ -181,17 +175,9 @@ html[data-theme="light"] {
 	--karma-bad: var(--dt-red);
 	--karma-warning: var(--dt-yellow);
 	--karma-severe: var(--dt-orange);
-	--karma-important: var(--dt-purple);
 	--karma-note: var(--dt-cyan);
 	--karma-info: var(--dt-overlay);
 	--karma-old: var(--dt-muted);
 
-	--karma-good-fg: var(--dt-green);
-	--karma-bad-fg: var(--dt-red);
-	--karma-warning-fg: var(--dt-yellow);
-	--karma-severe-fg: var(--dt-orange);
-	--karma-important-fg: var(--dt-purple);
-	--karma-note-fg: var(--dt-cyan);
-	--karma-info-fg: var(--dt-muted);
-	--karma-old-fg: var(--dt-muted);
+	--karma-on-bg-fg: var(--dt-good-fg);
 }

package/supplemental-themes/gruvbox-dark-light/theme.css

@@ -35,7 +35,7 @@ html[data-theme="dark"] {
 	--gb-good-fg: var(--gb-bg0-hard);
 
 	--body-bg-color: var(--gb-bg0);
-	--surface-bg-color: var(--gb-bg1);
+	--section-bg-color: var(--gb-bg1);
 	--standout-bg-color: var(--gb-bg1);
 	--section-header-bg-color: var(--gb-bg1);
 	--shadow-color: var(--gb-shadow-strong);
@@ -44,8 +44,6 @@ html[data-theme="dark"] {
 	--muted-text-color: var(--gb-fg3);
 	--annotation-key-color: var(--gb-fg3);
 	--link-color: var(--gb-accent);
-	--nav-grid-accent-fg: var(--link-color);
-	--nav-grid-accent-bg: var(--link-color);
 	--border-color: var(--gb-bg3);
 
 	--hover-background-color: var(--gb-bg2);
@@ -68,6 +66,9 @@ html[data-theme="dark"] {
 	--input-fg-color: var(--gb-fg0);
 	--control-option-bg-color: var(--gb-bg2);
 	--control-hover-bg-color: var(--gb-bg3);
+	--control-checked-bg: color-mix(in srgb, var(--gb-green) 35%, var(--standout-bg-color));
+	--control-checked-hover-bg: color-mix(in srgb, var(--gb-green) 45%, var(--standout-bg-color));
+	--control-checked-fg: var(--gb-fg0);
 	--menu-hover-bg-color: var(--gb-bg2);
 
 	--table-row-hover-bg: var(--gb-bg2);
@@ -90,19 +91,11 @@ html[data-theme="dark"] {
 	--karma-bad: var(--gb-red);
 	--karma-warning: var(--gb-yellow);
 	--karma-severe: var(--gb-orange);
-	--karma-important: var(--gb-purple);
 	--karma-note: var(--gb-aqua);
 	--karma-info: var(--gb-bg2);
 	--karma-old: var(--gb-gray);
 
-	--karma-good-fg: var(--gb-green);
-	--karma-bad-fg: var(--gb-red);
-	--karma-warning-fg: var(--gb-yellow);
-	--karma-severe-fg: var(--gb-orange);
-	--karma-important-fg: var(--gb-purple);
-	--karma-note-fg: var(--gb-aqua);
-	--karma-info-fg: var(--gb-fg3);
-	--karma-old-fg: var(--gb-fg4);
+	--karma-on-bg-fg: var(--gb-good-fg);
 }
 
 html[data-theme="light"] {
@@ -132,7 +125,7 @@ html[data-theme="light"] {
 	--gb-good-fg: var(--gb-bg0);
 
 	--body-bg-color: var(--gb-bg0);
-	--surface-bg-color: var(--gb-bg1);
+	--section-bg-color: var(--gb-bg1);
 	--standout-bg-color: var(--gb-bg1);
 	--section-header-bg-color: var(--gb-bg1);
 	--shadow-color: var(--gb-shadow-strong);
@@ -141,8 +134,6 @@ html[data-theme="light"] {
 	--muted-text-color: var(--gb-fg3);
 	--annotation-key-color: var(--gb-fg3);
 	--link-color: var(--gb-accent);
-	--nav-grid-accent-fg: var(--link-color);
-	--nav-grid-accent-bg: var(--link-color);
 	--border-color: var(--gb-bg3);
 
 	--hover-background-color: var(--gb-bg2);
@@ -165,6 +156,9 @@ html[data-theme="light"] {
 	--input-fg-color: var(--gb-fg0);
 	--control-option-bg-color: var(--gb-bg2);
 	--control-hover-bg-color: var(--gb-bg3);
+	--control-checked-bg: color-mix(in srgb, var(--gb-green) 20%, var(--standout-bg-color));
+	--control-checked-hover-bg: color-mix(in srgb, var(--gb-green) 28%, var(--standout-bg-color));
+	--control-checked-fg: var(--gb-fg0);
 	--menu-hover-bg-color: var(--gb-bg2);
 
 	--table-row-hover-bg: var(--gb-bg2);
@@ -187,17 +181,9 @@ html[data-theme="light"] {
 	--karma-bad: var(--gb-red);
 	--karma-warning: var(--gb-yellow);
 	--karma-severe: var(--gb-orange);
-	--karma-important: var(--gb-purple);
 	--karma-note: var(--gb-aqua);
 	--karma-info: var(--gb-bg2);
 	--karma-old: var(--gb-gray);
 
-	--karma-good-fg: var(--gb-green);
-	--karma-bad-fg: var(--gb-red);
-	--karma-warning-fg: var(--gb-yellow);
-	--karma-severe-fg: var(--gb-orange);
-	--karma-important-fg: var(--gb-purple);
-	--karma-note-fg: var(--gb-aqua);
-	--karma-info-fg: var(--gb-fg3);
-	--karma-old-fg: var(--gb-fg4);
+	--karma-on-bg-fg: var(--gb-good-fg);
 }

package/supplemental-themes/waffles/theme.css

@@ -18,7 +18,7 @@ html {
 	--waffle-accent: #a05020;
 
 	--body-bg-color: var(--waffle-cream);
-	--surface-bg-color: #fffdf6;
+	--section-bg-color: #fffdf6;
 	--standout-bg-color: var(--waffle-batter);
 	--section-header-bg-color: var(--waffle-batter);
 	--shadow-color: rgba(139, 69, 19, 0.12);
@@ -26,8 +26,6 @@ html {
 	--text-color: var(--waffle-syrup);
 	--muted-text-color: #a88860;
 	--link-color: var(--waffle-accent);
-	--nav-grid-accent-fg: var(--link-color);
-	--nav-grid-accent-bg: var(--link-color);
 	--border-color: #e0c896;
 
 	--hover-background-color: #f0d9a8;
@@ -61,19 +59,9 @@ html {
 	--karma-bad: #f0a0a8;
 	--karma-warning: var(--waffle-butter);
 	--karma-severe: #e08a6a;
-	--karma-important: #ffe8a3;
 	--karma-note: #a8d4e8;
 	--karma-info: var(--waffle-batter);
 	--karma-old: #d4c4a0;
-
-	--karma-good-fg: #4a7a28;
-	--karma-bad-fg: var(--waffle-berry);
-	--karma-warning-fg: #9a6b00;
-	--karma-severe-fg: #a04020;
-	--karma-important-fg: #8a6800;
-	--karma-note-fg: #2a6a88;
-	--karma-info-fg: #7a6540;
-	--karma-old-fg: #6a5840;
 }
 
 body {
@@ -140,8 +128,6 @@ html[data-theme="dark"] {
 	--text-color: var(--waffle-foreground);
 	--muted-text-color: var(--waffle-foreground-muted);
 	--link-color: var(--waffle-accent-dark);
-	--nav-grid-accent-fg: var(--link-color);
-	--nav-grid-accent-bg: var(--link-color);
 	--border-color: #c9a66a;
 	--standout-bg-color: var(--waffle-batter);
 	--hover-background-color: #f0d9a8;
@@ -149,7 +135,7 @@ html[data-theme="dark"] {
 	--disabled-text-color: #7a6548;
 
 	--body-bg-color: var(--waffle-cream);
-	--surface-bg-color: var(--waffle-batter);
+	--section-bg-color: var(--waffle-batter);
 	--section-header-bg-color: var(--waffle-section);
 	--sidebar-bg-color: var(--waffle-sidebar);
 	--sidebar-link-color: var(--waffle-foreground);

package/vite.config.js

@@ -192,4 +192,9 @@ export default defineConfig({
     }),
     vue(),
   ],
+  test: {
+    environment: 'happy-dom',
+    include: ['vue/**/*.spec.js'],
+    setupFiles: ['./vue/test/setup.js'],
+  },
 })

package/vue/components/Breadcrumbs.vue

@@ -1,58 +1,205 @@
 <template>
-    <div id = "breadcrumbs">
-        <template v-for="(link, index) in links" :key="link.name">
-            <router-link :to="link.href">{{ link.name }}</router-link>
-            <span v-if="index < links.length - 1" class="separator">
-                &raquo;
-            </span>
-        </template>
-    </div>
+	<nav id="breadcrumbs" class="breadcrumbs" aria-label="Breadcrumb">
+		<div class="breadcrumbs-links flex-row">
+			<template v-for="(link, index) in links" :key="`${link.name}-${index}`">
+				<HugeiconsIcon
+					v-if="index > 0"
+					:icon="ArrowRight01Icon"
+					class="separator"
+					width="0.85em"
+					height="0.85em"
+					aria-hidden="true"
+				/>
+
+				<nav
+					v-if="hasMenu(link)"
+					class="menu breadcrumb-menu"
+					:aria-label="`${link.name} sections`"
+				>
+					<ul>
+						<li>
+							<span class="submenu">
+								<router-link
+									v-if="link.to"
+									:to="link.to"
+									class="button breadcrumb-link"
+									:aria-current="isLast(index) ? 'page' : undefined"
+								>
+									<span>{{ link.name }}</span>
+								</router-link>
+								<span
+									v-else
+									class="button breadcrumb-link"
+									:aria-current="isLast(index) ? 'page' : undefined"
+								>
+									{{ link.name }}
+								</span>
+							</span>
+							<div>
+								<ul>
+									<li v-for="menuItem in link.menu" :key="menuItem.name">
+										<router-link
+											:to="menuItem.to"
+											:class="{ active: isMenuItemActive(link, menuItem) }"
+										>
+											{{ menuItem.name }}
+										</router-link>
+									</li>
+								</ul>
+							</div>
+						</li>
+					</ul>
+				</nav>
+
+				<router-link
+					v-else-if="!isLast(index)"
+					:to="link.to ?? link.href"
+					class="button breadcrumb-link"
+				>
+					<span>{{ link.name }}</span>
+				</router-link>
+
+				<span
+					v-else
+					class="button breadcrumb-link active"
+					aria-current="page"
+				>
+					<span>{{ link.name }}</span>
+				</span>
+			</template>
+		</div>
+	</nav>
 </template>
 
+<script setup>
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { HugeiconsIcon } from '@hugeicons/vue'
+import { ArrowRight01Icon } from '@hugeicons/core-free-icons'
+
+const route = useRoute()
+const links = ref([])
+
+function hasMenu(link) {
+	return Array.isArray(link.menu) && link.menu.length > 0
+}
+
+function isLast(index) {
+	return index === links.value.length - 1
+}
+
+function isMenuItemActive(link, menuItem) {
+	const activeRoute = link.to?.name
+	const itemRoute = menuItem.to?.name
+	return activeRoute != null && activeRoute === itemRoute
+}
+
+watch(() => route.matched, (matched) => {
+	links.value = []
+	matched.forEach((record) => {
+		if (record.meta && record.meta.breadcrumbs) {
+			record.meta.breadcrumbs(route).forEach((item) => {
+				links.value.push({
+					name: item.name,
+					to: item.to,
+					href: item.href || record.path || '/',
+					menu: item.menu,
+				})
+			})
+		} else if (record.name) {
+			links.value.push({
+				name: record.meta?.title || record.name,
+				to: { name: record.name, params: route.params, query: route.query },
+				href: route.fullPath || record.path || '/',
+			})
+		}
+	})
+}, { immediate: true })
+</script>
+
 <style scoped>
-.separator {
-    color: var(--breadcrumbs-separator-fg);
+.breadcrumbs {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.breadcrumbs-links {
+	display: flex;
+	align-items: center;
+	gap: 0.0625rem;
+	flex-wrap: wrap;
+}
+
+.breadcrumb-menu {
+	display: inline-flex;
+	flex-shrink: 0;
+}
+
+.breadcrumb-menu > ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.breadcrumb-link {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.375rem;
+	padding: 0.5em 0.375em;
+	border-radius: 0.25em;
+	text-decoration: none;
+	color: var(--header-fg-color);
+	transition: background-color 0.15s ease, color 0.15s ease;
+	white-space: nowrap;
+	border: 0;
+	font-weight: normal;
+	background-color: transparent;
+	cursor: default;
 }
 
-a {
-    text-decoration: none;
-    padding: 0.4em;
-    border-radius: 0.2em;
+a.breadcrumb-link {
+	cursor: pointer;
 }
 
-a:hover {
-    text-decoration: underline;
-    background-color: var(--breadcrumbs-link-hover-bg);
+.breadcrumb-link.active {
+	text-decoration: underline;
+	font-weight: 500;
 }
 
+.separator {
+	flex-shrink: 0;
+	color: var(--header-fg-color);
+	opacity: 0.4;
+}
 </style>
 
+<style>
+header .breadcrumbs a.breadcrumb-link:hover,
+header .breadcrumbs a.breadcrumb-link:focus-visible,
+header .breadcrumbs .breadcrumb-menu.menu > ul > li:hover,
+header .breadcrumbs .breadcrumb-menu.menu > ul > li:focus-within,
+header .breadcrumbs .breadcrumb-menu.menu > ul > li:hover > span > a,
+header .breadcrumbs .breadcrumb-menu.menu > ul > li:focus-within > span > a,
+header .breadcrumbs .breadcrumb-menu.menu > ul div ul a:hover,
+header .breadcrumbs .breadcrumb-menu.menu > ul div ul a:focus-visible {
+	background-color: var(--header-hover-background-color);
+	color: var(--header-hover-text-color);
+}
 
-<script setup>
-    import { ref } from 'vue';
-    import { watch } from 'vue';
-    import { useRoute } from 'vue-router';
-
-    const route = useRoute();
-    const links = ref([]);
-
-    watch(() => route.matched, (matched) => {
-
-        links.value = [];
-        matched.forEach((record) => {
-            if (record.meta && record.meta.breadcrumbs) {
-                record.meta.breadcrumbs(route).forEach((item) => {
-                    links.value.push({
-                        name: item.name,
-                        href: item.href || record.path || '/'
-                    });
-                });
-            } else if (record.name) {
-                links.value.push({
-                    name: record.name,
-                    href: record.path || '/'
-                });
-            }
-        });
-    }, { immediate: true });
-</script>
+header .breadcrumbs a.breadcrumb-link:focus-visible {
+	outline-color: var(--header-focus-outline-color);
+}
+
+header .breadcrumb-menu.menu > ul > li {
+	border-radius: 0.25em;
+}
+
+header .breadcrumb-menu.menu > ul li span.submenu .breadcrumb-link {
+	text-decoration: inherit;
+}
+
+header .breadcrumb-menu.menu > ul li span.submenu .breadcrumb-link[aria-current="page"] {
+	text-decoration: underline;
+	font-weight: 500;
+}
+</style>