@trimble-oss/moduswebcomponents/collection/components/modus-wc-table/modus-wc-table.css

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

/**
* This component uses Tailwind CSS and DaisyUI.
* Only add styles here that should not be applied by Tailwind, Daisy, or the theme.
*/
:host {
  display: block;
  /* Reset to make the table and its contents look like they do in a normal DOM context. */
}
:host p,
:host h1,
:host h2,
:host h3,
:host h4,
:host h5,
:host h6 {
  margin: 0;
}

.table-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

modus-wc-table .modus-wc-table.modus-wc-table-zebra tbody tr:nth-child(2n) {
  background-color: var(--modus-wc-color-base-page);
}
modus-wc-table .modus-wc-table:where(thead, tfoot) {
  background-color: var(--modus-wc-color-base-100);
}
modus-wc-table .modus-wc-table:where(thead tr,
tbody tr:not(:last-child),
tbody tr:first-child:last-child) {
  border-bottom-color: var(--modus-wc-color-base-100);
}

modus-wc-table .modus-wc-overflow-x-auto {
  border-radius: var(--modus-wc-border-radius-table);
  overflow-x: visible;
}

[data-theme=modus-classic-light] modus-wc-table .modus-wc-overflow-x-auto,
[data-theme=modus-classic-dark] modus-wc-table .modus-wc-overflow-x-auto {
  border-radius: 0;
}
[data-theme=modus-classic-light] modus-wc-table .modus-wc-table,
[data-theme=modus-classic-dark] modus-wc-table .modus-wc-table {
  border-collapse: collapse;
  border-radius: 0;
}
[data-theme=modus-classic-light] modus-wc-table .modus-wc-table th,
[data-theme=modus-classic-light] modus-wc-table .modus-wc-table td,
[data-theme=modus-classic-dark] modus-wc-table .modus-wc-table th,
[data-theme=modus-classic-dark] modus-wc-table .modus-wc-table td {
  border: 1px solid #6a6e79;
}

/* Classic theme specific hover styles */
[data-theme=modus-classic-light] th {
  background-color: #f1f1f6 !important;
  color: #464b52 !important;
}
[data-theme=modus-classic-light] .modus-wc-table.modus-wc-table-hover tbody tr:hover {
  background-color: #dcedf9 !important;
}

[data-theme=modus-classic-dark] th {
  background-color: #464b52 !important;
  color: #e0e1e9 !important;
}
[data-theme=modus-classic-dark] .modus-wc-table.modus-wc-table-hover tbody tr:hover {
  background-color: #464b52 !important;
}

[data-theme=connect-light] modus-wc-table,
[data-theme=connect-dark] modus-wc-table {
  border: none;
  box-shadow: none;
}
[data-theme=connect-light] modus-wc-table .modus-wc-overflow-x-auto,
[data-theme=connect-dark] modus-wc-table .modus-wc-overflow-x-auto {
  border: none;
  border-radius: 0;
}
[data-theme=connect-light] modus-wc-table .modus-wc-table,
[data-theme=connect-dark] modus-wc-table .modus-wc-table {
  border: none;
  border-collapse: collapse;
  border-radius: 0;
}
[data-theme=connect-light] modus-wc-table .modus-wc-table th,
[data-theme=connect-light] modus-wc-table .modus-wc-table td,
[data-theme=connect-dark] modus-wc-table .modus-wc-table th,
[data-theme=connect-dark] modus-wc-table .modus-wc-table td {
  border-right: 1px solid transparent;
}
[data-theme=connect-light] modus-wc-table th,
[data-theme=connect-dark] modus-wc-table th {
  background-color: var(--modus-wc-color-base-100) !important;
  border: none !important;
  color: var(--modus-wc-color-base-content-low-contrast) !important;
}
[data-theme=connect-light] modus-wc-table td,
[data-theme=connect-dark] modus-wc-table td {
  border: none !important;
  border-bottom: 1px solid var(--modus-wc-color-base-100);
}
[data-theme=connect-light] modus-wc-table .modus-wc-table.modus-wc-table-hover tbody tr:hover,
[data-theme=connect-dark] modus-wc-table .modus-wc-table.modus-wc-table-hover tbody tr:hover {
  background-color: var(--modus-wc-color-base-100) !important;
}

