picocrank 1.25.2 → 1.27.0

package/vue/components/Tabs.vue

@@ -1,112 +1,361 @@
 <template>
-	<div class="tabs-container">
-		<div class="tabs-header" role="tablist">
-			<button
-				v-for="(tab, index) in tabs"
-				:key="tab.id || index"
-				:class="['tab-button', { active: activeTabId === (tab.id || index) }]"
-				:aria-selected="activeTabId === (tab.id || index)"
-				:aria-controls="`tab-panel-${tab.id || index}`"
-				:id="`tab-${tab.id || index}`"
-				role="tab"
-				@click="selectTab(tab.id || index)"
+	<div
+		class="tabs-container"
+		:class="{
+			'tabs-vertical': orientation === 'vertical',
+			'tabs-flush': !padding,
+		}"
+	>
+		<div class="tabs-header">
+			<div
+				class="tabs-header-scroll"
+				role="tablist"
+				:aria-orientation="orientation"
+				:aria-labelledby="tablistLabelledBy || undefined"
+				@keydown="onTabListKeydown"
 			>
-				<HugeiconsIcon
-					v-if="tab.icon"
-					:icon="tab.icon"
-					width="1em"
-					height="1em"
-				/>
-				<span>{{ tab.label }}</span>
-				<slot :name="`tab-${tab.id || index}-badge`" />
-			</button>
+				<button
+					v-for="(tab, index) in tabs"
+					:key="getTabKey(tab, index)"
+					:ref="(el) => setTabRef(getTabKey(tab, index), el)"
+					:class="['tab-button', { active: isTabSelected(tab, index), disabled: isTabDisabled(tab) }]"
+					:disabled="isTabDisabled(tab)"
+					:aria-selected="isTabSelected(tab, index) ? 'true' : 'false'"
+					:aria-disabled="isTabDisabled(tab) ? 'true' : undefined"
+					:aria-controls="`tab-panel-${getTabKey(tab, index)}`"
+					:id="`tab-${getTabKey(tab, index)}`"
+					:tabindex="tabTabIndex(tab, index)"
+					:title="tab.disabledTitle || undefined"
+					role="tab"
+					type="button"
+					@click="onTabClick(getTabKey(tab, index))"
+				>
+					<HugeiconsIcon
+						v-if="tab.icon"
+						:icon="tab.icon"
+						width="1em"
+						height="1em"
+						aria-hidden="true"
+					/>
+					<span>{{ tab.label }}</span>
+					<slot :name="`tab-${getTabKey(tab, index)}-badge`" />
+				</button>
+			</div>
 		</div>
 		<div class="tabs-content">
 			<div
 				v-for="(tab, index) in tabs"
-				:key="tab.id || index"
-				:id="`tab-panel-${tab.id || index}`"
-				:class="['tab-panel', { active: activeTabId === (tab.id || index) }]"
+				:key="`panel-${getTabKey(tab, index)}`"
+				:id="`tab-panel-${getTabKey(tab, index)}`"
+				:class="['tab-panel', { active: isTabSelected(tab, index) }]"
 				role="tabpanel"
-				:aria-labelledby="`tab-${tab.id || index}`"
-				v-show="activeTabId === (tab.id || index)"
+				:aria-labelledby="`tab-${getTabKey(tab, index)}`"
+				:hidden="!isTabSelected(tab, index)"
+				:tabindex="isTabSelected(tab, index) ? 0 : -1"
 			>
-				<slot :name="`tab-${tab.id || index}`" :tab="tab" />
+				<slot :name="`tab-${getTabKey(tab, index)}`" :tab="tab" />
 			</div>
 		</div>
 	</div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from 'vue';
