xv-webcomponents 1.25.1 → 2.0.0-beta.28

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

@@ -1,137 +1,278 @@
+@charset "UTF-8";
 :host {
-  --xv-table-min-height: 51.11px;
-  --xv-table-padding-x: 16px;
-  --xv-table-padding-y: 15px;
-  --xv-table-cols-template: repeat(auto-fit, minmax(0, 1fr));
+  /**
+   * @prop --xv-table-columns: The grid track list. Built from `columns`; a resize rewrites it.
+   * @prop --xv-table-height: Row height. Set by the size ladder, xs 24 to xl 64.
+   * @prop --xv-table-padding-x: Horizontal cell padding.
+   * @prop --xv-table-padding-y: Vertical cell padding.
+   * @prop --xv-table-border-color: Colour of the outer border.
+   * @prop --xv-table-header-bg: Background of the header row.
+   * @prop --xv-table-loading-bg: Colour washed over the body while loading.
+   * @prop --xv-table-loading-opacity: Opacity of that wash.
+   * @prop --xv-table-max-height: Height the body scrolls within. Needed for `sticky-header`.
+   * @prop --xv-table-scroll-width: Width the table scrolls at once the screen is too narrow to squeeze.
+   */
+  --xv-table-columns: 1fr;
+  --xv-table-height: 40px;
+  --xv-table-padding-x: var(--spacing-05);
+  --xv-table-padding-y: var(--spacing-03);
+  --xv-table-border-color: var(--border-subtle-01);
+  --xv-table-header-bg: var(--layer-accent-01);
+  --xv-table-loading-bg: var(--layer-02);
+  --xv-table-loading-opacity: 0.8;
+  --xv-table-max-height: none;
+  --xv-table-scroll-width: 1180px;
   display: block;
+  position: relative;
+  color: var(--text-primary);
+  font-family: var(--ff-body);
+  font-size: var(--fz-md);
+}
+
+:host([block]) {
+  width: 100%;
+}
+
+:host([size=xs]) {
+  --xv-table-height: 24px;
+  --xv-table-padding-x: var(--spacing-03);
+  --xv-table-padding-y: var(--spacing-01);
+}
+
+:host([size=sm]) {
+  --xv-table-height: 32px;
+  --xv-table-padding-x: var(--spacing-04);
+  --xv-table-padding-y: var(--spacing-02);
+}
+
+:host([size=md]) {
+  --xv-table-height: 40px;
+  --xv-table-padding-x: var(--spacing-05);
+  --xv-table-padding-y: var(--spacing-03);
 }
