comins-table 0.1.6 → 0.1.8

package/styles.css

@@ -21,6 +21,8 @@
   --comins-table-drop-valid-background: rgba(37, 99, 235, 0.22);
   --comins-table-focus: rgba(16, 185, 129, 0.28);
   --comins-table-foreground: #111827;
+  --comins-table-group-row-background: #d1d5db;
+  --comins-table-group-row-color: var(--comins-table-foreground);
   --comins-table-header-background: var(--comins-table-accent);
   --comins-table-header-border: var(--comins-table-row-border);
   --comins-table-header-color: var(--comins-table-accent-foreground);
@@ -48,6 +50,11 @@
   --comins-table-scrollbar-track: var(--comins-table-surface-muted);
   --comins-table-surface: #ffffff;
   --comins-table-surface-muted: #f6fcfa;
+  --comins-table-tooltip-danger-background: #7f1d1d;
+  --comins-table-tooltip-danger-border: rgba(254, 202, 202, 0.28);
+  --comins-table-tooltip-danger-color: #ffffff;
+  --comins-table-tooltip-danger-muted: #fecaca;
+  --comins-table-tooltip-shadow: 0 12px 30px rgba(69, 10, 10, 0.28);
   --comins-table-component-accent: var(--comins-table-accent);
   --comins-table-component-accent-foreground: var(--comins-table-accent-foreground);
   --comins-table-component-accent-strong: var(--comins-table-accent-strong);
@@ -116,6 +123,8 @@
   --comins-table-drop-marker: #34d399;
   --comins-table-focus: rgba(45, 212, 191, 0.26);
   --comins-table-foreground: #effcf7;
+  --comins-table-group-row-background: #334155;
+  --comins-table-group-row-color: #f8fafc;
   --comins-table-header-background: #064e3b;
   --comins-table-header-border: var(--comins-table-row-border);
   --comins-table-header-color: #ecfdf5;
@@ -308,6 +317,115 @@
   min-width: 0;
 }
 
+.comins-table__group-row {
+  background: var(--comins-table-group-row-background);
+  color: var(--comins-table-group-row-color);
+}
+
+.comins-table__group-row > .comins-table__group-cell {
+  background: inherit;
+  color: inherit;
+  font-weight: 600;
+  text-align: left;
+}
+
+.comins-row-group-cell-content {
+  align-items: center;
+  display: flex;
+  gap: 4px;
+  min-width: 0;
+}
+
+.comins-row-group-content {
+  align-items: center;
+  display: flex;
+  gap: 10px;
+  min-width: 0;
+}
+
+.comins-row-group-count,
+.comins-row-group-aggregate {
+  color: var(--comins-table-muted);
+  flex: 0 0 auto;
+  font-size: 0.875em;
+  font-weight: 500;
+}
+
+.comins-row-group-drag-handle {
+  color: var(--comins-table-accent-strong);
+  cursor: grab;
+  flex: 0 0 24px;
+}
+
+.comins-row-group-drag-handle:active {
+  cursor: grabbing;
+}
+
+.comins-row-group-expander {
+  color: var(--comins-table-accent-strong);
+  flex: 0 0 24px;
+}
+
+.comins-row-group-expander .comins-table-icon {
+  transform: rotate(0deg);
+  transition: transform 160ms ease;
+}
+
+.comins-row-group-expander[aria-expanded="true"] .comins-table-icon {
+  transform: rotate(90deg);
+}
+
+.comins-row-group-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.comins-table__group-row[data-comins-group-drag-source="true"] > .comins-table__group-cell {
+  opacity: 0.68;
+}
+
+.comins-table__group-row[data-comins-group-drop-position="before"] > .comins-table__group-cell {
+  box-shadow: inset 0 3px var(--comins-table-drop-marker);
+}
+
+.comins-table__group-row[data-comins-group-drop-position="after"] > .comins-table__group-cell {
+  box-shadow: inset 0 -3px var(--comins-table-drop-marker);
+}
+
+.comins-table__group-row[data-comins-group-drop-valid="false"] > .comins-table__group-cell {
+  background: var(--comins-table-drop-invalid-background);
+}
+
+.comins-table__body-viewport[data-comins-group-drop-valid="true"],
+.comins-table__body-viewport[data-comins-row-drop-valid="true"] {
+  box-shadow: inset 0 0 0 3px var(--comins-table-drop-marker);
+}
+
+.comins-table__body-viewport[data-comins-group-drop-valid="false"],
+.comins-table__body-viewport[data-comins-row-drop-valid="false"] {
+  box-shadow: inset 0 0 0 3px var(--comins-table-drop-invalid);
+}
+
+.comins-table[data-comins-transfer-rejected="true"] {
+  outline: 1px solid var(--comins-table-drop-invalid);
+  outline-offset: -1px;
+}
+
+.comins-table__group-row[data-comins-row-drop-valid="true"] > .comins-table__group-cell {
+  background: var(--comins-table-drop-valid-background);
+}
+
+.comins-table__group-row[data-comins-row-drop-valid="false"] > .comins-table__group-cell {
+  background: var(--comins-table-drop-invalid-background);
+}
+
+.comins-row-group-column-label {
+  font-weight: 500;
+  opacity: 0.72;
+}
+
 .comins-row-detail-expander {
   color: var(--comins-table-accent-strong);
 }
