picocrank 1.25.2 → 1.27.0

package/vue/examples/CalendarExample.vue

@@ -53,6 +53,20 @@ import {
 	AlertCircleIcon,
 } from '@hugeicons/core-free-icons'
 
+/** Static event palette — background + accessible dark foreground for light pastels in any theme. */
+const EVENT_COLORS = {
+	weekend: { color: '#e8d5f5', foregroundColor: '#4a2d6b' },
+	teamMeeting: { color: '#d1fae5', foregroundColor: '#14532d' },
+	clientCall: { color: '#e0f2fe', foregroundColor: '#075985' },
+	projectReview: { color: '#ede9fe', foregroundColor: '#5b21b6' },
+	lunchBreak: { color: '#ffedd5', foregroundColor: '#9a3412' },
+	codeReview: { color: '#ccfbf1', foregroundColor: '#115e59' },
+	conference: { color: '#d6e8ff', foregroundColor: '#1e40af' },
+	vacation: { color: '#fff0d6', foregroundColor: '#92400e' },
+	holiday: { color: '#ffe0e0', foregroundColor: '#991b1b' },
+	deadline: { color: '#fde8e8', foregroundColor: '#7f1d1d' },
+}
+
 const events = ref([])
 const loading = ref(false)
 const error = ref(null)
@@ -99,30 +113,32 @@ function generateDummyEventsForMonth(monthIndex, year) {
 				date: new Date(year, monthIndex, day, 10, 0),
 				description: 'Relaxing weekend activity',
 				icon: PartyIcon,
-				color: '#e8d5f5',
+				...EVENT_COLORS.weekend,
 			})
 		}
 		
 		// Add some random events
 		if (random() > 0.7) {
 			const eventTypes = [
-				{ title: 'Team Meeting', time: [9, 0], duration: 1 },
-				{ title: 'Client Call', time: [14, 30], duration: 0.5 },
-				{ title: 'Project Review', time: [16, 0], duration: 2 },
-				{ title: 'Lunch Break', time: [12, 0], duration: 1 },
-				{ title: 'Code Review', time: [10, 0], duration: 1.5 }
+				{ title: 'Team Meeting', time: [9, 0], duration: 1, ...EVENT_COLORS.teamMeeting },
+				{ title: 'Client Call', time: [14, 30], duration: 0.5, ...EVENT_COLORS.clientCall },
+				{ title: 'Project Review', time: [16, 0], duration: 2, ...EVENT_COLORS.projectReview },
+				{ title: 'Lunch Break', time: [12, 0], duration: 1, ...EVENT_COLORS.lunchBreak },
+				{ title: 'Code Review', time: [10, 0], duration: 1.5, ...EVENT_COLORS.codeReview },
 			]
 			
 			const eventType = eventTypes[Math.floor(random() * eventTypes.length)]
-			const [hours, minutes] = eventType.time
+			const { title, time, color, foregroundColor } = eventType
+			const [hours, minutes] = time
 			
 			dummyEvents.push({
 				id: `event-${year}-${monthIndex}-${day}-${Math.random().toString(36).substr(2, 9)}`,
-				title: eventType.title,
+				title,
 				date: new Date(year, monthIndex, day, hours, minutes),
-				description: `Scheduled ${eventType.title.toLowerCase()}`,
-				icon: eventType.title === 'Team Meeting' ? MeetingRoomIcon : undefined,
-				color: eventType.title === 'Client Call' ? '#e0f2fe' : undefined,
+				description: `Scheduled ${title.toLowerCase()}`,
+				icon: title === 'Team Meeting' ? MeetingRoomIcon : undefined,
+				color,
+				foregroundColor,
 			})
 		}
 	}
