@db-ux/core-components 4.12.1 → 4.13.0-shell-f221975

package/build/components/tabs/tabs.css

@@ -3,19 +3,14 @@
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,
 [data-visually-hidden=true] {
-  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;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }
@@ -24,6 +19,7 @@
   content: "";
   position: absolute;
   border-radius: var(--db-border-radius-xs);
+  background: linear-gradient(135deg, var(--db-pride-red, var(--db-brand-on-bg-basic-emphasis-70-default)) 16.7%, var(--db-pride-orange, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-orange, var(--db-brand-on-bg-basic-emphasis-70-default)) 33.4%, var(--db-pride-yellow, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-yellow, var(--db-brand-on-bg-basic-emphasis-70-default)) 50.1%, var(--db-pride-green, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-green, var(--db-brand-on-bg-basic-emphasis-70-default)) 66.8%, var(--db-pride-blue, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-blue, var(--db-brand-on-bg-basic-emphasis-70-default)) 83.5%, var(--db-pride-violet, var(--db-brand-on-bg-basic-emphasis-70-default)) 0);
 }
 @media (prefers-reduced-motion: no-preference) {
   .db-tabs .db-tab-item::after {
@@ -31,6 +27,23 @@
   }
 }
 
+@keyframes popover-animation {
+  0% {
+    pointer-events: none;
+    opacity: 0;
+    transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
+  }
+  100% {
+    pointer-events: auto;
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
+  }
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
 .db-tabs db-tab-list:has([id$=-tab-0]:checked) ~ dbtabpanel > [id$=-tab-panel-0]:not([hidden]),
 .db-tabs db-tab-list:has([id$=-tab-0]:checked) ~ db-tab-panel > [id$=-tab-panel-0]:not([hidden]),
 .db-tabs dbtablist:has([id$=-tab-0]:checked) ~ dbtabpanel > [id$=-tab-panel-0]:not([hidden]),
@@ -103,7 +116,6 @@
   inline-size: 0;
   transform: translate(-50%, 0);
   inset-inline-start: 50%;
-  background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
   inset-block: auto calc(-1 * var(--db-spacing-fixed-xs));
 }
 .db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item:has(input:checked)::after {
@@ -123,8 +135,7 @@
   block-size: 0;
   inline-size: var(--db-border-width-xs);
   transform: translate(0, -50%);
-  inset-block: 50% auto;
-  background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
+  inset-block: var(--indicator-vertical-inset-block-start, 50%) auto;
   inset-inline-start: calc(-1 * var(--db-spacing-fixed-xs));
 }
 .db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item::after {
@@ -132,7 +143,7 @@
   z-index: -2;
 }
 .db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item:has(input:checked)::after {
-  block-size: 100%;
+  block-size: var(--indicator-vertical-block-size, 100%);
   inline-size: var(--db-border-width-xs);
 }
 @media (forced-colors: active), print {
@@ -207,7 +218,7 @@
   inline-size: 100%;
 }
 .db-tabs:not([data-orientation=vertical]) .db-tab-list {
-  /* horizontal track for pulse */
+  /* horizontal track for indicator */
 }
 .db-tabs:not([data-orientation=vertical]) .db-tab-list::before {
   block-size: var(--db-border-width-xs);
@@ -272,7 +283,7 @@
   overflow: visible;
 }
 .db-tabs[data-orientation=vertical] .db-tab-list {
-  /* vertical track for pulse */
+  /* vertical track for indicator */
 }
 .db-tabs[data-orientation=vertical] .db-tab-list::before {
   inline-size: var(--db-border-width-xs);
@@ -314,13 +325,36 @@
   text-align: center;
   justify-content: center;
 }
+.db-tabs[data-scroll-behavior=arrows] {
+  /*
+   * Scroll left / right buttons
+   */
+}
+.db-tabs[data-scroll-behavior=arrows] .overflow-scroll-left-button > .db-button, .db-tabs[data-scroll-behavior=arrows] .overflow-scroll-left-button:is(.db-button) {
+  inset-inline-start: var(--db-overflow-scroll-button-inset-inline-start, 0);
+}
+.db-tabs[data-scroll-behavior=arrows] .overflow-scroll-right-button > .db-button, .db-tabs[data-scroll-behavior=arrows] .overflow-scroll-right-button:is(.db-button) {
+  inset-inline-end: 0;
+}
+.db-tabs[data-scroll-behavior=arrows] .overflow-scroll-left-button > .db-button, .db-tabs[data-scroll-behavior=arrows] .overflow-scroll-left-button:is(.db-button),
+.db-tabs[data-scroll-behavior=arrows] .overflow-scroll-right-button > .db-button,
+.db-tabs[data-scroll-behavior=arrows] .overflow-scroll-right-button:is(.db-button) {
+  position: absolute;
+  z-index: 22;
+  inset-block: var(--db-overflow-scroll-button-inset-block, var(--db-spacing-fixed-xs));
+}
+@supports (scrollbar-width: none) {
+  .db-tabs[data-scroll-behavior=arrows] .db-tab-list > ul {
+    scrollbar-width: none;
+  }
+}
 .db-tabs[data-scroll-behavior=arrows] .db-tab-list > ul::-webkit-scrollbar {
   display: none;
 }