@@ -369,31 +487,57 @@
 }
 
 .comins-table__body-viewport[data-horizontal-overflow="true"] {
-  overflow-x: scroll;
+  overflow-x: hidden;
   overflow-y: scroll;
   scrollbar-gutter: stable;
 }
 
-.comins-table__body-viewport::-webkit-scrollbar {
+.comins-table__horizontal-scrollbar {
+  border-top: 1px solid var(--comins-table-row-border);
+  box-sizing: border-box;
+  flex: 0 0 12px;
+  max-width: 100%;
+  min-height: 12px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scrollbar-color: var(--comins-table-scrollbar-thumb) var(--comins-table-scrollbar-track);
+}
+
+.comins-table__horizontal-scrollbar-content {
+  height: 1px;
+  pointer-events: none;
+}
+
+.comins-table__horizontal-range-spacer {
+  height: 0;
+  pointer-events: none;
+}
+
+.comins-table__body-viewport::-webkit-scrollbar,
+.comins-table__horizontal-scrollbar::-webkit-scrollbar {
   height: 12px;
   width: 12px;
 }
 
-.comins-table__body-viewport::-webkit-scrollbar-track {
+.comins-table__body-viewport::-webkit-scrollbar-track,
+.comins-table__horizontal-scrollbar::-webkit-scrollbar-track {
   background: var(--comins-table-scrollbar-track);
 }
 
-.comins-table__body-viewport::-webkit-scrollbar-thumb {
+.comins-table__body-viewport::-webkit-scrollbar-thumb,
+.comins-table__horizontal-scrollbar::-webkit-scrollbar-thumb {
   background: var(--comins-table-scrollbar-thumb);
   border: 3px solid var(--comins-table-scrollbar-track);
   border-radius: 999px;
 }
 
-.comins-table__body-viewport::-webkit-scrollbar-thumb:hover {
+.comins-table__body-viewport::-webkit-scrollbar-thumb:hover,
+.comins-table__horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
   background: var(--comins-table-accent-strong);
 }
 
-.comins-table__body-viewport::-webkit-scrollbar-corner {
+.comins-table__body-viewport::-webkit-scrollbar-corner,
+.comins-table__horizontal-scrollbar::-webkit-scrollbar-corner {
   background: var(--comins-table-scrollbar-corner);
 }
 
@@ -692,6 +836,94 @@
   margin-left: 6px;
 }
 
+.comins-column-filter {
+  display: inline-flex;
+  flex: 0 0 24px;
+  overflow: visible;
+  position: relative;
+}
+
+.comins-column-filter__trigger {
+  border-radius: 4px;
+  color: var(--comins-table-header-color);
+  opacity: 0.72;
+}
+
+.comins-column-filter__trigger:hover,
+.comins-column-filter__trigger:focus-visible,
+.comins-column-filter__trigger[data-active="true"] {
+  background: color-mix(in srgb, var(--comins-table-header-color) 18%, transparent);
+  opacity: 1;
+}
+
+.comins-column-filter__popover {
+  background: var(--comins-table-component-surface);
+  border: 1px solid var(--comins-table-component-border);
+  border-radius: 6px;
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
+  color: var(--comins-table-component-foreground);
+  display: grid;
+  font-size: 12px;
+  font-weight: 400;
+  gap: 10px;
+  min-width: 260px;
+  padding: 12px;
+  position: fixed;
+  text-align: left;
+  z-index: 9999;
+}
+
+.comins-column-filter__title {
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.comins-column-filter__field {
+  color: var(--comins-table-component-muted);
+  display: grid;
+  gap: 4px;
+}
+
+.comins-column-filter__field > input,
+.comins-column-filter__field > select {
+  background: var(--comins-table-component-surface);
+  border: 1px solid var(--comins-table-component-border);
+  border-radius: 4px;
+  color: var(--comins-table-component-foreground);
+  font: inherit;
+  min-height: 30px;
+  padding: 4px 8px;
+  width: 100%;
+}
+
+.comins-column-filter__field > input:focus-visible,
+.comins-column-filter__field > select:focus-visible {
+  box-shadow: 0 0 0 3px var(--comins-table-component-focus);
+  outline: none;
+}
+
+.comins-column-filter__clear {
+  background: var(--comins-table-component-surface-muted);
+  border: 1px solid var(--comins-table-component-border);
+  border-radius: 4px;
+  color: var(--comins-table-component-button-foreground);
+  cursor: pointer;
+  font: inherit;
+  min-height: 30px;
+  padding: 4px 10px;
+}
+
+.comins-column-filter__clear:hover,
+.comins-column-filter__clear:focus-visible {
+  background: var(--comins-table-component-accent-soft);
+  outline: none;
+}
+
+.comins-column-filter__clear:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
 .comins-table__header-components {
   align-items: center;
   display: inline-flex;
@@ -831,6 +1063,99 @@
   text-overflow: ellipsis;
 }
 
+.comins-pointer-tooltip {
+  max-width: min(320px, calc(100vw - 16px));
+  pointer-events: none;
+  position: fixed;
+  z-index: 80;
+}
+
+.comins-tooltip-surface {
+  align-items: flex-start;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  box-shadow: var(--comins-table-tooltip-shadow);
+  display: inline-flex;
+  font-size: 12px;
+  gap: 8px;
+  line-height: 1.4;
+  max-width: 100%;
+  padding: 9px 11px;
+  position: relative;
+}
+
+.comins-tooltip-surface::before {
+  background: inherit;
+  border-left: inherit;
+  border-top: inherit;
+  content: "";
+  height: 8px;
+  left: 14px;
+  position: absolute;
+  transform: rotate(45deg);
+  width: 8px;
+}
+
+.comins-pointer-tooltip[data-placement="below"] .comins-tooltip-surface::before {
+  top: -5px;
+}
+
+.comins-pointer-tooltip[data-placement="above"] .comins-tooltip-surface::before {
+  bottom: -5px;
+  transform: rotate(225deg);
+}
+
+.comins-tooltip-surface--neutral {
+  background: var(--comins-table-foreground);
+  border-color: color-mix(in srgb, var(--comins-table-foreground) 72%, #ffffff);
+  color: var(--comins-table-background);
+}
+
+.comins-tooltip-surface--danger {
+  background: var(--comins-table-tooltip-danger-background);
+  border-color: var(--comins-table-tooltip-danger-border);
+  color: var(--comins-table-tooltip-danger-color);
+}
+
+.comins-tooltip-surface__icon {
+  align-items: center;
+  color: var(--comins-table-tooltip-danger-muted);
+  display: inline-flex;
+  flex: 0 0 auto;
+  height: 18px;
+  justify-content: center;
+  width: 18px;
+}
+
+.comins-tooltip-surface__warning {
+  align-items: center;
+  border: 1.5px solid currentColor;
+  border-radius: 999px;
+  display: inline-flex;
+  font-size: 11px;
+  font-weight: 900;
+  height: 15px;
+  justify-content: center;
+  line-height: 1;
+  width: 15px;
+}
+
+.comins-tooltip-surface__content {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.comins-tooltip-surface__content > strong {
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.comins-tooltip-surface__content > span {
+  color: var(--comins-table-tooltip-danger-muted);
+  overflow-wrap: anywhere;
+}
+
 .comins-sort-meta {
   align-items: center;
   display: inline-flex;
@@ -932,6 +1257,20 @@
   text-align: center;
 }
 
+.comins-row-move-placeholder[data-comins-row-drop-valid="false"] td {
+  background: var(--comins-table-drop-invalid-background);
+  color: var(--comins-table-drop-invalid);
+}
+
+.comins-table__tr[data-comins-cross-row-drop-position="before"] > .comins-table__td {
+  box-shadow: inset 0 3px var(--comins-table-drop-marker);
+}
+
+.comins-table__tr[data-comins-cross-row-drop-position="before"][data-comins-row-drop-valid="false"] > .comins-table__td {
+  background: var(--comins-table-drop-invalid-background);
+  box-shadow: inset 0 3px var(--comins-table-drop-invalid);
+}
+
 .comins-table-empty-filler td {
   border-bottom: 0;
   border-right: 1px solid var(--comins-table-cell-border);
@@ -956,6 +1295,53 @@
   background: var(--comins-table-row-custom-background);
 }
 
+.comins-table__th[data-comins-pinned] {
+  background: var(--comins-table-header-background);
+  z-index: 5;
+}
+
+.comins-table__td[data-comins-pinned] {
+  background: var(--comins-table-surface);
+  z-index: 2;
+}
+
+.comins-table__tr[data-comins-row-parity="even"] > .comins-table__td[data-comins-pinned] {
+  background: var(--comins-table-row-even-background);
+}
+
+.comins-table__tr[data-comins-row-parity="odd"] > .comins-table__td[data-comins-pinned] {
+  background: var(--comins-table-row-odd-background);
+}
+
+.comins-table__tr[data-comins-row-custom-background="true"] > .comins-table__td[data-comins-pinned] {
+  background: var(--comins-table-row-custom-background);
+}
+
+.comins-table__tr.comins-row-selected > .comins-table__td[data-comins-pinned] {
+  background: var(--comins-table-row-selected-background);
+}
+
+.comins-table__tr[data-disabled="true"] > .comins-table__td[data-comins-pinned] {
+  background: var(--comins-table-row-disabled-background);
+}
+
+.comins-table__td.comins-table__skeleton-cell[data-comins-pinned] {
+  background: var(--comins-table-skeleton-background);
+}
+
+.comins-table__summary-cell[data-comins-pinned] {
+  background: var(--comins-table-surface-muted);
+  z-index: 2;
+}
+
+[data-comins-pinned="left"][data-comins-pin-boundary="true"] {
+  border-right: 2px solid var(--comins-table-border);
+}
+
+[data-comins-pinned="right"][data-comins-pin-boundary="true"] {
+  border-left: 2px solid var(--comins-table-border);
+}
+
 .comins-table__component-layout {
   align-items: center;
   display: inline-flex;