@db-ux/core-foundations 5.7.1 → 6.0.1

package/build/styles/bundle.scss

@@ -1,9 +1,9 @@
+@forward "defaults/default-required";
 @forward "defaults/default-root";
 @forward "defaults/default-elevation";
 @forward "defaults/default-fonts";
 @forward "defaults/default-code";
 @forward "defaults/default-icons";
-@forward "defaults/default-required";
 @forward "defaults/default-container-properties";
 
 [data-mode] {

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

@@ -1,25 +1 @@
-code,small{font:var(--db-type-body-sm);--db-icon-font-weight:var(--db-base-body-icon-weight-sm);--db-icon-font-size:var(--db-base-body-icon-font-size-sm)}h1{font:var(--db-type-headline-xl);margin-block:var(--db-spacing-fixed-xl)}h1:after,h1:before{--db-icon-font-size:var(
-  	--db-base-headline-icon-font-size-xl
-  );--db-icon-font-weight:var(
-  	--db-base-headline-icon-weight-xl
-  )}h2{font:var(--db-type-headline-lg);margin-block:var(--db-spacing-fixed-lg)}h2:after,h2:before{--db-icon-font-size:var(
-  	--db-base-headline-icon-font-size-lg
-  );--db-icon-font-weight:var(
-  	--db-base-headline-icon-weight-lg
-  )}h3{font:var(--db-type-headline-md);margin-block:var(--db-spacing-fixed-md)}h3:after,h3:before{--db-icon-font-size:var(
-  	--db-base-headline-icon-font-size-md
-  );--db-icon-font-weight:var(
-  	--db-base-headline-icon-weight-md
-  )}h4{font:var(--db-type-headline-sm);margin-block:var(--db-spacing-fixed-sm)}h4:after,h4:before{--db-icon-font-size:var(
-  	--db-base-headline-icon-font-size-sm
-  );--db-icon-font-weight:var(
-  	--db-base-headline-icon-weight-sm
-  )}h5{font:var(--db-type-headline-xs);margin-block:var(--db-spacing-fixed-xs)}h5:after,h5:before{--db-icon-font-size:var(
-  	--db-base-headline-icon-font-size-xs
-  );--db-icon-font-weight:var(
-  	--db-base-headline-icon-weight-xs
-  )}h6{font:var(--db-type-headline-2xs);margin-block:var(--db-spacing-fixed-2xs)}h6:after,h6:before{--db-icon-font-size:var(
-  	--db-base-headline-icon-font-size-2xs
-  );--db-icon-font-weight:var(
-  	--db-base-headline-icon-weight-2xs
-  )}:is(h1,h2,h3,h4,h5,h6){font-family:var(--db-font-family-head);font-weight:bolder;text-wrap:balance}:is(h1,h2,h3,h4,h5,h6)[data-variant=light]{font-weight:300}:is(h1,h2,h3,h4,h5,h6)[data-variant=regular]{font-weight:400}p{margin-block:var(--db-spacing-fixed-md)}[data-font=digital]{font-weight:300}[data-font=regular]{font-weight:400}[data-font=medium]{font-weight:500}[data-font=semibold]{font-weight:600}[data-font=bold],strong{font-weight:700}
+code,small{font:var(--db-type-body-sm);--db-icon-font-weight:var(--db-base-body-icon-weight-sm);--db-icon-font-size:var(--db-base-body-icon-font-size-sm)}:is(h1,h2,h3,h4,h5,h6)[data-variant=light]{font-weight:300}:is(h1,h2,h3,h4,h5,h6)[data-variant=regular]{font-weight:400}[data-font=digital]{font-weight:300}[data-font=regular]{font-weight:400}[data-font=medium]{font-weight:500}[data-font=semibold]{font-weight:600}[data-font=bold],strong{font-weight:700}

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

@@ -1,6 +1,4 @@
 /* Use this file if you want the default fonts for paragraph and headlines in your project */
-@use "sass:string";
-@use "../variables";
 @use "../fonts";
 
 small,
@@ -8,30 +6,7 @@ code {
 	@extend %db-overwrite-font-size-sm;
 }
 
-@each $headline, $size in fonts.$headlines {
-	#{string.unquote($headline)} {
-		/* stylelint-disable custom-property-pattern */
-		font: var(--db-type-headline-#{string.unquote($size)});
-		margin-block: var(--db-spacing-fixed-#{string.unquote($size)});
-
-		&::before,
-		&::after {
-			--db-icon-font-size: var(
-				--db-base-headline-icon-font-size-#{string.unquote($size)}
-			);
-			--db-icon-font-weight: var(
-				--db-base-headline-icon-weight-#{string.unquote($size)}
-			);
-		}
-		/* stylelint-enable custom-property-pattern */
-	}
-}
-
 :is(h1, h2, h3, h4, h5, h6) {
-	font-family: var(--db-font-family-head);
-	font-weight: bolder;
-	text-wrap: balance;
-
 	&[data-variant="light"] {
 		font-weight: 300;
 	}
@@ -41,10 +16,6 @@ code {
 	}
 }
 
-p {
-	margin-block: variables.$db-spacing-fixed-md;
-}
-
 [data-font="digital"] {
 	font-weight: 300;
 }

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

@@ -2590,4 +2590,28 @@
   );--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),:where(textarea){margin:0}:where(button),:where(select){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(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,details>*,details>:after,details>: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%}fieldset,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] :is(ol,ul),nav ol,nav ul{list-style-type:"";margin:0;padding:0}
