picocrank 1.25.0 → 1.25.2

package/vue/components/Tabs.vue

@@ -116,7 +116,7 @@ defineExpose({
 
 .tabs-header {
 	display: flex;
-	border-bottom: 2px solid var(--border-color, #e1e5e9);
+	border-bottom: 2px solid var(--tab-border);
 	gap: 0.25rem;
 	overflow-x: auto;
 	scrollbar-width: thin;
@@ -131,7 +131,7 @@ defineExpose({
 }
 
 .tabs-header::-webkit-scrollbar-thumb {
-	background: var(--border-color, #ccc);
+	background: var(--tab-border);
 	border-radius: 2px;
 }
 
@@ -146,25 +146,25 @@ defineExpose({
 	border-radius: 0;
 	cursor: pointer;
 	font-size: 1em;
-	color: var(--text-muted, #666);
+	color: var(--tab-fg);
 	transition: all 0.2s ease;
 	white-space: nowrap;
 	position: relative;
 }
 
 .tab-button:hover {
-	color: var(--text-color, #000);
-	background-color: var(--hover-background-color, #f5f5f5);
+	color: var(--tab-hover-fg);
+	background-color: var(--tab-hover-bg);
 }
 
 .tab-button.active {
-	color: var(--primary-color, #007bff);
-	border-bottom-color: var(--primary-color, #007bff);
+	color: var(--tab-active-fg);
+	border-bottom-color: var(--tab-active-fg);
 	font-weight: bold;
 }
 
 .tab-button:focus {
-	outline: 2px solid var(--primary-color, #007bff);
+	outline: 2px solid var(--tab-focus-outline-color);
 	outline-offset: -2px;
 	border-radius: 0;
 }
@@ -196,27 +196,6 @@ defineExpose({
 	}
 }
 
-/* Dark theme support */
-html[data-theme="dark"] {
-	.tabs-header {
-		border-bottom-color: var(--border-color, #444);
-	}
-
-	.tab-button {
-		color: var(--text-muted, #999);
-	}
-
-	.tab-button:hover {
-		color: var(--text-color, #fff);
-		background-color: var(--hover-background-color, #333);
-	}
-
-	.tab-button.active {
-		color: var(--primary-color, #60a5fa);
-		border-bottom-color: var(--primary-color, #60a5fa);
-	}
-}
-
 /* Responsive */
 @media (max-width: 768px) {
 	.tabs-header {

package/vue/components/ThemeSwitcher.vue

@@ -1,7 +1,13 @@
 <template>
-	<label class="theme-switcher">
+	<label :class="['theme-switcher', { 'theme-switcher--compact': compact }]">
 		<span v-if="label" class="theme-switcher-label">{{ label }}</span>
-		<select :value="themePreference" @change="onThemeChange">
+		<select
+			ref="selectRef"
+			:id="selectId || undefined"
+			:value="themePreference"
+			:aria-label="compact ? (label || 'Active theme') : undefined"
+			@change="onThemeChange"
+		>
 			<option value="">{{ defaultOptionLabel }}</option>
 			<option
 				v-for="name in availableThemes"
@@ -12,7 +18,7 @@
 			</option>
 		</select>
 	</label>
-	<p v-if="showEmptyHint && availableThemes.length === 0" class="subtle theme-switcher-hint">
+	<p v-if="showEmptyHint && !compact && availableThemes.length === 0" class="subtle theme-switcher-hint">
 		<slot name="empty">
 			No drop-in themes found. Add <code>public/themes/&lt;name&gt;/theme.css</code>
 			or set <code>include-supplemental-themes</code> to list bundled supplemental themes.
@@ -20,8 +26,12 @@
 	</p>
 </template>
 
+<script>
+export const HEADER_THEME_SWITCHER_SELECT_ID = 'picocrank-header-theme-switcher'
+</script>
+
 <script setup>
-import { onMounted, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { useCustomTheme } from '../composables/useCustomTheme.js'
 
 const props = defineProps({
@@ -31,7 +41,7 @@ const props = defineProps({
 	},
 	defaultOptionLabel: {
 		type: String,
-		default: 'Default (Femtocrank)',
+		default: 'Default (Femtocrank only)',
 	},
 	includeSupplementalThemes: {
 		type: Boolean,
@@ -53,6 +63,14 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	compact: {
+		type: Boolean,
+		default: false,
+	},
+	selectId: {
+		type: String,
+		default: undefined,
+	},
 })
 
 const emit = defineEmits(['change'])
@@ -66,6 +84,17 @@ const {
 	configure,
 } = useCustomTheme()
 
+const selectRef = ref(null)
+
+function focusSelect() {
+	selectRef.value?.focus()
+	selectRef.value?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+}
+
+defineExpose({
+	focus: focusSelect,
+})
+
 function syncOptions() {
 	configure({
 		includeSupplementalThemes: props.includeSupplementalThemes,
@@ -113,6 +142,16 @@ onMounted(() => {
 	min-width: 14rem;
 }
 
+.theme-switcher--compact {
+	flex-wrap: nowrap;
+	gap: 0;
+}
+
+.theme-switcher--compact select {
+	min-width: 10rem;
+	max-width: 13.5rem;
+}
+
 .theme-switcher-hint {
 	margin: 0.75rem 0 0;
 }

package/vue/components/TopBar.vue

@@ -97,7 +97,7 @@ function handleLinkClick(callback = null) {
 	padding: 0.5em 0.75em;
 	border-radius: 0.25em;
 	text-decoration: none;
-	color: var(--header-text-color, inherit);
+	color: var(--header-fg-color, var(--header-text-color, inherit));
 	transition: background-color 0.15s ease;
 	white-space: nowrap;
 	border: 0;
@@ -124,7 +124,7 @@ function handleLinkClick(callback = null) {
 
 html[data-theme="dark"] {
 	.topbar-link {
-		color: var(--header-text-color, #f8f9fa);
+		color: var(--header-fg-color, var(--header-text-color, #f8f9fa));
 	}
 	
 	.separator {

package/vue/examples/App.vue

@@ -2,6 +2,10 @@
 	<Navigation ref="navigation">
 		<Header username = "Guest" @toggleSidebar="toggleSidebar" @logoClick="goToIndex" @userClick="goToUserDetails" title = "PicoCrank" :logoUrl="logoUrl" :sidebarEnabled="sidebarEnabled" :navigation="navigation" :topBarEnabled="topBarEnabled" :showBranding="brandingEnabled" :breadcrumbs="breadcrumbsEnabled" :themeToggleEnabled="themeToggleEnabled">
 			<template #toolbar>
+				<ExampleHeaderThemeSwitcher
+					v-if="themeSwitcherEnabled"
+					:include-supplemental-themes="includeSupplementalThemes"
+				/>
 				<QuickSearch
 					v-if="quickSearchEnabled"
 					ref="quickSearchRef"
@@ -37,6 +41,7 @@
 	import { Pin02Icon, UserIcon } from '@hugeicons/core-free-icons'
 
 	import QuickSearch from './../components/QuickSearch.vue'
+	import ExampleHeaderThemeSwitcher from './ExampleHeaderThemeSwitcher.vue'
 	import Navigation from './../components/Navigation.vue'
 	import NotificationPopups from './../components/NotificationPopups.vue'
 	import '../../styles.css'
@@ -54,6 +59,8 @@
 	const quickSearchEnabled = ref(true);
 	const dummySearchFetchEnabled = ref(false);
 	const themeToggleEnabled = ref(true);
+	const themeSwitcherEnabled = ref(true);
+	const includeSupplementalThemes = ref(true);
 	const topBarEnabled = ref(false);
 	const breadcrumbsEnabled = ref(false);
 
@@ -93,6 +100,10 @@
 		themeToggleEnabled.value = !themeToggleEnabled.value;
 	}
 
+	function toggleThemeSwitcherEnabled() {
+		themeSwitcherEnabled.value = !themeSwitcherEnabled.value;
+	}
+
 	function toggleTopBarEnabled() {
 		topBarEnabled.value = !topBarEnabled.value;
 	}
@@ -161,6 +172,8 @@
 	provide('toggleDummySearchFetchEnabled', toggleDummySearchFetchEnabled);
 	provide('themeToggleEnabled', themeToggleEnabled);
 	provide('toggleThemeToggleEnabled', toggleThemeToggleEnabled);
+	provide('themeSwitcherEnabled', themeSwitcherEnabled);
+	provide('toggleThemeSwitcherEnabled', toggleThemeSwitcherEnabled);
 	provide('topBarEnabled', topBarEnabled);
 	provide('toggleTopBarEnabled', toggleTopBarEnabled);
 	provide('breadcrumbsEnabled', breadcrumbsEnabled);

package/vue/examples/ExampleHeaderThemeSwitcher.vue

@@ -0,0 +1,78 @@
+<template>
+	<ThemeSwitcher
+		v-if="enabled"
+		compact
+		label=""
+		:select-id="HEADER_THEME_SWITCHER_SELECT_ID"
+		default-option-label="Default (Femtocrank only)"
+		:include-supplemental-themes="includeSupplementalThemes"
+	/>
+</template>
+
+<script setup>
+import ThemeSwitcher, { HEADER_THEME_SWITCHER_SELECT_ID } from '../components/ThemeSwitcher.vue'
+
+defineProps({
+	enabled: {
+		type: Boolean,
+		default: true,
+	},
+	includeSupplementalThemes: {
+		type: Boolean,
+		default: true,
+	},
+})
+</script>
+
+<!-- Examples app only: match Header toolbar chrome (see Header search-trigger styles). -->
+<style>
+/*
+ * Header renders theme toggle before the toolbar slot; use flex order to swap
+ * the drop-in theme selector ahead of the light/dark button without changing Header.
+ */
+header .header-actions .theme-switcher--compact {
+	order: 1;
+	align-self: stretch;
+	display: inline-flex;
+	align-items: center;
+	margin: 0;
+}
+
+header .header-actions .theme-toggle {
+	order: 2;
+}
+
+header .header-actions .quick-search {
+	order: 3;
+}
+
+header .header-actions .user-info {
+	order: 4;
+}
+
+header .header-actions .theme-switcher--compact select {
+	align-self: stretch;
+	height: 100%;
+	border: 0;
+	border-radius: 0;
+	background-color: transparent;
+	color: var(--header-fg-color, var(--header-text-color, #fff));
+	padding-top: 0;
+	padding-bottom: 0;
+	padding-left: 0.6em;
+	padding-right: 0.6em;
+	font-size: small;
+	font-family: inherit;
+	cursor: pointer;
+}
+
+header .header-actions .theme-switcher--compact select:hover {
+	background-color: var(--header-hover-background-color);
+	color: var(--header-hover-text-color);
+}
+
+header .header-actions .theme-switcher--compact select:focus-visible {
+	outline: 2px solid var(--header-hover-text-color, #fff);
+	outline-offset: -2px;
+}
+</style>

package/vue/examples/PageStructure.vue

@@ -62,6 +62,17 @@
 				/>
 			</FormField>
 
+			<FormField label="Theme switcher" fake>
+				<RadioGroup
+					name="ps-theme-switcher"
+					variant="boolean"
+					aria-label="Theme switcher"
+					:model-value="themeSwitcherEnabled"
+					:options="showHideOptions"
+					@update:model-value="setThemeSwitcherEnabled"
+				/>
+			</FormField>
+
 			<FormField label="Top bar" fake>
 				<div>
 					<RadioGroup
@@ -170,6 +181,8 @@ const dummySearchFetchEnabled = inject('dummySearchFetchEnabled')
 const toggleDummySearchFetchEnabled = inject('toggleDummySearchFetchEnabled')
 const themeToggleEnabled = inject('themeToggleEnabled')
 const toggleThemeToggleEnabled = inject('toggleThemeToggleEnabled')
+const themeSwitcherEnabled = inject('themeSwitcherEnabled')
+const toggleThemeSwitcherEnabled = inject('toggleThemeSwitcherEnabled')
 const topBarEnabled = inject('topBarEnabled')
 const toggleTopBarEnabled = inject('toggleTopBarEnabled')
 const breadcrumbsEnabled = inject('breadcrumbsEnabled')
@@ -200,6 +213,10 @@ function setThemeToggleEnabled(want) {
 	setFlag(themeToggleEnabled, toggleThemeToggleEnabled, want)
 }
 
+function setThemeSwitcherEnabled(want) {
+	setFlag(themeSwitcherEnabled, toggleThemeSwitcherEnabled, want)
+}
+
 function setTopBarEnabled(want) {
 	setFlag(topBarEnabled, toggleTopBarEnabled, want)
 }

package/vue/examples/ThemePreview.vue

@@ -8,24 +8,24 @@
 			optionally <code>supplemental-themes/</code> (Catppuccin, Dracula / Alucard, Gruvbox, waffles). Drop a folder
 			in and restart the dev server (or rebuild); PicoCrank discovers themes from
 			<code>index.json</code> and applies them with <code>useCustomTheme()</code> or
-			<code>ThemeSwitcher</code>. Supplemental themes are bundled by default but only
+			<code>ThemeSwitcher</code> in the examples app header toolbar. Supplemental themes are bundled by default but only
 			listed when <code>include-supplemental-themes</code> is enabled.
 		</p>
 
-		<ThemeSwitcher
-			class="theme-switcher-block"
-			:include-supplemental-themes="true"
-			@change="onThemeChange"
-		/>
-
-		<p v-if="availableThemes.length === 0" class="subtle">
-			No drop-in themes found. Add <code>public/themes/&lt;name&gt;/theme.css</code>
-			or enable supplemental themes on <code>ThemeSwitcher</code>.
-		</p>
-		<p v-else class="subtle">
+		<p class="subtle">
+			Use the theme dropdown in the header (next to the light/dark toggle) to switch drop-in themes.
 			Preference is stored in localStorage and applies across the whole examples site.
-			Light/dark mode (header sun/moon) switches Femtocrank defaults, or the dual-variant supplemental themes when active.
+			Light/dark mode switches Femtocrank defaults, or the dual-variant supplemental themes when active.
 		</p>
+
+		<button
+			type="button"
+			class="neutral open-theme-switcher-button"
+			:disabled="!themeSwitcherEnabled"
+			@click="openThemeSwitcher"
+		>
+			Open theme switcher
+		</button>
 	</Section>
 
 	<Section title="Buttons" subtitle="Default and karma variants">
@@ -106,28 +106,49 @@
 					<td><code>--karma-*</code></td>
 					<td>Status backgrounds and accents</td>
 				</tr>
+				<tr>
+					<td><code>--link-color</code></td>
+					<td>Links, active tabs, sort/filter column headers</td>
+				</tr>
+				<tr>
+					<td><code>--muted-text-color</code></td>
+					<td>Secondary text and inactive tab labels</td>
+				</tr>
+				<tr>
+					<td><code>--header-fg-color</code></td>
+					<td>Header chrome text and icons</td>
+				</tr>
+				<tr>
+					<td><code>--input-bg-color</code> / <code>--input-fg-color</code></td>
+					<td>Form fields</td>
+				</tr>
 			</tbody>
 		</table>
 	</Section>
 </template>
 
 <script setup>
+import { inject } from 'vue'
 import Section from '../components/Section.vue'
-import ThemeSwitcher from '../components/ThemeSwitcher.vue'
 import FormLayout from '../components/FormLayout.vue'
 import FormField from '../components/FormField.vue'
-import { useCustomTheme } from '../composables/useCustomTheme.js'
+import { HEADER_THEME_SWITCHER_SELECT_ID } from '../components/ThemeSwitcher.vue'
 
-const { availableThemes } = useCustomTheme()
+const themeSwitcherEnabled = inject('themeSwitcherEnabled')
 
-function onThemeChange() {
-	// ThemeSwitcher updates shared useCustomTheme state.
+function openThemeSwitcher() {
+	const select = document.getElementById(HEADER_THEME_SWITCHER_SELECT_ID)
+	if (!(select instanceof HTMLSelectElement)) {
+		return
+	}
+	select.focus()
+	select.scrollIntoView({ block: 'nearest', inline: 'nearest' })
 }
 </script>
 
 <style scoped>
-.theme-switcher-block {
-	margin: 1rem 0;
+.open-theme-switcher-button {
+	margin-top: 0.75rem;
 }
 
 .preview-row {

package/vue/examples/Welcome.vue

@@ -47,24 +47,6 @@
 		</Navigation>
 	</Section>
 
-	<Section
-		title="Popular examples"
-		subtitle="A few good places to begin"
-	>
-		<div class="grid-boxed welcome-popular-grid">
-			<router-link
-				v-for="example in popularExamples"
-				:key="example.name"
-				:to="{ name: example.name }"
-				class="stat-display welcome-popular-card"
-			>
-				<span class="subtle">{{ example.category }}</span>
-				<span class="stat">{{ example.label }}</span>
-				<span class="welcome-popular-description">{{ example.description }}</span>
-			</router-link>
-		</div>
-	</Section>
-
 	<Section
 		title="Try it"
 		subtitle="Small interactions you can trigger right now"
@@ -109,33 +91,6 @@ import logoUrl from '/logo.png'
 const { show: showPopup } = useNotificationPopups()
 const welcomeNavigation = ref(null)
 
-const popularExamples = [
-	{
-		name: 'ThemePreview',
-		category: 'Layouts',
-		label: 'Theme Switcher',
-		description: 'Switch drop-in themes live',
-	},
-	{
-		name: 'TableExample',
-		category: 'Data display',
-		label: 'Table',
-		description: 'Sorting, pagination, and column filters',
-	},
-	{
-		name: 'CalendarExample',
-		category: 'Data display',
-		label: 'Calendar',
-		description: 'Events, drag-and-drop, and date ranges',
-	},
-	{
-		name: 'ButtonsExample',
-		category: 'Forms & input',
-		label: 'Buttons',
-		description: 'Variants, toolbars, and form actions',
-	},
-]
-
 function showWelcomeToast() {
 	showPopup({
 		label: 'WELCOME',
@@ -212,31 +167,4 @@ onMounted(() => {
 	gap: 0.5rem;
 	margin-bottom: 0.75rem;
 }
-
-.welcome-popular-grid {
-	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-}
-
-.welcome-popular-card {
-	display: flex;
-	flex-direction: column;
-	gap: 0.35rem;
-	text-decoration: none;
-	color: inherit;
-	transition: transform 0.15s ease, box-shadow 0.15s ease;
-}
-
-.welcome-popular-card:hover {
-	transform: translateY(-2px);
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-}
-
-.welcome-popular-description {
-	font-size: 0.85rem;
-	color: #666;
-}
-
-html[data-theme="dark"] .welcome-popular-description {
-	color: #bbb;
-}
 </style>