@db-ux/core-components 1.1.1 → 2.0.0-0-custom-select-16b8cce

package/build/components/select/select.scss

@@ -5,26 +5,13 @@
 @use "@db-ux/core-foundations/build/styles/fonts";
 @use "../../styles/internal/form-components";
 @use "../../styles/internal/component";
-
-%select-icon {
-	@extend %dropdown-icon;
-
-	&[data-icon] {
-		--db-form-has-before: 1;
-	}
-}
-
-$has-before-padding: calc(
-	var(--db-form-has-before) *
-		(#{form-components.$icon-size-sm} + #{variables.$db-spacing-fixed-sm})
-);
+@use "../../styles/select-components";
 
 .db-select {
-	--db-form-component-padding-inline-end: calc(
-		#{form-components.$font-size-height} + #{variables.$db-spacing-fixed-sm}
-	);
+	--db-form-component-padding-inline-end: #{select-components.$select-icon-padding};
 	// shared from form-components
 	@extend %select-icon;
+	@extend %select-placeholder;
 
 	min-inline-size: calc(
 		4 * #{variables.$db-sizing-md} + var(--db-form-has-before) *
@@ -34,7 +21,7 @@ $has-before-padding: calc(
 	@include form-components.set-default-form-component(select);
 
 	select {
-		text-indent: $has-before-padding;
+		text-indent: select-components.$has-before-padding;
 	}
 
 	// Most likely this wouldn't work on MacOS, but we're still progressively enhancing Windows by this
@@ -43,38 +30,6 @@ $has-before-padding: calc(
 		color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
 	}
 
-	&[data-hide-label="true"] {
-		--db-label-visible-height: 0;
-		--db-label-visible-spacing: 1;
-	}
-
-	[id$="-placeholder"] {
-		@extend %db-overwrite-font-size-md;
-
-		position: absolute;
-		pointer-events: none;
-		// we use the top of the element, the size of the label+label-margin-bottom and the font-size of the select/2
-		// for functional we have some rounding issues for rem, so we need 1px less
-		inset-block-start: calc(
-			0% +
-				(
-					#{form-components.$label-size-height-xs} +
-						#{variables.$db-spacing-fixed-xs}
-				) *
-				var(--db-label-visible-height, 1) +
-				var(--db-type-body-font-size-md) /
-				2 - var(--db-density-functional, 0) * 1px
-		);
-		inset-inline: $has-before-padding;
-		margin-inline-start: variables.$db-spacing-fixed-sm;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		inline-size: calc(
-			100% - var(--db-form-component-padding-inline-end) -
-				#{$has-before-padding} - #{variables.$db-spacing-fixed-sm}
-		);
-	}
 
 	&:has(> select option:checked:not([hidden])) {
 		[id$="-placeholder"] {

package/build/components/switch/switch.css

@@ -394,7 +394,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   user-select: none;
 }
 .db-switch:has(input:required):is(label)::after,
-.db-switch:has(input:required) label::after {
+.db-switch:has(input:required) > label::after, .db-switch[data-required=true]:is(label)::after,
+.db-switch[data-required=true] > label::after {
   content: "*";
   content: "*"/"";
   /* stylelint-disable-next-line db-ux/use-spacings */
@@ -434,7 +435,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-successful-on-bg-inverted-default);
 }
 .db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-successful-bg-inverted-contrast-high-hovered);
 }
 .db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
@@ -444,7 +445,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-successful-bg-inverted-contrast-high-pressed);
 }
 .db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
@@ -454,19 +455,19 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-switch:has(input:not([data-custom-validity]):required:user-valid):is(label),
-.db-switch:has(input:not([data-custom-validity]):required:user-valid) label {
+.db-switch:has(input:not([data-custom-validity]):required:user-valid) > label {
   color: var(--db-successful-on-bg-basic-emphasis-80-default);
 }
-.db-switch:has(input[data-custom-validity=valid]) .db-infotext {
+.db-switch:has(input[data-custom-validity=valid]) .db-infotext, .db-switch[data-custom-validity=valid] .db-infotext {
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.db-switch:has(input[data-custom-validity=valid]) .db-infotext[data-semantic=successful] {
+.db-switch:has(input[data-custom-validity=valid]) .db-infotext[data-semantic=successful], .db-switch[data-custom-validity=valid] .db-infotext[data-semantic=successful] {
   display: flex;
 }
-.db-switch:has(input[data-custom-validity=valid]) .db-infotext:not([data-semantic]) {
+.db-switch:has(input[data-custom-validity=valid]) .db-infotext:not([data-semantic]), .db-switch[data-custom-validity=valid] .db-infotext:not([data-semantic]) {
   display: none;
 }
-.db-switch:has(input[data-custom-validity=valid]) input {
+.db-switch:has(input[data-custom-validity=valid]) input, .db-switch[data-custom-validity=valid] input {
   --db-adaptive-bg-basic-transparent-semi: var(
   	--db-successful-bg-basic-transparent-semi-default
   );
@@ -477,41 +478,42 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   	--db-successful-bg-basic-transparent-pressed
   );
 }
-.db-switch:has(input[data-custom-validity=valid]) input:not(:checked), .db-switch:has(input[data-custom-validity=valid]) input:is([type=radio]) {
+.db-switch:has(input[data-custom-validity=valid]) input:not(:checked), .db-switch:has(input[data-custom-validity=valid]) input:is([type=radio]), .db-switch[data-custom-validity=valid] input:not(:checked), .db-switch[data-custom-validity=valid] input:is([type=radio]) {
   --db-check-element-border-color: var(
   	--db-successful-on-bg-basic-emphasis-70-default
   );
 }
-.db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked {
+.db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked, .db-switch[data-custom-validity=valid] input:not([type=radio]):checked {
   background-color: var(--db-successful-bg-inverted-contrast-high-default);
   color: var(--db-successful-on-bg-inverted-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked::before, .db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked::after {
+.db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked::before, .db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked::after, .db-switch[data-custom-validity=valid] input:not([type=radio]):checked::before, .db-switch[data-custom-validity=valid] input:not([type=radio]):checked::after {
   --db-icon-color: var(--db-successful-on-bg-inverted-default);
 }
-.db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+.db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]), .db-switch[data-custom-validity=valid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-successful-bg-inverted-contrast-high-hovered);
 }
-.db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input), .db-switch[data-custom-validity=valid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch[data-custom-validity=valid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
-.db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-switch[data-custom-validity=valid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch[data-custom-validity=valid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+.db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]), .db-switch[data-custom-validity=valid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-successful-bg-inverted-contrast-high-pressed);
 }
-.db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input), .db-switch[data-custom-validity=valid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch[data-custom-validity=valid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
-.db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-switch[data-custom-validity=valid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch[data-custom-validity=valid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-switch:has(input[data-custom-validity=valid]):is(label),
-.db-switch:has(input[data-custom-validity=valid]) label {
+.db-switch:has(input[data-custom-validity=valid]) > label, .db-switch[data-custom-validity=valid]:is(label),
+.db-switch[data-custom-validity=valid] > label {
   color: var(--db-successful-on-bg-basic-emphasis-80-default);
 }
 .db-switch:has(input:not([data-custom-validity]):required:user-invalid) .db-infotext[data-semantic=critical] {
@@ -545,7 +547,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-successful-on-bg-inverted-default);
 }
 .db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-successful-bg-inverted-contrast-high-hovered);
 }
 .db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
@@ -555,7 +557,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-successful-bg-inverted-contrast-high-pressed);
 }
 .db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
@@ -565,16 +567,16 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-switch:has(input:not([data-custom-validity]):required:user-invalid):is(label),
-.db-switch:has(input:not([data-custom-validity]):required:user-invalid) label {
+.db-switch:has(input:not([data-custom-validity]):required:user-invalid) > label {
   color: var(--db-critical-on-bg-basic-emphasis-80-default);
 }
-.db-switch:has(input[data-custom-validity=invalid]) .db-infotext[data-semantic=critical] {
+.db-switch:has(input[data-custom-validity=invalid]) .db-infotext[data-semantic=critical], .db-switch[data-custom-validity=invalid] .db-infotext[data-semantic=critical] {
   display: flex;
 }
-.db-switch:has(input[data-custom-validity=invalid]) .db-infotext:not([data-semantic]) {
+.db-switch:has(input[data-custom-validity=invalid]) .db-infotext:not([data-semantic]), .db-switch[data-custom-validity=invalid] .db-infotext:not([data-semantic]) {
   display: none;
 }
-.db-switch:has(input[data-custom-validity=invalid]) input {
+.db-switch:has(input[data-custom-validity=invalid]) input, .db-switch[data-custom-validity=invalid] input {
   --db-adaptive-bg-basic-transparent-semi: var(
   	--db-critical-bg-basic-transparent-semi-default
   );
@@ -585,83 +587,84 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   	--db-critical-bg-basic-transparent-pressed
   );
 }
-.db-switch:has(input[data-custom-validity=invalid]) input:not(:checked), .db-switch:has(input[data-custom-validity=invalid]) input:is([type=radio]) {
+.db-switch:has(input[data-custom-validity=invalid]) input:not(:checked), .db-switch:has(input[data-custom-validity=invalid]) input:is([type=radio]), .db-switch[data-custom-validity=invalid] input:not(:checked), .db-switch[data-custom-validity=invalid] input:is([type=radio]) {
   --db-check-element-border-color: var(
   	--db-critical-on-bg-basic-emphasis-70-default
   );
 }
-.db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked {
+.db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked, .db-switch[data-custom-validity=invalid] input:not([type=radio]):checked {
   background-color: var(--db-successful-bg-inverted-contrast-high-default);
   color: var(--db-successful-on-bg-inverted-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked::before, .db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked::after {
+.db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked::before, .db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked::after, .db-switch[data-custom-validity=invalid] input:not([type=radio]):checked::before, .db-switch[data-custom-validity=invalid] input:not([type=radio]):checked::after {
   --db-icon-color: var(--db-successful-on-bg-inverted-default);
 }
-.db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+.db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]), .db-switch[data-custom-validity=invalid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-successful-bg-inverted-contrast-high-hovered);
 }
-.db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input), .db-switch[data-custom-validity=invalid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch[data-custom-validity=invalid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
-.db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-switch[data-custom-validity=invalid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch[data-custom-validity=invalid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+.db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]), .db-switch[data-custom-validity=invalid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-successful-bg-inverted-contrast-high-pressed);
 }
-.db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input), .db-switch[data-custom-validity=invalid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch[data-custom-validity=invalid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
-.db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-switch[data-custom-validity=invalid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch[data-custom-validity=invalid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-switch:has(input[data-custom-validity=invalid]):is(label),
-.db-switch:has(input[data-custom-validity=invalid]) label {
+.db-switch:has(input[data-custom-validity=invalid]) > label, .db-switch[data-custom-validity=invalid]:is(label),
+.db-switch[data-custom-validity=invalid] > label {
   color: var(--db-critical-on-bg-basic-emphasis-80-default);
 }
 .db-switch:has(input:disabled) {
   opacity: 0.4;
 }
 .db-switch:is(label),
-.db-switch label {
+.db-switch > label {
   display: flex;
   align-items: flex-start;
   position: relative;
   gap: var(--db-spacing-fixed-xs);
 }
 .db-switch:is(label):not(:has(input:disabled)),
-.db-switch label:not(:has(input:disabled)) {
+.db-switch > label:not(:has(input:disabled)) {
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
 .db-switch:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]),
-.db-switch label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+.db-switch > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
 }
 .db-switch:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input),
-.db-switch label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(textarea),
-.db-switch label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-switch > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(textarea),
+.db-switch > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
 .db-switch:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
-.db-switch label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
-.db-switch label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-switch > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
+.db-switch > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-switch:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]),
-.db-switch label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+.db-switch > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
 }
 .db-switch:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input),
-.db-switch label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(textarea),
-.db-switch label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-switch > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(textarea),
+.db-switch > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
 .db-switch:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
-.db-switch label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
-.db-switch label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-switch > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
+.db-switch > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-switch input {
@@ -677,7 +680,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
 .db-switch input:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-transparent-hovered);
 }
 .db-switch input:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch input:hover:not(:disabled, [aria-disabled=true]):is(input) {
@@ -687,7 +690,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-switch input:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-transparent-pressed);
 }
 .db-switch input:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch input:active:not(:disabled, [aria-disabled=true]):is(input) {
@@ -706,7 +709,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   margin-inline-end: 0;
 }
 .db-switch:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
 }
 .db-switch:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:active:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
@@ -769,7 +772,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
 }
 .db-switch > input:checked:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-inverted-contrast-max-hovered);
 }
 .db-switch > input:checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch > input:checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
@@ -779,7 +782,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-switch > input:checked:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-inverted-contrast-max-pressed);
 }
 .db-switch > input:checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch > input:checked:active:not(:disabled, [aria-disabled=true]):is(input) {
@@ -789,7 +792,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-switch > input:checked:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   border-color: var(--db-adaptive-on-bg-basic-emphasis-100-hovered);
 }
 .db-switch > input:checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch > input:checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
@@ -799,7 +802,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-switch > input:checked:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   border-color: var(--db-adaptive-on-bg-basic-emphasis-100-pressed);
 }
 .db-switch > input:checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch > input:checked:active:not(:disabled, [aria-disabled=true]):is(input) {
@@ -842,7 +845,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
 .db-switch[data-emphasis=strong] > input:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-inverted-contrast-low-hovered);
   border-color: var(--db-adaptive-on-bg-basic-emphasis-70-hovered);
 }
@@ -853,7 +856,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-switch[data-emphasis=strong] > input:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-inverted-contrast-low-pressed);
   border-color: var(--db-adaptive-on-bg-basic-emphasis-70-pressed);
 }

