@db-ux/core-foundations 5.1.6-shell-11663a0 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @db-ux/core-foundations
 
+## 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,12 +29,6 @@
 		"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",
@@ -71,18 +65,6 @@
 		"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/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,6 +4545,34 @@ 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);
 }
@@ -4570,12 +4603,16 @@ body {
   padding: 0;
 }
 
-body {
-  font-family: var(--db-font-family-sans);
+/* stylelint-disable selector-max-id */
+body,
+#root,
+#app {
+  block-size: inherit;
 }
 
-html {
-  -webkit-tap-highlight-color: var(--db-informational-bg-basic-transparent-semi-default);
+/* stylelint-enable selector-max-id */
+body {
+  font-family: var(--db-font-family-sans);
 }
 
 *,

package/build/styles/colors/_default-color-icons.scss

@@ -0,0 +1,11 @@
+@mixin get-color-icons-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");
+}
+
+@mixin get-color-icons-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=");
+}

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}: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)}
+  )}: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)}

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

@@ -5,6 +5,7 @@
 @use "../helpers";
 @use "../fonts";
 @use "../screen-sizes";
+@use "../colors/default-color-icons";
 @use "non-ascii-tokens.css";
 @forward "../colors/default-color-mappings";
 @forward "../normalize";
@@ -13,6 +14,21 @@
 :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.
@@ -50,12 +66,16 @@ body {
 	padding: 0;
 }
 
-body {
-	font-family: var(--db-font-family-sans);
+/* stylelint-disable selector-max-id */
+body,
+#root,
+#app {
+	block-size: inherit;
 }
+/* stylelint-enable selector-max-id */
 
-html {
-	-webkit-tap-highlight-color: #{colors.$db-informational-bg-basic-transparent-semi-default};
+body {
+	font-family: var(--db-font-family-sans);
 }
 
 // Box sizing

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. */

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

@@ -8,3 +8,9 @@
   --db-icon-font-weight: var(--db-base-headline-icon-weight-xl);
   --db-icon-font-size: var(--db-base-headline-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/headline/xs.css

@@ -8,3 +8,9 @@
   --db-icon-font-weight: var(--db-base-headline-icon-weight-xs);
   --db-icon-font-size: var(--db-base-headline-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/helpers/_a11y.scss

@@ -16,7 +16,7 @@
 // RTL-safe alternative to text-indent: -9999px.
 @mixin a11y-visually-hidden-text {
 	overflow: hidden;
-	text-indent: 200%;
+	text-indent: 100%;
 	white-space: nowrap;
 }