picocrank 1.31.0 → 1.32.0

package/package.json

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

package/router.js

@@ -15,6 +15,7 @@ import { StatusIcon } from '@hugeicons/core-free-icons';
 import { PaintBoardIcon } from '@hugeicons/core-free-icons';
 import { UserIcon } from '@hugeicons/core-free-icons';
 import { InformationCircleIcon } from '@hugeicons/core-free-icons';
+import { Loading03Icon } from '@hugeicons/core-free-icons';
 
 import {
 	hubChildBreadcrumbs,
@@ -176,6 +177,16 @@ const routes = [
       breadcrumbs: hubChildBreadcrumbs('NavFeedbackStatusHub', 'DialogExample', 'Dialog'),
     }
   },
+  {
+    name: 'LoadingAreaExample',
+    path: '/loading-area-example',
+    component: () => import('./vue/examples/LoadingAreaExample.vue'),
+    meta: {
+      title: 'Loading area',
+      icon: Loading03Icon,
+      breadcrumbs: hubChildBreadcrumbs('NavFeedbackStatusHub', 'LoadingAreaExample', 'Loading area'),
+    }
+  },
   {
     name: 'TabsExample',
     path: '/tabs-example',

package/styles/picocrank-extensions.css

@@ -91,7 +91,13 @@
 	--danger-zone-warning-fg: var(--muted-text-color);
 	--danger-zone-focus-outline: var(--karma-bad-border);
 
-	--picocrank-fixed-header-offset: 4em;
+	/* Matches Femtocrank header min-height (logo 2em + .5em padding). */
+	--picocrank-fixed-header-offset: 3em;
+}
+
+/* No fixed header → no sidebar/main offset. */
+html:not(:has(header.fixed)) {
+	--picocrank-fixed-header-offset: 0px;
 }
 
 table thead th {
@@ -172,9 +178,23 @@ select.field-invalid:focus-visible {
 }
 
 /*
- * Fixed header layout: pin the app header and offset sidebar + main content.
- * Apply .layout-fixed-header on a wrapper whose direct children are header and #layout.
+ * Fixed header layout: pin the app header and offset main content.
+ * Prefer Header's `fixed` prop (adds Femtocrank `.fixed` on <header>).
+ * Sidebar top/height use --picocrank-fixed-header-offset in Sidebar.vue
+ * (unlayered) so they are not overridden by stuck-mode defaults.
+ * Alternatively wrap with .layout-fixed-header when header and #layout are direct children.
  */
+header.fixed {
+	top: 0;
+	left: 0;
+	z-index: 5;
+}
+
+header.fixed ~ aside,
+header.fixed ~ #layout aside {
+	z-index: 3;
+}
+
 .layout-fixed-header > header {
 	position: fixed;
 	top: 0;
@@ -183,15 +203,20 @@ select.field-invalid:focus-visible {
 	z-index: 5;
 }
 
+.layout-fixed-header > aside,
 .layout-fixed-header > #layout aside {
 	z-index: 3;
-	padding-top: var(--picocrank-fixed-header-offset);
+}
 }
 
-.layout-fixed-header > #layout main {
+/*
+ * Unlayered so this wins over @layer components (same issue as Sidebar offsets).
+ * Pads #content below a fixed header — clears the chrome and leaves a readable gap.
+ */
+header.fixed ~ #layout > #content,
+.layout-fixed-header > #layout > #content {
 	padding-top: var(--picocrank-fixed-header-offset);
 }
