@db-ux/core-foundations 5.1.6 → 5.2.1-shell-797019e

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @db-ux/core-foundations
 
+## 5.2.1
+
+_version bump_
+
+## 5.2.0
+
+### Minor Changes
+
+- refactor(SASS): expose the headline level mapping as `fonts.$headlines` - [see commit dfa8e2c](https://github.com/db-ux-design-system/core-web/commit/dfa8e2cf7c05d7bc42782a38b1eb3d65d971e156):
+
+    - The default visual size per semantic level moves from
+    - `defaults/default-fonts.scss` into the new non-emitting partial
+    - `fonts/_headline-levels.scss`, so `defaults/default-fonts.scss` and the Heading
+    - component styles share one source of truth. The emitted CSS is unchanged.
+
 ## 5.1.6
 
 _version bump_

package/assets/icons/LICENCES.json

@@ -29,6 +29,12 @@
 		"licence": "https://lucide.dev/license#lucide-license",
 		"origin": "arrow-right"
 	},
+	{
+		"name": "house.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "house"
+	},
 	{
 		"name": "arrow_up.svg",
 		"type": "lucide",
@@ -65,6 +71,18 @@
 		"licence": "https://lucide.dev/license#lucide-license",
 		"origin": "chevron-up"
 	},
+	{
+		"name": "double_chevron_left.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "chevrons-left"
+	},
+	{
+		"name": "double_chevron_right.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "chevrons-right"
+	},
 	{
 		"name": "clock.svg",
 		"type": "lucide",

package/assets/images/chevron_down.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
+  <style>
+    :is(:root, :host) { color-scheme: var(--db-color-scheme, light dark); }
+    path { fill: light-dark(#16181b, #fff) }
+  </style>
+  <path fill-rule="evenodd" stroke="none" d="M5.67 8.061c-.222.081-.42.248-.542.455-.092.156-.108.229-.107.484 0 .212.022.341.074.44.1.192 6.199 6.298 6.425 6.433.153.091.225.107.48.106.212 0 .341-.022.44-.074.192-.1 6.298-6.199 6.433-6.425.091-.152.107-.226.107-.48s-.017-.328-.108-.484a1 1 0 0 0-1.215-.451c-.179.06-.447.315-2.927 2.789L12 13.578l-2.73-2.724C6.79 8.38 6.522 8.125 6.343 8.065a1 1 0 0 0-.673-.004"/>
+</svg>

package/assets/images/chevron_up.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
+  <style>
+    :is(:root, :host) { color-scheme: var(--db-color-scheme, light dark); }
+    path { fill: light-dark(#16181b, #fff) }
+  </style>
+  <path fill-rule="evenodd" stroke="none" d="M11.64 8.068c-.155.053-.604.485-3.293 3.167-1.777 1.773-3.159 3.182-3.22 3.285-.091.152-.107.226-.107.48 0 .257.016.327.113.492.13.222.369.409.603.473.202.054.53.024.709-.066.074-.037 1.355-1.285 2.845-2.773L12 10.421l2.71 2.705c1.49 1.488 2.771 2.736 2.845 2.773.455.229 1.046.045 1.312-.407.097-.165.113-.235.113-.492 0-.254-.016-.328-.107-.48-.061-.103-1.442-1.512-3.22-3.285-2.836-2.828-3.131-3.11-3.31-3.17a1.05 1.05 0 0 0-.703.003"/>
+</svg>

package/assets/images/logo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" fill="none">
+  <style>
+    :is(:root, :host) { color-scheme: var(--db-color-scheme, light dark); }
+    path { fill: light-dark(#16181b, #fff) }
+  </style>
+  <path d="M45.385 4.255 C 42.417 4.792,40.465 5.695,33.600 9.710 C 30.740 11.383,25.196 14.610,21.280 16.881 C 13.039 21.661,12.590 21.949,11.200 23.365 C 9.958 24.631,9.108 26.023,8.516 27.760 L 8.080 29.040 8.036 47.071 C 7.987 67.032,7.956 66.339,9.016 68.554 C 9.993 70.599,11.645 72.440,13.840 73.931 C 14.280 74.230,19.932 77.556,26.400 81.322 C 39.049 88.688,43.678 91.150,45.916 91.705 C 49.306 92.545,51.926 91.624,60.590 86.548 C 62.862 85.217,68.392 81.999,72.880 79.398 C 77.368 76.796,81.472 74.380,82.000 74.028 C 84.311 72.491,85.977 70.661,86.984 68.554 C 88.044 66.339,88.013 67.032,87.964 47.071 L 87.920 29.040 87.484 27.760 C 87.244 27.056,86.776 26.021,86.444 25.460 C 85.708 24.216,84.094 22.532,82.800 21.657 C 81.185 20.566,58.119 7.182,56.199 6.222 C 52.245 4.245,48.854 3.629,45.385 4.255 M49.840 12.240 C 50.538 12.386,51.714 12.853,52.960 13.478 C 54.671 14.336,75.843 26.395,76.209 26.720 C 76.310 26.809,64.845 33.623,55.252 39.176 C 51.111 41.572,47.129 41.912,43.440 40.183 C 42.129 39.568,36.284 36.304,29.360 32.319 C 26.192 30.496,22.713 28.516,21.629 27.919 C 20.229 27.148,19.719 26.791,19.869 26.690 C 19.985 26.611,20.487 26.336,20.985 26.079 C 22.508 25.291,30.649 20.624,36.546 17.158 C 39.619 15.352,42.805 13.556,43.626 13.167 C 46.000 12.043,47.692 11.790,49.840 12.240 M21.310 37.098 C 28.301 41.179,31.802 43.162,35.600 45.192 C 40.816 47.979,42.666 49.355,43.386 50.982 C 43.945 52.245,44.006 54.089,43.963 68.286 L 43.920 82.091 42.400 81.354 C 39.755 80.071,18.257 67.493,17.395 66.723 C 15.893 65.384,16.008 66.807,16.004 49.400 C 16.002 40.974,16.032 34.080,16.070 34.080 C 16.109 34.080,18.467 35.438,21.310 37.098 M79.753 65.234 C 79.303 66.426,78.170 67.229,71.582 71.030 C 68.160 73.005,62.912 76.059,59.920 77.818 C 56.928 79.576,53.940 81.328,53.280 81.710 L 52.080 82.404 52.033 68.682 C 51.987 55.141,52.057 52.624,52.514 51.566 C 52.929 50.604,53.636 49.764,54.674 48.999 C 56.531 47.632,67.024 41.525,76.000 36.586 L 79.920 34.429 79.963 49.495 C 80.002 62.944,79.980 64.632,79.753 65.234 " stroke="none" fill-rule="evenodd"/>
+</svg>

package/assets/images/resize_handle_corner.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <style>
+    :is(:root, :host) { color-scheme: var(--db-color-scheme, light dark); }
+    path { fill: light-dark(#16181b, #fff) }
+  </style>
+  <path fill-rule="evenodd" d="M18.771 4.037a1 1 0 0 0-.233.1c-.331.217-14.185 14.054-14.407 14.39-.096.145-.11.204-.109.469.002.352.059.487.305.726.279.271.745.348 1.074.178.066-.034.88-.806 1.809-1.716C9.426 16.016 19.441 5.972 19.709 5.65c.12-.145.227-.322.254-.42.15-.558-.272-1.145-.867-1.206a1.2 1.2 0 0 0-.325.013m-.063 8.512c-.149.022-1.31 1.139-3.991 3.837-2.291 2.305-2.221 2.219-2.19 2.708.012.194.043.297.125.422.22.332.634.522 1.012.466.256-.039.433-.2 2.772-2.521 2.58-2.561 3.452-3.477 3.516-3.691.104-.345.007-.695-.266-.968-.249-.249-.527-.321-.978-.253"/>
+</svg>

package/build/styles/bundle.css

@@ -202,6 +202,11 @@ code {
   --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
 }
 
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */
 :root,
 :host {
   --db-sizing-3xs: var(--db-sizing-regular-3xs);
@@ -4540,34 +4545,6 @@ blockquote:not([class]) {
   inherits: true;
   initial-value: 120em;
 }
-:root,
-:host {
-  /* COLORS */
-  --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiMyODJkMzciIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
-  --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iIzI4MmQzNyIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
-  --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjQ3MiA4LjY5Ni0zLjUzMiAzLjUzNGEuOTk4Ljk5OCAwIDEgMSAtMS40MTMtMS40MTNsMi44MjUtMi44MjUtMi44MjUtMi44MjVhLjk5OC45OTggMCAxIDEgMS40MTMtMS40MTNsMy41MzIgMy41MzJhLjk5OS45OTkgMCAwIDEgMCAxLjQxMnoiIGZpbGw9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoMCAxIC0xIDAgMTUuOTkxIC0uMDA5KSIvPjwvc3ZnPg0K");
-}
-@media (prefers-color-scheme: dark) {
-  :root,
-  :host {
-    --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiNmOGY4ZjkiIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
-    --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iI2Y4ZjhmOSIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
-    --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDdhLjk5OC45OTggMCAwIDAgLS45OTQuOTk1YzAgLjI2Ni4xMzMuNTMxLjI5OC42OTdsNS4wMDYgNS4wMWMuMTk5LjE5OC40NjQuMjk4LjY5Ni4yOThhLjkzNi45MzYgMCAwIDAgLjYyLS4yMmw1LjA4Mi01LjA4OGMuMTk5LS4xNjYuMjk4LS40MzEuMjk4LS42OTdhLjk5OC45OTggMCAwIDAgLS45OTQtLjk5NWMtLjI2NiAwLS41My4xLS43My4yOTlsLTQuMjc2IDQuMjgtNC4yNzYtNC4yOGExLjAyOCAxLjAyOCAwIDAgMCAtLjczLS4yOTl6IiBmaWxsPSIjZjhmOGY5IiBzdHlsZT0idmFyKC0tZGItaWNvbi1jb2xvciwgY3VycmVudENvbG9yKSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+DQo=");
-  }
-}
-:root [data-mode=dark],
-:host [data-mode=dark] {
-  --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiNmOGY4ZjkiIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
-  --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iI2Y4ZjhmOSIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
-  --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDdhLjk5OC45OTggMCAwIDAgLS45OTQuOTk1YzAgLjI2Ni4xMzMuNTMxLjI5OC42OTdsNS4wMDYgNS4wMWMuMTk5LjE5OC40NjQuMjk4LjY5Ni4yOThhLjkzNi45MzYgMCAwIDAgLjYyLS4yMmw1LjA4Mi01LjA4OGMuMTk5LS4xNjYuMjk4LS40MzEuMjk4LS42OTdhLjk5OC45OTggMCAwIDAgLS45OTQtLjk5NWMtLjI2NiAwLS41My4xLS43My4yOTlsLTQuMjc2IDQuMjgtNC4yNzYtNC4yOGExLjAyOCAxLjAyOCAwIDAgMCAtLjczLS4yOTl6IiBmaWxsPSIjZjhmOGY5IiBzdHlsZT0idmFyKC0tZGItaWNvbi1jb2xvciwgY3VycmVudENvbG9yKSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+DQo=");
-}
-:root [data-mode=light],
-:host [data-mode=light] {
-  --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiMyODJkMzciIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
-  --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iIzI4MmQzNyIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
-  --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjQ3MiA4LjY5Ni0zLjUzMiAzLjUzNGEuOTk4Ljk5OCAwIDEgMSAtMS40MTMtMS40MTNsMi44MjUtMi44MjUtMi44MjUtMi44MjVhLjk5OC45OTggMCAxIDEgMS40MTMtMS40MTNsMy41MzIgMy41MzJhLjk5OS45OTkgMCAwIDEgMCAxLjQxMnoiIGZpbGw9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoMCAxIC0xIDAgMTUuOTkxIC0uMDA5KSIvPjwvc3ZnPg0K");
-}
-
 :root {
   color-scheme: var(--db-color-scheme, light dark);
 }
@@ -4598,18 +4575,14 @@ body {
   padding: 0;
 }
 
-/* stylelint-disable selector-max-id */
-body,
-#root,
-#app {
-  block-size: inherit;
-}
-
-/* stylelint-enable selector-max-id */
 body {
   font-family: var(--db-font-family-sans);
 }
 
+html {
+  -webkit-tap-highlight-color: var(--db-informational-bg-basic-transparent-semi-default);
+}
+
 *,
 ::before,
 ::after {

package/build/styles/defaults/default-fonts.scss

@@ -8,16 +8,7 @@ code {
 	@extend %db-overwrite-font-size-sm;
 }
 
-$headlines: (
-	"h1": "xl",
-	"h2": "lg",
-	"h3": "md",
-	"h4": "sm",
-	"h5": "xs",
-	"h6": "2xs"
-);
-
-@each $headline, $size in $headlines {
+@each $headline, $size in fonts.$headlines {
 	#{string.unquote($headline)} {
 		/* stylelint-disable custom-property-pattern */
 		font: var(--db-type-headline-#{string.unquote($size)});

package/build/styles/defaults/default-required.css

@@ -2590,4 +2590,4 @@
   );--db-burgundy-bg-vibrant-pressed:light-dark(
   	var(--db-burgundy-10),
   	var(--db-burgundy-10)
-  )}:where(html){line-height:1.15;-webkit-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:initial;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:initial}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}@property --db-screen-xs{syntax:"*";inherits:true;initial-value:20em}@property --db-screen-sm{syntax:"*";inherits:true;initial-value:48em}@property --db-screen-md{syntax:"*";inherits:true;initial-value:64em}@property --db-screen-lg{syntax:"*";inherits:true;initial-value:90em}@property --db-screen-xl{syntax:"*";inherits:true;initial-value:120em}:host,:root{--db-textarea-resizer-image:url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiMyODJkMzciIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");--db-textarea-scrollbar-button-decrement:url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iIzI4MmQzNyIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");--db-textarea-scrollbar-button-increment:url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjQ3MiA4LjY5Ni0zLjUzMiAzLjUzNGEuOTk4Ljk5OCAwIDEgMSAtMS40MTMtMS40MTNsMi44MjUtMi44MjUtMi44MjUtMi44MjVhLjk5OC45OTggMCAxIDEgMS40MTMtMS40MTNsMy41MzIgMy41MzJhLjk5OS45OTkgMCAwIDEgMCAxLjQxMnoiIGZpbGw9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoMCAxIC0xIDAgMTUuOTkxIC0uMDA5KSIvPjwvc3ZnPg0K")}@media (prefers-color-scheme:dark){:host,:root{--db-textarea-resizer-image:url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiNmOGY4ZjkiIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");--db-textarea-scrollbar-button-decrement:url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iI2Y4ZjhmOSIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");--db-textarea-scrollbar-button-increment:url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDdhLjk5OC45OTggMCAwIDAgLS45OTQuOTk1YzAgLjI2Ni4xMzMuNTMxLjI5OC42OTdsNS4wMDYgNS4wMWMuMTk5LjE5OC40NjQuMjk4LjY5Ni4yOThhLjkzNi45MzYgMCAwIDAgLjYyLS4yMmw1LjA4Mi01LjA4OGMuMTk5LS4xNjYuMjk4LS40MzEuMjk4LS42OTdhLjk5OC45OTggMCAwIDAgLS45OTQtLjk5NWMtLjI2NiAwLS41My4xLS43My4yOTlsLTQuMjc2IDQuMjgtNC4yNzYtNC4yOGExLjAyOCAxLjAyOCAwIDAgMCAtLjczLS4yOTl6IiBmaWxsPSIjZjhmOGY5IiBzdHlsZT0idmFyKC0tZGItaWNvbi1jb2xvciwgY3VycmVudENvbG9yKSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+DQo=")}}:host [data-mode=dark],:root [data-mode=dark]{--db-textarea-resizer-image:url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiNmOGY4ZjkiIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");--db-textarea-scrollbar-button-decrement:url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iI2Y4ZjhmOSIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");--db-textarea-scrollbar-button-increment:url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDdhLjk5OC45OTggMCAwIDAgLS45OTQuOTk1YzAgLjI2Ni4xMzMuNTMxLjI5OC42OTdsNS4wMDYgNS4wMWMuMTk5LjE5OC40NjQuMjk4LjY5Ni4yOThhLjkzNi45MzYgMCAwIDAgLjYyLS4yMmw1LjA4Mi01LjA4OGMuMTk5LS4xNjYuMjk4LS40MzEuMjk4LS42OTdhLjk5OC45OTggMCAwIDAgLS45OTQtLjk5NWMtLjI2NiAwLS41My4xLS43My4yOTlsLTQuMjc2IDQuMjgtNC4yNzYtNC4yOGExLjAyOCAxLjAyOCAwIDAgMCAtLjczLS4yOTl6IiBmaWxsPSIjZjhmOGY5IiBzdHlsZT0idmFyKC0tZGItaWNvbi1jb2xvciwgY3VycmVudENvbG9yKSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+DQo=")}:host [data-mode=light],:root [data-mode=light]{--db-textarea-resizer-image:url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiMyODJkMzciIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");--db-textarea-scrollbar-button-decrement:url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iIzI4MmQzNyIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");--db-textarea-scrollbar-button-increment:url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjQ3MiA4LjY5Ni0zLjUzMiAzLjUzNGEuOTk4Ljk5OCAwIDEgMSAtMS40MTMtMS40MTNsMi44MjUtMi44MjUtMi44MjUtMi44MjVhLjk5OC45OTggMCAxIDEgMS40MTMtMS40MTNsMy41MzIgMy41MzJhLjk5OS45OTkgMCAwIDEgMCAxLjQxMnoiIGZpbGw9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoMCAxIC0xIDAgMTUuOTkxIC0uMDA5KSIvPjwvc3ZnPg0K")}:root{color-scheme:var(--db-color-scheme,light dark)}:root:has([name=color-scheme]:is([content~=light],[content~=dark])){color-scheme:var(--db-color-scheme)}[data-mode=light]{color-scheme:light}[data-mode=dark]{color-scheme:dark}[data-pride=true]{--db-pride-red:var(--db-red-origin-default);--db-pride-orange:var(--db-orange-origin-default);--db-pride-yellow:var(--db-yellow-origin-default);--db-pride-green:var(--db-light-green-origin-default);--db-pride-blue:var(--db-blue-origin-default);--db-pride-violet:var(--db-violet-origin-default)}body,html{margin:0;padding:0}#app,#root,body{block-size:inherit}body{font-family:var(--db-font-family-sans)}*,:after,:before{box-sizing:var(--db-box-sizing,border-box)}*{-webkit-font-smoothing:antialiased;font-synthesis:none;text-rendering:optimizelegibility}a,body,button,input,select,summary,textarea{color:inherit}embed,iframe,img,object,video{block-size:auto;max-inline-size:100%}iframe{border:0}:where(ul){padding-inline-start:var(--db-spacing-fixed-md);list-style-type:var(--db-list-bullet)}:where(ul) li::marker{color:var(--db-brand-origin-default)}[role=navigation] ol,[role=navigation] ul,nav ol,nav ul{list-style-type:"";margin:0;padding:0}fieldset{border:0}details>*,details>:after,details>:before{box-sizing:var(--db-box-sizing,border-box)}
+  )}:where(html){line-height:1.15;-webkit-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:initial;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:initial}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}@property --db-screen-xs{syntax:"*";inherits:true;initial-value:20em}@property --db-screen-sm{syntax:"*";inherits:true;initial-value:48em}@property --db-screen-md{syntax:"*";inherits:true;initial-value:64em}@property --db-screen-lg{syntax:"*";inherits:true;initial-value:90em}@property --db-screen-xl{syntax:"*";inherits:true;initial-value:120em}:root{color-scheme:var(--db-color-scheme,light dark)}:root:has([name=color-scheme]:is([content~=light],[content~=dark])){color-scheme:var(--db-color-scheme)}[data-mode=light]{color-scheme:light}[data-mode=dark]{color-scheme:dark}[data-pride=true]{--db-pride-red:var(--db-red-origin-default);--db-pride-orange:var(--db-orange-origin-default);--db-pride-yellow:var(--db-yellow-origin-default);--db-pride-green:var(--db-light-green-origin-default);--db-pride-blue:var(--db-blue-origin-default);--db-pride-violet:var(--db-violet-origin-default)}body,html{margin:0;padding:0}body{font-family:var(--db-font-family-sans)}html{-webkit-tap-highlight-color:var(--db-informational-bg-basic-transparent-semi-default)}*,:after,:before{box-sizing:var(--db-box-sizing,border-box)}*{-webkit-font-smoothing:antialiased;font-synthesis:none;text-rendering:optimizelegibility}a,body,button,input,select,summary,textarea{color:inherit}embed,iframe,img,object,video{block-size:auto;max-inline-size:100%}iframe{border:0}:where(ul){padding-inline-start:var(--db-spacing-fixed-md);list-style-type:var(--db-list-bullet)}:where(ul) li::marker{color:var(--db-brand-origin-default)}[role=navigation] ol,[role=navigation] ul,nav ol,nav ul{list-style-type:"";margin:0;padding:0}fieldset{border:0}details>*,details>:after,details>:before{box-sizing:var(--db-box-sizing,border-box)}

