@mmlogic/components 0.4.2 → 0.5.0

package/dist/collection/components/table/mrd-table/mrd-table.css

@@ -1,27 +1,18 @@
-@charset "UTF-8";
 :host {
   display: block;
   width: 100%;
 }
 
-/* ── Scroll container (paginated mode) ─────────────────────────────────── */
+.mrd-table {
+  overflow-x: auto;
+}
 .mrd-table__scroll {
   overflow-y: auto;
   overflow-x: auto;
   border: 1px solid var(--mrd-border-color);
   border-radius: var(--mrd-border-radius);
-  /* Voorkomt dat de browser scrollTop automatisch aanpast wanneer de
-     top-spacer groeit (scroll anchoring feedbackloop). */
   overflow-anchor: none;
 }
-
-/* ── Inner wrapper: horizontal scroll in non-paginated mode ────────────── */
-/* Only used in non-paginated path; paginated mode scrolls via .mrd-table__scroll */
-.mrd-table {
-  overflow-x: auto;
-}
-
-/* ── Table ─────────────────────────────────────────────────────────────── */
 .mrd-table__table {
   width: auto;
   min-width: 100%;
@@ -29,14 +20,9 @@
   font-size: var(--mrd-font-size-sm);
   color: var(--mrd-color-neutral-900);
 }
-
-/* When table-layout: fixed is applied (after col widths are locked), allow
-   horizontal overflow so the scroll container can scroll. */
 .mrd-table__scroll .mrd-table__table {
   min-width: max-content;
 }
