@vtable-guild/vtable-guild 2.7.0 → 2.8.0

package/css/style.css

@@ -11,6 +11,38 @@
 
 :where(:root),
 [data-vtg-preset='antdv'] {
+  --vtg-pagination-size: 32px;
+  --vtg-pagination-size-sm: 24px;
+  --vtg-pagination-gap: 8px;
+  --vtg-pagination-margin: 16px;
+  --vtg-pagination-radius: 6px;
+  --vtg-pagination-input-width: 50px;
+  --vtg-pagination-border: transparent;
+  --vtg-pagination-bg: transparent;
+  --vtg-pagination-hover-bg: var(--color-text-hover-bg);
+  --vtg-pagination-hover-color: var(--color-on-surface);
+  --vtg-pagination-active-hover-color: var(--color-primary-hover);
+  --vtg-pagination-option-hover-bg: var(--color-control-item-hover-bg);
+  --vtg-pagination-slash-margin: 2px;
+  --vtg-pagination-focus-shadow: 0 0 0 2px rgb(5 145 255 / 10%);
+  --vtg-pagination-motion-duration: 0.2s;
+  --vtg-pagination-motion-easing: cubic-bezier(0.23, 1, 0.32, 1);
+  --vtg-pagination-simple-input-width: 63px;
+  --vtg-pagination-select-padding: 9px;
+  --vtg-pagination-icon-size: 12px;
+  --vtg-pagination-active-weight: 600;
+  --vtg-pagination-active-disabled-bg: rgb(0 0 0 / 15%);
+  --vtg-pagination-active-bg: var(--color-surface);
+  --vtg-pagination-active-color: var(--color-primary);
+  --vtg-pagination-active-border: var(--color-primary);
+  --vtg-pagination-popup-z: 1050;
+  --vtg-pagination-popup-radius: 8px;
+  --vtg-pagination-option-height: 32px;
+  --vtg-pagination-option-active-color: var(--color-on-surface);
+  --vtg-pagination-option-active-bg: var(--vtg-table-row-selected-bg);
+  --vtg-pagination-popup-shadow:
+    0 6px 16px rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%);
+
   /* ===== 语义 token — antdv 设计体系值 ===== */
 
   /* 排版 */
@@ -94,6 +126,7 @@
 
   /* 筛选下拉选项 hover 背景 */
   --color-control-item-hover-bg: rgb(0 0 0 / 4%);
+  --color-text-hover-bg: rgb(0 0 0 / 6%);
 
   /* 筛选下拉选项选中态背景 */
   --color-control-item-active-bg: #e6f4ff;