-import { HugeiconsIcon } from '@hugeicons/vue';
+import { nextTick, onMounted, ref, watch } from 'vue'
+import { HugeiconsIcon } from '@hugeicons/vue'
 
 const props = defineProps({
 	tabs: {
 		type: Array,
 		required: true,
 		validator: (tabs) => {
-			return tabs.every(tab => 
-				typeof tab === 'object' && 
-				(tab.id !== undefined || true) && 
-				typeof tab.label === 'string'
-			);
-		}
+			return tabs.every(tab =>
+				typeof tab === 'object'
+				&& (tab.id !== undefined || true)
+				&& typeof tab.label === 'string',
+			)
+		},
 	},
 	defaultTab: {
 		type: [String, Number],
-		default: null
+		default: null,
+	},
+	/** APG activation: `auto` selects on focus; `manual` requires Space/Enter. */
+	activation: {
+		type: String,
+		default: 'auto',
+		validator: (value) => ['auto', 'manual'].includes(value),
+	},
+	/** Optional id of an element that labels the tablist. */
+	tablistLabelledBy: {
+		type: String,
+		default: '',
+	},
+	/** Tab strip layout: `horizontal` (default) or `vertical`. */
+	orientation: {
+		type: String,
+		default: 'horizontal',
+		validator: (value) => ['horizontal', 'vertical'].includes(value),
+	},
+	/** When true, panels use full inset padding; default false keeps dividers flush. */
+	padding: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+const emit = defineEmits(['tab-change'])
+
+const tabRefs = new Map()
+
+const activeTabId = ref(null)
+const focusedTabId = ref(null)
+
+function isTabDisabled(tab) {
+	return tab.disabled === true
+}
+
+function getFirstEnabledIndex() {
+	return props.tabs.findIndex((tab) => !isTabDisabled(tab))
+}
+
+function getLastEnabledIndex() {
+	for (let index = props.tabs.length - 1; index >= 0; index -= 1) {
+		if (!isTabDisabled(props.tabs[index])) {
+			return index
+		}
 	}
-});
+	return -1
+}
 
-const emit = defineEmits(['tab-change']);
+function getFirstEnabledTabKey() {
+	const index = getFirstEnabledIndex()
+	if (index < 0) {
+		return null
+	}
+	return getTabKey(props.tabs[index], index)
+}
 
