picocrank 1.25.2 → 1.27.0

package/vue/examples/TabsExample.vue

@@ -1,145 +1,250 @@
 <template>
-	<Section title="Tabs Example" subtitle="A flexible tabbed control component with support for multiple tab panes">
+	<Section
+		title="Horizontal Tabs"
+		subtitle="A flexible tabbed control component with support for multiple tab panes and disabled tabs"
+		:padding="horizontalTabsSectionPadding"
+	>
 		<template #toolbar>
-			<button @click="addRandomTab" class="good">Add Tab</button>
-			<button @click="removeLastTab" class="bad" :disabled="tabs.length <= 1">Remove Tab</button>
+			<label class="tabs-padding-toggle">
+				<input v-model="horizontalTabsSectionPadding" type="checkbox" />
+				Section padding
+			</label>
+			<label class="tabs-padding-toggle">
+				<input v-model="horizontalTabsPadding" type="checkbox" />
+				Tab padding
+			</label>
+			<label class="tabs-padding-toggle">
+				<input v-model="detailsTabEnabled" type="checkbox" />
+				Enable Details tab
+			</label>
 		</template>
 
-		<div class="tabs-example-container">
-			<h3>Basic Tabs</h3>
-			<Tabs :tabs="basicTabs" @tab-change="onTabChange">
-				<template #tab-0>
-					<div class="tab-content">
-						<h4>Overview</h4>
-						<p>
-							This is the Overview tab. It contains general information about the current topic.
-							You can place any content here, including forms, tables, images, or other components.
-						</p>
-						<ul>
-							<li>First item in the overview</li>
-							<li>Second item with more details</li>
-							<li>Third item explaining features</li>
-						</ul>
-					</div>
-				</template>
-				<template #tab-1>
-					<div class="tab-content">
-						<h4>Details</h4>
-						<p>
-							The Details tab provides in-depth information. This section can be used to display
-								comprehensive data, specifications, or detailed descriptions.
-						</p>
-						<div class="details-grid">
-							<div class="detail-item">
-								<strong>Property 1:</strong> Value 1
-							</div>
-							<div class="detail-item">
-								<strong>Property 2:</strong> Value 2
-							</div>
-							<div class="detail-item">
-								<strong>Property 3:</strong> Value 3
-							</div>
-							<div class="detail-item">
-								<strong>Property 4:</strong> Value 4
-							</div>
-						</div>
-					</div>
-				</template>
-				<template #tab-2>
-					<div class="tab-content">
-						<h4>Settings</h4>
-						<p>Configure your preferences and settings in this tab.</p>
-						<form class="settings-form">
-							<div class="form-group">
-								<label for="setting1">Setting 1:</label>
-								<input id="setting1" type="text" v-model="settings.setting1" placeholder="Enter value" />
-							</div>
-							<div class="form-group">
-								<label for="setting2">Setting 2:</label>
-								<select id="setting2" v-model="settings.setting2">
-									<option value="option1">Option 1</option>
-									<option value="option2">Option 2</option>
-									<option value="option3">Option 3</option>
-								</select>
-							</div>
-							<div class="form-group">
-								<label>
-									<input type="checkbox" v-model="settings.enabled" />
-									Enable feature
-								</label>
-							</div>
-							<button type="button" class="good" @click="saveSettings">Save Settings</button>
-						</form>
-					</div>
-				</template>
-			</Tabs>
+		<Tabs
+			:tabs="basicTabs"
+			:padding="horizontalTabsPadding"
+			@tab-change="onTabChange"
+		>
+			<template #tab-0>
+				<div class="tab-content">
+					<h4>Overview</h4>
+					<p>
+						This is the Overview tab. It contains general information about the current topic.
+						You can place any content here, including forms, tables, images, or other components.
+						The <strong>Details</strong> tab starts disabled — use the toolbar checkbox to
+						enable it when elevated permissions are granted.
+					</p>
+					<ul>
+						<li>First item in the overview</li>
+						<li>Second item with more details</li>
+						<li>Third item explaining features</li>
+					</ul>
+				</div>
+			</template>
+			<template #tab-1>
+				<div class="tab-content">
+					<h4>Details</h4>
+					<p>
+						The Details tab provides in-depth information. This section can be used to display
+						comprehensive data, specifications, or detailed descriptions.
+					</p>
+					<dl>
+						<dt>Property 1</dt>
+						<dd>Value 1</dd>
+
+						<dt>Property 2</dt>
+						<dd>Value 2</dd>
+
+						<dt>Property 3</dt>
+						<dd>Value 3</dd>
+
+						<dt>Property 4</dt>
+						<dd>Value 4</dd>
+					</dl>
+				</div>
+			</template>
+			<template #tab-2>
+				<div class="tab-content">
+					<h4>Settings</h4>
+					<p>Configure your preferences and settings in this tab.</p>
+					<FormLayout @submit.prevent="saveSettings">
+						<FormField label="Setting 1" for="tabs-setting1">
+							<input
+								id="tabs-setting1"
+								v-model="settings.setting1"
+								type="text"
+								placeholder="Enter value"
+							/>
+						</FormField>
+
+						<FormField label="Setting 2" for="tabs-setting2">
+							<select id="tabs-setting2" v-model="settings.setting2">
+								<option value="option1">Option 1</option>
+								<option value="option2">Option 2</option>
+								<option value="option3">Option 3</option>
+							</select>
+						</FormField>
+
+						<FormField label="Enable feature" for="tabs-setting-enabled">
+							<input
+								id="tabs-setting-enabled"
+								v-model="settings.enabled"
+								type="checkbox"
+							/>
+						</FormField>
+
+						<template #actions>
+							<button type="submit" class="good">Save Settings</button>
+						</template>
+					</FormLayout>
+				</div>
+			</template>
+		</Tabs>
+	</Section>
 
