picocrank 1.25.2 → 1.26.0

package/vue/components/DangerZone.vue

@@ -0,0 +1,186 @@
+<template>
+	<section class="with-header-and-content danger-zone">
+		<details
+			class="danger-zone-details"
+			:open="open"
+			@toggle="onToggle"
+		>
+			<summary class="danger-zone-summary section-header flex-row">
+				<div class="fg1 danger-zone-heading">
+					<h2 :title="subtitle || undefined" class="danger-zone-title">
+						<HugeiconsIcon
+							v-if="icon"
+							:icon="icon"
+							class="danger-zone-title-icon"
+							width="1.1em"
+							height="1.1em"
+							:strokeWidth="2"
+							aria-hidden="true"
+						/>
+						<span>{{ title }}</span>
+					</h2>
+					<span v-if="subtitle" class="danger-zone-subtitle subtle">{{ subtitle }}</span>
+					<span v-if="description" class="danger-zone-description subtle">{{ description }}</span>
+				</div>
+				<span class="danger-zone-chevron" aria-hidden="true">▸</span>
+			</summary>
+			<Section
+				:title="title"
+				:subtitle="subtitle"
+				:padding="padding"
+				:icon="icon"
+				:id="sectionId"
+				classes="danger-zone-section"
+			>
+				<template v-if="$slots.toolbar" #toolbar>
+					<slot name="toolbar" />
+				</template>
+				<p v-if="warning" class="danger-zone-warning">{{ warning }}</p>
+				<slot />
+			</Section>
+		</details>
+	</section>
+</template>
+
+<script setup>
+import { HugeiconsIcon } from '@hugeicons/vue'
+import { Alert02Icon } from '@hugeicons/core-free-icons'
+import Section from './Section.vue'
+
+defineProps({
+	title: {
+		type: String,
+		default: 'Danger zone',
+	},
+	subtitle: {
+		type: String,
+		default: '',
+	},
+	description: {
+		type: String,
+		default: '',
+	},
+	warning: {
+		type: String,
+		default: 'These actions are permanent and cannot be undone.',
+	},
+	padding: {
+		type: Boolean,
+		default: true,
+	},
+	icon: {
+		type: [Object, Array, Function],
+		default: () => Alert02Icon,
+	},
+	sectionId: {
+		type: String,
+		default: '',
+	},
+})
+
+const open = defineModel('open', {
+	type: Boolean,
+	default: false,
+})
+
+function onToggle(event) {
+	open.value = event.target.open
+}
+</script>
+
+<style scoped>
+.danger-zone-details {
+	display: block;
+}
+
+.danger-zone-summary {
+	cursor: pointer;
+	list-style: none;
+	user-select: none;
+	transition: background-color 0.2s ease;
+}
+
+.danger-zone-heading {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 0.35em 0.75em;
+	min-width: 0;
+}
+
+.danger-zone-subtitle,
+.danger-zone-description {
+	line-height: 1.4;
+}
+
+.danger-zone-chevron {
+	flex-shrink: 0;
+	margin-left: 0.75em;
+	transition: transform 0.15s ease;
+}
+
+.danger-zone-details[open] > .danger-zone-summary .danger-zone-chevron {
+	transform: rotate(90deg);
+}
+
+.danger-zone-details[open] > .danger-zone-summary {
+	background: var(--danger-zone-summary-hover-bg);
+	border-bottom-color: var(--danger-zone-border);
+}
+
+.danger-zone-details:not([open]) > .danger-zone-summary {
+	border-radius: 0.4em;
+	border-bottom: none;
+}
+
+.danger-zone-summary::-webkit-details-marker {
+	display: none;
+}
+
+.danger-zone-summary:hover {
+	background: var(--danger-zone-summary-hover-bg);
+}
+
+.danger-zone-summary:focus {
+	outline: none;
+}
+
+.danger-zone-summary:focus-visible {
+	outline: 2px solid var(--danger-zone-focus-outline);
+	outline-offset: -2px;
+}
+
+.danger-zone-title {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.45em;
+	margin: 0;
+	padding-top: 0.5em;
+	padding-bottom: 0.5em;
+}
+
+.danger-zone-title-icon {
+	flex: 0 0 auto;
+}
+
+.danger-zone :deep(.danger-zone-section.with-header-and-content) {
+	margin: 0;
+	border: none;
+	border-radius: 0;
+	box-shadow: none;
+	background: transparent;
+}
+
+.danger-zone :deep(.danger-zone-section .section-header) {
+	display: none;
+}
+
+.danger-zone :deep(.danger-zone-section .section-content) {
+	border-top: none;
+}
+
+.danger-zone-warning {
+	margin: 0 0 1rem;
+	color: var(--danger-zone-warning-fg);
+}
+</style>

