@db-ux/core-components 2.0.6 → 2.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/build/components/badge/badge.css +48 -41
  2. package/build/components/badge/badge.scss +2 -0
  3. package/build/components/checkbox/checkbox.css +169 -263
  4. package/build/components/checkbox/checkbox.scss +76 -7
  5. package/build/components/custom-select/custom-select.css +1 -0
  6. package/build/components/header/header.css +6 -0
  7. package/build/components/header/header.scss +13 -0
  8. package/build/components/input/input.css +1 -0
  9. package/build/components/radio/radio.css +102 -264
  10. package/build/components/radio/radio.scss +39 -7
  11. package/build/components/select/select.css +1 -0
  12. package/build/components/switch/switch.css +37 -289
  13. package/build/components/switch/switch.scss +21 -7
  14. package/build/components/tag/tag.css +69 -52
  15. package/build/components/textarea/textarea.css +1 -0
  16. package/build/styles/absolute.css +121 -63
  17. package/build/styles/index.css +121 -63
  18. package/build/styles/internal/_form-components.scss +33 -59
  19. package/build/styles/internal/_tag-components.scss +41 -44
  20. package/build/styles/relative.css +121 -63
  21. package/build/styles/rollup.css +121 -63
  22. package/build/styles/webpack.css +121 -63
  23. package/package.json +6 -6
package/build/components/tag/tag.css CHANGED
@@ -993,7 +993,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
993
993
  border-radius: var(--db-border-radius-xs);
994
994
  }
995
995
 
996
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)), .db-tag:has(.db-tab-remove-button), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:not(.db-tab-remove-button),
996
+ .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:not(.db-tab-remove-button),
997
997
  .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) dbbutton:not(.db-tab-remove-button) > button,
998
998
  .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button,
999
999
  .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),
@@ -1003,14 +1003,15 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1003
1003
  border-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
1004
1004
  background-color: var(--db-adaptive-bg-basic-level-1-default);
1005
1005
  color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
1006
+ /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
1006
1007
  }
1007
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))::before, .db-tag:has(.db-tab-remove-button)::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,
1008
+ .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:not(.db-tab-remove-button)::before,
1008
1009
  .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) dbbutton:not(.db-tab-remove-button) > button::before,
1009
1010
  .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button::before,
1010
1011
  .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,
1011
1012
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] dbbutton:not(.db-tab-remove-button) > button::before,
1012
1013
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] db-button > button::before,
1013
- .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:not(:has(label, button:not(.db-tab-remove-button), a))::after, .db-tag:has(.db-tab-remove-button)::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,
1014
+ .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,
1014
1015
  .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) dbbutton:not(.db-tab-remove-button) > button::after,
1015
1016
  .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button::after,
1016
1017
  .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,
@@ -1019,34 +1020,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1019
1020
  .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 {
1020
1021
  --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
1021
1022
  }
1022
-
1023
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-emphasis=strong], .db-tag:has(.db-tab-remove-button)[data-emphasis=strong], .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input[type=radio]:checked), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input[type=radio]:checked):is(:hover, :focus, :active), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input[type=radio]:checked), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input[type=radio]:checked):is(:hover, :focus, :active), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:has(input[type=radio]:checked), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-emphasis=strong] .db-tab-remove-button, .db-tag:has(.db-tab-remove-button)[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),
1024
- .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button,
1025
- .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button,
1026
- .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) {
1027
- border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
1028
- background-color: var(--db-adaptive-bg-vibrant-default);
1029
- color: var(--db-adaptive-on-bg-vibrant-default);
1030
- }
1031
- .db-tag[data-emphasis=strong]:not(:has(label, button:not(.db-tab-remove-button), a))::before, .db-tag[data-emphasis=strong]:has(.db-tab-remove-button)::before, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input[type=radio]:checked)::before, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input[type=radio]:checked):is(:hover, :focus, :active)::before, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input[type=radio]:checked)::before, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input[type=radio]:checked):is(:hover, :focus, :active)::before, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:has(input[type=radio]:checked)::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-emphasis=strong] .db-tab-remove-button::before, .db-tag:has(.db-tab-remove-button)[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,
1032
- .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button::before,
1033
- .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button::before,
1034
- .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a::before, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:has(input[type=checkbox]:checked)::before, .db-tag[data-emphasis=strong]:not(:has(label, button:not(.db-tab-remove-button), a))::after, .db-tag[data-emphasis=strong]:has(.db-tab-remove-button)::after, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input[type=radio]:checked)::after, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input[type=radio]:checked):is(:hover, :focus, :active)::after, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input[type=radio]:checked)::after, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input[type=radio]:checked):is(:hover, :focus, :active)::after, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:has(input[type=radio]:checked)::after, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-emphasis=strong] .db-tab-remove-button::after, .db-tag:has(.db-tab-remove-button)[data-emphasis=strong] .db-tab-remove-button::after, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input[type=checkbox]:checked)::after, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input[type=checkbox]:checked)::after, .db-tag[data-emphasis=strong]:has(label, button:not(.db-tab-remove-button), a)::after, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong]:not(:has(dbbutton)) button:not(.db-tab-remove-button)::after,
1035
- .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button::after,
1036
- .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button::after,
1037
- .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 {
1038
- --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
1039
- }
1040
-
1041
- .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:not(.db-tab-remove-button),
1042
- .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) dbbutton:not(.db-tab-remove-button) > button,
1043
- .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button,
1044
- .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),
1045
- .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] dbbutton:not(.db-tab-remove-button) > button,
1046
- .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] db-button > button,
1047
- .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)) {
1048
- /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
1049
- }
1050
1023
  .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),
