@db-ux/core-components 4.13.1-angular-signal-forms13-577b861 → 4.14.0-shell-52d18db

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;
 }