@db-ux/core-foundations 4.4.2 → 4.5.0

package/CHANGELOG.md

@@ -1,9 +1,17 @@
 # @db-ux/core-foundations
 
-## 4.4.2
+## 4.5.0
+
+_version bump_
+
+
+## 4.4.3
 
 _version bump_
 
+## 4.4.2
+
+_version bump_
 
 ## 4.4.1
 

package/build/styles/_screen-sizes.scss

@@ -81,10 +81,8 @@ $db-breakpoint-xl: helpers.px-to-em($db-screen-size-xl);
 	}
 }
 
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
+// @mixin screen-min-max
+// @param $data an object like (min:"sm", max:"lg") or (min: "sm")
 @mixin screen-min-max($data) {
 	$min: "";
 	$max: "";

package/build/styles/_variables.scss

@@ -1,4 +1,4 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
+// Use sizing values for fixed heights/widths e.g. the db-button has always a fixed height
 $db-sizing-3xs: var(--db-sizing-3xs);
 $db-sizing-2xs: var(--db-sizing-2xs);
 $db-sizing-xs: var(--db-sizing-xs);
@@ -9,7 +9,7 @@ $db-sizing-xl: var(--db-sizing-xl);
 $db-sizing-2xl: var(--db-sizing-2xl);
 $db-sizing-3xl: var(--db-sizing-3xl);
 
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
+// Use fixed spacings for all kinds of distances (margin, padding, ...)
 $db-spacing-fixed-3xs: var(--db-spacing-fixed-3xs);
 $db-spacing-fixed-2xs: var(--db-spacing-fixed-2xs);
 $db-spacing-fixed-xs: var(--db-spacing-fixed-xs);
@@ -20,8 +20,8 @@ $db-spacing-fixed-xl: var(--db-spacing-fixed-xl);
 $db-spacing-fixed-2xl: var(--db-spacing-fixed-2xl);
 $db-spacing-fixed-3xl: var(--db-spacing-fixed-3xl);
 
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
+// The primary use-case for responsive spacings are
+// paddings/gaps in an application e.g. the <main> should have a responsive padding.
 $db-spacing-responsive-3xs: var(--db-spacing-responsive-3xs);
 $db-spacing-responsive-2xs: var(--db-spacing-responsive-2xs);
 $db-spacing-responsive-xs: var(--db-spacing-responsive-xs);
@@ -32,13 +32,13 @@ $db-spacing-responsive-xl: var(--db-spacing-responsive-xl);
 $db-spacing-responsive-2xl: var(--db-spacing-responsive-2xl);
 $db-spacing-responsive-3xl: var(--db-spacing-responsive-3xl);
 
-/* Elevation */
+// Elevation
 
 $db-elevation-sm: var(--db-elevation-sm);
 $db-elevation-md: var(--db-elevation-md);
 $db-elevation-lg: var(--db-elevation-lg);
 
-/* Border */
+// Border
 
 $db-border-width-3xs: var(--db-border-width-3xs);
 $db-border-width-2xs: var(--db-border-width-2xs);
@@ -60,7 +60,7 @@ $db-border-radius-2xl: var(--db-border-radius-2xl);
 $db-border-radius-3xl: var(--db-border-radius-3xl);
 $db-border-radius-full: var(--db-border-radius-full);
 
-/* Opacity */
+// Opacity
 
 $db-opacity-3xs: var(--db-opacity-3xs);
 $db-opacity-2xs: var(--db-opacity-2xs);
@@ -73,7 +73,7 @@ $db-opacity-2xl: var(--db-opacity-2xl);
 $db-opacity-3xl: var(--db-opacity-3xl);
 $db-opacity-full: var(--db-opacity-full);
 
-/* Transitions */
+// Transitions
 
 $db-transition-duration-extra-slow: var(--db-transition-duration-extra-slow);
 $db-transition-duration-slow: var(--db-transition-duration-slow);
@@ -89,7 +89,7 @@ $db-transition-straight-functional: var(--db-transition-straight-functional);
 $db-transition-straight-show: var(--db-transition-straight-show);
 $db-transition-straight-hide: var(--db-transition-straight-hide);
 
-/* Screen sizes */
+// Screen sizes
 
 $db-screen-xs: var(--db-screen-xs);
 $db-screen-sm: var(--db-screen-sm);
@@ -97,7 +97,7 @@ $db-screen-md: var(--db-screen-md);
 $db-screen-lg: var(--db-screen-lg);
 $db-screen-xl: var(--db-screen-xl);
 
-/* Container sizes */
+// Container sizes
 
 $db-container-3xs: var(--db-container-3xs);
 $db-container-2xs: var(--db-container-2xs);

package/build/styles/absolute.css

@@ -41,16 +41,6 @@
   font-weight: 900;
   src: url("/assets/fonts/OpenSans-ExtraBold-EU.woff2") format("woff2");
 }
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 blockquote:not([class]), [data-mode], :root,
 :host {
@@ -310,6 +300,7 @@ select,
   text-transform: none;
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
+  /* stylelint-disable-next-line db-ux/use-sizing */
   block-size: var(--db-icon-font-size, 1.5rem);
   aspect-ratio: 1;
   flex-shrink: 0;
@@ -6023,12 +6014,6 @@ html::after {
   inherits: true;
 }
 /* Use this file if you want the default color and density in your project */
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -6112,12 +6097,6 @@ code {
 
 @layer variables {}
 
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 @layer variables {}
 
 :root,
@@ -6443,34 +6422,94 @@ code {
     transition: box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional);
   }
 }
