@db-ux/core-components 2.1.1 → 2.2.0

package/build/components/accordion/accordion.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

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

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -285,7 +286,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-accordion-item > details[aria-disabled=true] {
   pointer-events: none;
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   .db-accordion-item > details > summary + div {

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

@@ -26,7 +26,7 @@
 
 		&[aria-disabled="true"] {
 			pointer-events: none;
-			opacity: component.$default-disabled;
+			opacity: variables.$db-opacity-md;
 		}
 
 		@media screen and (prefers-reduced-motion: no-preference) {

package/build/components/badge/badge.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/brand/brand.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/button/button.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
@@ -236,7 +237,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
 }
 .db-button:disabled {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
 }
 .db-button[data-state=loading] {
   font-size: 0 !important;

package/build/components/button/button.scss

@@ -98,7 +98,7 @@
 	}
 
 	&:disabled {
-		opacity: component.$default-disabled;
+		opacity: variables.$db-opacity-md;
 	}
 
 	// States (currently only "loading")

package/build/components/card/card.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/checkbox/checkbox.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -218,7 +219,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   }
 }
 .db-checkbox:has(input:disabled) {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
 }
 .db-checkbox:is(label),
 .db-checkbox > label {

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

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-custom-select[data-hide-label=true] > label, .db-visually-hidden,
@@ -768,50 +769,15 @@ dialog[data-variant=inside]:not([data-backdrop=none])::before {
   inset: 0;
 }
 dialog:not([data-backdrop=none])::backdrop, dialog:not([data-backdrop=none])::before {
-  background-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
-  opacity: 0.64;
+  background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-lg));
 }
 dialog:not([data-backdrop=none])[data-backdrop=invisible]::backdrop, dialog:not([data-backdrop=none])[data-backdrop=invisible]::before {
-  opacity: 0;
+  background-color: transparent;
 }
 dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data-backdrop=none])[data-backdrop=weak]::before {
-  opacity: 0.32;
-}
-
-[data-placement^=top].db-custom-select .db-custom-select-dropdown:not([data-outside-vy=top]), .db-custom-select:not([data-placement]) .db-custom-select-dropdown[data-outside-vy=bottom], [data-placement^=bottom].db-custom-select .db-custom-select-dropdown[data-outside-vy=bottom] {
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-@media screen and (min-width: 45em) {
-  [data-placement^=top].db-custom-select .db-custom-select-dropdown:not([data-force-mobile]):not([data-outside-vy=top]), .db-custom-select:not([data-placement]) .db-custom-select-dropdown[data-outside-vy=bottom]:not([data-force-mobile]), [data-placement^=bottom].db-custom-select .db-custom-select-dropdown[data-outside-vy=bottom]:not([data-force-mobile]), [data-placement^=top].db-custom-select [data-force-mobile=false].db-custom-select-dropdown:not([data-outside-vy=top]), .db-custom-select:not([data-placement]) [data-force-mobile=false].db-custom-select-dropdown[data-outside-vy=bottom], [data-placement^=bottom].db-custom-select [data-force-mobile=false].db-custom-select-dropdown[data-outside-vy=bottom] {
-    inset-block-end: 100%;
-    margin-block-start: var(--db-spacing-fixed-md);
-  }
-}
-
-[data-placement^=top].db-custom-select, .db-custom-select:not([data-placement]), [data-placement^=bottom].db-custom-select {
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-@media screen and (min-width: 45em) {
-  [data-placement^=top].db-custom-select:not([data-force-mobile])[data-placement$=end] .db-custom-select-dropdown:not([data-outside-vx=right]), .db-custom-select:not([data-force-mobile])[data-placement$=end]:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vx=right]), [data-placement^=bottom].db-custom-select:not([data-force-mobile])[data-placement$=end] .db-custom-select-dropdown:not([data-outside-vx=right]), [data-force-mobile=false][data-placement$=end][data-placement^=top].db-custom-select .db-custom-select-dropdown:not([data-outside-vx=right]), [data-force-mobile=false][data-placement$=end].db-custom-select:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vx=right]), [data-force-mobile=false][data-placement$=end][data-placement^=bottom].db-custom-select .db-custom-select-dropdown:not([data-outside-vx=right]) {
-    inset-inline-end: 0;
-  }
-  [data-placement^=top].db-custom-select:not([data-force-mobile]) .db-custom-select-dropdown[data-outside-vx=right], .db-custom-select:not([data-force-mobile]):not([data-placement]) .db-custom-select-dropdown[data-outside-vx=right], [data-placement^=bottom].db-custom-select:not([data-force-mobile]) .db-custom-select-dropdown[data-outside-vx=right], [data-force-mobile=false][data-placement^=top].db-custom-select .db-custom-select-dropdown[data-outside-vx=right], [data-force-mobile=false].db-custom-select:not([data-placement]) .db-custom-select-dropdown[data-outside-vx=right], [data-force-mobile=false][data-placement^=bottom].db-custom-select .db-custom-select-dropdown[data-outside-vx=right] {
-    inset-inline-end: 0;
-  }
+  background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-sm));
 }
 
