@pgcorp/ui-kit 0.10.0 → 0.10.2

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

@@ -1,695 +0,0 @@
-<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();
-  if (!(trigger instanceof HTMLButtonElement)) {
-    throw new TypeError(`SBottomNav: overflow trigger '${item.id}' must be an action button`);
-  }
-  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>