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

package/build/components/textarea/textarea.css

@@ -11,7 +11,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 	- %db-font-size-md
 	- %db-overwrite-font-size-md
  */
-.db-textarea[data-variant=floating] label, .db-textarea textarea {
+.db-textarea[data-variant=floating] > label, .db-textarea textarea {
   /* Those variables are only for components to calculate heights and change icons */
   --db-icon-font-weight: var(--db-base-body-icon-weight-md);
   --db-icon-font-size: var(--db-base-body-icon-font-size-md);
@@ -27,7 +27,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   font-size: var(--db-type-body-font-size-sm);
 }
 
-.db-textarea label {
+.db-textarea > label {
   /* Those variables are only for components to calculate heights and change icons */
   --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
   --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
@@ -37,7 +37,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 .db-textarea[data-variant=floating]:has(textarea:focus-within,
 textarea:is(input, textarea):not(:placeholder-shown),
-> select option:checked:not([hidden])) label {
+> select option:checked:not([hidden]),
+input[type=checkbox]:checked) > label {
   /* Those variables are only for components to calculate heights and change icons */
   --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
   --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
@@ -46,7 +47,7 @@ textarea:is(input, textarea):not(:placeholder-shown),
 }
 
 /* Variants for adaptive components like input, select, notification, ... */
-.db-textarea[data-hide-label=true] label, .db-visually-hidden,
+.db-textarea[data-hide-label=true] > label, .db-visually-hidden,
 [data-visually-hidden=true] {
   clip: rect(0, 0, 0, 0) !important;
   overflow: hidden !important;
@@ -80,7 +81,7 @@ textarea:is(input, textarea):not(:placeholder-shown),
 .db-textarea .db-infotext {
   margin-block-start: var(--db-spacing-fixed-2xs);
 }
-.db-textarea .db-infotext[data-semantic] {
+.db-textarea .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
   display: none;
 }
 
@@ -162,10 +163,17 @@ textarea:is(input, textarea):not(:placeholder-shown),
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }
 }
+@keyframes rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
 .db-textarea textarea {
   /* Buttons */
   /* Up */
   /* Down */
+  /* Left */
+  /* Right */
 }
 .db-textarea textarea::-webkit-scrollbar {
   z-index: 3;
@@ -178,7 +186,7 @@ textarea:is(input, textarea):not(:placeholder-shown),
   background-color: var(--db-adaptive-bg-basic-transparent-hovered);
 }
 .db-textarea textarea:read-only::-webkit-scrollbar-track, .db-textarea textarea: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-textarea textarea::-webkit-scrollbar-track {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
@@ -200,10 +208,17 @@ textarea:is(input, textarea):not(:placeholder-shown),
   background-color: var(--db-adaptive-bg-basic-transparent-pressed);
 }
 .db-textarea textarea::-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-textarea textarea::-webkit-scrollbar-button:single-button:vertical:increment {
-  background-image: var(--db-textarea-scrollbar-button-increment);
+  background-image: var(--db-scrollbar-button-vertical-increment);
+}
+.db-textarea textarea::-webkit-scrollbar-button:single-button:horizontal:decrement {
+  background-image: var(--db-scrollbar-button-horizontal-decrement);
+}
+.db-textarea textarea::-webkit-scrollbar-button:single-button:horizontal:increment {
+  background-image: var(--db-scrollbar-button-horizontal-increment);
 }
 .db-textarea textarea[data-variant=floating]::-webkit-resizer {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
@@ -236,61 +251,70 @@ textarea:is(input, textarea):not(:placeholder-shown),
   resize: vertical;
 }
 
+.db-textarea {
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+}
 .db-textarea {
   --db-form-has-before: 0;
   position: relative;
   display: flex;
   flex-direction: column;
 }
-.db-textarea[data-variant=floating] label {
+.db-textarea[data-variant=floating], .db-textarea[data-hide-label=true] {
+  --db-label-visible-above: 0;
+}
+.db-textarea[data-variant=floating] > label {
   opacity: 0.69;
   position: absolute;
   z-index: 2;
   inset-block-start: calc((var(--db-sizing-md) - var(--db-icon-font-size)) / 2);
-  inset-inline: var(--db-form-component-padding-inline-start, var(--db-spacing-fixed-sm));
+  inset-inline: var(--db-form-component-padding-inline-start, var(--db-spacing-fixed-sm)) var(--db-form-component-padding-inline-end, var(--db-spacing-fixed-sm));
   pointer-events: none;
 }
-.db-textarea[data-variant=floating]::after, .db-textarea[data-variant=floating]::before {
-  inset-block-start: calc(var(--db-sizing-md) / 2 - var(--db-icon-font-size) / 2);
-}
 .db-textarea[data-variant=floating] [id$=-placeholder] {
   inset-block-start: calc(50% - 0.5em + var(--db-spacing-fixed-3xs));
 }
-.db-textarea[data-variant=floating] textarea {
-  padding-block-start: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
 .db-textarea[data-variant=floating] textarea::placeholder,
-.db-textarea[data-variant=floating] textarea + [id$=-placeholder] {
+.db-textarea[data-variant=floating] [id$=-placeholder] {
   transition: none;
   opacity: 0;
 }
+.db-textarea[data-variant=floating] textarea {
+  padding-block-start: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-textarea[data-variant=floating]:has(textarea:focus-within,
 textarea:is(input, textarea):not(:placeholder-shown),
-> select option:checked:not([hidden])) label {
+> select option:checked:not([hidden]),
+input[type=checkbox]:checked) > label {
   inset-block-start: var(--db-spacing-fixed-2xs);
   opacity: 1;
 }
 .db-textarea[data-variant=floating]:has(textarea:focus-within,
 textarea:is(input, textarea):not(:placeholder-shown),
-> select option:checked:not([hidden])) textarea::placeholder,
+> select option:checked:not([hidden]),
+input[type=checkbox]:checked) textarea::placeholder,
 .db-textarea[data-variant=floating]:has(textarea:focus-within,
 textarea:is(input, textarea):not(:placeholder-shown),
-> select option:checked:not([hidden])) textarea + [id$=-placeholder] {
+> select option:checked:not([hidden]),
+input[type=checkbox]:checked) [id$=-placeholder] {
   opacity: 0.69;
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   .db-textarea[data-variant=floating]:has(textarea:focus-within,
   textarea:is(input, textarea):not(:placeholder-shown),
-  > select option:checked:not([hidden])) textarea::placeholder,
+  > select option:checked:not([hidden]),
+  input[type=checkbox]:checked) textarea::placeholder,
   .db-textarea[data-variant=floating]:has(textarea:focus-within,
   textarea:is(input, textarea):not(:placeholder-shown),
-  > select option:checked:not([hidden])) textarea + [id$=-placeholder] {
+  > select option:checked:not([hidden]),
+  input[type=checkbox]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
 .db-textarea:has(textarea:required):is(label)::after,
-.db-textarea:has(textarea:required) label::after {
+.db-textarea:has(textarea:required) > label::after, .db-textarea[data-required=true]:is(label)::after,
+.db-textarea[data-required=true] > label::after {
   content: "*";
   content: "*"/"";
   /* stylelint-disable-next-line db-ux/use-spacings */
@@ -310,13 +334,18 @@ textarea:is(input, textarea):not(:placeholder-shown),
   --db-adaptive-bg-basic-transparent-pressed: var(
   	--db-successful-bg-basic-transparent-pressed
   );
-  --db-adaptive-default: var(
+  --db-adaptive-on-bg-basic-emphasis-100-default: var(
   	--db-successful-on-bg-basic-emphasis-100-default
   );
   --db-adaptive-on-bg-basic-emphasis-60-default: var(
   	--db-successful-on-bg-basic-emphasis-60-default
   );
 }
+.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) textarea,
+.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) [id$=-placeholder] {
+  color: var(--db-successful-on-bg-basic-emphasis-100-default);
+  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
+}
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) .db-infotext {
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
@@ -326,12 +355,7 @@ textarea:is(input, textarea):not(:placeholder-shown),
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) .db-infotext:not([data-semantic]) {
   display: none;
 }
-.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) textarea,
-.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) [id$=-placeholder] {
-  color: var(--db-successful-on-bg-basic-emphasis-100-default);
-  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
-}
-.db-textarea:has(textarea[data-custom-validity=valid]) {
+.db-textarea:has(textarea[data-custom-validity=valid]), .db-textarea[data-custom-validity=valid] {
   --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
   	--db-successful-bg-basic-transparent-full-default
@@ -345,27 +369,28 @@ textarea:is(input, textarea):not(:placeholder-shown),
   --db-adaptive-bg-basic-transparent-pressed: var(
   	--db-successful-bg-basic-transparent-pressed
   );
-  --db-adaptive-default: var(
+  --db-adaptive-on-bg-basic-emphasis-100-default: var(
   	--db-successful-on-bg-basic-emphasis-100-default
   );
   --db-adaptive-on-bg-basic-emphasis-60-default: var(
   	--db-successful-on-bg-basic-emphasis-60-default
   );
 }
-.db-textarea:has(textarea[data-custom-validity=valid]) .db-infotext {
+.db-textarea:has(textarea[data-custom-validity=valid]) textarea,
+.db-textarea:has(textarea[data-custom-validity=valid]) [id$=-placeholder], .db-textarea[data-custom-validity=valid] textarea,
+.db-textarea[data-custom-validity=valid] [id$=-placeholder] {
+  color: var(--db-successful-on-bg-basic-emphasis-100-default);
+  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
+}
+.db-textarea:has(textarea[data-custom-validity=valid]) .db-infotext, .db-textarea[data-custom-validity=valid] .db-infotext {
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.db-textarea:has(textarea[data-custom-validity=valid]) .db-infotext[data-semantic=successful] {
+.db-textarea:has(textarea[data-custom-validity=valid]) .db-infotext[data-semantic=successful], .db-textarea[data-custom-validity=valid] .db-infotext[data-semantic=successful] {
   display: flex;
 }
-.db-textarea:has(textarea[data-custom-validity=valid]) .db-infotext:not([data-semantic]) {
+.db-textarea:has(textarea[data-custom-validity=valid]) .db-infotext:not([data-semantic]), .db-textarea[data-custom-validity=valid] .db-infotext:not([data-semantic]) {
   display: none;
 }
-.db-textarea:has(textarea[data-custom-validity=valid]) textarea,
-.db-textarea:has(textarea[data-custom-validity=valid]) [id$=-placeholder] {
-  color: var(--db-successful-on-bg-basic-emphasis-100-default);
-  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
-}
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) {
   --db-textarea-read-only: var(--db-critical-bg-basic-level-1-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
@@ -380,25 +405,25 @@ textarea:is(input, textarea):not(:placeholder-shown),
   --db-adaptive-bg-basic-transparent-pressed: var(
   	--db-critical-bg-basic-transparent-pressed
   );
-  --db-adaptive-default: var(
+  --db-adaptive-on-bg-basic-emphasis-100-default: var(
   	--db-critical-on-bg-basic-emphasis-100-default
   );
   --db-adaptive-on-bg-basic-emphasis-60-default: var(
   	--db-critical-on-bg-basic-emphasis-60-default
   );
 }
+.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) textarea,
+.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) [id$=-placeholder] {
+  color: var(--db-critical-on-bg-basic-emphasis-100-default);
+  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
+}
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) .db-infotext[data-semantic=critical] {
   display: flex;
 }
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) .db-infotext:not([data-semantic]) {
   display: none;
 }
-.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) textarea,
-.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) [id$=-placeholder] {
-  color: var(--db-critical-on-bg-basic-emphasis-100-default);
-  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
-}
-.db-textarea:has(textarea[data-custom-validity=invalid]) {
+.db-textarea:has(textarea[data-custom-validity=invalid]), .db-textarea[data-custom-validity=invalid] {
   --db-textarea-read-only: var(--db-critical-bg-basic-level-1-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
   	--db-critical-bg-basic-transparent-full-default
@@ -412,23 +437,28 @@ textarea:is(input, textarea):not(:placeholder-shown),
   --db-adaptive-bg-basic-transparent-pressed: var(
   	--db-critical-bg-basic-transparent-pressed
   );
-  --db-adaptive-default: var(
+  --db-adaptive-on-bg-basic-emphasis-100-default: var(
   	--db-critical-on-bg-basic-emphasis-100-default
   );
   --db-adaptive-on-bg-basic-emphasis-60-default: var(
   	--db-critical-on-bg-basic-emphasis-60-default
   );
 }
-.db-textarea:has(textarea[data-custom-validity=invalid]) .db-infotext[data-semantic=critical] {
+.db-textarea:has(textarea[data-custom-validity=invalid]) textarea,
+.db-textarea:has(textarea[data-custom-validity=invalid]) [id$=-placeholder], .db-textarea[data-custom-validity=invalid] textarea,
+.db-textarea[data-custom-validity=invalid] [id$=-placeholder] {
+  color: var(--db-critical-on-bg-basic-emphasis-100-default);
+  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
+}
+.db-textarea:has(textarea[data-custom-validity=invalid]) .db-infotext[data-semantic=critical], .db-textarea[data-custom-validity=invalid] .db-infotext[data-semantic=critical] {
   display: flex;
 }
-.db-textarea:has(textarea[data-custom-validity=invalid]) .db-infotext:not([data-semantic]) {
+.db-textarea:has(textarea[data-custom-validity=invalid]) .db-infotext:not([data-semantic]), .db-textarea[data-custom-validity=invalid] .db-infotext:not([data-semantic]) {
   display: none;
 }
-.db-textarea:has(textarea[data-custom-validity=invalid]) textarea,
-.db-textarea:has(textarea[data-custom-validity=invalid]) [id$=-placeholder] {
-  color: var(--db-critical-on-bg-basic-emphasis-100-default);
-  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
+.db-textarea textarea::placeholder,
+.db-textarea [id$=-placeholder] {
+  opacity: 0.69;
 }
 .db-textarea textarea {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
@@ -440,12 +470,8 @@ textarea:is(input, textarea):not(:placeholder-shown),
   padding-inline: var(--db-form-component-padding-inline-start, var(--db-spacing-fixed-sm)) var(--db-form-component-padding-inline-end, var(--db-spacing-fixed-sm));
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-textarea textarea::placeholder,
-.db-textarea textarea + [id$=-placeholder] {
-  opacity: 0.69;
-}
 .db-textarea textarea:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-transparent-hovered);
 }
 .db-textarea textarea:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-textarea textarea:hover:not(:disabled, [aria-disabled=true]):is(input) {
@@ -457,7 +483,7 @@ textarea:is(input, textarea):not(:placeholder-shown),
 .db-textarea textarea:is(input, textarea):not(:disabled):read-only {
   background-color: var(--db-textarea-read-only, var(--db-adaptive-bg-basic-level-1-default)) !important;
 }
-.db-textarea label {
+.db-textarea > label {
   padding-block-end: var(--db-spacing-fixed-xs);
   max-inline-size: 25ch;
   text-overflow: ellipsis;
@@ -465,22 +491,23 @@ textarea:is(input, textarea):not(:placeholder-shown),
   overflow: hidden;
 }
 @media screen and (prefers-reduced-motion: no-preference) {
-  .db-textarea label {
+  .db-textarea > label {
     transition: font-size var(--db-transition-straight-emotional);
   }
 }
-.db-textarea[data-hide-label=true] label {
+.db-textarea[data-hide-label=true] > label {
   padding: 0;
 }
-.db-textarea:has(textarea:disabled) {
+.db-textarea:has(textarea:disabled, textarea[data-disabled=true]) {
   opacity: 0.4;
   pointer-events: none;
 }
 .db-textarea::after, .db-textarea::before {
   position: absolute;
   pointer-events: none;
-  inset-block-start: calc(var(--db-sizing-md) / 2 - var(--db-spacing-fixed-xs) * var(--db-label-visible-spacing, 0) + var(--db-base-body-icon-font-size-xs) * var(--db-label-visible-height, 1) - 1px);
+  inset-block-start: calc((var(--db-spacing-fixed-xs) + var(--db-base-body-icon-font-size-xs)) * var(--db-label-visible-above, 1) + var(--db-sizing-md) / 2);
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
+  transform: translateY(-50%);
 }
 .db-textarea::before {
   margin-inline-end: var(--db-spacing-fixed-sm);
@@ -491,7 +518,6 @@ textarea:is(input, textarea):not(:placeholder-shown),
   inset-inline-end: var(--db-spacing-fixed-sm);
 }
 .db-textarea textarea {
-  cursor: auto;
   overflow-y: scroll;
   padding-block: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-xs);
 }
@@ -504,6 +530,7 @@ textarea:is(input, textarea):not(:placeholder-shown),
   margin-inline: 0;
   inline-size: calc(100% - 0.5rem - 1px);
   inset-inline: 0;
+  transform: none;
   background-color: var(--db-adaptive-bg-basic-level-1-default);
 }
 .db-textarea[data-variant=floating]:has(textarea:is(:focus-within, :not(:placeholder-shown)))::after {
@@ -515,6 +542,7 @@ textarea:is(input, textarea):not(:placeholder-shown),
   margin-inline: 0;
   inline-size: calc(100% - 0.5rem - 1px);
   inset-inline: 0;
+  transform: none;
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   z-index: 1;
   border-block-end: none;

package/build/components/textarea/textarea.scss

@@ -34,6 +34,7 @@
 	margin-inline: 0;
 	inline-size: calc(100% - #{scrollbar.$scrollbar-width} - 1px);
 	inset-inline: 0;
+	transform: none;
 }
 
 .db-textarea {
@@ -43,7 +44,6 @@
 		@extend %resize-textarea;
 		@extend %scrollbar;
 
-		cursor: auto;
 		overflow-y: scroll;
 
 		// we don't have icons in textarea so we can overwrite it here

package/build/components/tooltip/tooltip.css

@@ -94,6 +94,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);
+  }
+}
 .db-tooltip[data-show-arrow=true]::after, .db-tooltip {
   border: var(--db-border-height-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
 }
@@ -330,5 +335,5 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 
 [data-has-tooltip=true] {
-  position: relative;
+  position: var(--db-tooltip-parent-position, relative);
 }

package/build/components/tooltip/tooltip.scss

@@ -53,7 +53,7 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs;
 				calc(100% + #{$tooltip-arrow-shadow-size})
 					calc(100% + #{$tooltip-arrow-shadow-size})
 			);
-			 /* stylelint-disable-next-line db-ux/use-border-radius */
+			/* stylelint-disable-next-line db-ux/use-border-radius */
 			border-radius: 0 2px;
 			transform: skew(-8deg, -8deg);
 		}
@@ -127,7 +127,7 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs;
 }
 
 [data-has-tooltip="true"] {
-	position: relative;
+	position: var(--db-tooltip-parent-position, relative);
 }
 
 $popover-states: "hover", "focus";

package/build/styles/_select-components.scss

@@ -0,0 +1,50 @@
+@use "@db-ux/core-foundations/build/styles/fonts";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "./internal/form-components";
+
+%select-icon {
+	@extend %dropdown-icon;
+
+	&[data-icon]:not([data-hide-icon="true"]) {
+		--db-form-has-before: 1;
+	}
+}
+
+$has-before-padding: calc(
+	var(--db-form-has-before) *
+		(#{form-components.$icon-size-sm} + #{variables.$db-spacing-fixed-sm})
+);
+
+$select-icon-padding: calc(
+	#{form-components.$font-size-height} + #{variables.$db-spacing-fixed-sm} +
+		#{variables.$db-spacing-fixed-xs}
+);
+
+%select-placeholder {
+	[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-above, 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}
+		);
+	}
+}