picocrank 1.31.0 → 1.31.1

package/package.json

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

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

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/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;
 }

package/vue/components/StatusCard.vue

@@ -0,0 +1,211 @@
+<template>
+	<component
+		:is="rootComponent"
+		v-bind="rootBindings"
+		:class="rootClasses"
+	>
+		<div
+			v-if="karma"
+			class="status-card-bar"
+			:class="{ 'status-card-bar--labeled': Boolean(barLabel) }"
+		>
+			<span
+				v-if="barLabel"
+				class="status-card-bar-label"
+			>{{ barLabel }}</span>
+		</div>
+		<div class="status-card-body">
+			<slot />
+		</div>
+	</component>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+
+const props = defineProps({
+	karma: {
+		type: String,
+		default: '',
+		validator: (value) => (
+			value === ''
+			|| ['info', 'note', 'success', 'good', 'warning', 'severe', 'critical', 'error', 'bad', 'old'].includes(value)
+		),
+	},
+	barLabel: {
+		type: String,
+		default: '',
+	},
+	align: {
+		type: String,
+		default: 'start',
+		validator: (value) => ['start', 'center'].includes(value),
+	},
+	compact: {
+		type: Boolean,
+		default: false,
+	},
+	to: {
+		type: [String, Object],
+		default: null,
+	},
+	href: {
+		type: String,
+		default: '',
+	},
+})
+
+const isLink = computed(() => Boolean(props.to || props.href))
+
+const rootComponent = computed(() => {
+	if (props.to) {
+		return RouterLink
+	}
+	if (props.href) {
+		return 'a'
+	}
+	return 'div'
+})
+
+const rootBindings = computed(() => {
+	if (props.to) {
+		return { to: props.to }
+	}
+	if (props.href) {
+		return { href: props.href }
+	}
+	return {}
+})
+
+const rootClasses = computed(() => ({
+	'status-card': true,
+	'status-card--link': isLink.value,
+	[`status-card--${props.karma}`]: Boolean(props.karma),
+	[`status-card--align-${props.align}`]: true,
+	'status-card--compact': props.compact,
+}))
+</script>
+
+<style scoped>
+.status-card {
+	display: flex;
+	align-items: stretch;
+	position: relative;
+	padding: 0;
+	overflow: hidden;
+	background: transparent;
+	border: 1px solid var(--nav-grid-border);
+	border-radius: 8px;
+	color: inherit;
+	text-align: left;
+	transition: all 0.2s ease;
+}
+
+a.status-card {
+	text-decoration: none;
+	cursor: pointer;
+}
+
+.status-card:hover {
+	border-color: var(--nav-grid-accent-fg);
+	background: var(--nav-grid-hover-bg);
+	color: var(--text-color);
+	transform: translateY(-2px);
+	box-shadow: 0 4px 8px var(--nav-grid-hover-shadow);
+}
+
+.status-card-bar {
+	position: relative;
+	flex: 0 0 0.35em;
+	width: 0.35em;
+}
+
+.status-card-bar--labeled {
+	flex-basis: 1.35em;
+	width: 1.35em;
+}
+
+.status-card-bar-label {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%) rotate(270deg);
+	font-size: 0.65em;
+	font-weight: 600;
+	letter-spacing: 0.06em;
+	line-height: 1;
+	text-transform: uppercase;
+	white-space: nowrap;
+	color: var(--text-color);
+	user-select: none;
+}
+
+.status-card-body {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	justify-content: flex-start;
+	gap: 0.25rem;
+	min-width: 0;
+	padding: 1.25rem 0.75rem;
+}
+
+.status-card--compact .status-card-body {
+	padding: 0.75rem 0.5rem;
+	gap: 0.15rem;
+}
+
+.status-card--align-start .status-card-body {
+	align-items: flex-start;
+	text-align: left;
+}
+
+.status-card--align-center .status-card-body {
+	align-items: center;
+	text-align: center;
+}
+
+.status-card-body :deep(h4) {
+	margin: 0;
+}
+
+.status-card-body :deep(.subtle) {
+	margin-top: 0.35rem;
+}
+
+.status-card--compact .status-card-body :deep(.subtle) {
+	margin-top: 0.2rem;
+}
+
+.status-card--good .status-card-bar,
+.status-card--success .status-card-bar {
+	background-color: var(--karma-good-tint);
+}
+
+.status-card--bad .status-card-bar,
+.status-card--critical .status-card-bar,
+.status-card--error .status-card-bar {
+	background-color: var(--karma-bad-tint);
+}
+
+.status-card--warning .status-card-bar {
+	background-color: var(--karma-warning-tint);
+}
+
+.status-card--severe .status-card-bar {
+	background-color: var(--karma-severe-tint);
+}
+
+.status-card--note .status-card-bar {
+	background-color: var(--karma-note-tint);
+}
+
+.status-card--info .status-card-bar {
+	background-color: var(--karma-info-tint);
+}
+
+.status-card--old .status-card-bar {
+	background-color: var(--karma-old-tint);
+}
+</style>