-// Initialize activeTabId with first tab by default
-function getInitialTabId() {
-	if (props.defaultTab !== null) {
-		return props.defaultTab;
+function resolveSelectableTabId(tabKey) {
+	if (tabKey !== null && tabKey !== undefined) {
+		const index = props.tabs.findIndex((tab, i) => getTabKey(tab, i) === tabKey)
+		if (index >= 0 && !isTabDisabled(props.tabs[index])) {
+			return tabKey
+		}
 	}
-	if (props.tabs.length > 0) {
-		return props.tabs[0].id ?? 0;
+	return getFirstEnabledTabKey()
+}
+
+function tabTabIndex(tab, index) {
+	if (isTabDisabled(tab)) {
+		return -1
 	}
-	return null;
+	return isTabFocused(tab, index) ? 0 : -1
 }
 
-const activeTabId = ref(getInitialTabId());
+function findNextEnabledIndex(fromIndex, step) {
+	const length = props.tabs.length
+	if (length === 0) {
+		return fromIndex
+	}
 
-function selectTab(tabId) {
-	if (activeTabId.value !== tabId) {
-		activeTabId.value = tabId;
-		const activeTab = props.tabs.find(tab => (tab.id ?? props.tabs.indexOf(tab)) === tabId);
-		emit('tab-change', activeTab, tabId);
+	for (let offset = 1; offset <= length; offset += 1) {
+		const index = (fromIndex + step * offset + length * 100) % length
+		if (!isTabDisabled(props.tabs[index])) {
+			return index
+		}
 	}
+
+	return fromIndex
+}
+
+function getTabKey(tab, index) {
+	return tab.id ?? index
 }
 
-function setActiveTab(tabId) {
-	const tab = props.tabs.find(t => (t.id ?? props.tabs.indexOf(t)) === tabId);
-	if (tab) {
-		selectTab(tabId);
+function setTabRef(tabKey, el) {
+	if (el) {
+		tabRefs.set(tabKey, el)
+		return
 	}
+	tabRefs.delete(tabKey)
 }
 
-// Initialize active tab on mount if not already set
-onMounted(() => {
-	if (activeTabId.value === null && props.tabs.length > 0) {
-		activeTabId.value = props.tabs[0].id ?? 0;
+function tabIndexForKey(tabKey) {
+	return props.tabs.findIndex((tab, index) => getTabKey(tab, index) === tabKey)
+}
+
+function isTabSelected(tab, index) {
+	return activeTabId.value === getTabKey(tab, index)
+}
+
+function isTabFocused(tab, index) {
+	return focusedTabId.value === getTabKey(tab, index)
+}
+
+function focusTab(tabKey) {
+	tabRefs.get(tabKey)?.focus()
+}
+
+function selectTab(tabKey, { emitChange = true } = {}) {
+	const index = tabIndexForKey(tabKey)
+	if (index >= 0 && isTabDisabled(props.tabs[index])) {
+		return
+	}
+
+	if (activeTabId.value !== tabKey) {
+		activeTabId.value = tabKey
+		if (emitChange) {
+			const activeTab = index >= 0 ? props.tabs[index] : null
+			emit('tab-change', activeTab, tabKey)
+		}
+	}
+	focusedTabId.value = tabKey
+}
+
+function onTabClick(tabKey) {
+	selectTab(tabKey)
+}
+
+function moveFocusToIndex(index, { activate = props.activation === 'auto' } = {}) {
+	if (props.tabs.length === 0) {
+		return
+	}
+
+	if (index < 0 || index >= props.tabs.length || isTabDisabled(props.tabs[index])) {
+		return
+	}
+
+	const tabKey = getTabKey(props.tabs[index], index)
+	focusedTabId.value = tabKey
+
+	if (activate) {
+		selectTab(tabKey)
 	}
-});
 
-// Watch for tabs changes
-watch(() => props.tabs, (newTabs) => {
-	if (newTabs.length > 0 && activeTabId.value === null) {
-		activeTabId.value = newTabs[0].id ?? 0;
+	nextTick(() => focusTab(tabKey))
+}
+
+function moveFocusByStep(fromIndex, step, { activate = props.activation === 'auto' } = {}) {
+	const nextIndex = findNextEnabledIndex(fromIndex, step)
+	if (nextIndex === fromIndex && isTabDisabled(props.tabs[fromIndex])) {
+		return
+	}
+	moveFocusToIndex(nextIndex, { activate })
+}
+
+function tabKeyFromElement(tabEl) {
+	const suffix = tabEl.id.slice('tab-'.length)
+	const index = props.tabs.findIndex((tab, i) => String(getTabKey(tab, i)) === suffix)
+	if (index >= 0) {
+		return getTabKey(props.tabs[index], index)
 	}
-}, { immediate: true });
+	return suffix
+}
+
+function onTabListKeydown(event) {
+	const tabEl = event.target?.closest?.('[role="tab"]')
+	if (!tabEl || !tabEl.id?.startsWith('tab-')) {
+		return
+	}
+
+	const tabKey = tabKeyFromElement(tabEl)
+	const index = tabIndexForKey(tabKey)
+	if (index < 0) {
+		return
+	}
+
+	const isVertical = props.orientation === 'vertical'
+
+	switch (event.key) {
+		case 'ArrowRight':
+			if (!isVertical) {
+				event.preventDefault()
+				moveFocusByStep(index, 1)
+			}
+			break
+		case 'ArrowLeft':
+			if (!isVertical) {
+				event.preventDefault()
+				moveFocusByStep(index, -1)
+			}
+			break
+		case 'ArrowDown':
+			if (isVertical) {
+				event.preventDefault()
+				moveFocusByStep(index, 1)
+			}
+			break
+		case 'ArrowUp':
+			if (isVertical) {
+				event.preventDefault()
+				moveFocusByStep(index, -1)
+			}
+			break
+		case 'Home':
+			event.preventDefault()
+			moveFocusToIndex(getFirstEnabledIndex())
+			break
+		case 'End':
+			event.preventDefault()
+			moveFocusToIndex(getLastEnabledIndex())
+			break
+		case ' ':
+		case 'Enter':
+			if (props.activation === 'manual') {
+				event.preventDefault()
+				selectTab(tabKey)
+			}
+			break
+		default:
+			break
+	}
+}
+
+function setActiveTab(tabKey) {
+	const index = tabIndexForKey(tabKey)
+	if (index >= 0) {
+		selectTab(tabKey)
+		nextTick(() => focusTab(tabKey))
+	}
+}
+
+function syncTabIdsAfterListChange() {
+	if (props.tabs.length === 0) {
+		activeTabId.value = null
+		focusedTabId.value = null
+		return
+	}
+
+	const activeIndex = tabIndexForKey(activeTabId.value)
+	const activeIsValid = activeIndex >= 0 && !isTabDisabled(props.tabs[activeIndex])
+	if (!activeIsValid) {
+		const firstKey = getFirstEnabledTabKey()
+		activeTabId.value = firstKey
+		focusedTabId.value = firstKey
+		return
+	}
+
+	const focusedIndex = tabIndexForKey(focusedTabId.value)
+	const focusedIsValid = focusedIndex >= 0 && !isTabDisabled(props.tabs[focusedIndex])
+	if (!focusedIsValid) {
+		focusedTabId.value = activeTabId.value
+	}
+}
+
+onMounted(() => {
+	activeTabId.value = resolveSelectableTabId(props.defaultTab)
+	focusedTabId.value = activeTabId.value
+	syncTabIdsAfterListChange()
+})
+
+watch(() => props.tabs, () => {
+	syncTabIdsAfterListChange()
+}, { deep: true })
 
 defineExpose({
 	setActiveTab,
-	activeTabId
-});
+	activeTabId,
+})
 </script>
 
 <style scoped>
@@ -114,27 +363,55 @@ defineExpose({
 	width: 100%;
 }
 
+.tabs-container.tabs-vertical {
+	display: flex;
+	align-items: stretch;
+	gap: 0;
+}
+
 .tabs-header {
+	border-bottom: 1px solid var(--tab-border);
+}
+
+.tabs-vertical .tabs-header {
+	flex-shrink: 0;
+	border-bottom: none;
+	border-right: 1px solid var(--tab-border);
+}
+
+.tabs-header-scroll {
 	display: flex;
-	border-bottom: 2px solid var(--tab-border);
 	gap: 0.25rem;
 	overflow-x: auto;
 	scrollbar-width: thin;
 }
 
-.tabs-header::-webkit-scrollbar {
+.tabs-header-scroll::-webkit-scrollbar {
 	height: 4px;
 }
 
-.tabs-header::-webkit-scrollbar-track {
+.tabs-header-scroll::-webkit-scrollbar-track {
 	background: transparent;
 }
 
-.tabs-header::-webkit-scrollbar-thumb {
+.tabs-header-scroll::-webkit-scrollbar-thumb {
 	background: var(--tab-border);
 	border-radius: 2px;
 }
 
+.tabs-vertical .tabs-header-scroll {
+	flex-direction: column;
+	overflow-x: hidden;
+	overflow-y: auto;
+	min-width: 10rem;
+	max-height: 24rem;
+}
+
+.tabs-vertical .tabs-header-scroll::-webkit-scrollbar {
+	width: 4px;
+	height: auto;
+}
+
 .tab-button {
 	display: flex;
 	align-items: center;
@@ -142,33 +419,108 @@ defineExpose({
 	padding: 0.75rem 1.25rem;
 	background: transparent;
 	border: none;
-	border-bottom: 2px solid transparent;
-	border-radius: 0;
+	border-bottom: 1px solid transparent;
+	border-radius: 0.4em 0.4em 0 0;
 	cursor: pointer;
 	font-size: 1em;
 	color: var(--tab-fg);
-	transition: all 0.2s ease;
 	white-space: nowrap;
 	position: relative;
 }
 
-.tab-button:hover {
+.tab-button:hover:not(.active):not(:disabled) {
 	color: var(--tab-hover-fg);
 	background-color: var(--tab-hover-bg);
 }
 
 .tab-button.active {
+	background-color: var(--tab-active-bg);
 	color: var(--tab-active-fg);
-	border-bottom-color: var(--tab-active-fg);
-	font-weight: bold;
+	border-bottom-color: transparent;
 }
 
-.tab-button:focus {
-	outline: 2px solid var(--tab-focus-outline-color);
-	outline-offset: -2px;
+.tab-button:disabled,
+.tab-button.disabled {
+	cursor: not-allowed;
+	color: var(--disabled-text-color);
+	opacity: 0.72;
+}
+
+.tab-button:disabled:hover,
+.tab-button.disabled:hover {
+	color: var(--disabled-text-color);
+	background-color: transparent;
+}
+
+.tab-button:disabled.active,
+.tab-button.disabled.active {
+	background-color: var(--tab-active-bg);
+	color: var(--disabled-text-color);
+}
+
+.tabs-vertical .tab-button {
+	width: 100%;
+	justify-content: flex-start;
+	border-bottom: none;
+	border-right: 1px solid transparent;
+	border-radius: 0.4em 0 0 0.4em;
+}
+
+.tabs-vertical .tab-button.active {
+	border-right-color: transparent;
+}
+
+.tabs-vertical .tabs-content {
+	flex: 1;
+	min-width: 0;
+}
+
+.tabs-flush .tab-panel {
+	padding: 0;
+	padding-top: 1.5rem;
+}
+
+.tabs-vertical.tabs-flush .tab-panel {
+	padding-top: 0;
+	padding-left: 0.75rem;
+}
+
+.tabs-vertical.tabs-flush .tabs-header {
+	display: flex;
+	flex-direction: column;
+	align-self: stretch;
+}
+
+.tabs-vertical.tabs-flush .tabs-header-scroll {
+	flex: 1;
+	max-height: none;
+}
+
+.tabs-vertical.tabs-flush .tab-button {
 	border-radius: 0;
 }
 
+.tab-button.active:hover,
+.tab-button.active:focus-visible {
+	background-color: var(--tab-active-hover-bg);
+	color: var(--tab-active-fg);
+}
+
+.tab-button:focus {
+	outline: none;
+}
+
+.tab-button:focus-visible {
+	outline: none;
+	box-shadow: inset 0 0 0 2px var(--focus-outline-color);
+	z-index: 1;
+}
+
+.tab-button:hover:not(.active):not(:disabled):focus-visible {
+	color: var(--tab-hover-fg);
+	background-color: var(--tab-hover-bg);
+}
+
 .tabs-content {
 	width: 100%;
 	min-height: 200px;
@@ -177,11 +529,23 @@ defineExpose({
 .tab-panel {
 	padding-block: 1.5rem;
 	padding-inline: 0.75rem;
+}
+
+.tab-panel:focus {
+	outline: none;
+}
+
+.tab-panel:focus-visible {
+	outline: 2px solid var(--focus-outline-color);
+	outline-offset: 2px;
+	border-radius: 0.4em;
+}
+
+.tab-panel[hidden] {
 	display: none;
 }
 
 .tab-panel.active {
-	display: block;
 	animation: fadeIn 0.2s ease-in;
 }
 
@@ -198,7 +562,7 @@ defineExpose({
 
 /* Responsive */
 @media (max-width: 768px) {
-	.tabs-header {
+	.tabs-header-scroll {
 		gap: 0;
 	}
 
@@ -211,5 +575,15 @@ defineExpose({
 		padding-block: 1rem;
 		padding-inline: 0.5rem;
 	}
+
+	.tabs-flush .tab-panel {
+		padding: 0;
+		padding-top: 1rem;
+	}
+
+	.tabs-vertical.tabs-flush .tab-panel {
+		padding-top: 0;
+		padding-left: 0.5rem;
+	}
 }
 </style>

package/vue/components/TopBar.vue

@@ -97,7 +97,7 @@ function handleLinkClick(callback = null) {
 	padding: 0.5em 0.75em;
 	border-radius: 0.25em;
 	text-decoration: none;
-	color: var(--header-fg-color, var(--header-text-color, inherit));
+	color: var(--header-fg-color);
 	transition: background-color 0.15s ease;
 	white-space: nowrap;
 	border: 0;
@@ -124,7 +124,7 @@ function handleLinkClick(callback = null) {
 
 html[data-theme="dark"] {
 	.topbar-link {
-		color: var(--header-fg-color, var(--header-text-color, #f8f9fa));
+		color: var(--header-fg-color);
 	}
 	
 	.separator {