-			<h3>Dynamic Tabs</h3>
-			<Tabs :tabs="tabs" :default-tab="0" @tab-change="onDynamicTabChange">
-				<template v-for="(tab, index) in tabs" :key="tab.id" #[`tab-${index}`]>
-					<div class="tab-content">
-						<h4>{{ tab.label }}</h4>
-						<p>{{ tab.content }}</p>
-						<div class="tab-info">
-							<p><strong>Tab ID:</strong> {{ tab.id }}</p>
-							<p><strong>Created:</strong> {{ tab.created }}</p>
-						</div>
-					</div>
-				</template>
-			</Tabs>
+	<Section
+		title="Vertical Tabs"
+		subtitle="Side tab strip with arrow-key navigation up and down; disabled tabs are skipped"
+		:padding="verticalTabsSectionPadding"
+	>
+		<template #toolbar>
+			<label class="tabs-padding-toggle">
+				<input v-model="verticalTabsSectionPadding" type="checkbox" />
+				Section padding
+			</label>
+			<label class="tabs-padding-toggle">
+				<input v-model="verticalTabsPadding" type="checkbox" />
+				Tab padding
+			</label>
+			<label class="tabs-padding-toggle">
+				<input v-model="advancedTabEnabled" type="checkbox" />
+				Enable Advanced tab
+			</label>
+		</template>
 
