@db-ux/core-components 4.6.1 → 4.7.0

package/build/components/stack/stack-web-component.css

@@ -1,4 +1,7 @@
 /* Variants for adaptive components like input, select, notification, ... */
+.db-stack:not([hidden]) {
+  display: flex;
+}
 .db-stack {
   gap: var(--db-spacing-fixed-sm);
   justify-content: flex-start;
@@ -6,9 +9,6 @@
   inline-size: 100%;
   overflow: auto;
 }
-.db-stack:not([hidden]) {
-  display: flex;
-}
 .db-stack:is([data-direction=column], :not([data-direction])) {
   flex-direction: column;
 }

package/build/components/stack/stack.css

@@ -1,4 +1,7 @@
 /* Variants for adaptive components like input, select, notification, ... */
+.db-stack:not([hidden]) {
+  display: flex;
+}
 .db-stack {
   gap: var(--db-spacing-fixed-sm);
   justify-content: flex-start;
@@ -6,9 +9,6 @@
   inline-size: 100%;
   overflow: auto;
 }
-.db-stack:not([hidden]) {
-  display: flex;
-}
 .db-stack:is([data-direction=column], :not([data-direction])) {
   flex-direction: column;
 }

package/build/components/switch/switch.css

@@ -101,9 +101,6 @@
 
 .db-switch {
   user-select: none;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* Label position (leading/trailing) */
 }
 .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,
@@ -122,16 +119,16 @@
 .db-switch:has(input:disabled) {
   opacity: var(--db-opacity-md);
 }
+.db-switch:is(label):not([hidden]),
+.db-switch > label:not([hidden]) {
+  display: flex;
+}
 .db-switch:is(label),
 .db-switch > label {
   align-items: flex-start;
   position: relative;
   color: var(--db-check-element-label-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
 }
-.db-switch:is(label):not([hidden]),
-.db-switch > label:not([hidden]) {
-  display: flex;
-}
 .db-switch input {
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);
   place-content: center center;
@@ -196,14 +193,14 @@
   	--db-successful-on-bg-inverted-default
   );
 }
-.db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
-.db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
 .db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
 .db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
   display: flex;
 }
+.db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
+.db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
 .db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
   display: none;
@@ -230,6 +227,9 @@
   	--db-successful-bg-inverted-contrast-low-pressed
   );
 }
+.db-switch {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
   --db-check-element-border-color: var(
   	--db-successful-on-bg-basic-emphasis-70-default
@@ -247,16 +247,16 @@
   	--db-successful-on-bg-inverted-default
   );
 }
-.db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
-.db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext, .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
-.db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
 .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
 .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
 .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
   display: flex;
 }
+.db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
+.db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext, .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
+.db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
 .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]), .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
 .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
@@ -331,6 +331,9 @@
   	--db-critical-bg-inverted-contrast-low-pressed
   );
 }
+.db-switch {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-switch:has(input[data-custom-validity=invalid]), .db-switch[data-custom-validity=invalid] {
   --db-check-element-border-color: var(
   	--db-critical-on-bg-basic-emphasis-70-default
@@ -388,14 +391,15 @@
   inline-size: calc(var(--db-icon-font-size) * 2 + 0.125rem);
   block-size: var(--db-icon-font-size);
   box-sizing: content-box;
+}
+.db-switch input:not([hidden]) {
+  display: flex;
+}
+.db-switch input {
   align-items: center;
   /* stylelint-disable-next-line db-ux/use-spacings */
   gap: 0.125rem;
   border-radius: var(--db-border-radius-full);
-  /* positioned at the end of the track: track length - 100% (thumb width) */
-}
-.db-switch input:not([hidden]) {
-  display: flex;
 }
 .db-switch input:not([data-show-icon-trailing=false])::after {
   --db-icon-trailing: "cross";
@@ -435,6 +439,9 @@
     content: "•"/"";
   }
 }
+.db-switch input {
+  /* positioned at the end of the track: track length - 100% (thumb width) */
+}
 .db-switch input:checked {
   --thumb-offset-x: calc(100% + 0.125rem);
   --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
@@ -500,6 +507,9 @@
   transform: translateX(calc(-100% - 0.125rem));
   transform-origin: center right;
 }
+.db-switch {
+  /* Label position (leading/trailing) */
+}
 .db-switch:not([data-variant=leading]) > label {
   flex-direction: row;
 }

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

@@ -34,12 +34,14 @@
 
 .db-tab-item {
   position: relative;
-  list-style-type: "";
-  border-radius: var(--db-border-radius-sm);
 }
 .db-tab-item:not([hidden]) {
   display: inline-flex;
 }
+.db-tab-item {
+  list-style-type: "";
+  border-radius: var(--db-border-radius-sm);
+}
 .db-tab-item:has(input:disabled) {
   opacity: var(--db-opacity-md);
 }
@@ -47,16 +49,17 @@
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);
   padding: var(--db-spacing-fixed-xs);
   align-items: center;
