@db-ux/core-components 4.4.2 → 4.4.3

package/build/components/tag/tag.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 .db-tag label, .db-tag a {
   transition: outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
 }
@@ -827,12 +817,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -901,8 +885,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */
 .db-tag[data-show-check-state=true] label:not([data-show-icon-trailing=false])::after, .db-tag[data-show-check-state=true] label:has(input:checked):not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;
@@ -956,10 +938,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   display: inline-flex;
 }
 
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 .db-tag {
   border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
 }
@@ -974,7 +952,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-radius: var(--db-border-radius-xs);
 }
 
-.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), .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),
@@ -989,13 +967,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   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):not([data-emphasis]):not(:has(dbbutton)) button:not(.db-tab-remove-button)::before,
+.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,
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button::before,
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) a::before, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak]:not(:has(dbbutton)) button:not(.db-tab-remove-button)::before,
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] dbbutton:not(.db-tab-remove-button) > button::before,
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] db-button > button::before,
-.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a::before, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input)::before, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input)::before, .db-tag[data-emphasis=strong]:has(label, button:not(.db-tab-remove-button), a):has(input):not(:has(input:checked))::before, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:not(.db-tab-remove-button)::after,
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a::before, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input)::before, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input)::before, .db-tag[data-emphasis=strong]:has(label, button:not(.db-tab-remove-button), a):has(input):not(:has(input:checked))::before, .db-tag:has(label, button:not(.db-tab-remove-button), a)::after, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:not(.db-tab-remove-button)::after,
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) dbbutton:not(.db-tab-remove-button) > button::after,
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button::after,
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) a::after, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak]:not(:has(dbbutton)) button:not(.db-tab-remove-button)::after,
@@ -1004,7 +982,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .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):not([data-emphasis]):not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):not(.db-tab-remove-button),
+.db-tag:hover:not(:disabled, [aria-disabled=true]):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:hover:not(:disabled, [aria-disabled=true]):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:hover:not(:disabled, [aria-disabled=true]),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button:hover:not(:disabled, [aria-disabled=true]),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) a:hover:not(:disabled, [aria-disabled=true]), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak]:not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):not(.db-tab-remove-button),
@@ -1014,13 +992,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-level-1-hovered);
 }
-.db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):is(textarea):not(.db-tab-remove-button),
+.db-tag:hover:not(:disabled, [aria-disabled=true]):is(textarea):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:hover:not(:disabled, [aria-disabled=true]):is(textarea):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:hover:not(:disabled, [aria-disabled=true]):is(textarea),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button:hover:not(:disabled, [aria-disabled=true]):is(textarea),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) a:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak]:not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):is(textarea):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:hover:not(:disabled, [aria-disabled=true]):is(textarea),
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] db-button > button:hover:not(:disabled, [aria-disabled=true]):is(textarea),
-.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:hover:not(:disabled, [aria-disabled=true]):is(textarea):has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:hover:not(:disabled, [aria-disabled=true]):is(textarea):has(input), .db-tag[data-emphasis=strong]:hover:not(:disabled, [aria-disabled=true]):is(textarea):has(label, button:not(.db-tab-remove-button), a):has(input):not(:has(input:checked)), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):is(input):not(.db-tab-remove-button),
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:hover:not(:disabled, [aria-disabled=true]):is(textarea):has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:hover:not(:disabled, [aria-disabled=true]):is(textarea):has(input), .db-tag[data-emphasis=strong]:hover:not(:disabled, [aria-disabled=true]):is(textarea):has(label, button:not(.db-tab-remove-button), a):has(input):not(:has(input:checked)), .db-tag:hover:not(:disabled, [aria-disabled=true]):is(input):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:hover:not(:disabled, [aria-disabled=true]):is(input):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:hover:not(:disabled, [aria-disabled=true]):is(input),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button:hover:not(:disabled, [aria-disabled=true]):is(input),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) a:hover:not(:disabled, [aria-disabled=true]):is(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak]:not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):is(input):not(.db-tab-remove-button),
@@ -1029,22 +1007,22 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a:hover:not(:disabled, [aria-disabled=true]):is(input), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:hover:not(:disabled, [aria-disabled=true]):is(input):has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:hover:not(:disabled, [aria-disabled=true]):is(input):has(input), .db-tag[data-emphasis=strong]:hover:not(:disabled, [aria-disabled=true]):is(input):has(label, button:not(.db-tab-remove-button), a):has(input):not(:has(input:checked)) {
   cursor: initial;
 }
-.db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):not(.db-tab-remove-button),
+.db-tag:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):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:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):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:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) a:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak]:not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):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:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] db-button > button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
-.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):has(input), .db-tag[data-emphasis=strong]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):has(label, button:not(.db-tab-remove-button), a):has(input):not(:has(input:checked)), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):not(.db-tab-remove-button),
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):has(input), .db-tag:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):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:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):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:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) a:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak]:not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):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:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] db-button > button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
-.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):has(input), .db-tag[data-emphasis=strong]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):has(label, button:not(.db-tab-remove-button), a):has(input):not(:has(input:checked)) {
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):has(input) {
   cursor: pointer;
 }
-.db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):not(.db-tab-remove-button),
+.db-tag:active:not(:disabled, [aria-disabled=true]):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:active:not(:disabled, [aria-disabled=true]):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:active:not(:disabled, [aria-disabled=true]),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button:active:not(:disabled, [aria-disabled=true]),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) a:active:not(:disabled, [aria-disabled=true]), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak]:not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):not(.db-tab-remove-button),
@@ -1054,13 +1032,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-level-1-pressed);
 }
