@revikornmann/muka-ui 0.2.3 → 0.3.0

package/dist/cjs/components/DataTable/DataTable.css

@@ -7,16 +7,31 @@
 }
 
 .muka-data-table {
+  /* Density-driven cell padding (overridden per size below). */
+  --dt-pad-x: var(--datatable-cell-padding-x-md);
+  --dt-pad-y: var(--datatable-cell-padding-y-md);
+
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
-  table-layout: fixed;
-  background-color: var(--color-surface-level3);
-  color: var(--color-text-default-default);
+  /* auto layout so per-column min/max widths are honored and unsized columns flex */
+  table-layout: auto;
+  background-color: var(--datatable-row-background);
+  color: var(--datatable-row-foreground);
+}
+
+.muka-data-table--size-sm {
+  --dt-pad-x: var(--datatable-cell-padding-x-sm);
+  --dt-pad-y: var(--datatable-cell-padding-y-sm);
+}
+
+.muka-data-table--size-lg {
+  --dt-pad-x: var(--datatable-cell-padding-x-lg);
+  --dt-pad-y: var(--datatable-cell-padding-y-lg);
 }
 
 .muka-data-table__caption {
-  padding: var(--spacing-3) var(--spacing-6);
+  padding: var(--dt-pad-y) var(--dt-pad-x);
   font-family: var(--text-body-base-bold-fontFamily);
   font-weight: var(--text-body-base-bold-fontWeight);
   font-size: var(--text-body-base-bold-fontSize);
@@ -30,17 +45,17 @@
    ======================================== */
 
 .muka-data-table__head {
-  border-bottom: var(--border-width-regular, 1px) solid var(--color-border-default);
+  border-bottom: var(--border-width-regular, 1px) solid var(--datatable-header-border);
 }
 
 .muka-data-table__th {
-  background-color: var(--color-surface-level1);
-  padding: var(--spacing-2) var(--spacing-6);
+  background-color: var(--datatable-header-background);
+  padding: var(--datatable-cell-padding-y-sm) var(--dt-pad-x);
   font-family: var(--text-body-base-bold-fontFamily);
   font-weight: var(--text-body-base-bold-fontWeight);
   font-size: var(--text-body-base-bold-fontSize);
   line-height: var(--text-body-base-bold-lineHeight);
-  color: var(--color-text-default-default);
+  color: var(--datatable-header-foreground);
   vertical-align: middle;
   text-align: left;
 }
@@ -48,7 +63,7 @@
 .muka-data-table__th-label {
   display: flex;
   align-items: center;
-  min-height: 2rem; /* 32px slot — matches Figma header cell height */
+  min-height: var(--datatable-cell-min-height); /* 32px slot — matches Figma header cell height */
 }
 
 /* ========================================
@@ -56,28 +71,34 @@
    ======================================== */
 
 .muka-data-table__row {
-  border-bottom: var(--border-width-regular, 1px) solid var(--color-border-default);
+  border-bottom: var(--border-width-regular, 1px) solid var(--datatable-row-border);
   transition: background-color 0.15s ease;
 }
 
-.muka-data-table__row:not(.muka-data-table__row--empty):hover {
-  background-color: var(--color-surface-hover);
+.muka-data-table__row:not(.muka-data-table__row--empty):not(.muka-data-table__row--selected):hover {
+  background-color: var(--datatable-row-hover-background);
+}
+
+/* Selected rows keep their tint, including on hover. */
+.muka-data-table__row--selected,
+.muka-data-table__row--selected:hover {
+  background-color: var(--datatable-row-selected-background);
 }
 
 .muka-data-table__td {
-  padding: var(--spacing-3) var(--spacing-6);
+  padding: var(--dt-pad-y) var(--dt-pad-x);
   font-family: var(--text-body-base-regular-fontFamily);
   font-weight: var(--text-body-base-regular-fontWeight);
   font-size: var(--text-body-base-regular-fontSize);
   line-height: var(--text-body-base-regular-lineHeight);
-  color: var(--color-text-default-default);
+  color: var(--datatable-row-foreground);
   vertical-align: middle;
 }
 
 .muka-data-table__cell-content {
   display: flex;
   align-items: center;
-  min-height: 2rem; /* 32px slot — matches Figma body cell height */
+  min-height: var(--datatable-cell-min-height); /* 32px slot — matches Figma body cell height */
   word-break: break-word;
 }
 
@@ -86,6 +107,42 @@
   color: var(--color-text-subtle-default);
 }
 
+/* ========================================
+   BADGES — always the small (sm) scale
+   ======================================== */
+
+/* Any Badge inside a DataTable renders at the small scale regardless of the
+   `size` prop passed to it — status pills stay compact and consistent across
+   every table density. Enforced here so callers can't accidentally scale them
+   up. Overrides the `.muka-badge--md`/`--lg` size rules by carrying a higher
+   specificity (2–3 classes vs. 1–2), independent of stylesheet import order. */
+.muka-data-table .muka-badge {
+  height: var(--badge-size-height-sm);
+  gap: var(--badge-gap-sm);
+  padding: 0 var(--badge-padding-label-sm);
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+}
+
+/* Match the sm leading padding when a leading icon or dot is present. */
+.muka-data-table .muka-badge.muka-badge--has-icon,
+.muka-data-table .muka-badge.muka-badge--has-dot {
+  padding-left: var(--badge-padding-leading-sm);
+}
+
+/* Icon and dot slots follow the sm scale too. */
+.muka-data-table .muka-badge .muka-badge__icon {
+  width: var(--icon-size-xs);
+  height: var(--icon-size-xs);
+}
+
+.muka-data-table .muka-badge .muka-badge__dot {
+  width: var(--badge-size-dot-sm);
+  height: var(--badge-size-dot-sm);
+}
+
 /* ========================================
    ALIGNMENT
    ======================================== */
@@ -118,7 +175,7 @@
 
 .muka-data-table--column-dividers .muka-data-table__th:not(:last-child),
 .muka-data-table--column-dividers .muka-data-table__td:not(:last-child) {
-  border-right: var(--border-width-regular, 1px) solid var(--color-border-default);
+  border-right: var(--border-width-regular, 1px) solid var(--datatable-divider-color);
 }
 
 /* ========================================
@@ -130,7 +187,7 @@
   align-items: center;
   gap: var(--spacing-1);
   width: 100%;
-  min-height: 2rem;
+  min-height: var(--datatable-cell-min-height);
   padding: 0;
   margin: 0;
   border: 0;
@@ -144,22 +201,268 @@
 }
 
 .muka-data-table__sort-button:focus-visible {
-  outline: 2px solid var(--color-action-default);
+  outline: 2px solid var(--datatable-focus-ring);
   outline-offset: 2px;
 }
 
+/* The chevron only renders on the active sort column, so it's always full-strength. */
 .muka-data-table__sort-icon {
   display: inline-flex;
   flex-shrink: 0;
-  opacity: 0.4;
-  transition: opacity 0.15s ease;
 }
 
-.muka-data-table__sort-button:hover .muka-data-table__sort-icon {
-  opacity: 0.7;
+/* ========================================
+   INTERACTIVE ROWS (clickable / link)
+   ======================================== */
+
+.muka-data-table__row--interactive {
+  cursor: pointer;
+  /* anchor for the stretched link overlay */
+  position: relative;
+}
+
+.muka-data-table__row--interactive:focus-visible {
+  outline: 2px solid var(--datatable-focus-ring);
+  outline-offset: -2px;
+}
+
+.muka-data-table__row--interactive:active {
+  background-color: var(--datatable-row-pressed-background);
+}
+
+/* Link rows: the first-cell anchor stretches to cover the whole row. */
+.muka-data-table__row-link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.muka-data-table__row-link::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.muka-data-table__row--link:hover {
+  background-color: var(--datatable-row-hover-background);
+}
+
+.muka-data-table__row--link .muka-data-table__row-link:focus-visible {
+  outline: 2px solid var(--datatable-focus-ring);
+  outline-offset: -2px;
+}
+
+/* Disabled rows */
+.muka-data-table__row--disabled {
+  cursor: default;
+  color: var(--color-text-muted-default);
+}
+
+.muka-data-table__row--disabled .muka-data-table__td {
+  color: var(--color-text-muted-default);
+}
+
+/* ========================================
+   TRAILING ACTION COLUMN
+   ======================================== */
+
+/* Hug: the trailing action column shrinks to its content, so a text-label
+   button ("View") gets exactly the width it needs and an icon-only button
+   stays tight. `width: 1%` + `nowrap` is the classic auto-table hug. */
+.muka-data-table__col--action {
+  width: 0;
+}
+
+.muka-data-table__th--action,
+.muka-data-table__td--action {
+  width: 1%;
+  white-space: nowrap;
+  padding-left: var(--spacing-2);
+  padding-right: var(--spacing-2);
+  text-align: right;
+  /* Sit above the row link overlay so the action stays independently clickable. */
+  position: relative;
+  z-index: 1;
+}
+
+.muka-data-table__action-content {
+  justify-content: flex-end;
+}
+
+/* Visually-hidden-friendly empty header slot keeps the row height consistent. */
+.muka-data-table__action-header:empty {
+  min-height: var(--datatable-cell-min-height);
+}
+
+/* ========================================
+   SELECTION — leading checkbox column
+   ======================================== */
+
+.muka-data-table__col--select {
+  width: var(--datatable-selection-column-width);
+}
+
+.muka-data-table__th--select,
+.muka-data-table__td--select {
+  width: var(--datatable-selection-column-width);
+  padding-left: var(--spacing-4);
+  padding-right: var(--spacing-2);
+  /* Sit above the row link overlay so the checkbox stays independently clickable. */
+  position: relative;
+  z-index: 1;
+}
+
+.muka-data-table__select-control {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* ========================================
+   RESPONSIVE — two-column mobile layout
+   ======================================== */
+
+/* Desktop: the mobile-only stack cell/header/col are hidden. */
+.muka-data-table__th--mobile-stack,
+.muka-data-table__td--mobile-stack {
+  display: none;
 }
 
-.muka-data-table__sort-icon--asc,
-.muka-data-table__sort-icon--desc {
-  opacity: 1;
+/* Establish a container so the layout responds to the table's own width, not the
+   viewport — a DataTable in a narrow panel collapses even on a wide screen. */
+.muka-data-table-wrapper--responsive {
+  container-type: inline-size;
+}
+
+/* Below --breakpoint-md (768px) of the wrapper's width. @container can't read
+   custom properties, so the value is inlined as 767.98px. */
+@container (max-width: 767.98px) {
+  /* Lift the table and body out of table layout. Without this the grid rows
+     below get wrapped in anonymous table cells that shrink-wrap them to
+     min-content, collapsing the flexible (1fr) stack track to 0. */
+  .muka-data-table--responsive {
+    display: block;
+  }
+
+  .muka-data-table--responsive .muka-data-table__body {
+    display: block;
+  }
+
+  .muka-data-table--responsive .muka-data-table__head {
+    display: none;
+  }
+
+  .muka-data-table--responsive .muka-data-table__row {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    align-items: center;
+    column-gap: var(--spacing-4);
+    padding: var(--dt-pad-y) var(--dt-pad-x);
+  }
+
+  /* Reset table cells; each visible mobile cell opts back in below. */
+  .muka-data-table--responsive .muka-data-table__td {
+    display: none;
+    padding: 0;
+  }
+
+  /* Pin every visible cell to the single grid row. The stack cell sits after the
+     secondary cell in DOM order but targets an earlier column, so without this
+     auto-placement spills it onto a second row (breaking vertical centering). */
+  .muka-data-table--responsive .muka-data-table__td--select,
+  .muka-data-table--responsive .muka-data-table__td--mobile-stack,
+  .muka-data-table--responsive .muka-data-table__td--m-secondary,
+  .muka-data-table--responsive .muka-data-table__td--action {
+    grid-row: 1;
+  }
+
+  .muka-data-table--responsive .muka-data-table__td--mobile-stack {
+    display: block;
+    grid-column: 1;
+    min-width: 0;
+  }
+
+  .muka-data-table--responsive .muka-data-table__td--m-secondary {
+    display: block;
+    grid-column: 2;
+  }
+
+  .muka-data-table--responsive .muka-data-table__td--action {
+    display: block;
+    grid-column: 3;
+    width: auto;
+  }
+
+  /* Cell-content wrappers: drop the fixed row-height slot so rows stay compact. */
+  .muka-data-table--responsive .muka-data-table__td .muka-data-table__cell-content {
+    min-height: 0;
+  }
+
+  .muka-data-table--responsive .muka-data-table__td--m-secondary .muka-data-table__cell-content {
+    justify-content: flex-end;
+  }
+
+  /* Stacked primary column: first field is the title, the rest are subtitle lines. */
+  .muka-data-table__stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+    min-width: 0;
+  }
+
+  /* A ProfileBadge in the collapsed card drops its avatar so the name sits
+     flush-left and lines up with the other stacked primary/secondary text
+     instead of being indented by the avatar. `display: none` also collapses the
+     ProfileBadge's flex gap, so no placeholder whitespace is left behind. */
+  .muka-data-table--responsive .muka-profile-badge__avatar {
+    display: none;
+  }
+
+  .muka-data-table__stack-title {
+    font-family: var(--text-label-md-semibold-fontFamily);
+    font-weight: var(--text-label-md-semibold-fontWeight);
+    font-size: var(--text-label-md-semibold-fontSize);
+    line-height: var(--text-label-md-semibold-lineHeight);
+    color: var(--color-text-default-default);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .muka-data-table__stack-line {
+    font-family: var(--text-body-sm-regular-fontFamily);
+    font-weight: var(--text-body-sm-regular-fontWeight);
+    font-size: var(--text-body-sm-regular-fontSize);
+    line-height: var(--text-body-sm-regular-lineHeight);
+    color: var(--color-text-subtle-default);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* The stack title may itself be the stretched link. */
+  .muka-data-table__stack-title .muka-data-table__row-link {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  /* Selection checkbox leads the mobile row: [checkbox | stack | secondary | action]. */
+  .muka-data-table--responsive .muka-data-table__td--select {
+    display: block;
+    grid-column: 1;
+    width: auto;
+  }
+
+  .muka-data-table--responsive.muka-data-table--selectable .muka-data-table__row {
+    grid-template-columns: auto 1fr auto auto;
+  }
+
+  .muka-data-table--responsive.muka-data-table--selectable .muka-data-table__td--mobile-stack {
+    grid-column: 2;
+  }
+
+  .muka-data-table--responsive.muka-data-table--selectable .muka-data-table__td--m-secondary {
+    grid-column: 3;
+  }
+
+  .muka-data-table--responsive.muka-data-table--selectable .muka-data-table__td--action {
+    grid-column: 4;
+  }
 }