@db-ux/core-components 4.5.4-table-c758ae7 → 4.5.4-tailwind-inline-5d37a00

package/build/components/table/table.scss

@@ -1,297 +0,0 @@
-@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="floating"]) {
-			&[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 {
-	@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)}
-			);
-		}
-	}
-}
-
-%floating-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="joined"],
-	&[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;
-			}
-
-			.db-table-row {
-				&[data-interactive="true"] {
-					@include table-row.table-row-interactive-checked("") {
-						@extend %db-informational-variables;
-					}
-				}
-			}
-		}
-
-		thead {
-			tr[data-sub-header-emphasis="weak"] {
-				@extend %sub-header-strong;
-			}
-		}
-	}
-
-	&[data-variant="floating"] {
-		@extend %floating-table-variant;
-	}
-
-	@container (inline-size < #{screen-sizes.$db-breakpoint-sm}) {
-		&[data-mobile-variant="list"] {
-			@extend %floating-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

@@ -1,40 +0,0 @@
-/* Variants for adaptive components like input, select, notification, ... */
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-.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

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

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

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

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

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

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

@@ -1,176 +0,0 @@
-/* Variants for adaptive components like input, select, notification, ... */
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-.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

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

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

@@ -1,40 +0,0 @@
-/* Variants for adaptive components like input, select, notification, ... */
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-.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

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

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

@@ -1,51 +0,0 @@
-/* Variants for adaptive components like input, select, notification, ... */
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-.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

@@ -1,17 +0,0 @@
-@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;
-		}
-	}
-}