1051
1024
  .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]),
1052
1025
  .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button:hover:not(:disabled, [aria-disabled=true]),
@@ -1128,57 +1101,69 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1128
1101
  cursor: pointer;
1129
1102
  }
1130
1103
 
1131
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-emphasis=strong] .db-tab-remove-button, .db-tag:has(.db-tab-remove-button)[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),
1104
+ .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),
1132
1105
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button,
1133
1106
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button,
1134
1107
  .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) {
1108
+ border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
1109
+ background-color: var(--db-adaptive-bg-vibrant-default);
1110
+ color: var(--db-adaptive-on-bg-vibrant-default);
1135
1111
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
1136
1112
  }
1137
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]), .db-tag:has(.db-tab-remove-button)[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:hover:not(:disabled, [aria-disabled=true]):has(input[type=checkbox]:checked), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:hover:not(:disabled, [aria-disabled=true]):has(input[type=checkbox]:checked), .db-tag[data-emphasis=strong]: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)[data-emphasis=strong]:not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):not(.db-tab-remove-button),
1113
+ .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,
1114
+ .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button::before,
1115
+ .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button::before,
1116
+ .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a::before, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:has(input[type=checkbox]:checked)::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button::after, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button::after, .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button::after, .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button::after, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input[type=checkbox]:checked)::after, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input[type=checkbox]:checked)::after, .db-tag[data-emphasis=strong]:has(label, button:not(.db-tab-remove-button), a)::after, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong]:not(:has(dbbutton)) button:not(.db-tab-remove-button)::after,
1117
+ .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button::after,
1118
+ .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button::after,
1119
+ .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 {
1120
+ --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
1121
+ }
1122
+ .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]), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]), .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]), .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:hover:not(:disabled, [aria-disabled=true]):has(input[type=checkbox]:checked), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:hover:not(:disabled, [aria-disabled=true]):has(input[type=checkbox]:checked), .db-tag[data-emphasis=strong]: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)[data-emphasis=strong]:not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):not(.db-tab-remove-button),
1138
1123
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button:hover:not(:disabled, [aria-disabled=true]),
1139
1124
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button:hover:not(:disabled, [aria-disabled=true]),
1140
1125
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a:hover:not(:disabled, [aria-disabled=true]), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:hover:not(:disabled, [aria-disabled=true]):has(input[type=checkbox]:checked) {
1141
1126
  cursor: var(--db-overwrite-cursor, pointer);
1142
1127
  background-color: var(--db-adaptive-bg-vibrant-hovered);
1143
1128
  }