package/build/styles/defaults/default-required.scss

@@ -5,7 +5,6 @@
 @use "../helpers";
 @use "../fonts";
 @use "../screen-sizes";
-@use "../colors/default-color-icons";
 @use "non-ascii-tokens.css";
 @forward "../colors/default-color-mappings";
 @forward "../normalize";
@@ -14,21 +13,6 @@
 :root,
 :host {
 	@extend %db-font-size-md;
-
-	/* COLORS */
-	@include default-color-icons.get-color-icons-light;
-
-	@media (prefers-color-scheme: dark) {
-		@include default-color-icons.get-color-icons-dark;
-	}
-
-	[data-mode="dark"] {
-		@include default-color-icons.get-color-icons-dark;
-	}
-
-	[data-mode="light"] {
-		@include default-color-icons.get-color-icons-light;
-	}
 }
 
 // We'll set the color scheme (https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) to light and dark if it's not already set as a meta tag in the head, which would be the recommended way.
@@ -66,18 +50,14 @@ body {
 	padding: 0;
 }
 
-/* stylelint-disable selector-max-id */
-body,
-#root,
-#app {
-	block-size: inherit;
-}
-/* stylelint-enable selector-max-id */
-
 body {
 	font-family: var(--db-font-family-sans);
 }
 
+html {
+	-webkit-tap-highlight-color: #{colors.$db-informational-bg-basic-transparent-semi-default};
+}
+
 // Box sizing
 *,
 ::before,

