@db-ux/core-components 4.10.2 → 4.11.0

package/build/components/table/table.scss

@@ -0,0 +1,293 @@
+@use "sass:string";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/fonts";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "@db-ux/core-foundations/build/styles/screen-sizes";
+@use "../table-row/table-row";
+@use "./../../styles/internal/component";
+@use "./../../styles/internal/table-components";
+
+%sizes {
+	&:not([data-size]),
+	&[data-size="medium"] {
+		:is(th, td) {
+			padding: variables.$db-spacing-fixed-xs;
+		}
+	}
+
+	&[data-size="large"] {
+		:is(th, td) {
+			padding: variables.$db-spacing-fixed-sm;
+		}
+	}
+
+	&[data-size="small"],
+	&[data-size="x-small"] {
+		:is(th, td) {
+			padding: variables.$db-spacing-fixed-2xs;
+		}
+	}
+
+	&[data-size="x-small"] {
+		@extend %db-overwrite-font-size-sm;
+	}
+}
+
+%divider {
+	&:is([data-divider="none"], [data-divider="vertical"]) {
+		table {
+			border-block-end: component.$component-border;
+		}
+	}
+
+	&:not([data-divider="none"]) {
+		&:not([data-variant="spaced"]) {
+			&[data-divider="both"],
+			&[data-divider="vertical"] {
+				tr {
+					> :is(td, th):not(:last-child) {
+						border-inline-end: component.$component-border;
+					}
+
+					> :is(db-table-header-cell, db-table-data-cell):not(
+							:last-child
+						) {
+						td,
+						th {
+							border-inline-end: component.$component-border;
+						}
+					}
+				}
+			}
+		}
+
+		&:not([data-divider]),
+		&[data-divider="both"],
+		&[data-divider="horizontal"] {
+			tr {
+				border-block-end: component.$component-border;
+			}
+		}
+	}
+}
+
+%set-grid-cells {
+	// NOTE: This selector counts DOM child elements per row to determine column count.
+	// When cells use colSpan, the logical column count is higher than the child count.
+	// For tables with colSpan, use the `columnSizes` prop or set
+	// `--db-table-grid-template-columns` directly to define the correct grid tracks.
+	@for $num from 1 through 20 {
+		&:has(
+				tr
+					> :is(
+						td,
+						th,
+						db-table-data-cell,
+						db-table-header-cell
+					):nth-child(#{$num})
+			):not(
+				:has(
+					tr
+						> :is(
+							td,
+							th,
+							db-table-data-cell,
+							db-table-header-cell
+						):nth-child(#{$num + 1})
+				)
+			) {
+			--db-table-grid-cells: #{$num};
+
+			$track-size: "";
+
+			@for $index from 0 through $num - 1 {
+				$track-size: $track-size +
+					" var(--db-table-column-size-#{$index},var(--db-table-columns-size, 1fr))";
+			}
+
+			grid-template-columns: var(
+				--db-table-grid-template-columns,
+				#{string.unquote($track-size)}
+			);
+		}
+	}
+}
+
+%spaced-table-variant {
+	table {
+		row-gap: variables.$db-spacing-fixed-xs;
+	}
+
+	:is(tfoot, tbody) {
+		row-gap: variables.$db-spacing-fixed-xs;
+
+		tr {
+			@extend %default-card;
+		}
+	}
+
+	thead {
+		row-gap: variables.$db-spacing-fixed-xs;
+
+		tr {
+			&:not([data-sub-header-emphasis]) {
+				@extend %transparent-border;
+			}
+
+			&[data-sub-header-emphasis] {
+				@extend %default-card;
+			}
+		}
+	}
+}
+
+%variant {
+	&:not([data-variant]),
+	&[data-variant="flat"],
+	&[data-variant="zebra"] {
+		table {
+			border-inline: component.$component-border;
+		}
+
+		thead {
+			border-block-start: component.$component-border;
+		}
+	}
+
+	&[data-variant="zebra"] {
+		tbody {
+			> db-table-row:nth-child(odd) > tr,
+			> tr:nth-child(odd) {
+				background-color: colors.$db-adaptive-bg-basic-level-2-default;
+			}
+		}
+
+		thead {
+			tr[data-sub-header-emphasis="weak"] {
+				@extend %sub-header-strong;
+			}
+		}
+	}
+
+	&[data-variant="spaced"] {
+		@extend %spaced-table-variant;
+	}
+
+	@container (inline-size < #{screen-sizes.$db-breakpoint-sm}) {
+		&[data-mobile-variant="list"] {
+			@extend %spaced-table-variant;
+
+			table {
+				--db-table-columns-size: 1fr;
+				--db-table-cell-span: 1;
+				--db-table-grid-template-columns: repeat(1, 1fr);
+
+				border-color: transparent;
+			}
+
+			:is(th, td)[data-header] {
+				gap: variables.$db-spacing-fixed-xs;
+
+				&::before {
+					// Screen reader would announce it twice
+					content: attr(data-header) ":" / "";
+					font-weight: bold;
+				}
+			}
+
+			td[data-horizontal-alignment="end"] {
+				justify-content: space-between;
+			}
+
+			thead {
+				border-block-start-color: transparent;
+
+				tr {
+					--db-table-section-display: flex;
+
+					flex-wrap: wrap;
+					gap: variables.$db-spacing-fixed-xs;
+				}
+			}
+		}
+	}
+}
+
+%sticky-header {
+	&[data-sticky-header="both"],
+	&[data-sticky-header="horizontal"] {
+		thead {
+			position: sticky;
+			inset-block-start: calc(-1 * #{variables.$db-border-width-xs});
+			z-index: 4;
+			background-color: colors.$db-adaptive-bg-basic-level-1-default;
+		}
+	}
+
+	&[data-sticky-header="both"],
+	&[data-sticky-header="vertical"] {
+		tfoot,
+		tbody {
+			th {
+				position: sticky;
+				inset-inline-start: calc(-1 * #{variables.$db-border-width-xs});
+				z-index: 3;
+				border-inline-end: component.$component-border;
+				background-color: colors.$db-adaptive-bg-basic-level-1-default;
+			}
+		}
+	}
+}
+
+.db-table {
+	@extend %divider;
+	@extend %variant;
+	@extend %sizes;
+	@extend %sticky-header;
+
+	container-type: inline-size;
+	background-color: colors.$db-adaptive-bg-basic-level-1-default;
+	inline-size: 100%;
+	// stylelint-disable-next-line db-ux/use-spacings
+	padding: variables.$db-border-width-xs; // offset for focus
+
+	&:not([data-width]),
+	&[data-width="full"] {
+		overflow: auto;
+
+		table {
+			inline-size: inherit;
+		}
+	}
+
+	&[data-width="auto"] {
+		display: flex;
+		justify-content: center;
+
+		table {
+			--db-table-columns-size: auto;
+
+			inline-size: fit-content;
+		}
+	}
+
+	table {
+		@extend %set-grid-cells;
+
+		display: grid;
+
+		caption {
+			grid-column: span var(--db-table-grid-cells, 1);
+			padding: variables.$db-spacing-fixed-sm;
+			border-block-start: component.$component-border;
+			font-weight: bold;
+		}
+	}
+
+	&:not([data-show-caption="true"]) {
+		caption {
+			@extend %a11y-visually-hidden;
+		}
+	}
+}

package/build/components/table-body/table-body.css

@@ -0,0 +1,8 @@
+/* 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-body {
+  display: var(--db-table-section-display, grid);
+  grid-template-columns: subgrid;
+  grid-column: 1/-1;
+}

package/build/components/table-body/table-body.scss

@@ -0,0 +1,5 @@
+@use "./../../styles/internal/table-components";
+
+.db-table-body {
+	@extend %table-section-grid;
+}

package/build/components/table-caption/table-caption.css

@@ -0,0 +1,3 @@
+.db-table-caption {
+  /* Add your styles for this new component here */
+}

package/build/components/table-caption/table-caption.scss

@@ -0,0 +1,3 @@
+.db-table-caption {
+	/* Add your styles for this new component here */
+}

package/build/components/table-data-cell/table-data-cell.css

@@ -0,0 +1,144 @@
+/* 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-data-cell {
+  display: flex;
+}
+[colspan="2"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 2);
+}
+[rowspan="2"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 2);
+}
+[colspan="3"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 3);
+}
+[rowspan="3"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 3);
+}
+[colspan="4"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 4);
+}
+[rowspan="4"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 4);
+}
+[colspan="5"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 5);
+}
+[rowspan="5"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 5);
+}
+[colspan="6"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 6);
+}
+[rowspan="6"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 6);
+}
+[colspan="7"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 7);
+}
+[rowspan="7"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 7);
+}
+[colspan="8"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 8);
+}
+[rowspan="8"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 8);
+}
+[colspan="9"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 9);
+}
+[rowspan="9"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 9);
+}
+[colspan="10"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 10);
+}
+[rowspan="10"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 10);
+}
+[colspan="11"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 11);
+}
+[rowspan="11"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 11);
+}
+[colspan="12"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 12);
+}
+[rowspan="12"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 12);
+}
+[colspan="13"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 13);
+}
+[rowspan="13"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 13);
+}
+[colspan="14"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 14);
+}
+[rowspan="14"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 14);
+}
+[colspan="15"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 15);
+}
+[rowspan="15"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 15);
+}
+[colspan="16"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 16);
+}
+[rowspan="16"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 16);
+}
+[colspan="17"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 17);
+}
+[rowspan="17"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 17);
+}
+[colspan="18"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 18);
+}
+[rowspan="18"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 18);
+}
+[colspan="19"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 19);
+}
+[rowspan="19"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 19);
+}
+[colspan="20"].db-table-data-cell {
+  grid-column: span var(--db-table-cell-span, 20);
+}
+[rowspan="20"].db-table-data-cell {
+  grid-row: span var(--db-table-cell-span, 20);
+}
+.db-table-data-cell:not([data-horizontal-alignment]), [data-horizontal-alignment=start].db-table-data-cell {
+  text-align: start;
+  justify-content: flex-start;
+}
+[data-horizontal-alignment=center].db-table-data-cell {
+  text-align: center;
+  justify-content: center;
+}
+[data-horizontal-alignment=end].db-table-data-cell {
+  text-align: end;
+  justify-content: flex-end;
+}
+[data-vertical-alignment=start].db-table-data-cell {
+  vertical-align: top;
+  align-items: flex-start;
+}
+.db-table-data-cell:not([data-vertical-alignment]), [data-vertical-alignment=center].db-table-data-cell {
+  vertical-align: middle;
+  align-items: center;
+}
+[data-vertical-alignment=end].db-table-data-cell {
+  vertical-align: bottom;
+  align-items: flex-end;
+}

package/build/components/table-data-cell/table-data-cell.scss

@@ -0,0 +1,5 @@
+@use "./../../styles/internal/table-components";
+
+.db-table-data-cell {
+	@extend %table-cell;
+}

package/build/components/table-footer/table-footer.css

@@ -0,0 +1,8 @@
+/* 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-footer {
+  display: var(--db-table-section-display, grid);
+  grid-template-columns: subgrid;
+  grid-column: 1/-1;
+}

package/build/components/table-footer/table-footer.scss

@@ -0,0 +1,5 @@
+@use "./../../styles/internal/table-components";
+
+.db-table-footer {
+	@extend %table-section-grid;
+}

package/build/components/table-head/table-head.css

@@ -0,0 +1,19 @@
+/* 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-head {
+  display: var(--db-table-section-display, grid);
+  grid-template-columns: subgrid;
+  grid-column: 1/-1;
+}
+
+.db-table-head tr[data-sub-header-emphasis=strong] {
+  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-head tr[data-sub-header-emphasis=weak] {
+  background-color: var(--db-adaptive-bg-basic-level-3-default);
+  color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
+}

package/build/components/table-head/table-head.scss

@@ -0,0 +1,17 @@
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "./../../styles/internal/table-components";
+
+.db-table-head {
+	@extend %table-section-grid;
+
+	tr {
+		&[data-sub-header-emphasis="weak"] {
+			background-color: colors.$db-adaptive-bg-basic-level-3-default;
+			color: colors.$db-adaptive-on-bg-basic-emphasis-80-default;
+		}
+
+		&[data-sub-header-emphasis="strong"] {
+			@extend %sub-header-strong;
+		}
+	}
+}

package/build/components/table-header-cell/table-header-cell.css

@@ -0,0 +1,148 @@
+/* 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-header-cell {
+  display: flex;
+}
+[colspan="2"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 2);
+}
+[rowspan="2"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 2);
+}
+[colspan="3"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 3);
+}
+[rowspan="3"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 3);
+}
+[colspan="4"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 4);
+}
+[rowspan="4"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 4);
+}
+[colspan="5"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 5);
+}
+[rowspan="5"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 5);
+}
+[colspan="6"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 6);
+}
+[rowspan="6"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 6);
+}
+[colspan="7"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 7);
+}
+[rowspan="7"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 7);
+}
+[colspan="8"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 8);
+}
+[rowspan="8"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 8);
+}
+[colspan="9"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 9);
+}
+[rowspan="9"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 9);
+}
+[colspan="10"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 10);
+}
+[rowspan="10"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 10);
+}
+[colspan="11"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 11);
+}
+[rowspan="11"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 11);
+}
+[colspan="12"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 12);
+}
+[rowspan="12"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 12);
+}
+[colspan="13"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 13);
+}
+[rowspan="13"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 13);
+}
+[colspan="14"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 14);
+}
+[rowspan="14"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 14);
+}
+[colspan="15"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 15);
+}
+[rowspan="15"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 15);
+}
+[colspan="16"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 16);
+}
+[rowspan="16"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 16);
+}
+[colspan="17"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 17);
+}
+[rowspan="17"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 17);
+}
+[colspan="18"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 18);
+}
+[rowspan="18"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 18);
+}
+[colspan="19"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 19);
+}
+[rowspan="19"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 19);
+}
+[colspan="20"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 20);
+}
+[rowspan="20"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 20);
+}
+.db-table-header-cell:not([data-horizontal-alignment]), [data-horizontal-alignment=start].db-table-header-cell {
+  text-align: start;
+  justify-content: flex-start;
+}
+[data-horizontal-alignment=center].db-table-header-cell {
+  text-align: center;
+  justify-content: center;
+}
+[data-horizontal-alignment=end].db-table-header-cell {
+  text-align: end;
+  justify-content: flex-end;
+}
+[data-vertical-alignment=start].db-table-header-cell {
+  vertical-align: top;
+  align-items: flex-start;
+}
+.db-table-header-cell:not([data-vertical-alignment]), [data-vertical-alignment=center].db-table-header-cell {
+  vertical-align: middle;
+  align-items: center;
+}
+[data-vertical-alignment=end].db-table-header-cell {
+  vertical-align: bottom;
+  align-items: flex-end;
+}
+
+.db-table-header-cell[data-no-text=true] {
+  font-size: 0 !important;
+}

package/build/components/table-header-cell/table-header-cell.scss

@@ -0,0 +1,9 @@
+@use "./../../styles/internal/table-components";
+
+.db-table-header-cell {
+	@extend %table-cell;
+
+	&[data-no-text="true"] {
+		font-size: 0 !important;
+	}
+}