@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,617 @@
+<template>
+  <div
+    v-bind="ownedAttrs.bindings()"
+    class="s-tabs"
+    :data-testid="testId"
+    :data-composition="composition"
+    :data-variant="variant"
+    :data-grow="grow"
+    :data-density="tabDensity"
+    :data-sizing="tabSizing"
+    :data-list-width="tabListWidth"
+    :data-tone="tone"
+    :data-close-mode="closeButtonMode"
+    :data-radius="surfaceRadius"
+    :data-surface="surface"
+    :data-has-panels="composition === 'custom' ? 'custom' : ($slots.panels ? 'true' : 'false')"
+  >
+    <slot v-if="composition === 'custom'" />
+    <template v-else>
+      <STabList
+        v-if="variant !== 'bottom'"
+        placement="top"
+        :aria-label="ariaLabel"
+        :controls-aria-label="controlsAriaLabel"
+        :header-position="headerPosition"
+        :inset="tabListInset"
+      >
+        <slot name="list" />
+        <template v-if="$slots.controls" #controls><slot name="controls" /></template>
+      </STabList>
+      <STabPanels v-if="$slots.panels"><slot name="panels" /></STabPanels>
+      <STabList
+        v-if="variant === 'bottom'"
+        placement="bottom"
+        :aria-label="ariaLabel"
+        :controls-aria-label="controlsAriaLabel"
+      >
+        <slot name="list" />
+        <template v-if="$slots.controls" #controls><slot name="controls" /></template>
+      </STabList>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  onUnmounted,
+  provide,
+  ref,
+  shallowRef,
+  useId,
+  watch,
+  type VNodeChild,
+} from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import {
+  tabsContextKey,
+  type STabListRegistrationKey,
+  type STabPanelRegistration,
+  type STabPanelRegistrationKey,
+  type STabPanelsRegistrationKey,
+  type STabPanelState,
+  type STabRegistration,
+  type STabRegistrationKey,
+  type STabState,
+  type STabsContext,
+} from '../_internal/tabsContext'
+import STabList from './STabList.vue'
+import STabPanels from './STabPanels.vue'
+
+defineOptions({ inheritAttrs: false })
+
+export type STabsComposition = 'managed' | 'custom'
+export type STabsVariant = 'default' | 'flat' | 'bottom' | 'icon-only' | 'icon-with-label'
+export type STabsActivationMode = 'automatic' | 'manual'
+export type STabsTone = 'primary' | 'success'
+export type STabsSizing =
+  | 'content'
+  | 'compact'
+  | 'standard'
+  | 'wide'
+  | 'equal'
+  | 'columns-2'
+  | 'columns-3'
+  | 'columns-4'
+
+export interface Props {
+  /** Стабильный public test hook owner-поверхности. / Stable public test hook for the owner surface. */
+  testId?: string
+  /** Managed slots или явная compound composition. / Managed slots or explicit compound composition. */
+  composition?: STabsComposition
+  /** Визуальная поверхность набора вкладок. / Visual surface of the tab set. */
+  variant?: STabsVariant
+  /** Управляемый стабильный ключ. / Controlled stable key. */
+  modelValue?: string
+  /** Начальный стабильный ключ для uncontrolled режима. / Initial stable key for uncontrolled mode. */
+  defaultValue?: string
+  /** APG activation policy при roving focus. / APG activation policy during roving focus. */
+  activationMode?: STabsActivationMode
+  /** Семантический цвет selection. / Semantic selection tone. */
+  tone?: STabsTone
+  /** Accessible name единственного tablist. / Accessible name of the single tablist. */
+  ariaLabel?: string
+  /** Accessible name внешней action region. / Accessible name of the external action region. */
+  controlsAriaLabel?: string
+  /** Sticky/static политика managed header. / Sticky/static policy of the managed header. */
+  headerPosition?: 'sticky' | 'static'
+  /** Семантический inline inset tab row. / Semantic inline inset of the tab row. */
+  tabListInset?: 'none' | 'compact' | 'content'
+  /** Разрешает owner занимать доступную высоту. / Lets the owner fill available height. */
+  grow?: boolean
+  /** Семантическая геометрия без произвольных CSS lengths. / Semantic geometry without arbitrary CSS lengths. */
+  tabSizing?: STabsSizing
+  /** Семантическая ширина tab collection. / Semantic width of the tab collection. */
+  tabListWidth?: 'auto' | 'content' | 'full'
+  /** Плотность tab hitbox. / Density of the tab hitbox. */
+  tabDensity?: 'compact' | 'default' | 'comfortable'
+  /** Резервирует или перекрывает место sibling close action. / Reserves or overlays sibling close-action space. */
+  closeButtonMode?: 'reserve' | 'overlay'
+  /** Скругление owner surface. / Radius of the owner surface. */
+  surfaceRadius?: 'default' | 'none'
+  /** Фон owner surface. / Background of the owner surface. */
+  surface?: 'default' | 'transparent'
+}
+
+interface TabRecord extends STabRegistration {
+  readonly sequence: number
+  readonly tabId: string
+  readonly panelId: string
+}
+
+interface PanelRecord extends STabPanelRegistration {
+  readonly sequence: number
+  readonly tabId: string
+  readonly panelId: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  testId: undefined,
+  composition: 'managed',
+  variant: 'default',
+  modelValue: undefined,
+  defaultValue: undefined,
+  activationMode: 'automatic',
+  tone: 'primary',
+  ariaLabel: 'Вкладки',
+  controlsAriaLabel: 'Действия вкладок',
+  headerPosition: 'sticky',
+  tabListInset: 'none',
+  grow: true,
+  tabSizing: 'standard',
+  tabListWidth: 'auto',
+  tabDensity: 'default',
+  closeButtonMode: 'reserve',
+  surfaceRadius: 'default',
+  surface: 'default',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [key: string]
+  change: [key: string]
+}>()
+const slots = defineSlots<{
+  default?: () => VNodeChild
+  list?: () => VNodeChild
+  panels?: () => VNodeChild
+  controls?: () => VNodeChild
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'STabs', owner: 'tabs state and layout root' })
+
+function assertStableKey(value: unknown, coordinate: string): asserts value is string {
+  if (typeof value !== 'string' || !value.trim() || value !== value.trim()) {
+    throw new TypeError(`STabs: ${coordinate} must be a non-empty string without surrounding whitespace`)
+  }
+}
+
+function assertCompositionContract(): void {
+  if (props.composition === 'custom' && !slots.default) {
+    throw new Error('STabs: composition="custom" requires the default compound slot')
+  }
+  if (props.composition === 'custom' && (slots.list || slots.panels || slots.controls)) {
+    throw new Error('STabs: composition="custom" does not accept managed list/panels/controls slots')
+  }
+  if (props.composition === 'managed' && !slots.list) {
+    throw new Error('STabs: composition="managed" requires the list slot')
+  }
+  if (props.composition === 'managed' && slots.default) {
+    throw new Error('STabs: composition="managed" does not accept the default slot')
+  }
+}
+
+function assertPropsContract(): void {
+  assertCompositionContract()
+  if (props.modelValue !== undefined) assertStableKey(props.modelValue, 'modelValue')
+  if (props.defaultValue !== undefined) assertStableKey(props.defaultValue, 'defaultValue')
+  if (props.modelValue !== undefined && props.defaultValue !== undefined) {
+    throw new Error('STabs: modelValue and defaultValue are mutually exclusive')
+  }
+  if (!props.ariaLabel.trim()) throw new TypeError('STabs: ariaLabel must be non-empty')
+  if (!props.controlsAriaLabel.trim()) throw new TypeError('STabs: controlsAriaLabel must be non-empty')
+  if (props.testId !== undefined && !props.testId.trim()) throw new TypeError('STabs: testId must be non-empty')
+}
+
+assertPropsContract()
+watch(() => [
+  props.composition,
+  props.modelValue,
+  props.defaultValue,
+  props.ariaLabel,
+  props.controlsAriaLabel,
+  props.testId,
+] as const, assertPropsContract)
+
+const ownerId = `s-tabs-${useId()}`
+const tabs = shallowRef<TabRecord[]>([])
+const panels = shallowRef<PanelRecord[]>([])
+const panelOwners = new Set<STabPanelsRegistrationKey>()
+const tabLists = new Map<STabListRegistrationKey, () => void>()
+const identityOrdinals = new Map<string, number>()
+const orderVersion = ref(0)
+const internalActiveKey = ref<string | null>(props.defaultValue ?? null)
+const rovingTabKey = ref<string | null>(null)
+let nextIdentityOrdinal = 0
+let nextSequence = 0
+let inventoryRevision = 0
+let isMounted = false
+let isUnmounting = false
+
+const isControlled = computed(() => props.modelValue !== undefined)
+const activeKey = computed<string | null>(() => (
+  isControlled.value ? (props.modelValue ?? null) : internalActiveKey.value
+))
+const activationMode = computed(() => props.activationMode)
+const closeMode = computed(() => props.closeButtonMode)
+const density = computed(() => props.tabDensity)
+
+function identityIds(tabKey: string): { tabId: string; panelId: string } {
+  let ordinal = identityOrdinals.get(tabKey)
+  if (ordinal === undefined) {
+    ordinal = nextIdentityOrdinal
+    nextIdentityOrdinal += 1
+    identityOrdinals.set(tabKey, ordinal)
+  }
+  return {
+    tabId: `${ownerId}-tab-${ordinal}`,
+    panelId: `${ownerId}-panel-${ordinal}`,
+  }
+}
+
+function compareElements(
+  left: { element: () => HTMLElement | null; sequence: number },
+  right: { element: () => HTMLElement | null; sequence: number },
+): number {
+  const leftElement = left.element()
+  const rightElement = right.element()
+  if (!leftElement || !rightElement || leftElement === rightElement) return left.sequence - right.sequence
+  const position = leftElement.compareDocumentPosition(rightElement)
+  if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1
+  if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1
+  return left.sequence - right.sequence
+}
+
+const orderedTabs = computed(() => {
+  void orderVersion.value
+  return [...tabs.value].sort(compareElements)
+})
+const orderedPanels = computed(() => {
+  void orderVersion.value
+  return [...panels.value].sort(compareElements)
+})
+const activeTab = computed(() => (
+  activeKey.value === null ? null : orderedTabs.value.find((tab) => tab.tabKey === activeKey.value) ?? null
+))
+const effectiveRovingKey = computed(() => {
+  const roving = orderedTabs.value.find((tab) => tab.tabKey === rovingTabKey.value && !tab.disabled())
+  if (roving) return roving.tabKey
+  if (activeTab.value && !activeTab.value.disabled()) return activeTab.value.tabKey
+  return orderedTabs.value.find((tab) => !tab.disabled())?.tabKey ?? null
+})
+
+function panelsRequired(): boolean {
+  return Boolean(slots.panels) || panelOwners.size > 0
+}
+
+function validateInventory(): void {
+  if (isUnmounting) return
+  if (tabLists.size !== 1) {
+    throw new Error(`STabs: expected exactly one STabList owner, received ${tabLists.size}`)
+  }
+  const tabKeys = new Set(orderedTabs.value.map((tab) => tab.tabKey))
+  const panelKeys = new Set(orderedPanels.value.map((panel) => panel.tabKey))
+  if (panelsRequired()) {
+    for (const key of tabKeys) {
+      if (!panelKeys.has(key)) throw new Error(`STabs: missing panel for tabKey "${key}"`)
+    }
+    for (const key of panelKeys) {
+      if (!tabKeys.has(key)) throw new Error(`STabs: orphan panel for tabKey "${key}"`)
+    }
+  } else if (panelKeys.size > 0) {
+    throw new Error('STabs: panels require exactly one STabPanels owner')
+  }
+
+  if (activeKey.value !== null) {
+    const selected = orderedTabs.value.find((tab) => tab.tabKey === activeKey.value)
+    if (!selected) throw new Error(`STabs: stale selected tabKey "${activeKey.value}"`)
+    return
+  }
+  if (!isControlled.value) {
+    internalActiveKey.value = orderedTabs.value.find((tab) => !tab.disabled())?.tabKey ?? null
+  }
+}
+
+function scheduleInventoryValidation(): void {
+  inventoryRevision += 1
+  const revision = inventoryRevision
+  if (!isMounted || isUnmounting) return
+  void nextTick(() => {
+    if (revision === inventoryRevision) validateInventory()
+  })
+}
+
+function registerTab(registration: STabRegistration): STabRegistrationKey {
+  assertStableKey(registration.tabKey, 'STab.name')
+  if (tabs.value.some((tab) => tab.tabKey === registration.tabKey)) {
+    throw new Error(`STabs: duplicate tabKey "${registration.tabKey}"`)
+  }
+  const ids = identityIds(registration.tabKey)
+  tabs.value = [...tabs.value, { ...registration, ...ids, sequence: nextSequence++ }]
+  orderVersion.value += 1
+  scheduleInventoryValidation()
+  return registration.tabKey
+}
+
+function unregisterTab(key: STabRegistrationKey): void {
+  if (!tabs.value.some((tab) => tab.tabKey === key)) throw new Error(`STabs: unknown tab registration "${key}"`)
+  tabs.value = tabs.value.filter((tab) => tab.tabKey !== key)
+  if (rovingTabKey.value === key) rovingTabKey.value = null
+  orderVersion.value += 1
+  scheduleInventoryValidation()
+}
+
+function registerPanel(registration: STabPanelRegistration): STabPanelRegistrationKey {
+  assertStableKey(registration.tabKey, 'STabPanel.name')
+  if (panels.value.some((panel) => panel.tabKey === registration.tabKey)) {
+    throw new Error(`STabs: duplicate panel tabKey "${registration.tabKey}"`)
+  }
+  const ids = identityIds(registration.tabKey)
+  panels.value = [...panels.value, { ...registration, ...ids, sequence: nextSequence++ }]
+  orderVersion.value += 1
+  scheduleInventoryValidation()
+  return registration.tabKey
+}
+
+function unregisterPanel(key: STabPanelRegistrationKey): void {
+  if (!panels.value.some((panel) => panel.tabKey === key)) throw new Error(`STabs: unknown panel registration "${key}"`)
+  panels.value = panels.value.filter((panel) => panel.tabKey !== key)
+  orderVersion.value += 1
+  scheduleInventoryValidation()
+}
+
+function getTabState(key: STabRegistrationKey): STabState {
+  const tab = tabs.value.find((candidate) => candidate.tabKey === key)
+  if (!tab) throw new Error(`STabs: missing tab registration "${key}"`)
+  const hasPanel = panelsRequired() || panels.value.some((panel) => panel.tabKey === key)
+  return {
+    active: activeKey.value === key,
+    disabled: tab.disabled(),
+    tabIndex: effectiveRovingKey.value === key ? 0 : -1,
+    tabId: tab.tabId,
+    panelId: hasPanel ? tab.panelId : undefined,
+  }
+}
+
+function getActiveTabElement(): HTMLElement | null {
+  return activeTab.value?.element() ?? null
+}
+
+function getPanelState(key: STabPanelRegistrationKey): STabPanelState {
+  const panel = panels.value.find((candidate) => candidate.tabKey === key)
+  if (!panel) throw new Error(`STabs: missing panel registration "${key}"`)
+  const hasTab = tabs.value.some((tab) => tab.tabKey === key)
+  return {
+    active: activeKey.value === key,
+    panelId: panel.panelId,
+    tabId: hasTab ? panel.tabId : undefined,
+  }
+}
+
+function activateTab(key: STabRegistrationKey): void {
+  const tab = orderedTabs.value.find((candidate) => candidate.tabKey === key)
+  if (!tab) throw new Error(`STabs: cannot activate missing tabKey "${key}"`)
+  if (tab.disabled()) return
+  rovingTabKey.value = key
+  if (activeKey.value === key) return
+  if (!isControlled.value) internalActiveKey.value = key
+  emit('update:modelValue', key)
+  emit('change', key)
+}
+
+function focusTab(key: STabRegistrationKey): void {
+  const tab = orderedTabs.value.find((candidate) => candidate.tabKey === key)
+  if (!tab) throw new Error(`STabs: cannot focus missing tabKey "${key}"`)
+  if (!tab.disabled()) rovingTabKey.value = key
+}
+
+function handleTabKeydown(key: STabRegistrationKey, event: KeyboardEvent): void {
+  const current = orderedTabs.value.find((tab) => tab.tabKey === key)
+  if (!current) throw new Error(`STabs: cannot handle keyboard input for missing tabKey "${key}"`)
+  if (current.disabled()) return
+  const enabled = orderedTabs.value.filter((tab) => !tab.disabled())
+  const currentIndex = enabled.findIndex((tab) => tab.tabKey === current.tabKey)
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    activateTab(current.tabKey)
+    return
+  }
+  let next: TabRecord | undefined
+  if (event.key === 'Home') next = enabled[0]
+  else if (event.key === 'End') next = enabled.at(-1)
+  else if (event.key === 'ArrowLeft') next = enabled[(currentIndex - 1 + enabled.length) % enabled.length]
+  else if (event.key === 'ArrowRight') next = enabled[(currentIndex + 1) % enabled.length]
+  if (!next) return
+  event.preventDefault()
+  rovingTabKey.value = next.tabKey
+  next.element()?.focus()
+  if (activationMode.value === 'automatic') activateTab(next.tabKey)
+}
+
+function registerTabList(scroll: () => void): STabListRegistrationKey {
+  if (tabLists.size > 0) throw new Error('STabs: exactly one STabList owner is allowed')
+  const key = Symbol('tab-list')
+  tabLists.set(key, scroll)
+  scheduleInventoryValidation()
+  return key
+}
+function unregisterTabList(key: STabListRegistrationKey): void {
+  if (!tabLists.delete(key)) throw new Error('STabs: unknown tablist registration')
+}
+function registerPanels(): STabPanelsRegistrationKey {
+  if (panelOwners.size > 0) throw new Error('STabs: exactly one STabPanels owner is allowed')
+  const key = Symbol('tab-panels')
+  panelOwners.add(key)
+  scheduleInventoryValidation()
+  return key
+}
+function unregisterPanels(key: STabPanelsRegistrationKey): void {
+  if (!panelOwners.delete(key)) throw new Error('STabs: unknown STabPanels registration')
+  scheduleInventoryValidation()
+}
+
+const context: STabsContext = {
+  activeKey,
+  activationMode,
+  closeButtonMode: closeMode,
+  tabDensity: density,
+  registerTab,
+  unregisterTab,
+  notifyTabOrderChanged: () => { orderVersion.value += 1 },
+  getTabState,
+  getActiveTabElement,
+  activateTab,
+  focusTab,
+  registerPanel,
+  unregisterPanel,
+  notifyPanelOrderChanged: () => { orderVersion.value += 1 },
+  getPanelState,
+  handleTabKeydown,
+  registerTabList,
+  unregisterTabList,
+  registerPanels,
+  unregisterPanels,
+}
+provide(tabsContextKey, context)
+
+watch(() => props.modelValue, () => {
+  rovingTabKey.value = null
+  scheduleInventoryValidation()
+})
+watch(() => tabs.value.map((tab) => [tab.tabKey, tab.disabled()] as const), scheduleInventoryValidation, { deep: true })
+
+onMounted(() => {
+  isMounted = true
+  try {
+    validateInventory()
+  } catch (error) {
+    isUnmounting = true
+    inventoryRevision += 1
+    throw error
+  }
+})
+
+onBeforeUnmount(() => {
+  isUnmounting = true
+  inventoryRevision += 1
+})
+
+onUnmounted(() => {
+  tabs.value = []
+  panels.value = []
+  tabLists.clear()
+  panelOwners.clear()
+})
+
+defineExpose({
+  scrollActiveIntoCenter: () => {
+    for (const scroll of tabLists.values()) scroll()
+  },
+})
+</script>
+
+<style lang="postcss" scoped>
+@reference "../../../styles/reference.css";
+
+.s-tabs {
+  @apply relative flex h-full min-h-0 min-w-0 w-full flex-col rounded-lg border border-surface-200 bg-surface-0;
+  @apply dark:border-surface-700 dark:bg-surface-800;
+  --s-tab-gap: 0.5rem;
+  --s-tab-base-padding-inline: 1rem;
+  --s-tab-padding-inline: var(--s-tab-base-padding-inline);
+  --s-tab-padding-block: 0;
+  --s-tab-content-offset-y: 2px;
+  --s-tab-trigger-min-height: var(--s-control-hitbox-sm);
+  --s-tab-indicator-width: 2px;
+  --s-tab-radius: 0.375rem 0.375rem 0 0;
+  --s-tab-active-translate-y: 1px;
+  --s-tab-disabled-opacity: 0.58;
+  --s-tab-sibling-actions-gap: 0.25rem;
+  --s-tab-direction: row;
+  --s-tab-label-display: inline-block;
+  --s-tab-label-flex: 1 1 auto;
+  --s-tab-label-size: inherit;
+  --s-tab-label-line-height: 1.25rem;
+  --s-tab-panels-flex: 1 1 0%;
+  --s-tab-row-height: 2.5rem;
+  --s-tab-width: auto;
+  --s-tab-min-width: 0;
+  --s-tab-max-width: 15rem;
+  --s-tab-flex: 0 0 auto;
+  --s-tab-list-tabs-width: auto;
+  --s-tab-list-inset-inline: 0;
+  --s-tab-overflow-fade-width: 3rem;
+  --s-tab-overflow-edge-opacity: 0.96;
+  --s-tab-list-edge-surface: var(--color-surface-0);
+  --s-tab-color: var(--color-surface-500);
+  --s-tab-hover-color: var(--color-surface-700);
+  --s-tab-hover-background: var(--color-surface-100);
+  --s-tab-selected-color: var(--color-primary-600);
+  --s-tab-selected-border-color: var(--color-primary-500);
+  --s-tab-disabled-color: var(--color-surface-400);
+}
+
+:global(.dark) .s-tabs {
+  --s-tab-list-edge-surface: var(--color-surface-800);
+  --s-tab-color: var(--color-surface-400);
+  --s-tab-hover-color: var(--color-surface-200);
+  --s-tab-hover-background: var(--color-surface-800);
+  --s-tab-selected-color: var(--color-primary-400);
+  --s-tab-selected-border-color: var(--color-primary-400);
+  --s-tab-disabled-color: var(--color-surface-600);
+}
+.s-tabs[data-tone='success'] {
+  --s-tab-hover-color: var(--color-success-700);
+  --s-tab-selected-color: var(--color-success-700);
+  --s-tab-selected-border-color: var(--color-success-600);
+}
+:global(.dark) .s-tabs[data-tone='success'] {
+  --s-tab-hover-color: var(--color-success-300);
+  --s-tab-selected-color: var(--color-success-300);
+  --s-tab-selected-border-color: var(--color-success-400);
+}
+
+.s-tabs[data-density='compact'] { --s-tab-row-height: 2rem; --s-tab-base-padding-inline: 0.5rem; }
+.s-tabs[data-density='comfortable'] { --s-tab-row-height: 3rem; --s-tab-base-padding-inline: 1.125rem; }
+.s-tabs[data-sizing='content'] { --s-tab-min-width: 7rem; --s-tab-max-width: none; }
+.s-tabs[data-sizing='compact'] { --s-tab-max-width: 10.5rem; }
+.s-tabs[data-sizing='wide'] { --s-tab-max-width: 20rem; }
+.s-tabs[data-sizing='equal'] {
+  --s-tab-width: 0;
+  --s-tab-min-width: 0;
+  --s-tab-max-width: none;
+  --s-tab-flex: 1 1 0;
+}
+.s-tabs[data-sizing='columns-2'],
+.s-tabs[data-sizing='columns-3'],
+.s-tabs[data-sizing='columns-4'] {
+  --s-tab-min-width: 0;
+  --s-tab-max-width: none;
+}
+.s-tabs[data-sizing='columns-2'] { --s-tab-width: 50%; }
+.s-tabs[data-sizing='columns-3'] { --s-tab-width: 33.3333%; }
+.s-tabs[data-sizing='columns-4'] { --s-tab-width: 25%; }
+.s-tabs[data-list-width='content'] { --s-tab-list-tabs-width: max-content; }
+.s-tabs[data-list-width='full'] { --s-tab-list-tabs-width: 100%; }
+.s-tabs[data-radius='none'] { @apply rounded-none; }
+.s-tabs[data-surface='transparent'] { background: transparent; }
+.s-tabs[data-grow='false'] { @apply h-auto; --s-tab-panels-flex: none; }
+.s-tabs[data-variant='flat'] { @apply rounded-none border-0; }
+.s-tabs[data-variant='bottom'] {
+  @apply fixed inset-x-0 bottom-0 rounded-none border-t bg-surface-0 dark:bg-surface-800;
+  z-index: var(--s-layer-navigation);
+  --s-tab-content-offset-y: 0;
+}
+.s-tabs[data-variant='bottom'][data-has-panels='false'] { @apply h-auto; }
+.s-tabs[data-variant='icon-only'] { --s-tab-label-display: none; }
+.s-tabs[data-variant='icon-with-label'] {
+  --s-tab-label-size: 12px;
+  --s-tab-label-flex: 0 1 auto;
+  --s-tab-direction: column;
+  --s-tab-padding-block: 0.5rem;
+  --s-tab-content-offset-y: 0;
+  --s-tab-gap: 0.25rem;
+}
+</style>

