@pgcorp/ui-kit 0.1.2 → 0.3.0

package/src/components/shared/controls/SSwitch.vue

@@ -0,0 +1,109 @@
+<template>
+  <SField
+    :control-id="inputId"
+    :label="label"
+    :required="required"
+    :help-text="helpText"
+    :error-message="errorMessage"
+    :invalid="invalid"
+    :disabled="disabled"
+    :readonly="readonly"
+    layout="inline"
+  >
+    <template #default="field">
+      <span class="s-switch-control">
+        <input
+          v-bind="ownedAttrs.bindings()"
+          :id="field.controlId"
+          type="checkbox"
+          role="switch"
+          class="s-switch-input"
+          :checked="checkedValue"
+          :disabled="field.disabled"
+          :required="field.required"
+          :aria-checked="checkedValue"
+          :aria-invalid="field.invalid || undefined"
+          :aria-readonly="field.readonly || undefined"
+          :aria-describedby="mergeIdReferences(ownedAttrs.string('aria-describedby'), field.describedBy)"
+          @click.stop="onClick"
+          @change="onChange"
+        />
+        <span class="s-switch-track" aria-hidden="true">
+          <span class="s-switch-thumb" />
+        </span>
+      </span>
+    </template>
+  </SField>
+</template>
+
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import { resolveOptionalDomId } from '../../../internal/runtimeContract'
+import SField from './SField.vue'
+
+defineOptions({ inheritAttrs: false })
+
+export interface Props {
+  modelValue: boolean
+  label?: string
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  invalid?: boolean
+  helpText?: string
+  errorMessage?: string
+  id?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
+  disabled: false,
+  readonly: false,
+  required: false,
+  invalid: false,
+  helpText: undefined,
+  errorMessage: undefined,
+  id: undefined,
+})
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  click: [event: MouseEvent]
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'SSwitch', owner: 'native switch input' })
+useInteractiveLeafRegistration({ owner: 'SSwitch' })
+
+const generatedInputId = useId()
+const inputId = computed(() => resolveOptionalDomId(
+  'SSwitch',
+  'id',
+  props.id,
+  `s-switch-${generatedInputId}`,
+))
+const checkedValue = computed(() => {
+  if (typeof props.modelValue !== 'boolean') {
+    throw new TypeError('SSwitch: modelValue must be boolean')
+  }
+  return props.modelValue
+})
+
+function onChange(event: Event): void {
+  if (props.readonly) return
+  const target = event.currentTarget
+  if (!(target instanceof HTMLInputElement)) {
+    throw new TypeError('SSwitch: change event owner must be the native switch input')
+  }
+  emit('update:modelValue', target.checked)
+}
+
+function onClick(event: MouseEvent): void {
+  if (props.readonly) {
+    event.preventDefault()
+    return
+  }
+  emit('click', event)
+}
+</script>
+
+<style lang="postcss" src="./SSwitch.css" scoped></style>

package/src/components/shared/controls/_internal/SInlineTokenSurface.vue

@@ -4,6 +4,7 @@ import {
   createTextVNode,
   defineComponent,
   h,
+  type Component,
   type ComponentPublicInstance,
   type PropType,
 } from 'vue'
@@ -14,7 +15,9 @@ import type { InlineTokenEditorSegmentContract } from '../../../../internal/inli
 import type { OwnedAttributeBindings } from '../../../../internal/ownedAttrs'
 import { useInteractiveLeafRegistration } from '../../../../internal/passiveContentContract'
 import { validateBoundedInteger } from '../../../../internal/runtimeContract'
-import SButton, { type Props as SButtonProps } from '../SButton.vue'
+import SButton, { type SButtonActionProps } from '../SButton.vue'
+
+const actionButtonComponent: Component = SButton
 
 /** Текст визуального caret helper. / Visual caret-helper text. */
 export const INLINE_TOKEN_EDITOR_VISUAL_CARET_TEXT = '\u200B'
@@ -35,7 +38,7 @@ export type InlineTokenElementRef = (
   refs: Record<string, unknown>,
 ) => void
 