+}
+.db-tab-item label:not([hidden]) {
+  display: inline-block;
+}
+.db-tab-item label {
   white-space: nowrap;
   border: 0;
   border-radius: var(--db-border-radius-sm);
   overflow: hidden;
   text-overflow: ellipsis;
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
-}
-.db-tab-item label:not([hidden]) {
-  display: inline-block;
 }
 .db-tab-item label:hover:not(:disabled,
 [aria-disabled=true],
@@ -94,6 +97,9 @@
 :has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
+.db-tab-item label {
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
 .db-tab-item label:hover:not(:disabled,
 [aria-disabled=true],
 [tabindex="-1"],
@@ -153,14 +159,16 @@
 }
 .db-tab-item label:is([data-no-text], [data-no-text=true]) {
   font-size: 0 !important;
+}
+.db-tab-item label:is([data-no-text], [data-no-text=true])::before {
+  --db-icon-margin-end: 0;
+}
+.db-tab-item label:is([data-no-text], [data-no-text=true]) {
   /* stylelint-disable-next-line at-rule-empty-line-before */
   padding: 0;
   inline-size: calc(calc(var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-sm) + var(--db-icon-font-size)) - var(--db-spacing-fixed-2xs));
   block-size: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-xs));
 }
-.db-tab-item label:is([data-no-text], [data-no-text=true])::before {
-  --db-icon-margin-end: 0;
-}
 .db-tab-item label:is([data-no-text], [data-no-text=true])::before {
   margin-inline-end: 0;
 }

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

@@ -46,13 +46,6 @@
   --db-icon-font-size: var(--db-base-body-icon-font-size-md);
 }
 
