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

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

@@ -1,180 +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-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

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

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

@@ -1,128 +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-row[data-interactive=true]:not([data-disable-focus=true]):has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] 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);
-}
-@media (prefers-reduced-motion: no-preference) {
-  .db-table-row[data-interactive=true]:not([data-disable-focus=true]):has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):focus-visible)::after {
-    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
-  }
-}
-.db-table-row[data-interactive=true]:not([data-disable-focus=true]):not([type=radio], [role=switch]):has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):focus-visible)::after {
-  border-radius: var(--db-border-radius-xs);
-}
-
-.db-table-row {
-  display: var(--db-table-section-display, grid);
-  grid-template-columns: subgrid;
-  grid-column: 1/-1;
-}
-
-.db-table-row[data-interactive=true]::after, .db-table-row[data-interactive=true] :is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select)[data-icon-trailing]::before, .db-table-row[data-interactive=true] :is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] 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 :is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])):not([data-table-row-action=true]) {
-  position: relative;
-  z-index: 1;
-}
-.db-table-row[data-interactive=true]:has(input:is([type=radio],
-[type=checkbox]):is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):checked:not(:hover, :active)) {
-  background-color: var(--db-adaptive-bg-basic-level-2-default);
-}
-.db-table-row[data-interactive=true]:has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] 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-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"])):is(textarea), .db-table-row[data-interactive=true]:has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"])):is(input) {
-  cursor: initial;
-}
-.db-table-row[data-interactive=true]:has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"])):is(input[type=checkbox]), .db-table-row[data-interactive=true]:has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"])):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-table-row[data-interactive=true]:has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] 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-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):active:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"])):is(textarea), .db-table-row[data-interactive=true]:has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):active:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"])):is(input) {
-  cursor: initial;
-}
-.db-table-row[data-interactive=true]:has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):active:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"])):is(input[type=checkbox]), .db-table-row[data-interactive=true]:has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):active:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"])):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-table-row[data-interactive=true] :is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] 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-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):focus-visible {
-  outline: none;
-}
-.db-table-row[data-interactive=true]::after {
-  pointer-events: none;
-  z-index: 2;
-}

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

@@ -1,106 +0,0 @@
-@use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/colors";
-@use "@db-ux/core-foundations/build/styles/helpers";
-@use "./../../styles/internal/table-components";
-
-$interactive-elements: ':is(input,button,a,select,textarea,[role="button"],[role="link"],[tabindex]:not([tabindex="-1"]))';
-$interactive-row-action: '[data-table-row-action="true"]';
-$interactive-nested-child: "#{$interactive-row-action} input,textarea,select";
-$interactive-child: ":is(#{$interactive-row-action}#{$interactive-elements},#{$interactive-nested-child})";
-
-%full-absolute {
-	content: "";
-	position: absolute;
-	inset: 0;
-}
-
-@mixin table-row-interactive-checked($with-hover: ":not(:hover, :active)") {
-	&:has(
-		input:is(
-				[type="radio"],
-				[type="checkbox"]
-			)#{$interactive-child}:checked#{$with-hover}
-	) {
-		@content;
-	}
-}
-
-.db-table-row {
-	@extend %table-section-grid;
-
-	background-color: colors.$db-adaptive-bg-basic-level-1-default;
-
-	&[data-interactive="true"] {
-		position: relative;
-
-		td #{$interactive-elements}:not(#{$interactive-row-action}) {
-			position: relative;
-			z-index: 1;
-		}
-
-		@include table-row-interactive-checked {
-			background-color: colors.$db-adaptive-bg-basic-level-2-default;
-		}
-
-		&:has(
-			#{$interactive-child}:hover:not(
-					:disabled,
-					[aria-disabled="true"],
-					[tabindex="-1"]
-				)
-		) {
-			@include helpers.cursor-pointer {
-				background-color: colors.$db-adaptive-bg-basic-level-2-hovered;
-			}
-		}
-
-		&:has(
-			#{$interactive-child}:active:not(
-					:disabled,
-					[aria-disabled="true"],
-					[tabindex="-1"]
-				)
-		) {
-			@include helpers.cursor-pointer {
-				background-color: colors.$db-adaptive-bg-basic-level-2-pressed;
-			}
-		}
-
-		&:has(#{$interactive-child}:focus-visible) {
-			&::after {
-				@extend %focus-placeholder;
-			}
-		}
-
-		#{$interactive-child} {
-			// Reset some defaults
-			--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 */
-			&:focus-visible {
-				outline: none;
-			}
-
-			&:not([data-icon-trailing]) {
-				&::after {
-					@extend %full-absolute;
-				}
-			}
-
-			&[data-icon-trailing] {
-				&::before {
-					@extend %full-absolute;
-				}
-			}
-		}
-
-		&::after {
-			@extend %full-absolute;
-
-			pointer-events: none; // Ignore pointer events to use high z-index to show focus above elements
-			z-index: 2;
-		}
-	}
-}

package/build/styles/internal/_table-components.scss

@@ -1,60 +0,0 @@
-@use "@db-ux/core-foundations/build/styles/colors";
-@use "@db-ux/core-foundations/build/styles/variables";
-
-%table-section-grid {
-	display: var(--db-table-section-display, grid);
-	grid-template-columns: subgrid;
-	grid-column: 1 / -1;
-}
-
-%table-cell {
-	display: flex;
-
-	@for $span from 2 through 20 {
-		&[colspan="#{$span}"] {
-			grid-column: span var(--db-table-cell-span, #{$span});
-		}
-
-		&[rowspan="#{$span}"] {
-			grid-row: span var(--db-table-cell-span, #{$span});
-		}
-	}
-
-	&:not([data-horizontal-alignment]),
-	&[data-horizontal-alignment="start"] {
-		text-align: start;
-		justify-content: flex-start;
-	}
-
-	&[data-horizontal-alignment="center"] {
-		text-align: center;
-		justify-content: center;
-	}
-
-	&[data-horizontal-alignment="end"] {
-		text-align: end;
-		justify-content: flex-end;
-	}
-
-	&[data-vertical-alignment="start"] {
-		vertical-align: top;
-		align-items: flex-start;
-	}
-
-	&:not([data-vertical-alignment]),
-	&[data-vertical-alignment="center"] {
-		vertical-align: middle;
-		align-items: center;
-	}
-
-	&[data-vertical-alignment="end"] {
-		vertical-align: bottom;
-		align-items: flex-end;
-	}
-}
-
-%sub-header-strong {
-	background-color: colors.$db-adaptive-bg-vibrant-default;
-	color: colors.$db-adaptive-on-bg-vibrant-default;
-	border-color: colors.$db-adaptive-on-bg-basic-emphasis-70-default;
-}