package/build/styles/density/classes/all.css

@@ -18,6 +18,11 @@
   --db-icon-font-size: var(--db-base-body-icon-font-size-md);
 }
 
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */
 .db-density-expressive,
 [data-density=expressive] {
   --db-sizing-3xs: var(--db-sizing-expressive-3xs);

package/build/styles/density/classes/expressive.css

@@ -14,6 +14,11 @@
   --db-icon-font-size: var(--db-base-body-icon-font-size-md);
 }
 
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */
 .db-density-expressive,
 [data-density=expressive] {
   --db-sizing-3xs: var(--db-sizing-expressive-3xs);

package/build/styles/density/classes/functional.css

@@ -14,6 +14,11 @@
   --db-icon-font-size: var(--db-base-body-icon-font-size-md);
 }
 
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */
 .db-density-functional,
 [data-density=functional] {
   --db-sizing-3xs: var(--db-sizing-functional-3xs);

package/build/styles/density/classes/regular.css

@@ -14,6 +14,11 @@
   --db-icon-font-size: var(--db-base-body-icon-font-size-md);
 }
 
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */
 .db-density-regular,
 [data-density=regular] {
   --db-sizing-3xs: var(--db-sizing-regular-3xs);

package/build/styles/fonts/_headline-levels.scss

@@ -0,0 +1,13 @@
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */
+$headlines: (
+	"h1": "xl",
+	"h2": "lg",
+	"h3": "md",
+	"h4": "sm",
+	"h5": "xs",
+	"h6": "2xs"
+);

package/build/styles/fonts/_index.scss

@@ -1,2 +1,3 @@
 @forward "font-sizes";
+@forward "headline-levels";
 @forward "variables";

package/build/styles/fonts/classes/all.css

@@ -144,3 +144,9 @@
   --db-icon-font-weight: var(--db-base-headline-icon-weight-3xs);
   --db-icon-font-size: var(--db-base-headline-icon-font-size-3xs);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */

package/build/styles/fonts/classes/body/2xl.css

@@ -8,3 +8,9 @@
   --db-icon-font-weight: var(--db-base-body-icon-weight-2xl);
   --db-icon-font-size: var(--db-base-body-icon-font-size-2xl);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */

package/build/styles/fonts/classes/body/2xs.css

@@ -8,3 +8,9 @@
   --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
   --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */

package/build/styles/fonts/classes/body/3xl.css

@@ -8,3 +8,9 @@
   --db-icon-font-weight: var(--db-base-body-icon-weight-3xl);
   --db-icon-font-size: var(--db-base-body-icon-font-size-3xl);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */

package/build/styles/fonts/classes/body/3xs.css

@@ -8,3 +8,9 @@
   --db-icon-font-weight: var(--db-base-body-icon-weight-3xs);
   --db-icon-font-size: var(--db-base-body-icon-font-size-3xs);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */

package/build/styles/fonts/classes/body/all.css

@@ -72,3 +72,9 @@
   --db-icon-font-weight: var(--db-base-body-icon-weight-3xs);
   --db-icon-font-size: var(--db-base-body-icon-font-size-3xs);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */

package/build/styles/fonts/classes/body/lg.css

@@ -8,3 +8,9 @@
   --db-icon-font-weight: var(--db-base-body-icon-weight-lg);
   --db-icon-font-size: var(--db-base-body-icon-font-size-lg);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */

package/build/styles/fonts/classes/body/md.css

@@ -8,3 +8,9 @@
   --db-icon-font-weight: var(--db-base-body-icon-weight-md);
   --db-icon-font-size: var(--db-base-body-icon-font-size-md);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */

package/build/styles/fonts/classes/body/sm.css

@@ -8,3 +8,9 @@
   --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
   --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */

package/build/styles/fonts/classes/body/xl.css

@@ -8,3 +8,9 @@
   --db-icon-font-weight: var(--db-base-body-icon-weight-xl);
   --db-icon-font-size: var(--db-base-body-icon-font-size-xl);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */

package/build/styles/fonts/classes/body/xs.css

@@ -8,3 +8,9 @@
   --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
   --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */

package/build/styles/fonts/classes/headline/2xl.css

@@ -8,3 +8,9 @@
   --db-icon-font-weight: var(--db-base-headline-icon-weight-2xl);
   --db-icon-font-size: var(--db-base-headline-icon-font-size-2xl);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */

package/build/styles/fonts/classes/headline/2xs.css

@@ -8,3 +8,9 @@
   --db-icon-font-weight: var(--db-base-headline-icon-weight-2xs);
   --db-icon-font-size: var(--db-base-headline-icon-font-size-2xs);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */

package/build/styles/fonts/classes/headline/3xl.css

@@ -8,3 +8,9 @@
   --db-icon-font-weight: var(--db-base-headline-icon-weight-3xl);
   --db-icon-font-size: var(--db-base-headline-icon-font-size-3xl);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */

package/build/styles/fonts/classes/headline/3xs.css

@@ -8,3 +8,9 @@
   --db-icon-font-weight: var(--db-base-headline-icon-weight-3xs);
   --db-icon-font-size: var(--db-base-headline-icon-font-size-3xs);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */

package/build/styles/fonts/classes/headline/all.css

@@ -72,3 +72,9 @@
   --db-icon-font-weight: var(--db-base-headline-icon-weight-3xs);
   --db-icon-font-size: var(--db-base-headline-icon-font-size-3xs);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */

package/build/styles/fonts/classes/headline/lg.css

@@ -8,3 +8,9 @@
   --db-icon-font-weight: var(--db-base-headline-icon-weight-lg);
   --db-icon-font-size: var(--db-base-headline-icon-font-size-lg);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */

package/build/styles/fonts/classes/headline/md.css

@@ -8,3 +8,9 @@
   --db-icon-font-weight: var(--db-base-headline-icon-weight-md);
   --db-icon-font-size: var(--db-base-headline-icon-font-size-md);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */

package/build/styles/fonts/classes/headline/sm.css

@@ -8,3 +8,9 @@
   --db-icon-font-weight: var(--db-base-headline-icon-weight-sm);
   --db-icon-font-size: var(--db-base-headline-icon-font-size-sm);
 }
+
+/* Single source of truth for the default visual headline size per semantic
+ * level. Kept in its own partial because it is consumed both by
+ * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
+ * component styles in `@db-ux/core-components`. Those must not pull in the
+ * emitted default-fonts CSS just to read the mapping. */