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

package/build/styles/index.scss

@@ -30,3 +30,8 @@
 @forward "../components/tab-panel/tab-panel";
 @forward "../components/switch/switch";
 @forward "../components/stack/stack";
+@forward "../components/custom-select/custom-select";
+@forward "../components/custom-select-form-field/custom-select-form-field";
+@forward "../components/custom-select-dropdown/custom-select-dropdown";
+@forward "../components/custom-select-list/custom-select-list";
+@forward "../components/custom-select-list-item/custom-select-list-item";

package/build/styles/internal/_custom-elements.scss

@@ -1,4 +1,7 @@
 $custom-elements: //hygen-insert
+
+	db-custom-select-list-item, db-custom-select-list,
+	db-custom-select-dropdown, db-custom-select-form-field, db-custom-select,
 	db-stack, db-switch, db-tab-panel, db-tabs, db-tab-list, db-tab-item,
 	db-tab-bar, db-tooltip, db-popover, db-textarea, db-navigation,
 	db-accordion-item, db-accordion, db-badge, db-navigation-item, db-tag,

package/build/styles/internal/_form-components.scss

@@ -22,6 +22,16 @@ $floating-label-size-calc: calc(
 		#{$label-size-height-2xs}
 );
 
+// font-size label which is 2xs + smallest spacing
+$floating-label-padding-block-start: calc(
+	var(--db-type-body-font-size-2xs) + #{variables.$db-spacing-fixed-3xs}
+);
+
+$icon-inline-block-start: calc(
+	(#{variables.$db-spacing-fixed-xs} + #{$label-size-height-xs}) *
+		var(--db-label-visible-above, 1) + #{variables.$db-sizing-md} / 2
+);
+
 $input-types:
 	"button", "checkbox", "color", "date", "datetime-local", "email", "file",
 	"hidden", "image", "month", "number", "password", "radio", "range", "reset",
@@ -45,22 +55,22 @@ $check-border-size: min(#{variables.$db-border-height-2xs}, 2px);
 	.db-infotext {
 		margin-block-start: variables.$db-spacing-fixed-2xs;
 
-		&[data-semantic] {
+		&:is([data-semantic="successful"], [data-semantic="critical"]) {
 			display: none;
 		}
 	}
 }
 
-@mixin placeholder-content() {
-	&::placeholder,
-	+ [id$="-placeholder"] {
+@mixin placeholder-content($selector) {
+	#{$selector}::placeholder,
+	[id$="-placeholder"] {
 		@content;
 	}
 }
 
 @mixin set-floating-label-overwrites($selector) {
 	&[data-variant="floating"] {
-		label {
+		> label {
 			@extend %db-overwrite-font-size-md;
 
 			opacity: component.$placeholder-disabled;
@@ -70,20 +80,16 @@ $check-border-size: min(#{variables.$db-border-height-2xs}, 2px);
 				(#{variables.$db-sizing-md} - #{$font-size-height}) / 2
 			);
 			inset-inline: var(
-				--db-form-component-padding-inline-start,
-				#{variables.$db-spacing-fixed-sm}
-			);
+					--db-form-component-padding-inline-start,
+					#{variables.$db-spacing-fixed-sm}
+				)
+				var(
+					--db-form-component-padding-inline-end,
+					#{variables.$db-spacing-fixed-sm}
+				);
 			pointer-events: none;
 		}
 
-		// icons
-		&::after,
-		&::before {
-			inset-block-start: calc(
-				#{variables.$db-sizing-md} / 2 - #{$font-size-height} / 2
-			);
-		}
-
 		[id$="-placeholder"] {
 			@extend %db-overwrite-font-size-sm;
 
@@ -92,46 +98,42 @@ $check-border-size: min(#{variables.$db-border-height-2xs}, 2px);
 			);
 		}
 
+		@include placeholder-content($selector) {
+			transition: none;
+			opacity: 0;
+		}
+
 		#{$selector} {
 			@extend %db-overwrite-font-size-sm;
 
-			@include placeholder-content() {
-				transition: none;
-				opacity: 0;
-			}
-
 			@if ($selector == textarea) {
 				padding-block-start: $floating-label-size-calc;
 				/* stylelint-disable-next-line at-rule-empty-line-before */
-			} @else {
-				// font-size label which is 2xs + smallest spacing
-				padding-block-start: calc(
-					var(--db-type-body-font-size-2xs) +
-						#{variables.$db-spacing-fixed-3xs}
-				);
+			} @else if($selector != summary) {
+				/* stylelint-disable-next-line db-ux/use-spacings */
+				padding-block-start: $floating-label-padding-block-start;
 			}
 		}
 
 		&:has(
 				#{$selector}:focus-within,
 				#{$selector}:is(input, textarea):not(:placeholder-shown),
-				> select option:checked:not([hidden])
+				> select option:checked:not([hidden]),
+				input[type="checkbox"]:checked
 			) {
-			label {
+			> label {
 				@extend %db-overwrite-font-size-2xs;
 
 				inset-block-start: variables.$db-spacing-fixed-2xs;
 				opacity: 1;
 			}
 
-			#{$selector} {
-				@include placeholder-content() {
-					opacity: component.$placeholder-disabled;
+			@include placeholder-content($selector) {
+				opacity: component.$placeholder-disabled;
 
-					@media screen and (prefers-reduced-motion: no-preference) {
-						transition: opacity
-							#{variables.$db-transition-straight-emotional};
-					}
+				@media screen and (prefers-reduced-motion: no-preference) {
+					transition: opacity
+						#{variables.$db-transition-straight-emotional};
 				}
 			}
 		}
@@ -164,14 +166,6 @@ $check-border-size: min(#{variables.$db-border-height-2xs}, 2px);
 		$variant: "critical";
 	}
 
-	@include get-validity-message($key);
-
-	#{$selector},
-	[id$="-placeholder"] {
-		color: var(--db-#{$variant}-on-bg-basic-emphasis-100-default);
-		caret-color: var(--db-#{$variant}-on-bg-basic-emphasis-100-default);
-	}
-
 	@if ($selector != textarea) {
 		@extend %db-#{$variant}-variables;
 		/* stylelint-disable-next-line at-rule-empty-line-before */
@@ -190,13 +184,21 @@ $check-border-size: min(#{variables.$db-border-height-2xs}, 2px);
 		--db-adaptive-bg-basic-transparent-pressed: var(
 			--db-#{$variant}-bg-basic-transparent-pressed
 		);
-		--db-adaptive-default: var(
+		--db-adaptive-on-bg-basic-emphasis-100-default: var(
 			--db-#{$variant}-on-bg-basic-emphasis-100-default
 		);
 		--db-adaptive-on-bg-basic-emphasis-60-default: var(
 			--db-#{$variant}-on-bg-basic-emphasis-60-default
 		);
 	}
+
+	#{$selector},
+	[id$="-placeholder"] {
+		color: var(--db-#{$variant}-on-bg-basic-emphasis-100-default);
+		caret-color: var(--db-#{$variant}-on-bg-basic-emphasis-100-default);
+	}
+
+	@include get-validity-message($key);
 }
 
 // This doesn't contain text, search and password, because they don't have an auto-validation
@@ -247,21 +249,27 @@ $input-valid-types:
 		}
 		/* stylelint-disable-next-line at-rule-empty-line-before */
 	} @else {
+		@if ($selector == summary) {
+			$selector: select;
+		}
+
 		#{get-validations($selector,$key)} {
 			@content;
 		}
 	}
 
 	// If data-custom-validity is set we overwrite the selectors above
-	&:has(#{$selector}[data-custom-validity="#{$key}"]) {
+	&:has(#{$selector}[data-custom-validity="#{$key}"]),
+	&[data-custom-validity="#{$key}"] {
 		@content;
 	}
 }
 
 @mixin set-required-label($selector) {
-	&:has(#{$selector}:required) {
+	&:has(#{$selector}:required),
+	&[data-required="true"] {
 		&:is(label),
-		label {
+		> label {
 			&::after {
 				@include icons.icon-content("*");
 
@@ -274,15 +282,22 @@ $input-valid-types:
 }
 
 @mixin set-default-form-component($selector) {
-	--db-form-has-before: 0;
-
 	@extend %db-overwrite-font-size-sm;
 	@extend %helper-message;
 
-	// we use absolute icons
-	position: relative;
-	display: flex;
-	flex-direction: column;
+	/* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+	& {
+		--db-form-has-before: 0;
+		// we use absolute icons
+		position: relative;
+		display: flex;
+		flex-direction: column;
+	}
+
+	&[data-variant="floating"],
+	&[data-hide-label="true"] {
+		--db-label-visible-above: 0;
+	}
 
 	@include set-floating-label-overwrites($selector);
 	@include set-required-label($selector);
@@ -295,6 +310,10 @@ $input-valid-types:
 		@include get-validity-color($selector, "invalid");
 	}
 
+	@include placeholder-content($selector) {
+		opacity: component.$placeholder-disabled;
+	}
+
 	#{$selector} {
 		@extend %db-overwrite-font-size-md;
 		@extend %default-interactive-component;
@@ -316,10 +335,6 @@ $input-valid-types:
 				#{variables.$db-spacing-fixed-sm}
 			);
 
-		@include placeholder-content() {
-			opacity: component.$placeholder-disabled;
-		}
-
 		@include helpers.hover {
 			background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
 		}
@@ -333,7 +348,7 @@ $input-valid-types:
 	}
 
 	// label
-	label {
+	> label {
 		@extend %db-overwrite-font-size-xs;
 
 		padding-block-end: variables.$db-spacing-fixed-xs;
@@ -348,7 +363,7 @@ $input-valid-types:
 	}
 
 	&[data-hide-label="true"] {
-		label {
+		> label {
 			@extend %a11y-visually-hidden;
 
 			padding: 0;
@@ -356,7 +371,7 @@ $input-valid-types:
 	}
 
 	// disabled
-	&:has(#{$selector}:disabled) {
+	&:has(#{$selector}:disabled, #{$selector}[data-disabled="true"]) {
 		// Decided against cursor: not-allowed, compare to e.g. https://phabricator.wikimedia.org/T121960
 		opacity: component.$default-disabled;
 		pointer-events: none;
@@ -367,13 +382,9 @@ $input-valid-types:
 	&::before {
 		position: absolute;
 		pointer-events: none;
-		// 1px for border
-		inset-block-start: calc(
-			#{variables.$db-sizing-md} / 2 - #{variables.$db-spacing-fixed-xs} *
-				var(--db-label-visible-spacing, 0) + #{$label-size-height-xs} *
-				var(--db-label-visible-height, 1) - 1px
-		);
+		inset-block-start: $icon-inline-block-start;
 		color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
+		transform: translateY(-50%);
 	}
 
 	&::before {
@@ -386,7 +397,7 @@ $input-valid-types:
 		inset-inline-end: variables.$db-spacing-fixed-sm;
 	}
 
-	@if ($selector == input or $selector == select) {
+	@if ($selector == input or $selector == select or $selector == summary) {
 		#{$selector} {
 			block-size: variables.$db-sizing-md;
 			text-overflow: ellipsis;
@@ -434,7 +445,7 @@ $input-valid-types:
 	}
 
 	&:is(label),
-	label {
+	> label {
 		color: var(--db-#{$variant}-on-bg-basic-emphasis-80-default);
 	}
 }
@@ -457,7 +468,7 @@ $input-valid-types:
 	}
 
 	&:is(label),
-	label {
+	> label {
 		display: flex;
 		align-items: flex-start;
 		position: relative;

package/build/styles/internal/_scrollbar.scss

@@ -27,7 +27,7 @@ $scrollbar-width: helpers.px-to-rem(8);
 	&:read-only {
 		&::-webkit-scrollbar-track,
 		&::-webkit-scrollbar-button:single-button {
-			background-color: colors.$db-adaptive-bg-basic-level-1-default !important;
+			background-color: colors.$db-adaptive-bg-basic-level-1-default;
 		}
 	}
 
@@ -58,12 +58,23 @@ $scrollbar-width: helpers.px-to-rem(8);
 
 	/* Up */
 	&::-webkit-scrollbar-button:single-button:vertical:decrement {
-		background-image: var(--db-textarea-scrollbar-button-decrement);
+		border-start-end-radius: variables.$db-border-radius-xs;
+		background-image: var(--db-scrollbar-button-vertical-decrement);
 	}
 
 	/* Down */
 	&::-webkit-scrollbar-button:single-button:vertical:increment {
-		background-image: var(--db-textarea-scrollbar-button-increment);
+		background-image: var(--db-scrollbar-button-vertical-increment);
+	}
+
+	/* Left */
+	&::-webkit-scrollbar-button:single-button:horizontal:decrement {
+		background-image: var(--db-scrollbar-button-horizontal-decrement);
+	}
+
+	/* Right */
+	&::-webkit-scrollbar-button:single-button:horizontal:increment {
+		background-image: var(--db-scrollbar-button-horizontal-increment);
 	}
 
 	&[data-variant="floating"] {

package/build/styles/internal/_tag-components.scss

@@ -15,6 +15,15 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 	);
 }
 
+%set-adaptive-weak-badge {
+	border-color: colors.$db-adaptive-on-bg-basic-emphasis-70-default;
+
+	@include colors.set-current-colors(
+		colors.$db-adaptive-bg-basic-level-3-default,
+		colors.$db-adaptive-on-bg-basic-emphasis-80-default
+	);
+}
+
 %set-adaptive-strong-tag {
 	border-color: colors.$db-adaptive-on-bg-basic-emphasis-80-default;
 
@@ -69,11 +78,20 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 	}
 }
 
-@mixin get-tag-colors() {
-	@extend %set-adaptive-weak-tag;
+@mixin get-tag-colors($htmlTag: "tag") {
+	@if ($htmlTag == "badge") {
+		@extend %set-adaptive-weak-badge;
+		// stylelint-disable-next-line at-rule-empty-line-before
+	} @else {
+		@extend %set-adaptive-weak-tag;
+	}
 
 	&[data-emphasis="strong"] {
 		@extend %set-adaptive-strong-tag;
+
+		.db-tab-remove-button {
+			@extend %set-interactive-strong;
+		}
 	}
 
 	&[data-emphasis="origin"] {