@@ -135,6 +168,8 @@
 :where(.dark),
 .dark [data-vtg-preset='antdv'],
 [data-vtg-preset='antdv'].dark {
+  --vtg-pagination-active-disabled-bg: rgb(255 255 255 / 15%);
+
   /* ===== 语义 token 暗色值 — 只改语义 token，组件 token 自动跟随 ===== */
   --color-surface: #141414;
   --color-surface-hover: #1d1d1d;
@@ -172,6 +207,7 @@
 
   /* 筛选下拉选项 hover 背景 */
   --color-control-item-hover-bg: rgb(255 255 255 / 8%);
+  --color-text-hover-bg: rgb(255 255 255 / 12%);
 
   /* 筛选下拉选项选中态背景 */
   --color-control-item-active-bg: #111a2c;
@@ -200,6 +236,44 @@
  */
 
 [data-vtg-preset='element-plus'] {
+  --vtg-pagination-size: 32px;
+  --vtg-pagination-size-sm: 24px;
+  --vtg-pagination-font-size: 14px;
+  --vtg-pagination-font-size-sm: 12px;
+  --vtg-pagination-gap: 16px;
+  --vtg-pagination-page-gap: 0px;
+  --vtg-pagination-control-gap: 8px;
+  --vtg-pagination-margin: 16px;
+  --vtg-pagination-radius: 2px;
+  --vtg-pagination-input-width: 56px;
+  --vtg-pagination-border: transparent;
+  --vtg-pagination-bg: var(--color-surface);
+  --vtg-pagination-hover-bg: var(--color-surface);
+  --vtg-pagination-hover-color: var(--color-primary);
+  --vtg-pagination-active-hover-color: var(--color-primary-hover);
+  --vtg-pagination-option-hover-bg: var(--color-control-item-hover-bg);
+  --vtg-pagination-slash-margin: 2px;
+  --vtg-pagination-focus-shadow: 0 0 0 1px var(--color-primary) inset;
+  --vtg-pagination-motion-duration: 0.2s;
+  --vtg-pagination-motion-easing: cubic-bezier(0.23, 1, 0.32, 1);
+  --vtg-pagination-simple-input-width: 63px;
+  --vtg-pagination-select-padding: 12px;
+  --vtg-pagination-select-width: 128px;
+  --vtg-pagination-select-width-sm: 100px;
+  --vtg-pagination-icon-size: 12px;
+  --vtg-pagination-active-weight: 700;
+  --vtg-pagination-active-disabled-bg: var(--color-surface);
+  --vtg-pagination-active-bg: var(--color-surface);
+  --vtg-pagination-active-color: var(--color-primary);
+  --vtg-pagination-active-border: transparent;
+  --vtg-pagination-popup-z: 2000;
+  --vtg-pagination-popup-radius: 4px;
+  --vtg-pagination-option-height: 34px;
+  --vtg-pagination-popup-padding: 6px;
+  --vtg-pagination-option-active-color: var(--color-primary);
+  --vtg-pagination-option-active-bg: var(--color-surface-hover);
+  --vtg-pagination-popup-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
   /* ===== 语义 token — element-plus 设计体系值 ===== */
 
   /* 排版 */
@@ -409,6 +483,31 @@
   transform: scaleY(1);
 }
 
+/* Pagination popup origin follows its measured above/below placement. */
+.vtg-pagination-popup-enter-active,
+.vtg-pagination-popup-leave-active {
+  transition:
+    opacity var(--vtg-pagination-motion-duration) var(--vtg-pagination-motion-easing),
+    transform var(--vtg-pagination-motion-duration) var(--vtg-pagination-motion-easing);
+}
+
+.vtg-pagination-popup-enter-from,
+.vtg-pagination-popup-leave-to {
+  opacity: 0;
+  transform: scaleY(0.8);
+}
+
+.vtg-pagination-popup-leave-active {
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vtg-pagination-popup-enter-active,
+  .vtg-pagination-popup-leave-active {
+    transition: none;
+  }
+}
+
 /* @vtable-guild/theme/css — 默认入口 */
 
 /*
@@ -512,6 +611,9 @@
 .vtg-invisible {
     visibility: hidden
 }
+.vtg-collapse {
+    visibility: collapse
+}
 .vtg-static {
     position: static
 }
@@ -578,6 +680,9 @@
 .vtg-z-\[4\] {
     z-index: 4
 }
+.vtg-z-\[var\(--vtg-pagination-popup-z\)\] {
+    z-index: var(--vtg-pagination-popup-z)
+}
 .vtg-m-0 {
     margin: 0px
 }
@@ -585,6 +690,10 @@
     margin-top: -0.25rem;
     margin-bottom: -0.25rem
 }
+.vtg-mx-\[var\(--vtg-pagination-slash-margin\)\] {
+    margin-left: var(--vtg-pagination-slash-margin);
+    margin-right: var(--vtg-pagination-slash-margin)
+}
 .vtg-my-\[var\(--vtg-table-empty-margin-block\)\] {
     margin-top: var(--vtg-table-empty-margin-block);
     margin-bottom: var(--vtg-table-empty-margin-block)
@@ -622,6 +731,9 @@
 .vtg-ml-2 {
     margin-left: 0.5rem
 }
+.vtg-ml-auto {
+    margin-left: auto
+}
 .vtg-mr-2 {
     margin-right: 0.5rem
 }
@@ -655,6 +767,9 @@
 .vtg-inline-flex {
     display: inline-flex
 }
+.\!vtg-table {
+    display: table !important
+}
 .vtg-table {
     display: table
 }
@@ -709,6 +824,12 @@
 .vtg-h-\[var\(--vtg-input-height\)\] {
     height: var(--vtg-input-height)
 }
+.vtg-h-\[var\(--vtg-pagination-icon-size\)\] {
+    height: var(--vtg-pagination-icon-size)
+}
+.vtg-h-\[var\(--vtg-pagination-size\)\] {
+    height: var(--vtg-pagination-size)
+}
 .vtg-h-\[var\(--vtg-radio-size\)\] {
     height: var(--vtg-radio-size)
 }
@@ -730,6 +851,9 @@
 .vtg-min-h-6 {
     min-height: 1.5rem
 }
+.vtg-min-h-\[var\(--vtg-pagination-option-height\)\] {
+    min-height: var(--vtg-pagination-option-height)
+}
 .vtg-w-0 {
     width: 0px
 }
@@ -766,6 +890,18 @@
 .vtg-w-\[var\(--vtg-checkbox-size\)\] {
     width: var(--vtg-checkbox-size)
 }
+.vtg-w-\[var\(--vtg-pagination-icon-size\)\] {
+    width: var(--vtg-pagination-icon-size)
+}
+.vtg-w-\[var\(--vtg-pagination-input-width\)\] {
+    width: var(--vtg-pagination-input-width)
+}
+.vtg-w-\[var\(--vtg-pagination-select-width\)\] {
+    width: var(--vtg-pagination-select-width)
+}
+.vtg-w-\[var\(--vtg-pagination-simple-input-width\)\] {
+    width: var(--vtg-pagination-simple-input-width)
+}
 .vtg-w-\[var\(--vtg-radio-size\)\] {
     width: var(--vtg-radio-size)
 }
@@ -793,12 +929,18 @@
 .vtg-min-w-\[140px\] {
     min-width: 140px
 }
+.vtg-min-w-\[var\(--vtg-pagination-size\)\] {
+    min-width: var(--vtg-pagination-size)
+}
 .vtg-min-w-full {
     min-width: 100%
 }
 .vtg-max-w-\[250px\] {
     max-width: 250px
 }
+.vtg-max-w-full {
+    max-width: 100%
+}
 .vtg-flex-1 {
     flex: 1 1 0%
 }
@@ -811,6 +953,9 @@
 .vtg-shrink-0 {
     flex-shrink: 0
 }
+.vtg-grow {
+    flex-grow: 1
+}
 .vtg-grow-0 {
     flex-grow: 0
 }
@@ -907,12 +1052,18 @@
 .vtg-flex-col {
     flex-direction: column
 }
+.vtg-flex-wrap {
+    flex-wrap: wrap
+}
 .vtg-items-start {
     align-items: flex-start
 }
 .vtg-items-center {
     align-items: center
 }
+.vtg-justify-start {
+    justify-content: flex-start
+}
 .vtg-justify-end {
     justify-content: flex-end
 }
@@ -934,6 +1085,18 @@
 .vtg-gap-3 {
     gap: 0.75rem
 }
+.vtg-gap-4 {
+    gap: 1rem
+}
+.vtg-gap-\[var\(--vtg-pagination-control-gap\)\] {
+    gap: var(--vtg-pagination-control-gap)
+}
+.vtg-gap-\[var\(--vtg-pagination-gap\)\] {
+    gap: var(--vtg-pagination-gap)
+}
+.vtg-gap-\[var\(--vtg-pagination-page-gap\)\] {
+    gap: var(--vtg-pagination-page-gap)
+}
 .vtg-self-stretch {
     align-self: stretch
 }
@@ -949,6 +1112,9 @@
 .vtg-overflow-visible {
     overflow: visible
 }
+.vtg-overflow-y-auto {
+    overflow-y: auto
+}
 .vtg-text-ellipsis {
     text-overflow: ellipsis
 }
@@ -988,6 +1154,12 @@
 .vtg-rounded-\[var\(--vtg-input-border-radius\)\] {
     border-radius: var(--vtg-input-border-radius)
 }
+.vtg-rounded-\[var\(--vtg-pagination-popup-radius\)\] {
+    border-radius: var(--vtg-pagination-popup-radius)
+}
+.vtg-rounded-\[var\(--vtg-pagination-radius\)\] {
+    border-radius: var(--vtg-pagination-radius)
+}
 .vtg-rounded-\[var\(--vtg-scrollbar-thumb-radius\)\] {
     border-radius: var(--vtg-scrollbar-thumb-radius)
 }
@@ -1050,6 +1222,9 @@
     border-top-width: 0px;
     border-top-style: solid
 }
+.vtg-border-\[color\:var\(--color-border\)\] {
+    border-color: var(--color-border)
+}
 .vtg-border-\[color\:var\(--color-border\,\#d9d9d9\)\] {
     border-color: var(--color-border,#d9d9d9)
 }
@@ -1065,12 +1240,21 @@
 .vtg-border-\[color\:var\(--color-primary-light-7\,\#c6e2ff\)\] {
     border-color: var(--color-primary-light-7,#c6e2ff)
 }
+.vtg-border-\[color\:var\(--vtg-border-color-lighter\)\] {
+    border-color: var(--vtg-border-color-lighter)
+}
 .vtg-border-\[color\:var\(--vtg-border-color-lighter\,var\(--color-default\)\)\] {
     border-color: var(--vtg-border-color-lighter,var(--color-default))
 }
 .vtg-border-\[color\:var\(--vtg-checkbox-check-color\,\#fff\)\] {
     border-color: var(--vtg-checkbox-check-color,#fff)
 }
+.vtg-border-\[color\:var\(--vtg-pagination-active-border\)\] {
+    border-color: var(--vtg-pagination-active-border)
+}
+.vtg-border-\[color\:var\(--vtg-pagination-border\)\] {
+    border-color: var(--vtg-pagination-border)
+}
 .vtg-border-\[color\:var\(--vtg-table-border-color\)\] {
     border-color: var(--vtg-table-border-color)
 }
@@ -1110,6 +1294,15 @@
 .vtg-bg-\[color\:var\(--vtg-checkbox-indeterminate-color\,var\(--color-primary\)\)\] {
     background-color: var(--vtg-checkbox-indeterminate-color,var(--color-primary))
 }
+.vtg-bg-\[color\:var\(--vtg-pagination-active-bg\)\] {
+    background-color: var(--vtg-pagination-active-bg)
+}
+.vtg-bg-\[color\:var\(--vtg-pagination-bg\)\] {
+    background-color: var(--vtg-pagination-bg)
+}
+.vtg-bg-\[color\:var\(--vtg-pagination-option-active-bg\)\] {
+    background-color: var(--vtg-pagination-option-active-bg)
+}
 .vtg-bg-\[color\:var\(--vtg-scrollbar-thumb-bg\)\] {
     background-color: var(--vtg-scrollbar-thumb-bg)
 }
@@ -1180,6 +1373,9 @@
     --tw-bg-opacity: 1;
     background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1))
 }
+.vtg-stroke-\[1\.5\] {
+    stroke-width: 1.5
+}
 .vtg-p-0 {
     padding: 0px
 }
@@ -1212,6 +1408,10 @@
     padding-left: 1rem;
     padding-right: 1rem
 }
+.vtg-px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem
+}
 .vtg-px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem
@@ -1244,6 +1444,10 @@
     padding-left: var(--vtg-input-padding-inline);
     padding-right: var(--vtg-input-padding-inline)
 }
+.vtg-px-\[var\(--vtg-pagination-select-padding\)\] {
+    padding-left: var(--vtg-pagination-select-padding);
+    padding-right: var(--vtg-pagination-select-padding)
+}
 .vtg-px-\[var\(--vtg-table-cell-padding-inline-lg\)\] {
     padding-left: var(--vtg-table-cell-padding-inline-lg);
     padding-right: var(--vtg-table-cell-padding-inline-lg)
@@ -1280,6 +1484,14 @@
     padding-top: 5px;
     padding-bottom: 5px
 }
+.vtg-py-\[var\(--vtg-pagination-margin\)\] {
+    padding-top: var(--vtg-pagination-margin);
+    padding-bottom: var(--vtg-pagination-margin)
+}
+.vtg-py-\[var\(--vtg-pagination-popup-padding\)\] {
+    padding-top: var(--vtg-pagination-popup-padding);
+    padding-bottom: var(--vtg-pagination-popup-padding)
+}
 .vtg-py-\[var\(--vtg-table-cell-padding-block-lg\)\] {
     padding-top: var(--vtg-table-cell-padding-block-lg);
     padding-bottom: var(--vtg-table-cell-padding-block-lg)
@@ -1319,6 +1531,9 @@
 .vtg-font-\[family-name\:var\(--vtg-table-font-family\)\] {
     font-family: var(--vtg-table-font-family)
 }
+.vtg-text-\[0px\] {
+    font-size: 0px
+}
 .vtg-text-\[10px\] {
     font-size: 10px
 }
@@ -1343,6 +1558,9 @@
 .vtg-text-\[length\:var\(--vtg-input-font-size\)\] {
     font-size: var(--vtg-input-font-size)
 }
+.vtg-text-\[length\:var\(--vtg-pagination-font-size\)\] {
+    font-size: var(--vtg-pagination-font-size)
+}
 .vtg-text-\[length\:var\(--vtg-table-font-size\)\] {
     font-size: var(--vtg-table-font-size)
 }
@@ -1357,6 +1575,9 @@
     font-size: 0.75rem;
     line-height: 1rem
 }
+.vtg-font-\[number\:var\(--vtg-pagination-active-weight\)\] {
+    font-weight: var(--vtg-pagination-active-weight)
+}
 .vtg-font-bold {
     font-weight: 700
 }
@@ -1432,6 +1653,18 @@
 .vtg-text-\[color\:var\(--color-text-disabled\)\] {
     color: var(--color-text-disabled)
 }
+.vtg-text-\[color\:var\(--color-text-placeholder\)\] {
+    color: var(--color-text-placeholder)
+}
+.vtg-text-\[color\:var\(--color-text-regular\)\] {
+    color: var(--color-text-regular)
+}
+.vtg-text-\[color\:var\(--vtg-pagination-active-color\)\] {
+    color: var(--vtg-pagination-active-color)
+}
+.vtg-text-\[color\:var\(--vtg-pagination-option-active-color\)\] {
+    color: var(--vtg-pagination-option-active-color)
+}
 .vtg-text-\[color\:var\(--vtg-table-header-color\)\] {
     color: var(--vtg-table-header-color)
 }
@@ -1453,6 +1686,9 @@
     --tw-text-opacity: 1;
     color: rgb(162 28 175 / var(--tw-text-opacity, 1))
 }
+.vtg-text-inherit {
+    color: inherit
+}
 .vtg-text-muted {
     color: var(--color-muted)
 }
@@ -1531,6 +1767,10 @@
     --tw-shadow-colored: 0 0 #0000;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000)
 }
+.vtg-shadow-\[var\(--vtg-pagination-popup-shadow\)\] {
+    --tw-shadow-color: var(--vtg-pagination-popup-shadow);
+    --tw-shadow: var(--tw-shadow-colored, 0 0 #0000)
+}
 .vtg-shadow-\[var\(--vtg-tooltip-shadow\,none\)\] {
     --tw-shadow-color: var(--vtg-tooltip-shadow,none);
     --tw-shadow: var(--tw-shadow-colored, 0 0 #0000)
@@ -1548,6 +1788,10 @@
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity, 1))
 }
+.vtg-blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  )
+}
 .vtg-filter {
     filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  )
 }
@@ -1630,9 +1874,21 @@
 .\[--vtg-checkbox-indeterminate-color\:var\(--color-text-placeholder\2c \#a8abb2\)\] {
     --vtg-checkbox-indeterminate-color: var(--color-text-placeholder,#a8abb2)
 }
+.\[--vtg-pagination-font-size\:var\(--vtg-pagination-font-size-sm\)\] {
+    --vtg-pagination-font-size: var(--vtg-pagination-font-size-sm)
+}
+.\[--vtg-pagination-select-width\:var\(--vtg-pagination-select-width-sm\)\] {
+    --vtg-pagination-select-width: var(--vtg-pagination-select-width-sm)
+}
+.\[--vtg-pagination-size\:var\(--vtg-pagination-size-sm\)\] {
+    --vtg-pagination-size: var(--vtg-pagination-size-sm)
+}
 .\[--vtg-table-filter-tree-indent-size\:24px\] {
     --vtg-table-filter-tree-indent-size: 24px
 }
+.\[appearance\:textfield\] {
+    appearance: textfield
+}
 .\[background-image\:linear-gradient\(var\(--vtg-table-header-split-color\)\2c var\(--vtg-table-header-split-color\)\)\] {
     background-image: linear-gradient(var(--vtg-table-header-split-color),var(--vtg-table-header-split-color))
 }
@@ -1954,6 +2210,12 @@
 .hover\:vtg-bg-\[color\:var\(--color-surface\)\]:hover {
     background-color: var(--color-surface)
 }
+.hover\:vtg-bg-\[color\:var\(--vtg-pagination-option-active-bg\)\]:hover {
+    background-color: var(--vtg-pagination-option-active-bg)
+}
+.hover\:vtg-bg-\[color\:var\(--vtg-pagination-option-hover-bg\)\]:hover {
+    background-color: var(--vtg-pagination-option-hover-bg)
+}
 .hover\:vtg-bg-\[color\:var\(--vtg-scrollbar-thumb-hover-bg\)\]:hover {
     background-color: var(--vtg-scrollbar-thumb-hover-bg)
 }
@@ -1992,6 +2254,12 @@
 .focus\:vtg-border-transparent:focus {
     border-color: transparent
 }
+.focus\:vtg-bg-\[color\:var\(--vtg-pagination-option-active-bg\)\]:focus {
+    background-color: var(--vtg-pagination-option-active-bg)
+}
+.focus\:vtg-bg-\[color\:var\(--vtg-pagination-option-hover-bg\)\]:focus {
+    background-color: var(--vtg-pagination-option-hover-bg)
+}
 .focus\:vtg-text-\[color\:var\(--color-primary\)\]:focus {
     color: var(--color-primary)
 }
@@ -2005,6 +2273,24 @@
     --tw-shadow-colored: 0 0 #0000;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000)
 }
+.focus-visible\:vtg-outline:focus-visible {
+    outline-style: solid
+}
+.focus-visible\:vtg-outline-1:focus-visible {
+    outline-width: 1px
+}
+.focus-visible\:vtg-outline-2:focus-visible {
+    outline-width: 2px
+}
+.focus-visible\:-vtg-outline-offset-1:focus-visible {
+    outline-offset: -1px
+}
+.focus-visible\:vtg-outline-offset-2:focus-visible {
+    outline-offset: 2px
+}
+.focus-visible\:vtg-outline-\[color\:var\(--color-primary\)\]:focus-visible {
+    outline-color: var(--color-primary)
+}
 .active\:vtg-border-\[color\:var\(--color-primary\)\]:active {
     border-color: var(--color-primary)
 }
@@ -2029,12 +2315,60 @@
 .active\:vtg-text-\[color\:var\(--color-primary-active\2c \#337ecc\)\]:active {
     color: var(--color-primary-active,#337ecc)
 }
+.enabled\:hover\:vtg-border-\[color\:var\(--color-border-hover\)\]:hover:enabled {
+    border-color: var(--color-border-hover)
+}
+.enabled\:hover\:vtg-border-\[color\:var\(--color-primary\)\]:hover:enabled {
+    border-color: var(--color-primary)
+}
+.enabled\:hover\:vtg-border-\[color\:var\(--color-primary-hover\)\]:hover:enabled {
+    border-color: var(--color-primary-hover)
+}
+.enabled\:focus\:vtg-border-\[color\:var\(--color-primary\)\]:focus:enabled {
+    border-color: var(--color-primary)
+}
+.enabled\:focus\:vtg-border-\[color\:var\(--color-primary-hover\)\]:focus:enabled {
+    border-color: var(--color-primary-hover)
+}
+.enabled\:focus\:vtg-shadow-none:focus:enabled {
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000)
+}
+.enabled\:focus\:vtg-shadow-\[var\(--vtg-pagination-focus-shadow\)\]:focus:enabled {
+    --tw-shadow-color: var(--vtg-pagination-focus-shadow);
+    --tw-shadow: var(--tw-shadow-colored, 0 0 #0000)
+}
 .disabled\:vtg-cursor-not-allowed:disabled {
     cursor: not-allowed
 }
+.disabled\:vtg-border-\[color\:var\(--color-border\)\]:disabled {
+    border-color: var(--color-border)
+}
+.disabled\:vtg-border-\[color\:var\(--vtg-pagination-border\)\]:disabled {
+    border-color: var(--vtg-pagination-border)
+}
+.disabled\:vtg-bg-\[color\:var\(--color-bg-disabled\)\]:disabled {
+    background-color: var(--color-bg-disabled)
+}
+.disabled\:vtg-bg-\[color\:var\(--vtg-pagination-active-disabled-bg\)\]:disabled {
+    background-color: var(--vtg-pagination-active-disabled-bg)
+}
+.disabled\:vtg-bg-\[color\:var\(--vtg-pagination-bg\)\]:disabled {
+    background-color: var(--vtg-pagination-bg)
+}
+.disabled\:vtg-text-\[color\:var\(--color-muted\)\]:disabled {
+    color: var(--color-muted)
+}
+.disabled\:vtg-text-\[color\:var\(--color-text-disabled\)\]:disabled {
+    color: var(--color-text-disabled)
+}
 .disabled\:vtg-text-\[color\:var\(--color-text-disabled\2c \#a8abb2\)\]:disabled {
     color: var(--color-text-disabled,#a8abb2)
 }
+.disabled\:vtg-text-\[color\:var\(--color-text-placeholder\)\]:disabled {
+    color: var(--color-text-placeholder)
+}
 .vtg-group\/row:nth-child(even) .group-even\/row\:vtg-bg-\[color\:var\(--vtg-table-row-hover-bg\)\] {
     background-color: var(--vtg-table-row-hover-bg)
 }
@@ -2057,6 +2391,96 @@
 .vtg-group:hover .group-hover\:vtg-opacity-100 {
     opacity: 1
 }
+.vtg-group:not([aria-disabled=true]):focus-visible .group-\[\:not\(\[aria-disabled\=true\]\)\:focus-visible\]\:vtg-opacity-0 {
+    opacity: 0
+}
+.vtg-group:not([aria-disabled=true]):focus-visible .group-\[\:not\(\[aria-disabled\=true\]\)\:focus-visible\]\:vtg-opacity-100 {
+    opacity: 1
+}
+.vtg-group:not([aria-disabled=true]):hover .group-\[\:not\(\[aria-disabled\=true\]\)\:hover\]\:vtg-opacity-0 {
+    opacity: 0
+}
+.vtg-group:not([aria-disabled=true]):hover .group-\[\:not\(\[aria-disabled\=true\]\)\:hover\]\:vtg-opacity-100 {
+    opacity: 1
+}
+.aria-disabled\:vtg-cursor-not-allowed[aria-disabled="true"] {
+    cursor: not-allowed
+}
+.aria-disabled\:vtg-border-\[color\:var\(--color-border\)\][aria-disabled="true"] {
+    border-color: var(--color-border)
+}
+.aria-disabled\:vtg-border-\[color\:var\(--vtg-pagination-border\)\][aria-disabled="true"] {
+    border-color: var(--vtg-pagination-border)
+}
+.aria-disabled\:vtg-bg-\[color\:var\(--vtg-pagination-active-disabled-bg\)\][aria-disabled="true"] {
+    background-color: var(--vtg-pagination-active-disabled-bg)
+}
+.aria-disabled\:vtg-bg-\[color\:var\(--vtg-pagination-bg\)\][aria-disabled="true"] {
+    background-color: var(--vtg-pagination-bg)
+}
+.aria-disabled\:vtg-text-\[color\:var\(--color-muted\)\][aria-disabled="true"] {
+    color: var(--color-muted)
+}
+.aria-disabled\:vtg-text-\[color\:var\(--color-text-disabled\)\][aria-disabled="true"] {
+    color: var(--color-text-disabled)
+}
+.aria-disabled\:vtg-text-\[color\:var\(--color-text-placeholder\)\][aria-disabled="true"] {
+    color: var(--color-text-placeholder)
+}
+.aria-expanded\:vtg-border-\[color\:var\(--color-primary\)\][aria-expanded="true"] {
+    border-color: var(--color-primary)
+}
+.aria-expanded\:vtg-shadow-none[aria-expanded="true"] {
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000)
+}
+.aria-expanded\:vtg-shadow-\[var\(--vtg-pagination-focus-shadow\)\][aria-expanded="true"] {
+    --tw-shadow-color: var(--vtg-pagination-focus-shadow);
+    --tw-shadow: var(--tw-shadow-colored, 0 0 #0000)
+}
+.\[\&\:\:-webkit-inner-spin-button\]\:vtg-appearance-none::-webkit-inner-spin-button {
+    appearance: none
+}
+.\[\&\:\:-webkit-outer-spin-button\]\:vtg-appearance-none::-webkit-outer-spin-button {
+    appearance: none
+}
+.\[\&\:not\(\[aria-disabled\=true\]\)\:hover\]\:vtg-border-\[color\:var\(--color-border-hover\)\]:not([aria-disabled=true]):hover {
+    border-color: var(--color-border-hover)
+}
+.\[\&\:not\(\[aria-disabled\=true\]\)\:hover\]\:vtg-border-\[color\:var\(--color-primary-hover\)\]:not([aria-disabled=true]):hover {
+    border-color: var(--color-primary-hover)
+}
+.\[\&\:not\(\[aria-disabled\=true\]\)\:hover\]\:vtg-border-\[color\:var\(--vtg-pagination-active-hover-color\)\]:not([aria-disabled=true]):hover {
+    border-color: var(--vtg-pagination-active-hover-color)
+}
+.\[\&\:not\(\[aria-disabled\=true\]\)\:hover\]\:vtg-bg-\[color\:var\(--color-surface\)\]:not([aria-disabled=true]):hover {
+    background-color: var(--color-surface)
+}
+.\[\&\:not\(\[aria-disabled\=true\]\)\:hover\]\:vtg-bg-\[color\:var\(--vtg-pagination-active-bg\)\]:not([aria-disabled=true]):hover {
+    background-color: var(--vtg-pagination-active-bg)
+}
+.\[\&\:not\(\[aria-disabled\=true\]\)\:hover\]\:vtg-bg-\[color\:var\(--vtg-pagination-hover-bg\)\]:not([aria-disabled=true]):hover {
+    background-color: var(--vtg-pagination-hover-bg)
+}
+.\[\&\:not\(\[aria-disabled\=true\]\)\:hover\]\:vtg-bg-transparent:not([aria-disabled=true]):hover {
+    background-color: transparent
+}
+.\[\&\:not\(\[aria-disabled\=true\]\)\:hover\]\:vtg-text-\[color\:var\(--color-primary\)\]:not([aria-disabled=true]):hover {
+    color: var(--color-primary)
+}
+.\[\&\:not\(\[aria-disabled\=true\]\)\:hover\]\:vtg-text-\[color\:var\(--vtg-pagination-active-color\)\]:not([aria-disabled=true]):hover {
+    color: var(--vtg-pagination-active-color)
+}
+.\[\&\:not\(\[aria-disabled\=true\]\)\:hover\]\:vtg-text-\[color\:var\(--vtg-pagination-active-hover-color\)\]:not([aria-disabled=true]):hover {
+    color: var(--vtg-pagination-active-hover-color)
+}
+.\[\&\:not\(\[aria-disabled\=true\]\)\:hover\]\:vtg-text-\[color\:var\(--vtg-pagination-hover-color\)\]:not([aria-disabled=true]):hover {
+    color: var(--vtg-pagination-hover-color)
+}
+.\[\&\:not\(\[aria-disabled\=true\]\)\:hover\]\:vtg-text-inherit:not([aria-disabled=true]):hover {
+    color: inherit
+}
 .\[\&\:not\(\[data-vtg-preserve-last-border\]\)\>tr\:last-child\>td\]\:vtg-border-b-0:not([data-vtg-preserve-last-border])>tr:last-child>td {
     border-bottom-width: 0px;
     border-bottom-style: solid
@@ -2086,4 +2510,16 @@
     --tw-shadow: inset 0 2px 0 0 var(--vtg-table-row-drop-indicator-color);
     --tw-shadow-colored: inset 0 2px 0 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000)
+}
+.\[\&_svg\]\:vtg-text-\[color\:var\(--color-text-placeholder\)\] svg {
+    color: var(--color-text-placeholder)
+}
+.\[\&_svg\]\:vtg-transition-transform svg {
+    transition-property: transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms
+}
+.aria-expanded\:\[\&_svg\]\:vtg-rotate-180 svg[aria-expanded="true"] {
+    --tw-rotate: 180deg;
+    transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1))
 }