-interface InlineTokenActionButtonBindings extends SButtonProps {
+interface InlineTokenActionButtonBindings extends SButtonActionProps {
   readonly 'aria-label': string
   readonly title?: string
   readonly onClick: (event: MouseEvent) => void
@@ -161,7 +164,7 @@ export default defineComponent({
             onClick: (event) => emitTokenAction(event, action, segment),
             onKeydown: stopKeyPropagation,
           }
-      return h(SButton, { ...bindings, key: action })
+      return h(actionButtonComponent, { ...bindings, key: action })
     }
 
     return () => h('div', {

package/src/components/shared/data-display/SChip.css

@@ -0,0 +1,59 @@
+@reference "../../../styles/reference.css";
+
+.s-chip {
+  @apply inline-flex min-w-0 items-center rounded-full font-medium;
+}
+
+.s-chip[data-size='md'] {
+  @apply min-h-7 gap-1.5 px-2.5 text-xs;
+}
+
+.s-chip[data-size='md'][data-closable='true'] {
+  @apply pr-1;
+}
+
+.s-chip[data-size='sm'] {
+  @apply min-h-6 gap-1 px-2 text-[11px] leading-4;
+}
+
+.s-chip[data-size='sm'][data-closable='true'] {
+  @apply pr-0.5;
+}
+
+.s-chip__icon {
+  @apply inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center;
+}
+
+.s-chip__icon-graphic {
+  @apply h-full w-full;
+}
+
+.s-chip__label {
+  @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.s-chip[data-disabled='true'] {
+  @apply opacity-60;
+}
+
+.s-chip[data-severity='primary'] {
+  @apply bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-50;
+}
+.s-chip[data-severity='secondary'] {
+  @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-50;
+}
+.s-chip[data-severity='success'] {
+  @apply bg-success-100 text-success-800 dark:bg-success-950 dark:text-success-50;
+}
+.s-chip[data-severity='info'] {
+  @apply bg-info-100 text-info-800 dark:bg-info-950 dark:text-info-50;
+}
+.s-chip[data-severity='warn'] {
+  @apply bg-warn-100 text-warn-800 dark:bg-warn-950 dark:text-warn-50;
+}
+.s-chip[data-severity='danger'] {
+  @apply bg-danger-100 text-danger-800 dark:bg-danger-950 dark:text-danger-50;
+}
+.s-chip[data-severity='contrast'] {
+  @apply bg-surface-800 text-surface-100 dark:bg-surface-200 dark:text-surface-800;
+}

package/src/components/shared/data-display/SChip.vue

@@ -0,0 +1,92 @@
+<template>
+  <span
+    v-bind="ownedAttrs.bindings()"
+    class="s-chip"
+    :data-severity="validatedSeverity"
+    :data-size="validatedSize"
+    :data-closable="closable || undefined"
+    :data-disabled="disabled || undefined"
+  >
+    <span v-if="leadingIcon" class="s-chip__icon" aria-hidden="true">
+      <component :is="leadingIcon" class="s-chip__icon-graphic" />
+    </span>
+    <span class="s-chip__label">{{ validatedLabel }}</span>
+    <SButton
+      v-if="closable"
+      label=""
+      appearance="ghost"
+      severity="secondary"
+      size="xs"
+      density="compact"
+      spacing="tight"
+      shape="circle"
+      icon-only
+      :leading-icon="X"
+      :disabled="disabled"
+      :aria-label="resolvedCloseLabel"
+      :title="resolvedCloseLabel"
+      @click.stop="emit('close', $event)"
+    />
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+import { X } from '../../icons/sputnigUiIcons'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import {
+  validateBoolean,
+  validateExactString,
+  validateNonEmptyString,
+} from '../../../internal/runtimeContract'
+import SButton from '../controls/SButton.vue'
+import type { BadgeSeverity } from './SBadge.vue'
+
+defineOptions({ inheritAttrs: false })
+
+export type SChipSeverity = BadgeSeverity
+export type SChipSize = 'sm' | 'md'
+
+export interface Props {
+  label: string
+  severity?: SChipSeverity
+  size?: SChipSize
+  leadingIcon?: Component
+  closable?: boolean
+  closeLabel?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  severity: 'secondary',
+  size: 'md',
+  leadingIcon: undefined,
+  closable: false,
+  closeLabel: undefined,
+  disabled: false,
+})
+const emit = defineEmits<{
+  close: [event: MouseEvent]
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'SChip', owner: 'chip root' })
+
+const validatedLabel = computed(() => validateNonEmptyString('SChip', 'label', props.label))
+const validatedSeverity = computed(() => validateExactString(
+  'SChip',
+  'severity',
+  props.severity,
+  ['primary', 'secondary', 'success', 'info', 'warn', 'danger', 'contrast'] as const,
+))
+const validatedSize = computed(() => validateExactString(
+  'SChip', 'size', props.size, ['sm', 'md'] as const,
+))
+const resolvedCloseLabel = computed(() => {
+  validateBoolean('SChip', 'closable', props.closable)
+  validateBoolean('SChip', 'disabled', props.disabled)
+  return props.closeLabel === undefined
+    ? `Удалить «${validatedLabel.value}»`
+    : validateNonEmptyString('SChip', 'closeLabel', props.closeLabel)
+})
+</script>
+
+<style lang="postcss" src="./SChip.css" scoped></style>

package/src/components/shared/data-display/SCodeBlock.vue

@@ -6,7 +6,7 @@
       's-code-block--radius-none': validatedSurfaceRadius === 'none',
       's-code-block--radius-xl': validatedSurfaceRadius === 'xl',
       's-code-block--interactive': !validatedReadOnly,
-      's-code-block--viewport': validatedViewport !== 'content',
+      's-code-block--viewport': !['content', 'document'].includes(validatedViewport),
     }"
   >
     <div v-if="validatedShowHeader" class="s-code-block-header">

package/src/components/shared/data-display/SCodeEditor.css

@@ -11,6 +11,21 @@
   max-height: var(--s-code-editor-viewport-content-max);
 }
 
+.s-code-editor[data-viewport='document'] {
+  overflow: visible;
+}
+
+.s-code-editor[data-viewport='document'] :deep(.cm-editor) {
+  height: auto;
+  max-height: none;
+  overflow: visible;
+}
+
+.s-code-editor[data-viewport='document'][data-variant] :deep(.cm-scroller) {
+  height: auto;
+  overflow: visible;
+}
+
 .s-code-editor[data-viewport='compact'] {
   height: var(--s-code-editor-viewport-compact);
 }

package/src/components/shared/data-display/SCodeEditor.vue

@@ -179,6 +179,20 @@ const resolvedExtensions = computed<Extension[]>(() => {
   const capabilities = resolvedCapabilities.value
   const language = resolvedLanguage.value
   const result: Extension[] = [...(trustedChannel?.extensions.value ?? [])]
+  if (validatedViewport.value === 'document') {
+    result.push(EditorView.theme({
+      '&.cm-editor': {
+        height: 'auto',
+        maxHeight: 'none',
+        overflow: 'visible',
+      },
+      '.cm-scroller': {
+        height: 'auto',
+        overflow: 'visible',
+      },
+    }))
+    result.push(EditorView.lineWrapping)
+  }
   const languageExtension = getCodeMirrorLanguageExtension(language)
   if (languageExtension) result.push(languageExtension)
   if (runtimeTheme.value.mode === 'dark') result.push(oneDark)

package/src/components/shared/data-display/STable.vue

@@ -23,10 +23,30 @@
             :data-width="column.width"
             :data-min-width="column.minWidth"
             :data-align="column.align ?? 'left'"
+            :data-sortable="column.sortable || undefined"
+            :aria-sort="columnAriaSort(column)"
           >
-            <slot name="column" :column="column">
-              <slot :name="`header-${column.field}`" :column="column">{{ column.header }}</slot>
-            </slot>
+            <SButton
+              v-if="column.sortable"
+              :aria-label="sortActionLabel(column)"
+              appearance="text"
+              severity="secondary"
+              size="xs"
+              density="compact"
+              width="full"
+              :content-align="column.align === 'right' ? 'end' : column.align === 'center' ? 'center' : 'start'"
+              :trailing-icon="sortIcon(column)"
+              @click="requestSort(column)"
+            >
+              <slot name="column" :column="column">
+                <slot :name="`header-${column.field}`" :column="column">{{ column.header }}</slot>
+              </slot>
+            </SButton>
+            <template v-else>
+              <slot name="column" :column="column">
+                <slot :name="`header-${column.field}`" :column="column">{{ column.header }}</slot>
+              </slot>
+            </template>
           </th>
         </tr>
       </thead>
@@ -47,6 +67,10 @@
             :key="resolvedRowKeys.get(row)"
             :data-state="resolveRowState(row)"
             :aria-selected="resolvedRowKeys.get(row) === validatedSelectedRowKey ? 'true' : undefined"
+            tabindex="0"
+            @click="onRowClick($event, row, rowIndex)"
+            @keydown.enter="onRowKeydown($event, row, rowIndex)"
+            @keydown.space.prevent="onRowKeydown($event, row, rowIndex)"
           >
             <td
               v-for="column in validatedColumns"
@@ -90,13 +114,17 @@ export type {
   STableProps,
   STableRowKey,
   STableRowState,
+  STableSort,
+  STableSortDirection,
   STableSurface,
 } from './table'
 </script>
 
 <script setup lang="ts" generic="Row extends object = Record<string, unknown>, RowKey extends STableRowKey = STableRowKey, Field extends string = Extract<keyof Row, string>">
 import { computed, useSlots } from 'vue'
+import { ChevronDown, ChevronsUpDown, ChevronUp } from '../../icons/sputnigUiIcons'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
 import {
   validateScrollableViewportMaxBlockSize,
   validateTableColumnInlineSize,
@@ -109,6 +137,7 @@ import {
   validateNonEmptyString,
 } from '../../../internal/runtimeContract'
 import SAsyncState from '../feedback/SAsyncState.vue'
+import SButton from '../controls/SButton.vue'
 import type {
   STableCellState,
   STableColumn,
@@ -116,6 +145,7 @@ import type {
   STableProps,
   STableRowKey,
   STableRowState,
+  STableSort,
 } from './table'
 
 defineOptions({ inheritAttrs: false })
@@ -126,6 +156,7 @@ const props = withDefaults(defineProps<STableProps<Row, RowKey, Field>>(), {
   errorMessage: '',
   emptyMessage: 'Нет данных для отображения',
   selectedRowKey: undefined,
+  sort: null,
   maxHeight: 'none',
   density: 'default',
   surface: 'bordered',
@@ -136,6 +167,11 @@ const props = withDefaults(defineProps<STableProps<Row, RowKey, Field>>(), {
   ariaLabelledby: undefined,
   ariaDescribedby: undefined,
 })
+const emit = defineEmits<{
+  'row-click': [row: Row, index: number]
+  'update:sort': [value: STableSort<Field> | null]
+  sort: [value: STableSort<Field> | null]
+}>()
 const slots = useSlots()
 
 const TABLE_DENSITIES = ['default', 'compact'] as const
@@ -147,6 +183,22 @@ const TABLE_CELL_STATES = ['default', 'pending'] as const
 const TABLE_COLUMN_CONTENT = ['field', 'value', 'slot'] as const
 
 const ownedAttrs = useOwnedAttrs({ component: 'STable', owner: 'table scroll surface' })
+useInteractiveLeafRegistration({ owner: 'STable' })
+
+function eventBelongsToNestedControl(event: Event): boolean {
+  const owner = event.currentTarget
+  return event.composedPath().some((candidate) => candidate !== owner && candidate instanceof HTMLElement && (
+    candidate.matches('button, a, input, select, textarea, [role="button"], [role="link"]')
+  ))
+}
+
+function onRowClick(event: MouseEvent, row: Row, rowIndex: number): void {
+  if (!eventBelongsToNestedControl(event)) emit('row-click', row, rowIndex)
+}
+
+function onRowKeydown(event: KeyboardEvent, row: Row, rowIndex: number): void {
+  if (event.target === event.currentTarget) emit('row-click', row, rowIndex)
+}
 const validatedLoading = computed(() => validateBoolean('STable', 'loading', props.loading))
 const resolvedAccessibleName = computed(() => {
   if (props.ariaLabel !== undefined && props.ariaLabelledby !== undefined) {
@@ -207,6 +259,9 @@ const validatedColumns = computed<readonly STableColumn<Row, Field>[]>(() => {
     if (column.align !== undefined) {
       validateExactString('STable', `column ${JSON.stringify(field)}.align`, column.align, TABLE_ALIGNMENTS)
     }
+    if (column.sortable !== undefined) {
+      validateBoolean('STable', `column ${JSON.stringify(field)}.sortable`, column.sortable)
+    }
     if (column.width !== undefined) {
       validateTableColumnInlineSize('STable', `column ${JSON.stringify(field)}.width`, column.width)
     }
@@ -241,6 +296,54 @@ const validatedColumns = computed<readonly STableColumn<Row, Field>[]>(() => {
   return props.columns
 })
 
+const validatedSort = computed<STableSort<Field> | null>(() => {
+  if (props.sort === null || props.sort === undefined) return null
+  const key = validateNonEmptyString('STable', 'sort.key', props.sort.key) as Field
+  const column = validatedColumns.value.find((candidate) => candidate.field === key)
+  if (!column?.sortable) {
+    throw new TypeError(`STable: sort key ${JSON.stringify(key)} должен ссылаться на sortable column. / STable: sort key ${JSON.stringify(key)} must reference a sortable column.`)
+  }
+  return {
+    key,
+    direction: validateExactString(
+      'STable',
+      'sort.direction',
+      props.sort.direction,
+      ['ascending', 'descending'] as const,
+    ),
+  }
+})
+
+const columnAriaSort = (column: STableColumn<Row, Field>): 'none' | 'ascending' | 'descending' | undefined => {
+  if (!column.sortable) return undefined
+  return validatedSort.value?.key === column.field ? validatedSort.value.direction : 'none'
+}
+
+const sortIcon = (column: STableColumn<Row, Field>) => {
+  const direction = columnAriaSort(column)
+  return direction === 'ascending' ? ChevronUp : direction === 'descending' ? ChevronDown : ChevronsUpDown
+}
+
+const sortActionLabel = (column: STableColumn<Row, Field>): string => {
+  const direction = columnAriaSort(column)
+  if (direction === 'ascending') return `${column.header}: сортировать по убыванию`
+  if (direction === 'descending') return `${column.header}: сбросить сортировку`
+  return `${column.header}: сортировать по возрастанию`
+}
+
+function requestSort(column: STableColumn<Row, Field>): void {
+  if (!column.sortable) return
+  const current = validatedSort.value
+  const key = column.field as Field
+  const next: STableSort<Field> | null = current?.key !== key
+    ? { key, direction: 'ascending' }
+    : current.direction === 'ascending'
+      ? { key, direction: 'descending' }
+      : null
+  emit('update:sort', next)
+  emit('sort', next)
+}
+
 function describeRowKey(key: STableRowKey): string {
   return typeof key === 'string' ? JSON.stringify(key) : String(key)
 }
@@ -283,6 +386,7 @@ const resolvedRowKeys = computed<ReadonlyMap<Row, RowKey>>(() => {
 
 const validatedRows = computed<readonly Row[]>(() => {
   const columns = validatedColumns.value
+  void validatedSort.value
   void resolvedRowKeys.value
   void validatedSelectedRowKey.value
   for (const row of props.data) {

package/src/components/shared/data-display/table.ts

@@ -12,6 +12,13 @@ export type STableSurface = 'bordered' | 'plain'
 export type STableMinWidth = 'content' | 'md' | 'lg'
 export type STableDensity = 'default' | 'compact'
 export type STableColumnContent = 'field' | 'value' | 'slot'
+export type STableSortDirection = 'ascending' | 'descending'
+
+/** Controlled sort state; consumer owns data ordering. / Управляемое состояние сортировки; порядок данных принадлежит consumer. */
+export interface STableSort<Field extends string = string> {
+  key: Field
+  direction: STableSortDirection
+}
 
 interface STableColumnBase<Field extends string> {
   field: Field
@@ -19,6 +26,7 @@ interface STableColumnBase<Field extends string> {
   width?: TableColumnInlineSize
   minWidth?: TableColumnMinInlineSize
   align?: STableAlignment
+  sortable?: boolean
 }
 
 type STableFieldColumn<Field extends string> = STableColumnBase<Field> & {
@@ -61,6 +69,7 @@ export interface STableProps<
   errorMessage?: string
   emptyMessage?: string
   selectedRowKey?: RowKey
+  sort?: STableSort<Field> | null
   maxHeight?: ScrollableViewportMaxBlockSize
   density?: STableDensity
   surface?: STableSurface

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

@@ -270,6 +270,9 @@ const resolveOverflowTrigger = (item: BottomNavOverflowItem): HTMLButtonElement
     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(

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

@@ -11,6 +11,7 @@
       class="s-tab-container"
       :class="{ 's-tab-container--selected': state.active }"
       :data-close-mode="ctx.closeButtonMode.value"
+      :data-close-visibility="ctx.closeButtonVisibility.value"
       :data-disabled="state.disabled || undefined"
       :data-editing="editing || undefined"
       :style="containerStyle"
@@ -192,7 +193,7 @@ const hasContextMenu = computed(() => Boolean(props.contextMenuItems?.length))
 const containerStyle = computed(() => {
   const siblingSpace = hasSiblingActions.value ? siblingActionsWidth.value : 0
   const basePaddingInline = 'var(--s-tab-base-padding-inline)'
-  const paddingInlineEnd = ctx.closeButtonMode.value === 'overlay' && siblingSpace > 0
+  const paddingInlineEnd = ctx.closeButtonMode.value === 'reserve' && siblingSpace > 0
     ? `calc(${basePaddingInline} + ${siblingSpace}px + var(--s-tab-sibling-actions-gap))`
     : basePaddingInline
   return {
@@ -250,13 +251,19 @@ onBeforeUnmount(() => {
   min-width: var(--s-tab-min-width);
   max-width: var(--s-tab-max-width);
   height: var(--s-tab-row-height);
-  border-bottom: var(--s-tab-indicator-width) solid transparent;
   border-radius: var(--s-tab-radius);
   overflow: hidden;
 }
 
-.s-tab-container--selected {
-  border-color: var(--s-tab-selected-border-color);
+.s-tab-container::after {
+  @apply pointer-events-none absolute inset-x-0 bottom-0;
+  height: var(--s-tab-indicator-width);
+  background-color: transparent;
+  content: '';
+}
+
+.s-tab-container--selected::after {
+  background-color: var(--s-tab-selected-border-color);
 }
 
 .s-tab__trigger {
@@ -265,8 +272,7 @@ onBeforeUnmount(() => {
   width: 100%;
   min-height: var(--s-tab-trigger-min-height);
   margin: 0;
-  padding-block-start: calc(var(--s-tab-padding-block) + var(--s-tab-content-offset-y));
-  padding-block-end: var(--s-tab-padding-block);
+  padding-block: var(--s-tab-padding-block);
   padding-inline-start: var(--s-tab-padding-inline-start);
   padding-inline-end: var(--s-tab-padding-inline-end);
   border-radius: inherit;
@@ -348,6 +354,25 @@ onBeforeUnmount(() => {
   z-index: var(--s-layer-sticky);
 }
 
+.s-tab-container[data-close-visibility='active-hover']:not(.s-tab-container--selected):not(:hover):not(:focus-within) .s-tab__sibling-actions {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.s-tab-container[data-close-visibility='hover']:not(:hover):not(:focus-within) .s-tab__sibling-actions {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.s-tab-container:is(
+  [data-close-visibility='active-hover'],
+  [data-close-visibility='hover']
+) .s-tab__sibling-actions {
+  transition:
+    opacity var(--s-motion-fast) ease,
+    visibility var(--s-motion-fast) ease;
+}
+
 .s-tab-container[data-close-mode='overlay'] .s-tab__sibling-actions {
   @apply absolute inset-y-0 right-0;
 }