1144
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tag:has(.db-tab-remove-button)[data-emphasis=strong] .db-tab-remove-button: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[type=checkbox]:checked), .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[type=checkbox]:checked), .db-tag[data-emphasis=strong]: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)[data-emphasis=strong]:not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):is(textarea):not(.db-tab-remove-button),
1129
+ .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]):is(textarea), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button: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[type=checkbox]:checked), .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[type=checkbox]:checked), .db-tag[data-emphasis=strong]: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)[data-emphasis=strong]:not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):is(textarea):not(.db-tab-remove-button),
1145
1130
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button:hover:not(:disabled, [aria-disabled=true]):is(textarea),
1146
1131
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button:hover:not(:disabled, [aria-disabled=true]):is(textarea),
1147
- .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:hover:not(:disabled, [aria-disabled=true]):is(textarea):has(input[type=checkbox]:checked), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input), .db-tag:has(.db-tab-remove-button)[data-emphasis=strong] .db-tab-remove-button: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[type=checkbox]:checked), .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[type=checkbox]:checked), .db-tag[data-emphasis=strong]: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)[data-emphasis=strong]:not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):is(input):not(.db-tab-remove-button),
1132
+ .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:hover:not(:disabled, [aria-disabled=true]):is(textarea):has(input[type=checkbox]:checked), .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]):is(input), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input), .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input), .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button: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[type=checkbox]:checked), .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[type=checkbox]:checked), .db-tag[data-emphasis=strong]: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)[data-emphasis=strong]:not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):is(input):not(.db-tab-remove-button),
1148
1133
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button:hover:not(:disabled, [aria-disabled=true]):is(input),
1149
1134
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button:hover:not(:disabled, [aria-disabled=true]):is(input),
1150
1135
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a:hover:not(:disabled, [aria-disabled=true]):is(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:hover:not(:disabled, [aria-disabled=true]):is(input):has(input[type=checkbox]:checked) {
1151
1136
  cursor: initial;
1152
1137
  }
1153
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tag:has(.db-tab-remove-button)[data-emphasis=strong] .db-tab-remove-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]) label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):has(input[type=checkbox]:checked), .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[type=checkbox]:checked), .db-tag[data-emphasis=strong]: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)[data-emphasis=strong]:not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):not(.db-tab-remove-button),
1138
+ .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]):is(input[type=checkbox]), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-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]) label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):has(input[type=checkbox]:checked), .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[type=checkbox]:checked), .db-tag[data-emphasis=strong]: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)[data-emphasis=strong]:not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):not(.db-tab-remove-button),
1154
1139
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
1155
1140
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
1156
- .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):has(input[type=checkbox]:checked), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-tag:has(.db-tab-remove-button)[data-emphasis=strong] .db-tab-remove-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]) label:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):has(input[type=checkbox]:checked), .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[type=checkbox]:checked), .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), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong]:not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):not(.db-tab-remove-button),
1141
+ .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):has(input[type=checkbox]:checked), .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]):is(input[type=radio]:not(:checked)), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-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]) label:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):has(input[type=checkbox]:checked), .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[type=checkbox]:checked), .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), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong]:not(:has(dbbutton)) button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):not(.db-tab-remove-button),
1157
1142
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
1158
1143
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
1159
1144
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] 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=strong] label:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):has(input[type=checkbox]:checked) {
1160
1145
  cursor: pointer;
1161
1146
  }
1162
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]), .db-tag:has(.db-tab-remove-button)[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:active:not(:disabled, [aria-disabled=true]):has(input[type=checkbox]:checked), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:active:not(:disabled, [aria-disabled=true]):has(input[type=checkbox]:checked), .db-tag[data-emphasis=strong]: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)[data-emphasis=strong]:not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):not(.db-tab-remove-button),
1147
+ .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]), .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]), .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:active:not(:disabled, [aria-disabled=true]):has(input[type=checkbox]:checked), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:active:not(:disabled, [aria-disabled=true]):has(input[type=checkbox]:checked), .db-tag[data-emphasis=strong]: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)[data-emphasis=strong]:not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):not(.db-tab-remove-button),
1163
1148
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button:active:not(:disabled, [aria-disabled=true]),
1164
1149
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button:active:not(:disabled, [aria-disabled=true]),
1165
1150
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a:active:not(:disabled, [aria-disabled=true]), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:active:not(:disabled, [aria-disabled=true]):has(input[type=checkbox]:checked) {
1166
1151
  cursor: var(--db-overwrite-cursor, pointer);
1167
1152
  background-color: var(--db-adaptive-bg-vibrant-pressed);
1168
1153
  }
