bitboss-ui 2.1.113 → 2.1.115

package/dist/ai/BbTab.md

@@ -0,0 +1,954 @@
+# BbTab
+
+## Template & Script
+
+```vue
+<template>
+	<div
+		:id="id"
+		ref="tabs"
+		class="bb-tab"
+		:class="{
+			[`bb-tab--${direction}`]: true,
+			'bb-tab--disabled': disabled,
+		}"
+	>
+		<div class="bb-tab__label-boundary">
+			<span><slot name="header:prepend" v-bind="scrollStatus"></slot></span>
+			<ul
+				ref="tablist"
+				class="bb-tab__label-container"
+				:class="{ 'bb-tab__label-container--no-transition': !highlightReady }"
+				role="tablist"
+				:style="{
+					'--inner-width': `${containerWidth}px`,
+					'--width': `${highlightWidth}px`,
+					'--height': `${highlightHeight}px`,
+					'--left': `${highlightLeft}px`,
+					'--top': `${highlightTop}px`,
+				}"
+			>
+				<li v-for="tab in mappedItems" :key="tab.tabId" role="presentation">
+					<BaseButton
+						:id="tab.tabId"
+						:aria-selected="tab.ariaSelected"
+						:class="tab.tabClasses"
+						:disabled="tab.disabled"
+						:role="'tab'"
+						:tabindex="tab.tabindex"
+						@click="tab.onClick"
+						@keydown="tab.onKeydown"
+					>
+						<slot
+							:current="selectedTab"
+							:current-index="currentTabIndex"
+							:disabled="tab.disabled"
+							:go-to="goTo"
+							:is-first="isFirst"
+							:is-last="isLast"
+							:name="tab.labelSlotName"
+							:selected="tab.active"
+							:text="tab.label"
+							:value="tab.key"
+						>
+							<slot
+								:current="selectedTab"
+								:current-index="currentTabIndex"
+								:disabled="tab.disabled"
+								:go-to="goTo"
+								:is-first="isFirst"
+								:is-last="isLast"
+								name="label"
+								:selected="tab.active"
+								:text="tab.label"
+								:value="tab.key"
+							>
+								<span class="bb-tab__label">{{ tab.label }}</span>
+							</slot>
+						</slot>
+					</BaseButton>
+				</li>
+			</ul>
+			<span><slot name="header:append" v-bind="scrollStatus"></slot></span>
+		</div>
+		<div class="bb-tab__panes-container">
+			<component :is="props.animateY ? BbSmoothHeight : 'div'">
+				<template v-for="tab in mappedItems" :key="tab.tabId">
+					<Transition
+						:css="props.animateX"
+						:name="`tab-slide-${animationDirection}`"
+					>
+						<section
+							v-if="tab.active || props.eager || tab.eager"
+							:id="tab.panelId"
+							:aria-labelledby="tab.tabId"
+							:class="tab.paneClasses"
+							role="tabpanel"
+							:tabindex="tab.tabindex"
+						>
+							<slot
+								:current="selectedTab"
+								:current-index="currentTabIndex"
+								:disabled="tab.disabled"
+								:go-to="goTo"
+								:is-first="isFirst"
+								:is-last="isLast"
+								:name="tab.key"
+								:selected="tab.active"
+								:text="tab.label"
+								:value="tab.key"
+							></slot>
+						</section>
+					</Transition>
+				</template>
+			</component>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" generic="K extends string = string">
+import { ref, watch, getCurrentInstance, computed, nextTick } from 'vue';
+import { useId } from '@/composables/useId';
+import { useRoute } from '@/composables/useRoute';
+import { useRouter } from '@/composables/useRouter';
+import { useScroll, useResizeObserver } from '@vueuse/core';
+import BaseButton from '../BaseButton/BaseButton.vue';
+import BbSmoothHeight from '../BbSmoothHeight/BbSmoothHeight.vue';
+import { onMounted } from 'vue';
+import { useFrameworkDetection } from '@/composables/useFrameworkDetection';
+import { merge } from '@/utilities/functions/merge';
+import { isNil } from '@/utilities/functions/isNil';
+import { useQuery } from '@/composables/useQuery';
+import { hash } from '@/utilities/functions/hash';
+import { isNotNil } from '@/utilities/functions/isNotNil';
+import { useLogger } from '@/composables/useLogger';
+import type {
+	BbTabProps,
+	BbTabEvents,
+	BbTabItem,
+	BbTabInertiaOptions,
+	BbTabSlots,
+} from './types';
+export type {
+	BbTabProps,
+	BbTabEvents,
+	BbTabItem,
+	BbTabInertiaOptions,
+	BbTabSlots,
+} from './types';
+
+const props = withDefaults(defineProps<BbTabProps<K>>(), {
+	animateX: true,
+	animateY: true,
+	direction: 'horizontal',
+	querykey: 'tab',
+});
+
+const emit = defineEmits<BbTabEvents>();
+
+defineSlots<BbTabSlots<K>>();
+
+const route = useRoute();
+const router = useRouter();
+const { error } = useLogger();
+
+const tabs = ref();
+
+const id = props.id ?? useId().id.value;
+const instanceid = `bb-tab_${id}`;
+
+const tablist = ref<HTMLElement>();
+const { isScrolling, arrivedState } = useScroll(tablist);
+const scrollStatus = computed(() => ({
+	isScrolling: isScrolling.value,
+	left: arrivedState.left,
+	right: arrivedState.right,
+}));
+
+const { isInertia } = useFrameworkDetection();
+const instance = getCurrentInstance();
+
+const selectedTab = ref<BbTabItem<K>['key'] | null>(null);
+
+const currentTabIndex = computed(() =>
+	props.items.findIndex((el) => el.key === selectedTab.value)
+);
+const isFirst = computed(() => currentTabIndex.value === 0);
+const isLast = computed(() => currentTabIndex.value === props.items.length - 1);
+
+props.items.forEach((item) => {
+	if (!item.key) {
+		error(`A tab item has no key: ${JSON.stringify(item, null, 2)}`);
+	} else if ((props.server || item.server) && !props.navigation) {
+		error(
+			`A tab item has a server property but the navigation prop is false: ${JSON.stringify(item, null, 2)}`
+		);
+	}
+});
+
+const queryTabParam = computed(() => {
+	const query = useQuery();
+	return [query[props.querykey]].flat()[0] as K | null;
+});
+
+/*
+This section retrieves the current tab that should be selected
+*/
+// Retrieve tab from url on load for vue apps
+const getInitialPosition = () => {
+	const queryTab = queryTabParam.value as K | null;
+
+	if (props.navigation && queryTab) {
+		selectedTab.value = queryTab;
+	} else if (props.modelValue) {
+		selectedTab.value = props.modelValue;
+
+		// Else whatever tab is passed first
+	} else if (props.items[0]) {
+		const firstSelectableTab = props.items.find((item) => !item.disabled);
+		if (!firstSelectableTab) {
+			throw new Error(
+				'No tab has been selected so it defaulted to the first available. Still, all the tabs are disabled so no tab can be selected.'
+			);
+		}
+		const key = firstSelectableTab.key;
+		selectedTab.value = key;
+	}
+};
+getInitialPosition();
+/*
+Once the current tab is found update external variables
+*/
+
+/**
+ * Merges component-level Inertia defaults with per-item overrides.
+ * Item values always take precedence.
+ */
+const mergeInertiaOptions = (tab: BbTabItem<K>): BbTabInertiaOptions => ({
+	headers: tab.headers ?? props.headers,
+	only: tab.only ?? props.only,
+	preserveScroll: tab.preserveScroll ?? props.preserveScroll,
+	preserveState: tab.preserveState ?? props.preserveState,
+	replace: props.replace,
+	onBefore: tab.onBefore ?? props.onBefore,
+	onStart: tab.onStart ?? props.onStart,
+	onProgress: tab.onProgress ?? props.onProgress,
+	onSuccess: tab.onSuccess ?? props.onSuccess,
+	onError: tab.onError ?? props.onError,
+	onCancel: tab.onCancel ?? props.onCancel,
+	onFinish: tab.onFinish ?? props.onFinish,
+});
+
+const mappedItems = computed(() => {
+	const current = selectedTab.value;
+	const currentIndex = currentTabIndex.value;
+	const mapped = props.items.map((item) => {
+		const { key, label, eager } = item;
+		const tabId = `${instanceid}_tab_${item.key}`;
+		const panelId = `${instanceid}_tabpanel_${item.key}`;
+		const labelSlotName = `label-${item.key}` as `label-${K}`;
+		const active = item.key === selectedTab.value;
+		const tabClasses = {
+			'bb-tab__btn': true,
+			'bb-tab__btn--active': active,
+		};
+		const paneClasses = {
+			'bb-tab__pane': true,
+			'bb-tab__pane--shown': active,
+		};
+		const disabled = !!(item.disabled || props.disabled);
+		const ariaSelected = !!active;
+		const tabindex = active ? 0 : -1;
+		const handleClick = () => onTabSelected(item.key);
+		const handleKeydown = (event: KeyboardEvent) => onKeydown(event);
+
+		return {
+			tabId: tabId,
+			eager: eager,
+			panelId: panelId,
+			active: active,
+			ariaSelected: ariaSelected,
+			labelSlotName: labelSlotName,
+			tabClasses: tabClasses,
+			paneClasses: paneClasses,
+			role: 'tab',
+			tabindex: tabindex,
+			disabled: disabled,
+			current: current,
+			key: key,
+			label: label,
+			currentIndex: currentIndex,
+			onClick: handleClick,
+			onKeydown: handleKeydown,
+		};
+	});
+	return mapped;
+});
+
+const onTabSelected = (tab: BbTabItem<K>['key'], replace = props.replace) => {
+	const tabItem = props.items.find((i) => i.key === tab);
+	if (isNil(tabItem)) return;
+	if (tabItem.key === selectedTab.value) return;
+
+	/* For Vue or Nuxt context */
+	if (props.navigation && route.value && queryTabParam.value !== tab) {
+		if (!router) return;
+		const method = replace ? 'replace' : 'push';
+		router[method](
+			merge(route.value, {
+				query: { [props.querykey]: tab },
+				replace: replace,
+			})
+		);
+		/* Inertia context — server visit (real round-trip, supports partial reloads) */
+	} else if (props.navigation && isInertia) {
+		const urlString = tabItem.href ?? globalThis.location.href;
+		const url = new URL(urlString, window.location.origin);
+		url.searchParams.set(props.querykey, tab);
+
+		if (props.server || tabItem.server) {
+			const base = instance?.proxy?.$inertia as any;
+			const merged = mergeInertiaOptions(tabItem);
+			const valid = Object.fromEntries(
+				Object.entries(merged).filter(([_key, value]) => isNotNil(value))
+			);
+			base.visit(url.toString(), valid);
+		} else {
+			// Client-only URL update — no server round-trip
+			if (replace) {
+				window.history.replaceState(window.history.state, '', url.toString());
+			} else {
+				window.history.pushState(window.history.state, '', url.toString());
+			}
+		}
+	}
+	if (props.modelValue !== tab) {
+		emit('update:modelValue', tab);
+	}
+	selectedTab.value = tab;
+};
+
+if (selectedTab.value) {
+	onTabSelected(selectedTab.value, true);
+}
+
+const goTo = (target: 'first' | 'previous' | 'next' | 'last') => {
+	var nextTabIndex: number | null = null;
+	switch (target) {
+		case 'first':
+			nextTabIndex = 0;
+			while (nextTabIndex < props.items.length - 1) {
+				if (props.items[nextTabIndex].disabled) {
+					nextTabIndex++;
+				} else break;
+			}
+			break;
+		case 'previous': {
+			let offset = 1;
+			while (offset < props.items.length) {
+				nextTabIndex =
+					(currentTabIndex.value + props.items.length - offset) %
+					props.items.length;
+				if (props.items[nextTabIndex].disabled) {
+					offset++;
+				} else break;
+			}
+			break;
+		}
+		case 'next': {
+			let offset = 1;
+			while (offset < props.items.length) {
+				nextTabIndex = (currentTabIndex.value + offset) % props.items.length;
+				if (props.items[nextTabIndex].disabled) {
+					offset++;
+				} else break;
+			}
+			break;
+		}
+
+		case 'last':
+			nextTabIndex = props.items.length - 1;
+			while (nextTabIndex >= 0) {
+				if (props.items[nextTabIndex].disabled) {
+					nextTabIndex--;
+				} else break;
+			}
+			break;
+		default:
+			break;
+	}
+	if (nextTabIndex === null) {
+		throw new Error('Could not navigate to next tab');
+	}
+	if (props.items[nextTabIndex].disabled) return;
+	const targetKey = props.items[nextTabIndex].key;
+	const button: HTMLButtonElement | null = document.querySelector(
+		`#${instanceid}_tab_${targetKey}`
+	);
+	button?.focus();
+	onTabSelected(targetKey);
+};
+
+const onKeydown = (event: KeyboardEvent) => {
+	if (props.disabled) return;
+	if (event.key === 'ArrowRight') {
+		goTo('next');
+	} else if (event.key === 'ArrowLeft') {
+		goTo('previous');
+	} else if (event.key === 'Home') {
+		event.preventDefault();
+		goTo('first');
+	} else if (event.key === 'End') {
+		event.preventDefault();
+		goTo('last');
+	} else {
+		return;
+	}
+};
+
+watch(
+	() => props.modelValue,
+	(value) => {
+		if (value) {
+			onTabSelected(value as K);
+		}
+	}
+);
+
+watch(
+	() => route.value?.query?.[props.querykey],
+	(value) => {
+		if (value && typeof value === 'string') {
+			onTabSelected(value as K);
+		}
+	}
+);
+
+/** Scrolls the active tab label into view horizontally without affecting vertical scroll. */
+watch(
+	selectedTab,
+	async () => {
+		if (!tablist.value) return;
+		const element = tablist.value.querySelector<HTMLElement>(
+			'.bb-tab__btn--active'
+		);
+		if (!element) return;
+		await nextTick();
+
+		const container = tablist.value;
+		const elLeft = element.offsetLeft;
+		const elRight = elLeft + element.offsetWidth;
+		const scrollLeft = container.scrollLeft;
+		const visibleRight = scrollLeft + container.clientWidth;
+
+		if (elLeft < scrollLeft) {
+			container.scrollTo({ left: elLeft, behavior: 'smooth' });
+		} else if (elRight > visibleRight) {
+			container.scrollTo({
+				left: elRight - container.clientWidth,
+				behavior: 'smooth',
+			});
+		}
+	},
+	{ flush: 'post' }
+);
+
+const animationDirection = ref<'left' | 'right'>('right');
+watch(
+	selectedTab,
+	(current, previous) => {
+		if (current && previous) {
+			const indexCurrent = props.items.findIndex((i) => i.key === current);
+			const indexPrevious = props.items.findIndex((i) => i.key === previous);
+			animationDirection.value =
+				indexCurrent > indexPrevious ? 'right' : 'left';
+		}
+	},
+	{ flush: 'sync' }
+);
+
+const highlightWidth = ref(0);
+const highlightHeight = ref(0);
+const highlightLeft = ref(0);
+const highlightTop = ref(0);
+const containerWidth = ref(0);
+const highlightReady = ref(false);
+const getHighlightData = () => {
+	if (!tablist.value) {
+		return;
+	}
+	const activeBtn = tablist.value.querySelector<HTMLElement>(
+		'.bb-tab__btn--active'
+	);
+	if (!activeBtn) {
+		return;
+	}
+	highlightLeft.value = activeBtn.offsetLeft;
+	highlightTop.value = activeBtn.offsetTop;
+	highlightWidth.value = activeBtn.clientWidth;
+	highlightHeight.value = activeBtn.clientHeight;
+	containerWidth.value = tablist.value.scrollWidth;
+};
+
+onMounted(async () => {
+	getHighlightData();
+	await nextTick();
+	highlightReady.value = true;
+});
+watch(selectedTab, getHighlightData, { flush: 'post' });
+useResizeObserver(tablist, () => {
+	getHighlightData();
+});
+
+watch(
+	() => hash(props.items),
+	() => {
+		if (
+			selectedTab.value &&
+			!props.items.find((i) => i.key === selectedTab.value)
+		) {
+			getInitialPosition();
+		}
+	},
+	{
+		immediate: true,
+		deep: true,
+	}
+);
+
+defineExpose({
+	isFirst,
+	isLast,
+	current: selectedTab,
+	currentIndex: currentTabIndex,
+	goTo,
+});
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { CommonProps } from '@/types/CommonProps';
+
+/**
+ * Inertia-specific options shared between `BbTabProps` (component-level defaults)
+ * and `BbTabItem` (per-item overrides). Item values always win over component values.
+ */
+export type BbTabInertiaOptions = {
+	/**
+	 * Additional HTTP headers forwarded to Inertia when navigation is triggered.
+	 * Only meaningful in an Inertia context.
+	 */
+	headers?: Record<string, string>;
+	/**
+	 * Limits which server-side props are refreshed during a partial Inertia reload.
+	 * Only meaningful in an Inertia context.
+	 */
+	only?: string[];
+	/**
+	 * Inertia lifecycle hook — fired just before the request is sent.
+	 * Return `false` to cancel the visit.
+	 */
+	onBefore?: () => boolean | void;
+	/**
+	 * Inertia lifecycle hook — fired when the request is cancelled.
+	 */
+	onCancel?: () => void;
+	/**
+	 * Inertia lifecycle hook — fired after the visit finishes (success or error).
+	 */
+	onFinish?: () => void;
+	/**
+	 * Inertia lifecycle hook — fired when the server returns validation errors.
+	 */
+	onError?: (errors: Record<string, string>) => void;
+	/**
+	 * Inertia lifecycle hook — fired when upload/download progress is available.
+	 */
+	onProgress?: (progress: { percentage: number | undefined }) => void;
+	/**
+	 * Inertia lifecycle hook — fired when the request starts.
+	 */
+	onStart?: () => void;
+	/**
+	 * Inertia lifecycle hook — fired when the visit completes successfully.
+	 */
+	onSuccess?: () => void;
+	/**
+	 * Controls whether Inertia preserves the scroll position after navigation.
+	 * Only meaningful in an Inertia context.
+	 */
+	preserveScroll?: boolean | ((props: Record<string, unknown>) => boolean);
+	/**
+	 * Controls whether Inertia preserves the current component state after navigation.
+	 * Only meaningful in an Inertia context.
+	 */
+	preserveState?:
+		| boolean
+		| ((props: Record<string, unknown>) => boolean)
+		| null;
+	/**
+	 * Uses history replacement instead of push navigation.
+	 */
+	replace?: boolean;
+};
+
+export type BbTabEvents = {
+	/**
+	 * Emitted when the selected tab changes. Used by `v-model`.
+	 */
+	(e: 'update:modelValue', value: string): void;
+};
+
+export type BbTabItem<K extends string = string> = Pick<
+	CommonProps,
+	'disabled'
+> &
+	BbTabInertiaOptions & {
+		/**
+		 * Used to render a tab even when not visible.
+		 * Useful for SEO purposes — the tab panel content is in the DOM even when the
+		 * tab is inactive.
+		 */
+		eager?: boolean;
+		/**
+		 * Destination URL for this tab. In an Inertia context the tab button renders
+		 * as an Inertia Link that navigates to this URL on click.
+		 */
+		href?: string;
+		/**
+		 * String that identifies the tab.
+		 */
+		key: K;
+		/**
+		 * Label to use as the tab text.
+		 */
+		label?: string;
+		/**
+		 * When true and in an Inertia context, triggers a real server-side Inertia
+		 * visit (via `router.visit`) instead of a client-only `history.pushState`.
+		 * All other Inertia options and lifecycle hooks are forwarded to that visit.
+		 */
+		server?: boolean;
+	};
+
+export type BbTabProps<K extends string = string> = Pick<
+	CommonProps,
+	'disabled' | 'eager' | 'id'
+> &
+	BbTabInertiaOptions & {
+		/**
+		 * Enables horizontal slide transitions between tab panels.
+		 *
+		 * @defaultValue `true`
+		 */
+		// eslint-disable-next-line vue/prop-name-casing
+		animateX?: boolean;
+		/**
+		 * Enables smooth height animation when switching between tab panels.
+		 *
+		 * @defaultValue `true`
+		 */
+		// eslint-disable-next-line vue/prop-name-casing
+		animateY?: boolean;
+		/**
+		 * Direction of the tabs component.
+		 *
+		 * @defaultValue `'horizontal'`
+		 */
+		direction?: 'horizontal' | 'vertical';
+		/**
+		 * Array of items that define the tabs in the component.
+		 */
+		items: BbTabItem<K>[];
+		/**
+		 * The current tab key. Used by v-model.
+		 */
+		modelValue?: null | BbTabItem<K>['key'];
+		/**
+		 * Synchronizes the current tab with the URL query parameter.
+		 */
+		navigation?: boolean;
+		/**
+		 * Defines the query key used for URL-based navigation.
+		 *
+		 * @defaultValue `'tab'`
+		 */
+		querykey?: string;
+		/**
+		 * Replaces history rather than pushing it when changing tab.
+		 */
+		replace?: boolean;
+		/**
+		 * When true and in an Inertia context, triggers a real server-side Inertia
+		 * visit instead of a client-only `history.pushState`.
+		 */
+		server?: boolean;
+	};
+
+/** Props exposed by the per-tab label slots and the generic `label` fallback slot. */
+export type BbTabSlotProps<K extends string = string> = {
+	/** The key of the currently active tab. */
+	current: string | null;
+	/** Zero-based index of the currently active tab. */
+	currentIndex: number;
+	/** Whether this tab is disabled. */
+	disabled: boolean;
+	/** Whether the active tab is the first tab. */
+	isFirst: boolean;
+	/** Whether the active tab is the last tab. */
+	isLast: boolean;
+	/** Whether this specific tab is currently active. */
+	selected: boolean;
+	/** The `label` value of this tab item. */
+	text: BbTabItem<K>['label'];
+	/** The `key` value of this tab item. */
+	value: string;
+	/** Navigate to `'first'`, `'previous'`, `'next'`, or `'last'` tab. */
+	goTo: (target: 'first' | 'previous' | 'next' | 'last') => void;
+};
+
+/** Props exposed by the `header:prepend` and `header:append` slots. */
+export type BbTabScrollSlotProps = {
+	/** Whether the tab list is currently being scrolled. */
+	isScrolling: boolean;
+	/** Whether the tab list has reached the left edge. */
+	left: boolean;
+	/** Whether the tab list has reached the right edge. */
+	right: boolean;
+};
+
+export type BbTabSlots<K extends string = string> = {
+	/**
+	 * Content rendered before the scrollable tab label list (e.g. a left scroll arrow).
+	 */
+	'header:prepend'?: (props: BbTabScrollSlotProps) => any;
+	/**
+	 * Content rendered after the scrollable tab label list (e.g. a right scroll arrow).
+	 */
+	'header:append'?: (props: BbTabScrollSlotProps) => any;
+	/**
+	 * Fallback slot used for all tab labels when no per-tab `label-{key}` slot is provided.
+	 */
+	label?: (props: BbTabSlotProps<K>) => any;
+} & Partial<Record<K | `label-${K}`, (props: BbTabSlotProps<K>) => any>>;
+```
+
+## Styles
+
+```css
+.bb-tab {
+	--transition-duration: 350ms;
+	--gap: 30px;
+	color: var(--bb-text);
+	display: grid;
+	gap: 24px 24px;
+
+	&--horizontal {
+		> .bb-tab__label-boundary {
+			&::before {
+				bottom: 2px;
+				height: 1px;
+				left: 0px;
+				width: 100%;
+			}
+			.bb-tab__label-container {
+				padding: var(--bb-ring-size) var(--bb-ring-size) 12px
+					var(--bb-ring-size);
+				white-space: nowrap;
+
+				&::before {
+					bottom: 0px;
+					height: 5px;
+					left: 0px;
+					translate: var(--left) 0px;
+					width: var(--width);
+				}
+				> li + li {
+					margin-left: 40px;
+				}
+			}
+		}
+	}
+
+	&--vertical {
+		display: grid;
+		grid-template-columns: auto 1fr;
+
+		> .bb-tab__label-boundary {
+			&::before {
+				height: 100%;
+				right: 2px;
+				top: 0px;
+				width: 1px;
+			}
+			.bb-tab__label-container {
+				align-items: stretch;
+				display: flex;
+				flex-direction: column;
+				padding: var(--bb-ring-size) 12px var(--bb-ring-size)
+					var(--bb-ring-size);
+
+				> li + li {
+					margin-top: 10px;
+				}
+
+				&::before {
+					height: var(--height);
+					right: 0px;
+					top: 0px;
+					translate: 0px var(--top);
+					width: 5px;
+				}
+
+				.bb-tab__btn {
+					text-align: left;
+					width: 100%;
+				}
+			}
+		}
+
+		> span {
+			display: block;
+		}
+	}
+
+	.bb-tab__label-boundary {
+		display: grid;
+		grid-template-columns: auto 1fr auto;
+		position: relative;
+
+		&::before {
+			background-color: var(--bb-border);
+			content: '';
+			display: block;
+			position: absolute;
+		}
+
+		.bb-tab__label-container {
+			font-weight: 500;
+			list-style: none;
+
+			-ms-overflow-style: none; /* IE and Edge */
+			overflow-x: auto;
+			position: relative;
+			scrollbar-width: none; /* Firefox */
+
+			&::-webkit-scrollbar {
+				display: none;
+			}
+
+			&::before {
+				background-color: var(--bb-primary);
+				border-radius: var(--bb-radius);
+				content: '';
+				position: absolute;
+				transition:
+					translate 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+					width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+					height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+			}
+			&--no-transition::before {
+				display: none;
+			}
+			li {
+				display: inline-block;
+				.bb-tab__btn {
+					min-height: 40px;
+					scroll-margin: 60px;
+
+					&--active {
+						color: var(--bb-primary);
+					}
+				}
+			}
+		}
+	}
+
+	.bb-tab__panes-container {
+		.bb-smooth-height {
+			> .content {
+				display: grid;
+				grid-template-columns: 1fr;
+				position: relative;
+			}
+		}
+
+		> div:not(.bb-smooth-height) {
+			display: grid;
+			grid-template-columns: 1fr;
+			position: relative;
+			overflow: clip;
+		}
+
+		.tab-slide-left-enter-active,
+		.tab-slide-right-enter-active {
+			transition:
+				translate var(--transition-duration) cubic-bezier(0.2, 0, 0, 1),
+				opacity calc(var(--transition-duration) * 0.6)
+					cubic-bezier(0, 0, 0.2, 1);
+		}
+
+		.tab-slide-left-leave-active,
+		.tab-slide-right-leave-active {
+			transition:
+				translate calc(var(--transition-duration) * 0.8)
+					cubic-bezier(0.4, 0, 1, 1),
+				opacity calc(var(--transition-duration) * 0.4)
+					cubic-bezier(0.4, 0, 1, 1);
+		}
+
+		.tab-slide-left-enter-from {
+			opacity: 0;
+			translate: calc(-100% - var(--gap)) 0px;
+		}
+
+		.tab-slide-left-leave-to {
+			opacity: 0;
+			translate: calc(100% + var(--gap)) 0px;
+		}
+
+		.tab-slide-left-enter-to,
+		.tab-slide-left-leave-from,
+		.tab-slide-right-enter-to,
+		.tab-slide-right-leave-from {
+			opacity: 1;
+			translate: 0px 0px;
+		}
+
+		.tab-slide-right-enter-from {
+			opacity: 0;
+			translate: calc(100% + var(--gap)) 0px;
+		}
+
+		.tab-slide-right-leave-to {
+			opacity: 0;
+			translate: calc(-100% - var(--gap)) 0px;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.tab-slide-left-enter-active,
+			.tab-slide-left-leave-active,
+			.tab-slide-right-enter-active,
+			.tab-slide-right-leave-active {
+				transition: none;
+			}
+		}
+
+		.bb-tab__pane {
+			display: none;
+			grid-column: 1 / 2;
+			grid-row: 1 / 2;
+
+			&--shown {
+				display: block;
+			}
+		}
+	}
+}
+```