-.db-custom-select:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vy=bottom]), [data-placement^=bottom].db-custom-select .db-custom-select-dropdown:not([data-outside-vy=bottom]) {
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-@media screen and (min-width: 45em) {
-  .db-custom-select:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vy=bottom]):not([data-force-mobile]), .db-custom-select:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vy=bottom])[data-force-mobile=false], [data-placement^=bottom].db-custom-select .db-custom-select-dropdown:not([data-outside-vy=bottom]):not([data-force-mobile]), [data-placement^=bottom].db-custom-select .db-custom-select-dropdown:not([data-outside-vy=bottom])[data-force-mobile=false] {
-    inset-block-start: 100%;
-    margin-block-end: var(--db-spacing-fixed-md);
-  }
-}
 .db-custom-select {
   --db-form-component-padding-inline-end: calc(
   	calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs)) + var(--db-sizing-sm) +
@@ -849,7 +815,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   --db-label-visible-above: 0;
 }
 .db-custom-select[data-variant=floating] > label {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   position: absolute;
   z-index: 2;
   inset-block-start: calc((var(--db-sizing-md) - var(--db-icon-font-size)) / 2);
@@ -888,7 +854,7 @@ summary:is(input, textarea):not(:placeholder-shown),
 > select option:checked:not([hidden]),
 input[type=checkbox]:checked,
 input[type=radio]:checked) [id$=-placeholder] {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
   /* stylelint-disable-next-line db-ux/use-spacings */
@@ -1030,7 +996,7 @@ input[type=radio]:checked) [id$=-placeholder] {
 }
 .db-custom-select summary::placeholder,
 .db-custom-select [id$=-placeholder] {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
@@ -1055,6 +1021,15 @@ input[type=radio]:checked) [id$=-placeholder] {
 .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)) {
   cursor: pointer;
 }
+.db-custom-select summary:is(input, textarea) {
+  /* see https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing */
+}
+.db-custom-select summary:is(input, textarea)[data-field-sizing=content] {
+  field-sizing: content;
+}
+.db-custom-select summary:is(input, textarea)[data-field-sizing=fixed] {
+  field-sizing: fixed;
+}
 .db-custom-select summary:is(input, textarea):not(:disabled):read-only {
   background-color: var(--db-textarea-read-only, var(--db-adaptive-bg-basic-level-1-default)) !important;
 }