1169
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-tag:has(.db-tab-remove-button)[data-emphasis=strong] .db-tab-remove-button: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[type=checkbox]:checked), .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[type=checkbox]:checked), .db-tag[data-emphasis=strong]: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)[data-emphasis=strong]:not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):is(textarea):not(.db-tab-remove-button),
1154
+ .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button: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[type=checkbox]:checked), .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[type=checkbox]:checked), .db-tag[data-emphasis=strong]: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)[data-emphasis=strong]:not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):is(textarea):not(.db-tab-remove-button),
1170
1155
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button:active:not(:disabled, [aria-disabled=true]):is(textarea),
1171
1156
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button:active:not(:disabled, [aria-disabled=true]):is(textarea),
1172
- .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:active:not(:disabled, [aria-disabled=true]):is(textarea):has(input[type=checkbox]:checked), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input), .db-tag:has(.db-tab-remove-button)[data-emphasis=strong] .db-tab-remove-button: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[type=checkbox]:checked), .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[type=checkbox]:checked), .db-tag[data-emphasis=strong]: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)[data-emphasis=strong]:not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):is(input):not(.db-tab-remove-button),
1157
+ .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:active:not(:disabled, [aria-disabled=true]):is(textarea):has(input[type=checkbox]:checked), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input), .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input), .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button: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[type=checkbox]:checked), .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[type=checkbox]:checked), .db-tag[data-emphasis=strong]: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)[data-emphasis=strong]:not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):is(input):not(.db-tab-remove-button),
1173
1158
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button:active:not(:disabled, [aria-disabled=true]):is(input),
1174
1159
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button:active:not(:disabled, [aria-disabled=true]):is(input),
1175
1160
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a:active:not(:disabled, [aria-disabled=true]):is(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:active:not(:disabled, [aria-disabled=true]):is(input):has(input[type=checkbox]:checked) {
1176
1161
  cursor: initial;
1177
1162
  }
1178
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tag:has(.db-tab-remove-button)[data-emphasis=strong] .db-tab-remove-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]) label:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):has(input[type=checkbox]:checked), .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[type=checkbox]:checked), .db-tag[data-emphasis=strong]: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)[data-emphasis=strong]:not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):not(.db-tab-remove-button),
1163
+ .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-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]) label:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):has(input[type=checkbox]:checked), .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[type=checkbox]:checked), .db-tag[data-emphasis=strong]: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)[data-emphasis=strong]:not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):not(.db-tab-remove-button),
1179
1164
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
1180
1165
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
1181
- .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):has(input[type=checkbox]:checked), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-tag:has(.db-tab-remove-button)[data-emphasis=strong] .db-tab-remove-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]) label:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):has(input[type=checkbox]:checked), .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[type=checkbox]:checked), .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), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong]:not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):not(.db-tab-remove-button),
1166
+ .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):has(input[type=checkbox]:checked), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-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]) label:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):has(input[type=checkbox]:checked), .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[type=checkbox]:checked), .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), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong]:not(:has(dbbutton)) button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):not(.db-tab-remove-button),
1182
1167
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
1183
1168
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
1184
1169
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] 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=strong] label:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):has(input[type=checkbox]:checked) {
@@ -1223,12 +1208,28 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1223
1208
  position: relative;
1224
1209
  gap: var(--db-spacing-fixed-2xs);
1225
1210
  }
1226
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=neutral], .db-tag:has(.db-tab-remove-button)[data-semantic=neutral] {
1211
+ .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic]):not([data-emphasis]), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=weak], .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive]:not([data-emphasis]), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=weak], .db-tag:has(.db-tab-remove-button):not([data-semantic]):not([data-emphasis]), .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=weak], .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive]:not([data-emphasis]), .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=weak] {
1212
+ border-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
1213
+ background-color: var(--db-adaptive-bg-basic-level-1-default);
1214
+ color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
1215
+ }
1216
+ .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic]):not([data-emphasis])::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic]):not([data-emphasis])::after, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=weak]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=weak]::after, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive]:not([data-emphasis])::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive]:not([data-emphasis])::after, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=weak]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=weak]::after, .db-tag:has(.db-tab-remove-button):not([data-semantic]):not([data-emphasis])::before, .db-tag:has(.db-tab-remove-button):not([data-semantic]):not([data-emphasis])::after, .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=weak]::before, .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=weak]::after, .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive]:not([data-emphasis])::before, .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive]:not([data-emphasis])::after, .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=weak]::before, .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=weak]::after {
1217
+ --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
1218
+ }
1219
+ .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=strong], .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong], .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong], .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong] {
1220
+ border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
1221
+ background-color: var(--db-adaptive-bg-vibrant-default);
1222
+ color: var(--db-adaptive-on-bg-vibrant-default);
1223
+ }
1224
+ .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=strong]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=strong]::after, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong]::after, .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong]::before, .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong]::after, .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong]::before, .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong]::after {
1225
+ --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
1226
+ }
1227
+ .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=neutral]:not([data-emphasis]), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=neutral][data-emphasis=weak], .db-tag:has(.db-tab-remove-button)[data-semantic=neutral]:not([data-emphasis]), .db-tag:has(.db-tab-remove-button)[data-semantic=neutral][data-emphasis=weak] {
1227
1228
  border-color: var(--db-neutral-on-bg-basic-emphasis-60-default);
1228
1229
  background-color: var(--db-neutral-bg-basic-level-1-default);
1229
1230
  color: var(--db-neutral-on-bg-basic-emphasis-80-default);
1230
1231
  }