-			<h3>Tabs with Icons</h3>
-			<Tabs :tabs="iconTabs" @tab-change="onTabChange">
-				<template #tab-home>
-					<div class="tab-content">
-						<h4>Home</h4>
-						<p>Welcome to the home section. This tab demonstrates the use of icons in tab labels.</p>
-					</div>
-				</template>
-				<template #tab-profile>
-					<div class="tab-content">
-						<h4>Profile</h4>
-						<p>View and edit your profile information here.</p>
-						<div class="profile-card">
-							<div class="profile-avatar">JD</div>
-							<div class="profile-info">
-								<h5>John Doe</h5>
-								<p>john.doe@example.com</p>
-							</div>
-						</div>
-					</div>
-				</template>
-				<template #tab-settings>
-					<div class="tab-content">
-						<h4>Settings</h4>
-						<p>Manage your application settings and preferences.</p>
+		<Tabs
+			:tabs="verticalTabs"
+			orientation="vertical"
+			:padding="verticalTabsPadding"
+			@tab-change="onTabChange"
+		>
+			<template #tab-general>
+				<div class="tab-content">
+					<h4>General</h4>
+					<p>
+						Vertical tabs place the tab list beside the panel. Use them when labels are
+						longer or when the layout mirrors a settings sidebar.
+						<strong>Advanced</strong> starts disabled — use the toolbar checkbox to enable it.
+					</p>
+				</div>
+			</template>
+			<template #tab-appearance>
+				<div class="tab-content">
+					<h4>Appearance</h4>
+					<p>Theme and display options would live in this pane.</p>
+					<FormLayout>
+						<FormField label="Theme" for="vertical-tab-theme">
+							<select id="vertical-tab-theme">
+								<option>System</option>
+								<option>Light</option>
+								<option>Dark</option>
+							</select>
+						</FormField>
+					</FormLayout>
+				</div>
+			</template>
+			<template #tab-notifications>
+				<div class="tab-content">
+					<h4>Notifications</h4>
+					<p>Configure alerts and delivery preferences here.</p>
+					<ul>
+						<li>Email digests</li>
+						<li>Push notifications</li>
+						<li>In-app badges</li>
+					</ul>
+				</div>
+			</template>
+			<template #tab-advanced>
+				<div class="tab-content">
+					<h4>Advanced</h4>
+					<p>Less common options grouped at the bottom of the strip.</p>
+				</div>
+			</template>
+		</Tabs>
+	</Section>
+
+	<Section
+		title="Dynamic Tabs"
+		subtitle="Add and remove tab panes programmatically"
+	>
+		<template #toolbar>
+			<button @click="addRandomTab" class="good">Add Tab</button>
+			<button @click="removeLastTab" class="bad" :disabled="tabs.length <= 1">Remove Tab</button>
+		</template>
+
+		<Tabs :tabs="tabs" :default-tab="0" @tab-change="onDynamicTabChange">
+			<template v-for="(tab, index) in tabs" :key="tab.id" #[`tab-${index}`]>
+				<div class="tab-content">
+					<h4>{{ tab.label }}</h4>
+					<p>{{ tab.content }}</p>
+					<div class="tab-info">
+						<p><strong>Tab ID:</strong> {{ tab.id }}</p>
+						<p><strong>Created:</strong> {{ tab.created }}</p>
 					</div>
-				</template>
-			</Tabs>
-		</div>
+				</div>
+			</template>
+		</Tabs>
 	</Section>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
+import { computed, ref, reactive } from 'vue';
+import { HomeIcon, Settings01Icon, UserIcon, ViewIcon } from '@hugeicons/core-free-icons';
 import Section from '../components/Section.vue';
 import Tabs from '../components/Tabs.vue';
-// Icons are optional - set to null if not available
-// You can import specific icons from @hugeicons/core-free-icons if available
-// Example: import { HomeIcon, UserIcon, SettingsIcon } from '@hugeicons/core-free-icons';
+import FormLayout from '../components/FormLayout.vue';
+import FormField from '../components/FormField.vue';
 
