@db-ux/core-components 4.4.2 → 4.5.0

package/build/components/input/input.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 */
 .db-input[data-hide-label=true] > label, .db-visually-hidden,
 [data-visually-hidden=true] {
   clip: rect(0, 0, 0, 0) !important;
@@ -387,6 +377,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   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;
@@ -408,12 +399,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   }
 }
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -516,12 +501,6 @@ input[type=radio]:checked) > label {
 
 @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-input input, .db-input input::file-selector-button {
   border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
 }
@@ -866,14 +845,29 @@ input[type=radio]:checked) input:is([type=date],
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
   /* see https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing */
 }
-.db-input input:hover:not(:disabled, [aria-disabled=true]) {
+.db-input input:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
 }
-.db-input input:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-input input:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-input input:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-input input:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-input input:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-input input:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-input input:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-input input:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-input input[data-field-sizing=content] {

package/build/components/link/link.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 {}
@@ -123,8 +107,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> */
 .db-link {
   transition: outline var(--db-transition-duration-extra-fast), color var(--db-transition-straight-emotional);
 }
@@ -163,6 +145,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   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;
@@ -184,10 +167,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   }
 }
 
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 .db-link a:not([hidden]), .db-link:not([hidden]) {
   display: inline-block;
 }
@@ -199,24 +178,54 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-link:hover:not(:disabled, [aria-disabled=true]) {
+.db-link:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   color: color-mix(in srgb, transparent 25%, var(--db-adaptive-on-bg-basic-emphasis-100-default));
 }
-.db-link:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-link:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-link:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-link:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-link:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-link:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-link:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-link:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-link:active:not(:disabled, [aria-disabled=true]) {
+.db-link:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   color: color-mix(in srgb, transparent 50%, var(--db-adaptive-on-bg-basic-emphasis-100-default));
 }
-.db-link:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-link:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-link:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-link:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-link:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-link:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-link:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-link:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 
@@ -268,24 +277,54 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   color: var(--db-brand-on-bg-basic-emphasis-80-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-link[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]) {
+.db-link[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   color: var(--db-brand-on-bg-basic-emphasis-80-hovered);
 }
-.db-link[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-link[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-link[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-link[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-link[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-link[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-link[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-link[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-link[data-variant=brand]:active:not(:disabled, [aria-disabled=true]) {
+.db-link[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   color: var(--db-brand-on-bg-basic-emphasis-80-pressed);
 }
-.db-link[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-link[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-link[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-link[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-link[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-link[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-link[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-link[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-link[data-size=small] {

package/build/components/navigation/navigation.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 */
 .db-visually-hidden,
 [data-visually-hidden=true] {
   clip: rect(0, 0, 0, 0) !important;
@@ -62,16 +52,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
-/**
-	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,8 +106,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> */
 .db-navigation > menu .db-navigation-item::after {
   content: "";
   position: absolute;

package/build/components/navigation-item/navigation-item.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 {}
@@ -115,12 +99,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")
- */
 @keyframes popover-animation {
   0% {
     opacity: 0;
@@ -156,6 +134,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   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;
@@ -229,34 +208,124 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-navigation-item .db-navigation-item-expand-button > button:not([hidden]), .db-navigation-item a:not([hidden]) {
   display: inline-flex;
 }
-.db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled, [aria-disabled=true]):is(button),
-.db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled, [aria-disabled=true]), .db-navigation-item a:hover:not(:disabled, [aria-disabled=true]) {
+.db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(button),
+.db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-navigation-item a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
-.db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled, [aria-disabled=true]):is(textarea):is(button),
-.db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-navigation-item a:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled, [aria-disabled=true]):is(input):is(button),
-.db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled, [aria-disabled=true]):is(input), .db-navigation-item a:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea):is(button),
+.db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-navigation-item a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input):is(button),
+.db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-navigation-item a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):is(button),
-.db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-navigation-item a:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):is(button),
-.db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-navigation-item a:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]):is(button),
+.db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-navigation-item a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)):is(button),
+.db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-navigation-item a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-navigation-item .db-navigation-item-expand-button:active:not(:disabled, [aria-disabled=true]):is(button),
-.db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled, [aria-disabled=true]), .db-navigation-item a:active:not(:disabled, [aria-disabled=true]) {
+.db-navigation-item .db-navigation-item-expand-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(button),
+.db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-navigation-item a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
-.db-navigation-item .db-navigation-item-expand-button:active:not(:disabled, [aria-disabled=true]):is(textarea):is(button),
-.db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-navigation-item a:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-navigation-item .db-navigation-item-expand-button:active:not(:disabled, [aria-disabled=true]):is(input):is(button),
-.db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled, [aria-disabled=true]):is(input), .db-navigation-item a:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-navigation-item .db-navigation-item-expand-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea):is(button),
+.db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-navigation-item a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-navigation-item .db-navigation-item-expand-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input):is(button),
+.db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-navigation-item a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-navigation-item .db-navigation-item-expand-button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):is(button),
-.db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-navigation-item a:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-navigation-item .db-navigation-item-expand-button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):is(button),
-.db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-navigation-item a:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-navigation-item .db-navigation-item-expand-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]):is(button),
+.db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-navigation-item a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-navigation-item .db-navigation-item-expand-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)):is(button),
+.db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-navigation-item a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-navigation-item .db-navigation-item-expand-button:has(~ .db-sub-navigation:is(:hover, :focus)):is(button),
@@ -270,16 +339,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inline-size: auto;
   /* stylelint-disable-next-line media-query-no-invalid */
 }
-.db-navigation-item[data-icon]:not([data-show-icon=false])::before {
+.db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false])::before, .db-navigation-item[data-icon]:not([data-show-icon=false])::before {
   position: absolute;
   inset-block-start: calc(50% - 0.5em);
   inset-inline-start: var(--db-spacing-fixed-sm);
   pointer-events: none;
   z-index: 1;
 }
