@livestorm/ui-vue 3.0.0 → 4.0.0

package/src/components/UiDataTable/UiDataTable.vue

@@ -0,0 +1,422 @@
+<script setup lang="ts" generic="TData extends Record<string, unknown>">
+import type { ColumnDef, RowSelectionState, SortingState, Updater } from '@tanstack/vue-table'
+import { rowSelectionFeature, rowSortingFeature, tableFeatures, useTable } from '@tanstack/vue-table'
+import { useResizeObserver } from '@vueuse/core'
+import { computed, ref, useSlots, useTemplateRef } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import {
+  UiTable,
+  UiTableHeader,
+  UiTableHeaderCell,
+  UiTableActionsHeaderCell,
+  UiTableBody,
+  UiTableRow,
+  UiTableCell,
+  UiTableActionsCell,
+} from '../UiTable/index'
+import UiInputCheckbox from '../UiInputCheckbox/UiInputCheckbox.vue'
+import type { UiTableSize } from '../UiTable/context'
+import { useTranslate } from '../../utils/i18n'
+import type { UiDataTableColumn, UiDataTableSort } from './UiDataTable.types'
+
+export interface UiDataTableProps<TData> {
+  /** Column definitions. Each column can be customized via `#cell-<id>` and `#header-<id>` slots. */
+  columns: UiDataTableColumn<TData>[]
+  /** Rows, already sorted/filtered by the consumer. */
+  data: TData[]
+  /**
+   * Row heights: `md` = 40px header / 48px rows, `lg` = 48px header / 64px rows.
+   * @default 'md'
+   */
+  size?: UiTableSize
+  /**
+   * Alternating row backgrounds. Preferred over row dividers.
+   * @default true
+   */
+  zebra?: boolean
+  /**
+   * Renders skeleton rows instead of data.
+   * @default false
+   */
+  loading?: boolean
+  /**
+   * Number of skeleton rows while loading.
+   * @default 5
+   */
+  skeletonRows?: number
+  /**
+   * Current sort, controlled by the consumer (`v-model:sorting`). The table
+   * only renders the affordance and emits; sorting the data stays consumer-side.
+   * @default null
+   */
+  sorting?: UiDataTableSort | null
+  /**
+   * Makes rows interactive: hover feedback, keyboard focus and `row-click` emits.
+   * @default false
+   */
+  rowClickable?: boolean
+  /**
+   * Turns each row into a link to the returned location. The first cell holds
+   * a router link stretched over the row, so Cmd/Ctrl click, middle click and
+   * keyboard focus behave like any link. The first column's content sits
+   * inside the link, so it must hold no interactive content. Content of other
+   * cells that must stay interactive above the link (tooltips, buttons) needs
+   * `relative z-10`; the selection checkbox and `#actions` already sit above
+   * it. Takes precedence over `rowClickable`.
+   */
+  rowLink?: (row: TData) => RouteLocationRaw
+  /**
+   * Adds a leftmost checkbox column with a select-all header. Selection is
+   * controlled through `v-model:selectedRowIds`; pass `getRowId` so ids stay
+   * stable across data changes.
+   * @default false
+   */
+  selectable?: boolean
+  /**
+   * Selected row ids, controlled by the consumer (`v-model:selectedRowIds`).
+   * @default []
+   */
+  selectedRowIds?: string[]
+  /**
+   * How the `#actions` slot attaches to the row. `default` reveals it on
+   * hover, masking the cells behind bare action buttons; `floating` also
+   * reveals on hover but drops that backdrop for self-contained content
+   * like a UiActionBar; `menu` tucks it behind an always-visible trigger
+   * button that opens a popover on click.
+   * @default 'default'
+   */
+  actionsVariant?: 'default' | 'floating' | 'menu'
+  /**
+   * Whether a row has trailing actions. Rows that return false get an empty
+   * actions cell, so nothing reveals over them on hover. All rows have
+   * actions when omitted.
+   */
+  rowHasActions?: (row: TData) => boolean
+  /**
+   * Id of the row whose hover actions stay shown without hover or focus,
+   * e.g. while a menu opened from them is open. Matches `getRowId`.
+   * @default null
+   */
+  revealedActionsRowId?: string | null
+  /** Stable row identity; falls back to the row index. */
+  getRowId?: (row: TData, index: number) => string
+}
+
+const props = withDefaults(defineProps<UiDataTableProps<TData>>(), {
+  size: 'md',
+  zebra: true,
+  loading: false,
+  skeletonRows: 5,
+  sorting: null,
+  rowClickable: false,
+  rowLink: undefined,
+  selectable: false,
+  selectedRowIds: () => [],
+  actionsVariant: 'default',
+  rowHasActions: undefined,
+  revealedActionsRowId: null,
+  getRowId: undefined,
+})
+
+const emit = defineEmits<{
+  'update:sorting': [sort: UiDataTableSort | null]
+  'update:selectedRowIds': [ids: string[]]
+  'rowClick': [row: TData]
+}>()
+
+const translate = useTranslate()
+
+defineSlots<
+  {
+    /** Trailing row actions, revealed on row hover/focus. */
+    actions?: (props: { row: TData }) => unknown
+    /**
+     * Rows after the data rows, in a second body of the same table, e.g. a
+     * teaser for rows the plan hides. They share the column grid and the
+     * zebra of the data rows. Render a `UiTableCell` per column, after an
+     * empty one when `selectable`, and end each row with an empty
+     * `UiTableActionsCell` when `hasActions`. The body is positioned, so an
+     * overlay over these rows can sit in a `UiTableRow` with `zebra` off.
+     */
+    'body-end'?: (props: {
+      columns: UiDataTableColumn<TData>[]
+      selectable: boolean
+      hasActions: boolean
+      actionsVariant: 'default' | 'floating' | 'menu'
+    }) => unknown
+  }
+  & Partial<Record<`cell-${string}`, (props: { row: TData, value: unknown }) => unknown>>
+  & Partial<Record<`header-${string}`, (props: { column: UiDataTableColumn<TData> }) => unknown>>
+>()
+
+const slots = useSlots()
+const hasActions = computed(() => !!slots.actions)
+
+const features = tableFeatures({ rowSortingFeature, rowSelectionFeature })
+
+const tanstackColumns = computed(() => props.columns.map(column => ({
+  id: column.id,
+  header: column.header,
+  ...(column.accessorKey ? { accessorKey: column.accessorKey } : {}),
+  enableSorting: column.sortable ?? false,
+}) as ColumnDef<typeof features, TData>))
+
+const sortingState = computed<SortingState>(() => (
+  props.sorting
+    ? [{ id: props.sorting.id, desc: props.sorting.direction === 'desc' }]
+    : []
+))
+
+function toSort (state: SortingState): UiDataTableSort | null {
+  const [first] = state
+  if (!first) return null
+  return { id: first.id, direction: first.desc ? 'desc' : 'asc' }
+}
+
+const rowSelectionState = computed<RowSelectionState>(() => (
+  Object.fromEntries(props.selectedRowIds.map(id => [id, true as const]))
+))
+
+const table = useTable<typeof features, TData>({
+  features,
+  columns: tanstackColumns,
+  data: computed(() => props.data),
+  ...(props.getRowId ? { getRowId: props.getRowId } : {}),
+  manualSorting: true,
+  enableMultiSort: false,
+  enableSortingRemoval: false,
+  enableRowSelection: computed(() => props.selectable),
+  state: computed(() => ({ sorting: sortingState.value, rowSelection: rowSelectionState.value })),
+  onSortingChange: (updater: Updater<SortingState>) => {
+    const next = typeof updater === 'function' ? updater(sortingState.value) : updater
+    emit('update:sorting', toSort(next))
+  },
+  onRowSelectionChange: (updater: Updater<RowSelectionState>) => {
+    const next = typeof updater === 'function' ? updater(rowSelectionState.value) : updater
+    emit('update:selectedRowIds', Object.keys(next))
+  },
+})
+
+// Escape hatch: the underlying TanStack table instance, e.g.
+// `tableRef.value?.table.setSorting(...)`.
+defineExpose({ table })
+
+function sortDirectionFor (columnId: string) {
+  if (props.sorting?.id !== columnId) return 'none'
+  return props.sorting.direction
+}
+
+function onHeaderSort (column: UiDataTableColumn<TData>) {
+  const direction = sortDirectionFor(column.id) === 'asc' ? 'desc' : 'asc'
+  emit('update:sorting', { id: column.id, direction })
+}
+
+const columnById = computed(() => new Map(props.columns.map(column => [column.id, column])))
+
+function headerStyle (columnId: string) {
+  const column = columnById.value.get(columnId)
+  return { width: column?.width, minWidth: column?.minWidth }
+}
+
+function cellStyle (columnId: string) {
+  return { minWidth: columnById.value.get(columnId)?.minWidth }
+}
+
+function wrapClass (columnId: string) {
+  return columnById.value.get(columnId)?.nowrap ? 'whitespace-nowrap' : undefined
+}
+
+function isEmptyValue (value: unknown) {
+  return value === null || value === undefined || value === ''
+}
+
+function isEmptyCell (columnId: string, value: unknown) {
+  return !slots[`cell-${columnId}`] && isEmptyValue(value)
+}
+
+function isLinkCell (cellIndex: number) {
+  return !!props.rowLink && cellIndex === 0
+}
+
+const renderedRowCount = computed(() => (props.loading ? props.skeletonRows : table.getRowModel().rows.length))
+
+// A scroll container captures the sticky header, so the region only scrolls once the columns overflow it
+const region = useTemplateRef<HTMLElement>('region')
+const columnsOverflow = ref(true)
+
+const regionTable = computed(() => region.value?.firstElementChild as HTMLElement | null | undefined)
+
+useResizeObserver(() => [region.value, regionTable.value], () => {
+  const element = region.value
+  const table = regionTable.value
+  if (!element || !table) return
+  const { paddingLeft, paddingRight } = getComputedStyle(element)
+  columnsOverflow.value = table.offsetWidth > element.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight)
+})
+
+const regionClasses = computed(() => columnsOverflow.value && 'overflow-x-auto')
+
+// A row link stretches over the row, so the selection cell rises above it to stay clickable
+const selectionCellClasses = computed(() => props.rowLink && 'relative z-10')
+</script>
+
+<template>
+  <div
+    ref="region"
+    class="px-(--ui-page-inline,0px)"
+    :class="regionClasses"
+    data-testid="ui-data-table-region"
+  >
+    <UiTable
+      :size="size"
+      :zebra="zebra"
+    >
+      <UiTableHeader>
+        <tr
+          v-for="headerGroup in table.getHeaderGroups()"
+          :key="headerGroup.id"
+        >
+          <UiTableHeaderCell
+            v-if="selectable"
+            class="w-0"
+          >
+            <UiInputCheckbox
+              :checked="table.getIsAllRowsSelected()"
+              :indeterminate="table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()"
+              :aria-label="translate('general_form_multiselect-select-all')"
+              @change="table.toggleAllRowsSelected()"
+            />
+          </UiTableHeaderCell>
+          <UiTableHeaderCell
+            v-for="header in headerGroup.headers"
+            :key="header.id"
+            :sortable="columnById.get(header.column.id)?.sortable ?? false"
+            :sort-direction="sortDirectionFor(header.column.id)"
+            :align="columnById.get(header.column.id)?.align ?? 'left'"
+            :class="wrapClass(header.column.id)"
+            :style="headerStyle(header.column.id)"
+            @sort="onHeaderSort(columnById.get(header.column.id)!)"
+          >
+            <slot
+              :name="`header-${header.column.id}`"
+              :column="columnById.get(header.column.id)!"
+            >
+              {{ columnById.get(header.column.id)?.header }}
+            </slot>
+          </UiTableHeaderCell>
+          <UiTableActionsHeaderCell v-if="hasActions" />
+        </tr>
+      </UiTableHeader>
+      <UiTableBody>
+        <template v-if="loading">
+          <UiTableRow
+            v-for="index in skeletonRows"
+            :key="`skeleton-${index}`"
+          >
+            <UiTableCell v-if="selectable" />
+            <UiTableCell
+              v-for="column in columns"
+              :key="column.id"
+              :align="column.align ?? 'left'"
+            >
+              <div
+                class="h-4 animate-pulse rounded-sm bg-surface-neutral-alpha-200"
+                :class="index % 2 === 0 ? 'w-1/2' : 'w-2/3'"
+              />
+            </UiTableCell>
+            <UiTableActionsCell v-if="hasActions" />
+          </UiTableRow>
+        </template>
+        <template v-else>
+          <UiTableRow
+            v-for="row in table.getRowModel().rows"
+            :key="row.id"
+            :clickable="rowClickable && !rowLink"
+            :linked="!!rowLink"
+            :selected="selectable && row.getIsSelected()"
+            @click="emit('rowClick', row.original)"
+          >
+            <UiTableCell
+              v-if="selectable"
+              :class="selectionCellClasses"
+              @click.stop
+            >
+              <UiInputCheckbox
+                :checked="row.getIsSelected()"
+                :aria-label="translate('general_table_select-row')"
+                @change="row.toggleSelected()"
+              />
+            </UiTableCell>
+            <UiTableCell
+              v-for="(cell, cellIndex) in row.getAllCells()"
+              :key="cell.id"
+              :align="columnById.get(cell.column.id)?.align ?? 'left'"
+              :empty="!isLinkCell(cellIndex) && isEmptyCell(cell.column.id, cell.getValue())"
+              :class="wrapClass(cell.column.id)"
+              :style="cellStyle(cell.column.id)"
+            >
+              <component
+                :is="'router-link'"
+                v-if="isLinkCell(cellIndex)"
+                :to="rowLink!(row.original)"
+                class="block min-w-0 text-inherit no-underline focus-indicator-none after:absolute after:inset-0 after:rounded-table-row focus-visible:after:focus-ring"
+                data-testid="ui-data-table-row-link"
+              >
+                <slot
+                  :name="`cell-${cell.column.id}`"
+                  :row="row.original"
+                  :value="cell.getValue()"
+                >
+                  <span
+                    v-if="isEmptyValue(cell.getValue())"
+                    class="text-text-neutral-secondary"
+                  >–</span>
+                  <template v-else>
+                    {{ cell.getValue() }}
+                  </template>
+                </slot>
+              </component>
+              <slot
+                v-else
+                :name="`cell-${cell.column.id}`"
+                :row="row.original"
+                :value="cell.getValue()"
+              >
+                {{ cell.getValue() }}
+              </slot>
+            </UiTableCell>
+            <template v-if="hasActions">
+              <UiTableActionsCell
+                v-if="!rowHasActions || rowHasActions(row.original)"
+                :variant="actionsVariant"
+                :revealed="row.id === revealedActionsRowId"
+              >
+                <slot
+                  name="actions"
+                  :row="row.original"
+                />
+              </UiTableActionsCell>
+              <UiTableActionsCell
+                v-else
+                :variant="actionsVariant"
+              />
+            </template>
+          </UiTableRow>
+        </template>
+      </UiTableBody>
+      <UiTableBody
+        v-if="slots['body-end']"
+        class="relative"
+        :zebra-offset="renderedRowCount % 2 === 1"
+      >
+        <slot
+          name="body-end"
+          :columns="columns"
+          :selectable="selectable"
+          :has-actions="hasActions"
+          :actions-variant="actionsVariant"
+        />
+      </UiTableBody>
+    </UiTable>
+  </div>
+</template>

