@db-ux/core-components 4.4.2 → 4.5.0

package/build/components/popover/popover.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 {}
 
@@ -58,10 +48,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 .db-popover > article {
   border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
 }
@@ -74,10 +60,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-popover > article:not([data-placement], [data-corrected-placement]), .db-popover > article[data-placement=bottom]:not([data-corrected-placement]), .db-popover > article[data-placement=top]:not([data-corrected-placement]), .db-popover > article[data-corrected-placement=bottom], .db-popover > article[data-corrected-placement=top] {
   --db-popover-center-x: -50%;
   inset-inline-start: 50%;
+  transform: translateX(var(--db-popover-center-x, 0));
 }
 .db-popover > article[data-corrected-placement=left], .db-popover > article[data-corrected-placement=right], .db-popover > article[data-placement=left]:not([data-corrected-placement]), .db-popover > article[data-placement=right]:not([data-corrected-placement]) {
   --db-popover-center-y: -50%;
   inset-block-start: 50%;
+  transform: translateY(var(--db-popover-center-y, 0));
 }
 
 .db-popover > article {
@@ -174,6 +162,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (prefers-reduced-motion: reduce) {
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-corrected-placement]):not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-corrected-placement]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-corrected-placement]):not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-corrected-placement]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=bottom]:not([data-open=false]), .db-popover > article[data-corrected-placement^=bottom][data-open=true] {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+  }
+}
 @media screen and (prefers-reduced-motion: no-preference) {
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=bottom][data-animation=true]:not([data-open=false]), .db-popover > article[data-corrected-placement^=bottom][data-animation=true][data-open=true] {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
@@ -199,6 +193,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (prefers-reduced-motion: reduce) {
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-corrected-placement]):not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-corrected-placement]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=top]:not([data-open=false]), .db-popover > article[data-corrected-placement^=top][data-open=true] {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+  }
+}
 @media screen and (prefers-reduced-motion: no-preference) {
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=top][data-animation=true]:not([data-open=false]), .db-popover > article[data-corrected-placement^=top][data-animation=true][data-open=true] {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
@@ -224,6 +224,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (prefers-reduced-motion: reduce) {
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-corrected-placement]):not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-corrected-placement]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=right]:not([data-open=false]), .db-popover > article[data-corrected-placement^=right][data-open=true] {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+  }
+}
 @media screen and (prefers-reduced-motion: no-preference) {
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=right][data-animation=true]:not([data-open=false]), .db-popover > article[data-corrected-placement^=right][data-animation=true][data-open=true] {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
@@ -249,6 +255,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (prefers-reduced-motion: reduce) {
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-corrected-placement]):not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-corrected-placement]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=left]:not([data-open=false]), .db-popover > article[data-corrected-placement^=left][data-open=true] {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+  }
+}
 @media screen and (prefers-reduced-motion: no-preference) {
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=left][data-animation=true]:not([data-open=false]), .db-popover > article[data-corrected-placement^=left][data-animation=true][data-open=true] {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;

package/build/components/radio/radio.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-visually-hidden,
 [data-visually-hidden=true] {
@@ -62,12 +52,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 {}
@@ -142,12 +126,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-radio {
   /* stylelint-disable-next-line at-rule-empty-line-before */
   /* stylelint-disable-next-line at-rule-empty-line-before */

package/build/components/section/section.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,10 +33,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")
- */
 .db-section {
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }

package/build/components/select/select.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-select[data-hide-label=true] > label, .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -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-select select {
   border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
 }
@@ -882,14 +861,29 @@ input[type=radio]:checked) select:is([type=date],
   padding-inline: var(--db-form-component-padding-inline-start, var(--db-spacing-fixed-sm)) var(--db-form-component-padding-inline-end, var(--db-spacing-fixed-sm));
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-select select:hover:not(:disabled, [aria-disabled=true]) {
+.db-select select: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-select select:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-select select:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-select select:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-select select:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-select select:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-select select:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-select select:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-select select:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-select > label {

package/build/components/stack/stack-web-component.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/components/stack/stack.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/components/switch/switch.css

@@ -1,14 +1,4 @@
 @charset "UTF-8";
-/* 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-visually-hidden,
 [data-visually-hidden=true] {
@@ -63,12 +53,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 {}
@@ -153,8 +137,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-switch input:not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;
@@ -174,6 +156,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;
@@ -195,10 +178,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-switch > db-infotext > .db-infotext,
 .db-switch > .db-infotext {
   margin-block-start: var(--db-spacing-fixed-2xs);

package/build/components/tab-item/tab-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, ... */
 .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -76,16 +66,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-radius: var(--db-border-radius-xs);
 }
 
-/**
- * @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 {}
@@ -140,8 +120,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-tab-item {
   position: relative;
   list-style-type: "";
@@ -168,34 +146,76 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-tab-item label:not([hidden]) {
   display: inline-block;
 }
-.db-tab-item label:hover:not(:disabled, [aria-disabled=true]) {
+.db-tab-item label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
 }
-.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(:not(input:disabled)) {
+.db-tab-item label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):has(:not(input:disabled)) {
   background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
-.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(input:disabled) {
+.db-tab-item label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):has(input:disabled) {
   cursor: initial;
 }
-.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-tab-item label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-tab-item label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-tab-item label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-tab-item label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-tab-item label:hover:not(:disabled, [aria-disabled=true]) {
+.db-tab-item label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
 }
-.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(:not(input:disabled)) {
+.db-tab-item label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):has(:not(input:disabled)) {
   background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
-.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(input:disabled) {
+.db-tab-item label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):has(input:disabled) {
   cursor: initial;
 }
-.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-tab-item label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-tab-item label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-tab-item label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-tab-item label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-tab-item label:has(input:checked) {

package/build/components/tab-list/tab-list.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-visually-hidden,
 [data-visually-hidden=true] {
@@ -81,12 +71,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -151,12 +135,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-tab-list > ul {
   /* Buttons */
   /* Up */

package/build/components/tab-panel/tab-panel.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/components/tabs/tabs.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-visually-hidden,
 [data-visually-hidden=true] {
@@ -62,12 +52,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 {}
@@ -122,12 +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> */
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 .db-tabs .db-tab-item::after {
   content: "";
   position: absolute;
@@ -357,7 +335,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   - min-inline-size: tab-list is not displayed narrower than defined
   - max-inline-size: tab-list is not displayed wider than defined
    */
+  /* stylelint-disable-next-line db-ux/use-sizing */
   min-inline-size: var(--db-tab-list-vertical-width, var(--db-sizing-3xl));
+  /* stylelint-disable-next-line db-ux/use-sizing */
   max-inline-size: var(--db-tab-list-vertical-width, var(--db-sizing-3xl));
   /* horizontal space to the tab panels */
   padding-inline-end: var(--db-spacing-fixed-xs);

package/build/components/tabs/tabs.scss

@@ -191,7 +191,9 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 			- min-inline-size: tab-list is not displayed narrower than defined
 			- max-inline-size: tab-list is not displayed wider than defined
 			 */
+			/* stylelint-disable-next-line db-ux/use-sizing */
 			min-inline-size: $width;
+			/* stylelint-disable-next-line db-ux/use-sizing */
 			max-inline-size: $width;
 
 			/* horizontal space to the tab panels */