@pgcorp/ui-kit 0.1.0

package/src/components/shared/navigation/SBottomNav.vue

@@ -0,0 +1,692 @@
+<template>
+  <nav
+    ref="navRef"
+    v-bind="ownedAttrs.bindings()"
+    class="s-bottom-nav"
+    :class="{ 's-bottom-nav--hidden': isHidden }"
+    data-test="bottom-nav"
+    :aria-label="label"
+    @focusout="handleFocusout"
+  >
+    <div class="s-bottom-nav__items">
+      <div
+        v-for="item in items"
+        :key="item.id"
+        class="s-bottom-nav__item"
+      >
+        <SLink
+          v-if="item.kind === 'destination'"
+          :href="item.href"
+          :to="item.to"
+          :target="item.target"
+          :rel="item.rel"
+          :leading-icon="item.icon"
+          :disabled="item.disabled"
+          :active="isItemActive(item)"
+          variant="bottom-navigation"
+          width="full"
+          :aria-label="iconOnly ? item.label : undefined"
+          :data-testid="`bottom-nav-${item.id}`"
+          @click="handleDestinationClick($event, item)"
+        >
+          <span v-if="!iconOnly">{{ item.label }}</span>
+        </SLink>
+        <SButton
+          v-else
+          :ref="(api) => bindItemButton(item, api)"
+          :label="iconOnly ? undefined : item.label"
+          :leading-icon="item.icon"
+          :icon-only="iconOnly"
+          :disabled="isItemDisabled(item)"
+          size="sm"
+          :severity="isItemActive(item) ? 'primary' : 'secondary'"
+          :appearance="isItemActive(item) ? 'soft' : 'ghost'"
+          shape="row"
+          width="full"
+          content-align="center"
+          :id="item.kind === 'overflow' ? overflowTriggerId(item) : undefined"
+          :aria-current="item.kind === 'view' && isItemActive(item) ? 'page' : undefined"
+          :aria-label="iconOnly ? item.label : undefined"
+          :aria-haspopup="item.kind === 'overflow' && item.items.length > 0 ? 'menu' : undefined"
+          :disclosure="item.kind === 'overflow' && item.items.length > 0 ? {
+            expanded: activeOverflowId === item.id,
+            controls: overflowMenuId(item),
+          } : undefined"
+          :data-test="`bottom-nav-${item.id}`"
+          :data-testid="`bottom-nav-${item.id}`"
+          @click="handleItemClick(item, $event)"
+          @keydown="handleItemKeydown($event, item)"
+        />
+        <span v-if="item.badge !== undefined" class="s-bottom-nav__badge">
+          <SBadge severity="danger" size="xs">
+            {{ item.badge }}
+          </SBadge>
+        </span>
+      </div>
+      <div
+        v-if="activeOverflowItem"
+        ref="overflowLayerRef"
+        class="s-bottom-nav__overflow-layer"
+        data-test="bottom-nav-overflow"
+      >
+        <SMenuSurface
+          :id="overflowMenuId(activeOverflowItem)"
+          :label="activeOverflowItem.menuLabel"
+          density="compact"
+          orientation="horizontal"
+          autofocus
+          :items="activeOverflowMenuEntries"
+          @escape="closeOverflow(true)"
+          @focus-exit="closeOverflow(false)"
+          @select="handleOverflowSelection"
+          @tab="handleOverflowTab"
+        />
+      </div>
+    </div>
+    <div v-if="$slots.status" class="s-bottom-nav__status">
+      <slot name="status" />
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, computed, nextTick, useId, watch } from 'vue';
+import type { Component } from 'vue';
+import { findRelativeTabTarget } from '../../../internal/focusNavigation';
+import { registerLayer, type LayerRegistration } from '../../../internal/layerStack';
+import { useOwnedAttrs } from '../../../internal/ownedAttrs';
+import { resolveLinkTarget } from '../../../internal/linkTarget';
+import SButton from '../controls/SButton.vue';
+import type { SButtonApi } from '../controls/SButton.vue';
+import SLink from '../controls/SLink.vue';
+import SBadge from '../data-display/SBadge.vue';
+import SMenuSurface from '../controls/SMenuSurface.vue';
+import type { LinkDestination } from '../controls/SLink';
+import type {
+  SMenuAction,
+  SMenuActivationEvent,
+  SMenuDestination,
+  SMenuEntry,
+  SMenuSelectableEntry,
+} from '../controls/menu';
+
+defineOptions({ inheritAttrs: false });
+
+/**
+ * Общие данные пункта с уникальным непустым id. / Shared item data with a unique non-empty id.
+ */
+export interface BottomNavItemBase {
+  id: string;
+  icon: Component;
+  label: string;
+  badge?: number;
+  disabled?: boolean;
+}
+
+/**
+ * Назначение обновляет modelValue и владеет aria-current. / A destination updates modelValue and owns aria-current.
+ */
+export type BottomNavDestinationItem = BottomNavItemBase & LinkDestination & {
+  kind: 'destination';
+}
+
+/**
+ * Локальное представление переключает controlled model без выдуманного URL.
+ * A local view updates the controlled model without inventing a URL.
+ */
+export interface BottomNavViewItem extends BottomNavItemBase {
+  kind: 'view';
+}
+
+/**
+ * Команда эмитит action и не имитирует текущую страницу. / A command emits action and never impersonates a page.
+ */
+export interface BottomNavActionItem extends BottomNavItemBase {
+  kind: 'action';
+}
+
+/** Пункт, который можно выбрать напрямую. / A directly selectable item. */
+export type BottomNavLeafItem = BottomNavDestinationItem | BottomNavViewItem | BottomNavActionItem;
+
+/**
+ * Кнопка меню с доступным названием владеет типизированными пунктами. / A labelled menu button owns typed items.
+ */
+export interface BottomNavOverflowItem extends BottomNavItemBase {
+  kind: 'overflow';
+  menuLabel: string;
+  items: readonly BottomNavLeafItem[];
+}
+
+/** Публичный discriminated contract элемента нижней навигации. / Public discriminated bottom-navigation item contract. */
+export type BottomNavItem = BottomNavLeafItem | BottomNavOverflowItem;
+
+/**
+ * Измеренное состояние экземпляра navigation для scoped layout-consumer.
+ * Measured navigation instance state for a scoped layout consumer.
+ */
+export interface BottomNavLayoutState {
+  readonly hidden: boolean;
+  readonly height: number;
+}
+
+const props = withDefaults(defineProps<{
+  /** Имя navigation landmark для assistive technologies. / Accessible navigation landmark name. */
+  label: string;
+  items: readonly BottomNavItem[];
+  /** id текущего destination/view; другие id не получают current state. / Current destination/view id; other ids never receive current state. */
+  modelValue: string;
+  scrollTargetId?: string;
+  hidden?: boolean;
+  iconOnly?: boolean;
+}>(), {
+  hidden: false,
+  iconOnly: true,
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'action', value: string, event: SMenuActivationEvent): void;
+  (e: 'navigate', item: BottomNavDestinationItem, event: SMenuActivationEvent): void;
+  (e: 'layout-change', value: BottomNavLayoutState): void;
+}>();
+const ownedAttrs = useOwnedAttrs({ component: 'SBottomNav', owner: 'navigation root' });
+
+const iconOnly = computed(() => props.iconOnly);
+const componentId = useId();
+const navRef = ref<HTMLElement | null>(null);
+const overflowLayerRef = ref<HTMLElement | null>(null);
+const isHidden = ref(false);
+const activeOverflowId = ref<string | null>(null);
+const overflowTriggerApis = new Map<string, SButtonApi>();
+const overflowIdentityTokens = new Map<string, number>();
+let nextOverflowIdentityToken = 0;
+const overflowItems = computed(() => props.items.filter(
+  (item): item is BottomNavOverflowItem => item.kind === 'overflow',
+));
+const activeOverflowItem = computed(() => overflowItems.value.find(
+  (item) => item.id === activeOverflowId.value,
+) ?? null);
+const activeOverflowMenuEntries = computed<readonly SMenuEntry[]>(() => {
+  const overflow = activeOverflowItem.value;
+  if (!overflow) return [];
+  return overflow.items.map((item): SMenuAction | SMenuDestination => item.kind === 'destination'
+    ? {
+        ...item,
+        badgeSeverity: 'danger',
+        current: props.modelValue === item.id,
+        layout: 'tile',
+      }
+    : {
+        ...item,
+        kind: 'action',
+        badgeSeverity: 'danger',
+        current: item.kind === 'view' && props.modelValue === item.id,
+        layout: 'tile',
+      });
+});
+let lastScrollTop = 0;
+let overflowLayerRegistration: LayerRegistration | null = null;
+let resizeObserver: ResizeObserver | null = null;
+let usesWindowResizeFallback = false;
+let lastPublishedLayout: BottomNavLayoutState | null = null;
+
+const overflowIdentityToken = (item: BottomNavOverflowItem): number => {
+  const current = overflowIdentityTokens.get(item.id);
+  if (current !== undefined) return current;
+  const token = nextOverflowIdentityToken;
+  nextOverflowIdentityToken += 1;
+  overflowIdentityTokens.set(item.id, token);
+  return token;
+};
+
+const overflowTriggerId = (item: BottomNavOverflowItem): string =>
+  `s-bottom-nav-${componentId}-overflow-${overflowIdentityToken(item)}-trigger`;
+
+const overflowMenuId = (item: BottomNavOverflowItem): string =>
+  `s-bottom-nav-${componentId}-overflow-${overflowIdentityToken(item)}-menu`;
+
+const bindItemButton = (
+  item: BottomNavViewItem | BottomNavActionItem | BottomNavOverflowItem,
+  value: unknown,
+): void => {
+  if (item.kind !== 'overflow') return;
+  if (value === null) {
+    overflowTriggerApis.delete(item.id);
+    return;
+  }
+  if (
+    typeof value !== 'object'
+    || typeof Reflect.get(value, 'getElement') !== 'function'
+    || typeof Reflect.get(value, 'focus') !== 'function'
+  ) {
+    throw new TypeError(`SBottomNav: overflow trigger '${item.id}' must expose SButtonApi`);
+  }
+  overflowTriggerApis.set(item.id, value as SButtonApi);
+};
+
+const resolveOverflowTrigger = (item: BottomNavOverflowItem): HTMLButtonElement => {
+  const api = overflowTriggerApis.get(item.id);
+  if (!api) {
+    throw new Error(`SBottomNav: overflow trigger '${item.id}' is unavailable`);
+  }
+  const trigger = api.getElement();
+  const expectedId = overflowTriggerId(item);
+  if (trigger.id !== expectedId) {
+    throw new Error(
+      `SBottomNav: overflow trigger '${item.id}' owns id '${trigger.id}', expected '${expectedId}'`,
+    );
+  }
+  return trigger;
+};
+
+const isItemDisabled = (item: BottomNavItem): boolean =>
+  Boolean(item.disabled || (item.kind === 'overflow' && item.items.length === 0));
+
+const isItemActive = (item: BottomNavItem): boolean => {
+  if (isItemDisabled(item)) return false;
+  if (item.kind === 'action') return false;
+  if (item.kind === 'destination' || item.kind === 'view') return props.modelValue === item.id;
+  return activeOverflowId.value === item.id
+    || item.items.some((child) => (
+      child.kind === 'destination' || child.kind === 'view'
+    ) && !child.disabled && child.id === props.modelValue);
+};
+
+const adoptsCurrentDestination = (
+  item: BottomNavDestinationItem,
+  event: SMenuActivationEvent,
+): boolean => {
+  if ((item.target ?? '_self') !== '_self') return false;
+  if (!(event instanceof MouseEvent)) return true;
+  return event.button === 0 && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
+};
+
+const emitLeafSelection = (item: BottomNavLeafItem, event: SMenuActivationEvent): void => {
+  if (item.disabled) return;
+  if (item.kind === 'destination') {
+    emit('navigate', item, event);
+    if (adoptsCurrentDestination(item, event)) emit('update:modelValue', item.id);
+    return;
+  }
+  if (item.kind === 'view') {
+    emit('update:modelValue', item.id);
+    return;
+  }
+  emit('action', item.id, event);
+};
+
+const closeOverflow = (restoreFocus = false): void => {
+  if (!activeOverflowItem.value && !overflowLayerRegistration) return;
+  activeOverflowId.value = null;
+  overflowLayerRegistration?.unregister({ restoreFocus });
+  overflowLayerRegistration = null;
+};
+
+const openOverflow = (item: BottomNavOverflowItem): void => {
+  if (isItemDisabled(item)) return;
+  if (activeOverflowItem.value) closeOverflow(false);
+  const trigger = resolveOverflowTrigger(item);
+  activeOverflowId.value = item.id;
+  overflowLayerRegistration = registerLayer({
+    kind: 'menu',
+    root: () => overflowLayerRef.value,
+    anchor: () => trigger,
+    restoreTarget: trigger,
+    requestDismiss: (reason) => closeOverflow(reason === 'escape'),
+  });
+};
+
+const handleDestinationClick = (event: MouseEvent, item: BottomNavDestinationItem): void => {
+  closeOverflow(false);
+  emitLeafSelection(item, event);
+};
+
+const handleItemClick = (
+  item: BottomNavViewItem | BottomNavActionItem | BottomNavOverflowItem,
+  event: MouseEvent,
+): void => {
+  if (isItemDisabled(item)) return;
+  if (item.kind === 'overflow') {
+    if (activeOverflowId.value === item.id) closeOverflow(true);
+    else openOverflow(item);
+    return;
+  }
+  closeOverflow(false);
+  emitLeafSelection(item, event);
+};
+
+const handleItemKeydown = (event: KeyboardEvent, item: BottomNavItem): void => {
+  if (event.key !== 'ArrowDown' || item.kind !== 'overflow' || isItemDisabled(item)) return;
+  event.preventDefault();
+  openOverflow(item);
+};
+
+const handleOverflowSelection = (entry: SMenuSelectableEntry, event: SMenuActivationEvent): void => {
+  if (entry.kind !== 'action' && entry.kind !== 'destination') {
+    throw new TypeError(`SBottomNav: overflow menu accepts action/destination entries, received '${entry.kind}'`);
+  }
+  const overflow = activeOverflowItem.value;
+  if (!overflow) throw new Error(`SBottomNav: selected menu entry '${entry.id}' without an active overflow`);
+  const item = overflow.items.find((candidate) => candidate.id === entry.id);
+  if (!item) throw new Error(`SBottomNav: selected unknown overflow entry '${entry.id}'`);
+  if (item.disabled) return;
+  emitLeafSelection(item, event);
+  closeOverflow(true);
+};
+
+const handleFocusout = (event: FocusEvent): void => {
+  if (!activeOverflowItem.value) return;
+  const nextTarget = event.relatedTarget;
+  if (nextTarget instanceof Node && navRef.value?.contains(nextTarget)) return;
+  closeOverflow(false);
+};
+
+const handleOverflowTab = (event: KeyboardEvent): void => {
+  const item = activeOverflowItem.value;
+  if (!item) return;
+  const trigger = resolveOverflowTrigger(item);
+  const scope = overflowLayerRegistration?.focusScope() ?? document;
+  const target = findRelativeTabTarget(trigger, scope, overflowLayerRef.value, event.shiftKey);
+  event.preventDefault();
+  closeOverflow(false);
+  if (target) void nextTick(() => target.focus());
+};
+
+const handleScroll = (event: Event) => {
+  if (!props.scrollTargetId) return;
+  if (typeof window === 'undefined' || typeof document === 'undefined') return;
+
+  const target = event.target;
+
+  let current = 0;
+
+  if (target instanceof HTMLElement && target.id === props.scrollTargetId) {
+    current = target.scrollTop || 0;
+  } else if (target === document && document.documentElement.id === props.scrollTargetId) {
+    current = document.documentElement.scrollTop || document.body.scrollTop || 0;
+  } else {
+    return;
+  }
+
+  if (current > lastScrollTop + 10) {
+    isHidden.value = true;
+  } else if (current < lastScrollTop - 5) {
+    isHidden.value = false;
+  }
+  lastScrollTop = current;
+};
+
+const BASE_ITEM_KEYS = ['kind', 'id', 'label', 'icon', 'badge', 'disabled'] as const;
+const ITEM_KEYS = {
+  action: new Set<string>(BASE_ITEM_KEYS),
+  destination: new Set<string>([...BASE_ITEM_KEYS, 'href', 'to', 'target', 'rel']),
+  view: new Set<string>(BASE_ITEM_KEYS),
+  overflow: new Set<string>([...BASE_ITEM_KEYS, 'menuLabel', 'items']),
+} as const;
+
+function assertItemRecord(value: unknown, coordinate: string): asserts value is Record<string, unknown> {
+  if (typeof value === 'object' && value !== null && !Array.isArray(value)) return;
+  throw new TypeError(`SBottomNav: ${coordinate} must be an object`);
+}
+
+function validateLeafRecord(
+  candidate: Record<string, unknown>,
+  coordinate: string,
+): 'action' | 'destination' | 'view' {
+  const kind = candidate.kind;
+  if (kind !== 'action' && kind !== 'destination' && kind !== 'view') {
+    throw new TypeError(`SBottomNav: ${coordinate}.kind must be action, destination, or view`);
+  }
+  validateItemRecord(candidate, coordinate, kind);
+  return kind;
+}
+
+function validateItemRecord(
+  candidate: Record<string, unknown>,
+  coordinate: string,
+  kind: keyof typeof ITEM_KEYS,
+): void {
+  for (const key of Reflect.ownKeys(candidate)) {
+    if (typeof key !== 'string' || !ITEM_KEYS[kind].has(key)) {
+      throw new TypeError(`SBottomNav: ${coordinate} has unsupported field ${String(key)}`);
+    }
+    const descriptor = Object.getOwnPropertyDescriptor(candidate, key);
+    if (!descriptor?.enumerable || !('value' in descriptor)) {
+      throw new TypeError(`SBottomNav: ${coordinate}.${key} must be an enumerable data property`);
+    }
+  }
+  if (typeof candidate.id !== 'string' || !candidate.id.trim()) {
+    throw new TypeError(`SBottomNav: ${coordinate}.id must be a non-empty string`);
+  }
+  if (typeof candidate.label !== 'string' || !candidate.label.trim()) {
+    throw new TypeError(`SBottomNav: ${coordinate}.label must be a non-empty string`);
+  }
+  if (typeof candidate.icon !== 'object' && typeof candidate.icon !== 'function') {
+    throw new TypeError(`SBottomNav: ${coordinate}.icon must be a Vue component`);
+  }
+  if (candidate.disabled !== undefined && typeof candidate.disabled !== 'boolean') {
+    throw new TypeError(`SBottomNav: ${coordinate}.disabled must be a boolean`);
+  }
+  if (candidate.badge !== undefined && (
+    typeof candidate.badge !== 'number'
+    || !Number.isSafeInteger(candidate.badge)
+    || candidate.badge < 0
+  )) {
+    throw new TypeError(`SBottomNav: ${coordinate}.badge must be a non-negative safe integer`);
+  }
+  if (kind === 'destination') {
+    resolveLinkTarget({
+      owner: `SBottomNav: ${coordinate}`,
+      href: candidate.href,
+      to: candidate.to,
+      target: candidate.target,
+      rel: candidate.rel,
+    });
+  }
+}
+
+function validateItemsContract(value: unknown): void {
+  if (!Array.isArray(value) || value.length === 0) {
+    throw new TypeError('SBottomNav: items must be a non-empty array');
+  }
+  const ids = new Set<string>();
+  for (const [index, candidate] of value.entries()) {
+    const coordinate = `items[${index}]`;
+    assertItemRecord(candidate, coordinate);
+    const kind = candidate.kind;
+    if (kind !== 'action' && kind !== 'destination' && kind !== 'view' && kind !== 'overflow') {
+      throw new TypeError(`SBottomNav: ${coordinate}.kind must be action, destination, view, or overflow`);
+    }
+    validateItemRecord(candidate, coordinate, kind);
+    const id = candidate.id;
+    if (typeof id !== 'string') throw new TypeError(`SBottomNav: ${coordinate}.id must be a string`);
+    if (ids.has(id)) throw new TypeError(`SBottomNav: duplicate item id '${id}'`);
+    ids.add(id);
+    if (kind !== 'overflow') continue;
+    if (typeof candidate.menuLabel !== 'string' || !candidate.menuLabel.trim()) {
+      throw new TypeError(`SBottomNav: ${coordinate}.menuLabel must be a non-empty string`);
+    }
+    if (!Array.isArray(candidate.items)) {
+      throw new TypeError(`SBottomNav: ${coordinate}.items must be an array`);
+    }
+    for (const [childIndex, child] of candidate.items.entries()) {
+      const childCoordinate = `${coordinate}.items[${childIndex}]`;
+      assertItemRecord(child, childCoordinate);
+      validateLeafRecord(child, childCoordinate);
+      const childId = child.id;
+      if (typeof childId !== 'string') throw new TypeError(`SBottomNav: ${childCoordinate}.id must be a string`);
+      if (ids.has(childId)) throw new TypeError(`SBottomNav: duplicate item id '${childId}'`);
+      ids.add(childId);
+    }
+  }
+}
+
+const publishLayout = () => {
+  const el = navRef.value;
+  if (!el) return;
+  const nextLayout: BottomNavLayoutState = {
+    hidden: isHidden.value,
+    height: Math.max(0, el.offsetHeight),
+  };
+  if (
+    lastPublishedLayout
+    && lastPublishedLayout.hidden === nextLayout.hidden
+    && lastPublishedLayout.height === nextLayout.height
+  ) return;
+  lastPublishedLayout = nextLayout;
+  emit('layout-change', nextLayout);
+};
+
+onMounted(() => {
+  isHidden.value = props.hidden ?? false;
+  if (typeof document !== 'undefined') {
+    document.addEventListener('scroll', handleScroll as EventListener, { passive: true, capture: true });
+  }
+  if (typeof ResizeObserver !== 'undefined' && navRef.value) {
+    resizeObserver = new ResizeObserver(publishLayout);
+    resizeObserver.observe(navRef.value);
+  } else if (typeof window !== 'undefined') {
+    usesWindowResizeFallback = true;
+    window.addEventListener('resize', publishLayout);
+  }
+  publishLayout();
+});
+
+watch(isHidden, (val) => {
+  if (val) closeOverflow(false);
+  publishLayout();
+});
+
+watch(
+  () => props.hidden,
+  (hidden) => {
+    isHidden.value = hidden;
+  },
+);
+
+watch(
+  () => props.modelValue,
+  () => {
+    closeOverflow(false);
+    // При смене главного экрана всегда показываем панель снова
+    isHidden.value = props.hidden ?? false;
+    // Сбрасываем запомненную позицию скролла для нового экрана
+    lastScrollTop = 0;
+    publishLayout();
+  },
+);
+
+watch(
+  () => props.items,
+  () => {
+    validateItemsContract(props.items);
+    if (activeOverflowId.value) {
+      const activeItem = overflowItems.value.find((item) => item.id === activeOverflowId.value);
+      if (!activeItem || isItemDisabled(activeItem)) {
+        closeOverflow(false);
+      }
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => [props.label, props.modelValue, props.scrollTargetId] as const,
+  ([label, modelValue, scrollTargetId]) => {
+    if (typeof label !== 'string' || !label.trim()) throw new TypeError('SBottomNav: label must be non-empty');
+    if (typeof modelValue !== 'string' || !modelValue.trim()) {
+      throw new TypeError('SBottomNav: modelValue must be a non-empty destination id');
+    }
+    if (scrollTargetId !== undefined && (typeof scrollTargetId !== 'string' || !scrollTargetId.trim())) {
+      throw new TypeError('SBottomNav: scrollTargetId must be a non-empty string when provided');
+    }
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => {
+  if (typeof document !== 'undefined') {
+    document.removeEventListener('scroll', handleScroll as EventListener, { capture: true } as EventListenerOptions);
+  }
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+  if (usesWindowResizeFallback && typeof window !== 'undefined') {
+    window.removeEventListener('resize', publishLayout);
+  }
+  usesWindowResizeFallback = false;
+  overflowLayerRegistration?.unregister({ restoreFocus: false });
+  overflowLayerRegistration = null;
+  overflowTriggerApis.clear();
+  overflowIdentityTokens.clear();
+});
+</script>
+
+<style scoped>
+.s-bottom-nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-surface);
+  border-top: 1px solid var(--color-border-subtle);
+  padding: 6px 6px calc(8px + var(--safe-area-bottom, 0px)) 6px;
+  gap: 6px;
+  transition: transform var(--s-motion-standard) ease-in-out;
+  z-index: var(--s-layer-navigation);
+}
+.s-bottom-nav--hidden {
+  transform: translateY(100%);
+}
+.s-bottom-nav__items {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+}
+.s-bottom-nav__status {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  row-gap: 4px;
+  column-gap: 8px;
+  padding: 6px 4px 0;
+  border-top: 1px solid var(--color-border-subtle);
+  font-size: 11px;
+  line-height: 1.2;
+  color: var(--color-text-muted);
+}
+.s-bottom-nav__item {
+  position: relative;
+  min-width: 0;
+  flex: 1 1 0;
+}
+.s-bottom-nav__badge {
+  position: absolute;
+  top: -2px;
+  right: 2px;
+}
+.s-bottom-nav__overflow-layer {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  padding: 8px 10px;
+  overflow-x: auto;
+  z-index: var(--s-layer-navigation-submenu);
+}
+.s-bottom-nav__overflow-layer::-webkit-scrollbar {
+  height: 4px;
+}
+.s-bottom-nav__overflow-layer::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: var(--s-radius-pill);
+}
+@supports (padding: max(0px)) {
+  .s-bottom-nav {
+    padding-bottom: calc(8px + max(env(safe-area-inset-bottom, 0px), var(--safe-area-bottom, 0px)));
+  }
+}
+</style>