-}
 
 /*
  * Responsive column priorities: classes col-priority-1 … col-priority-5 on th/td only
@@ -227,3 +252,68 @@ select.field-invalid:focus-visible {
 @container responsive-cols (max-width: 22rem) {
 	:is(th, td).col-priority-5 { display: none; }
 }
+
+/*
+ * Floating context menu: reuse Femtocrank nav.menu dropdown chrome, forced open
+ * for cursor-positioned / teleported menus (table rows, calendar days, etc.).
+ */
+nav.menu.context-menu {
+	position: fixed;
+	z-index: 1000;
+	margin: 0;
+}
+
+nav.menu.context-menu:focus,
+nav.menu.context-menu:focus-visible {
+	outline: none;
+}
+
+nav.menu.context-menu > ul {
+	margin: 0;
+	padding: 0;
+}
+
+nav.menu.context-menu > ul > li {
+	display: block;
+	margin: 0;
+	padding: 0;
+	border-radius: 0;
+	background: transparent;
+}
+
+nav.menu.context-menu > ul > li:hover,
+nav.menu.context-menu > ul > li:focus-within {
+	background: transparent;
+	color: inherit;
+}
+
+nav.menu.context-menu > ul > li > div {
+	display: block;
+	position: static;
+	top: auto;
+	left: auto;
+	min-width: 12em;
+	padding: var(--menu-dropdown-padding);
+	border-radius: var(--menu-dropdown-radius);
+	background-color: var(--menu-dropdown-background-color);
+	box-shadow: var(--menu-dropdown-shadow);
+}
+
+nav.menu.context-menu > ul > li > div::before {
+	content: none;
+}
+
+nav.menu.context-menu > ul div ul button.inline-icon {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.45em;
+}
+
+nav.menu.context-menu > ul div ul li[role="separator"] {
+	height: 1px;
+	margin: 0.25em 0.35em;
+	padding: 0;
+	background: var(--menu-dropdown-border-color, var(--border-color));
+	border-radius: 0;
+	pointer-events: none;
+}

package/vue/components/Calendar.vue

@@ -641,7 +641,7 @@ function onDayContextMenu(date, mouseEvent) {
 
   nextTick(() => {
     positionDayContextMenu(mouseEvent.clientX, mouseEvent.clientY)
-    dayContextMenuRef.value?.querySelector('button')?.focus()
+    dayContextMenuRef.value?.focus({ preventScroll: true })
   })
 }
 
