@db-ux/core-components 4.10.1 → 4.11.0

package/build/components/table/table.css

@@ -0,0 +1,591 @@
+/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
+/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
+/* Variants for adaptive components like input, select, notification, ... */
+.db-table:not([data-show-caption=true]) caption {
+  clip: rect(0, 0, 0, 0) !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  font-size: 0 !important;
+  all: initial;
+  inset-block-start: 0 !important;
+  block-size: 1px !important;
+  position: absolute !important;
+  inline-size: 1px !important;
+  border-width: 0 !important;
+  border-style: initial !important;
+  border-color: initial !important;
+  border-image: initial !important;
+  padding: 0 !important;
+  pointer-events: none !important;
+}
+
+.db-table-row[data-interactive=true]:has(input:is([type=radio], [type=checkbox]):is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)):checked) {
+  --db-adaptive-bg-basic-level-1-default: var(
+  	--db-informational-bg-basic-level-1-default
+  );
+  --db-adaptive-bg-basic-level-1-hovered: var(
+  	--db-informational-bg-basic-level-1-hovered
+  );
+  --db-adaptive-bg-basic-level-1-pressed: var(
+  	--db-informational-bg-basic-level-1-pressed
+  );
+  --db-adaptive-bg-basic-level-2-default: var(
+  	--db-informational-bg-basic-level-2-default
+  );
+  --db-adaptive-bg-basic-level-2-hovered: var(
+  	--db-informational-bg-basic-level-2-hovered
+  );
+  --db-adaptive-bg-basic-level-2-pressed: var(
+  	--db-informational-bg-basic-level-2-pressed
+  );
+  --db-adaptive-bg-basic-level-3-default: var(
+  	--db-informational-bg-basic-level-3-default
+  );
+  --db-adaptive-bg-basic-level-3-hovered: var(
+  	--db-informational-bg-basic-level-3-hovered
+  );
+  --db-adaptive-bg-basic-level-3-pressed: var(
+  	--db-informational-bg-basic-level-3-pressed
+  );
+  --db-adaptive-bg-basic-transparent-full-default: var(
+  	--db-informational-bg-basic-transparent-full-default
+  );
+  --db-adaptive-bg-basic-transparent-semi-default: var(
+  	--db-informational-bg-basic-transparent-semi-default
+  );
+  --db-adaptive-bg-basic-transparent-full-hovered: var(
+  	--db-informational-bg-basic-transparent-full-hovered
+  );
+  --db-adaptive-bg-basic-transparent-full-pressed: var(
+  	--db-informational-bg-basic-transparent-full-pressed
+  );
+  --db-adaptive-bg-basic-transparent-semi-hovered: var(
+  	--db-informational-bg-basic-transparent-semi-hovered
+  );
+  --db-adaptive-bg-basic-transparent-semi-pressed: var(
+  	--db-informational-bg-basic-transparent-semi-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-default: var(
+  	--db-informational-on-bg-basic-emphasis-100-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
+  	--db-informational-on-bg-basic-emphasis-100-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
+  	--db-informational-on-bg-basic-emphasis-100-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-default: var(
+  	--db-informational-on-bg-basic-emphasis-90-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
+  	--db-informational-on-bg-basic-emphasis-90-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
+  	--db-informational-on-bg-basic-emphasis-90-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-default: var(
+  	--db-informational-on-bg-basic-emphasis-80-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
+  	--db-informational-on-bg-basic-emphasis-80-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
+  	--db-informational-on-bg-basic-emphasis-80-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-default: var(
+  	--db-informational-on-bg-basic-emphasis-70-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
+  	--db-informational-on-bg-basic-emphasis-70-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
+  	--db-informational-on-bg-basic-emphasis-70-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-60-default: var(
+  	--db-informational-on-bg-basic-emphasis-60-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-50-default: var(
+  	--db-informational-on-bg-basic-emphasis-50-default
+  );
+  --db-adaptive-bg-inverted-contrast-max-default: var(
+  	--db-informational-bg-inverted-contrast-max-default
+  );
+  --db-adaptive-bg-inverted-contrast-max-hovered: var(
+  	--db-informational-bg-inverted-contrast-max-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-max-pressed: var(
+  	--db-informational-bg-inverted-contrast-max-pressed
+  );
+  --db-adaptive-bg-inverted-contrast-high-default: var(
+  	--db-informational-bg-inverted-contrast-high-default
+  );
+  --db-adaptive-bg-inverted-contrast-high-hovered: var(
+  	--db-informational-bg-inverted-contrast-high-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-high-pressed: var(
+  	--db-informational-bg-inverted-contrast-high-pressed
+  );
+  --db-adaptive-bg-inverted-contrast-low-default: var(
+  	--db-informational-bg-inverted-contrast-low-default
+  );
+  --db-adaptive-bg-inverted-contrast-low-hovered: var(
+  	--db-informational-bg-inverted-contrast-low-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-low-pressed: var(
+  	--db-informational-bg-inverted-contrast-low-pressed
+  );
+  --db-adaptive-on-bg-inverted-default: var(
+  	--db-informational-on-bg-inverted-default
+  );
+  --db-adaptive-on-bg-inverted-hovered: var(
+  	--db-informational-on-bg-inverted-hovered
+  );
+  --db-adaptive-on-bg-inverted-pressed: var(
+  	--db-informational-on-bg-inverted-pressed
+  );
+  --db-adaptive-origin-default: var(--db-informational-origin-default);
+  --db-adaptive-origin-hovered: var(--db-informational-origin-hovered);
+  --db-adaptive-origin-pressed: var(--db-informational-origin-pressed);
+  --db-adaptive-on-origin-default: var(
+  	--db-informational-on-origin-default
+  );
+  --db-adaptive-bg-vibrant-default: var(
+  	--db-informational-bg-vibrant-default
+  );
+  --db-adaptive-bg-vibrant-hovered: var(
+  	--db-informational-bg-vibrant-hovered
+  );
+  --db-adaptive-bg-vibrant-pressed: var(
+  	--db-informational-bg-vibrant-pressed
+  );
+  --db-adaptive-on-bg-vibrant-default: var(
+  	--db-informational-on-bg-vibrant-default
+  );
+  --db-adaptive-on-bg-vibrant-hovered: var(
+  	--db-informational-on-bg-vibrant-hovered
+  );
+  --db-adaptive-on-bg-vibrant-pressed: var(
+  	--db-informational-on-bg-vibrant-pressed
+  );
+}
+
+.db-table-row[data-interactive=true]:not([data-disable-focus=true]):has(:is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)):focus-visible)::after {
+  outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
+  outline-offset: var(--db-border-width-xs);
+  box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
+}
+.db-table-row[data-interactive=true]:not([data-disable-focus=true]):not([type=radio], [role=switch]):has(:is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)):focus-visible)::after {
+  border-radius: var(--db-border-radius-xs);
+}
+
+[data-size=x-small].db-table {
+  font: var(--db-type-body-sm);
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
+}
+
+.db-table-row {
+  display: var(--db-table-section-display, grid);
+  grid-template-columns: subgrid;
+  grid-column: 1/-1;
+}
+
+[data-variant=zebra].db-table thead tr[data-sub-header-emphasis=weak] {
+  background-color: var(--db-adaptive-bg-vibrant-default);
+  color: var(--db-adaptive-on-bg-vibrant-default);
+  border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+
+.db-table-row[data-interactive=true]::after, .db-table-row[data-interactive=true] :is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select))[data-icon-trailing]::before, .db-table-row[data-interactive=true] :is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)):not([data-icon-trailing])::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+.db-table-row {
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+}
+.db-table-row[data-interactive=true] {
+  position: relative;
+}
+.db-table-row[data-interactive=true] td :not([data-table-row-trigger=true]) {
+  position: relative;
+  z-index: 1;
+}
+.db-table-row[data-interactive=true]:has(input:is([type=radio], [type=checkbox]):is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)):checked) {
+  background-color: var(--db-adaptive-bg-basic-level-2-default);
+}
+.db-table-row[data-interactive=true]:has(input:is([type=radio], [type=checkbox]):is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)):checked),
+.db-table-row[data-interactive=true]:has(input:is([type=radio], [type=checkbox]):is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)):checked) span,
+.db-table-row[data-interactive=true]:has(input:is([type=radio], [type=checkbox]):is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)):checked) p,
+.db-table-row[data-interactive=true]:has(input:is([type=radio], [type=checkbox]):is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)):checked) a {
+  font-weight: bold;
+}
+.db-table-row[data-interactive=true]:has(input:is([type=radio], [type=checkbox]):is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)):checked):has(:is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"])) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-level-2-hovered);
+}
+.db-table-row[data-interactive=true]:has(input:is([type=radio], [type=checkbox]):is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)):checked):has(:is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"])) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-level-2-pressed);
+}
+.db-table-row[data-interactive=true]:has(:is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"])) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-level-2-hovered);
+}
+.db-table-row[data-interactive=true]:has(:is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"])) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-level-2-pressed);
+}
+.db-table-row[data-interactive=true] :is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)) {
+  --db-tooltip-parent-position: static;
+  --db-focus-outline-color: transparent;
+  /* We set focus on complete row element, we remove it from interactive child with this trick */
+  /* stylelint-disable-next-line a11y/no-outline-none */
+}
+.db-table-row[data-interactive=true] :is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)):focus-visible {
+  outline: none;
+}
+.db-table-row[data-interactive=true]::after {
+  pointer-events: none;
+  z-index: 2;
+}
+
+[data-variant=spaced].db-table thead tr:not([data-sub-header-emphasis]), [data-mobile-variant=list].db-table thead tr:not([data-sub-header-emphasis]) {
+  border: var(--db-border-width-3xs) solid transparent;
+}
+
+[data-variant=spaced].db-table :is(tfoot, tbody) tr, [data-variant=spaced].db-table thead tr[data-sub-header-emphasis], [data-mobile-variant=list].db-table :is(tfoot, tbody) tr, [data-mobile-variant=list].db-table thead tr[data-sub-header-emphasis] {
+  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+
+[data-variant=spaced].db-table :is(tfoot, tbody) tr, [data-variant=spaced].db-table thead tr[data-sub-header-emphasis], [data-mobile-variant=list].db-table :is(tfoot, tbody) tr, [data-mobile-variant=list].db-table thead tr[data-sub-header-emphasis] {
+  /* stylelint-disable-next-line db-ux/use-border-radius */
+  border-radius: var(--default-card-border-radius, var(--db-border-radius-sm));
+}
+
+.db-table:not([data-size]) :is(th, td), [data-size=medium].db-table :is(th, td) {
+  padding: var(--db-spacing-fixed-xs);
+}
+[data-size=large].db-table :is(th, td) {
+  padding: var(--db-spacing-fixed-sm);
+}
+[data-size=small].db-table :is(th, td), [data-size=x-small].db-table :is(th, td) {
+  padding: var(--db-spacing-fixed-2xs);
+}
+.db-table:is([data-divider=none], [data-divider=vertical]) table {
+  border-block-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+.db-table:not([data-divider=none]):not([data-variant=spaced])[data-divider=both] tr > :is(td, th):not(:last-child), .db-table:not([data-divider=none]):not([data-variant=spaced])[data-divider=vertical] tr > :is(td, th):not(:last-child) {
+  border-inline-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+.db-table:not([data-divider=none]):not([data-variant=spaced])[data-divider=both] tr > :is(db-table-header-cell, db-table-data-cell):not(:last-child) td,
+.db-table:not([data-divider=none]):not([data-variant=spaced])[data-divider=both] tr > :is(db-table-header-cell, db-table-data-cell):not(:last-child) th, .db-table:not([data-divider=none]):not([data-variant=spaced])[data-divider=vertical] tr > :is(db-table-header-cell, db-table-data-cell):not(:last-child) td,
+.db-table:not([data-divider=none]):not([data-variant=spaced])[data-divider=vertical] tr > :is(db-table-header-cell, db-table-data-cell):not(:last-child) th {
+  border-inline-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+.db-table:not([data-divider=none]):not([data-divider]) tr, .db-table:not([data-divider=none])[data-divider=both] tr, .db-table:not([data-divider=none])[data-divider=horizontal] tr {
+  border-block-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(1)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(2))) {
+  --db-table-grid-cells: 1;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(2)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(3))) {
+  --db-table-grid-cells: 2;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(3)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(4))) {
+  --db-table-grid-cells: 3;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-2,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(4)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(5))) {
+  --db-table-grid-cells: 4;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-2,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-3,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(5)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(6))) {
+  --db-table-grid-cells: 5;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-2,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-3,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-4,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(6)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(7))) {
+  --db-table-grid-cells: 6;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-2,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-3,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-4,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-5,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(7)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(8))) {
+  --db-table-grid-cells: 7;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-2,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-3,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-4,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-5,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-6,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(8)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(9))) {
+  --db-table-grid-cells: 8;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-2,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-3,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-4,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-5,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-6,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-7,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(9)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(10))) {
+  --db-table-grid-cells: 9;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-2,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-3,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-4,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-5,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-6,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-7,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-8,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(10)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(11))) {
+  --db-table-grid-cells: 10;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-2,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-3,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-4,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-5,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-6,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-7,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-8,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-9,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(11)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(12))) {
+  --db-table-grid-cells: 11;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-2,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-3,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-4,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-5,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-6,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-7,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-8,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-9,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-10,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(12)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(13))) {
+  --db-table-grid-cells: 12;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-2,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-3,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-4,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-5,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-6,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-7,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-8,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-9,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-10,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-11,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(13)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(14))) {
+  --db-table-grid-cells: 13;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-2,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-3,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-4,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-5,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-6,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-7,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-8,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-9,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-10,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-11,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-12,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(14)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(15))) {
+  --db-table-grid-cells: 14;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-2,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-3,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-4,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-5,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-6,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-7,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-8,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-9,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-10,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-11,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-12,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-13,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(15)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(16))) {
+  --db-table-grid-cells: 15;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-2,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-3,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-4,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-5,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-6,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-7,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-8,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-9,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-10,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-11,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-12,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-13,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-14,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(16)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(17))) {
+  --db-table-grid-cells: 16;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-2,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-3,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-4,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-5,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-6,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-7,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-8,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-9,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-10,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-11,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-12,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-13,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-14,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-15,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(17)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(18))) {
+  --db-table-grid-cells: 17;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-2,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-3,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-4,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-5,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-6,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-7,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-8,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-9,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-10,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-11,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-12,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-13,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-14,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-15,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-16,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(18)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(19))) {
+  --db-table-grid-cells: 18;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-2,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-3,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-4,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-5,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-6,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-7,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-8,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-9,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-10,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-11,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-12,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-13,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-14,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-15,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-16,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-17,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(19)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(20))) {
+  --db-table-grid-cells: 19;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-2,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-3,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-4,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-5,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-6,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-7,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-8,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-9,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-10,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-11,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-12,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-13,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-14,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-15,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-16,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-17,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-18,var(--db-table-columns-size, 1fr)));
+}
+.db-table table:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(20)):not(:has(tr > :is(td,
+th,
+db-table-data-cell,
+db-table-header-cell):nth-child(21))) {
+  --db-table-grid-cells: 20;
+  grid-template-columns: var(--db-table-grid-template-columns,  var(--db-table-column-size-0,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-1,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-2,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-3,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-4,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-5,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-6,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-7,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-8,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-9,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-10,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-11,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-12,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-13,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-14,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-15,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-16,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-17,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-18,var(--db-table-columns-size, 1fr)) var(--db-table-column-size-19,var(--db-table-columns-size, 1fr)));
+}
+
+[data-mobile-variant=list].db-table table, [data-variant=spaced].db-table table {
+  row-gap: var(--db-spacing-fixed-xs);
+}
+[data-mobile-variant=list].db-table :is(tfoot, tbody), [data-variant=spaced].db-table :is(tfoot, tbody) {
+  row-gap: var(--db-spacing-fixed-xs);
+}
+[data-mobile-variant=list].db-table thead, [data-variant=spaced].db-table thead {
+  row-gap: var(--db-spacing-fixed-xs);
+}
+.db-table:not([data-variant]) table, [data-variant=flat].db-table table, [data-variant=zebra].db-table table {
+  border-inline: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+.db-table:not([data-variant]) thead, [data-variant=flat].db-table thead, [data-variant=zebra].db-table thead {
+  border-block-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+[data-variant=zebra].db-table tbody > db-table-row:nth-child(odd) > tr,
+[data-variant=zebra].db-table tbody > tr:nth-child(odd) {
+  background-color: var(--db-adaptive-bg-basic-level-2-default);
+}
+@container (inline-size < 48em) {
+  [data-mobile-variant=list].db-table table {
+    --db-table-columns-size: 1fr;
+    --db-table-cell-span: 1;
+    --db-table-grid-template-columns: repeat(1, 1fr);
+    border-color: transparent;
+  }
+  [data-mobile-variant=list].db-table :is(th, td)[data-header] {
+    gap: var(--db-spacing-fixed-xs);
+  }
+  [data-mobile-variant=list].db-table :is(th, td)[data-header]::before {
+    content: attr(data-header) ":"/"";
+    font-weight: bold;
+  }
+  [data-mobile-variant=list].db-table td[data-horizontal-alignment=end] {
+    justify-content: space-between;
+  }
+  [data-mobile-variant=list].db-table thead {
+    border-block-start-color: transparent;
+  }
+  [data-mobile-variant=list].db-table thead tr {
+    --db-table-section-display: flex;
+    flex-wrap: wrap;
+    gap: var(--db-spacing-fixed-xs);
+  }
+}
+
+[data-sticky-header=both].db-table thead, [data-sticky-header=horizontal].db-table thead {
+  position: sticky;
+  inset-block-start: calc(-1 * var(--db-border-width-xs));
+  z-index: 4;
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+}
+[data-sticky-header=both].db-table tfoot th,
+[data-sticky-header=both].db-table tbody th, [data-sticky-header=vertical].db-table tfoot th,
+[data-sticky-header=vertical].db-table tbody th {
+  position: sticky;
+  inset-inline-start: calc(-1 * var(--db-border-width-xs));
+  z-index: 3;
+  border-inline-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+}
+
+.db-table {
+  container-type: inline-size;
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+  inline-size: 100%;
+  padding: var(--db-border-width-xs);
+}
+.db-table:not([data-width]), .db-table[data-width=full] {
+  overflow: auto;
+}
+.db-table:not([data-width]) table, .db-table[data-width=full] table {
+  inline-size: inherit;
+}
+.db-table[data-width=auto] {
+  display: flex;
+  justify-content: center;
+}
+.db-table[data-width=auto] table {
+  --db-table-columns-size: auto;
+  inline-size: fit-content;
+}
+.db-table table {
+  display: grid;
+}
+.db-table table caption {
+  grid-column: span var(--db-table-grid-cells, 1);
+  padding: var(--db-spacing-fixed-sm);
+  border-block-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  font-weight: bold;
+}