@dbcdk/react-components 0.0.188 → 0.0.190

package/dist/components/table/components/TableRow.cjs

@@ -144,6 +144,7 @@ function TableRow({
             {
               className: table_classes.cx(
                 styles__default.default.cell,
+                column.muted && "dbc-muted-text",
                 showRowActions && styles__default.default.actionCell,
                 allowOverflow && styles__default.default.allowOverflow,
                 allowWrap ? styles__default.default.allowWrap : styles__default.default.nowrap,

package/dist/components/table/components/TableRow.js

@@ -138,6 +138,7 @@ function TableRow({
             {
               className: cx(
                 styles.cell,
+                column.muted && "dbc-muted-text",
                 showRowActions && styles.actionCell,
                 allowOverflow && styles.allowOverflow,
                 allowWrap ? styles.allowWrap : styles.nowrap,

package/dist/components/table/tanstackTable.utils.cjs

@@ -20,7 +20,7 @@ function buildColumnVisibilityFromVisibleIds(defs, visibleColumnIds) {
 }
 function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}) {
   return defs.map((def, index) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const id = getColumnId(def, index);
     const accessorKey = def.accessorKey;
     const accessorFn = def.accessorFn;
@@ -52,9 +52,10 @@ function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}) {
       verticalAlign: meta.verticalAlign,
       emptyPlaceholder: (_e = meta.emptyPlaceholder) != null ? _e : "-",
       allowWrap: (_f = meta.allowWrap) != null ? _f : false,
+      muted: (_g = meta.muted) != null ? _g : false,
       severity: meta.severity,
       divider: meta.divider,
-      allowOverflow: (_g = meta.allowOverflow) != null ? _g : false
+      allowOverflow: (_h = meta.allowOverflow) != null ? _h : false
     };
   });
 }

package/dist/components/table/tanstackTable.utils.js

@@ -18,7 +18,7 @@ function buildColumnVisibilityFromVisibleIds(defs, visibleColumnIds) {
 }
 function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}) {
   return defs.map((def, index) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const id = getColumnId(def, index);
     const accessorKey = def.accessorKey;
     const accessorFn = def.accessorFn;
@@ -50,9 +50,10 @@ function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}) {
       verticalAlign: meta.verticalAlign,
       emptyPlaceholder: (_e = meta.emptyPlaceholder) != null ? _e : "-",
       allowWrap: (_f = meta.allowWrap) != null ? _f : false,
+      muted: (_g = meta.muted) != null ? _g : false,
       severity: meta.severity,
       divider: meta.divider,
-      allowOverflow: (_g = meta.allowOverflow) != null ? _g : false
+      allowOverflow: (_h = meta.allowOverflow) != null ? _h : false
     };
   });
 }

package/dist/components/tabs/Tabs.module.css

@@ -47,7 +47,7 @@
    squeezing it. */
 .tabListAddition {
   display: flex;
-  align-items: center;
+  align-items: start;
   flex-shrink: 0;
   gap: var(--spacing-sm);
   margin-inline-start: auto;
@@ -220,7 +220,17 @@
 }
 
 .filled > .tabList {
-  border-block-end: 1px solid var(--color-border-subtle);
+  position: relative;
+}
+
+.filled > .tabList::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  block-size: 1px;
+  background: var(--color-border-subtle);
+  pointer-events: none;
 }
 
 /* One continuous backdrop behind the whole button row, so the curved gap
@@ -232,6 +242,15 @@
   border-start-start-radius: var(--border-radius-md);
 }
 
+.filled > .tabList > .tabButtons > .tab > .tabButton {
+  padding-block: var(--spacing-xs);
+}
+
+.filled > .tabList > .tabButtons > .tab > .tabButton .icon svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+
 .filled > .tabList > .tabButtons.tabButtonsEnd {
   border-start-end-radius: var(--border-radius-md);
 }
@@ -249,7 +268,8 @@
 
 .filled > .tabList > .tabButtons > .tab {
   border: 1px solid transparent;
-  border-block-end: 0;
+  border-block-end-width: 1px;
+  margin-block-end: -1px;
   color: var(--color-fg-muted);
   position: relative;
   transition:
@@ -271,18 +291,26 @@
   border-block-end-color: var(--color-bg-surface);
   border-start-start-radius: var(--border-radius-md);
   border-start-end-radius: var(--border-radius-md);
-  margin-block-end: -1px;
   z-index: 1;
   color: var(--color-fg-default);
 }
 
+.filled > .tabList > .tabButtons > .tab.active::after {
+  content: '';
+  position: absolute;
+  inset-inline: -1px;
+  inset-block-end: -1px;
+  block-size: 1px;
+  background: var(--color-bg-surface);
+}
+
 .filled > .tabContent {
   background: var(--color-bg-surface);
   border: 1px solid var(--color-border-subtle);
   border-block-start: none;
   border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
   box-shadow: var(--shadow-xs);
-  padding: var(--spacing-md);
+  padding: calc(var(--spacing-md) + var(--spacing-xs)) var(--spacing-md) var(--spacing-md);
 }
 
 /* =========================
@@ -362,7 +390,7 @@
 
   .filled > .tabContent,
   .panelStyle.outlined > .tabContent {
-    padding-block: var(--spacing-sm);
+    padding-block: calc(var(--spacing-sm) + var(--spacing-xs)) var(--spacing-sm);
     padding-inline: var(--spacing-sm);
   }
 

package/dist/styles/styles.css

@@ -72,9 +72,45 @@ body.dbc-app {
   font-family: monospace;
 }
 
-/* ==========================================================================
-   Tables
-   ========================================================================== */
+.dbc-pulse {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--border-radius-round);
+  color: var(--color-primary-500, var(--color-brand));
+  transform-origin: center;
+}
+
+.dbc-pulse::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  animation: dbc-pulse 1.8s ease-out infinite;
+  pointer-events: none;
+}
+
+@keyframes dbc-pulse {
+  0% {
+    opacity: 0.2;
+  }
+  20% {
+    opacity: 0.55;
+  }
+  60% {
+    opacity: 0.15;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dbc-pulse::after {
+    animation: none;
+  }
+}
 
 .dbc-table {
   --card-label-width: 260px;

package/dist/styles.css

@@ -72,9 +72,45 @@ body.dbc-app {
   font-family: monospace;
 }
 
-/* ==========================================================================
-   Tables
-   ========================================================================== */
+.dbc-pulse {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--border-radius-round);
+  color: var(--color-primary-500, var(--color-brand));
+  transform-origin: center;
+}
+
+.dbc-pulse::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  animation: dbc-pulse 1.8s ease-out infinite;
+  pointer-events: none;
+}
+
+@keyframes dbc-pulse {
+  0% {
+    opacity: 0.2;
+  }
+  20% {
+    opacity: 0.55;
+  }
+  60% {
+    opacity: 0.15;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dbc-pulse::after {
+    animation: none;
+  }
+}
 
 .dbc-table {
   --card-label-width: 260px;

package/package.json

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