picocrank 1.36.0 → 1.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.36.0",
+  "version": "1.37.0",
   "type": "module",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
@@ -24,25 +24,25 @@
     "url": "https://github.com/jamesread/picocrank/issues"
   },
   "dependencies": {
-    "@hugeicons/core-free-icons": "^4.3.0",
+    "@hugeicons/core-free-icons": "^4.3.5",
     "@hugeicons/vue": "^1.0.8",
-    "@vitejs/plugin-vue": "^6.0.8",
-    "femtocrank": "^2.7.1",
+    "@vitejs/plugin-vue": "^6.0.10",
+    "femtocrank": "^2.7.2",
     "unplugin-vue-components": "^32.1.0",
-    "vite": "^8.2.2",
-    "vue": "^3.5.42",
-    "vue-router": "^5.3.1"
+    "vite": "^8.3.4",
+    "vue": "^3.5.43",
+    "vue-router": "^5.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@vitest/coverage-v8": "^5.0.0",
-    "@vue/test-utils": "^2.5.0",
-    "eslint": "^10.10.0",
-    "eslint-plugin-vue": "^10.11.0",
-    "globals": "^17.12.0",
-    "happy-dom": "^20.14.0",
+    "@vitest/coverage-v8": "^5.0.3",
+    "@vue/test-utils": "^2.5.1",
+    "eslint": "^10.12.0",
+    "eslint-plugin-vue": "^10.11.1",
+    "globals": "^17.13.0",
+    "happy-dom": "^20.14.6",
     "semantic-release": "^25.0.9",
-    "vitest": "^5.0.0",
+    "vitest": "^5.0.3",
     "vue-eslint-parser": "^10.4.1"
   },
   "homepage": "https://github.com/jamesread/picocrank#readme"

package/router.js

@@ -19,6 +19,7 @@ import { InformationCircleIcon } from '@hugeicons/core-free-icons';
 import { Loading03Icon } from '@hugeicons/core-free-icons';
 import { DragDropVerticalIcon } from '@hugeicons/core-free-icons';
 import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import { LayoutTopIcon } from '@hugeicons/core-free-icons';
 
 import {
 	hubChildBreadcrumbs,
@@ -200,6 +201,16 @@ const routes = [
       breadcrumbs: hubChildBreadcrumbs('NavFeedbackStatusHub', 'DialogExample', 'Dialog'),
     }
   },
+  {
+    name: 'PageToolbarExample',
+    path: '/page-toolbar-example',
+    component: () => import('./vue/examples/PageToolbarExample.vue'),
+    meta: {
+      title: 'Page toolbar',
+      icon: LayoutTopIcon,
+      breadcrumbs: hubChildBreadcrumbs('NavLayoutsHub', 'PageToolbarExample', 'Page toolbar'),
+    }
+  },
   {
     name: 'LoadingAreaExample',
     path: '/loading-area-example',

package/vue/components/PageToolbar.spec.js

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PageToolbar from './PageToolbar.vue'
+
+describe('PageToolbar', () => {
+	it('renders default-slot content in a toolbar', () => {
+		const wrapper = mount(PageToolbar, {
+			slots: {
+				default: '<button type="button">Refresh</button>',
+			},
+		})
+
+		expect(wrapper.attributes('role')).toBe('toolbar')
+		expect(wrapper.find('button').text()).toBe('Refresh')
+		expect(wrapper.attributes('aria-label')).toBeUndefined()
+	})
+
+	it('sets aria-label from the label prop', () => {
+		const wrapper = mount(PageToolbar, {
+			props: { label: 'Projects' },
+		})
+
+		expect(wrapper.attributes('aria-label')).toBe('Projects')
+	})
+})

package/vue/components/PageToolbar.vue

@@ -0,0 +1,54 @@
+<template>
+	<div class="page-toolbar" role="toolbar" :aria-label="label || undefined">
+		<slot />
+	</div>
+</template>
+
+<script setup>
+defineProps({
+	label: {
+		type: String,
+		default: '',
+	},
+})
+</script>
+
+<style scoped>
+/*
+ * Page-level toolbar that sticks under the fixed header and looks like a
+ * Femtocrank section joined to it (square top, rounded bottom).
+ * Override --page-toolbar-pull to match main's top padding (0 when main has none).
+ */
+.page-toolbar {
+	--page-toolbar-pull: 1em;
+	position: sticky;
+	top: var(--picocrank-fixed-header-offset);
+	/* Below header.fixed (5) so its drop shadow draws over the toolbar. */
+	z-index: 4;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 0.5rem;
+	margin-top: calc(-1 * var(--page-toolbar-pull));
+	margin-bottom: 1rem;
+	padding: calc(0.5rem + var(--page-toolbar-pull)) 1rem 0.5rem;
+	background-color: var(--section-bg-color);
+	border-radius: 0 0 .4em .4em;
+	box-shadow: 0 0 .5em var(--shadow-color);
+}
+
+.page-toolbar :slotted(button),
+.page-toolbar :slotted(.button) {
+	padding: 0.4em 1em;
+	line-height: normal;
+	flex-shrink: 0;
+}
+
+/* Femtocrank drops main's padding on narrow screens. */
+@media (max-width: 600px) {
+	.page-toolbar {
+		--page-toolbar-pull: 0px;
+	}
+}
+</style>

package/vue/data/navSectionHubs.js

@@ -51,6 +51,11 @@ export const navSectionHubs = {
 				title: 'Accordion',
 				options: { description: 'Collapsible subsections' },
 			},
+			{
+				name: 'PageToolbarExample',
+				title: 'Page toolbar',
+				options: { description: 'Sticky page-level actions joined to the header' },
+			},
 		],
 	},
 	NavDataDisplayHub: {

package/vue/examples/PageToolbarExample.vue

@@ -0,0 +1,31 @@
+<template>
+	<PageToolbar label="Page actions">
+		<span class="subtle">{{ selected }} selected</span>
+		<button type="button" class="neutral" @click="selected++">Select another</button>
+		<button type="button" class="good">Save</button>
+	</PageToolbar>
+
+	<Section
+		title="Page toolbar"
+		:icon="Menu01Icon"
+		subtitle="Sticky page-level actions joined to the header"
+	>
+		<p>
+			Use <code>&lt;PageToolbar&gt;</code> when a page's actions apply to several
+			sibling sections, instead of wrapping them in one parent section (sections
+			cannot contain sections). It sticks under the fixed header while the page
+			scrolls. Scroll down to see it stay in place.
+		</p>
+	</Section>
+
+	<Section v-for="n in 6" :key="n" :title="`Group ${n}`">
+		<p v-for="line in 4" :key="line">Placeholder content line {{ line }} for group {{ n }}.</p>
+	</Section>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Menu01Icon } from '@hugeicons/core-free-icons'
+
+const selected = ref(0)
+</script>