package/vue/examples/Admin.vue

@@ -8,67 +8,99 @@
 			<div class="admin-section">
 				<h3>System Overview</h3>
 				<p>Welcome to the administrative panel. This is a placeholder for administrative functionality.</p>
+
+				<FormLayout @submit.prevent>
+					<FormField
+						label="Grid"
+						component-has-label
+						description="How many StatusCard columns to show."
+					>
+						<RadioGroup
+							v-model="gridLayout"
+							name="status-card-grid"
+							variant="boolean"
+							:options="gridLayoutOptions"
+						/>
+					</FormField>
+
+					<FormField label="Content align" component-has-label>
+						<RadioGroup
+							v-model="cardAlign"
+							name="status-card-align"
+							variant="boolean"
+							:options="alignOptions"
+						/>
+					</FormField>
+
+					<FormField label="Bar labels" component-has-label>
+						<RadioGroup
+							v-model="showBarLabels"
+							name="status-card-bar-labels"
+							variant="boolean"
+							:options="showHideOptions"
+						/>
+					</FormField>
+
+					<FormField label="Compact" component-has-label>
+						<RadioGroup
+							v-model="cardCompact"
+							name="status-card-compact"
+							variant="boolean"
+							:options="onOffOptions"
+						/>
+					</FormField>
+				</FormLayout>
 				
-				<div class="grid-boxed">
-					<div class="stat-display good">
-						<h4>Total Users</h4>
-						<span class="stat">1,247</span>
-						<span class="subtle">+12% from last month</span>
-					</div>
-					
-					<div class="stat-display bad">
-						<h4>Active Sessions</h4>
-						<span class="stat">89</span>
-						<span class="subtle">-3% from last hour</span>
-					</div>
-					
-					<div class="stat-display warning">
-						<h4>System Load</h4>
-						<span class="stat">67%</span>
-						<span class="subtle">Moderate</span>
-					</div>
-					
-					<div class="stat-display good">
-						<h4>Storage Used</h4>
-						<span class="stat">2.4 GB</span>
-						<span class="subtle">45% of total</span>
-					</div>
+				<div :class="gridClass">
+					<StatusCard
+						v-for="card in overviewCards"
+						:key="card.title"
+						:karma="card.karma"
+						:bar-label="showBarLabels ? card.barLabel : ''"
+						:align="cardAlign"
+						:compact="cardCompact"
+						:to="card.to"
+					>
+						<h4>{{ card.title }}</h4>
+						<span class="stat">{{ card.stat }}</span>
+						<span class="subtle">{{ card.subtle }}</span>
+					</StatusCard>
 				</div>
 			</div>
 			
 			<div class="admin-section">
 				<h3>Recent Activity</h3>
