@db-ux/core-components 4.10.2 → 4.11.1

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

@@ -0,0 +1,230 @@
+/* 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-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);
+}
+
+.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-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;
+}

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

@@ -0,0 +1,116 @@
+@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-row-action: '[data-table-row-trigger="true"]';
+$interactive-nested-child: "#{$interactive-row-action} :is(input, textarea, select)";
+$interactive-child: ":is(#{$interactive-row-action}:is(#{helpers.$interactive-elements}),#{$interactive-nested-child})";
+
+%full-absolute {
+	content: "";
+	position: absolute;
+	inset: 0;
+}
+
+@mixin table-row-interactive-checked {
+	&:has(
+		input:is([type="radio"], [type="checkbox"])#{$interactive-child}:checked
+	) {
+		@content;
+	}
+}
+
+@mixin table-row-interactive-state($state: "hover") {
+	&:has(
+		#{$interactive-child}:#{$state}:not(
+				:disabled,
+				[aria-disabled="true"],
+				[tabindex="-1"]
+			)
+	) {
+		cursor: helpers.$cursor-pointer;
+		@content;
+	}
+}
+
+.db-table-row {
+	@extend %table-section-grid;
+
+	background-color: colors.$db-adaptive-bg-basic-level-1-default;
+
+	&[data-interactive="true"] {
+		position: relative;
+
+		td :not(#{$interactive-row-action}) {
+			position: relative;
+			z-index: 1;
+		}
+
+		@include table-row-interactive-checked {
+			@extend %db-informational-variables;
+
+			background-color: colors.$db-adaptive-bg-basic-level-2-default;
+
+			&,
+			span,
+			p,
+			a {
+				font-weight: bold;
+			}
+
+			@include table-row-interactive-state {
+				background-color: colors.$db-adaptive-bg-basic-level-2-hovered;
+			}
+
+			@include table-row-interactive-state("active") {
+				background-color: colors.$db-adaptive-bg-basic-level-2-pressed;
+			}
+		}
+
+		@include table-row-interactive-state {
+			background-color: colors.$db-adaptive-bg-basic-level-2-hovered;
+		}
+
+		@include table-row-interactive-state("active") {
+			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/components/tabs/tabs.css

@@ -27,7 +27,7 @@
 }
 @media (prefers-reduced-motion: no-preference) {
   .db-tabs .db-tab-item::after {
-    transition: height var(--db-transition-duration-fast) var(--db-transition-timing-emotional), width var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
+    transition: block-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional), inline-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
   }
 }
 

package/build/components/tag/tag.css

@@ -1,5 +1,7 @@
-.db-tag label, .db-tag a {
-  transition: outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
+@media (prefers-reduced-motion: no-preference) {
+  .db-tag label, .db-tag a {
+    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
+  }
 }
 
 @keyframes popover-animation {

package/build/components/textarea/textarea.css

@@ -73,8 +73,10 @@ input[type=radio]:checked) > label {
   display: none;
 }
 
-.db-textarea[data-variant=floating]:has(textarea:is(:focus-within, :not(:placeholder-shown)))::before, .db-textarea textarea::-webkit-scrollbar, .db-textarea textarea::-webkit-scrollbar-corner {
-  transition: outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
+@media (prefers-reduced-motion: no-preference) {
+  .db-textarea[data-variant=floating]:has(textarea:is(:focus-within, :not(:placeholder-shown)))::before, .db-textarea textarea::-webkit-scrollbar, .db-textarea textarea::-webkit-scrollbar-corner {
+    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
+  }
 }
 
 @keyframes popover-animation {