package/src/components/UiDataTable/index.ts

@@ -0,0 +1,12 @@
+export { default as UiDataTable } from './UiDataTable.vue'
+export type { UiDataTableProps } from './UiDataTable.vue'
+export type { UiDataTableColumn, UiDataTableSort } from './UiDataTable.types'
+
+// Escape hatch for tables that outgrow UiDataTable: compose the UiTable
+// primitives with TanStack Table directly.
+export {
+  FlexRender,
+  tableFeatures,
+  useTable,
+} from '@tanstack/vue-table'
+export type { ColumnDef, SortingState } from '@tanstack/vue-table'

package/src/components/UiDialog/UiDialogContent.vue

@@ -110,12 +110,12 @@ useMutationObserver(contentRef, () => {
   <DialogPortal>
     <DialogOverlay
       :class="[
-        'fixed inset-0 bg-surface-overlay-alpha z-50',
+        'fixed inset-0 bg-surface-overlay-alpha z-overlay',
         'ui-dialog-overlay',
         overlayClass,
       ]"
     />
-    <div class="fixed inset-0 z-50 flex items-center justify-center pointer-events-none">
+    <div class="fixed inset-0 z-overlay flex items-center justify-center pointer-events-none">
       <DialogContent
         v-bind="{ ...forwarded, ...$attrs }"
         :class="[
@@ -124,7 +124,7 @@ useMutationObserver(contentRef, () => {
           'w-[95vw] max-h-[85vh]',
           widthClass,
           'overflow-hidden flex flex-col',
-          'ui-dialog-content animate-fade-scale',
+          'ui-dialog-content',
           'focus:outline-hidden focus-indicator-none',
           'm-2',
           !noPadding && 'py-6'
@@ -205,7 +205,7 @@ useMutationObserver(contentRef, () => {
           v-if="$slots.footer"
           :class="[
             !noPadding && 'px-6 pt-6',
-            hasScroll && 'border-t border-borders-neutral-light',
+            hasScroll && 'border-t border-divider',
           ]"
         >
           <slot name="footer" />
@@ -235,12 +235,27 @@ useMutationObserver(contentRef, () => {
   animation: fade-out 150ms ease-in;
 }
 
-/* Content animations */
+/* Content animations — the panel carries its own keyframes rather than the
+   shared reka-animations.css ones: a consumer that does not load that
+   stylesheet would otherwise leave reka waiting for an `animationend` that
+   never fires, and the panel would never unmount on close. In and out need
+   distinct names for the same reason — a same-name animation never restarts,
+   so no end event would ever come. */
+@keyframes fade-scale-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes fade-scale-out {
+  from { opacity: 1; transform: scale(1); }
+  to { opacity: 0; transform: scale(0.95); }
+}
+
 .ui-dialog-content[data-state='open'] {
-  animation: fade-scale 200ms ease-out;
+  animation: fade-scale-in 200ms ease-out both;
 }
 
 .ui-dialog-content[data-state='closed'] {
-  animation: fade-scale 150ms ease-in reverse;
+  animation: fade-scale-out 150ms ease-in both;
 }
 </style>

package/src/components/UiDrawer/UiDrawer.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
+import { DrawerRoot } from 'vaul-vue'
+import { useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DrawerRootProps>()
+const emits = defineEmits<DrawerRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DrawerRoot v-bind="{ ...forwarded, ...$attrs }">
+    <slot />
+  </DrawerRoot>
+</template>

package/src/components/UiDrawer/UiDrawerContent.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { DrawerContent, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerTitle } from 'vaul-vue'
+import { VisuallyHidden } from 'reka-ui'
+import { useTranslate } from '../../utils/i18n'
+
+interface UiDrawerContentProps {
+  title?: string
+}
+
+const props = withDefaults(defineProps<UiDrawerContentProps>(), {
+  title: undefined,
+})
+
+const translate = useTranslate()
+</script>
+
+<template>
+  <DrawerPortal>
+    <DrawerOverlay class="fixed inset-0 z-overlay bg-surface-overlay-alpha" />
+
+    <DrawerContent
+      v-bind="$attrs"
+      class="fixed inset-x-0 bottom-0 z-overlay flex max-h-[85vh] flex-col rounded-t-2xl border-t border-divider bg-surface-neutral-bg-main shadow-shadows-drop-shadow-2xl focus:outline-hidden focus-indicator-none"
+    >
+      <VisuallyHidden as-child>
+        <DrawerTitle>{{ props.title ?? translate('general_dialog_title') }}</DrawerTitle>
+      </VisuallyHidden>
+
+      <DrawerHandle class="mt-2 bg-borders-neutral-default!" />
+
+      <div class="ui-drawer-content-body min-h-0 flex-1 overflow-y-auto">
+        <slot />
+      </div>
+    </DrawerContent>
+  </DrawerPortal>
+</template>
+
+<style scoped>
+.ui-drawer-content-body {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+</style>

package/src/components/UiDrawer/UiDrawerTrigger.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { DrawerTriggerProps } from 'vaul-vue'
+import { DrawerTrigger } from 'vaul-vue'
+import { useForwardProps } from 'reka-ui'
+
+const props = defineProps<DrawerTriggerProps>()
+
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <DrawerTrigger
+    v-bind="{ ...forwarded, ...$attrs }"
+  >
+    <slot />
+  </DrawerTrigger>
+</template>

package/src/components/UiDropdown/DropdownItemCheckbox.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { injectSelectItemContext } from 'reka-ui'
+import CheckboxGlyph from '../UiInputCheckbox/CheckboxGlyph.vue'
+
+const item = injectSelectItemContext()
+</script>
+
+<template>
+  <CheckboxGlyph :checked="item.isSelected.value" />
+</template>

package/src/components/UiDropdown/UiDropdownContent.vue

@@ -3,8 +3,18 @@ import type { SelectContentProps } from 'reka-ui'
 import { SelectContent, SelectPortal, SelectScrollDownButton, SelectScrollUpButton, SelectViewport } from 'reka-ui'
 import { useSlots } from 'vue'
 
+const WIDTH_CLASSES = {
+  auto: '',
+  lg: 'w-75',
+} as const
+
 interface Props extends SelectContentProps {
   showScrollButtons?: boolean
+  /**
+   * 'auto' sizes the content to the trigger and its items; 'lg' gives items with descriptions a fixed 300px
+   * @default 'auto'
+   */
+  width?: keyof typeof WIDTH_CLASSES
   /**
    * The color semantic mode for the dropdown content
    * @default 'light'
@@ -12,7 +22,8 @@ interface Props extends SelectContentProps {
   colorsSemantic?: 'light' | 'dark'
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
+  width: 'auto',
   position: 'popper',
   side: 'bottom',
   sideOffset: 8,
@@ -26,44 +37,44 @@ const slots = useSlots()
 <template>
   <SelectPortal>
     <SelectContent
+      data-testid="ui-dropdown-content"
       v-bind="$attrs"
       :position="position"
       :side-offset="sideOffset"
       :align="align"
       :side="side"
       :data-colors-semantic="colorsSemantic"
-      class="ui-dropdown-content focus-indicator-none z-50 relative py-3 px-2 rounded-xl bg-surface-neutral-bg-main min-w-(--reka-select-trigger-width) max-h-(--reka-select-content-available-height) shadow-shadows-drop-shadow-lg data-[state=open]:animate-[slideDownAndFade_0.2s_ease] data-[state=closed]:animate-[slideUpAndFade_0.15s_ease]"
+      :class="WIDTH_CLASSES[props.width]"
+      class="ui-dropdown-content focus-indicator-none z-overlay relative p-1 rounded-container border border-container-border bg-surface-neutral-bg-main min-w-(--reka-select-trigger-width) max-w-(--reka-select-content-available-width) max-h-(--reka-select-content-available-height) shadow-shadows-drop-shadow-lg data-[state=open]:animate-[slideDownAndFade_0.2s_ease] data-[state=closed]:animate-[slideUpAndFade_0.15s_ease]"
     >
       <div
         v-if="slots.header"
-        class="sticky top-0 bg-surface-neutral-bg-main px-3 mb-3"
+        class="pb-1"
       >
         <slot name="header" />
       </div>
 
-      <div class="flex flex-col gap-1 overflow-y-auto max-h-[300px]">
-        <SelectScrollUpButton
-          v-if="showScrollButtons"
-          class="flex items-center justify-center h-6 cursor-default text-text-neutral-base"
-        >
-          <div class="i-ph-caret-up size-4" />
-        </SelectScrollUpButton>
+      <SelectScrollUpButton
+        v-if="showScrollButtons"
+        class="flex items-center justify-center h-6 cursor-default text-text-neutral-base"
+      >
+        <div class="i-ph-caret-up size-4" />
+      </SelectScrollUpButton>
 
-        <SelectViewport class="flex flex-col gap-1">
-          <slot />
-        </SelectViewport>
+      <SelectViewport class="flex flex-col gap-1 max-h-[300px] rounded-row">
+        <slot />
+      </SelectViewport>
 
-        <SelectScrollDownButton
-          v-if="showScrollButtons"
-          class="flex items-center justify-center h-6 cursor-default text-text-neutral-base"
-        >
-          <div class="i-ph-caret-down size-4" />
-        </SelectScrollDownButton>
-      </div>
+      <SelectScrollDownButton
+        v-if="showScrollButtons"
+        class="flex items-center justify-center h-6 cursor-default text-text-neutral-base"
+      >
+        <div class="i-ph-caret-down size-4" />
+      </SelectScrollDownButton>
 
       <div
         v-if="slots.footer"
-        class="sticky bottom-0 bg-surface-neutral-bg-main"
+        class="pt-1"
       >
         <slot name="footer" />
       </div>