-				<div class="activity-list">
-					<div class="activity-item">
-						<span class="activity-time">2 minutes ago</span>
-						<span class="activity-text">User "john.doe" logged in</span>
-					</div>
-					<div class="activity-item">
-						<span class="activity-time">5 minutes ago</span>
-						<span class="activity-text">New user account created</span>
-					</div>
-					<div class="activity-item">
-						<span class="activity-time">12 minutes ago</span>
-						<span class="activity-text">System backup completed</span>
-					</div>
-					<div class="activity-item">
-						<span class="activity-time">1 hour ago</span>
-						<span class="activity-text">Database maintenance performed</span>
-					</div>
-					<div class="activity-item">
-						<span class="activity-time">2 hours ago</span>
-						<span class="activity-text">User "admin" updated settings</span>
-					</div>
-				</div>
+				<ul>
+					<li>
+						<span class="subtle">2 minutes ago</span>
+						— User "john.doe" logged in
+					</li>
+					<li>
+						<span class="subtle">5 minutes ago</span>
+						— New user account created
+					</li>
+					<li>
+						<span class="subtle">12 minutes ago</span>
+						— System backup completed
+					</li>
+					<li>
+						<span class="subtle">1 hour ago</span>
+						— Database maintenance performed
+					</li>
+					<li>
+						<span class="subtle">2 hours ago</span>
+						— User "admin" updated settings
+					</li>
+				</ul>
 			</div>
 			
 			<div class="admin-section">
 				<h3>Quick Actions</h3>
-				<div role = "toolbar">
-					<button class="action-btn">Create User</button>
-					<button class="action-btn">System Backup</button>
-					<button class="action-btn">View Logs</button>
-					<button class="action-btn">Settings</button>
+				<div role="toolbar">
+					<button type="button">Create User</button>
+					<button type="button">System Backup</button>
+					<button type="button">View Logs</button>
+					<button type="button">Settings</button>
 				</div>
 			</div>
 		</div>
@@ -76,6 +108,69 @@
 </template>
 
 <script setup>
-	// This is a placeholder admin view with dummy content
-	// No functionality implemented yet
+import { computed, ref } from 'vue'
+
+const showBarLabels = ref(true)
+const cardCompact = ref(false)
+const cardAlign = ref('start')
+const gridLayout = ref('3')
+
+const showHideOptions = [
+	{ label: 'Shown', value: true },
+	{ label: 'Hidden', value: false },
+]
+
+const onOffOptions = [
+	{ label: 'On', value: true },
+	{ label: 'Off', value: false },
+]
+
+const alignOptions = [
+	{ value: 'start', label: 'Start' },
+	{ value: 'center', label: 'Center' },
+]
+
+const gridLayoutOptions = [
+	{ value: '3', label: '3 columns' },
+	{ value: '2', label: '2 columns' },
+]
+
+const gridClass = computed(() => (
+	gridLayout.value === '2' ? 'grid-boxed-2' : 'grid-boxed'
+))
+
+const overviewCards = [
+	{
+		karma: 'good',
+		barLabel: 'Users',
+		title: 'Total Users',
+		stat: '1,247',
+		subtle: '+12% from last month',
+		to: { name: 'UserDetails' },
+	},
+	{
+		karma: 'bad',
+		barLabel: 'Live',
+		title: 'Active Sessions',
+		stat: '89',
+		subtle: '-3% from last hour',
+		to: { name: 'TableExample' },
+	},
+	{
+		karma: 'warning',
+		barLabel: 'Load',
+		title: 'System Load',
+		stat: '67%',
+		subtle: 'Moderate',
+		to: { name: 'StatusExample' },
+	},
+	{
+		karma: 'good',
+		barLabel: 'Disk',
+		title: 'Storage Used',
+		stat: '2.4 GB',
+		subtle: '45% of total',
+		to: { name: 'ViewItem', params: { id: '1' } },
+	},
+]
 </script>