1231
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=neutral]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=neutral]::after, .db-tag:has(.db-tab-remove-button)[data-semantic=neutral]::before, .db-tag:has(.db-tab-remove-button)[data-semantic=neutral]::after {
1232
+ .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=neutral]:not([data-emphasis])::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=neutral]:not([data-emphasis])::after, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=neutral][data-emphasis=weak]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=neutral][data-emphasis=weak]::after, .db-tag:has(.db-tab-remove-button)[data-semantic=neutral]:not([data-emphasis])::before, .db-tag:has(.db-tab-remove-button)[data-semantic=neutral]:not([data-emphasis])::after, .db-tag:has(.db-tab-remove-button)[data-semantic=neutral][data-emphasis=weak]::before, .db-tag:has(.db-tab-remove-button)[data-semantic=neutral][data-emphasis=weak]::after {
1232
1233
  --db-icon-color: var(--db-neutral-on-bg-basic-emphasis-80-default);
1233
1234
  }
1234
1235
  .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=neutral][data-emphasis=strong], .db-tag:has(.db-tab-remove-button)[data-semantic=neutral][data-emphasis=strong] {
@@ -1239,12 +1240,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1239
1240
  .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=neutral][data-emphasis=strong]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=neutral][data-emphasis=strong]::after, .db-tag:has(.db-tab-remove-button)[data-semantic=neutral][data-emphasis=strong]::before, .db-tag:has(.db-tab-remove-button)[data-semantic=neutral][data-emphasis=strong]::after {
1240
1241
  --db-icon-color: var(--db-neutral-on-bg-vibrant-default);
1241
1242
  }
1242
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=critical], .db-tag:has(.db-tab-remove-button)[data-semantic=critical] {
1243
+ .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=critical]:not([data-emphasis]), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=critical][data-emphasis=weak], .db-tag:has(.db-tab-remove-button)[data-semantic=critical]:not([data-emphasis]), .db-tag:has(.db-tab-remove-button)[data-semantic=critical][data-emphasis=weak] {
1243
1244
  border-color: var(--db-critical-on-bg-basic-emphasis-60-default);
1244
1245
  background-color: var(--db-critical-bg-basic-level-1-default);
1245
1246
  color: var(--db-critical-on-bg-basic-emphasis-80-default);
1246
1247
  }
1247
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=critical]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=critical]::after, .db-tag:has(.db-tab-remove-button)[data-semantic=critical]::before, .db-tag:has(.db-tab-remove-button)[data-semantic=critical]::after {
1248
+ .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=critical]:not([data-emphasis])::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=critical]:not([data-emphasis])::after, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=critical][data-emphasis=weak]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=critical][data-emphasis=weak]::after, .db-tag:has(.db-tab-remove-button)[data-semantic=critical]:not([data-emphasis])::before, .db-tag:has(.db-tab-remove-button)[data-semantic=critical]:not([data-emphasis])::after, .db-tag:has(.db-tab-remove-button)[data-semantic=critical][data-emphasis=weak]::before, .db-tag:has(.db-tab-remove-button)[data-semantic=critical][data-emphasis=weak]::after {
1248
1249
  --db-icon-color: var(--db-critical-on-bg-basic-emphasis-80-default);
1249
1250
  }