-.db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]),
-[data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]) {
+.db-interactive-elevation:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)),
+[data-interactive=elevation]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   box-shadow: var(--db-elevation-lg);
 }
-.db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input),
-[data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(textarea),
-[data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-interactive-elevation:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-interactive-elevation:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input),
+[data-interactive=elevation]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea),
+[data-interactive=elevation]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
-[data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
-[data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-interactive-elevation:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-interactive-elevation:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)),
+[data-interactive=elevation]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]),
+[data-interactive=elevation]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-interactive-elevation:active:not(:disabled, [aria-disabled=true]),
-[data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]) {
+.db-interactive-elevation:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)),
+[data-interactive=elevation]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   box-shadow: var(--db-elevation-sm);
 }
-.db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input),
-[data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(textarea),
-[data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-interactive-elevation:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-interactive-elevation:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input),
+[data-interactive=elevation]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea),
+[data-interactive=elevation]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
-[data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
-[data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-interactive-elevation:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-interactive-elevation:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)),
+[data-interactive=elevation]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]),
+[data-interactive=elevation]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 
@@ -6619,24 +6658,54 @@ a:has(code:not([class]):only-child) {
   color: var(--db-adaptive-on-bg-inverted-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]) {
+a:has(code:not([class]):only-child):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   color: var(--db-adaptive-on-bg-inverted-hovered);
 }
-a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input) {
+a:has(code:not([class]):only-child):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), a:has(code:not([class]):only-child):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+a:has(code:not([class]):only-child):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), a:has(code:not([class]):only-child):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]) {
+a:has(code:not([class]):only-child):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   color: var(--db-adaptive-on-bg-inverted-pressed);
 }
-a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input) {
+a:has(code:not([class]):only-child):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), a:has(code:not([class]):only-child):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+a:has(code:not([class]):only-child):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), a:has(code:not([class]):only-child):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 a:has(code:not([class]):only-child) > code {
@@ -10475,7 +10544,6 @@ head:has([name=color-scheme][content=dark]) + body {
   --db-color-scheme: dark;
 }
 
-/* TODO: Switch to attr() as soon as this one is fully supported */
 [data-mode=light] {
   color-scheme: light;
 }

package/build/styles/colors/_variables.additional-palette.scss

@@ -1,6 +1,6 @@
-/* Palette for additional colors */
+// Palette for additional colors
 
-/* Note: In general you don't need this file. Use this only if you really know what you do! */
+// Note: In general you don't need this file. Use this only if you really know what you do!
 
 // yellow
 $db-yellow-0: var(--db-yellow-0);

package/build/styles/colors/_variables.palette.scss

@@ -1,6 +1,6 @@
-/* Palette colors */
+// Palette colors
 
-/* Note: In general you don't need this file. Use this only if you really know what you do! */
+// Note: In general you don't need this file. Use this only if you really know what you do!
 
 // brand
 $db-brand-0: var(--db-brand-0);

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

@@ -94,4 +94,4 @@
     	--db-neutral-on-bg-vibrant-hovered
     );--db-adaptive-on-bg-vibrant-pressed:var(
     	--db-neutral-on-bg-vibrant-pressed
-    )}}blockquote:not([class]){background-color:var(--db-neutral-bg-basic-transparent-semi-default);color:var(--db-neutral-on-bg-basic-emphasis-100-default)}blockquote:not([class]):after,blockquote:not([class]):before{--db-icon-color:var(--db-neutral-on-bg-basic-emphasis-100-default)}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}pre:not([class]):has(code){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default);padding:var(--db-spacing-fixed-xs)}pre:not([class]):has(code),pre:not([class]):has(code) code,pre:not([class]):has(code) span{font-family:monospace}a:has(code:not([class]):only-child){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default)}a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true]){color:var(--db-adaptive-on-bg-inverted-hovered);cursor:var(--db-overwrite-cursor,pointer)}a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true]):is(input),a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true]):is(textarea){cursor:auto}a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)){cursor:pointer}a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true]){color:var(--db-adaptive-on-bg-inverted-pressed);cursor:var(--db-overwrite-cursor,pointer)}a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true]):is(input),a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true]):is(textarea){cursor:auto}a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)){cursor:pointer}a:has(code:not([class]):only-child)>code{color:inherit}code:not([class]){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default);padding-block:var(--db-spacing-fixed-3xs);padding-inline:var(--db-spacing-fixed-2xs)}code:not([class]),code:not([class]) span{font-family:monospace}blockquote:not([class]){margin:0;padding:var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md)}
+    )}}blockquote:not([class]){background-color:var(--db-neutral-bg-basic-transparent-semi-default);color:var(--db-neutral-on-bg-basic-emphasis-100-default)}blockquote:not([class]):after,blockquote:not([class]):before{--db-icon-color:var(--db-neutral-on-bg-basic-emphasis-100-default)}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}pre:not([class]):has(code){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default);padding:var(--db-spacing-fixed-xs)}pre:not([class]):has(code),pre:not([class]):has(code) code,pre:not([class]):has(code) span{font-family:monospace}a:has(code:not([class]):only-child){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default)}a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)){color:var(--db-adaptive-on-bg-inverted-hovered);cursor:var(--db-overwrite-cursor,pointer)}a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea){cursor:auto}a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)){cursor:pointer}a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)){color:var(--db-adaptive-on-bg-inverted-pressed);cursor:var(--db-overwrite-cursor,pointer)}a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea){cursor:auto}a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)){cursor:pointer}a:has(code:not([class]):only-child)>code{color:inherit}code:not([class]){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default);padding-block:var(--db-spacing-fixed-3xs);padding-inline:var(--db-spacing-fixed-2xs)}code:not([class]),code:not([class]) span{font-family:monospace}blockquote:not([class]){margin:0;padding:var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md)}

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

