@pgcorp/ui-kit 0.10.0 → 0.10.2

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

@@ -1,636 +0,0 @@
-<template>
-  <div
-    v-bind="ownedAttrs.bindings()"
-    :data-s-tone="toneBinding['data-s-tone']"
-    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-close-mode="closeButtonMode"
-    :data-close-visibility="closeButtonVisibility"
-    :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="resolvedAriaLabel"
-        :controls-aria-label="resolvedControlsAriaLabel"
-        :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="resolvedAriaLabel"
-        :controls-aria-label="resolvedControlsAriaLabel"
-      >
-        <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 { useUiKitLocale } from '../../../composables/useUiKitLocale'
-import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
-import { lastItem } from '../../../internal/es2020'
-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'
-const TABS_TONES = ['primary', 'success'] as const satisfies readonly STabsTone[]
-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'
-  /** Видимость sibling close/action region. / Visibility policy for the sibling close/action region. */
-  closeButtonVisibility?: 'always' | 'active-hover' | 'hover'
-  /** Скругление 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: undefined,
-  controlsAriaLabel: undefined,
-  headerPosition: 'sticky',
-  tabListInset: 'none',
-  grow: true,
-  tabSizing: 'standard',
-  tabListWidth: 'auto',
-  tabDensity: 'default',
-  closeButtonMode: 'reserve',
-  closeButtonVisibility: 'always',
-  surfaceRadius: 'default',
-  surface: 'default',
-})
-const { t } = useUiKitLocale()
-const resolvedAriaLabel = computed(() => props.ariaLabel ?? t('navigation.tabs'))
-const resolvedControlsAriaLabel = computed(() => props.controlsAriaLabel ?? t('navigation.tabActions'))
-
-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' })
-const toneBinding = computed(() => resolveSemanticToneBinding(
-  'STabs',
-  'tone',
-  props.tone,
-  TABS_TONES,
-))
-
-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 (!resolvedAriaLabel.value.trim()) throw new TypeError('STabs: ariaLabel must be non-empty')
-  if (!resolvedControlsAriaLabel.value.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,
-  resolvedAriaLabel.value,
-  resolvedControlsAriaLabel.value,
-  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 closeVisibility = computed(() => props.closeButtonVisibility)
-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 = lastItem(enabled)
-  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,
-  closeButtonVisibility: closeVisibility,
-  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: 0;
-  --s-tab-trigger-min-height: var(--s-tab-row-height);
-  --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-s-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-s-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: 0; --s-tab-max-width: 15rem; }
-.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>