@db-ux/core-components 4.13.1-angular-signal-forms12-ac097f6 → 4.14.0

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;
 }
@@ -32,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]),
@@ -313,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 {
@@ -327,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

@@ -2,6 +2,7 @@
 @use "@db-ux/core-foundations/build/styles/colors";
 @use "../../styles/internal/form-components";
 @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];
@@ -62,17 +63,8 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 	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);
@@ -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,16 @@
 }
 .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-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),
+.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;
 }