@@ -135,7 +151,7 @@ function generateDummyEventsForMonth(monthIndex, year) {
 		endDate: new Date(year, monthIndex, 7, 17, 0),
 		description: 'Annual technology conference',
 		icon: Calendar01Icon,
-		color: '#d6e8ff',
+		...EVENT_COLORS.conference,
 	})
 	
 	dummyEvents.push({
@@ -145,7 +161,7 @@ function generateDummyEventsForMonth(monthIndex, year) {
 		endDate: new Date(year, monthIndex, 18, 23, 59),
 		description: 'Family vacation time',
 		icon: BeachIcon,
-		color: '#fff0d6',
+		...EVENT_COLORS.vacation,
 	})
 	
 	// Add some all-day events
@@ -155,7 +171,7 @@ function generateDummyEventsForMonth(monthIndex, year) {
 		date: new Date(year, monthIndex, 1, 0, 0),
 		description: 'National holiday - office closed',
 		icon: PartyIcon,
-		color: '#ffe0e0',
+		...EVENT_COLORS.holiday,
 	})
 	
 	if (daysInMonth >= 25) {
@@ -165,7 +181,7 @@ function generateDummyEventsForMonth(monthIndex, year) {
 			date: new Date(year, monthIndex, 25, 0, 0),
 			description: 'Important project deadline',
 			icon: AlertCircleIcon,
-			color: '#fde8e8',
+			...EVENT_COLORS.deadline,
 		})
 	}
 	
@@ -204,12 +220,6 @@ function getEventsForSurroundingMonths(monthIndex, year) {
 	]
 }
 