+  )}:where(html){line-height:1.15;-webkit-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block: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),:where(textarea){margin:0}:where(button),:where(select){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(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}[data-text-spacing=true]{--db-text-spacing:0.5}[data-text-spacing=false]{--db-text-spacing:0}:where(h1,h2,h3,h4,h5,h6,p){margin-block:calc(1lh * var(--db-text-spacing,0))}:where(h1){font:var(--db-type-headline-xl)}:where(h1):after,:where(h1):before{--db-icon-font-size:var(
+  	--db-base-headline-icon-font-size-xl
+  );--db-icon-font-weight:var(
+  	--db-base-headline-icon-weight-xl
+  )}:where(h2){font:var(--db-type-headline-lg)}:where(h2):after,:where(h2):before{--db-icon-font-size:var(
+  	--db-base-headline-icon-font-size-lg
+  );--db-icon-font-weight:var(
+  	--db-base-headline-icon-weight-lg
+  )}:where(h3){font:var(--db-type-headline-md)}:where(h3):after,:where(h3):before{--db-icon-font-size:var(
+  	--db-base-headline-icon-font-size-md
+  );--db-icon-font-weight:var(
+  	--db-base-headline-icon-weight-md
+  )}:where(h4){font:var(--db-type-headline-sm)}:where(h4):after,:where(h4):before{--db-icon-font-size:var(
+  	--db-base-headline-icon-font-size-sm
+  );--db-icon-font-weight:var(
+  	--db-base-headline-icon-weight-sm
+  )}:where(h5){font:var(--db-type-headline-xs)}:where(h5):after,:where(h5):before{--db-icon-font-size:var(
+  	--db-base-headline-icon-font-size-xs
+  );--db-icon-font-weight:var(
+  	--db-base-headline-icon-weight-xs
+  )}:where(h6){font:var(--db-type-headline-2xs)}:where(h6):after,:where(h6):before{--db-icon-font-size:var(
+  	--db-base-headline-icon-font-size-2xs
+  );--db-icon-font-weight:var(
+  	--db-base-headline-icon-weight-2xs
+  )}body{font-family:var(--db-font-family-sans)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--db-font-family-head);font-weight:bolder;text-wrap:balance}html{-webkit-tap-highlight-color:var(--db-informational-bg-basic-transparent-semi-default)}*,:after,:before,details>*,details>:after,details>: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%}fieldset,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] :is(ol,ul),nav ol,nav ul{list-style-type:"";margin:0;padding:0}

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

@@ -1,5 +1,5 @@
 /* Required styles to normalize default css */
-
+@use "sass:string";
 @use "../variables";
 @use "../colors";
 @use "../helpers";
@@ -50,10 +50,57 @@ body {
 	padding: 0;
 }
 
