@db-ux/core-foundations 4.4.2 → 4.5.0

package/build/styles/helpers/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 {}
 

package/build/styles/helpers/classes/divider.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 {}
 

package/build/styles/helpers/classes/focus.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 {}
 

package/build/styles/icons/_icon-helpers.scss

@@ -160,6 +160,7 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
 	text-transform: none;
 	overflow: clip;
 	vertical-align: var(--db-icon-vertical-align, middle);
+	/* stylelint-disable-next-line db-ux/use-sizing */
 	block-size: $default-icon-font-size;
 	aspect-ratio: 1;
 	flex-shrink: 0;

package/build/styles/index.css

@@ -207,16 +207,6 @@ blockquote:not([class])::before, blockquote:not([class])::after {
 
 @layer variables {}
 
-/* 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 */
 /* Use this file if you want the default color and density in your project */
 :not([data-disable-focus=true]):is(a,
 button,
@@ -251,12 +241,6 @@ select,
 }
 
 /* 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 {}
@@ -340,12 +324,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,
@@ -671,34 +649,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;
 }
 
@@ -847,24 +885,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 {
@@ -907,6 +975,7 @@ blockquote:not([class]) {
   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;
@@ -4747,7 +4816,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/relative.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;
 }