-// Generate dummy events for the current month (backward compatibility wrapper)
-function generateDummyEvents() {
-    const now = new Date()
-    return getEventsForMonth(now.getMonth(), now.getFullYear())
-}
-
 function handleEventClick(event) {
     console.log('Event clicked:', event)
     alert(`Event: ${event.title}\nDescription: ${event.description || 'No description'}`)
@@ -232,7 +242,7 @@ function handleDateRangeSelect(start, end) {
 function handleEventMoveRequest({ respond, event, sourceDate, targetDate }) {
 	window.setTimeout(() => {
 		const ok = window.confirm(
-			`Move "${event.title}" to ${targetDate.toLocaleDateString()}? (Cancel = decline)`
+			`Move "${event.title}" from ${sourceDate.toLocaleDateString()} to ${targetDate.toLocaleDateString()}? (Cancel = decline)`
 		)
 		respond(ok)
 	}, 50)

package/vue/examples/ExampleHeaderThemeSwitcher.vue

@@ -56,7 +56,7 @@ header .header-actions .theme-switcher--compact select {
 	border: 0;
 	border-radius: 0;
 	background-color: transparent;
-	color: var(--header-fg-color, var(--header-text-color, #fff));
+	color: var(--header-fg-color);
 	padding-top: 0;
 	padding-bottom: 0;
 	padding-left: 0.6em;

package/vue/examples/FormExample.vue

@@ -22,7 +22,7 @@
 				/>
 			</FormField>
 
-			<FormField label="Role" fake>
+			<FormField label="Role" component-has-label>
 				<RadioGroup
 					v-model="formData.role"
 					name="role"
@@ -30,7 +30,7 @@
 				/>
 			</FormField>
 
-			<FormField label="Term" fake>
+			<FormField label="Term" component-has-label>
 				<RadioGroup
 					v-model="formData.term"
 					name="term"
@@ -52,7 +52,8 @@
 
 			<FormField
 				label="Compensation"
-				fake
+				component-has-label
+				label-required
 				description-above
 				description="Select the incentive plan that applies to this role."
 				docs-url="https://github.com/jamesread/femtocrank"
@@ -68,11 +69,13 @@
 
 			<FormField
 				label="Accessibility requirements"
-				fake
+				component-has-label
 				description-above
 				description="Choose any accommodations needed for this role."
 				docs-url="https://www.w3.org/WAI/fundamentals/accessibility-intro/"
 				docs-url-title="Web accessibility introduction"
+				:validate="validateAccessibilityRequirements"
+				:validate-deps="[formData.accessibility]"
 			>
 				<CheckGroup
 					v-model="formData.accessibility"
@@ -84,6 +87,7 @@
 			<FormField
 				label="Email"
 				for="email"
+				:error="emailError"
 				description="We'll use this address for account notifications only."
 				docs-url="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email"
 				docs-url-title="HTML email input reference"
@@ -149,7 +153,7 @@
 				/>
 			</FormField>
 
-			<FormField label="Newsletters" fake>
+			<FormField label="Newsletters" component-has-label>
 				<div>
 					<label>
 						<input 
@@ -174,7 +178,8 @@
 			<FormField
 				label="Comments"
 				for="comments"
-				description="Optional feedback or notes about this submission."
+				:error="commentsError"
+				description="Optional feedback or notes about this submission (minimum 50 characters when provided)."
 			>
 				<textarea
 					id="comments"
@@ -222,13 +227,39 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import Section from '../components/Section.vue'
 import FormLayout from '../components/FormLayout.vue'
 import FormField from '../components/FormField.vue'
 import RadioGroup from '../components/RadioGroup.vue'
 import CheckGroup from '../components/CheckGroup.vue'
 
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+const MIN_COMMENTS_LENGTH = 50
+
+function createDefaultFormData() {
+	return {
+		name: '',
+		role: '',
+		term: '',
+		salary: '0',
+		compensation: 'sales-target-incentive',
+		accessibility: ['screen-reader', 'high-contrast'],
+		email: 'not-an-email',
+		isAdmin: false,
+		website: '',
+		favouriteFood: '',
+		favouriteColour: '#dee3e7',
+		favouriteNumber: 50,
+		newsletter1: false,
+		newsletter2: false,
+		comments: 'Too short.',
+		readonlyText: 'This is a readonly textarea.',
+		disabledText: 'This is a disabled textarea.',
+		datetime: '',
+	}
+}
+
 // From femtocrank/tests/simple.html — Role (default), Term (boolean), Compensation (list)
 const roleOptions = [
 	{ label: 'Sales', value: 'sales' },
@@ -251,36 +282,52 @@ const accessibilityOptions = [
 	{ label: 'Screen reader support', value: 'screen-reader' },
 	{ label: 'Keyboard navigation', value: 'keyboard-navigation' },
 	{ label: 'High contrast', value: 'high-contrast' },
+	{ label: 'Low contrast UI', value: 'low-contrast' },
 	{ label: 'Captions / transcripts', value: 'captions' },
 ]
 
-const formData = ref({
-	name: '',
-	role: '',
-	term: '',
-	salary: '0',
-	compensation: '',
-	accessibility: [],
-	email: '',
-	isAdmin: false,
-	website: '',
-	favouriteFood: '',
-	favouriteColour: '#dee3e7',
-	favouriteNumber: 50,
-	newsletter1: false,
-	newsletter2: false,
-	comments: '',
-	readonlyText: 'This is a readonly textarea.',
-	disabledText: 'This is a disabled textarea.',
-	datetime: ''
+function validateAccessibilityRequirements() {
+	const selected = formData.value.accessibility
+	if (selected.includes('high-contrast') && selected.includes('low-contrast')) {
+		return 'High contrast and low contrast UI cannot both be selected.'
+	}
+	return ''
+}
+
+const formData = ref(createDefaultFormData())
+
+const emailError = computed(() => {
+	const email = formData.value.email.trim()
+	if (!email) {
+		return 'Email is required.'
+	}
+	if (!EMAIL_PATTERN.test(email)) {
+		return 'Enter a valid email address.'
+	}
+	return ''
+})
+
+const commentsError = computed(() => {
+	const comments = formData.value.comments.trim()
+	if (comments.length > 0 && comments.length < MIN_COMMENTS_LENGTH) {
+		return `Comments must be at least ${MIN_COMMENTS_LENGTH} characters.`
+	}
+	return ''
 })
 
 const submitted = ref(false)
 
-function handleSubmit() {
+function handleSubmit(event) {
+	if (!event.target.reportValidity()) {
+		return
+	}
+
+	if (validateAccessibilityRequirements()) {
+		return
+	}
+
 	submitted.value = true
 	console.log('Form submitted:', formData.value)
-	// In a real application, you would send this data to a server
 	alert('Form submitted! Check the console and the form result below.')
 }
 
@@ -290,26 +337,7 @@ function handleCancel() {
 }
 
 function resetForm() {
-	formData.value = {
-		name: '',
-		role: '',
-		term: '',
-		salary: '0',
-		compensation: '',
-		accessibility: [],
-		email: '',
-		isAdmin: false,
-		website: '',
-		favouriteFood: '',
-		favouriteColour: '#dee3e7',
-		favouriteNumber: 50,
-		newsletter1: false,
-		newsletter2: false,
-		comments: '',
-		readonlyText: 'This is a readonly textarea.',
-		disabledText: 'This is a disabled textarea.',
-		datetime: ''
-	}
+	formData.value = createDefaultFormData()
 	submitted.value = false
 }
 </script>

package/vue/examples/Login.vue

@@ -1,6 +1,7 @@
 <template>
 	<Section title="Login" classes="">
-		<Login 
+		<Login
+			ref="loginRef"
 			@local-login="handleLocalLogin"
 			@oauth-login="handleOAuthLogin"
 			@tab-change="onTabChange"
@@ -9,11 +10,11 @@
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router';
+import { ref } from 'vue';
 import Section from '../components/Section.vue';
 import Login from '../components/Login.vue';
 
-const router = useRouter();
+const loginRef = ref(null);
 
 // Handle local login
 function handleLocalLogin(credentials) {
@@ -44,6 +45,7 @@ function handleLocalLogin(credentials) {
 
 	// Placeholder success
 	alert(`Local login would authenticate: ${credentials.username}`);
+	loginRef.value?.setLocalLoginLoading(false);
 }
 
 // Handle OAuth login

package/vue/examples/LoginExample.vue

@@ -1,6 +1,33 @@
 <template>
-	<Section title="Login Example" subtitle="A reusable login form component with local and OAuth2 authentication">
-		<Login 
+	<Section title="Simple login" subtitle="Username and password only" classes="narrow">
+		<Login ref="simpleLoginRef" local-only @local-login="handleSimpleLocalLogin" />
+	</Section>
+
+	<Section
+		title="Simulated server response"
+		subtitle="Choose what the server returns when you submit the simple login form above"
+		classes="narrow"
+	>
+		<FormField label="Response" component-has-label description="Field errors appear on username or password; server and network errors appear below the form.">
+			<RadioGroup
+				v-model="simulatedResponse"
+				name="login-sim-response"
+				variant="list"
+				:options="simulatedResponseOptions"
+			/>
+		</FormField>
+
+		<FormField label="Timing" component-has-label>
+			<label class="simulate-delay-label">
+				<input v-model="simulateDelay" type="checkbox" />
+				<span>Simulate slow response (1.5s)</span>
+			</label>
+		</FormField>
+	</Section>
+
+	<Section title="Login example" subtitle="Local, OAuth2, and custom authentication tabs" classes="narrow">
+		<Login
+			ref="fullLoginRef"
 			:oauth-providers="oauthProviders"
 			:custom-tabs="customTabs"
 			@local-login="handleLocalLogin"
@@ -8,7 +35,7 @@
 			@tab-change="onTabChange"
 		>
 			<!-- Custom tab: Magic Link Login -->
-			<template #tab-magic-link="{ tab }">
+			<template #tab-magic-link>
 				<div class="login-section">
 					<form @submit.prevent="handleMagicLinkLogin" class="magic-link-form">
 						<input
@@ -30,7 +57,7 @@
 			</template>
 
 			<!-- Custom tab: SSO Login -->
-			<template #tab-sso="{ tab }">
+			<template #tab-sso>
 				<div class="login-section">
 					<div class="sso-providers">
 						<button
@@ -54,11 +81,69 @@
 
 <script setup>
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
 import Section from '../components/Section.vue';
 import Login from '../components/Login.vue';
+import FormField from '../components/FormField.vue';
+import RadioGroup from '../components/RadioGroup.vue';
+
+const simpleLoginRef = ref(null);
+const fullLoginRef = ref(null);
+const simulatedResponse = ref('success');
+const simulateDelay = ref(false);
+
+const simulatedResponseOptions = [
+	{ value: 'success', label: 'Success' },
+	{ value: 'wrong-password', label: 'Wrong password' },
+	{ value: 'username-not-found', label: 'Username not found' },
+	{ value: 'account-locked', label: 'Account locked' },
+	{ value: 'server-error', label: 'Server error (500)' },
+	{ value: 'network-error', label: 'Network unavailable' },
+];
+
+const simulatedResponseMessages = {
+	'wrong-password': 'Incorrect password.',
+	'username-not-found': 'No account found for that username.',
+	'account-locked': 'This account is locked. Contact support.',
+	'server-error': 'Sign-in failed. Please try again later.',
+	'network-error': 'Could not reach the server. Check your connection.',
+};
+
+const SIMULATED_DELAY_MS = 1500;
+
+function resolveSimulatedLoginErrors(responseKey) {
+	const message = simulatedResponseMessages[responseKey];
+	if (!message) {
+		return null;
+	}
+	if (responseKey === 'wrong-password') {
+		return { password: message };
+	}
+	if (responseKey === 'username-not-found') {
+		return { username: message };
+	}
+	return { form: message };
+}
 
-const router = useRouter();
+async function handleSimpleLocalLogin(credentials) {
+	try {
+		if (simulateDelay.value) {
+			await new Promise((resolve) => setTimeout(resolve, SIMULATED_DELAY_MS));
+		}
+
+		const errors = resolveSimulatedLoginErrors(simulatedResponse.value);
+		if (errors) {
+			simpleLoginRef.value?.setLocalLoginErrors(errors);
+			return;
+		}
+
+		simpleLoginRef.value?.resetLocalForm();
+		alert(`Signed in as ${credentials.username}`);
+	} catch {
+		simpleLoginRef.value?.setLocalLoginErrors({
+			form: 'Sign-in failed. Please try again later.',
+		});
+	}
+}
 
 // Custom tabs configuration
 const customTabs = ref([
@@ -154,6 +239,7 @@ function handleLocalLogin(credentials) {
 
 	// Placeholder success
 	alert(`Local login would authenticate: ${credentials.username}`);
+	fullLoginRef.value?.setLocalLoginLoading(false);
 }
 
 // Handle OAuth login
@@ -223,6 +309,13 @@ function handleSSOLogin(provider) {
 </script>
 
 <style scoped>
+.simulate-delay-label {
+	display: flex;
+	align-items: center;
+	gap: 0.5em;
+	cursor: pointer;
+}
+
 .magic-link-form,
 .sso-providers {
 	display: flex;
@@ -232,19 +325,10 @@ function handleSSOLogin(provider) {
 }
 
 .magic-link-form input {
-	padding: 0.75rem;
-	border-radius: 4px;
-	font-size: 1em;
 	width: 100%;
 	box-sizing: border-box;
 }
 
-.magic-link-form input:focus {
-	outline: none;
-	border-color: var(--primary-color, #007bff);
-	box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
-}
-
 .magic-link-form button,
 .sso-button {
 	width: 100%;

package/vue/examples/NavSectionHub.vue

@@ -0,0 +1,36 @@
+<template>
+	<Section v-if="hub" :title="hub.title" :subtitle="hub.subtitle">
+		<Navigation ref="localNavigation">
+			<NavigationGrid />
+		</Navigation>
+	</Section>
+	<Section
+		v-else
+		title="Unknown section"
+		subtitle="This navigation hub is not configured."
+	>
+		<p class="subtle">
+			Return to the welcome page and pick an example category from the top bar or sidebar.
+		</p>
+		<router-link :to="{ name: 'Welcome' }" class="button neutral">
+			Back to welcome
+		</router-link>
+	</Section>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import Section from '../components/Section.vue'
+import Navigation from '../components/Navigation.vue'
+import NavigationGrid from '../components/NavigationGrid.vue'
+import { navSectionHubs, registerHubNavigation } from '../data/navSectionHubs.js'
+
+const route = useRoute()
+const localNavigation = ref(null)
+const hub = computed(() => navSectionHubs[route.name])
+
+onMounted(() => {
+	registerHubNavigation(localNavigation.value, route.name)
+})
+</script>

package/vue/examples/PageStructure.vue

@@ -11,7 +11,7 @@
 
 	<Section title="Header" subtitle="Branding, search, and top navigation">
 		<FormLayout @submit.prevent>
-			<FormField label="Logo and title" fake>
+			<FormField label="Logo and title" component-has-label>
 				<RadioGroup
 					name="ps-branding"
 					variant="boolean"
@@ -22,7 +22,7 @@
 				/>
 			</FormField>
 
-			<FormField label="QuickSearch" fake>
+			<FormField label="QuickSearch" component-has-label>
 				<RadioGroup
 					name="ps-quicksearch"
 					variant="boolean"
@@ -33,7 +33,7 @@
 				/>
 			</FormField>
 
-			<FormField label="Dummy background search" fake :disabled="!quickSearchEnabled">
+			<FormField label="Dummy background search" component-has-label :disabled="!quickSearchEnabled">
 				<div>
 					<RadioGroup
 						name="ps-dummy-search"
@@ -51,7 +51,7 @@
 				</div>
 			</FormField>
 
-			<FormField label="Dark/Light mode button" fake>
+			<FormField label="Dark/Light mode button" component-has-label>
 				<RadioGroup
 					name="ps-theme-toggle"
 					variant="boolean"
@@ -62,7 +62,7 @@
 				/>
 			</FormField>
 
-			<FormField label="Theme switcher" fake>
+			<FormField label="Theme switcher" component-has-label>
 				<RadioGroup
 					name="ps-theme-switcher"
 					variant="boolean"
@@ -73,7 +73,7 @@
 				/>
 			</FormField>
 
-			<FormField label="Top bar" fake>
+			<FormField label="Top bar" component-has-label>
 				<div>
 					<RadioGroup
 						name="ps-topbar"
@@ -84,13 +84,15 @@
 						@update:model-value="setTopBarEnabled"
 					/>
 					<p class="subtle">
-						On narrow screens: if both are on, the sidebar takes precedence and the top bar is hidden.
-						If only the top bar is on, Header collapses it into a mobile sidebar automatically.
+						When enabled, example categories appear in the header; each opens a hub page with a
+						navigation grid of related examples. On narrow screens: if both sidebar and top bar are
+						on, the sidebar takes precedence and the top bar is hidden. If only the top bar is on,
+						Header collapses it into a mobile sidebar automatically.
 					</p>
 				</div>
 			</FormField>
 
-			<FormField label="Breadcrumbs" fake>
+			<FormField label="Breadcrumbs" component-has-label>
 				<RadioGroup
 					name="ps-breadcrumbs"
 					variant="boolean"
@@ -105,7 +107,7 @@
 
 	<Section title="Sidebar" subtitle="Primary navigation panel">
 		<FormLayout @submit.prevent>
-			<FormField label="Sidebar navigation" fake>
+			<FormField label="Sidebar navigation" component-has-label>
 				<div>
 					<RadioGroup
 						name="ps-sidebar"
@@ -116,12 +118,13 @@
 						@update:model-value="setSidebarEnabled"
 					/>
 					<p class="subtle">
-						When enabled, use the menu button in the header to open and pin the sidebar.
+						When enabled, use the menu button in the header to open and pin the sidebar. The sidebar
+						lists every example directly — hub routes are for top-bar navigation only.
 					</p>
 				</div>
 			</FormField>
 
-			<FormField label="Example link states" fake>
+			<FormField label="Example link states" component-has-label>
 				<div>
 					<RadioGroup
 						name="ps-example-links"