@@ -1 +1 @@
-@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}.db-interactive-elevation,[data-interactive=elevation]{box-shadow:var(--db-elevation-md);cursor:pointer}@media screen and (prefers-reduced-motion:no-preference){.db-interactive-elevation,[data-interactive=elevation]{transition:box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional)}}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true]),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true]){box-shadow:var(--db-elevation-lg);cursor:var(--db-overwrite-cursor,pointer)}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true]):is(input),.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true]):is(textarea),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true]):is(input),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true]):is(textarea){cursor:auto}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)){cursor:pointer}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true]),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true]){box-shadow:var(--db-elevation-sm);cursor:var(--db-overwrite-cursor,pointer)}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true]):is(input),.db-interactive-elevation:active:not(:disabled,[aria-disabled=true]):is(textarea),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true]):is(input),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true]):is(textarea){cursor:auto}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),.db-interactive-elevation:active:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)){cursor:pointer}
+@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}.db-interactive-elevation,[data-interactive=elevation]{box-shadow:var(--db-elevation-md);cursor:pointer}@media screen and (prefers-reduced-motion:no-preference){.db-interactive-elevation,[data-interactive=elevation]{transition:box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional)}}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)){box-shadow:var(--db-elevation-lg);cursor:var(--db-overwrite-cursor,pointer)}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea){cursor:auto}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)){cursor:pointer}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)){box-shadow:var(--db-elevation-sm);cursor:var(--db-overwrite-cursor,pointer)}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea){cursor:auto}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)){cursor:pointer}

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

@@ -53,7 +53,7 @@ head {
 	}
 }
 
-/* TODO: Switch to attr() as soon as this one is fully supported */
+// TODO: Switch to attr() as soon as this one is fully supported
 [data-mode="light"] {
 	color-scheme: light;
 }

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

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -126,12 +110,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 .db-density-expressive,
 [data-density=expressive] {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */

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

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -120,12 +104,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 .db-density-expressive,
 [data-density=expressive] {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */

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

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -120,12 +104,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 @layer variables {}
 
 @layer variables {}

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

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -120,12 +104,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 @layer variables {}
 
 .db-density-regular,

package/build/styles/fonts/_font-sizes.scss

@@ -32,12 +32,10 @@
 
 $font-sizes: "3xl", "2xl", "xl", "lg", "md", "sm", "xs", "2xs", "3xs";
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
+// Generates 3 types of placeholders, e.g.:
+// - %db-component-variables-md
+// - %db-font-size-md
+// - %db-overwrite-font-size-md
 @mixin generate-font-sizes() {
 	@each $font-size in $font-sizes {
 		%db-component-variables-#{$font-size} {

package/build/styles/fonts/_variables.scss

@@ -1,4 +1,4 @@
-/* Use for body tags like <p> */
+// Use for body tags like <p>
 
 $db-type-body-3xs: var(--db-type-body-3xs);
 $db-type-body-2xs: var(--db-type-body-2xs);
@@ -10,7 +10,7 @@ $db-type-body-xl: var(--db-type-body-xl);
 $db-type-body-2xl: var(--db-type-body-2xl);
 $db-type-body-3xl: var(--db-type-body-3xl);
 
-/* Use for headline tags like <h1> */
+// Use for headline tags like <h1>
 
 $db-type-headline-3xs: var(--db-type-headline-3xs);
 $db-type-headline-2xs: var(--db-type-headline-2xs);

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

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 .db-font-size-3xl,
@@ -318,6 +302,3 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     --db-icon-font-size: var(--db-base-headline-icon-font-size-3xs);
   }
 }
-
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */

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

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -114,6 +98,3 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 @layer variables {}
 
 @layer variables {}
-
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */