@dbcdk/react-components 0.0.88 → 0.0.89

package/dist/styles.css

@@ -8,12 +8,14 @@
   font-weight: 400;
   font-style: normal;
 }
+
 @font-face {
   font-family: 'Roboto';
   src: url('./fonts/Roboto/Roboto-Medium.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
 }
+
 @font-face {
   font-family: 'Roboto';
   src: url('./fonts/Roboto/Roboto-Bold.ttf') format('truetype');
@@ -62,26 +64,29 @@ body.dbc-app {
   font-family: monospace;
 }
 
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
 .dbc-table {
   --card-label-width: 260px;
+
   border-collapse: collapse;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
 }
 
-.dbc-table--hover tr:hover {
-  background-color: var(--color-bg-contextual);
-}
-
-.dbc-table tr + tr th,
-.dbc-table tr + tr td {
+/* Default compact table cell padding.
+   This applies to the first row too, avoiding uneven first-row spacing. */
+.dbc-table th,
+.dbc-table td {
   padding-block: var(--spacing-xxs);
+  vertical-align: baseline;
 }
 
 .dbc-table th {
   white-space: nowrap;
   text-align: left;
-  vertical-align: top;
   max-width: var(--card-label-width);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -93,29 +98,120 @@ body.dbc-app {
   padding-right: var(--spacing-lg);
 }
 
-/* VALUES (td) → match .metaValue */
 .dbc-table td {
-  vertical-align: top;
   min-width: 0;
-
-  margin: 0; /* harmless on td, keeps parity with metaValue */
+  margin: 0;
   font-size: var(--font-size-sm);
   color: var(--color-fg-default);
   font-weight: var(--font-weight-default);
-
   word-break: break-word;
 }
 
-/* Optional: baseline alignment closer to metaRow */
-.dbc-table th,
-.dbc-table td {
-  vertical-align: baseline;
+.dbc-table--hover tr:hover {
+  background-color: var(--color-bg-contextual);
+}
+
+.dbc-table--striped tbody tr:nth-child(even) {
+  background-color: var(--table-row-bg-alt);
+}
+
+.dbc-table--striped.dbc-table--hover tbody tr:hover {
+  background-color: var(--table-row-bg-hover);
 }
 
 .dbc-full-width {
   width: 100%;
 }
 
+/* Bordered table */
+
+.dbc-table--bordered {
+  width: auto;
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-collapse: collapse;
+}
+
+.dbc-table--bordered th,
+.dbc-table--bordered td {
+  border: var(--border-width-thin) solid var(--color-border-default);
+  padding: var(--spacing-xs) var(--spacing-sm);
+}
+
+.dbc-table--bordered thead th {
+  background-color: var(--color-bg-surface);
+}
+
+/* Alignment modifier */
+
+.dbc-table--align-middle,
+.dbc-table--align-middle th,
+.dbc-table--align-middle td {
+  vertical-align: middle;
+}
+
+/* Matrix / comparison table */
+
+.dbc-table--matrix {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.dbc-table--matrix th,
+.dbc-table--matrix td {
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: var(--border-width-thin) solid var(--table-border-subtle);
+}
+
+.dbc-table--matrix thead th {
+  color: var(--table-header-fg);
+  background-color: transparent;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+}
+
+.dbc-table--matrix tbody th {
+  color: var(--color-fg-default);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.dbc-table--matrix td {
+  color: var(--table-cell-fg);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.dbc-table--matrix th:not(:first-child) {
+  text-align: right;
+}
+
+.dbc-table--matrix tr:last-child th,
+.dbc-table--matrix tr:last-child td {
+  border-bottom: 0;
+}
+
+.dbc-table--matrix-group-header th {
+  border-bottom: 0;
+  text-align: center;
+}
+
+.dbc-table--matrix-group-header th:first-child {
+  text-align: left;
+}
+
+.dbc-table--matrix-current {
+  background-color: color-mix(in srgb, var(--color-bg-selected) 45%, var(--color-bg-surface));
+}
+
+/* ==========================================================================
+   Text / utility classes
+   ========================================================================== */
+
 .dbc-highlight {
   color: var(--color-highlight-fg, inherit);
   background-color: var(--color-highlight-bg, var(--color-status-warning-bg));
@@ -141,34 +237,12 @@ body.dbc-app {
   font-weight: var(--font-weight-medium);
 }
 
-.dbc-table--bordered {
-  width: auto;
-  border: var(--border-width-thin) solid var(--color-border-default);
-  border-collapse: collapse;
-}
-
-.dbc-table--bordered th,
-.dbc-table--bordered td {
-  border: var(--border-width-thin) solid var(--color-border-default);
-  padding: var(--spacing-xs) var(--spacing-sm);
-}
-
-.dbc-table--bordered thead th {
-  background-color: var(--color-bg-surface);
-}
-
-.dbc-table--align-middle {
-  vertical-align: middle;
-  th {
-    vertical-align: middle;
-  }
-  td {
-    vertical-align: middle;
-  }
-}
+/* ==========================================================================
+   Layout utilities
+   ========================================================================== */
 
 @media screen and (min-height: 400px) {
-  .body.dbc-app {
+  body.dbc-app {
     overflow: hidden;
   }
 }
@@ -181,15 +255,34 @@ body.dbc-app {
 }
 
 .hideScrollBar {
-  scrollbar-width: none; /* Firefox */
+  scrollbar-width: none;
 }
+
 .hideScrollBar::-webkit-scrollbar {
-  display: none; /* Chrome, Safari, Opera */
+  display: none;
 }
 
-/* Apply globally */
+.fitContent {
+  white-space: nowrap !important;
+  width: 1% !important;
+  min-width: 1% !important;
+  max-width: 1% !important;
+}
+
+.dbc-full-height {
+  height: 100%;
+}
+
+.dbc-offset-height {
+  transform: translateY(-8vh);
+}
+
+/* ==========================================================================
+   Scrollbars
+   ========================================================================== */
+
 ::-webkit-scrollbar {
-  width: 10px; /* or thinner: 6px */
+  width: 10px;
 }
 
 ::-webkit-scrollbar-track {
@@ -198,14 +291,18 @@ body.dbc-app {
 
 ::-webkit-scrollbar-thumb {
   background-color: var(--color-border-strong);
-  border-radius: 4px; /* rounded for modern look */
-  border: 2px solid var(--color-bg-surface); /* creates padding effect */
+  border-radius: 4px;
+  border: 2px solid var(--color-bg-surface);
 }
 
 ::-webkit-scrollbar-thumb:hover {
   background-color: var(--color-fg-subtle);
 }
 
+/* ==========================================================================
+   Animations
+   ========================================================================== */
+
 .animate--expand {
   animation: expand 0.15s ease-in-out forwards;
 }
@@ -214,26 +311,16 @@ body.dbc-app {
   animation: collapse 0.15s ease-in-out forwards;
 }
 
-.fitContent {
-  white-space: nowrap !important;
-  width: 1% !important;
-  min-width: 1% !important;
-  max-width: 1% !important;
-}
-
-.dbc-full-height {
-  height: 100%;
-}
-
-.dbc-offset-height {
-  transform: translateY(-8vh);
+.spin {
+  display: inline-block;
+  animation: spin 2s linear infinite;
 }
 
-/* Animations */
 @keyframes expand {
   0% {
     max-height: 0;
   }
+
   100% {
     max-height: 100vh;
   }
@@ -243,6 +330,7 @@ body.dbc-app {
   0% {
     max-height: 100vh;
   }
+
   100% {
     max-height: 0;
   }
@@ -252,15 +340,15 @@ body.dbc-app {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
 }
 
-.spin {
-  display: inline-block;
-  animation: spin 2s linear infinite;
-}
+/* ==========================================================================
+   Accessibility
+   ========================================================================== */
 
 .srOnly {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.88",
+  "version": "0.0.89",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",