-const basicTabs = ref([
-	{ id: 0, label: 'Overview' },
-	{ id: 1, label: 'Details' },
-	{ id: 2, label: 'Settings' }
+const detailsTabEnabled = ref(false);
+const advancedTabEnabled = ref(false);
+
+const basicTabs = computed(() => [
+	{ id: 0, label: 'Overview', icon: HomeIcon },
+	{
+		id: 1,
+		label: 'Details',
+		icon: ViewIcon,
+		...(detailsTabEnabled.value
+			? {}
+			: {
+				disabled: true,
+				disabledTitle: 'Details requires elevated permissions',
+			}),
+	},
+	{ id: 2, label: 'Settings', icon: Settings01Icon },
 ]);
 
-const iconTabs = ref([
-	{ id: 'home', label: 'Home', icon: null }, // Add icon from @hugeicons/core-free-icons if available
-	{ id: 'profile', label: 'Profile', icon: null }, // Add icon from @hugeicons/core-free-icons if available
-	{ id: 'settings', label: 'Settings', icon: null } // Add icon from @hugeicons/core-free-icons if available
+const verticalTabs = computed(() => [
+	{ id: 'general', label: 'General', icon: HomeIcon },
+	{ id: 'appearance', label: 'Appearance', icon: Settings01Icon },
+	{ id: 'notifications', label: 'Notifications', icon: UserIcon },
+	{
+		id: 'advanced',
+		label: 'Advanced',
+		icon: Settings01Icon,
+		...(advancedTabEnabled.value
+			? {}
+			: {
+				disabled: true,
+				disabledTitle: 'Advanced settings are not available for this account',
+			}),
+	},
 ]);
 
+const horizontalTabsSectionPadding = ref(true);
+const horizontalTabsPadding = ref(false);
+const verticalTabsSectionPadding = ref(true);
+const verticalTabsPadding = ref(false);
+
 const tabs = ref([
 	{
 		id: 0,
@@ -196,142 +301,16 @@ function saveSettings() {
 </script>
 
 <style scoped>
-.tabs-example-container {
-	display: flex;
-	flex-direction: column;
-	gap: 2rem;
-}
-
-.tabs-example-container h3 {
-	margin: 0 0 1rem 0;
-	font-size: 1.3em;
-	font-weight: 600;
-	border-bottom: 1px solid var(--border-color, #e1e5e9);
-	padding-bottom: 0.5rem;
-}
-
-.tab-content {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-}
-
-.tab-content h4 {
-	margin: 0 0 0.5rem 0;
-	font-size: 1.2em;
-	font-weight: 600;
-}
-
-.tab-content p {
-	margin: 0;
-	line-height: 1.6;
-}
-
-.tab-content ul {
-	margin: 0.5rem 0;
-	padding-left: 1.5rem;
-}
-
-.tab-content li {
-	margin: 0.5rem 0;
-}
-
-.details-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-	gap: 1rem;
-	margin-top: 1rem;
-}
-
-.detail-item {
-	padding: 0.75rem;
-	background-color: var(--hover-background-color, #f5f5f5);
-	border-radius: 4px;
-}
-
-.settings-form {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	margin-top: 1rem;
-}
-
-.form-group {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-}
-
-.form-group label {
-	font-weight: 500;
-}
-
-.form-group input[type="text"],
-.form-group select {
-	padding: 0.5rem;
-	border: 1px solid var(--border-color, #ccc);
-	border-radius: 4px;
-	font-size: 1em;
-}
-
-.form-group input[type="checkbox"] {
-	margin-right: 0.5rem;
+.tabs-padding-toggle {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.4em;
+	margin-right: 0.75em;
 }
 
 .tab-info {
-	margin-top: 1rem;
 	padding: 1rem;
-	background-color: var(--hover-background-color, #f5f5f5);
-	border-radius: 4px;
-}
-
-.tab-info p {
-	margin: 0.5rem 0;
-}
-
-.profile-card {
-	display: flex;
-	align-items: center;
-	gap: 1rem;
-	padding: 1rem;
-	background-color: var(--hover-background-color, #f5f5f5);
-	border-radius: 8px;
-	margin-top: 1rem;
-}
-
-.profile-avatar {
-	width: 60px;
-	height: 60px;
-	border-radius: 50%;
-	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: white;
-	font-size: 1.5em;
-	font-weight: bold;
-}
-
-.profile-info h5 {
-	margin: 0 0 0.25rem 0;
-	font-size: 1.1em;
-}
-
-.profile-info p {
-	margin: 0;
-	color: var(--text-muted, #666);
-}
-
-html[data-theme="dark"] {
-	.detail-item,
-	.tab-info,
-	.profile-card {
-		background-color: var(--hover-background-color, #333);
-	}
-
-	.detail-item strong,
-	.tab-info strong {
-		color: var(--text-color, #fff);
-	}
+	background-color: var(--standout-bg-color);
+	border-radius: 0.4em;
 }
 </style>

package/vue/examples/ThemePreview.vue

@@ -40,21 +40,26 @@
 	</Section>
 
 	<Section title="Notifications" subtitle="Block-level karma status">
-		<div class="notification show good" role="status">
-			<strong>GOOD:</strong> Theme tokens are applying to karma backgrounds.
-		</div>
-		<div class="notification show bad" role="status">
-			<strong>BAD:</strong> Check contrast on error surfaces.
-		</div>
-		<div class="notification show warning" role="status">
-			<strong>WARNING:</strong> Accent and border colors should stay readable.
-		</div>
-		<p class="fg-success show inline-notification">
-			<strong>SUCCESS:</strong> Inline notification with foreground karma.
-		</p>
-		<p class="fg-warning show inline-notification">
-			<strong>WARNING:</strong> Another inline status line.
-		</p>
+		<NotificationBlock
+			type="success"
+			message="Theme tokens are applying to karma backgrounds."
+		/>
+		<NotificationBlock
+			type="critical"
+			message="Check contrast on error surfaces."
+		/>
+		<NotificationBlock
+			type="warning"
+			message="Accent and border colors should stay readable."
+		/>
+		<span class="annotation good">
+			<span class="annotation-key">success</span>
+			<span class="annotation-val">Inline annotation with karma tint.</span>
+		</span>
+		<span class="annotation warning">
+			<span class="annotation-key">warning</span>
+			<span class="annotation-val">Another inline status chip.</span>
+		</span>
 	</Section>
 
 	<Section title="Form controls" subtitle="Inputs inherit theme variables">
@@ -132,6 +137,7 @@ import { inject } from 'vue'
 import Section from '../components/Section.vue'
 import FormLayout from '../components/FormLayout.vue'
 import FormField from '../components/FormField.vue'
+import NotificationBlock from '../components/NotificationBlock.vue'
 import { HEADER_THEME_SWITCHER_SELECT_ID } from '../components/ThemeSwitcher.vue'
 
 const themeSwitcherEnabled = inject('themeSwitcherEnabled')
@@ -168,12 +174,4 @@ function openThemeSwitcher() {
 	padding: 0.5rem 0.75rem;
 	border-bottom: 1px solid var(--border-color, #d7d7d7);
 }
-
-.notification {
-	margin-bottom: 0.5rem;
-}
-
-.inline-notification {
-	margin: 0.5rem 0;
-}
 </style>

package/vue/examples/ViewItem.vue

@@ -5,7 +5,6 @@
 				<h2 :title="item.subtitle">{{ item.title }}</h2>
 			</div>
 			<div role="toolbar">
-				<router-link :to="{ name: 'TableExample' }" class="button neutral">Back to table</router-link>
 				<button type="button" class="good">Edit</button>
 			</div>
 		</div>
@@ -83,10 +82,23 @@
 			</ul>
 		</div>
 	</section>
+
+	<DangerZone
+		title="Danger zone"
+		subtitle="Destructive actions for this record"
+		description="Show destructive actions"
+	>
+		<div role="toolbar" class="danger-zone-actions">
+			<button type="button" class="bad" @click="deleteItem">
+				Delete {{ item.name }}
+			</button>
+		</div>
+	</DangerZone>
 </template>
 
 <script setup>
 import { computed } from 'vue'
+import DangerZone from '../components/DangerZone.vue'
 
 const props = defineProps({
 	id: {
@@ -102,7 +114,7 @@ const itemsById = {
 		summary: 'Read-only detail view for a single record, using Femtocrank definition lists and section subheaders.',
 		name: 'Acme deployment',
 		status: 'Active',
-		statusClass: 'fg-good',
+		statusClass: 'good',
 		role: 'Release',
 		location: 'us-east-1',
 		email: 'releases@example.com',
@@ -124,7 +136,7 @@ const itemsById = {
 		summary: 'Example person record linked from the table example.',
 		name: 'Alice',
 		status: 'Active',
-		statusClass: 'fg-good',
+		statusClass: 'good',
 		role: 'Senior analyst',
 		location: 'New York',
 		email: 'alice@example.com',
@@ -145,7 +157,7 @@ const itemsById = {
 		summary: 'Example person record linked from the table example.',
 		name: 'Bob',
 		status: 'Away',
-		statusClass: 'fg-warning',
+		statusClass: 'warning',
 		role: 'Support specialist',
 		location: 'Los Angeles',
 		email: 'bob@example.com',
@@ -175,7 +187,7 @@ const item = computed(() => {
 		summary: 'Generic detail view for records opened from the table or navigation.',
 		name: label,
 		status: 'Unknown',
-		statusClass: 'fg-note',
+		statusClass: 'note',
 		role: '—',
 		location: '—',
 		email: `${key.toLowerCase()}@example.com`,
@@ -188,4 +200,19 @@ const item = computed(() => {
 		activity: [{ when: '—', text: 'No activity recorded for this item.' }],
 	}
 })
+
+function deleteItem() {
+	const name = item.value.name
+	if (window.confirm(`Delete “${name}”? This action cannot be undone.`)) {
+		window.alert(`“${name}” would be deleted. (Demo only — no request was sent.)`)
+	}
+}
 </script>
+
+<style scoped>
+.danger-zone-actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+}
+</style>