1250
1251
  .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=critical][data-emphasis=strong], .db-tag:has(.db-tab-remove-button)[data-semantic=critical][data-emphasis=strong] {
@@ -1255,12 +1256,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1255
1256
  .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=critical][data-emphasis=strong]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=critical][data-emphasis=strong]::after, .db-tag:has(.db-tab-remove-button)[data-semantic=critical][data-emphasis=strong]::before, .db-tag:has(.db-tab-remove-button)[data-semantic=critical][data-emphasis=strong]::after {
1256
1257
  --db-icon-color: var(--db-critical-on-bg-vibrant-default);
1257
1258
  }
1258
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=successful], .db-tag:has(.db-tab-remove-button)[data-semantic=successful] {
1259
+ .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=successful]:not([data-emphasis]), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=successful][data-emphasis=weak], .db-tag:has(.db-tab-remove-button)[data-semantic=successful]:not([data-emphasis]), .db-tag:has(.db-tab-remove-button)[data-semantic=successful][data-emphasis=weak] {
1259
1260
  border-color: var(--db-successful-on-bg-basic-emphasis-60-default);
1260
1261
  background-color: var(--db-successful-bg-basic-level-1-default);
1261
1262
  color: var(--db-successful-on-bg-basic-emphasis-80-default);
1262
1263
  }
1263
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=successful]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=successful]::after, .db-tag:has(.db-tab-remove-button)[data-semantic=successful]::before, .db-tag:has(.db-tab-remove-button)[data-semantic=successful]::after {
1264
+ .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=successful]:not([data-emphasis])::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=successful]:not([data-emphasis])::after, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=successful][data-emphasis=weak]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=successful][data-emphasis=weak]::after, .db-tag:has(.db-tab-remove-button)[data-semantic=successful]:not([data-emphasis])::before, .db-tag:has(.db-tab-remove-button)[data-semantic=successful]:not([data-emphasis])::after, .db-tag:has(.db-tab-remove-button)[data-semantic=successful][data-emphasis=weak]::before, .db-tag:has(.db-tab-remove-button)[data-semantic=successful][data-emphasis=weak]::after {
1264
1265
  --db-icon-color: var(--db-successful-on-bg-basic-emphasis-80-default);
1265
1266
  }
1266
1267
  .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=successful][data-emphasis=strong], .db-tag:has(.db-tab-remove-button)[data-semantic=successful][data-emphasis=strong] {
@@ -1271,12 +1272,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1271
1272
  .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=successful][data-emphasis=strong]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=successful][data-emphasis=strong]::after, .db-tag:has(.db-tab-remove-button)[data-semantic=successful][data-emphasis=strong]::before, .db-tag:has(.db-tab-remove-button)[data-semantic=successful][data-emphasis=strong]::after {
1272
1273
  --db-icon-color: var(--db-successful-on-bg-vibrant-default);
1273
1274
  }
1274
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=warning], .db-tag:has(.db-tab-remove-button)[data-semantic=warning] {
1275
+ .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=warning]:not([data-emphasis]), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=warning][data-emphasis=weak], .db-tag:has(.db-tab-remove-button)[data-semantic=warning]:not([data-emphasis]), .db-tag:has(.db-tab-remove-button)[data-semantic=warning][data-emphasis=weak] {
1275
1276
  border-color: var(--db-warning-on-bg-basic-emphasis-60-default);
1276
1277
  background-color: var(--db-warning-bg-basic-level-1-default);
1277
1278
  color: var(--db-warning-on-bg-basic-emphasis-80-default);
1278
1279
  }
1279
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=warning]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=warning]::after, .db-tag:has(.db-tab-remove-button)[data-semantic=warning]::before, .db-tag:has(.db-tab-remove-button)[data-semantic=warning]::after {
1280
+ .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=warning]:not([data-emphasis])::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=warning]:not([data-emphasis])::after, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=warning][data-emphasis=weak]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=warning][data-emphasis=weak]::after, .db-tag:has(.db-tab-remove-button)[data-semantic=warning]:not([data-emphasis])::before, .db-tag:has(.db-tab-remove-button)[data-semantic=warning]:not([data-emphasis])::after, .db-tag:has(.db-tab-remove-button)[data-semantic=warning][data-emphasis=weak]::before, .db-tag:has(.db-tab-remove-button)[data-semantic=warning][data-emphasis=weak]::after {
1280
1281
  --db-icon-color: var(--db-warning-on-bg-basic-emphasis-80-default);
1281
1282
  }