+$block-text-elements: "h1, h2, h3, h4, h5, h6, p";
+
+/* Block-level text carries no `margin-block` by default. The opt-in is driven
+ * through the inheriting `--db-text-spacing` custom property rather than
+ * descendant selectors, so the nearest `data-text-spacing` ancestor - or the
+ * element itself - wins by proximity instead of by source order. That makes
+ * `true` win when it is the closer ancestor and `false` opt a subtree back out,
+ * and it covers the attribute sitting on the block-text element itself. The
+ * property only carries the half-line-height multiplier; `1lh` is resolved on
+ * the text element in `margin-block`, so the spacing stays derived from each
+ * element's own line height rather than the ancestor's. */
+[data-text-spacing="true"] {
+	--db-text-spacing: 0.5;
+}
+
+[data-text-spacing="false"] {
+	--db-text-spacing: 0;
+}
+
+:where(#{$block-text-elements}) {
+	margin-block: calc(1lh * var(--db-text-spacing, 0));
+}
+
+@each $headline, $size in fonts.$headlines {
+	:where(#{string.unquote($headline)}) {
+		/* stylelint-disable custom-property-pattern */
+		font: var(--db-type-headline-#{string.unquote($size)});
+
+		&::before,
+		&::after {
+			--db-icon-font-size: var(
+				--db-base-headline-icon-font-size-#{string.unquote($size)}
+			);
+			--db-icon-font-weight: var(
+				--db-base-headline-icon-weight-#{string.unquote($size)}
+			);
+		}
+		/* stylelint-enable custom-property-pattern */
+	}
+}
+
 body {
 	font-family: var(--db-font-family-sans);
 }
 
+:where(h1, h2, h3, h4, h5, h6) {
+	font-family: var(--db-font-family-head);
+	font-weight: bolder;
+	text-wrap: balance;
+}
+
 html {
 	-webkit-tap-highlight-color: #{colors.$db-informational-bg-basic-transparent-semi-default};
 }

package/build/styles/helpers/_a11y.scss

@@ -1,5 +1,5 @@
 // stylelint-disable property-no-deprecated, db-ux/use-sizing
-%a11y-visually-hidden {
+@mixin a11y-visually-hidden {
 	position: absolute !important;
 	inset-block-start: 0 !important;
 	inline-size: 1px !important;
@@ -12,6 +12,10 @@
 	pointer-events: none !important;
 }
 
+%a11y-visually-hidden {
+	@include a11y-visually-hidden;
+}
+
 // Hides text while keeping the element visible (e.g. for background images).
 // RTL-safe alternative to text-indent: -9999px.
 @mixin a11y-visually-hidden-text {

package/build/styles/helpers/_focus.scss

@@ -1,6 +1,11 @@
 @use "../variables";
 @use "../colors";
 
+// Room the focus ring needs outside the border box, for scroll containers to reserve.
+$db-focus-outline-reach: calc(
+	#{variables.$db-border-width-xs} + #{variables.$db-border-width-2xs}
+);
+
 @mixin get-focus-placeholder {
 	outline: #{variables.$db-border-width-2xs} solid
 		var(
@@ -21,3 +26,25 @@
 		}
 	}
 }
+
+// Reserves ring space inside a clipping container, margin compensating it.
+// This owns the `padding` and `margin` of the element it sits on. CSS cannot
+// read an existing value, so there is nothing to add to: the shorthands either
+// replace all four sides of a container's own spacing, or lose against a more
+// specific selector and silently reserve nothing. The padding and the
+// `content-box` are also what keeps the reserve layout-neutral, and that only
+// works out while the padding is ours alone. So this belongs on a container
+// without spacing or a fixed size of its own; for anything else, move the clip
+// to a wrapper and put this on the wrapper, keeping the spacing inside.
+@mixin get-focus-container {
+	// `border-box` would absorb the padding, leaving the margin to displace.
+	box-sizing: content-box;
+	// stylelint-disable-next-line db-ux/use-spacings
+	padding: $db-focus-outline-reach;
+	// stylelint-disable-next-line db-ux/use-spacings
+	margin: calc(-1 * #{$db-focus-outline-reach});
+}
+
+%focus-container-placeholder {
+	@include get-focus-container;
+}

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

@@ -12,6 +12,13 @@
   border-radius: var(--db-border-radius-xs);
 }
 
+.db-focus-container,
+[data-focus-container=true] {
+  box-sizing: content-box;
+  padding: calc(var(--db-border-width-xs) + var(--db-border-width-2xs));
+  margin: calc(-1 * calc(var(--db-border-width-xs) + var(--db-border-width-2xs)));
+}
+
 .db-divider-top-before,
 [data-divider=top-before] {
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);

package/build/styles/helpers/classes/focus.css

@@ -11,3 +11,10 @@
 [data-focus=default]:not([data-disable-focus=true]):not([type=radio], [role=switch]) {
   border-radius: var(--db-border-radius-xs);
 }
+
+.db-focus-container,
+[data-focus-container=true] {
+  box-sizing: content-box;
+  padding: calc(var(--db-border-width-xs) + var(--db-border-width-2xs));
+  margin: calc(-1 * calc(var(--db-border-width-xs) + var(--db-border-width-2xs)));
+}

package/build/styles/helpers/classes/focus.scss

@@ -4,3 +4,8 @@
 [data-focus="default"] {
 	@extend %focus-placeholder;
 }
+
+.db-focus-container,
+[data-focus-container="true"] {
+	@extend %focus-container-placeholder;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/core-foundations",
-  "version": "5.7.1",
+  "version": "6.0.1",
   "type": "module",
   "description": "Provides basic tokens and assets based on DB UX Design System – Generation 3",
   "repository": {
@@ -20,18 +20,18 @@
   "devDependencies": {
     "@csstools/normalize.css": "12.1.1",
     "@db-ux/icon-font-tools": "0.3.6",
-    "@playwright/test": "1.63.0",
+    "@playwright/test": "1.64.1",
     "cpy-cli": "7.0.0",
-    "cssnano": "9.3.2",
+    "cssnano": "9.9.0",
     "glob": "13.0.6",
     "nodemon": "3.1.14",
-    "postcss": "8.5.29",
+    "postcss": "8.5.30",
     "postcss-cli": "12.0.0",
-    "prettier": "3.9.9",
-    "sass": "1.105.1",
+    "prettier": "3.9.10",
+    "sass": "1.105.2",
     "tsx": "4.23.15",
     "typescript": "5.9.3",
-    "vite": "8.3.3"
+    "vite": "8.3.4"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",