-.db-navigation-item[data-icon]:not([data-show-icon=false]) a,
-.db-navigation-item[data-icon]:not([data-show-icon=false]) button,
-.db-navigation-item[data-icon]:not([data-show-icon=false]) label {
+.db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) label, .db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) button, .db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) a, .db-navigation-item[data-icon]:not([data-show-icon=false]) label, .db-navigation-item[data-icon]:not([data-show-icon=false]) button, .db-navigation-item[data-icon]:not([data-show-icon=false]) a {
   --db-padding-inline-start: calc(
   	var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) +
   		var(--db-icon-font-size)
@@ -431,7 +498,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     box-shadow: var(--db-elevation-md);
     padding: var(--db-spacing-fixed-sm);
     position: absolute;
-    min-inline-size: 328px;
+    min-inline-size: var(--db-container-xs);
     inset-block-start: calc(100% + var(--db-spacing-fixed-md));
     transition: visibility 1ms linear;
   }
@@ -478,6 +545,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     inset-block-start: 0;
     inset-inline-start: 0;
     block-size: 100%;
+    /* stylelint-disable-next-line db-ux/use-sizing */
     inline-size: var(--db-navigation-item-inline-size, 100%);
     background: transparent;
     transform: translateX(-100%);

package/build/components/navigation-item/navigation-item.scss

@@ -218,7 +218,7 @@
 		box-shadow: variables.$db-elevation-md;
 		padding: variables.$db-spacing-fixed-sm;
 		position: absolute;
-		min-inline-size: 328px; // We should get this value from UX
+		min-inline-size: variables.$db-container-xs;
 		inset-block-start: calc(100% + #{variables.$db-spacing-fixed-md});
 		transition: visibility 1ms linear; // workaround to enable focus with keyboard
 
@@ -290,6 +290,7 @@
 				inset-block-start: 0;
 				inset-inline-start: 0;
 				block-size: 100%;
+				/* stylelint-disable-next-line db-ux/use-sizing */
 				inline-size: var(--db-navigation-item-inline-size, 100%);
 				background: transparent;
 				transform: translateX(-100%);

package/build/components/notification/notification.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, ... */
 .db-notification[data-semantic=neutral] {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
@@ -808,12 +798,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 {}
@@ -888,12 +872,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 {}
@@ -931,6 +909,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   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;
@@ -991,24 +970,54 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-notification a:hover:not(:disabled, [aria-disabled=true]) {
+.db-notification a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   color: color-mix(in srgb, transparent 25%, var(--db-adaptive-on-bg-basic-emphasis-100-default));
 }
-.db-notification a:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-notification a:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-notification a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-notification a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-notification a:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-notification a:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-notification a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-notification a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-notification a:active:not(:disabled, [aria-disabled=true]) {
+.db-notification a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   color: color-mix(in srgb, transparent 50%, var(--db-adaptive-on-bg-basic-emphasis-100-default));
 }
-.db-notification a:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-notification a:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-notification a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-notification a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-notification a:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-notification a:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-notification a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-notification a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 

package/build/components/page/page.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 {}