-.db-tab-list > ul {
-  /* Buttons */
-  /* Up */
-  /* Down */
-  /* Left */
-  /* Right */
-}
 @supports (field-sizing: content) {
   .db-tab-list > ul[data-field-sizing=content]:is([data-hide-resizer=true], [data-resize=none]) {
     /* We don't show a scrollbar if we use field-sizing: content and no resizer is available */
@@ -78,6 +71,9 @@
 .db-tab-list > ul::-webkit-scrollbar-thumb {
   background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
+.db-tab-list > ul {
+  /* Buttons */
+}
 .db-tab-list > ul::-webkit-scrollbar-button:single-button {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   background-size: 0.5rem;
@@ -91,16 +87,28 @@
 .db-tab-list > ul::-webkit-scrollbar-button:single-button:active {
   background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
+.db-tab-list > ul {
+  /* Up */
+}
 .db-tab-list > ul::-webkit-scrollbar-button:single-button:vertical:decrement {
   border-start-end-radius: var(--db-border-radius-xs);
   background-image: var(--db-scrollbar-button-vertical-decrement);
 }
+.db-tab-list > ul {
+  /* Down */
+}
 .db-tab-list > ul::-webkit-scrollbar-button:single-button:vertical:increment {
   background-image: var(--db-scrollbar-button-vertical-increment);
 }
+.db-tab-list > ul {
+  /* Left */
+}
 .db-tab-list > ul::-webkit-scrollbar-button:single-button:horizontal:decrement {
   background-image: var(--db-scrollbar-button-horizontal-decrement);
 }
+.db-tab-list > ul {
+  /* Right */
+}
 .db-tab-list > ul::-webkit-scrollbar-button:single-button:horizontal:increment {
   background-image: var(--db-scrollbar-button-horizontal-increment);
 }

package/build/components/tabs/tabs.css

@@ -146,18 +146,12 @@
   position: absolute;
 }
 
+.db-tabs:not([hidden]) {
+  display: flex;
+}
 .db-tabs {
   inline-size: 100%;
   position: relative;
-  /*
-  Variant Orientation HORIZONTAL
-  	*/
-  /*
-  Variant Orientation VERTICAL
-   */
-}
-.db-tabs:not([hidden]) {
-  display: flex;
 }
 .db-tabs .db-tab-panel {
   padding: 0 var(--db-spacing-fixed-xs);
@@ -199,6 +193,11 @@
 .db-tabs .db-tab-list:has([id$=-tab-10]:checked) ~ [id$=-tab-panel-10]:not([hidden]) {
   display: block;
 }
+.db-tabs {
+  /*
+  Variant Orientation HORIZONTAL
+  	*/
+}
 .db-tabs:not([data-orientation=vertical]) {
   flex-flow: column wrap;
 }
@@ -235,6 +234,11 @@
 .db-tabs:not([data-orientation=vertical]) .db-tab-list > ul:not(:has(db-tab-item, dbtabitem)) .db-tab-item:last-of-type {
   margin-inline-end: var(--db-spacing-fixed-xs);
 }
+.db-tabs {
+  /*
+  Variant Orientation VERTICAL
+   */
+}
 .db-tabs[data-orientation=vertical] {
   flex-direction: row;
 }
@@ -255,7 +259,6 @@
   padding-inline-end: var(--db-spacing-fixed-xs);
   /* ensures that tab-list (track) is only as high as all the tab-items together if open tab-panel is higher */
   margin-block-end: auto;
-  /* vertical track for pulse */
 }
 .db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item label {
   position: relative;
@@ -266,6 +269,9 @@
 .db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item:has(input:focus-visible) label, .db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item:hover label {
   overflow: visible;
 }
+.db-tabs[data-orientation=vertical] .db-tab-list {
+  /* vertical track for pulse */
+}
 .db-tabs[data-orientation=vertical] .db-tab-list::before {
   inline-size: var(--db-border-width-xs);
   inset-block: var(--db-spacing-fixed-xs);
@@ -306,11 +312,6 @@
   text-align: center;
   justify-content: center;
 }
-.db-tabs[data-scroll-behavior=arrows] {
-  /*
-   * Scroll left / right buttons
-   */
-}
 .db-tabs[data-scroll-behavior=arrows] .db-tab-list > ul::-webkit-scrollbar {
   display: none;
 }
@@ -334,6 +335,11 @@
 .db-tabs[data-scroll-behavior=arrows]:has(.db-button)::after {
   inset-inline-end: 0;
 }
+.db-tabs[data-scroll-behavior=arrows] {
+  /*
+   * Scroll left / right buttons
+   */
+}
 .db-tabs[data-scroll-behavior=arrows] .tabs-scroll-left > .db-button, .db-tabs[data-scroll-behavior=arrows] .tabs-scroll-left:is(.db-button) {
   inset-inline-start: 0;
 }

package/build/components/tag/tag.css

@@ -860,7 +860,6 @@
   border-color: var(--db-tag-border-color);
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
 .db-tag:has(label, button:not(.db-tab-remove-button), a)::before, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:not(.db-tab-remove-button)::before,
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) dbbutton:not(.db-tab-remove-button) > button::before,
@@ -877,6 +876,15 @@
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a::after, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input)::after, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input)::after, .db-tag[data-emphasis=strong]:has(label, button:not(.db-tab-remove-button), a):has(input):not(:has(input:checked))::after {
   --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
 }
+.db-tag:has(label, button:not(.db-tab-remove-button), a), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:not(.db-tab-remove-button),
+.db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) dbbutton:not(.db-tab-remove-button) > button,
+.db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button,
+.db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) a, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak]:not(:has(dbbutton)) button:not(.db-tab-remove-button),
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] dbbutton:not(.db-tab-remove-button) > button,
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] db-button > button,
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong]:has(input):not(:has(input:checked)) {
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
 .db-tag:hover:not(:disabled,
 [aria-disabled=true],
 [tabindex="-1"],
@@ -1314,7 +1322,6 @@
   border-color: var(--db-tag-border-color);
   background-color: var(--db-adaptive-bg-vibrant-default);
   color: var(--db-adaptive-on-bg-vibrant-default);
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
 .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button::before, .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button::before, .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button::before, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input[type=checkbox]:checked)::before, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input[type=checkbox]:checked)::before, .db-tag[data-emphasis=strong]:has(label, button:not(.db-tab-remove-button), a)::before, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong]:not(:has(dbbutton)) button:not(.db-tab-remove-button)::before,
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button::before,
@@ -1325,6 +1332,12 @@
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a::after, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:has(input[type=checkbox]:checked)::after {
   --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
 }
