@vertebr/react 0.4.0 → 0.5.1

package/dist/styles/nav.css

@@ -9,7 +9,7 @@
 .vertebr-nav-group {
   display: flex;
   flex-direction: column;
-  gap: 0.15rem;
+  gap: 0.2rem;
 }
 
 .vertebr-nav-label {
@@ -44,6 +44,47 @@
     box-shadow 120ms ease;
 }
 
+.vertebr-nav-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.vertebr-nav-parent {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: stretch;
+  gap: 0.15rem;
+}
+
+.vertebr-nav-parent-label {
+  min-width: 0;
+}
+
+.vertebr-nav-parent-toggle {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem !important;
+  min-width: 1.75rem;
+  margin: 0.1rem 0.15rem 0.1rem 0 !important;
+  padding: 0 !important;
+  border-radius: 7px !important;
+  color: var(--vb-text-subtle) !important;
+  font-size: 0.62rem !important;
+  line-height: 1;
+  letter-spacing: 0;
+}
+
+.vertebr-nav-parent-toggle:hover {
+  background: var(--vb-bg-muted) !important;
+  color: var(--vb-text) !important;
+}
+
+.vertebr-nav-item[data-open="true"] .vertebr-nav-parent-toggle {
+  color: var(--vb-text-muted) !important;
+}
+
 .vertebr-nav button:hover {
   background: var(--vb-bg-muted);
   color: var(--vb-text);
@@ -56,6 +97,67 @@
   font-weight: 500;
 }
 
+.vertebr-nav-parent-label[data-section="true"] {
+  color: var(--vb-text);
+  font-weight: 600;
+  background: transparent;
+  box-shadow: none;
+}
+
+.vertebr-nav-parent-label[data-section="true"]:hover {
+  background: var(--vb-bg-muted);
+}
+
+.vertebr-nav-parent-label[data-section="true"][data-active="true"] {
+  background: var(--vb-accent-soft);
+  box-shadow: inset 2px 0 0 var(--vb-accent);
+  color: var(--vb-accent);
+  font-weight: 500;
+}
+
+.vertebr-nav-sub {
+  display: flex;
+  flex-direction: column;
+  gap: 0.12rem;
+  margin: 0.28rem 0 0.35rem 0.85rem;
+  padding: 0.1rem 0 0.1rem 0.75rem;
+  border-left: 1px solid
+    color-mix(in srgb, var(--vb-border) 70%, var(--vb-text-subtle) 30%);
+}
+
+.vertebr-nav-subitem {
+  font-size: 0.8rem !important;
+  padding: 0.4rem 0.7rem !important;
+  border-radius: 8px !important;
+  color: var(--vb-text-subtle) !important;
+  font-weight: 450 !important;
+  letter-spacing: 0.01em;
+}
+
+.vertebr-nav-subitem:hover {
+  background: var(--vb-bg-muted) !important;
+  color: var(--vb-text) !important;
+  box-shadow: none !important;
+}
+
+.vertebr-nav-subitem[data-active="true"] {
+  background: var(--vb-accent-soft) !important;
+  box-shadow: none !important;
+  color: var(--vb-text) !important;
+  font-weight: 560 !important;
+}
+
+.vertebr-nav-subitem[data-active="true"]::before {
+  content: "";
+  position: absolute;
+  left: -0.75rem;
+  top: 0.35rem;
+  bottom: 0.35rem;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--vb-accent);
+}
+
 .vertebr-nav button:focus-visible,
 .vertebr-btn:focus-visible {
   outline: none;

package/dist/styles/panel.css

@@ -2,6 +2,7 @@
 
 .vertebr-panel {
   flex: 1 1 auto;
+  min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
@@ -50,6 +51,7 @@
 
 .vertebr-resource-body {
   flex: 1 1 auto;
+  min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
@@ -109,74 +111,6 @@
   white-space: nowrap;
 }
 
-.vertebr-metrics {
-  flex: 1 1 auto;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.vertebr-metrics-grid {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: auto;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 1rem;
-  align-content: start;
-  padding: 1.35rem 1.5rem 1.5rem;
-}
-
-.vertebr-metric-card {
-  border: 1px solid var(--vb-border);
-  border-radius: var(--vb-radius);
-  background: var(--vb-surface-tint);
-  padding: 1rem 1.05rem 1.1rem;
-  min-height: 110px;
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
-.vertebr-metric-card[data-tone="ok"] {
-  border-color: color-mix(in srgb, var(--vb-ok) 40%, transparent);
-  background: var(--vb-ok-soft);
-}
-
-.vertebr-metric-card[data-tone="warn"] {
-  border-color: color-mix(in srgb, var(--vb-accent) 40%, transparent);
-  background: var(--vb-accent-soft);
-}
-
-.vertebr-metric-card[data-tone="danger"] {
-  border-color: color-mix(in srgb, var(--vb-danger) 40%, transparent);
-  background: var(--vb-danger-soft);
-}
-
-.vertebr-metric-label {
-  margin: 0;
-  font-size: 0.72rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  font-family: var(--vb-mono);
-  color: var(--vb-text-subtle);
-}
-
-.vertebr-metric-value {
-  margin: 0;
-  font-size: 1.75rem;
-  font-weight: 600;
-  letter-spacing: -0.03em;
-  line-height: 1.1;
-}
-
-.vertebr-metric-hint {
-  margin: 0.15rem 0 0;
-  font-size: 0.78rem;
-  color: var(--vb-text-muted);
-  line-height: 1.35;
-}
-
 .vertebr-resource-edit {
   flex: 1 1 auto;
   min-height: 0;

package/dist/styles/table.css

@@ -5,9 +5,11 @@
   min-height: 0;
   min-width: 0;
   max-width: 100%;
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: auto;
   overscroll-behavior-inline: contain;
   scrollbar-gutter: stable;
+  scrollbar-width: thin;
 }
 
 .vertebr-table {
@@ -21,11 +23,13 @@
 
 .vertebr-table th,
 .vertebr-table td {
-  padding: 0.85rem 1rem;
+  padding: 0.7rem 0.9rem;
   border-bottom: 1px solid var(--vb-border);
   text-align: left;
   vertical-align: middle;
   white-space: nowrap;
+  overflow: hidden;
+  max-width: 16rem;
 }
 
 .vertebr-table th:not(.vertebr-col-actions),
@@ -50,10 +54,27 @@
   transition: background 100ms ease;
 }
 
-.vertebr-table tbody tr:hover {
+.vertebr-table tbody tr[data-selected="true"] {
   background: var(--vb-surface-tint);
 }
 
+.vertebr-table th.vertebr-col-select,
+.vertebr-table td.vertebr-col-select {
+  width: 2.4rem;
+  min-width: 2.4rem;
+  max-width: 2.4rem;
+  padding-left: 0.85rem;
+  padding-right: 0.4rem;
+}
+
+.vertebr-row-check {
+  width: 0.95rem;
+  height: 0.95rem;
+  margin: 0;
+  accent-color: var(--vb-accent);
+  cursor: pointer;
+}
+
 .vertebr-table-row-clickable {
   cursor: pointer;
 }
@@ -70,6 +91,8 @@
   z-index: 2;
   width: 1%;
   min-width: 7.5rem;
+  max-width: none;
+  overflow: visible;
   padding-left: 0.75rem;
   padding-right: 0.85rem;
   background: var(--vb-bg-elevated);

package/package.json

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