@db-ux/core-components 2.4.4 → 3.0.1

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

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -196,8 +198,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-.db-navigation-item .db-navigation-item-expand-button:is(button):not([data-hide-icon-after=true])::after,
-.db-navigation-item .db-navigation-item-expand-button > button:not([data-hide-icon-after=true])::after {
+.db-navigation-item .db-navigation-item-expand-button:is(button):not([data-show-icon-trailing=false])::after,
+.db-navigation-item .db-navigation-item-expand-button > button:not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;
   /*** icon - placeholder ***/
@@ -214,26 +216,26 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line declaration-property-value-no-unknown */
   speak: never;
   text-transform: none;
-  vertical-align: middle;
+  vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
   inline-size: var(--db-icon-font-size, 1.5rem);
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {
-  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-hide-icon-after=true])::after,
-  .db-navigation-item .db-navigation-item-expand-button > button:not([data-hide-icon-after=true])::after {
+  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-show-icon-trailing=false])::after,
+  .db-navigation-item .db-navigation-item-expand-button > button:not([data-show-icon-trailing=false])::after {
     content: var(--db-icon, attr(data-icon))/"";
   }
 }
 @media aural {
-  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-hide-icon-after=true])::after,
-  .db-navigation-item .db-navigation-item-expand-button > button:not([data-hide-icon-after=true])::after {
+  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-show-icon-trailing=false])::after,
+  .db-navigation-item .db-navigation-item-expand-button > button:not([data-show-icon-trailing=false])::after {
     content: none;
   }
 }
 @media speech {
-  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-hide-icon-after=true])::after,
-  .db-navigation-item .db-navigation-item-expand-button > button:not([data-hide-icon-after=true])::after {
+  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-show-icon-trailing=false])::after,
+  .db-navigation-item .db-navigation-item-expand-button > button:not([data-show-icon-trailing=false])::after {
     content: none;
   }
 }
@@ -287,7 +289,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .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]) {
   cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
+  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),
@@ -302,7 +304,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .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]) {
   cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-pressed);