package/src/components/shared/navigation/SWizardSteps.css

@@ -0,0 +1,69 @@
+.s-wizard-steps {
+  min-width: 0;
+  border-radius: var(--radius-lg);
+  background: var(--s-wizard-steps-surface);
+  padding: var(--s-wizard-steps-padding);
+}
+
+.s-wizard-steps__list {
+  display: grid;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  gap: var(--s-space-control-gap);
+  grid-auto-columns: minmax(var(--s-wizard-step-min-inline-size), max-content);
+  grid-auto-flow: column;
+  list-style: none;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+}
+
+.s-wizard-steps[data-columns='2'] .s-wizard-steps__list,
+.s-wizard-steps[data-columns='3'] .s-wizard-steps__list,
+.s-wizard-steps[data-columns='4'] .s-wizard-steps__list {
+  overflow: visible;
+  grid-auto-flow: row;
+}
+
+.s-wizard-steps[data-columns='2'] .s-wizard-steps__list {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.s-wizard-steps[data-columns='3'] .s-wizard-steps__list {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.s-wizard-steps[data-columns='4'] .s-wizard-steps__list {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.s-wizard-steps__item {
+  min-width: 0;
+}
+
+.s-wizard-steps__marker {
+  display: inline-flex;
+  width: var(--s-wizard-step-marker-size);
+  height: var(--s-wizard-step-marker-size);
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  border: var(--s-wizard-step-marker-border-width) solid currentColor;
+  border-radius: var(--s-radius-pill);
+  background: color-mix(in srgb, currentColor 8%, transparent);
+  font-size: var(--s-wizard-step-marker-font-size);
+  font-weight: 700;
+  line-height: 1;
+}
+
+.s-wizard-steps__item[data-state='current'] .s-wizard-steps__marker,
+.s-wizard-steps__item[data-state='completed'] .s-wizard-steps__marker {
+  background: color-mix(in srgb, currentColor 16%, transparent);
+}
+
+.s-wizard-steps__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}