picocrank 1.21.2 → 1.21.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.21.2",
+  "version": "1.21.4",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {

package/vue/components/FormField.vue

@@ -0,0 +1,30 @@
+<template>
+	<label v-if="!fake" :for="controlId">{{ label }}</label>
+	<span v-else class="fake-label">{{ label }}</span>
+	<slot />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+	label: {
+		type: String,
+		required: true,
+	},
+	for: {
+		type: String,
+		default: '',
+	},
+	htmlFor: {
+		type: String,
+		default: '',
+	},
+	fake: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+const controlId = computed(() => props.htmlFor || props.for)
+</script>

package/vue/components/FormLayout.vue

@@ -0,0 +1,8 @@
+<template>
+	<form>
+		<slot />
+		<fieldset v-if="$slots.actions">
+			<slot name="actions" />
+		</fieldset>
+	</form>
+</template>

package/vue/components/Header.vue

@@ -1,8 +1,8 @@
 <template>
 	<header>
 		<div
-			:id = "sidebarEnabled ? 'sidebar-button' : null"
-			:class="['image-and-title', 'flex-row', { 'disabled-branding': !showBranding, 'logo-home-link': !sidebarEnabled && showBranding }]"
+			:id = "showSidebarChrome ? 'sidebar-button' : null"
+			:class="['image-and-title', 'flex-row', { 'disabled-branding': !showBranding, 'logo-home-link': !showSidebarChrome && showBranding }]"
 			@click = "onImageAndTitleClick"
 		>
 			<img v-if="showBranding" :src = "logoUrl" alt = "Logo" class = "logo" />
@@ -10,12 +10,12 @@
 
 			<div class = "fg1" />
 
-			<button v-if="sidebarEnabled" id = "sidebar-toggler-button" aria-label = "Open sidebar navigation" aria-pressed = "false" aria-haspopup = "menu" class = "neutral">
+			<button v-if="showSidebarChrome" id = "sidebar-toggler-button" aria-label = "Open sidebar navigation" aria-pressed = "false" aria-haspopup = "menu" class = "neutral">
 				<HugeiconsIcon :icon = "Menu01Icon" width = "1em" height = "1em" :strokeWidth = 3 />
 			</button>
 		</div>
 
-		<TopBar v-if="topBarEnabled" :navigation="navigation" />
+		<TopBar v-if="showTopBar" :navigation="navigation" />
 
 		<Breadcrumbs v-if="breadcrumbs" />
 
@@ -40,28 +40,26 @@
 			</div>
 		</slot>
 	</header>
+
+	<!-- Top-bar-only mobile: Header owns the fallback sidebar so consumers need no extra wiring. -->
+	<Sidebar v-if="needsFallbackSidebar" ref="fallbackSidebar" :navigation="navigation" />
 </template>
 
 <script setup>
+	import { ref } from "vue";
 	import { HugeiconsIcon } from "@hugeicons/vue";
 	import { Menu01Icon, Moon02Icon, Sun01Icon } from "@hugeicons/core-free-icons";
 
 	import Breadcrumbs from "./Breadcrumbs.vue";
 	import TopBar from "./TopBar.vue";
+	import Sidebar from "./Sidebar.vue";
 	import { useTheme } from '../composables/useTheme.js';
+	import { useResponsiveNav } from '../composables/useResponsiveNav.js';
 
 	const { isDark, toggleTheme } = useTheme();
 
 	const emit = defineEmits(["toggleSidebar", "logoClick"]);
 
-	function onImageAndTitleClick() {
-		if (props.sidebarEnabled) {
-			emit("toggleSidebar");
-		} else {
-			emit("logoClick");
-		}
-	}
-
 	const props = defineProps({
 		breadcrumbs: {
 			type: Boolean,
@@ -100,6 +98,29 @@
 			default: null,
 		},
 	});
+
+	const fallbackSidebar = ref(null);
+
+	const { showTopBar, showSidebarChrome, needsFallbackSidebar } = useResponsiveNav(
+		() => props.sidebarEnabled,
+		() => props.topBarEnabled,
+	);
+
+	function toggleNavSidebar() {
+		if (needsFallbackSidebar.value) {
+			fallbackSidebar.value?.toggle();
+			return;
+		}
+		emit("toggleSidebar");
+	}
+
+	function onImageAndTitleClick() {
+		if (showSidebarChrome.value) {
+			toggleNavSidebar();
+		} else {
+			emit("logoClick");
+		}
+	}
 </script>
 
 <style scoped>
@@ -132,4 +153,4 @@ button:hover {
 .theme-toggle {
 	margin-right: 0.25rem;
 }
-</style>
+</style>

package/vue/components/QuickSearch.vue

@@ -1,57 +1,101 @@
 <template>
-  <div class="quick-search">
-    <div class="search-container">
-      <input
-        ref="searchInput"
-        v-model="searchQuery"
-        type="text"
-        class="search-input"
-        :placeholder="placeholder"
-        @input="onSearch"
-        @focus="onFocus"
-        @blur="onBlur"
-        @keydown="onKeydown"
+  <!-- Mobile: collapse to a search button in the header -->
+  <button
+    v-if="isMobile"
+    type="button"
+    class="quick-search-trigger neutral"
+    aria-label="Open search"
+    aria-haspopup="dialog"
+    :aria-expanded="overlayOpen"
+    @click="openOverlay"
+  >
+    <HugeiconsIcon :icon="SearchIcon" width="1em" height="1em" />
+  </button>
+
+  <Teleport to="body" :disabled="!isMobile">
+    <div
+      v-if="!isMobile || overlayOpen"
+      :class="{ 'quick-search-overlay-root': isMobile }"
+    >
+      <div
+        v-if="isMobile"
+        class="quick-search-backdrop"
+        aria-hidden="true"
+        @click="closeOverlay"
       />
-      <div class="search-icon">
-        <HugeiconsIcon :icon="SearchIcon" width="1em" height="1em" />
-      </div>
-    </div>
-    
-    <div v-if="showResults && filteredItems.length > 0" class="search-results">
+
       <div
-        v-for="(item, index) in filteredItems"
-        :key="item.id"
-        :class="['search-result-item', { active: selectedIndex === index }]"
-        @click="selectItem(item)"
-        @mouseenter="selectedIndex = index"
+        :class="['quick-search', { 'quick-search--overlay': isMobile }]"
+        :role="isMobile ? 'dialog' : undefined"
+        :aria-modal="isMobile ? 'true' : undefined"
+        :aria-label="isMobile ? 'Search' : undefined"
       >
-        <div class="result-content">
-          <div class="result-title" v-html="highlightText(item.title, searchQuery)"></div>
-          <div v-if="item.description" class="result-description" v-html="highlightText(item.description, searchQuery)"></div>
-          <div v-if="item.category" class="result-category">{{ item.category }}</div>
+        <div v-if="isMobile" class="quick-search-overlay-header">
+          <span class="quick-search-overlay-title">Search</span>
+          <button
+            type="button"
+            class="quick-search-overlay-close neutral"
+            aria-label="Close search"
+            @click="closeOverlay"
+          >
+            <HugeiconsIcon :icon="Cancel01Icon" width="1em" height="1em" />
+          </button>
         </div>
-        <div v-if="item.icon" class="result-icon">
-          <HugeiconsIcon :icon="item.icon" width="1.2em" height="1.2em" />
+
+        <div class="search-container">
+          <input
+            ref="searchInput"
+            v-model="searchQuery"
+            type="text"
+            class="search-input"
+            :placeholder="placeholder"
+            @input="onSearch"
+            @focus="onFocus"
+            @blur="onBlur"
+            @keydown="onKeydown"
+          />
+          <div class="search-icon">
+            <HugeiconsIcon :icon="SearchIcon" width="1em" height="1em" />
+          </div>
+        </div>
+
+        <div v-if="showResults && filteredItems.length > 0" class="search-results">
+          <div
+            v-for="(item, index) in filteredItems"
+            :key="item.id"
+            :class="['search-result-item', { active: selectedIndex === index }]"
+            @click="selectItem(item)"
+            @mouseenter="selectedIndex = index"
+          >
+            <div v-if="item.icon" class="result-icon">
+              <HugeiconsIcon :icon="item.icon" width="1.2em" height="1.2em" />
+            </div>
+            <div class="result-content">
+              <div class="result-title" v-html="highlightText(item.title, searchQuery)"></div>
+              <div v-if="item.description" class="result-description" v-html="highlightText(item.description, searchQuery)"></div>
+              <div v-if="item.category" class="result-category">{{ item.category }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="showResults && searchQuery && filteredItems.length === 0" class="no-results">
+          <div class="no-results-content">
+            <HugeiconsIcon :icon="SearchRemoveIcon" width="2em" height="2em" />
+            <p>No results found for "{{ searchQuery }}"</p>
+          </div>
         </div>
       </div>
     </div>
-    
-    <div v-if="showResults && searchQuery && filteredItems.length === 0" class="no-results">
-      <div class="no-results-content">
-        <HugeiconsIcon :icon="SearchRemoveIcon" width="2em" height="2em" />
-        <p>No results found for "{{ searchQuery }}"</p>
-      </div>
-    </div>
-  </div>
+  </Teleport>
 </template>
 
 <script setup>
 import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { HugeiconsIcon } from '@hugeicons/vue'
-import { SearchIcon } from '@hugeicons/core-free-icons'
-import { SearchRemoveIcon } from '@hugeicons/core-free-icons'
-import { ViewIcon } from '@hugeicons/core-free-icons'
+import { SearchIcon, SearchRemoveIcon, ViewIcon, Cancel01Icon } from '@hugeicons/core-free-icons'
+import { useMediaQuery } from '../composables/useMediaQuery.js'
+import { MOBILE_NAV_QUERY } from '../composables/useResponsiveNav.js'
 
 const props = defineProps({
   placeholder: {
@@ -87,6 +131,8 @@ const props = defineProps({
 const emit = defineEmits(['select', 'search', 'focus', 'blur'])
 
 const router = useRouter()
+const isMobile = useMediaQuery(MOBILE_NAV_QUERY)
+const overlayOpen = ref(false)
 const searchInput = ref(null)
 const searchQuery = ref('')
 const showResults = ref(false)
@@ -127,16 +173,35 @@ const filteredItems = computed(() => {
   return filtered.slice(0, props.maxResults)
 })
 
+function openOverlay() {
+  if (!isMobile.value) {
+    return
+  }
+  overlayOpen.value = true
+  nextTick(() => {
+    searchInput.value?.focus()
+    showResults.value = true
+  })
+}
+
+function closeOverlay() {
+  if (!overlayOpen.value) {
+    return
+  }
+  overlayOpen.value = false
+  clear()
+}
+
 function handleGlobalKeydown(event) {
   // Check if Ctrl+K is pressed
   if (event.ctrlKey && event.key === 'k') {
     event.preventDefault()
-    
+
     // Don't trigger if user is typing in an input/textarea
     if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
       return
     }
-    
+
     focus()
   }
 }
@@ -156,15 +221,31 @@ function onFocus() {
 }
 
 function onBlur() {
+  emit('blur')
+  // Keep overlay results visible on mobile; only collapse the inline dropdown.
+  if (isMobile.value) {
+    return
+  }
   // Delay hiding results to allow for click events
   setTimeout(() => {
     showResults.value = false
     selectedIndex.value = -1
-    emit('blur')
   }, 150)
 }
 
 function onKeydown(event) {
+  if (event.key === 'Escape') {
+    if (isMobile.value && overlayOpen.value) {
+      event.preventDefault()
+      closeOverlay()
+      return
+    }
+    showResults.value = false
+    selectedIndex.value = -1
+    searchInput.value?.blur()
+    return
+  }
+
   if (!showResults.value || filteredItems.value.length === 0) return
   
   switch (event.key) {
@@ -182,11 +263,6 @@ function onKeydown(event) {
         selectItem(filteredItems.value[selectedIndex.value])
       }
       break
-    case 'Escape':
-      showResults.value = false
-      selectedIndex.value = -1
-      searchInput.value.blur()
-      break
   }
 }
 
@@ -205,6 +281,10 @@ function selectItem(item) {
   searchQuery.value = ''
   showResults.value = false
   selectedIndex.value = -1
+
+  if (isMobile.value && overlayOpen.value) {
+    overlayOpen.value = false
+  }
 }
 
 function highlightText(text, query) {
@@ -241,10 +321,18 @@ function setItems(newItems) {
 }
 
 function focus() {
+  if (isMobile.value) {
+    openOverlay()
+    return
+  }
   searchInput.value?.focus()
 }
 
 function blur() {
+  if (isMobile.value && overlayOpen.value) {
+    closeOverlay()
+    return
+  }
   searchInput.value?.blur()
 }
 
@@ -260,6 +348,19 @@ function refreshRoutes() {
   }
 }
 
+watch(isMobile, (mobile) => {
+  if (!mobile && overlayOpen.value) {
+    closeOverlay()
+  }
+})
+
+watch(overlayOpen, (open) => {
+  if (typeof document === 'undefined') {
+    return
+  }
+  document.body.style.overflow = open ? 'hidden' : ''
+})
+
 // Global shortcut management
 onMounted(() => {
   if (props.enableGlobalShortcut) {
@@ -276,6 +377,9 @@ onUnmounted(() => {
   if (props.enableGlobalShortcut) {
     document.removeEventListener('keydown', handleGlobalKeydown)
   }
+  if (typeof document !== 'undefined') {
+    document.body.style.overflow = ''
+  }
 })
 
 // Watch for external items changes
@@ -293,18 +397,87 @@ defineExpose({
   blur,
   clear,
   refreshRoutes,
+  openOverlay,
+  closeOverlay,
   searchQuery,
   filteredItems,
-  showResults
+  showResults,
+  overlayOpen
 })
 </script>
 
 <style scoped>
+.quick-search-trigger {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  color: #fff;
+  padding: 0.5em;
+  cursor: pointer;
+  background: transparent;
+}
+
+.quick-search-trigger:hover {
+  background-color: var(--header-hover-background-color);
+  color: var(--header-hover-text-color);
+}
+
+.quick-search-overlay-root {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 1rem;
+  padding-top: max(1rem, env(safe-area-inset-top));
+}
+
+.quick-search-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+}
+
 .quick-search {
   position: relative;
   width: 100%;
 }
 
+.quick-search--overlay {
+  position: relative;
+  z-index: 1;
+  width: min(100%, 28rem);
+  margin-top: 10vh;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  background: #fff;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
+}
+
+.quick-search-overlay-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.quick-search-overlay-title {
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.quick-search-overlay-close {
+  border: 0;
+  padding: 0.35em;
+  cursor: pointer;
+  color: #1f2937;
+  background: transparent;
+}
+
 .search-container {
   position: relative;
   display: flex;
@@ -323,6 +496,16 @@ defineExpose({
   color: #fff;
 }
 
+.quick-search--overlay .search-input {
+  background-color: #f3f4f6;
+  color: #111827;
+  padding: 0.65em 2.25em 0.65em 0.75em;
+}
+
+.quick-search--overlay .search-input::placeholder {
+  color: #9ca3af;
+}
+
 .search-input::placeholder {
   color: #bbb;
 }
@@ -354,6 +537,19 @@ defineExpose({
   z-index: 1000;
 }
 
+.quick-search--overlay .search-results,
+.quick-search--overlay .no-results {
+  position: relative;
+  top: auto;
+  left: auto;
+  right: auto;
+  margin-top: 0.5rem;
+  border: 1px solid #e1e5e9;
+  border-radius: 0.4rem;
+  max-height: min(50vh, 320px);
+  box-shadow: none;
+}
+
 .search-result-item {
   display: flex;
   align-items: center;
@@ -397,7 +593,7 @@ defineExpose({
 }
 
 .result-icon {
-  margin-left: 0.75rem;
+  margin-right: 0.75rem;
   color: #6b7280;
   flex-shrink: 0;
 }
@@ -438,6 +634,20 @@ mark {
 
 /* Dark theme */
 html[data-theme="dark"] {
+  .quick-search--overlay {
+    background: #111827;
+  }
+
+  .quick-search-overlay-title,
+  .quick-search-overlay-close {
+    color: #f9fafb;
+  }
+
+  .quick-search--overlay .search-input {
+    background-color: #1f2937;
+    color: #f9fafb;
+  }
+
   .search-input {
     background-color: #1f2937;
     border-color: #374151;
@@ -492,20 +702,14 @@ html[data-theme="dark"] {
     color: #9ca3af;
   }
 
+  .quick-search--overlay .search-results,
+  .quick-search--overlay .no-results {
+    border-color: #374151;
+  }
+
   mark {
     background-color: #451a03;
     color: #fbbf24;
   }
 }
-
-/* Responsive */
-@media (max-width: 640px) {
-  .quick-search {
-    max-width: 100%;
-  }
-  
-  .search-results {
-    max-height: 250px;
-  }
-}
 </style>

package/vue/components/Sidebar.vue

@@ -96,15 +96,46 @@ import { Pin02Icon, PinIcon, ArrowDown01Icon, ArrowRight01Icon } from '@hugeicon
 
 const STORAGE_KEY = 'picocrank-nav-sections-collapsed'
 
+const props = defineProps({
+	navigation: {
+		type: Object,
+		default: null,
+	},
+})
+
 const isOpen = ref(false)
 const isStuck = ref(false)
 const sidebarRef = ref(null)
 const route = useRoute()
 
-const navigation = inject('navigation', null)
+const injectedNavigation = inject('navigation', null)
+
+const navigation = computed(() => {
+	const nav = props.navigation || injectedNavigation
+	if (!nav) return null
+	// Component ref (or ref-like): use exposed API
+	if (nav.value) {
+		return nav.value
+	}
+	return nav
+})
+
+const navigationLinks = computed(() => {
+	const nav = navigation.value
+	if (!nav?.navigationLinks) {
+		return []
+	}
+	const links = nav.navigationLinks
+	return Array.isArray(links) ? links : (links?.value ?? [])
+})
 
-const navigationLinks = navigation ? navigation.navigationLinks : ref([])
-const isActive = navigation ? navigation.isActive : (() => false)
+function isActive(link) {
+	const nav = navigation.value
+	if (!nav?.isActive) {
+		return false
+	}
+	return nav.isActive(link)
+}
 
 function loadCollapsedSections() {
 	try {

package/vue/composables/useMediaQuery.js

@@ -0,0 +1,50 @@
+import { ref, onUnmounted } from 'vue'
+
+/** Shared matchMedia state keyed by query string. */
+const stores = new Map()
+
+/**
+ * Reactive match for a CSS media query (e.g. '(max-width: 768px)').
+ * Identical queries share one listener so callers stay in sync.
+ */
+export function useMediaQuery(query) {
+	let store = stores.get(query)
+
+	if (!store) {
+		const getMatches = () =>
+			typeof window !== 'undefined' && window.matchMedia(query).matches
+
+		const matches = ref(getMatches())
+		let mediaQueryList = null
+
+		function onChange(event) {
+			matches.value = event.matches
+		}
+
+		if (typeof window !== 'undefined') {
+			mediaQueryList = window.matchMedia(query)
+			matches.value = mediaQueryList.matches
+			mediaQueryList.addEventListener('change', onChange)
+		}
+
+		store = {
+			matches,
+			mediaQueryList,
+			onChange,
+			subscriberCount: 0,
+		}
+		stores.set(query, store)
+	}
+
+	store.subscriberCount += 1
+
+	onUnmounted(() => {
+		store.subscriberCount -= 1
+		if (store.subscriberCount <= 0 && store.mediaQueryList) {
+			store.mediaQueryList.removeEventListener('change', store.onChange)
+			stores.delete(query)
+		}
+	})
+
+	return store.matches
+}

package/vue/composables/useResponsiveNav.js

@@ -0,0 +1,42 @@
+import { computed, toValue } from 'vue'
+import { useMediaQuery } from './useMediaQuery.js'
+
+/** Matches Sidebar mobile breakpoint. */
+export const MOBILE_NAV_QUERY = '(max-width: 768px)'
+
+/**
+ * Mobile nav precedence:
+ * - Sidebar + top bar → sidebar wins; top bar is hidden
+ * - Top bar only → top bar wins; Header mounts a fallback sidebar
+ * - Sidebar only → sidebar
+ *
+ * Explicit sidebar mounting stays with the app. Header owns the top-bar-only
+ * mobile fallback via `needsFallbackSidebar`.
+ */
+export function useResponsiveNav(sidebarEnabled, topBarEnabled) {
+	const isMobile = useMediaQuery(MOBILE_NAV_QUERY)
+
+	const hasExplicitSidebar = computed(() => !!toValue(sidebarEnabled))
+	const topBarOnly = computed(
+		() => !!toValue(topBarEnabled) && !toValue(sidebarEnabled),
+	)
+
+	const needsFallbackSidebar = computed(
+		() => topBarOnly.value && isMobile.value,
+	)
+
+	const showSidebarChrome = computed(
+		() => hasExplicitSidebar.value || needsFallbackSidebar.value,
+	)
+
+	const showTopBar = computed(
+		() => !!toValue(topBarEnabled) && !isMobile.value,
+	)
+
+	return {
+		isMobile,
+		showTopBar,
+		showSidebarChrome,
+		needsFallbackSidebar,
+	}
+}

package/vue/views/App.vue

@@ -1,17 +1,17 @@
 <template>
-	<Header username = "Guest" @toggleSidebar="toggleSidebar" @logoClick="goToIndex" title = "PicoCrank" :logoUrl="logoUrl" :sidebarEnabled="sidebarEnabled" :navigation="navigation" :topBarEnabled="topBarEnabled" :showBranding="brandingEnabled" :breadcrumbs="breadcrumbsEnabled" :themeToggleEnabled="true">
-		<template #toolbar>
-			<QuickSearch
-				v-if="quickSearchEnabled"
-				ref="quickSearchRef"
-				placeholder="Search items..."
-				:search-fields="['title', 'name']"
-				:max-results="15"
-			/>
-		</template>
-	</Header>
-
 	<Navigation ref="navigation">
+		<Header username = "Guest" @toggleSidebar="toggleSidebar" @logoClick="goToIndex" title = "PicoCrank" :logoUrl="logoUrl" :sidebarEnabled="sidebarEnabled" :navigation="navigation" :topBarEnabled="topBarEnabled" :showBranding="brandingEnabled" :breadcrumbs="breadcrumbsEnabled" :themeToggleEnabled="true">
+			<template #toolbar>
+				<QuickSearch
+					v-if="quickSearchEnabled"
+					ref="quickSearchRef"
+					placeholder="Search items..."
+					:search-fields="['title', 'name']"
+					:max-results="15"
+				/>
+			</template>
+		</Header>
+
 		<div id = "layout">
 			<Sidebar v-if="sidebarEnabled" ref = "sidebar" />
 

package/vue/views/ButtonsExample.vue

@@ -20,14 +20,14 @@
 	</Section>
 
 	<Section title="Form actions" subtitle="Semantic button types in a fieldset">
-		<form class="buttons-demo-form" @submit.prevent="onSubmit">
-			<fieldset>
+		<FormLayout class="buttons-demo-form" @submit.prevent="onSubmit">
+			<template #actions>
 				<button type="submit">Submit</button>
 				<button type="cancel">Cancel</button>
 				<button type="reset" @click="onReset">Reset</button>
-			</fieldset>
-			<p v-if="lastAction" class="subtle">{{ lastAction }}</p>
-		</form>
+			</template>
+		</FormLayout>
+		<p v-if="lastAction" class="subtle">{{ lastAction }}</p>
 	</Section>
 
 	<Section title="Links as buttons" subtitle="Anchor elements with the .button class">
@@ -68,6 +68,7 @@
 <script setup>
 import { ref } from 'vue'
 import Section from '../components/Section.vue'
+import FormLayout from '../components/FormLayout.vue'
 
 const lastAction = ref('')
 

package/vue/views/FormExample.vue

@@ -7,181 +7,176 @@
 			<button @click="resetForm">Reset</button>
 		</template>
 
-		<form @submit.prevent="handleSubmit">
-			<!-- Name -->
-			<label for="name">Name</label>
-			<input 
-				id="name"
-				v-model="formData.name" 
-				type="text" 
-				placeholder="Enter your name"
-				required
-			/>
-
-			<!-- Role (radio group) -->
-			<span class="fake-label">Role</span>
-			<div class="radio-group">
-				<label>
-					<input 
-						type="radio" 
-						name="role"
-						value="sales"
-						v-model="formData.role"
-					/>
-					<span>Sales</span>
-				</label>
-				<label>
-					<input 
-						type="radio" 
-						name="role"
-						value="engineering"
-						v-model="formData.role"
-					/>
-					<span>Engineering</span>
-				</label>
-				<label>
-					<input 
-						type="radio" 
-						name="role"
-						value="hr"
-						v-model="formData.role"
-					/>
-					<span>HR</span>
-				</label>
-			</div>
-
-			<!-- Salary (select) -->
-			<label for="salary">Salary</label>
-			<select id="salary" v-model="formData.salary">
-				<option value="0">Select a salary</option>
-				<option value="10000">£10,000</option>
-				<option value="20000">£20,000</option>
-				<option value="30000">£30,000</option>
-				<option value="40000">£40,000</option>
-				<option value="50000">£50,000</option>
-			</select>
-
-			<!-- Email -->
-			<label for="email">Email</label>
-			<input 
-				id="email"
-				v-model="formData.email" 
-				type="email" 
-				placeholder="Enter your email"
-				required
-			/>
-
-			<!-- Administrator checkbox -->
-			<label>Is Administrator?</label>
-			<input 
-				type="checkbox" 
-				id="is-admin"
-				v-model="formData.isAdmin"
-			/>
-
-			<!-- Website -->
-			<label for="website">Website</label>
-			<input 
-				id="website"
-				v-model="formData.website" 
-				type="url" 
-				placeholder="https://example.com"
-			/>
-
-			<!-- Favourite food (disabled) -->
-			<label for="favourite-food">Favourite Food</label>
-			<input 
-				id="favourite-food"
-				v-model="formData.favouriteFood"
-				type="text"
-				placeholder="e.g. Pizza"
-				disabled
-			/>
-
-			<!-- Favourite colour -->
-			<label for="favourite-colour">Favourite Colour</label>
-			<input
-				id="favourite-colour"
-				v-model="formData.favouriteColour"
-				type="color"
-			/>
-
-			<!-- Favourite number -->
-			<label for="favourite-number">Favourite Number</label>
-			<input
-				id="favourite-number"
-				v-model.number="formData.favouriteNumber"
-				type="number"
-				min="0"
-				max="100"
-				step="1"
-			/>
-
-			<!-- Newsletters (checkbox group) -->
-			<span class="fake-label">
-				Newsletters
-			</span>
-			<div>
-				<label>
-					<input 
-						type="checkbox"
-						id="newsletter1"
-						v-model="formData.newsletter1"
-					/>
-					<span>Newsletter 1</span>
-				</label>
-
-				<label>
-					<input 
-						type="checkbox"
-						id="newsletter2"
-						v-model="formData.newsletter2"
-					/>
-					<span>Newsletter 2</span>
-				</label>
-			</div>
-
-			<!-- Comments -->
-			<label for="comments">Comments</label>
-			<textarea
-				id="comments"
-				v-model="formData.comments"
-			></textarea>
-
-			<!-- Readonly textarea -->
-			<label for="readonly">Readonly</label>
-			<textarea
-				id="readonly"
-				v-model="formData.readonlyText"
-				readonly
-			></textarea>
-
-			<!-- Disabled textarea -->
-			<label for="disabled">Disabled</label>
-			<textarea
-				id="disabled"
-				v-model="formData.disabledText"
-				disabled
-			></textarea>
-
-			<!-- Datetime -->
-			<label for="datetime">
-				Datetime
-			</label>
-			<input
-				id="datetime"
-				type="datetime-local"
-				v-model="formData.datetime"
-			/>
-
-			<!-- Buttons in fieldset to match simple.html -->
-			<fieldset>
+		<FormLayout @submit.prevent="handleSubmit">
+			<FormField label="Name" for="name">
+				<input 
+					id="name"
+					v-model="formData.name" 
+					type="text" 
+					placeholder="Enter your name"
+					required
+				/>
+			</FormField>
+
+			<FormField label="Role" fake>
+				<div class="radio-group">
+					<label>
+						<input 
+							type="radio" 
+							name="role"
+							value="sales"
+							v-model="formData.role"
+						/>
+						<span>Sales</span>
+					</label>
+					<label>
+						<input 
+							type="radio" 
+							name="role"
+							value="engineering"
+							v-model="formData.role"
+						/>
+						<span>Engineering</span>
+					</label>
+					<label>
+						<input 
+							type="radio" 
+							name="role"
+							value="hr"
+							v-model="formData.role"
+						/>
+						<span>HR</span>
+					</label>
+				</div>
+			</FormField>
+
+			<FormField label="Salary" for="salary">
+				<select id="salary" v-model="formData.salary">
+					<option value="0">Select a salary</option>
+					<option value="10000">£10,000</option>
+					<option value="20000">£20,000</option>
+					<option value="30000">£30,000</option>
+					<option value="40000">£40,000</option>
+					<option value="50000">£50,000</option>
+				</select>
+			</FormField>
+
+			<FormField label="Email" for="email">
+				<input 
+					id="email"
+					v-model="formData.email" 
+					type="email" 
+					placeholder="Enter your email"
+					required
+				/>
+			</FormField>
+
+			<FormField label="Is Administrator?">
+				<input 
+					type="checkbox" 
+					id="is-admin"
+					v-model="formData.isAdmin"
+				/>
+			</FormField>
+
+			<FormField label="Website" for="website">
+				<input 
+					id="website"
+					v-model="formData.website" 
+					type="url" 
+					placeholder="https://example.com"
+				/>
+			</FormField>
+
+			<FormField label="Favourite Food" for="favourite-food">
+				<input 
+					id="favourite-food"
+					v-model="formData.favouriteFood"
+					type="text"
+					placeholder="e.g. Pizza"
+					disabled
+				/>
+			</FormField>
+
+			<FormField label="Favourite Colour" for="favourite-colour">
+				<input
+					id="favourite-colour"
+					v-model="formData.favouriteColour"
+					type="color"
+				/>
+			</FormField>
+
+			<FormField label="Favourite Number" for="favourite-number">
+				<input
+					id="favourite-number"
+					v-model.number="formData.favouriteNumber"
+					type="number"
+					min="0"
+					max="100"
+					step="1"
+				/>
+			</FormField>
+
+			<FormField label="Newsletters" fake>
+				<div>
+					<label>
+						<input 
+							type="checkbox"
+							id="newsletter1"
+							v-model="formData.newsletter1"
+						/>
+						<span>Newsletter 1</span>
+					</label>
+
+					<label>
+						<input 
+							type="checkbox"
+							id="newsletter2"
+							v-model="formData.newsletter2"
+						/>
+						<span>Newsletter 2</span>
+					</label>
+				</div>
+			</FormField>
+
+			<FormField label="Comments" for="comments">
+				<textarea
+					id="comments"
+					v-model="formData.comments"
+				></textarea>
+			</FormField>
+
+			<FormField label="Readonly" for="readonly">
+				<textarea
+					id="readonly"
+					v-model="formData.readonlyText"
+					readonly
+				></textarea>
+			</FormField>
+
+			<FormField label="Disabled" for="disabled">
+				<textarea
+					id="disabled"
+					v-model="formData.disabledText"
+					disabled
+				></textarea>
+			</FormField>
+
+			<FormField label="Datetime" for="datetime">
+				<input
+					id="datetime"
+					type="datetime-local"
+					v-model="formData.datetime"
+				/>
+			</FormField>
+
+			<template #actions>
 				<button type="submit">Submit</button>
 				<button type="button" @click="handleCancel">Cancel</button>
 				<button type="reset" @click="resetForm">Reset</button>
 				<button type="submit" disabled>Disabled</button>
-			</fieldset>
-		</form>
+			</template>
+		</FormLayout>
 
 		<div v-if="submitted" class="form-result">
 			<h3>Form Submitted!</h3>
@@ -193,6 +188,8 @@
 <script setup>
 import { ref } from 'vue'
 import Section from '../components/Section.vue'
+import FormLayout from '../components/FormLayout.vue'
+import FormField from '../components/FormField.vue'
 
 const formData = ref({
 	name: '',
@@ -246,4 +243,4 @@ function resetForm() {
 	}
 	submitted.value = false
 }
-</script>
+</script>

package/vue/views/PageStructure.vue

@@ -33,6 +33,9 @@
 					/>
 					<span>Show QuickSearch in the header toolbar</span>
 				</label>
+				<p class="subtle">
+					On narrow screens it collapses to a search button that opens search in an overlay.
+				</p>
 			</dd>
 
 			<dt>Top bar</dt>
@@ -45,6 +48,10 @@
 					/>
 					<span>Show horizontal navigation links below the header</span>
 				</label>
+				<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.
+				</p>
 			</dd>
 
 			<dt>Breadcrumbs</dt>

package/vue/views/StatusExample.vue

@@ -89,15 +89,16 @@
 		title="In context"
 		subtitle="Inline notifications beside or below form fields"
 	>
-		<form class="status-form" @submit.prevent="submitForm">
-			<label for="status-email">Email</label>
-			<input
-				id="status-email"
-				v-model="formEmail"
-				type="email"
-				placeholder="you@example.com"
-				required
-			/>
+		<FormLayout class="status-form" @submit.prevent="submitForm">
+			<FormField label="Email" for="status-email">
+				<input
+					id="status-email"
+					v-model="formEmail"
+					type="email"
+					placeholder="you@example.com"
+					required
+				/>
+			</FormField>
 
 			<p
 				v-if="formMessage"
@@ -109,17 +110,19 @@
 				{{ formMessage }}
 			</p>
 
-			<fieldset>
+			<template #actions>
 				<button type="submit" class="good">Save</button>
 				<button type="button" @click="clearForm">Clear</button>
-			</fieldset>
-		</form>
+			</template>
+		</FormLayout>
 	</Section>
 </template>
 
 <script setup>
 import { ref, computed } from 'vue'
 import Section from '../components/Section.vue'
+import FormLayout from '../components/FormLayout.vue'
+import FormField from '../components/FormField.vue'
 import { useNotificationPopups } from '../composables/useNotificationPopups.js'
 
 const { show: showPopup, dismissAll: dismissAllPopups } = useNotificationPopups()