@vertebr/react 0.18.1 → 0.20.0

package/dist/styles/table.css

@@ -10,6 +10,18 @@
   overscroll-behavior-inline: contain;
   scrollbar-gutter: stable;
   scrollbar-width: thin;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Bare tables (no wrap) still scroll in constrained panels. */
+.vertebr-panel > .vertebr-table,
+.vertebr-metrics-table-wrap > .vertebr-table,
+.vertebr-emails-pane > .vertebr-table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: auto;
+  scrollbar-width: thin;
 }
 
 .vertebr-table-wrap[data-overflow-left="true"] {
@@ -26,6 +38,27 @@
     inset -12px 0 16px -14px color-mix(in srgb, var(--vb-text) 35%, transparent);
 }
 
+@keyframes vertebr-table-filter-in {
+  from {
+    opacity: 0.4;
+    transform: translateY(3px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.vertebr-table-wrap[data-transition="true"] .vertebr-table tbody {
+  animation: vertebr-table-filter-in 180ms ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vertebr-table-wrap[data-transition="true"] .vertebr-table tbody {
+    animation: none;
+  }
+}
+
 .vertebr-table {
   width: max-content;
   min-width: 100%;
@@ -42,8 +75,9 @@
   text-align: left;
   vertical-align: middle;
   white-space: nowrap;
-  overflow: hidden;
-  max-width: 16rem;
+  /* Grow with content — horizontal scroll lives on .vertebr-table-wrap */
+  max-width: none;
+  overflow: visible;
 }
 
 .vertebr-table th:not(.vertebr-col-actions),
@@ -64,6 +98,40 @@
   background: var(--vb-bg-elevated);
 }
 
+.vertebr-th-sort {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+}
+
+.vertebr-th-sort:hover,
+.vertebr-th-sort[data-active="true"] {
+  color: var(--vb-text);
+}
+
+.vertebr-th-sort-icon {
+  flex: 0 0 auto;
+  opacity: 0.45;
+  font-size: 0.85em;
+  line-height: 1;
+}
+
+.vertebr-th-sort:hover .vertebr-th-sort-icon,
+.vertebr-th-sort[data-active="true"] .vertebr-th-sort-icon {
+  opacity: 0.9;
+}
+
 .vertebr-table tbody tr {
   transition: background 100ms ease;
 }
@@ -150,3 +218,48 @@
   white-space: nowrap;
   border: 0;
 }
+
+.vertebr-table-skeleton {
+  pointer-events: none;
+}
+
+.vertebr-table-skeleton-cell {
+  display: block;
+  height: 0.7rem;
+  border-radius: 4px;
+  background: linear-gradient(
+    90deg,
+    var(--vb-bg-muted) 0%,
+    var(--vb-bg-hover, var(--vb-surface-tint)) 50%,
+    var(--vb-bg-muted) 100%
+  );
+  background-size: 200% 100%;
+  animation: vb-skeleton 1.2s ease-in-out infinite;
+}
+
+.vertebr-table-skeleton-cell[data-width="sm"] {
+  width: 38%;
+}
+
+.vertebr-table-skeleton-cell[data-width="md"] {
+  width: 58%;
+}
+
+.vertebr-table-skeleton-cell[data-width="lg"] {
+  width: 78%;
+}
+
+.vertebr-table-skeleton-header {
+  height: 0.55rem;
+  opacity: 0.85;
+}
+
+.vertebr-table-skeleton thead th {
+  vertical-align: middle;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vertebr-table-skeleton-cell {
+    animation: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertebr/react",
-  "version": "0.18.1",
+  "version": "0.20.0",
   "description": "Vertebr admin dashboard UI",
   "type": "module",
   "main": "./dist/index.js",