package/build/components/tab-item/tab-item.css

@@ -25,16 +25,16 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   pointer-events: none !important;
 }
 
-.db-tab-item input:focus-visible::before {
+.db-tab-item input:not([data-disable-focus=true]):focus-visible::before {
   outline: var(--db-border-height-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-80-default));
   outline-offset: var(--db-border-height-xs);
   box-shadow: 0 0 0 var(--db-border-height-xs) var(--db-focus-box-shadow-bg-color, transparent);
 }
-.db-tab-item input:not([type=radio], [role=switch]):focus-visible::before {
+.db-tab-item input:not([data-disable-focus=true]):not([type=radio], [role=switch]):focus-visible::before {
   border-radius: var(--db-border-radius-xs);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
-  .db-tab-item input:focus-visible::before {
+  .db-tab-item input:not([data-disable-focus=true]):focus-visible::before {
     transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
   }
 }
@@ -68,7 +68,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
 .db-tab-item label:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
 }
 .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(:not(input:disabled)) {
   background-color: var(--db-adaptive-bg-basic-transparent-hovered);
@@ -83,7 +83,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-tab-item label:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
 }
 .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(:not(input:disabled)) {
   background-color: var(--db-adaptive-bg-basic-transparent-hovered);

package/build/components/tab-list/tab-list.css

@@ -103,6 +103,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }
 }
