@db-ux/core-components 2.1.0 → 2.1.2

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,14 +769,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));
 }
 
 [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] {
@@ -849,7 +849,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 +888,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 +1030,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;
 }
@@ -1076,7 +1076,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 +1163,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 +1173,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

@@ -162,8 +162,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,
@@ -64,14 +65,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   outline-offset: var(--db-border-width-xs);
   box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
 }
-.db-custom-select-list-item:not([data-disable-focus=true]):not([type=radio], [role=switch]):has(> label > input:focus-within) {
-  border-radius: var(--db-border-radius-xs);
-}
 @media screen and (prefers-reduced-motion: no-preference) {
   .db-custom-select-list-item:not([data-disable-focus=true]):has(> label > input:focus-within) {
     transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
   }
 }
+.db-custom-select-list-item:not([data-disable-focus=true]):not([type=radio], [role=switch]):has(> label > input:focus-within) {
+  border-radius: var(--db-border-radius-xs);
+}
 
 /**
 	Generates 3 types of placeholders, e.g:

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] {
@@ -445,12 +446,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-.db-input, .db-input[data-variant=floating] [id$=-placeholder], .db-input[data-variant=floating] input, .db-input:has(input[type=file]) input, .db-input input::file-selector-button {
+.db-input, .db-input[data-variant=floating] [id$=-placeholder], .db-input[data-variant=floating] input, .db-input:has(input[type=file]) input, .db-input input::-webkit-calendar-picker-indicator, .db-input input::-webkit-search-cancel-button, .db-input input::file-selector-button {
   font: var(--db-type-body-sm);
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  .db-input, .db-input[data-variant=floating] [id$=-placeholder], .db-input[data-variant=floating] input, .db-input:has(input[type=file]) input, .db-input input::file-selector-button {
+  .db-input, .db-input[data-variant=floating] [id$=-placeholder], .db-input[data-variant=floating] input, .db-input:has(input[type=file]) input, .db-input input::-webkit-calendar-picker-indicator, .db-input input::-webkit-search-cancel-button, .db-input input::file-selector-button {
     /* Those variables are only for components to calculate heights and change icons */
     --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
     --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
@@ -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;
 }
@@ -797,7 +798,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 {
@@ -863,24 +864,26 @@ input[type=time]) {
 input:focus-visible)::after {
   opacity: 1;
 }
-.db-input:has(input[type=date]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=week]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=datetime-local]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=month]):not([data-hide-icon-after=true])::after {
-  --db-icon-after: "calendar";
-  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
-  content: var(--db-icon-after, attr(data-icon-after));
-}
-@supports (content: ""/"") {
+@supports selector(::-webkit-calendar-picker-indicator) {
   .db-input:has(input[type=date]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=week]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=datetime-local]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=month]):not([data-hide-icon-after=true])::after {
-    content: var(--db-icon-after, attr(data-icon-after))/"";
+    --db-icon-after: "calendar";
+    margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
+    content: var(--db-icon-after, attr(data-icon-after));
+  }
+  @supports (content: ""/"") {
+    .db-input:has(input[type=date]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=week]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=datetime-local]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=month]):not([data-hide-icon-after=true])::after {
+      content: var(--db-icon-after, attr(data-icon-after))/"";
+    }
   }
-}
-.db-input:has(input[type=time]):not([data-hide-icon-after=true])::after {
-  --db-icon-after: "clock";
-  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
-  content: var(--db-icon-after, attr(data-icon-after));
-}
-@supports (content: ""/"") {
   .db-input:has(input[type=time]):not([data-hide-icon-after=true])::after {
-    content: var(--db-icon-after, attr(data-icon-after))/"";
+    --db-icon-after: "clock";
+    margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
+    content: var(--db-icon-after, attr(data-icon-after));
+  }
+  @supports (content: ""/"") {
+    .db-input:has(input[type=time]):not([data-hide-icon-after=true])::after {
+      content: var(--db-icon-after, attr(data-icon-after))/"";
+    }
   }
 }
 .db-input:has(input[type=file]) input {
@@ -894,6 +897,10 @@ input:focus-visible)::after {
   padding: 0 var(--db-spacing-fixed-xs);
   margin-inline-end: var(--db-spacing-fixed-xs);
 }
+.db-input[data-variant=floating] input::-webkit-calendar-picker-indicator, .db-input[data-variant=floating] input::-webkit-search-cancel-button {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  margin-block-end: var(--db-base-body-icon-font-size-2xs);
+}
 .db-input input {
   position: relative;
 }
@@ -903,6 +910,19 @@ input:focus-visible)::after {
   block-size: var(--db-icon-font-size, 1.5rem);
   padding: 0;
   cursor: pointer;
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  margin-block-start: var(--db-border-width-3xs);
+  border-radius: var(--db-border-radius-xs);
+}
+.db-input input::-webkit-calendar-picker-indicator:focus-visible, .db-input input::-webkit-search-cancel-button:focus-visible {
+  outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
+  outline-offset: var(--db-border-width-xs);
+  box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-input input::-webkit-calendar-picker-indicator:focus-visible, .db-input input::-webkit-search-cancel-button:focus-visible {
+    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
+  }
 }
 .db-input input::-webkit-search-cancel-button {
   appearance: none;

package/build/components/input/input.scss

@@ -67,15 +67,19 @@ $icon-padding: calc(
 		}
 	}
 
-	&:has(input[type="date"]),
-	&:has(input[type="week"]),
-	&:has(input[type="datetime-local"]),
-	&:has(input[type="month"]) {
-		@include icons.set-icon("calendar", "after");
-	}
+	// This @supports should exclude Mozilla Firefox
+	// TODO: Reevaluate after Mozilla is supporting week and month input types
+	@supports selector(::-webkit-calendar-picker-indicator) {
+		&:has(input[type="date"]),
+		&:has(input[type="week"]),
+		&:has(input[type="datetime-local"]),
+		&:has(input[type="month"]) {
+			@include icons.set-icon("calendar", "after");
+		}
 
-	&:has(input[type="time"]) {
-		@include icons.set-icon("clock", "after");
+		&:has(input[type="time"]) {
+			@include icons.set-icon("clock", "after");
+		}
 	}
 
 	&:has(input[type="file"]) {
@@ -105,16 +109,35 @@ $icon-padding: calc(
 		}
 	}
 
+	&[data-variant="floating"] {
+		input {
+			&::-webkit-calendar-picker-indicator,
+			&::-webkit-search-cancel-button {
+				/* stylelint-disable-next-line db-ux/use-spacings */
+				margin-block-end: var(--db-base-body-icon-font-size-2xs);
+			}
+		}
+	}
+
 	input {
 		position: relative;
 
 		&::-webkit-calendar-picker-indicator,
 		&::-webkit-search-cancel-button {
+			@extend %db-overwrite-font-size-sm;
+
 			background-image: none;
 			inline-size: icons.$default-icon-font-size;
 			block-size: icons.$default-icon-font-size;
 			padding: 0;
 			cursor: pointer;
+			/* stylelint-disable-next-line db-ux/use-spacings */
+			margin-block-start: variables.$db-border-width-3xs;
+			border-radius: variables.$db-border-radius-xs;
+
+			&:focus-visible {
+				@include helpers.get-focus-placeholder;
+			}
 		}
 
 		&::-webkit-search-cancel-button {

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] {

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%;

package/build/components/popover/popover.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/radio/radio.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,
@@ -162,7 +163,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   }
 }
 .db-radio:has(input:disabled) {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
 }
 .db-radio:is(label),
 .db-radio > label {

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