@@ -1076,7 +1051,7 @@ input[type=radio]:checked) [id$=-placeholder] {
 .db-custom-select:has(summary:disabled,
 summary[data-disabled=true],
 summary[aria-disabled=true]) {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
   pointer-events: none;
 }
 .db-custom-select::after, .db-custom-select::before {
@@ -1163,8 +1138,8 @@ summary[aria-disabled=true]) {
   inset: 0;
   content: "";
   cursor: default;
-  background-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
-  opacity: 0.64;
+  background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-lg));
+  opacity: var(--db-opacity-lg);
 }
 @media screen and (max-width: 44.9375em) {
   .db-custom-select > details[open] > summary::before {
@@ -1173,8 +1148,8 @@ summary[aria-disabled=true]) {
     inset: 0;
     content: "";
     cursor: default;
-    background-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
-    opacity: 0.64;
+    background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-lg));
+    opacity: var(--db-opacity-lg);
   }
 }
 .db-custom-select[data-variant=floating] .db-custom-select-form-field > span {

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

@@ -7,53 +7,6 @@
 @use "../../styles/internal/select-components";
 @use "../../styles/dialog-init";
 
-%custom-select-placement-top {
-	@include screen-sizes.screen("sm") {
-		inset-block-end: 100%;
-		margin-block-start: variables.$db-spacing-fixed-md;
-	}
-}
-
-%custom-select-placement-vertical {
-	@include screen-sizes.screen("sm") {
-		&[data-placement$="end"] {
-			.db-custom-select-dropdown:not([data-outside-vx="right"]) {
-				inset-inline-end: 0;
-			}
-		}
-
-		.db-custom-select-dropdown[data-outside-vx="right"] {
-			inset-inline-end: 0;
-		}
-	}
-}
-
-%custom-select-placement {
-	&:not([data-placement]),
-	&[data-placement^="bottom"] {
-		@extend %custom-select-placement-vertical;
-
-		.db-custom-select-dropdown:not([data-outside-vy="bottom"]) {
-			@include screen-sizes.screen("sm") {
-				inset-block-start: 100%;
-				margin-block-end: variables.$db-spacing-fixed-md;
-			}
-		}
-
-		.db-custom-select-dropdown[data-outside-vy="bottom"] {
-			@extend %custom-select-placement-top;
-		}
-	}
-
-	&[data-placement^="top"] {
-		@extend %custom-select-placement-vertical;
-
-		.db-custom-select-dropdown:not([data-outside-vy="top"]) {
-			@extend %custom-select-placement-top;
-		}
-	}
-}
-
 .db-custom-select {
 	--db-form-component-padding-inline-end: calc(
 		#{select-components.$select-icon-padding} + #{variables.$db-sizing-sm} +
@@ -67,7 +20,6 @@
 
 	@extend %select-icon;
 	@extend %select-placeholder;
-	@extend %custom-select-placement;
 
 	position: relative;
 
@@ -162,8 +114,8 @@
 					inset: 0;
 					content: "";
 					cursor: default;
-					background-color: dialog-init.$backdrop-color;
-					opacity: dialog-init.$backdrop-opacity-strong;
+					background-color: dialog-init.$backdrop-color-strong;
+					opacity: variables.$db-opacity-lg;
 				}
 			}
 		}

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

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,

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

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-visually-hidden,
 [data-visually-hidden=true] {

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

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-custom-select-list > legend, .db-visually-hidden,
 [data-visually-hidden=true] {

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

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,

package/build/components/divider/divider.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/drawer/drawer.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
@@ -142,14 +143,13 @@ dialog[data-variant=inside]:not([data-backdrop=none])::before {
   inset: 0;
 }
 dialog:not([data-backdrop=none])::backdrop, dialog:not([data-backdrop=none])::before {
-  background-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
-  opacity: 0.64;
+  background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-lg));
 }
 dialog:not([data-backdrop=none])[data-backdrop=invisible]::backdrop, dialog:not([data-backdrop=none])[data-backdrop=invisible]::before {
-  opacity: 0;
+  background-color: transparent;
 }
 dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data-backdrop=none])[data-backdrop=weak]::before {
-  opacity: 0.32;
+  background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-sm));
 }
 
 .db-drawer .db-drawer-container {

package/build/components/header/header.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/icon/icon.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/infotext/infotext.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/input/input.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-input[data-hide-label=true] > label, .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -572,7 +573,7 @@ input[type=radio]:checked) > label {
   --db-label-visible-above: 0;
 }
 .db-input[data-variant=floating] > label {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   position: absolute;
   z-index: 2;
   inset-block-start: calc((var(--db-sizing-md) - var(--db-icon-font-size)) / 2);
@@ -611,7 +612,7 @@ input:is(input, textarea):not(:placeholder-shown),
 > select option:checked:not([hidden]),
 input[type=checkbox]:checked,
 input[type=radio]:checked) [id$=-placeholder] {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
@@ -751,7 +752,7 @@ input[type=radio]:checked) [id$=-placeholder] {
 }
 .db-input input::placeholder,
 .db-input [id$=-placeholder] {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
@@ -776,6 +777,15 @@ input[type=radio]:checked) [id$=-placeholder] {
 .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)) {
   cursor: pointer;
 }