+@keyframes rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md
@@ -121,6 +126,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* Buttons */
   /* Up */
   /* Down */
+  /* Left */
+  /* Right */
 }
 .db-tab-list > ul::-webkit-scrollbar {
   z-index: 3;
@@ -133,7 +140,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   background-color: var(--db-adaptive-bg-basic-transparent-hovered);
 }
 .db-tab-list > ul:read-only::-webkit-scrollbar-track, .db-tab-list > ul:read-only::-webkit-scrollbar-button:single-button {
-  background-color: var(--db-adaptive-bg-basic-level-1-default) !important;
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
 }
 .db-tab-list > ul::-webkit-scrollbar-track {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
@@ -155,10 +162,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   background-color: var(--db-adaptive-bg-basic-transparent-pressed);
 }
 .db-tab-list > ul::-webkit-scrollbar-button:single-button:vertical:decrement {
-  background-image: var(--db-textarea-scrollbar-button-decrement);
+  border-start-end-radius: var(--db-border-radius-xs);
+  background-image: var(--db-scrollbar-button-vertical-decrement);
 }
 .db-tab-list > ul::-webkit-scrollbar-button:single-button:vertical:increment {
-  background-image: var(--db-textarea-scrollbar-button-increment);
+  background-image: var(--db-scrollbar-button-vertical-increment);
+}
+.db-tab-list > ul::-webkit-scrollbar-button:single-button:horizontal:decrement {
+  background-image: var(--db-scrollbar-button-horizontal-decrement);
+}
+.db-tab-list > ul::-webkit-scrollbar-button:single-button:horizontal:increment {
+  background-image: var(--db-scrollbar-button-horizontal-increment);
 }
 .db-tab-list > ul[data-variant=floating]::-webkit-resizer {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);