-.db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):is(textarea):not(.db-tab-remove-button),
+.db-tag:active:not(:disabled, [aria-disabled=true]):is(textarea):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:active:not(:disabled, [aria-disabled=true]):is(textarea):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:active:not(:disabled, [aria-disabled=true]):is(textarea),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button:active:not(:disabled, [aria-disabled=true]):is(textarea),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) a:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak]:not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):is(textarea):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:active:not(:disabled, [aria-disabled=true]):is(textarea),
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] db-button > button:active:not(:disabled, [aria-disabled=true]):is(textarea),
-.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:active:not(:disabled, [aria-disabled=true]):is(textarea):has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:active:not(:disabled, [aria-disabled=true]):is(textarea):has(input), .db-tag[data-emphasis=strong]:active:not(:disabled, [aria-disabled=true]):is(textarea):has(label, button:not(.db-tab-remove-button), a):has(input):not(:has(input:checked)), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):is(input):not(.db-tab-remove-button),
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:active:not(:disabled, [aria-disabled=true]):is(textarea):has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:active:not(:disabled, [aria-disabled=true]):is(textarea):has(input), .db-tag[data-emphasis=strong]:active:not(:disabled, [aria-disabled=true]):is(textarea):has(label, button:not(.db-tab-remove-button), a):has(input):not(:has(input:checked)), .db-tag:active:not(:disabled, [aria-disabled=true]):is(input):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:active:not(:disabled, [aria-disabled=true]):is(input):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:active:not(:disabled, [aria-disabled=true]):is(input),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button:active:not(:disabled, [aria-disabled=true]):is(input),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) a:active:not(:disabled, [aria-disabled=true]):is(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak]:not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):is(input):not(.db-tab-remove-button),
@@ -1069,19 +1047,19 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a:active:not(:disabled, [aria-disabled=true]):is(input), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:active:not(:disabled, [aria-disabled=true]):is(input):has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:active:not(:disabled, [aria-disabled=true]):is(input):has(input), .db-tag[data-emphasis=strong]:active:not(:disabled, [aria-disabled=true]):is(input):has(label, button:not(.db-tab-remove-button), a):has(input):not(:has(input:checked)) {
   cursor: initial;
 }
-.db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):not(.db-tab-remove-button),
+.db-tag:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):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:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):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:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) a:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak]:not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):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:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] db-button > button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
-.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):has(input), .db-tag[data-emphasis=strong]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):has(label, button:not(.db-tab-remove-button), a):has(input):not(:has(input:checked)), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):not(.db-tab-remove-button),
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):has(input), .db-tag:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):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:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):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:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) a:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak]:not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):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:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] db-button > button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
-.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):has(input), .db-tag[data-emphasis=strong]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):has(label, button:not(.db-tab-remove-button), a):has(input):not(:has(input:checked)) {
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):has(input) {
   cursor: pointer;
 }
 

package/build/components/textarea/textarea.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 .db-textarea[data-hide-label=true] > label, .db-visually-hidden,
 [data-visually-hidden=true] {
   clip: rect(0, 0, 0, 0) !important;
@@ -62,12 +52,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -170,12 +154,6 @@ input[type=radio]:checked) > label {
 
 @layer variables {}
 
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 .db-textarea textarea {
   border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
 }

package/build/components/tooltip/tooltip.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -113,8 +97,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */
 @keyframes popover-animation {
   0% {
     opacity: 0;
@@ -130,10 +112,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 .db-tooltip[data-show-arrow=true]::after, .db-tooltip {
   border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
 }
@@ -146,10 +124,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-tooltip:not([data-placement], [data-corrected-placement]), [data-placement=bottom].db-tooltip:not([data-corrected-placement]), [data-placement=top].db-tooltip:not([data-corrected-placement]), [data-corrected-placement=bottom].db-tooltip, [data-corrected-placement=top].db-tooltip {
   --db-popover-center-x: -50%;
   inset-inline-start: 50%;
+  transform: translateX(var(--db-popover-center-x, 0));
 }
 [data-corrected-placement=left].db-tooltip, [data-corrected-placement=right].db-tooltip, [data-placement=left].db-tooltip:not([data-corrected-placement]), [data-placement=right].db-tooltip:not([data-corrected-placement]) {
   --db-popover-center-y: -50%;
   inset-block-start: 50%;
+  transform: translateY(var(--db-popover-center-y, 0));
 }
 
 .db-tooltip {
@@ -246,6 +226,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (prefers-reduced-motion: reduce) {
+  .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement]), [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement]):first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=bottom].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=bottom].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom].db-tooltip:first-of-type {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+  }
+}
 @media screen and (prefers-reduced-motion: no-preference) {
   .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=bottom][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=bottom][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom][data-animation=true].db-tooltip:first-of-type {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
@@ -271,6 +257,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (prefers-reduced-motion: reduce) {
+  [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=top].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=top].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top].db-tooltip:first-of-type {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+  }
+}
 @media screen and (prefers-reduced-motion: no-preference) {
   [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=top][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=top][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top][data-animation=true].db-tooltip:first-of-type {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
@@ -296,6 +288,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (prefers-reduced-motion: reduce) {
+  [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=right].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=right].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right].db-tooltip:first-of-type {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+  }
+}
 @media screen and (prefers-reduced-motion: no-preference) {
   [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=right][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=right][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right][data-animation=true].db-tooltip:first-of-type {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
@@ -321,6 +319,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (prefers-reduced-motion: reduce) {
+  [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=left].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=left].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left].db-tooltip:first-of-type {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+  }
+}
 @media screen and (prefers-reduced-motion: no-preference) {
   [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=left][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=left][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left][data-animation=true].db-tooltip:first-of-type {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;