+.db-input input:is(input, textarea) {
+  /* see https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing */
+}
+.db-input input:is(input, textarea)[data-field-sizing=content] {
+  field-sizing: content;
+}
+.db-input input:is(input, textarea)[data-field-sizing=fixed] {
+  field-sizing: fixed;
+}
 .db-input input:is(input, textarea):not(:disabled):read-only {
   background-color: var(--db-textarea-read-only, var(--db-adaptive-bg-basic-level-1-default)) !important;
 }
@@ -797,7 +807,7 @@ input[type=radio]:checked) [id$=-placeholder] {
 .db-input:has(input:disabled,
 input[data-disabled=true],
 input[aria-disabled=true]) {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
   pointer-events: none;
 }
 .db-input::after, .db-input::before {

package/build/components/link/link.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
@@ -291,7 +292,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-radius: var(--db-border-radius-xs);
 }
 [aria-disabled=true].db-link {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
   pointer-events: none;
 }
 

package/build/components/navigation/navigation.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -275,13 +276,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: none;
   }
 }
-.db-navigation > menu .db-navigation-item:has([aria-current=page]) menu :has([aria-current=page])::after,
-.db-navigation > menu .db-navigation-item:has([aria-current=page]) menu [aria-current=page]::after, .db-navigation > menu .db-navigation-item:has([data-active=true]) menu :has([aria-current=page])::after,
-.db-navigation > menu .db-navigation-item:has([data-active=true]) menu [aria-current=page]::after, .db-navigation > menu .db-navigation-item[aria-current=page] menu :has([aria-current=page])::after,
-.db-navigation > menu .db-navigation-item[aria-current=page] menu [aria-current=page]::after, .db-navigation > menu .db-navigation-item[data-active=true] menu :has([aria-current=page])::after,
-.db-navigation > menu .db-navigation-item[data-active=true] menu [aria-current=page]::after {
-  display: none;
-}
 .db-navigation > menu .db-navigation-item .db-navigation-item::after {
   display: none;
 }

package/build/components/navigation/navigation.scss

@@ -86,16 +86,6 @@
 			&[aria-current="page"],
 			&[data-active="true"] {
 				@extend %show-db-puls-auto;
-
-				menu {
-					// hide puls for non navigation items
-					:has([aria-current="page"]),
-					[aria-current="page"] {
-						&::after {
-							display: none;
-						}
-					}
-				}
 			}
 
 			// angular workaround: as no direct-child selector can be used, the pulse is hidden from the second level onwards

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

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
@@ -432,7 +433,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-margin-start: auto;
 }
 .db-navigation-item[aria-disabled=true] {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
   pointer-events: none;
 }
 

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

@@ -161,7 +161,7 @@
 	}
 
 	&[aria-disabled="true"] {
-		opacity: component.$default-disabled;
+		opacity: variables.$db-opacity-md;
 		pointer-events: none;
 	}
 }

package/build/components/notification/notification.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-notification[data-semantic=neutral] {
@@ -1053,7 +1054,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-radius: var(--db-border-radius-xs);
 }
 .db-notification a[aria-disabled=true] {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
   pointer-events: none;
 }
 

package/build/components/page/page.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-page-document {
   block-size: 100%;