-.db-tabs[data-scroll-behavior=arrows]:has(.tabs-scroll-left)::before {
+.db-tabs[data-scroll-behavior=arrows]:has(.overflow-scroll-left-button)::before {
   content: "";
 }
-.db-tabs[data-scroll-behavior=arrows]:has(.tabs-scroll-right)::after {
+.db-tabs[data-scroll-behavior=arrows]:has(.overflow-scroll-right-button)::after {
   content: "";
 }
 .db-tabs[data-scroll-behavior=arrows]:has(.db-button)::before, .db-tabs[data-scroll-behavior=arrows]:has(.db-button)::after {
@@ -328,30 +362,12 @@
   z-index: 21;
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   inline-size: var(--db-sizing-md);
-  block-size: calc(var(--db-spacing-fixed-sm) + var(--db-sizing-md));
+  block-size: calc(var(--db-overflow-scroll-button-background-block-size, var(--db-spacing-fixed-sm)) + var(--db-sizing-md));
   flex: 0 0 auto;
 }
 .db-tabs[data-scroll-behavior=arrows]:has(.db-button)::before {
-  inset-inline-start: 0;
+  inset-inline-start: var(--db-overflow-scroll-button-inset-inline-start, 0);
 }
 .db-tabs[data-scroll-behavior=arrows]:has(.db-button)::after {
   inset-inline-end: 0;
 }
-.db-tabs[data-scroll-behavior=arrows] {
-  /*
-   * Scroll left / right buttons
-   */
-}
-.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-left > .db-button, .db-tabs[data-scroll-behavior=arrows] .tabs-scroll-left:is(.db-button) {
-  inset-inline-start: 0;
-}
-.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-right > .db-button, .db-tabs[data-scroll-behavior=arrows] .tabs-scroll-right:is(.db-button) {
-  inset-inline-end: 0;
-}
-.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-left > .db-button, .db-tabs[data-scroll-behavior=arrows] .tabs-scroll-left:is(.db-button),
-.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-right > .db-button,
-.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-right:is(.db-button) {
-  position: absolute;
-  z-index: 22;
-  inset-block: var(--db-spacing-fixed-xs);
-}

package/build/components/tabs/tabs.scss

@@ -1,7 +1,8 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "@db-ux/core-foundations/build/styles/colors";
 @use "../../styles/internal/form-components";
-@use "../../styles/internal/db-puls";
+@use "../../styles/internal/indicator";
+@use "../../styles/internal/scrollbar";
 @use "@db-ux/core-foundations/build/styles/helpers";
 
 $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
@@ -20,12 +21,12 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 	}
 }
 