+.db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button, .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button, .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input[type=checkbox]:checked), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input[type=checkbox]:checked), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong], .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong]:not(:has(dbbutton)) button:not(.db-tab-remove-button),
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button,
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button,
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:has(input[type=checkbox]:checked) {
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
 .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
 [aria-disabled=true],
 [tabindex="-1"],
@@ -1739,20 +1752,24 @@
 [data-no-text=true].db-tag {
   --icon-margin-after: 0;
   font-size: 0 !important;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  padding: 0;
-  gap: 0;
 }
 [data-no-text=true].db-tag::before {
   --db-icon-margin-end: 0;
 }
+[data-no-text=true].db-tag {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  padding: 0;
+  gap: 0;
+}
 [data-no-text=true].db-tag label {
   font-size: 0 !important;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 [data-no-text=true].db-tag label::before {
   --db-icon-margin-end: 0;
 }
+[data-no-text=true].db-tag label {
+  /* 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 */
@@ -1991,7 +2008,6 @@
 
 .db-tag[data-show-check-state=true] label {
   --db-icon-margin-start: var(--db-spacing-fixed-2xs);
-  /* TODO: maybe we could get rid of an expensive :has selector by defining this icon on the input itself */
 }
 .db-tag[data-show-check-state=true] label:not([data-show-icon-trailing=false])::after {
   --db-icon-trailing: "circle";
@@ -2003,6 +2019,9 @@
     content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
+.db-tag[data-show-check-state=true] label {
+  /* TODO: maybe we could get rid of an expensive :has selector by defining this icon on the input itself */
+}
 .db-tag[data-show-check-state=true] label:has(input:checked):not([data-show-icon-trailing=false])::after {
   --db-icon-trailing: "check_circle";
   margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
@@ -2016,11 +2035,13 @@
 .db-tag label {
   inline-size: 100%;
   margin-inline-start: 0;
-  align-items: center;
 }
 .db-tag label:not([hidden]) {
   display: flex;
 }
+.db-tag label {
+  align-items: center;
+}
 @media (forced-colors: active) {
   .db-tag label:not(:has(input:checked)) {
     border-style: dashed;
@@ -2052,13 +2073,13 @@
 .db-tag label input:checked:not([data-show-icon-leading=false])::before {
   content: none;
 }
+.db-tag a:not([hidden]) {
+  display: inline-flex;
+}
 .db-tag a {
   align-items: center;
   text-decoration: none;
 }
-.db-tag a:not([hidden]) {
-  display: inline-flex;
-}
 .db-tag a::after {
   --db-icon-margin-start: 0;
   --db-icon-font-size: 0;

package/build/components/textarea/textarea.css

@@ -92,13 +92,6 @@ input[type=radio]:checked) > label {
     transform: rotate(1turn);
   }
 }
-.db-textarea textarea {
-  /* Buttons */
-  /* Up */
-  /* Down */
-  /* Left */
-  /* Right */
-}
 @supports (field-sizing: content) {
   .db-textarea textarea[data-field-sizing=content]:is([data-hide-resizer=true], [data-resize=none]) {
     /* We don't show a scrollbar if we use field-sizing: content and no resizer is available */
@@ -124,6 +117,9 @@ input[type=radio]:checked) > label {
 .db-textarea textarea::-webkit-scrollbar-thumb {
   background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
+.db-textarea textarea {
+  /* Buttons */
+}
 .db-textarea textarea::-webkit-scrollbar-button:single-button {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   background-size: 0.5rem;
@@ -137,16 +133,28 @@ input[type=radio]:checked) > label {
 .db-textarea textarea::-webkit-scrollbar-button:single-button:active {
   background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
+.db-textarea textarea {
+  /* Up */
+}
 .db-textarea textarea::-webkit-scrollbar-button:single-button:vertical:decrement {
   border-start-end-radius: var(--db-border-radius-xs);
   background-image: var(--db-scrollbar-button-vertical-decrement);
 }
+.db-textarea textarea {
+  /* Down */
+}
 .db-textarea textarea::-webkit-scrollbar-button:single-button:vertical:increment {
   background-image: var(--db-scrollbar-button-vertical-increment);
 }
+.db-textarea textarea {
+  /* Left */
+}
 .db-textarea textarea::-webkit-scrollbar-button:single-button:horizontal:decrement {
   background-image: var(--db-scrollbar-button-horizontal-decrement);
 }
+.db-textarea textarea {
+  /* Right */
+}
 .db-textarea textarea::-webkit-scrollbar-button:single-button:horizontal:increment {
   background-image: var(--db-scrollbar-button-horizontal-increment);
 }
@@ -385,14 +393,14 @@ input[type=radio]:checked) textarea:is([type=date],
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) textarea {
   border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
 }
-.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) > db-infotext > .db-infotext,
-.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 */
-}
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) > .db-infotext[data-semantic=successful]:not([hidden]) {
   display: flex;
 }
+.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) > db-infotext > .db-infotext,
+.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 */
+}
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) > .db-infotext:not([data-semantic]):not([hidden]) {
   display: none;
@@ -436,16 +444,16 @@ input[type=radio]:checked) textarea:is([type=date],
 .db-textarea:has(textarea[data-custom-validity=valid]) textarea, .db-textarea[data-custom-validity=valid] textarea {
   border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
 }
-.db-textarea:has(textarea[data-custom-validity=valid]) > db-infotext > .db-infotext,
-.db-textarea:has(textarea[data-custom-validity=valid]) > .db-infotext, .db-textarea[data-custom-validity=valid] > db-infotext > .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 > .db-infotext[data-semantic=successful]:not([hidden]),
 .db-textarea:has(textarea[data-custom-validity=valid]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-textarea[data-custom-validity=valid] > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
 .db-textarea[data-custom-validity=valid] > .db-infotext[data-semantic=successful]:not([hidden]) {
   display: flex;
 }
+.db-textarea:has(textarea[data-custom-validity=valid]) > db-infotext > .db-infotext,
+.db-textarea:has(textarea[data-custom-validity=valid]) > .db-infotext, .db-textarea[data-custom-validity=valid] > db-infotext > .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 > .db-infotext:not([data-semantic]):not([hidden]),
 .db-textarea:has(textarea[data-custom-validity=valid]) > .db-infotext:not([data-semantic]):not([hidden]), .db-textarea[data-custom-validity=valid] > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
 .db-textarea[data-custom-validity=valid] > .db-infotext:not([data-semantic]):not([hidden]) {
@@ -581,7 +589,6 @@ input[type=radio]:checked) textarea:is([type=date],
   /* stylelint-disable-next-line db-ux/use-spacings */
   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 */
-  /* see https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing */
 }
 .db-textarea textarea:hover:not(:disabled,
 [aria-disabled=true],
@@ -608,6 +615,9 @@ input[type=radio]:checked) textarea:is([type=date],
 :has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
+.db-textarea textarea {
+  /* see https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing */
+}
 .db-textarea textarea[data-field-sizing=content] {
   field-sizing: content;
 }