@db-ux/core-components 4.4.3 → 4.5.1

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

@@ -101,10 +101,12 @@
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     opacity: 0;
     transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
   }
   100% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }
@@ -134,6 +136,7 @@
   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;
@@ -207,34 +210,124 @@
 .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),
@@ -248,16 +341,14 @@
   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)
@@ -409,7 +500,7 @@
     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;
   }
@@ -456,6 +547,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/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

@@ -909,6 +909,7 @@
   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;
@@ -945,10 +946,12 @@
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     opacity: 0;
     transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
   }
   100% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }
@@ -969,24 +972,54 @@
   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/popover/popover.css

@@ -35,10 +35,12 @@
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     opacity: 0;
     transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
   }
   100% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }

package/build/components/select/select.css

@@ -377,6 +377,7 @@
   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;
@@ -860,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/switch/switch.css

@@ -156,6 +156,7 @@
   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;

package/build/components/tab-item/tab-item.css

@@ -146,34 +146,76 @@
 .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

@@ -58,10 +58,12 @@
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     opacity: 0;
     transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
   }
   100% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }

package/build/components/tabs/tabs.css

@@ -335,7 +335,9 @@
   - 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 */