1282
1283
  .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=warning][data-emphasis=strong], .db-tag:has(.db-tab-remove-button)[data-semantic=warning][data-emphasis=strong] {
@@ -1287,12 +1288,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1287
1288
  .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=warning][data-emphasis=strong]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=warning][data-emphasis=strong]::after, .db-tag:has(.db-tab-remove-button)[data-semantic=warning][data-emphasis=strong]::before, .db-tag:has(.db-tab-remove-button)[data-semantic=warning][data-emphasis=strong]::after {
1288
1289
  --db-icon-color: var(--db-warning-on-bg-vibrant-default);
1289
1290
  }
1290
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=informational], .db-tag:has(.db-tab-remove-button)[data-semantic=informational] {
1291
+ .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=informational]:not([data-emphasis]), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=informational][data-emphasis=weak], .db-tag:has(.db-tab-remove-button)[data-semantic=informational]:not([data-emphasis]), .db-tag:has(.db-tab-remove-button)[data-semantic=informational][data-emphasis=weak] {
1291
1292
  border-color: var(--db-informational-on-bg-basic-emphasis-60-default);
1292
1293
  background-color: var(--db-informational-bg-basic-level-1-default);
1293
1294
  color: var(--db-informational-on-bg-basic-emphasis-80-default);
1294
1295
  }
1295
- .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=informational]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=informational]::after, .db-tag:has(.db-tab-remove-button)[data-semantic=informational]::before, .db-tag:has(.db-tab-remove-button)[data-semantic=informational]::after {
1296
+ .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=informational]:not([data-emphasis])::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=informational]:not([data-emphasis])::after, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=informational][data-emphasis=weak]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=informational][data-emphasis=weak]::after, .db-tag:has(.db-tab-remove-button)[data-semantic=informational]:not([data-emphasis])::before, .db-tag:has(.db-tab-remove-button)[data-semantic=informational]:not([data-emphasis])::after, .db-tag:has(.db-tab-remove-button)[data-semantic=informational][data-emphasis=weak]::before, .db-tag:has(.db-tab-remove-button)[data-semantic=informational][data-emphasis=weak]::after {
1296
1297
  --db-icon-color: var(--db-informational-on-bg-basic-emphasis-80-default);
1297
1298
  }
1298
1299
  .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=informational][data-emphasis=strong], .db-tag:has(.db-tab-remove-button)[data-semantic=informational][data-emphasis=strong] {
@@ -1347,6 +1348,22 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1347
1348
  .db-tag:has(label, button:not(.db-tab-remove-button), a) input:checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tag:has(label, button:not(.db-tab-remove-button), a) input:checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
1348
1349
  cursor: pointer;
1349
1350
  }
1351
+ .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input[type=radio]:checked), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input[type=radio]:checked) {
1352
+ border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
1353
+ background-color: var(--db-adaptive-bg-vibrant-default);
1354
+ color: var(--db-adaptive-on-bg-vibrant-default);
1355
+ }
1356
+ .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input[type=radio]:checked)::before, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input[type=radio]:checked)::after, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input[type=radio]:checked)::before, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input[type=radio]:checked)::after {
1357
+ --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
1358
+ }
1359
+ .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:has(input[type=radio]:checked) {
1360
+ border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
1361
+ background-color: var(--db-adaptive-bg-vibrant-default);
1362
+ color: var(--db-adaptive-on-bg-vibrant-default);
1363
+ }
1364
+ .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:has(input[type=radio]:checked)::before, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:has(input[type=radio]:checked)::after {
1365
+ --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
1366
+ }
1350
1367
  .db-tag button:nth-of-type(2),
1351
1368
  .db-tag dbbutton:nth-of-type(2), .db-tag:has(db-button):has(dbbutton) .db-tab-remove-button {
1352
1369
  display: none;
package/build/components/textarea/textarea.css CHANGED
@@ -630,6 +630,7 @@ textarea[aria-disabled=true]) {
630
630
  inset-block-start: calc((var(--db-spacing-fixed-xs) + var(--db-base-body-icon-font-size-xs)) * var(--db-label-visible-above, 1) + var(--db-sizing-md) / 2);
631
631
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
632
632
  transform: translateY(-50%);
633
+ z-index: 1;
633
634
  }
634
635
  .db-textarea::before {
635
636
  margin-inline-end: var(--db-spacing-fixed-sm);