@@ -1067,43 +1067,53 @@ watch([viewMonth, viewYear], () => {
     </div>
 
     <Teleport to="body">
-      <div
+      <nav
         v-if="dayContextMenuOpen"
         ref="dayContextMenuRef"
-        class="calendar-day-context-menu"
+        class="menu context-menu calendar-day-context-menu"
         role="menu"
+        tabindex="-1"
         :style="dayContextMenuStyle"
+        aria-label="Day view options"
         @click.stop
         @contextmenu.prevent
       >
-        <button
-          v-if="internalViewMode !== 'day'"
-          type="button"
-          role="menuitem"
-          class="calendar-day-context-menu-item"
-          @click="showOnlyThisDay"
-        >
-          Show only this day
-        </button>
-        <button
-          v-if="internalViewMode !== 'week'"
-          type="button"
-          role="menuitem"
-          class="calendar-day-context-menu-item"
-          @click="showOnlyThisWeek"
-        >
-          Show only this week
-        </button>
-        <button
-          v-if="internalViewMode !== 'month'"
-          type="button"
-          role="menuitem"
-          class="calendar-day-context-menu-item"
-          @click="showFullMonth"
-        >
-          Show full month
-        </button>
-      </div>
+        <ul class="noListStyle">
+          <li>
+            <div>
+              <ul>
+                <li v-if="internalViewMode !== 'day'">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    @click="showOnlyThisDay"
+                  >
+                    Show only this day
+                  </button>
+                </li>
+                <li v-if="internalViewMode !== 'week'">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    @click="showOnlyThisWeek"
+                  >
+                    Show only this week
+                  </button>
+                </li>
+                <li v-if="internalViewMode !== 'month'">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    @click="showFullMonth"
+                  >
+                    Show full month
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </nav>
     </Teleport>
   </div>
 </template>
@@ -1522,35 +1532,3 @@ watch([viewMonth, viewYear], () => {
   }
 }
 </style>
-
-<style>
-.calendar-day-context-menu {
-  position: fixed;
-  z-index: 1000;
-  min-width: 12rem;
-  padding: 0.35rem;
-  border: 1px solid var(--table-popover-border);
-  border-radius: 8px;
-  background: var(--table-popover-bg);
-  box-shadow: var(--table-popover-shadow);
-}
-
-.calendar-day-context-menu-item {
-  display: block;
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--table-popover-fg);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.calendar-day-context-menu-item:hover,
-.calendar-day-context-menu-item:focus-visible {
-  background: var(--table-popover-item-bg);
-  outline: none;
-}
-</style>

package/vue/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-	<header>
+	<header :class="{ fixed }">
 		<div
 			:id = "showSidebarChrome ? 'sidebar-button' : null"
 			:class="['image-and-title', 'flex-row', { 'disabled-branding': !showBranding, 'logo-home-link': !showSidebarChrome && showBranding }]"
@@ -146,6 +146,10 @@
 			type: Boolean,
 			default: false,
 		},
+		fixed: {
+			type: Boolean,
+			default: true,
+		},
 		navigation: {
 			type: Object,
 			default: null,

package/vue/components/LoadingArea.spec.js

@@ -0,0 +1,72 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import LoadingArea from './LoadingArea.vue'
+
+const globalStubs = {
+	HugeiconsIcon: true,
+}
+
+describe('LoadingArea', () => {
+	it('shows the placeholder by default', () => {
+		const wrapper = mount(LoadingArea, {
+			global: { stubs: globalStubs },
+		})
+
+		expect(wrapper.find('[role="status"]').exists()).toBe(true)
+		expect(wrapper.text()).toContain('Loading…')
+		expect(wrapper.attributes('aria-busy')).toBe('true')
+	})
+
+	it('renders default-slot content when not loading', async () => {
+		const wrapper = mount(LoadingArea, {
+			props: {
+				loading: false,
+			},
+			slots: {
+				default: '<p class="ready">Ready</p>',
+			},
+			global: { stubs: globalStubs },
+		})
+
+		await nextTick()
+
+		expect(wrapper.find('[role="status"]').exists()).toBe(false)
+		expect(wrapper.find('.ready').text()).toBe('Ready')
+		expect(wrapper.attributes('aria-busy')).toBe('false')
+	})
+
+	it('keeps content mounted in overlay mode while loading', async () => {
+		const wrapper = mount(LoadingArea, {
+			props: {
+				loading: true,
+				overlay: true,
+			},
+			slots: {
+				default: '<p class="ready">Ready</p>',
+			},
+			global: { stubs: globalStubs },
+		})
+
+		await nextTick()
+
+		expect(wrapper.find('[role="status"]').exists()).toBe(true)
+		expect(wrapper.find('.ready').exists()).toBe(true)
+		expect(wrapper.classes()).toContain('is-overlay')
+	})
+
+	it('supports a custom placeholder slot', () => {
+		const wrapper = mount(LoadingArea, {
+			props: {
+				loading: true,
+			},
+			slots: {
+				placeholder: '<span class="custom">Please wait</span>',
+			},
+			global: { stubs: globalStubs },
+		})
+
+		expect(wrapper.find('.custom').text()).toBe('Please wait')
+		expect(wrapper.text()).not.toContain('Loading…')
+	})
+})

package/vue/components/LoadingArea.vue

@@ -0,0 +1,176 @@
+<template>
+	<div
+		class="loading-area"
+		:class="{
+			'is-loading': loading,
+			'is-overlay': loading && overlay && hasContent,
+		}"
+		:style="rootStyle"
+		:aria-busy="loading ? 'true' : 'false'"
+	>
+		<div
+			v-if="loading"
+			class="loading-area-placeholder"
+			role="status"
+			aria-live="polite"
+		>
+			<slot name="placeholder">
+				<HugeiconsIcon
+					:icon="resolvedIcon"
+					class="loading-area-spinner"
+					:size="resolvedIconSize"
+					:strokeWidth="2"
+					aria-hidden="true"
+				/>
+				<p v-if="message" class="loading-area-message">{{ message }}</p>
+			</slot>
+		</div>
+
+		<div
+			v-if="hasContent"
+			v-show="!loading || overlay"
+			class="loading-area-content"
+			:aria-hidden="loading && overlay ? 'true' : undefined"
+		>
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { computed, useSlots } from 'vue'
+import { HugeiconsIcon } from '@hugeicons/vue'
+import { Loading03Icon } from '@hugeicons/core-free-icons'
+
+const props = defineProps({
+	/**
+	 * When true, shows the loading placeholder (and optionally overlays content).
+	 */
+	loading: {
+		type: Boolean,
+		default: true,
+	},
+	/**
+	 * Status text announced to assistive tech and shown under the spinner.
+	 * Pass an empty string to hide the message.
+	 */
+	message: {
+		type: String,
+		default: 'Loading…',
+	},
+	/**
+	 * Keep default-slot content in the layout and cover it with the placeholder.
+	 */
+	overlay: {
+		type: Boolean,
+		default: false,
+	},
+	/**
+	 * Hugeicons icon definition. Defaults to Loading03Icon.
+	 */
+	icon: {
+		type: [Object, Array, Function],
+		default: null,
+	},
+	/**
+	 * Spinner size in px, or a CSS length string (e.g. "1.5em").
+	 */
+	iconSize: {
+		type: [Number, String],
+		default: 28,
+	},
+	/**
+	 * Minimum height of the loading area (number = px, or any CSS length).
+	 */
+	minHeight: {
+		type: [Number, String],
+		default: null,
+	},
+})
+
+const slots = useSlots()
+
+const hasContent = computed(() => typeof slots.default === 'function')
+
+const resolvedIcon = computed(() => props.icon || Loading03Icon)
+
+const resolvedIconSize = computed(() => {
+	if (typeof props.iconSize === 'number') {
+		return props.iconSize
+	}
+	const parsed = Number.parseFloat(props.iconSize)
+	return Number.isFinite(parsed) ? parsed : 28
+})
+
+const rootStyle = computed(() => {
+	if (props.minHeight == null || props.minHeight === '') {
+		return undefined
+	}
+	const value = typeof props.minHeight === 'number'
+		? `${props.minHeight}px`
+		: props.minHeight
+	return { minHeight: value }
+})
+</script>
+
+<style scoped>
+.loading-area {
+	position: relative;
+	display: block;
+	min-width: 0;
+}
+
+.loading-area-placeholder {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 0.75rem;
+	padding: 2rem 1rem;
+	text-align: center;
+	color: var(--table-muted-fg, var(--muted-text-color));
+}
+
+.loading-area.is-overlay > .loading-area-placeholder {
+	position: absolute;
+	inset: 0;
+	z-index: 1;
+	box-sizing: border-box;
+	background-color: color-mix(in srgb, var(--section-bg-color, #fff) 78%, transparent);
+}
+
+.loading-area-spinner {
+	display: block;
+	flex: 0 0 auto;
+	animation: loading-area-spin 0.8s linear infinite;
+}
+
+.loading-area-message {
+	margin: 0;
+	font-size: 0.95em;
+}
+
+.loading-area-content {
+	min-width: 0;
+}
+
+.loading-area.is-overlay > .loading-area-content {
+	pointer-events: none;
+	user-select: none;
+}
+
+@keyframes loading-area-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.loading-area-spinner {
+		animation: none;
+	}
+}
+</style>

package/vue/components/Sidebar.vue

@@ -401,6 +401,34 @@ defineExpose({
 </script>
 
 <style scoped>
+.sidebar {
+	display: flex;
+	flex-direction: column;
+	box-sizing: border-box;
+	overflow-x: hidden;
+	overflow-y: auto;
+	overscroll-behavior: contain;
+	/*
+	 * Sit fully below a fixed Header (Navigation, pin, and scrollbar).
+	 * Offset is 0 when no header.fixed is present (see picocrank-extensions).
+	 */
+	top: var(--picocrank-fixed-header-offset);
+	height: calc(100vh - var(--picocrank-fixed-header-offset));
+	max-height: calc(100vh - var(--picocrank-fixed-header-offset));
+}
+
+/*
+ * Stuck mode: same viewport band as overlay mode; scroll the whole contents
+ * instead of growing with content (Femtocrank defaults to height: auto).
+ */
+.sidebar.stuck {
+	align-self: flex-start;
+	position: sticky;
+	top: var(--picocrank-fixed-header-offset);
+	height: calc(100vh - var(--picocrank-fixed-header-offset));
+	max-height: calc(100vh - var(--picocrank-fixed-header-offset));
+}
+
 h2 {
 	padding: .75em;
 }