.modus-wc-table {
  width: 100%;
}
.modus-wc-table th {
  background-color: var(--modus-wc-color-alt-white);
  color: var(--modus-wc-color-gray-dark);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.75rem;
  text-align: left;
  vertical-align: middle;
}
.modus-wc-table th.sortable {
  cursor: pointer;
  padding-right: 1.5rem;
  position: relative;
}
.modus-wc-table th.sortable .sort-icon {
  color: var(--modus-wc-color-blue);
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.modus-wc-table th.sortable:hover {
  background-color: var(--modus-wc-color-alt-silver-light);
}
.modus-wc-table td {
  padding: 0.75rem;
  vertical-align: middle;
}
.modus-wc-table {
  /* Apply styles based on table density */
}
.modus-wc-table.modus-wc-table-density-compact td,
.modus-wc-table.modus-wc-table-density-compact th {
  padding: 0.5rem;
}
.modus-wc-table.modus-wc-table-density-relaxed td,
.modus-wc-table.modus-wc-table-density-relaxed th {
  padding: 1.25rem 1rem;
}
.modus-wc-table.modus-wc-table-density-comfortable td,
.modus-wc-table.modus-wc-table-density-comfortable th {
  padding: 1rem;
}
.modus-wc-table {
  /* Apply zebra striping styles */
}
.modus-wc-table.modus-wc-table-zebra tbody tr:nth-child(odd) {
  background-color: var(--modus-wc-color-base-100);
}
.modus-wc-table {
  /* Apply hover effect when enabled */
}
.modus-wc-table.modus-wc-table-hover tbody tr {
  transition: background-color 0.15s ease-in-out;
}
.modus-wc-table.modus-wc-table-hover tbody tr:hover {
  background-color: var(--modus-wc-color-base-100);
  color: var(--modus-wc-color-primary);
}
.modus-wc-table.modus-wc-table-hover tbody tr:focus {
  background-color: var(--modus-wc-color-base-200);
  color: var(--modus-wc-color-primary);
}
.modus-wc-table.modus-wc-table-hover tbody tr:active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
.modus-wc-table.modus-wc-table-hover tbody tr-selected {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
.modus-wc-table.modus-wc-table-hover tbody tr-active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
.modus-wc-table.modus-wc-table-hover tbody tr-open {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
.modus-wc-table.modus-wc-table-hover tbody tr.selected {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
.modus-wc-table.modus-wc-table-hover tbody tr.active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
.modus-wc-table.modus-wc-table-hover tbody tr-disabled:hover {
  background-color: inherit;
}
.modus-wc-table.modus-wc-table-hover tbody tr--active {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
.modus-wc-table.modus-wc-table-hover tbody tr--selected {
  background-color: var(--modus-wc-color-primary-pale);
  color: var(--modus-wc-color-primary);
}
.modus-wc-table.modus-wc-table-hover tbody tr:checked {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
.modus-wc-table.modus-wc-table-hover tbody tr.checked {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
.modus-wc-table.modus-wc-table-hover tbody tr-checked {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
.modus-wc-table.modus-wc-table-hover tbody tr.pressed {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
.modus-wc-table.modus-wc-table-hover tbody tr-pressed {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
.modus-wc-table.modus-wc-table-hover tbody tr[aria-pressed=true] {
  background-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}
.modus-wc-table.modus-wc-table-hover tbody tr:hover, .modus-wc-table.modus-wc-table-hover tbody tr.selected {
  color: inherit;
}
.modus-wc-table {
  /* Cursor styles based on interactivity - apply to cells, not rows */
  /* Editable cells should show pointer cursor */
}
.modus-wc-table td.editable-cell {
  cursor: pointer;
}
.modus-wc-table .no-data-message {
  color: var(--modus-wc-color-gray);
  font-style: italic;
  padding: 1.5rem;
  text-align: center;
}

/* Pagination Styles */
.pagination-container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 0.5rem 0;
}
@media (width <= 768px) {
  .pagination-container {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }
}

.pagination-info {
  color: var(--modus-wc-color-gray-dark);
  font-size: 0.875rem;
}

.pagination-controls {
  align-items: center;
  display: flex;
}

.page-size-selector,
.modus-wc-table-page-size-selector {
  align-items: center;
  color: var(--modus-wc-color-gray-dark);
  display: flex;
  font-size: 0.875rem;
  gap: 0.5rem;
}
.page-size-selector select,
.modus-wc-table-page-size-selector select {
  background-color: var(--modus-wc-color-alt-white);
  border: 1px solid var(--modus-wc-color-alt-silver);
  border-radius: 0.25rem;
  color: var(--modus-wc-color-gray-dark);
  font-size: 0.875rem;
  height: 2rem;
  min-width: 4rem;
  padding: 0 0.5rem;
}
.page-size-selector select:focus,
.modus-wc-table-page-size-selector select:focus {
  border-color: var(--modus-wc-color-blue);
  box-shadow: 0 0 0 2px var(--modus-wc-color-blue-light);
  outline: none;
}

tr.selected {
  background-color: var(--modus-wc-color-primary-pale);
  color: inherit;
}

/* === Editing cell overrides === */
.modus-wc-table td.editing {
  padding-bottom: 0.25rem;
  /* Reduce vertical padding so editors like autocomplete do not push the row taller */
  padding-top: 0.25rem;
}

/* Ensure any editor injected into the cell stretches to the full cell width but
   does not add extra margins that could affect the row height. */
.modus-wc-table td.editing > * {
  margin: 0; /* strip default margins (e.g., Host blocks) */
  width: 100%;
}