-
-/* ── Sticky header ─────────────────────────────────────────────────────── */
 .mrd-table__header {
   position: sticky;
   top: 0;
@@ -52,39 +38,34 @@
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
-
 .mrd-table__header--sortable {
   cursor: pointer;
   user-select: none;
 }
-
 .mrd-table__header--sortable:hover {
   background: var(--mrd-color-neutral-50);
   color: var(--mrd-color-neutral-800);
 }
-
-.mrd-table__header--sorted-asc,
-.mrd-table__header--sorted-desc {
+.mrd-table__header--sorted-asc, .mrd-table__header--sorted-desc {
+  color: var(--mrd-color-primary);
+  border-bottom-color: var(--mrd-color-primary);
+}
+.mrd-table__header--filtered {
   color: var(--mrd-color-primary);
   border-bottom-color: var(--mrd-color-primary);
 }
-
 .mrd-table__header-label {
   margin-right: var(--mrd-space-1);
 }
-
 .mrd-table__sort-icon {
   font-size: 0.85rem;
   opacity: 0.4;
   vertical-align: middle;
 }
-
-.mrd-table__header--sorted-asc .mrd-table__sort-icon,
-.mrd-table__header--sorted-desc .mrd-table__sort-icon {
+.mrd-table__header--sorted-asc .mrd-table__sort-icon, .mrd-table__header--sorted-desc .mrd-table__sort-icon {
   opacity: 1;
   color: var(--mrd-color-primary);
 }
-
 .mrd-table__filter-icon {
   display: inline-flex;
   align-items: center;
@@ -92,55 +73,45 @@
   margin-left: var(--mrd-space-1);
   color: var(--mrd-color-primary);
 }
-
-/* ── Data rows ─────────────────────────────────────────────────────────── */
-/* Background is set via inline style based on absolute row index,
-   so zebra striping stays correct even with virtual spacer rows. */
 .mrd-table__row {
   border-bottom: 1px solid var(--mrd-border-color);
 }
-
-/* !important overrides the inline zebra background on hover */
 .mrd-table__row:hover {
   background: var(--mrd-color-neutral-200) !important;
 }
-
 .mrd-table__row--clickable {
   cursor: pointer;
 }
-
-/* ── Spacer rows (virtual scroll padding above/below render window) ─────── */
+.mrd-table__row--loading {
+  background: transparent;
+}
+.mrd-table__row--failed {
+  background: transparent;
+}
 .mrd-table__spacer {
   border: none;
 }
-
 .mrd-table__spacer td {
   padding: 0;
   border: none;
 }
-
-/* ── Cells ─────────────────────────────────────────────────────────────── */
 .mrd-table__cell {
   padding: var(--mrd-space-2) var(--mrd-space-4);
   vertical-align: top;
   white-space: nowrap;
 }
-
 .mrd-table__cell--numeric {
   text-align: right;
   font-variant-numeric: tabular-nums;
 }
-
-/* ── Loading placeholder row ───────────────────────────────────────────── */
-.mrd-table__row--loading {
-  background: transparent;
-}
-
 .mrd-table__cell--placeholder {
   padding: var(--mrd-space-2) var(--mrd-space-4);
   border-bottom: 1px solid var(--mrd-border-color);
 }
-
+.mrd-table__cell--failed {
+  padding: var(--mrd-space-2) var(--mrd-space-4);
+  border-bottom: 1px solid var(--mrd-border-color);
+}
 .mrd-table__placeholder-bar {
   display: block;
   height: 0.75rem;
@@ -150,25 +121,6 @@
   background-size: 200% 100%;
   animation: mrd-shimmer 1.4s ease infinite;
 }
-
-@keyframes mrd-shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-/* ── Failed page-load row ─────────────────────────────────────────────── */
-.mrd-table__row--failed {
-  background: transparent;
-}
-
-.mrd-table__cell--failed {
-  padding: var(--mrd-space-2) var(--mrd-space-4);
-  border-bottom: 1px solid var(--mrd-border-color);
-}
-
 .mrd-table__retry-button {
   border: none;
   background: none;
@@ -178,22 +130,17 @@
   cursor: pointer;
   text-decoration: underline;
 }
-
-/* ── Toolbar ───────────────────────────────────────────────────────────── */
 .mrd-table__toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-bottom: var(--mrd-space-2);
 }
-
-.mrd-table__toolbar-left,
-.mrd-table__toolbar-right {
+.mrd-table__toolbar-left, .mrd-table__toolbar-right {
   display: flex;
   gap: var(--mrd-space-2);
   align-items: center;
 }
-
 .mrd-table__toolbar-center {
   flex: 1;
   display: flex;
@@ -201,14 +148,11 @@
   align-items: center;
   gap: var(--mrd-space-1);
 }
-
-/* ── View switcher ───────────────────────────────────────────────────────── */
 .mrd-table__view-switcher {
   display: flex;
   align-items: center;
   gap: var(--mrd-space-1);
 }
-
 .mrd-table__view-arrow {
   background: none;
   border: none;
@@ -218,15 +162,12 @@
   font-size: var(--mrd-font-size-xs);
   line-height: 1;
 }
-
 .mrd-table__view-arrow:hover {
   color: var(--mrd-color-neutral-800);
 }
-
 .mrd-table__view-title-wrap {
   position: relative;
 }
-
 .mrd-table__view-title {
   font-size: var(--mrd-font-size-sm);
   font-weight: 600;
@@ -242,11 +183,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
 .mrd-table__view-title:hover {
   color: var(--mrd-color-primary);
 }
-
 .mrd-table__view-popover {
   position: absolute;
   top: calc(100% + var(--mrd-space-1));
@@ -260,7 +199,6 @@
   min-width: 160px;
   padding: var(--mrd-space-1) 0;
 }
-
 .mrd-table__view-popover-item {
   display: block;
   width: 100%;
@@ -274,16 +212,13 @@
   color: var(--mrd-color-neutral-700);
   white-space: nowrap;
 }
-
 .mrd-table__view-popover-item:hover {
   background: var(--mrd-color-neutral-50);
 }
-
 .mrd-table__view-popover-item--active {
   font-weight: 600;
   color: var(--mrd-color-primary);
 }
-
 .mrd-table__action {
   position: relative;
   display: inline-flex;
@@ -299,46 +234,39 @@
   color: var(--mrd-color-neutral-400);
   transition: background-color 0.15s, border-color 0.15s, color 0.15s;
 }
-
 .mrd-table__action:hover {
   background-color: var(--mrd-color-neutral-100);
   border-color: var(--mrd-color-neutral-300);
   color: var(--mrd-color-neutral-700);
 }
-
+.mrd-table__action:hover .mrd-table__action-tooltip {
+  display: block;
+}
 .mrd-table__action:disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
-
-/* Primary: slightly more prominent than regular at rest; primary fill on hover */
 .mrd-table__action--primary {
   color: var(--mrd-color-neutral-500);
 }
-
 .mrd-table__action--primary:hover {
   background: var(--mrd-color-primary);
   border-color: var(--mrd-color-primary);
   color: var(--mrd-color-white);
 }
-
 .mrd-table__action--danger {
   color: var(--mrd-color-error);
 }
-
 .mrd-table__action--danger:hover {
   background-color: var(--mrd-color-error-light, #fef2f2);
   border-color: var(--mrd-color-error);
 }
-
 .mrd-table__action-icon {
   width: 1.25rem;
   height: 1.25rem;
   pointer-events: none;
   fill: currentColor;
 }
-
-/* CSS tooltip — appears above the button on hover */
 .mrd-table__action-tooltip {
   display: none;
   position: absolute;
@@ -354,16 +282,9 @@
   pointer-events: none;
   z-index: 10;
 }
-
-.mrd-table__action:hover .mrd-table__action-tooltip {
-  display: block;
-}
-
-/* ── Create-type picker ──────────────────────────────────────────────────── */
 .mrd-table__create-picker-wrap {
   position: relative;
 }
-
 .mrd-table__create-picker {
   position: absolute;
   right: 0;
@@ -376,7 +297,6 @@
   min-width: 10rem;
   padding: var(--mrd-space-1) 0;
 }
-
 .mrd-table__create-picker-item {
   display: block;
   width: 100%;
@@ -389,26 +309,20 @@
   font-family: var(--mrd-font-family);
   color: var(--mrd-color-neutral-800);
 }
-
 .mrd-table__create-picker-item:hover {
   background: var(--mrd-color-neutral-50);
   color: var(--mrd-color-neutral-900);
 }
-
-/* ── Filter toggle active state ────────────────────────────────────────── */
 .mrd-table__filter-toggle--active {
   background: var(--mrd-color-primary);
   border-color: var(--mrd-color-primary);
   color: var(--mrd-color-white);
 }
-
 .mrd-table__filter-toggle--active:hover {
   background: var(--mrd-color-primary-dark, var(--mrd-color-primary));
   border-color: var(--mrd-color-primary-dark, var(--mrd-color-primary));
   color: var(--mrd-color-white);
 }
-
-/* Badge showing count of active filters */
 .mrd-table__filter-badge {
   position: absolute;
   top: -6px;
@@ -425,14 +339,6 @@
   text-align: center;
   pointer-events: none;
 }
-
-/* ── Header: filtered indicator ─────────────────────────────────────────── */
-.mrd-table__header--filtered {
-  color: var(--mrd-color-primary);
-  border-bottom-color: var(--mrd-color-primary);
-}
-
-/* ── Filter popup ───────────────────────────────────────────────────────── */
 .mrd-table__filter-popup {
   position: fixed;
   width: 280px;
@@ -443,7 +349,6 @@
   z-index: var(--mrd-z-dropdown, 200);
   font-size: var(--mrd-font-size-sm);
 }
-
 .mrd-table__filter-popup-header {
   display: flex;
   align-items: center;
@@ -451,13 +356,11 @@
   padding: var(--mrd-space-2) var(--mrd-space-3);
   border-bottom: 1px solid var(--mrd-border-color);
 }
-
 .mrd-table__filter-popup-title {
   font-weight: var(--mrd-font-weight-medium);
   color: var(--mrd-color-neutral-800);
   font-size: var(--mrd-font-size-sm);
 }
-
 .mrd-table__filter-close {
   background: transparent;
   border: none;
@@ -468,16 +371,13 @@
   border-radius: 3px;
   line-height: 1;
 }
-
 .mrd-table__filter-close:hover {
   background: var(--mrd-color-neutral-100);
   color: var(--mrd-color-neutral-800);
 }
-
 .mrd-table__filter-section {
   padding: var(--mrd-space-2) var(--mrd-space-3);
 }
-
 .mrd-table__filter-section-label {
   font-size: var(--mrd-font-size-xs);
   font-weight: var(--mrd-font-weight-medium);
@@ -486,12 +386,10 @@
   color: var(--mrd-color-neutral-500);
   margin-bottom: var(--mrd-space-2);
 }
-
 .mrd-table__filter-sort-buttons {
   display: flex;
   gap: var(--mrd-space-2);
 }
-
 .mrd-table__filter-sort-btn {
   flex: 1;
   padding: var(--mrd-space-1) var(--mrd-space-2);
@@ -502,32 +400,25 @@
   font-size: var(--mrd-font-size-xs);
   color: var(--mrd-color-neutral-700);
 }
-
 .mrd-table__filter-sort-btn:hover {
   background: var(--mrd-color-neutral-100);
 }
-
 .mrd-table__filter-sort-btn--active {
   background: var(--mrd-color-primary);
   border-color: var(--mrd-color-primary);
   color: var(--mrd-color-white);
 }
-
 .mrd-table__filter-divider {
   height: 1px;
   background: var(--mrd-border-color);
   margin: 0;
 }
-
-/* ── Filter editors ─────────────────────────────────────────────────────── */
 .mrd-table__filter-editor {
   display: flex;
   flex-direction: column;
   gap: var(--mrd-space-2);
 }
-
-.mrd-table__filter-select,
-.mrd-table__filter-input {
+.mrd-table__filter-select, .mrd-table__filter-input {
   width: 100%;
   padding: var(--mrd-space-1) var(--mrd-space-2);
   border: 1px solid var(--mrd-border-color);
@@ -537,54 +428,43 @@
   background: var(--mrd-color-white);
   box-sizing: border-box;
 }
-
-.mrd-table__filter-select:focus,
-.mrd-table__filter-input:focus {
+.mrd-table__filter-select:focus, .mrd-table__filter-input:focus {
   outline: none;
   border-color: var(--mrd-color-primary);
   box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
 }
-
 .mrd-table__filter-range {
   display: flex;
   align-items: center;
   gap: var(--mrd-space-1);
 }
-
 .mrd-table__filter-range .mrd-table__filter-input {
   flex: 1;
   min-width: 0;
 }
-
-.mrd-table__filter-range-sep {
-  color: var(--mrd-color-neutral-400);
-  flex-shrink: 0;
-}
-
 .mrd-table__filter-range--stacked {
   flex-direction: column;
   align-items: stretch;
   gap: var(--mrd-space-2);
 }
-
+.mrd-table__filter-range-sep {
+  color: var(--mrd-color-neutral-400);
+  flex-shrink: 0;
+}
 .mrd-table__filter-range-label {
   font-size: var(--mrd-font-size-xs);
   color: var(--mrd-color-neutral-500);
   margin-bottom: 2px;
 }
-
-/* Radio group */
 .mrd-table__filter-radio-group {
   display: flex;
   flex-direction: column;
   gap: var(--mrd-space-1);
 }
-
 .mrd-table__filter-radio-group--inline {
   flex-direction: row;
   gap: var(--mrd-space-3);
 }
-
 .mrd-table__filter-radio-label {
   display: flex;
   align-items: center;
@@ -593,8 +473,6 @@
   font-size: var(--mrd-font-size-sm);
   color: var(--mrd-color-neutral-800);
 }
-
-/* List (enum) checkboxes */
 .mrd-table__filter-list {
   display: flex;
   flex-direction: column;
@@ -602,13 +480,11 @@
   max-height: 180px;
   overflow-y: auto;
 }
-
 .mrd-table__filter-list-controls {
   display: flex;
   gap: var(--mrd-space-2);
   margin-bottom: var(--mrd-space-1);
 }
-
 .mrd-table__filter-list-btn {
   font-size: var(--mrd-font-size-xs);
   color: var(--mrd-color-primary);
@@ -618,7 +494,6 @@
   padding: 0;
   text-decoration: underline;
 }
-
 .mrd-table__filter-checkbox-label {
   display: flex;
   align-items: center;
@@ -627,15 +502,12 @@
   font-size: var(--mrd-font-size-sm);
   color: var(--mrd-color-neutral-800);
 }
-
 .mrd-table__filter-no-support {
   font-size: var(--mrd-font-size-sm);
   color: var(--mrd-color-neutral-500);
   margin: 0;
   font-style: italic;
 }
-
-/* ── Popup footer ───────────────────────────────────────────────────────── */
 .mrd-table__filter-popup-footer {
   display: flex;
   justify-content: flex-end;
@@ -643,7 +515,6 @@
   padding: var(--mrd-space-2) var(--mrd-space-3);
   border-top: 1px solid var(--mrd-border-color);
 }
-
 .mrd-table__filter-btn {
   padding: var(--mrd-space-1) var(--mrd-space-3);
   border-radius: var(--mrd-border-radius);
@@ -651,32 +522,25 @@
   font-size: var(--mrd-font-size-sm);
   cursor: pointer;
 }
-
 .mrd-table__filter-btn--clear {
   background: transparent;
   color: var(--mrd-color-neutral-600);
 }
-
 .mrd-table__filter-btn--clear:hover {
   background: var(--mrd-color-neutral-100);
 }
-
 .mrd-table__filter-btn--apply {
   background: var(--mrd-color-primary);
   border-color: var(--mrd-color-primary);
   color: var(--mrd-color-white);
 }
-
 .mrd-table__filter-btn--apply:hover {
   background: var(--mrd-color-primary-dark, var(--mrd-color-primary));
   border-color: var(--mrd-color-primary-dark, var(--mrd-color-primary));
 }
-
-/* ── Totals row ─────────────────────────────────────────────────────────── */
 .mrd-table__totals-row {
   border-top: 2px solid var(--mrd-border-color);
 }
-
 .mrd-table__totals-cell {
   position: sticky;
   bottom: 0;
@@ -688,20 +552,15 @@
   white-space: nowrap;
   border-top: 2px solid var(--mrd-border-color);
 }
-
 .mrd-table__totals-cell--numeric {
   text-align: right;
 }
-
-/* ── Pagination footer ─────────────────────────────────────────────────── */
 .mrd-table__footer {
   padding: var(--mrd-space-1) var(--mrd-space-2);
   font-size: var(--mrd-font-size-xs);
   color: var(--mrd-color-neutral-500);
   text-align: right;
 }
-
-/* ── Empty state ───────────────────────────────────────────────────────── */
 .mrd-table__empty {
   padding: var(--mrd-space-4) var(--mrd-space-3);
   color: var(--mrd-color-neutral-500);
@@ -709,8 +568,6 @@
   text-align: center;
   margin: 0;
 }
-
-/* ── File / image download cell ─────────────────────────────────────────── */
 .mrd-table__file-btn {
   display: inline-flex;
   align-items: center;
@@ -725,19 +582,15 @@
   max-width: 100%;
   overflow: hidden;
 }
-
 .mrd-table__file-btn:hover {
   text-decoration: underline;
   color: var(--mrd-color-primary-dark);
 }
-
 .mrd-table__file-icon {
   flex-shrink: 0;
   width: 1rem;
   height: 1rem;
 }
-
-/* ── TEXTBLOCK expand button ────────────────────────────────────────────── */
 .mrd-table__textblock-btn {
   display: inline;
   background: none;
@@ -750,12 +603,9 @@
   line-height: inherit;
   vertical-align: middle;
 }
-
 .mrd-table__textblock-btn:hover {
   color: var(--mrd-color-primary-dark);
 }
-
-/* ── TEXTBLOCK modal ────────────────────────────────────────────────────── */
 .mrd-table__modal-backdrop {
   position: fixed;
   inset: 0;
@@ -765,7 +615,6 @@
   align-items: center;
   justify-content: center;
 }
-
 .mrd-table__modal {
   background: #fff;
   border-radius: var(--mrd-radius-md, 0.5rem);
@@ -776,7 +625,6 @@
   position: relative;
   box-shadow: var(--mrd-shadow-lg);
 }
-
 .mrd-table__modal-close {
   position: absolute;
   top: var(--mrd-space-3);
@@ -789,11 +637,9 @@
   color: var(--mrd-color-text-muted, #6b7280);
   padding: 0;
 }
-
 .mrd-table__modal-close:hover {
   color: var(--mrd-color-text, #111827);
 }
-
 .mrd-table__modal-text {
   margin: 0;
   padding-right: var(--mrd-space-6);
@@ -802,7 +648,6 @@
   font-size: var(--mrd-font-size-sm);
   line-height: 1.6;
 }
-
 .mrd-table__json-preview {
   font-family: var(--mrd-font-family-mono);
   font-size: var(--mrd-font-size-xs);
@@ -813,7 +658,6 @@
   max-width: calc(100% - 1.5rem);
   vertical-align: middle;
 }
-
 .mrd-table__modal-json {
   margin: 0;
   padding-right: var(--mrd-space-6);
@@ -824,4 +668,13 @@
   line-height: 1.6;
   background: none;
   border: none;
+}
+
+@keyframes mrd-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
 }