-:host .batch-actions {
+
+:host([size=lg]) {
+  --xv-table-height: 48px;
+  --xv-table-padding-x: var(--spacing-05);
+  --xv-table-padding-y: var(--spacing-04);
+}
+
+:host([size=xl]) {
+  --xv-table-height: 64px;
+  --xv-table-padding-x: var(--spacing-06);
+  --xv-table-padding-y: var(--spacing-05);
+}
+
+:host(.is-dragging) {
+  cursor: grabbing;
   user-select: none;
-  pointer-events: none;
-  position: absolute;
-  left: 0;
-  bottom: 100%;
-  width: 0;
-  min-height: 48px;
-  overflow: hidden;
-  border-radius: 3px 3px 0 0;
-  background-color: var(--interactive-01, #273435);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  column-gap: var(--spacing-04);
-  flex-wrap: nowrap;
-  box-sizing: border-box;
-  transition: 250ms ease-in-out height, 250ms ease-in-out width, 250ms ease-in-out padding-inline;
-  color: var(--text-on-color, #fff);
 }
-:host .batch-actions_content {
-  display: block;
-  overflow: hidden;
-  white-space: nowrap;
+
+.heading {
+  padding: var(--spacing-05) var(--spacing-05) var(--spacing-06);
 }
-:host .batch-actions_count {
+.heading_title {
   margin: 0;
-  white-space: nowrap;
-  font-family: var(--ff-body, Tahoma);
-  font-size: var(--fz-md, 14px);
-  font-style: normal;
+  font-family: var(--ff-heading);
+  font-size: var(--fz-xl);
   font-weight: 400;
-  line-height: var(--fz-lg, 18px);
-  letter-spacing: 0.16px;
+  line-height: 28px;
+}
+.heading_description {
+  margin: var(--spacing-02) 0 0;
+  color: var(--text-secondary);
+  line-height: 18px;
+}
+
+.bar {
+  position: sticky;
+  left: 0;
+  z-index: 10;
 }
-:host .xv-table {
+.bar_toolbar {
   display: flex;
-  flex-direction: column;
-  position: relative;
+  align-items: center;
+  gap: var(--spacing-03);
+  min-height: var(--xv-table-height);
 }
-:host .xv-table_wrapper {
+.bar_toolbar ::slotted(*) {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.bar_batch {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-03);
+  padding: 0 var(--spacing-05);
+  border-radius: 3px 3px 0 0;
+  background: var(--interactive-01);
+  color: var(--text-on-color);
+}
+.bar_count {
+  margin-left: auto;
+  font-weight: 600;
+}
+
+/**
+ * The table is **not** a scroll container by default, and that is deliberate: a box with `overflow`
+ * reports no content height of its own, so inside a flex or grid page it shrinks and scrolls within
+ * itself instead of making room. Wide enough, the columns simply squeeze, exactly as they did under
+ * `table-layout: fixed`. Scrolling starts only where the old table started it — below the
+ * breakpoint, or when a table names its own `min-width`.
+ */
+.scroll {
   position: relative;
+}
+
+/**
+ * Below the breakpoint the columns stop giving way and the table scrolls instead — the width it
+ * scrolls at is the breakpoint itself, which is what the old table did and what a narrow screen
+ * needs: a column of `10%` would otherwise shrink with the viewport and squeeze its content to
+ * nothing. A table whose own columns ask for more than that gets the larger of the two.
+ */
+@media screen and (max-width: 1180px) {
+  .scroll {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: var(--layer-accent-03) transparent;
+  }
+  .grid {
+    min-width: max(var(--xv-table-min-width), var(--xv-table-scroll-width));
+  }
+}
+.scroll--overflowing {
   overflow-x: auto;
+  overflow-y: hidden;
   scrollbar-width: thin;
   scrollbar-color: var(--layer-accent-03) transparent;
 }
-:host .xv-table_wrapper ::slotted(*) {
-  min-width: 1000px;
-}
-:host .xv-table ::slotted([checked]) {
-  background-color: var(--layer-selected-01, #E3E3E3);
+
+:host([min-width]:not([min-width="0"])) .scroll {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: var(--layer-accent-03) transparent;
 }
-:host .xv-table ::slotted([checked]:not([header]):hover) {
-  background-color: var(--layer-selected-hover-01, #DADADA);
+:host([min-width]:not([min-width="0"])) .grid {
+  min-width: var(--xv-table-min-width);
 }
-:host .xv-table ::slotted(xv-table-v2-row[disabled]) {
-  pointer-events: none;
-  opacity: 0.4;
-  cursor: not-allowed;
-  user-select: none;
+
+:host([sticky-header]) .scroll {
+  min-height: 0;
+  max-height: var(--xv-table-max-height);
+  overflow-y: auto;
 }
-:host .xv-table ::slotted([slot=footer]:hover),
-:host .xv-table ::slotted([slot=footer]) {
-  background-color: var(--layer-accent-02, #E3E3E3);
+
+.grid {
+  display: grid;
+  grid-template-columns: var(--xv-table-columns);
+  box-sizing: border-box;
+  border: 1px solid var(--xv-table-border-color);
+  border-bottom: 0;
 }
-:host .xv-table_loading {
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: var(--xv-table-min-height, 51.11px);
-  position: absolute;
+
+:host([sticky-header]) ::slotted(xv-table-row[header]),
+:host([sticky-header]) xv-table-row[header] {
+  position: sticky;
   top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0.8);
-}
-:host .xv-table-title,
-:host ::slotted([slot=title]) {
-  color: var(--text-primary, #333) !important;
-  font-size: var(--fz-xl, 21px) !important;
-  margin-top: var(--spacing-05, 16px) !important;
-  margin-bottom: var(--spacing-06, 24px) !important;
-  font-family: var(--ff-heading, "Gill Sans");
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
+  z-index: 5;
 }
 
-:host([hover]) .xv-table ::slotted(:hover:not([header])) {
-  background-color: var(--layer-hover-01, #E9E9E9);
+.body {
+  grid-column: 1/-1;
+  display: grid;
+  grid-template-columns: subgrid;
 }
 
-:host(.batchVisible) .batch-actions {
-  pointer-events: initial;
-  user-select: initial;
-  width: 100%;
-  padding-inline: var(--xv-table-padding-x);
+.body[hidden] {
+  display: none;
 }
 
-:host([expandable]) ::slotted(xv-table-v2-row) {
-  padding-inline-start: calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px);
+.skeleton_row {
+  grid-column: 1/-1;
+  display: grid;
+  grid-template-columns: subgrid;
+  min-height: var(--xv-table-height);
+  box-shadow: inset 0 -1px 0 0 var(--border-subtle-00);
 }
-
-:host([variant-checkbox]) ::slotted([slot=footer]:not([variant])) {
-  padding-inline-start: calc(max(10px, var(--xv-table-padding-x)) * 2 + 57.97px);
+.skeleton_cell {
+  display: flex;
+  align-items: center;
+  padding: var(--xv-table-padding-y) var(--xv-table-padding-x);
+}
+.skeleton_bar {
+  width: 100%;
+  height: 12px;
+  border-radius: 2px;
+  background: var(--layer-accent-01);
+  animation: xv-table-pulse 1.4s ease-in-out infinite;
 }
 
-:host([size=xs]) {
-  --xv-table-padding-y: 7px;
-  --xv-table-min-height: 35.1px;
+@keyframes xv-table-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(var(--xv-table-height) * 2);
+  border: 1px solid var(--xv-table-border-color);
+  border-top: 0;
+  color: var(--text-secondary);
 }
 
-:host([size=sm]) {
-  --xv-table-padding-y: 10px;
-  --xv-table-min-height: 41.11px;
+.loading {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.loading::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--xv-table-loading-bg);
+  opacity: var(--xv-table-loading-opacity);
 }
 
-:host([size=lg]) {
-  --xv-table-padding-y: 21px;
-  --xv-table-min-height: 63.09px;
+.picker {
+  margin-left: auto;
+}
+.picker_list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-02);
+  max-height: 320px;
+  overflow-y: auto;
+  padding: var(--spacing-03);
+}
+.picker_trigger {
+  position: relative;
+  display: inline-flex;
+  color: var(--icon-primary);
+}
+.picker_marker {
+  position: absolute;
+  top: -2px;
+  right: -4px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--background-brand);
 }
 
-:host([size=xl]) {
-  --xv-table-padding-y: 31px;
-  --xv-table-min-height: 78.77px;
+.pagination {
+  border: 1px solid var(--xv-table-border-color);
+  border-top: 0;
 }