@semcore/data-table 4.51.0-prerelease.1 → 4.51.0-prerelease.5

package/lib/cjs/components/Body/style.shadow.css

@@ -0,0 +1,367 @@
+SBody, SRow, SRowGroup {
+  display: contents;
+}
+
+SAccordionRows {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-row: var(--gridRow);
+  overflow: clip;
+  transition-property: max-height;
+  transition-duration: var(--duration);
+  transition-timing-function: linear;
+  grid-template-columns: subgrid;
+}
+
+SBody[compact] {
+  SCell {
+    padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px);
+  }
+
+  SCell[data-aria-level] {
+    padding-left: calc(var(--intergalactic-spacing-2x, 8px) + ((var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) * (var(--data-aria-level) - 1)));
+  }
+
+  SRow {
+    SCellWrapper:first-child SCell[data-aria-level] {
+      padding-left: calc(var(--intergalactic-spacing-2x, 8px) + ((var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) * (var(--data-aria-level) - 1)));
+    }
+  }
+  SRow[sideIndents='wide'] {
+    SCellWrapper:first-child SCell[data-aria-level] {
+      padding-left: calc(var(--intergalactic-spacing-5x, 20px) + ((var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) * (var(--data-aria-level) - 1)));
+    }
+  }
+  SCollapseRow[sideIndents='wide'] {
+    SCellWrapper:first-child SCell[data-aria-level] {
+      padding-left: calc(var(--intergalactic-spacing-5x, 20px) + ((var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) * (var(--data-aria-level) - 1)));
+    }
+  }
+
+  SCell SAccordionToggle {
+    margin-right: var(--intergalactic-spacing-2x, 8px);
+  }
+}
+
+SRow[gridArea], SCellWrapper[gridArea], SCollapseRow[gridArea] {
+  grid-area: var(--gridArea);
+}
+
+SCellWrapper {
+  height: 100%;
+  overflow: hidden;
+}
+
+SCollapseRow[gridArea] > SCellWrapper, SRow[isAccordionRow] > SCellWrapper {
+  height: auto;
+  overflow: auto;
+}
+
+SCollapseRow[gridArea] > SCellWrapper > SCell:not([withoutBorder]),
+SAccordionRows > SRow[isAccordionRow]:last-child > SCellWrapper > SCell:not([withoutBorder]) {
+  border-bottom: 1px solid var(--intergalactic-border-table-accent, oklch(0.137 0.026 175.7 / 0.161));
+}
+
+SCollapseRow > SCellWrapper > SCell {
+  display: block;
+}
+
+SRow[accordionType='row'][expanded] > SCellWrapper > SCell:not([theme]),
+SCell:not([theme])[expanded][withAccordion] {
+  background-color: var(--intergalactic-table-td-cell-active, oklch(0.97 0.001 180));
+}
+
+SCollapseRow > SCellWrapper > SCell:not([theme]), SRow[isAccordionRow] > SCellWrapper > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-accordion, oklch(1 0 0));
+}
+
+/* we need a media query here because of the postcssHoverMediaFeature plugin. it doesn't handle this type of selectors correctly */
+@media (hover: hover) {
+  :not(SRowGroup:has([data-row-selector="true"] input:checked)) > SRow:not([accordionType='row'][expanded]):hover:not([isNonInteractive]):not(:has([data-row-selector="true"] input:checked)):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover):not(:has([data-row-selector="true"] input:checked)) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
+  SRowGroup:has(SCell:hover):not(:has([data-row-selector="true"] input:checked)) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([expanded][withAccordion]):not([aria-hidden]) {
+    background-color: var(--intergalactic-table-td-cell-hover, oklch(0.98 0.001 180));
+  }
+
+  /* MUTED THEME */
+  SRow:hover:not([isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell[theme='muted']:not([aria-hidden]),
+  SRow[theme='muted']:hover:not([expanded][isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[theme='muted']:not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='muted']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup'][theme='muted']:not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow[theme='muted']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([aria-hidden]) {
+    background-color: var(--intergalactic-table-td-cell-active, oklch(0.97 0.001 180));
+  }
+
+  /* INFO THEME */
+  SRow:hover:not([isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell[theme='info']:not([aria-hidden]),
+  SRow:hover:has([data-row-selector="true"] input:checked):not([isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([aria-hidden]),
+  SRow[theme='info']:hover:not([expanded][isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[theme='info']:not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover):has([data-row-selector="true"] input:checked) SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='info']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([aria-hidden]),
+  SRowGroup:has(SCell:hover):has([data-row-selector="true"] input:checked) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([aria-hidden]),
+  SRowGroup:has([data-row-selector="true"] input:checked) > SRow:hover:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup'][theme='info']:not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow[theme='info']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([aria-hidden]) {
+    background-color: var(--intergalactic-table-td-cell-selected-hover, oklch(0.959 0.021 267.8));
+  }
+
+  /* SUCCESS THEME */
+  SRow:hover:not([isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell[theme='success']:not([aria-hidden]),
+  SRow[theme='success']:hover:not([expanded][isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[theme='success']:not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='success']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup'][theme='success']:not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow[theme='success']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([expanded][withAccordion]):not([aria-hidden]) {
+    background-color: var(--intergalactic-table-td-cell-new-hover, oklch(0.96 0.057 179.7));
+  }
+
+  /* WARNING THEME */
+  SRow:hover:not([isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell[theme='warning']:not([aria-hidden]),
+  SRow[theme='warning']:hover:not([expanded][isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[theme='warning']:not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='warning']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup'][theme='warning']:not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow[theme='warning']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([aria-hidden]) {
+    background-color: var(--intergalactic-table-td-cell-warning-hover, oklch(0.96 0.05 83.1));
+  }
+
+  /* DANGER THEME */
+  SRow:hover:not([isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell[theme='danger']:not([aria-hidden]),
+  SRow[theme='danger']:hover:not([expanded][isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[theme='danger']:not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='danger']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup'][theme='danger']:not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow[theme='danger']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([aria-hidden]) {
+    background-color: var(--intergalactic-table-td-cell-critical-hover, oklch(0.958 0.029 5.7));
+  }
+}
+
+SRowGroup:has([data-row-selector="true"] input:checked) > SRow > SCellWrapper > SCell,
+SRow:has([data-row-selector="true"] input:checked) > SCellWrapper > SCell {
+  background-color: var(--intergalactic-table-td-cell-selected, oklch(0.98 0.01 267.6));
+
+  &[expanded][withAccordion] {
+    background-color: var(--intergalactic-table-td-cell-selected-active, oklch(0.939 0.032 268));
+  }
+}
+
+SCell {
+  display: flex;
+  height: 100%;
+  font-size: var(--intergalactic-fs-200, 14px);
+  line-height: var(--intergalactic-lh-200, 142%);
+  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-variant-numeric: tabular-nums;
+  transition: width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
+  outline: none;
+  overflow: hidden;
+
+  SAccordionToggle {
+    margin-right: var(--intergalactic-spacing-3x, 12px);
+    margin-left: calc(var(--intergalactic-spacing-05x, 2px) * -1);
+    height: fit-content;
+
+    svg {
+      transition: transform calc(var(--intergalactic-duration-accordion, 200) * 1ms) ease-out;
+    }
+
+    &[expanded] svg {
+      transform: rotate(90deg);
+    }
+  }
+
+  &[withoutBorder] {
+    border-bottom: none;
+  }
+
+  &[use='primary'] {
+    padding: var(--intergalactic-spacing-3x, 12px);
+    min-height: 45px;
+    background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
+
+    &[data-aria-level] {
+      padding-left: calc(var(--intergalactic-spacing-3x, 12px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) * (var(--data-aria-level) - 1)));
+    }
+  }
+
+  &[use='secondary'] {
+    padding: var(--intergalactic-spacing-2x, 8px);
+    min-height: 37px;
+    background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
+
+    &[data-aria-level] {
+      padding-left: calc(var(--intergalactic-spacing-2x, 8px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) * (var(--data-aria-level) - 1)));
+    }
+  }
+
+  &[theme='muted'] {
+    background-color: var(--intergalactic-table-td-cell-unread, oklch(0.98 0.001 180));
+
+    &[expanded][withAccordion] {
+      background-color: var(--intergalactic-table-td-cell-active, oklch(0.97 0.001 180));
+    }
+  }
+
+  &[theme='info'] {
+    background-color: var(--intergalactic-table-td-cell-selected, oklch(0.98 0.01 267.6));
+
+    &[expanded][withAccordion] {
+      background-color: var(--intergalactic-table-td-cell-selected-active, oklch(0.939 0.032 268));
+    }
+  }
+
+  &[theme='success'] {
+    background-color: var(--intergalactic-table-td-cell-new, oklch(0.977 0.036 184));
+
+    &[expanded][withAccordion] {
+      background-color: var(--intergalactic-table-td-cell-new-active, oklch(0.94 0.074 178.1));
+    }
+  }
+
+  &[theme='warning'] {
+    background-color: var(--intergalactic-table-td-cell-warning, oklch(0.979 0.03 88.1));
+
+    &[expanded][withAccordion] {
+      background-color: var(--intergalactic-table-td-cell-warning-active, oklch(0.939 0.069 79.8));
+    }
+  }
+
+  &[theme='danger'] {
+    background-color: var(--intergalactic-table-td-cell-critical, oklch(0.977 0.016 1.8));
+
+    &[expanded][withAccordion] {
+      background-color: var(--intergalactic-table-td-cell-critical-active, oklch(0.938 0.042 8.4));
+    }
+  }
+
+  &[borders='both'],
+  &[borders='left'] {
+    border-left: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
+  }
+
+  &[borders='both'],
+  &[borders='right'] {
+    border-right: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
+  }
+
+  &[innerOutline]:focus-visible {
+    transition: none;
+  }
+}
+
+SRow[accordionType='row'] > SCellWrapper > SCell, SCell[withAccordion], SCell[name='SELECT_ALL_ROWS'] {
+  cursor: pointer;
+}
+
+SCheckboxCell[aria-hidden] {
+  filter: blur(3px);
+  pointer-events: none;
+}
+
+SCellWrapper[fixed] {
+  position: sticky;
+  z-index: 2;
+}
+
+SSpinContainer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--intergalactic-overlay-limitation-secondary, oklch(1 0 0 / 0.85));
+  z-index: 15;
+
+  &:focus-visible {
+    z-index: 15;
+  }
+
+  &[headerHeight] {
+    top: var(--headerHeight);
+  }
+}
+
+SEmptyData {
+  grid-column: 1 / -1;
+}
+
+SRow[sideIndents='wide'], SCollapseRow[sideIndents='wide'] {
+  SCellWrapper:first-child SCell {
+    padding-left: var(--intergalactic-spacing-5x, 20px);
+
+    &[data-aria-level] {
+      padding-left: calc(var(--intergalactic-spacing-5x, 20px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) * (var(--data-aria-level) - 1)));
+    }
+  }
+
+  SCellWrapper:last-child SCell {
+    padding-right: var(--intergalactic-spacing-5x, 20px);
+  }
+}
+
+
+SCellWrapper[fixed][shadowVertical] {
+  &:after {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    display: none;
+    top: 0;
+    width: 5px;
+    height: 100%;
+    z-index: 5;
+  }
+}
+
+SCellWrapper[fixed='left'][shadowVertical='median'],
+SCellWrapper[fixed='left'][shadowVertical='start'] {
+  margin-right: -5px;
+
+  &:after {
+    display: block;
+    right: 0;
+    background: var(--intergalactic-scroll-area-shadow-left,
+    linear-gradient(to right, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%));
+  }
+  SCell {
+    margin-right: 5px;
+  }
+}
+SCellWrapper[fixed='right'][shadowVertical='median'],
+SCellWrapper[fixed='right'][shadowVertical='end'] {
+  margin-left: -5px;
+  &:after {
+    display: block;
+    left: 0;
+    background: var(--intergalactic-scroll-area-shadow-right,
+    linear-gradient(to left, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%));
+  }
+
+  SCell {
+    margin-left: 5px;
+  }
+}
+
+SLimitOverlayCellWrapper[gridArea] {
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  z-index: 16;
+  grid-area: var(--gridArea);
+  backdrop-filter: blur(6px);
+}
+
+SLimitOverlayCellWrapper[left] {
+  position: sticky;
+  left: var(---left);
+}