+  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),
@@ -316,7 +318,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-navigation-item .db-navigation-item-expand-button:has(~ .db-sub-navigation:is(:hover, :focus)):is(button),
 .db-navigation-item .db-navigation-item-expand-button > button:has(~ .db-sub-navigation:is(:hover, :focus)), .db-navigation-item a:has(~ .db-sub-navigation:is(:hover, :focus)) {
-  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
 
 .db-navigation-item {
@@ -326,16 +328,16 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inline-size: auto;
   /* stylelint-disable-next-line media-query-no-invalid */
 }
-.db-navigation-item[data-icon]:not([data-hide-icon=true])::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-hide-icon=true]) a,
-.db-navigation-item[data-icon]:not([data-hide-icon=true]) button,
-.db-navigation-item[data-icon]:not([data-hide-icon=true]) label {
+.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-padding-inline-start: calc(
   	var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) +
   		var(--db-icon-font-size)
@@ -408,16 +410,16 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-navigation-item .db-navigation-item-expand-button > button {
   font-weight: inherit;
 }
-.db-navigation-item .db-navigation-item-expand-button:is(button):not([data-hide-icon-after=true])::after,
-.db-navigation-item .db-navigation-item-expand-button > button:not([data-hide-icon-after=true])::after {
-  --db-icon-after: "chevron_right";
+.db-navigation-item .db-navigation-item-expand-button:is(button):not([data-show-icon-trailing=false])::after,
+.db-navigation-item .db-navigation-item-expand-button > button:not([data-show-icon-trailing=false])::after {
+  --db-icon-trailing: "chevron_right";
   margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
-  content: var(--db-icon-after, attr(data-icon-after));
+  content: var(--db-icon-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {
-  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-hide-icon-after=true])::after,
-  .db-navigation-item .db-navigation-item-expand-button > button:not([data-hide-icon-after=true])::after {
-    content: var(--db-icon-after, attr(data-icon-after))/"";
+  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-show-icon-trailing=false])::after,
+  .db-navigation-item .db-navigation-item-expand-button > button:not([data-show-icon-trailing=false])::after {
+    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
 .db-navigation-item:has([aria-current=page]) > :is(a, button), .db-navigation-item:has([data-active=true]) > :is(a, button), .db-navigation-item[aria-current=page] > :is(a, button), .db-navigation-item[data-active=true] > :is(a, button) {

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

@@ -65,15 +65,15 @@
 	justify-content: space-between;
 
 	@include helpers.hover {
-		background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
 	}
 
 	@include helpers.active {
-		background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
 	}
 
 	&:has(~ .db-sub-navigation:is(:hover, :focus)) {
-		background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
 	}
 }
 

package/build/components/notification/notification.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-notification[data-semantic=neutral] {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
@@ -45,11 +47,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     --db-adaptive-bg-basic-transparent-semi-default: var(
     	--db-neutral-bg-basic-transparent-semi-default
     );
-    --db-adaptive-bg-basic-transparent-hovered: var(
-    	--db-neutral-bg-basic-transparent-hovered
+    --db-adaptive-bg-basic-transparent-full-hovered: var(
+    	--db-neutral-bg-basic-transparent-full-hovered
     );
-    --db-adaptive-bg-basic-transparent-pressed: var(
-    	--db-neutral-bg-basic-transparent-pressed
+    --db-adaptive-bg-basic-transparent-full-pressed: var(
+    	--db-neutral-bg-basic-transparent-full-pressed
+    );
+    --db-adaptive-bg-basic-transparent-semi-hovered: var(
+    	--db-neutral-bg-basic-transparent-semi-hovered
+    );
+    --db-adaptive-bg-basic-transparent-semi-pressed: var(
+    	--db-neutral-bg-basic-transparent-semi-pressed
     );
     --db-adaptive-on-bg-basic-emphasis-100-default: var(
     	--db-neutral-on-bg-basic-emphasis-100-default
@@ -196,11 +204,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     --db-adaptive-bg-basic-transparent-semi-default: var(
     	--db-critical-bg-basic-transparent-semi-default
     );
-    --db-adaptive-bg-basic-transparent-hovered: var(
-    	--db-critical-bg-basic-transparent-hovered
+    --db-adaptive-bg-basic-transparent-full-hovered: var(
+    	--db-critical-bg-basic-transparent-full-hovered
+    );
+    --db-adaptive-bg-basic-transparent-full-pressed: var(
+    	--db-critical-bg-basic-transparent-full-pressed
     );
-    --db-adaptive-bg-basic-transparent-pressed: var(
-    	--db-critical-bg-basic-transparent-pressed
+    --db-adaptive-bg-basic-transparent-semi-hovered: var(
+    	--db-critical-bg-basic-transparent-semi-hovered
+    );
+    --db-adaptive-bg-basic-transparent-semi-pressed: var(
+    	--db-critical-bg-basic-transparent-semi-pressed
     );
     --db-adaptive-on-bg-basic-emphasis-100-default: var(
     	--db-critical-on-bg-basic-emphasis-100-default
@@ -345,11 +359,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     --db-adaptive-bg-basic-transparent-semi-default: var(
     	--db-successful-bg-basic-transparent-semi-default
     );
-    --db-adaptive-bg-basic-transparent-hovered: var(
-    	--db-successful-bg-basic-transparent-hovered
+    --db-adaptive-bg-basic-transparent-full-hovered: var(
+    	--db-successful-bg-basic-transparent-full-hovered
+    );
+    --db-adaptive-bg-basic-transparent-full-pressed: var(
+    	--db-successful-bg-basic-transparent-full-pressed
+    );
+    --db-adaptive-bg-basic-transparent-semi-hovered: var(
+    	--db-successful-bg-basic-transparent-semi-hovered
     );
-    --db-adaptive-bg-basic-transparent-pressed: var(
-    	--db-successful-bg-basic-transparent-pressed
+    --db-adaptive-bg-basic-transparent-semi-pressed: var(
+    	--db-successful-bg-basic-transparent-semi-pressed
     );
     --db-adaptive-on-bg-basic-emphasis-100-default: var(
     	--db-successful-on-bg-basic-emphasis-100-default
@@ -494,11 +514,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     --db-adaptive-bg-basic-transparent-semi-default: var(
     	--db-warning-bg-basic-transparent-semi-default
     );
-    --db-adaptive-bg-basic-transparent-hovered: var(
-    	--db-warning-bg-basic-transparent-hovered
+    --db-adaptive-bg-basic-transparent-full-hovered: var(
+    	--db-warning-bg-basic-transparent-full-hovered
     );
-    --db-adaptive-bg-basic-transparent-pressed: var(
-    	--db-warning-bg-basic-transparent-pressed
+    --db-adaptive-bg-basic-transparent-full-pressed: var(
+    	--db-warning-bg-basic-transparent-full-pressed
+    );
+    --db-adaptive-bg-basic-transparent-semi-hovered: var(
+    	--db-warning-bg-basic-transparent-semi-hovered
+    );
+    --db-adaptive-bg-basic-transparent-semi-pressed: var(
+    	--db-warning-bg-basic-transparent-semi-pressed
     );
     --db-adaptive-on-bg-basic-emphasis-100-default: var(
     	--db-warning-on-bg-basic-emphasis-100-default
@@ -643,11 +669,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     --db-adaptive-bg-basic-transparent-semi-default: var(
     	--db-informational-bg-basic-transparent-semi-default
     );
-    --db-adaptive-bg-basic-transparent-hovered: var(
-    	--db-informational-bg-basic-transparent-hovered
+    --db-adaptive-bg-basic-transparent-full-hovered: var(
+    	--db-informational-bg-basic-transparent-full-hovered
+    );
+    --db-adaptive-bg-basic-transparent-full-pressed: var(
+    	--db-informational-bg-basic-transparent-full-pressed
     );
-    --db-adaptive-bg-basic-transparent-pressed: var(
-    	--db-informational-bg-basic-transparent-pressed
+    --db-adaptive-bg-basic-transparent-semi-hovered: var(
+    	--db-informational-bg-basic-transparent-semi-hovered
+    );
+    --db-adaptive-bg-basic-transparent-semi-pressed: var(
+    	--db-informational-bg-basic-transparent-semi-pressed
     );
     --db-adaptive-on-bg-basic-emphasis-100-default: var(
     	--db-informational-on-bg-basic-emphasis-100-default
@@ -895,7 +927,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line declaration-property-value-no-unknown */
   speak: never;
   text-transform: none;
-  vertical-align: middle;
+  vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
   inline-size: var(--db-icon-font-size, 1.5rem);
   content: var(--db-icon, attr(data-icon));
@@ -1010,6 +1042,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-notification a {
   display: inline-block;
+}
+.db-notification a:not([data-wrap=true]) {
   block-size: var(--db-sizing-sm);
 }
 
@@ -1044,7 +1078,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   text-decoration-thickness: 0.0625rem;
   text-decoration-line: underline;
 }
-.db-notification a:not([data-variant=inline]) {
+.db-notification a:not([data-wrap=true], [data-variant=inline]) {
   white-space: nowrap;
 }
 .db-notification a[data-variant=inline] {

package/build/components/page/page.css

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

package/build/components/popover/popover.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -337,13 +339,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   visibility: hidden;
   z-index: 1337;
   white-space: normal;
-  max-inline-size: calc(100vw - 2 * var(--db-spacing-fixed-md));
+  max-inline-size: var(--db-container-xs);
   block-size: fit-content;
   inline-size: fit-content;
 }
 .db-popover > article[data-width=fixed] {
   inline-size: max-content;
-  max-inline-size: min(var(--db-sizing-3xl), calc(100vw - 2 * var(--db-spacing-fixed-md)));
   text-align: initial;
 }
 

package/build/components/radio/radio.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -204,7 +206,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-radio:not(:has(input:checked, input:disabled)):has(input:hover, > label:hover, :is(label):hover) input {
   cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
 .db-radio:not(:has(input:checked, input:disabled)):has(input:active, > label:active, :is(label):active) {
   --db-check-element-label-color: var(
@@ -217,7 +219,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-radio:not(:has(input:checked, input:disabled)):has(input:active, > label:active, :is(label):active) input {
   cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-pressed);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
 .db-radio:has(input:not([data-custom-validity]):required:valid) {
   --db-check-element-border-color: var(
@@ -232,14 +234,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
   	--db-successful-on-bg-basic-emphasis-80-pressed
   );
-  --db-adaptive-bg-basic-transparent-default: var(
-  	--db-successful-bg-basic-transparent-default
+  --db-adaptive-bg-basic-transparent-full-default: var(
+  	--db-successful-bg-basic-transparent-full-default
   );
-  --db-adaptive-bg-basic-transparent-hovered: var(
-  	--db-successful-bg-basic-transparent-hovered
+  --db-adaptive-bg-basic-transparent-full-hovered: var(
+  	--db-successful-bg-basic-transparent-full-hovered
   );
-  --db-adaptive-bg-basic-transparent-pressed: var(
-  	--db-successful-bg-basic-transparent-pressed
+  --db-adaptive-bg-basic-transparent-full-pressed: var(
+  	--db-successful-bg-basic-transparent-full-pressed
   );
 }
 .db-radio:has(input[data-custom-validity=valid]), .db-radio[data-custom-validity=valid] {
@@ -255,14 +257,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
   	--db-successful-on-bg-basic-emphasis-80-pressed
   );
-  --db-adaptive-bg-basic-transparent-default: var(
-  	--db-successful-bg-basic-transparent-default
+  --db-adaptive-bg-basic-transparent-full-default: var(
+  	--db-successful-bg-basic-transparent-full-default
   );
-  --db-adaptive-bg-basic-transparent-hovered: var(
-  	--db-successful-bg-basic-transparent-hovered
+  --db-adaptive-bg-basic-transparent-full-hovered: var(
+  	--db-successful-bg-basic-transparent-full-hovered
   );
-  --db-adaptive-bg-basic-transparent-pressed: var(
-  	--db-successful-bg-basic-transparent-pressed
+  --db-adaptive-bg-basic-transparent-full-pressed: var(
+  	--db-successful-bg-basic-transparent-full-pressed
   );
 }
 .db-radio:has(input:not([data-custom-validity]):required:invalid) {
@@ -278,14 +280,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
   	--db-critical-on-bg-basic-emphasis-80-pressed
   );
-  --db-adaptive-bg-basic-transparent-default: var(
-  	--db-critical-bg-basic-transparent-default
+  --db-adaptive-bg-basic-transparent-full-default: var(
+  	--db-critical-bg-basic-transparent-full-default
   );
-  --db-adaptive-bg-basic-transparent-hovered: var(
-  	--db-critical-bg-basic-transparent-hovered
+  --db-adaptive-bg-basic-transparent-full-hovered: var(
+  	--db-critical-bg-basic-transparent-full-hovered
   );
-  --db-adaptive-bg-basic-transparent-pressed: var(
-  	--db-critical-bg-basic-transparent-pressed
+  --db-adaptive-bg-basic-transparent-full-pressed: var(
+  	--db-critical-bg-basic-transparent-full-pressed
   );
 }
 .db-radio:has(input[data-custom-validity=invalid]), .db-radio[data-custom-validity=invalid] {
@@ -301,14 +303,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
   	--db-critical-on-bg-basic-emphasis-80-pressed
   );
-  --db-adaptive-bg-basic-transparent-default: var(
-  	--db-critical-bg-basic-transparent-default
+  --db-adaptive-bg-basic-transparent-full-default: var(
+  	--db-critical-bg-basic-transparent-full-default
   );
-  --db-adaptive-bg-basic-transparent-hovered: var(
-  	--db-critical-bg-basic-transparent-hovered
+  --db-adaptive-bg-basic-transparent-full-hovered: var(
+  	--db-critical-bg-basic-transparent-full-hovered
   );
-  --db-adaptive-bg-basic-transparent-pressed: var(
-  	--db-critical-bg-basic-transparent-pressed
+  --db-adaptive-bg-basic-transparent-full-pressed: var(
+  	--db-critical-bg-basic-transparent-full-pressed
   );
 }
 .db-radio input {

package/build/components/radio/radio.scss

@@ -16,14 +16,14 @@
 	--db-adaptive-on-bg-basic-emphasis-100-pressed: var(
 		--db-#{$variant}-on-bg-basic-emphasis-80-pressed
 	);
-	--db-adaptive-bg-basic-transparent-default: var(
-		--db-#{$variant}-bg-basic-transparent-default
+	--db-adaptive-bg-basic-transparent-full-default: var(
+		--db-#{$variant}-bg-basic-transparent-full-default
 	);
-	--db-adaptive-bg-basic-transparent-hovered: var(
-		--db-#{$variant}-bg-basic-transparent-hovered
+	--db-adaptive-bg-basic-transparent-full-hovered: var(
+		--db-#{$variant}-bg-basic-transparent-full-hovered
 	);
-	--db-adaptive-bg-basic-transparent-pressed: var(
-		--db-#{$variant}-bg-basic-transparent-pressed
+	--db-adaptive-bg-basic-transparent-full-pressed: var(
+		--db-#{$variant}-bg-basic-transparent-full-pressed
 	);
 }
 

package/build/components/section/section.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -52,7 +54,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   padding-inline: var(--db-spacing-fixed-md);
 }
 .db-section[data-width=small] {
-  padding-inline: max(var(--db-spacing-fixed-md) + (100vw - 45em) / 2, var(--db-spacing-fixed-md));
+  padding-inline: max(var(--db-spacing-fixed-md) + (100vw - 48em) / 2, var(--db-spacing-fixed-md));
 }
 .db-section[data-width=medium] {
   padding-inline: max(var(--db-spacing-fixed-md) + (100vw - 64em) / 2, var(--db-spacing-fixed-md));

package/build/components/select/select.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-select[data-hide-label=true] > label, .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -68,11 +70,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     --db-adaptive-bg-basic-transparent-semi-default: var(
     	--db-critical-bg-basic-transparent-semi-default
     );
-    --db-adaptive-bg-basic-transparent-hovered: var(
-    	--db-critical-bg-basic-transparent-hovered
+    --db-adaptive-bg-basic-transparent-full-hovered: var(
+    	--db-critical-bg-basic-transparent-full-hovered
     );
-    --db-adaptive-bg-basic-transparent-pressed: var(
-    	--db-critical-bg-basic-transparent-pressed
+    --db-adaptive-bg-basic-transparent-full-pressed: var(
+    	--db-critical-bg-basic-transparent-full-pressed
+    );
+    --db-adaptive-bg-basic-transparent-semi-hovered: var(
+    	--db-critical-bg-basic-transparent-semi-hovered
+    );
+    --db-adaptive-bg-basic-transparent-semi-pressed: var(
+    	--db-critical-bg-basic-transparent-semi-pressed
     );
     --db-adaptive-on-bg-basic-emphasis-100-default: var(
     	--db-critical-on-bg-basic-emphasis-100-default
@@ -223,11 +231,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     --db-adaptive-bg-basic-transparent-semi-default: var(
     	--db-successful-bg-basic-transparent-semi-default
     );
-    --db-adaptive-bg-basic-transparent-hovered: var(
-    	--db-successful-bg-basic-transparent-hovered
+    --db-adaptive-bg-basic-transparent-full-hovered: var(
+    	--db-successful-bg-basic-transparent-full-hovered
+    );
+    --db-adaptive-bg-basic-transparent-full-pressed: var(
+    	--db-successful-bg-basic-transparent-full-pressed
+    );
+    --db-adaptive-bg-basic-transparent-semi-hovered: var(
+    	--db-successful-bg-basic-transparent-semi-hovered
     );
-    --db-adaptive-bg-basic-transparent-pressed: var(
-    	--db-successful-bg-basic-transparent-pressed
+    --db-adaptive-bg-basic-transparent-semi-pressed: var(
+    	--db-successful-bg-basic-transparent-semi-pressed
     );
     --db-adaptive-on-bg-basic-emphasis-100-default: var(
     	--db-successful-on-bg-basic-emphasis-100-default
@@ -360,7 +374,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-.db-select:not([data-hide-icon-after=true])::after {
+.db-select:not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;
   /*** icon - placeholder ***/
@@ -377,23 +391,23 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line declaration-property-value-no-unknown */
   speak: never;
   text-transform: none;
-  vertical-align: middle;
+  vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
   inline-size: var(--db-icon-font-size, 1.5rem);
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {
-  .db-select:not([data-hide-icon-after=true])::after {
+  .db-select:not([data-show-icon-trailing=false])::after {
     content: var(--db-icon, attr(data-icon))/"";
   }
 }
 @media aural {
-  .db-select:not([data-hide-icon-after=true])::after {
+  .db-select:not([data-show-icon-trailing=false])::after {
     content: none;
   }
 }
 @media speech {
-  .db-select:not([data-hide-icon-after=true])::after {
+  .db-select:not([data-show-icon-trailing=false])::after {
     content: none;
   }
 }
@@ -522,14 +536,14 @@ input[type=radio]:checked) > label {
   border-radius: var(--db-border-radius-xs);
 }
 
-.db-select:not([data-hide-icon-after=true])::after {
-  --db-icon-after: "chevron_down";
+.db-select:not([data-show-icon-trailing=false])::after {
+  --db-icon-trailing: "chevron_down";
   margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
-  content: var(--db-icon-after, attr(data-icon-after));
+  content: var(--db-icon-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {
-  .db-select:not([data-hide-icon-after=true])::after {
-    content: var(--db-icon-after, attr(data-icon-after))/"";
+  .db-select:not([data-show-icon-trailing=false])::after {
+    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
 .db-select::after {
@@ -550,7 +564,7 @@ input[type=radio]:checked) > label {
   display: none;
 }
 
-[data-icon].db-select:not([data-hide-icon=true]) {
+[data-icon].db-select:not([data-show-icon=false]) {
   --db-form-has-before: 1;
 }
 
@@ -817,7 +831,7 @@ input[type=radio]:checked) [id$=-placeholder] {
 }
 .db-select select:hover:not(:disabled, [aria-disabled=true]) {
   cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
+  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) {
   cursor: initial;
@@ -878,7 +892,7 @@ select[aria-disabled=true]) {
   block-size: var(--db-sizing-md);
   text-overflow: ellipsis;
 }
-.db-select[data-icon]:not([data-hide-icon=true]) {
+.db-select[data-icon]:not([data-show-icon=false]) {
   --db-form-component-min-inline-size: var(--db-sizing-2xl);
 }
 .db-select select {

package/build/components/select/select.scss

@@ -17,7 +17,7 @@
 	@include form-components.set-default-form-component(select);
 
 	// increased inline size for elements with icons
-	&[data-icon]:not([data-hide-icon="true"]) {
+	&[data-icon]:not([data-show-icon="false"]) {
 		--db-form-component-min-inline-size: #{variables.$db-sizing-2xl};
 	}
 

package/build/components/stack/stack-web-component.css

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

package/build/components/stack/stack.css

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