@db-ux/core-components 4.4.3 → 4.5.0

package/build/components/custom-button/custom-button.scss

@@ -0,0 +1,78 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/icons";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "../../styles/internal/button-components";
+@use "../../styles/internal/icon-passing";
+
+@mixin interactive-elements {
+	label,
+	button,
+	a {
+		@content;
+	}
+}
+
+$icon-padding-custom-button: calc(
+	#{variables.$db-spacing-fixed-sm} + #{icons.$default-icon-margin-end} +
+		var(--db-icon-font-size)
+);
+
+// generic styles can be found in _button-components.scss
+.db-custom-button {
+	position: relative;
+	max-inline-size: 100%;
+	inline-size: fit-content;
+
+	@include button-components.set-basic-button(
+		icon-passing.$interactive-button-selectors
+	);
+	@include icon-passing.icon-passing;
+	@include icon-passing.icon-passing-trailing;
+
+	&:has(:is(input, button):disabled, :is(input, button, a)[aria-disabled="true"]) {
+		opacity: variables.$db-opacity-md;
+	}
+
+	&[data-variant="brand"] {
+		label {
+			@extend %button-outlined-ghost-colors;
+		}
+
+		:is(a, button) {
+			@extend %button-brand-colors;
+		}
+	}
+
+	label:has(input:checked) {
+		color: colors.$db-adaptive-on-bg-inverted-default;
+		background-color: colors.$db-adaptive-bg-inverted-contrast-max-default;
+	}
+
+	label:has(input[type="checkbox"]:checked) {
+		@include helpers.hover {
+			background-color: colors.$db-adaptive-bg-inverted-contrast-max-hovered;
+		}
+
+		@include helpers.active {
+			background-color: colors.$db-adaptive-bg-inverted-contrast-max-pressed;
+		}
+	}
+
+	a[tabindex="-1"] {
+		cursor: default;
+		pointer-events: none;
+	}
+
+	&[data-width="full"] {
+		inline-size: 100%;
+	}
+
+	&:has(input):focus-within {
+		@extend %focus-placeholder;
+	}
+
+	input {
+		@extend %a11y-visually-hidden;
+	}
+}

package/build/components/custom-select/custom-select.css

@@ -530,6 +530,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;
@@ -1061,14 +1062,29 @@ input[type=radio]:checked) summary: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-custom-select summary:hover:not(:disabled, [aria-disabled=true]) {
+.db-custom-select summary: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-custom-select summary:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-custom-select summary:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-custom-select summary:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-select summary:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-custom-select summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-custom-select summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-custom-select summary:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-select summary:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-custom-select > label {

package/build/components/custom-select-dropdown/custom-select-dropdown.css

@@ -284,6 +284,7 @@
   /* stylelint-disable-next-line media-query-no-invalid */
 }
 .db-custom-select-dropdown:not([data-width]), .db-custom-select-dropdown[data-width=fixed] {
+  /* stylelint-disable-next-line db-ux/use-sizing */
   inline-size: var(--db-custom-select-dropdown-fixed-inline-size, var(--db-sizing-3xl));
 }
 .db-custom-select-dropdown[data-width=full] {

package/build/components/custom-select-dropdown/custom-select-dropdown.scss

@@ -17,6 +17,7 @@
 
 	&:not([data-width]),
 	&[data-width="fixed"] {
+		/* stylelint-disable-next-line db-ux/use-sizing */
 		inline-size: var(
 			--db-custom-select-dropdown-fixed-inline-size,
 			#{variables.$db-sizing-3xl}

package/build/components/custom-select-list-item/custom-select-list-item.css

@@ -167,24 +167,54 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
 .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)) {
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled, [aria-disabled=true]) {
+.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):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-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled, [aria-disabled=true]) {
+.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):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-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled, [aria-disabled=true]):is(textarea), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-custom-select-list-item span {

package/build/components/drawer/drawer.css

@@ -94,7 +94,9 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 }
 
 .db-drawer .db-drawer-container[data-direction=down]:not([data-width=full]), .db-drawer .db-drawer-container[data-direction=up]:not([data-width=full]) {
+  /* stylelint-disable-next-line db-ux/use-sizing */
   max-block-size: var(--db-drawer-max-height, calc(100% - var(--db-spacing-fixed-xl)));
+  /* stylelint-disable-next-line db-ux/use-sizing */
   min-block-size: var(--db-drawer-min-height, calc(100% - var(--db-spacing-fixed-xl)));
   max-inline-size: none;
 }
@@ -213,7 +215,9 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   box-shadow: var(--db-elevation-md);
 }
 .db-drawer .db-drawer-container:not([data-width=full]) {
+  /* stylelint-disable-next-line db-ux/use-sizing */
   max-inline-size: var(--db-drawer-max-width, calc(100% - var(--db-spacing-fixed-xl)));
+  /* stylelint-disable-next-line db-ux/use-sizing */
   min-inline-size: var(--db-drawer-min-width, calc(100% - var(--db-spacing-fixed-xl)));
 }
 .db-drawer .db-drawer-container:not([data-width=full]):not([data-direction]), .db-drawer .db-drawer-container:not([data-width=full])[data-direction=right] {

package/build/components/drawer/drawer.scss

@@ -32,10 +32,12 @@
 		/// @propertyname max-block-size
 		/// @cssprop --db-drawer-max-height
 		/// @default calc(100% - #{variables.$db-spacing-fixed-xl})
+		/* stylelint-disable-next-line db-ux/use-sizing */
 		max-block-size: var(
 			--db-drawer-max-height,
 			calc(100% - #{variables.$db-spacing-fixed-xl})
 		);
+		/* stylelint-disable-next-line db-ux/use-sizing */
 		min-block-size: var(
 			--db-drawer-min-height,
 			calc(100% - #{variables.$db-spacing-fixed-xl})
@@ -163,10 +165,12 @@ $spacings: (
 			///   <div class="db-drawer db-drawer-wide">
 			///     <!-- wide drawer -->
 			///   </div>
+			/* stylelint-disable-next-line db-ux/use-sizing */
 			max-inline-size: var(
 				--db-drawer-max-width,
 				calc(100% - #{variables.$db-spacing-fixed-xl})
 			);
+			/* stylelint-disable-next-line db-ux/use-sizing */
 			min-inline-size: var(
 				--db-drawer-min-width,
 				calc(100% - #{variables.$db-spacing-fixed-xl})

package/build/components/infotext/infotext.css

@@ -126,6 +126,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;
@@ -170,6 +171,9 @@
 .db-infotext[data-semantic=adaptive]::before, .db-infotext:not([data-semantic])::before {
   --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
 }
+.db-infotext[data-wrap=false] {
+  white-space: nowrap;
+}
 .db-infotext[data-semantic=neutral] {
   color: var(--db-neutral-on-bg-basic-emphasis-80-default);
 }

package/build/components/infotext/infotext.scss

@@ -29,6 +29,10 @@
 		}
 	}
 
+	&[data-wrap="false"] {
+		white-space: nowrap;
+	}
+
 	@each $name, $colors in colors.$variant-colors {
 		&[data-semantic="#{$name}"] {
 			@include icons.variant-icons($name);

package/build/components/input/input.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;
@@ -844,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

@@ -145,6 +145,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;
@@ -177,24 +178,54 @@
   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;
 }
 
@@ -246,24 +277,54 @@
   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-item/navigation-item.css

@@ -134,6 +134,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 +208,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 +339,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 +498,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 +545,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%);