package/vue/components/Header.vue

@@ -24,9 +24,9 @@
 			</button>
 		</div>
 
-		<TopBar v-if="showTopBar" :navigation="navigation" />
+		<Breadcrumbs v-if="showBreadcrumbsBar" />
 
-		<Breadcrumbs v-if="breadcrumbs" />
+		<TopBar v-if="showTopBar" :navigation="topBarNavigation" />
 
 		<div class = "fg1"></div>
 
@@ -138,15 +138,23 @@
 			type: Object,
 			default: null,
 		},
+		topBarNavigation: {
+			type: Object,
+			default: null,
+		},
 	});
 
 	const fallbackSidebar = ref(null);
 
-	const { showTopBar, showSidebarChrome, needsFallbackSidebar } = useResponsiveNav(
+	const { showTopBar, showSidebarChrome, needsFallbackSidebar, isMobile } = useResponsiveNav(
 		() => props.sidebarEnabled,
 		() => props.topBarEnabled,
 	);
 
+	const showBreadcrumbsBar = computed(
+		() => props.breadcrumbs && !isMobile.value,
+	);
+
 	function toggleNavSidebar() {
 		if (needsFallbackSidebar.value) {
 			fallbackSidebar.value?.toggle();
@@ -165,8 +173,15 @@
 </script>
 
 <style scoped>
+#sidebar-button {
+	flex-shrink: 0;
+	width: 14em;
+	min-width: 14em;
+}
+
 #sidebar-button.disabled-branding {
 	width: auto;
+	min-width: 0;
 }
 
 .logo-home-link {
@@ -194,6 +209,7 @@
 .header-actions {
 	align-self: stretch;
 	gap: 0.25rem;
+	flex-shrink: 0;
 }
 
 .theme-toggle {
@@ -205,7 +221,7 @@
 .header-actions :deep(button) {
 	border: 0;
 	border-radius: 0;
-	color: var(--header-fg-color, var(--header-text-color, #fff));
+	color: var(--header-fg-color);
 	background-color: transparent;
 	align-self: stretch;
 	display: inline-flex;
@@ -227,7 +243,7 @@
 #sidebar-toggler-button {
 	border: 0;
 	border-radius: 0;
-	color: var(--header-fg-color, var(--header-text-color, #fff));
+	color: var(--header-fg-color);
 	background-color: transparent;
 	align-self: stretch;
 	display: inline-flex;
@@ -260,7 +276,7 @@ header .search-trigger,
 header .search-trigger.neutral {
 	border: 0;
 	border-radius: 0;
-	color: var(--header-fg-color, var(--header-text-color, #fff));
+	color: var(--header-fg-color);
 	background-color: transparent;
 	align-self: stretch;
 	height: 100%;

package/vue/components/NavigationGrid.vue

@@ -19,20 +19,22 @@
 					class="nav-button-indicator"
 					aria-label="Requires attention"
 				/>
-				<div class="nav-button-icon" :style="getIconStyle(link)">
-					<HugeiconsIcon
-						:icon="link.icon"
-						:width="iconSize"
-						:height="iconSize"
-					/>
-				</div>
-					<div class="nav-button-label">{{ link.title }}</div>
-					<div v-if="link.description" class="nav-button-description">
-						{{ link.description }}
+				<div class="nav-button-heading">
+					<div class="nav-button-icon" :style="getIconStyle(link)">
+						<HugeiconsIcon
+							:icon="link.icon"
+							:width="iconSize"
+							:height="iconSize"
+						/>
 					</div>
+					<div class="nav-button-label">{{ link.title }}</div>
+				</div>
+				<div v-if="link.description" class="nav-button-description">
+					{{ link.description }}
+				</div>
 			</button>
 		</div>
-		<div v-if="filteredLinks.length === 0" class="no-links">
+		<div v-if="filteredLinks.length === 0" class="navigation-grid-empty">
 			<p>No navigation links available</p>
 		</div>
 	</div>
@@ -40,7 +42,7 @@
 
 <script setup>
 import { computed, inject, ref } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { HugeiconsIcon } from '@hugeicons/vue';
 
 const props = defineProps({
@@ -63,7 +65,7 @@ const props = defineProps({
 	// Icon size
 	iconSize: {
 		type: String,
-		default: '2em'
+		default: '1.5em'
 	},
 	// Exclude separator and html items
 	excludeNonButtons: {
@@ -73,7 +75,6 @@ const props = defineProps({
 });
 
 const router = useRouter();
-const route = useRoute();
 
 // Inject navigation from Navigation component
 const navigation = inject('navigation', null);
@@ -157,179 +158,24 @@ function handleLinkClick(link) {
 </script>
 
 <style scoped>
-.navigation-grid-container {
-	width: 100%;
-}
-
-.navigation-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-	gap: 1rem;
-	padding: 1rem 0;
-}
-
-.navigation-grid.compact {
-	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-	gap: 0.75rem;
-}
-
-.nav-button {
+.nav-button-heading {
 	display: flex;
-	flex-direction: column;
-	align-items: top;
-	justify-content: flex-start;
-	gap: 0.75rem;
-	padding: 1.25rem 0.75rem;
-	background: transparent;
-	border: 1px solid var(--nav-grid-border);
-	border-radius: 8px;
-	cursor: pointer;
-	transition: all 0.2s ease;
-	text-align: left;
-	position: relative;
-}
-
-.navigation-grid.compact .nav-button {
-	padding: 0.75rem 0.5rem;
+	align-items: center;
 	gap: 0.5rem;
+	width: 100%;
+	min-width: 0;
 }
 
-.nav-button:hover {
-	border-color: var(--nav-grid-accent-fg);
-	background: var(--nav-grid-hover-bg);
-	transform: translateY(-2px);
-	box-shadow: 0 4px 8px var(--nav-grid-hover-shadow);
-}
-
-.nav-button:active {
-	transform: translateY(0);
-	box-shadow: 0 2px 4px var(--nav-grid-shadow);
-}
-
-.nav-button.active {
-	background: var(--nav-grid-accent-bg);
-	border-color: var(--nav-grid-accent-bg);
-	color: var(--nav-grid-active-fg);
-}
-
-.nav-button.active .nav-button-icon {
-	color: var(--nav-grid-active-fg);
-}
-
-.nav-button-icon {
-	display: flex;
-	align-items: start;
-	justify-content: start;
-	color: var(--nav-grid-accent-fg);
-	transition: color 0.2s ease;
-	flex-shrink: 0;
-}
-
-.nav-button.active .nav-button-icon {
-	color: var(--nav-grid-active-fg);
-}
-
-.nav-button:disabled,
-.nav-button.disabled {
-	cursor: not-allowed;
-	opacity: 0.6;
-}
-
-.nav-button:disabled:hover,
-.nav-button.disabled:hover {
-	border-color: var(--nav-grid-border);
-	transform: none;
-	box-shadow: none;
-	background: transparent;
-}
-
-.nav-button:disabled .nav-button-icon,
-.nav-button.disabled .nav-button-icon {
-	color: var(--nav-grid-disabled-fg);
-}
-
-.nav-button-indicator {
-	position: absolute;
-	top: 0.75rem;
-	right: 0.75rem;
-	width: 0.625rem;
-	height: 0.625rem;
-	border-radius: 50%;
-	background: var(--nav-grid-indicator-bg);
-	box-shadow: 0 0 0 2px var(--nav-grid-ring-bg);
-	flex-shrink: 0;
-}
-
-.nav-button-count {
-	position: absolute;
-	top: 0.5rem;
-	right: 0.5rem;
-	min-width: 1.25rem;
-	padding: 0.1rem 0.4rem;
-	border-radius: 999px;
-	background: var(--nav-grid-indicator-bg);
-	color: var(--nav-grid-indicator-fg);
-	font-size: 0.75em;
-	font-weight: 600;
-	line-height: 1.2;
-	text-align: center;
-	box-shadow: 0 0 0 2px var(--nav-grid-ring-bg);
-	flex-shrink: 0;
-}
-
-.navigation-grid.compact .nav-button-indicator {
-	top: 0.5rem;
-	right: 0.5rem;
-}
-
-.navigation-grid.compact .nav-button-count {
-	top: 0.35rem;
-	right: 0.35rem;
-}
-
-.nav-button.active .nav-button-indicator,
-.nav-button.active .nav-button-count {
-	box-shadow: 0 0 0 2px var(--nav-grid-accent-bg);
-}
-
-.nav-button-label {
-	font-weight: bold;
-	font-size: 1.125rem;
-	word-break: break-word;
-	text-align: left;
-	line-height: 1.2;
-}
-
-.nav-button.active .nav-button-label {
-	color: var(--nav-grid-active-fg);
-}
-
-.nav-button-description {
-	font-weight: normal;
-	color: var(--nav-grid-muted-fg);
-	word-break: break-word;
-	text-align: left;
-	line-height: 1.5;
-}
-
-.nav-button.active .nav-button-description {
-	color: var(--nav-grid-active-fg);
+.navigation-grid.compact .nav-button-heading {
+	gap: 0.4rem;
 }
 
-.no-links {
-	padding: 2rem;
-	text-align: center;
-	color: var(--nav-grid-muted-fg);
+.nav-button-heading .nav-button-icon {
+	align-items: center;
 }
 
-@media (max-width: 768px) {
-	.navigation-grid {
-		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-		gap: 0.75rem;
-	}
-
-	.nav-button {
-		padding: 1rem 0.5rem;
-	}
+.nav-button-heading .nav-button-label {
+	flex: 1;
+	min-width: 0;
 }
 </style>

package/vue/components/NotificationBlock.vue

@@ -0,0 +1,120 @@
+<template>
+	<div
+		:class="rootClasses"
+		:role="role"
+		@click="handleClick"
+	>
+		<span class="notification-key">{{ displayLabel }}</span>
+		<span class="notification-body">
+			<slot>
+				<template v-if="hasLink">
+					<template v-if="messagePrefix">{{ messagePrefix }}</template><RouterLink
+						v-if="linkTo"
+						:to="linkTo"
+						@click.stop
+					>{{ linkLabel }}</RouterLink><a
+						v-else
+						:href="linkHref || '#'"
+						@click.stop
+					>{{ linkLabel }}</a><template v-if="messageSuffix">{{ messageSuffix }}</template>
+				</template>
+				<template v-else>{{ message }}</template>
+			</slot>
+		</span>
+	</div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+
+const TYPE_LABELS = {
+	info: 'INFO:',
+	note: 'NOTE:',
+	success: 'SUCCESS:',
+	good: 'SUCCESS:',
+	warning: 'WARNING:',
+	severe: 'SEVERE:',
+	critical: 'CRITICAL:',
+	error: 'CRITICAL:',
+	bad: 'CRITICAL:',
+	old: 'OLD:',
+}
+
+const props = defineProps({
+	type: {
+		type: String,
+		default: 'info',
+		validator: (value) => (
+			['info', 'note', 'success', 'good', 'warning', 'severe', 'critical', 'error', 'bad', 'old'].includes(value)
+		),
+	},
+	label: {
+		type: String,
+		default: '',
+	},
+	message: {
+		type: String,
+		default: '',
+	},
+	messagePrefix: {
+		type: String,
+		default: '',
+	},
+	linkLabel: {
+		type: String,
+		default: '',
+	},
+	linkHref: {
+		type: String,
+		default: '',
+	},
+	linkTo: {
+		type: [String, Object],
+		default: null,
+	},
+	messageSuffix: {
+		type: String,
+		default: '',
+	},
+	clickable: {
+		type: Boolean,
+		default: false,
+	},
+	dismissible: {
+		type: Boolean,
+		default: false,
+	},
+	role: {
+		type: String,
+		default: 'status',
+	},
+})
+
+const emit = defineEmits(['click', 'dismiss'])
+
+const displayLabel = computed(() => {
+	const trimmed = props.label.trim()
+	if (trimmed) {
+		return trimmed.endsWith(':') ? trimmed : `${trimmed}:`
+	}
+	return TYPE_LABELS[props.type]
+})
+
+const hasLink = computed(() => Boolean(
+	props.linkLabel && (props.linkHref || props.linkTo)
+))
+
+const rootClasses = computed(() => ({
+	notification: true,
+	[props.type]: true,
+	clickable: props.clickable || props.dismissible,
+}))
+
+function handleClick(event) {
+	emit('click', event)
+	if (props.dismissible) {
+		emit('dismiss', event)
+	}
+}
+</script>