@db-ux/core-components 2.4.0 → 2.4.2

package/build/components/button/button.css

@@ -230,7 +230,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-button[data-variant=outlined], .db-button:not([data-variant]), .db-button[data-variant=ghost] {
+.db-button[data-variant=outlined], .db-button:not([data-variant]), .db-button[data-variant=""], .db-button[data-variant=ghost] {
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);
 }
 .db-button[data-variant=filled] {

package/build/components/button/button.scss

@@ -89,6 +89,7 @@
 
 	&[data-variant="outlined"],
 	&:not([data-variant]),
+	&[data-variant=""],
 	&[data-variant="ghost"] {
 		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
 	}

package/build/components/checkbox/checkbox.css

@@ -204,17 +204,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line at-rule-empty-line-before */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.db-checkbox:has(input:required):not([data-hide-asterisk=true]):is(label)::after,
-.db-checkbox:has(input:required):not([data-hide-asterisk=true]) > label::after, .db-checkbox[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
-.db-checkbox[data-required=true]:not([data-hide-asterisk=true]) > label::after {
+.db-checkbox:not([data-hide-asterisk=true]):has(input:required):is(label)::after,
+.db-checkbox:not([data-hide-asterisk=true]):has(input:required) > label::after, .db-checkbox:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
+.db-checkbox:not([data-hide-asterisk=true])[data-required=true] > label::after {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-inline-start: 1px;
   content: "*";
 }
 @supports (content: ""/"") {
-  .db-checkbox:has(input:required):not([data-hide-asterisk=true]):is(label)::after,
-  .db-checkbox:has(input:required):not([data-hide-asterisk=true]) > label::after, .db-checkbox[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
-  .db-checkbox[data-required=true]:not([data-hide-asterisk=true]) > label::after {
+  .db-checkbox:not([data-hide-asterisk=true]):has(input:required):is(label)::after,
+  .db-checkbox:not([data-hide-asterisk=true]):has(input:required) > label::after, .db-checkbox:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
+  .db-checkbox:not([data-hide-asterisk=true])[data-required=true] > label::after {
     content: "*"/"";
   }
 }

package/build/components/custom-select/custom-select.css

@@ -813,6 +813,20 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 .db-custom-select[data-variant=floating], .db-custom-select[data-hide-label=true] {
   --db-label-visible-above: 0;
 }
+.db-custom-select:not([data-hide-asterisk=true]):has(summary:required):is(label)::after,
+.db-custom-select:not([data-hide-asterisk=true]):has(summary:required) > label::after, .db-custom-select:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
+.db-custom-select:not([data-hide-asterisk=true])[data-required=true] > label::after {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-inline-start: 1px;
+  content: "*";
+}
+@supports (content: ""/"") {
+  .db-custom-select:not([data-hide-asterisk=true]):has(summary:required):is(label)::after,
+  .db-custom-select:not([data-hide-asterisk=true]):has(summary:required) > label::after, .db-custom-select:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
+  .db-custom-select:not([data-hide-asterisk=true])[data-required=true] > label::after {
+    content: "*"/"";
+  }
+}
 .db-custom-select[data-variant=floating] > label {
   opacity: var(--db-opacity-xl);
   position: absolute;
@@ -873,20 +887,6 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
-.db-custom-select:has(summary:required):not([data-hide-asterisk=true]):is(label)::after,
-.db-custom-select:has(summary:required):not([data-hide-asterisk=true]) > label::after, .db-custom-select[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
-.db-custom-select[data-required=true]:not([data-hide-asterisk=true]) > label::after {
-  /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline-start: 1px;
-  content: "*";
-}
-@supports (content: ""/"") {
-  .db-custom-select:has(summary:required):not([data-hide-asterisk=true]):is(label)::after,
-  .db-custom-select:has(summary:required):not([data-hide-asterisk=true]) > label::after, .db-custom-select[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
-  .db-custom-select[data-required=true]:not([data-hide-asterisk=true]) > label::after {
-    content: "*"/"";
-  }
-}
 .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) {
   /* stylelint-disable-next-line at-rule-empty-line-before */

package/build/components/input/input.css

@@ -572,6 +572,20 @@ input[type=radio]:checked) > label {
 .db-input[data-variant=floating], .db-input[data-hide-label=true] {
   --db-label-visible-above: 0;
 }
+.db-input:not([data-hide-asterisk=true]):has(input:required):is(label)::after,
+.db-input:not([data-hide-asterisk=true]):has(input:required) > label::after, .db-input:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
+.db-input:not([data-hide-asterisk=true])[data-required=true] > label::after {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-inline-start: 1px;
+  content: "*";
+}
+@supports (content: ""/"") {
+  .db-input:not([data-hide-asterisk=true]):has(input:required):is(label)::after,
+  .db-input:not([data-hide-asterisk=true]):has(input:required) > label::after, .db-input:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
+  .db-input:not([data-hide-asterisk=true])[data-required=true] > label::after {
+    content: "*"/"";
+  }
+}
 .db-input[data-variant=floating] > label {
   opacity: var(--db-opacity-xl);
   position: absolute;
@@ -630,20 +644,6 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
-.db-input:has(input:required):not([data-hide-asterisk=true]):is(label)::after,
-.db-input:has(input:required):not([data-hide-asterisk=true]) > label::after, .db-input[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
-.db-input[data-required=true]:not([data-hide-asterisk=true]) > label::after {
-  /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline-start: 1px;
-  content: "*";
-}
-@supports (content: ""/"") {
-  .db-input:has(input:required):not([data-hide-asterisk=true]):is(label)::after,
-  .db-input:has(input:required):not([data-hide-asterisk=true]) > label::after, .db-input[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
-  .db-input[data-required=true]:not([data-hide-asterisk=true]) > label::after {
-    content: "*"/"";
-  }
-}
 .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) {
   /* stylelint-disable-next-line at-rule-empty-line-before */

package/build/components/input/input.scss

@@ -18,13 +18,13 @@ $icon-padding: calc(
 	// increased inline size for elements with icons or specific input types that have icons
 	&:is([data-icon], [data-icon-after]):not([data-hide-icon="true"]),
 	&:has(
-			input[type="search"],
-			input[type="date"],
-			input[type="month"],
-			input[type="week"],
-			input[type="datetime-local"],
-			input[type="time"]
-		) {
+		input[type="search"],
+		input[type="date"],
+		input[type="month"],
+		input[type="week"],
+		input[type="datetime-local"],
+		input[type="time"]
+	) {
 		--db-form-component-min-inline-size: #{variables.$db-sizing-xl};
 	}
 

package/build/components/navigation/navigation.scss

@@ -42,12 +42,12 @@
 
 					&:is(:hover, :focus-visible),
 					&:has(
-							~ .db-sub-navigation:is(
-									:hover,
-									:focus-visible,
-									:focus-within
-								)
-						) {
+						~ .db-sub-navigation:is(
+								:hover,
+								:focus-visible,
+								:focus-within
+							)
+					) {
 						&::after {
 							transform: form-components.$dropdown-icon-transform;
 						}

package/build/components/radio/radio.css

@@ -148,17 +148,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line at-rule-empty-line-before */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.db-radio:has(input:required):not([data-hide-asterisk=true]):is(label)::after,
-.db-radio:has(input:required):not([data-hide-asterisk=true]) > label::after, .db-radio[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
-.db-radio[data-required=true]:not([data-hide-asterisk=true]) > label::after {
+.db-radio:not([data-hide-asterisk=true]):has(input:required):is(label)::after,
+.db-radio:not([data-hide-asterisk=true]):has(input:required) > label::after, .db-radio:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
+.db-radio:not([data-hide-asterisk=true])[data-required=true] > label::after {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-inline-start: 1px;
   content: "*";
 }
 @supports (content: ""/"") {
-  .db-radio:has(input:required):not([data-hide-asterisk=true]):is(label)::after,
-  .db-radio:has(input:required):not([data-hide-asterisk=true]) > label::after, .db-radio[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
-  .db-radio[data-required=true]:not([data-hide-asterisk=true]) > label::after {
+  .db-radio:not([data-hide-asterisk=true]):has(input:required):is(label)::after,
+  .db-radio:not([data-hide-asterisk=true]):has(input:required) > label::after, .db-radio:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
+  .db-radio:not([data-hide-asterisk=true])[data-required=true] > label::after {
     content: "*"/"";
   }
 }

package/build/components/select/select.css

@@ -618,6 +618,20 @@ input[type=radio]:checked) > label {
 .db-select[data-variant=floating], .db-select[data-hide-label=true] {
   --db-label-visible-above: 0;
 }
+.db-select:not([data-hide-asterisk=true]):has(select:required):is(label)::after,
+.db-select:not([data-hide-asterisk=true]):has(select:required) > label::after, .db-select:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
+.db-select:not([data-hide-asterisk=true])[data-required=true] > label::after {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-inline-start: 1px;
+  content: "*";
+}
+@supports (content: ""/"") {
+  .db-select:not([data-hide-asterisk=true]):has(select:required):is(label)::after,
+  .db-select:not([data-hide-asterisk=true]):has(select:required) > label::after, .db-select:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
+  .db-select:not([data-hide-asterisk=true])[data-required=true] > label::after {
+    content: "*"/"";
+  }
+}
 .db-select[data-variant=floating] > label {
   opacity: var(--db-opacity-xl);
   position: absolute;
@@ -678,20 +692,6 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
-.db-select:has(select:required):not([data-hide-asterisk=true]):is(label)::after,
-.db-select:has(select:required):not([data-hide-asterisk=true]) > label::after, .db-select[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
-.db-select[data-required=true]:not([data-hide-asterisk=true]) > label::after {
-  /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline-start: 1px;
-  content: "*";
-}
-@supports (content: ""/"") {
-  .db-select:has(select:required):not([data-hide-asterisk=true]):is(label)::after,
-  .db-select:has(select:required):not([data-hide-asterisk=true]) > label::after, .db-select[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
-  .db-select[data-required=true]:not([data-hide-asterisk=true]) > label::after {
-    content: "*"/"";
-  }
-}
 .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) {
   /* stylelint-disable-next-line at-rule-empty-line-before */

package/build/components/switch/switch.css

@@ -499,17 +499,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-switch {
   user-select: none;
 }
-.db-switch:has(input:required):not([data-hide-asterisk=true]):is(label)::after,
-.db-switch:has(input:required):not([data-hide-asterisk=true]) > label::after, .db-switch[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
-.db-switch[data-required=true]:not([data-hide-asterisk=true]) > label::after {
+.db-switch:not([data-hide-asterisk=true]):has(input:required):is(label)::after,
+.db-switch:not([data-hide-asterisk=true]):has(input:required) > label::after, .db-switch:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
+.db-switch:not([data-hide-asterisk=true])[data-required=true] > label::after {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-inline-start: 1px;
   content: "*";
 }
 @supports (content: ""/"") {
-  .db-switch:has(input:required):not([data-hide-asterisk=true]):is(label)::after,
-  .db-switch:has(input:required):not([data-hide-asterisk=true]) > label::after, .db-switch[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
-  .db-switch[data-required=true]:not([data-hide-asterisk=true]) > label::after {
+  .db-switch:not([data-hide-asterisk=true]):has(input:required):is(label)::after,
+  .db-switch:not([data-hide-asterisk=true]):has(input:required) > label::after, .db-switch:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
+  .db-switch:not([data-hide-asterisk=true])[data-required=true] > label::after {
     content: "*"/"";
   }
 }

package/build/components/tag/tag.scss

@@ -82,11 +82,11 @@
 	}
 
 	> :is(
-			[class="db-checkbox"],
-			[class="db-radio"],
-			[class="db-link"],
-			[class="db-button"]
-		) {
+		[class="db-checkbox"],
+		[class="db-radio"],
+		[class="db-link"],
+		[class="db-button"]
+	) {
 		block-size: 100%;
 	}
 }

package/build/components/textarea/textarea.css

@@ -381,6 +381,20 @@ input[type=radio]:checked) > label {
 .db-textarea[data-variant=floating], .db-textarea[data-hide-label=true] {
   --db-label-visible-above: 0;
 }
+.db-textarea:not([data-hide-asterisk=true]):has(textarea:required):is(label)::after,
+.db-textarea:not([data-hide-asterisk=true]):has(textarea:required) > label::after, .db-textarea:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
+.db-textarea:not([data-hide-asterisk=true])[data-required=true] > label::after {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-inline-start: 1px;
+  content: "*";
+}
+@supports (content: ""/"") {
+  .db-textarea:not([data-hide-asterisk=true]):has(textarea:required):is(label)::after,
+  .db-textarea:not([data-hide-asterisk=true]):has(textarea:required) > label::after, .db-textarea:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
+  .db-textarea:not([data-hide-asterisk=true])[data-required=true] > label::after {
+    content: "*"/"";
+  }
+}
 .db-textarea[data-variant=floating] > label {
   opacity: var(--db-opacity-xl);
   position: absolute;
@@ -439,20 +453,6 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
-.db-textarea:has(textarea:required):not([data-hide-asterisk=true]):is(label)::after,
-.db-textarea:has(textarea:required):not([data-hide-asterisk=true]) > label::after, .db-textarea[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
-.db-textarea[data-required=true]:not([data-hide-asterisk=true]) > label::after {
-  /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline-start: 1px;
-  content: "*";
-}
-@supports (content: ""/"") {
-  .db-textarea:has(textarea:required):not([data-hide-asterisk=true]):is(label)::after,
-  .db-textarea:has(textarea:required):not([data-hide-asterisk=true]) > label::after, .db-textarea[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
-  .db-textarea[data-required=true]:not([data-hide-asterisk=true]) > label::after {
-    content: "*"/"";
-  }
-}
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) {
   --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);