-%horizontal-pulse {
+%horizontal-indicator {
 	.db-tab-item {
-		@include db-puls.set-db-puls-horizontal;
+		@include indicator.set-indicator-horizontal;
 
 		&:has(input:checked) {
-			@include db-puls.show-db-puls-horizontal;
+			@include indicator.show-indicator-horizontal;
 
 			&::after {
 				inset-block-end: calc(
@@ -40,9 +41,9 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 	}
 }
 
-%vertical-pulse {
+%vertical-indicator {
 	.db-tab-item {
-		@include db-puls.set-db-puls-vertical;
+		@include indicator.set-indicator-vertical;
 
 		&::after {
 			inset-inline-start: 0;
@@ -50,29 +51,20 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 		}
 
 		&:has(input:checked) {
-			@include db-puls.show-db-puls-vertical;
+			@include indicator.show-indicator-vertical;
 		}
 	}
 }
 
-%pulse-track {
+%indicator-track {
 	background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
 	content: "";
 	border-radius: variables.$db-border-radius-xs;
 	position: absolute;
 }
 
-@mixin angular-button-workaround() {
-	> .db-button,
-	&:is(.db-button) {
-		@content;
-	}
-}
-
 .db-tabs {
 	$db-tabs-z-index-tab-list: 20;
-	$db-tabs-z-index-button-background: 21;
-	$db-tabs-z-index-button: 22;
 
 	@extend %angular-workaround;
 	@include helpers.display(flex);
@@ -97,7 +89,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 	}
 
 	.db-tab-item {
-		@extend %db-puls;
+		@extend %indicator;
 	}
 
 	/*
@@ -111,9 +103,9 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 		}
 
 		.db-tab-list {
-			/* horizontal track for pulse */
+			/* horizontal track for indicator */
 			&::before {
-				@extend %pulse-track;
+				@extend %indicator-track;
 
 				block-size: variables.$db-border-width-xs;
 				inset-inline: variables.$db-spacing-fixed-xs;
@@ -127,7 +119,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 			}
 
 			> ul {
-				@extend %horizontal-pulse;
+				@extend %horizontal-indicator;
 
 				overflow: auto hidden;
 				inline-size: 100%;
@@ -217,9 +209,9 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 				}
 			}
 
-			/* vertical track for pulse */
+			/* vertical track for indicator */
 			&::before {
-				@extend %pulse-track;
+				@extend %indicator-track;
 
 				inline-size: variables.$db-border-width-xs;
 				inset-block: variables.$db-spacing-fixed-xs;
@@ -227,7 +219,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 			}
 
 			> ul {
-				@extend %vertical-pulse;
+				@extend %vertical-indicator;
 
 				flex-direction: column;
 				block-size: 100%;
@@ -294,71 +286,34 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 	}
 
 	&[data-scroll-behavior="arrows"] {
+		@include scrollbar.set-overflow-scroll-buttons;
+
 		.db-tab-list {
 			> ul {
+				@supports (scrollbar-width: none) {
+					scrollbar-width: none;
+				}
+
 				&::-webkit-scrollbar {
 					display: none;
 				}
 			}
 		}
 
-		&:has(.tabs-scroll-left) {
+		&:has(.overflow-scroll-left-button) {
 			&::before {
 				content: "";
 			}
 		}
 
-		&:has(.tabs-scroll-right) {
+		&:has(.overflow-scroll-right-button) {
 			&::after {
 				content: "";
 			}
 		}
 
 		&:has(.db-button) {
-			&::before,
-			&::after {
-				position: absolute;
-				z-index: $db-tabs-z-index-button-background;
-				background-color: colors.$db-adaptive-bg-basic-level-1-default;
-				inline-size: variables.$db-sizing-md;
-				block-size: calc(
-					#{variables.$db-spacing-fixed-sm} +
-						#{variables.$db-sizing-md}
-				);
-				flex: 0 0 auto;
-			}
-
-			&::before {
-				inset-inline-start: 0;
-			}
-
-			&::after {
-				inset-inline-end: 0;
-			}
-		}
-
-		/*
-		 * Scroll left / right buttons
-		 */
-		.tabs-scroll-left {
-			@include angular-button-workaround {
-				inset-inline-start: 0;
-			}
-		}
-
-		.tabs-scroll-right {
-			@include angular-button-workaround {
-				inset-inline-end: 0;
-			}
-		}
-
-		.tabs-scroll-left,
-		.tabs-scroll-right {
-			@include angular-button-workaround {
-				position: absolute;
-				z-index: $db-tabs-z-index-button;
-				inset-block: variables.$db-spacing-fixed-xs;
-			}
+			@include scrollbar.set-overflow-scroll-button-backgrounds;
 		}
 	}
 }

package/build/components/tag/tag.css

@@ -973,9 +973,7 @@
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 .db-tag:not([data-no-text=true]) {
-  --db-padding-inline-start: var(--db-spacing-fixed-2xs);
-  /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline: var(--db-padding-inline-start) var(--db-spacing-fixed-2xs);
+  padding-inline: var(--db-spacing-fixed-2xs);
 }
 .db-tag:not([data-no-text=true]):has(.db-tab-remove-button) {
   padding-inline-end: 0;
@@ -1119,17 +1117,14 @@
 }
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon-leading]:not([data-show-icon-leading=false])::before, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-show-icon=false])::before {
   position: absolute;
-  inset-block-start: calc(50% - 0.5em);
-  inset-inline-start: var(--db-icon-passing-inline-start, var(--db-spacing-fixed-2xs));
+  inset-block-start: var(--db-icon-passing-inset-block-start, calc(50% - 0.5em));
+  inset-inline-start: var(--db-icon-passing-inset-inline-start, var(--db-spacing-fixed-2xs));
   pointer-events: none;
   z-index: 1;
 }
-.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon-leading]:not([data-show-icon-leading=false]) label, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon-leading]:not([data-show-icon-leading=false]) button, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon-leading]:not([data-show-icon-leading=false]) a, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-show-icon=false]) label, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-show-icon=false]) button, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-show-icon=false]) a {
-  --db-padding-inline-start: calc(
-  	var(--db-spacing-fixed-2xs) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) + 1lh
-  );
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon-leading]:not([data-show-icon-leading=false]) > :is(label, button, a), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-show-icon=false]) > :is(label, button, a) {
   /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline-start: var(--db-padding-inline-start);
+  padding-inline-start: var(--db-icon-passing-padding-inline-start, calc(var(--db-spacing-fixed-2xs) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) + var(--db-icon-font-size)));
 }
 .db-tag:has(label, button:not(.db-tab-remove-button), a) input:checked {
   background-color: transparent;

package/build/components/tag/tag.scss

@@ -25,11 +25,7 @@
 	}
 
 	&:not([data-no-text="true"]) {
-		--db-padding-inline-start: #{variables.$db-spacing-fixed-2xs};
-
-		/* stylelint-disable-next-line db-ux/use-spacings */
-		padding-inline: var(--db-padding-inline-start)
-			#{variables.$db-spacing-fixed-2xs};
+		padding-inline: variables.$db-spacing-fixed-2xs;
 
 		&:has(.db-tab-remove-button) {
 			padding-inline-end: 0;

package/build/components/textarea/textarea.css

@@ -1,18 +1,13 @@
 .db-textarea[data-hide-label=true] > label, .db-visually-hidden,
 [data-visually-hidden=true] {
-  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;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }