@db-ux/core-components 2.4.4 → 3.0.1

package/build/components/divider/divider.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/drawer/drawer.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/header/header.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 {}
 
@@ -149,7 +151,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-header-meta-navigation {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-mobile-3xs);
       --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-mobile-2xs);
@@ -162,7 +164,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-mobile-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-header-meta-navigation {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-tablet-3xs);
       --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-tablet-2xs);
@@ -210,7 +212,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-header-meta-navigation {
       --db-type-headline-3xs: var(--db-typography-functional-mobile-headline-3xs);
       --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-functional-mobile-headline-3xs);
@@ -241,7 +243,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-functional-mobile-headline-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-header-meta-navigation {
       --db-type-headline-3xs: var(--db-typography-functional-tablet-headline-3xs);
       --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-functional-tablet-headline-3xs);
@@ -317,7 +319,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-header-meta-navigation {
       --db-type-body-3xs: var(--db-typography-functional-mobile-body-3xs);
       --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-functional-mobile-body-3xs);
@@ -348,7 +350,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-functional-mobile-body-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-header-meta-navigation {
       --db-type-body-3xs: var(--db-typography-functional-tablet-body-3xs);
       --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-functional-tablet-body-3xs);
@@ -428,12 +430,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 @media screen and (min-width: 64em) {
   .db-header:not([data-force-mobile]), .db-header[data-force-mobile=false] {
-    --db-drawer-max-width: 45em;
+    --db-drawer-max-width: 48em;
   }
 }
 .db-header[data-width=small] {
   margin-inline: auto;
-  max-inline-size: 45em;
+  max-inline-size: 48em;
 }
 .db-header[data-width=medium] {
   margin-inline: auto;

package/build/components/icon/icon.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/infotext/infotext.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 {}
 
@@ -121,7 +123,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-.db-infotext:not([data-icon]):not([data-hide-icon-before=true])::before {
+.db-infotext:not([data-icon]):not([data-show-icon-leading=false])::before {
   color: var(--db-icon-color, inherit);
   display: inline-block;
   /*** icon - placeholder ***/
@@ -138,23 +140,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-infotext:not([data-icon]):not([data-hide-icon-before=true])::before {
+  .db-infotext:not([data-icon]):not([data-show-icon-leading=false])::before {
     content: var(--db-icon, attr(data-icon))/"";
   }
 }
 @media aural {
-  .db-infotext:not([data-icon]):not([data-hide-icon-before=true])::before {
+  .db-infotext:not([data-icon]):not([data-show-icon-leading=false])::before {
     content: none;
   }
 }
 @media speech {
-  .db-infotext:not([data-icon]):not([data-hide-icon-before=true])::before {
+  .db-infotext:not([data-icon]):not([data-show-icon-leading=false])::before {
     content: none;
   }
 }
@@ -166,7 +168,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-infotext:not([data-icon]) {
   --db-icon-font-family: var(--db-icon-filled-font-family, "db-ux-filled");
 }
-.db-infotext:not([data-icon]):not([data-hide-icon-before=true])::before {
+.db-infotext:not([data-icon]):not([data-show-icon-leading=false])::before {
   --db-icon: "information_circle";
   margin-inline-end: var(--db-icon-margin-end, var(--db-spacing-fixed-xs));
 }

package/build/components/input/input.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-input[data-hide-label=true] > label, .db-visually-hidden,
 [data-visually-hidden=true] {
   clip: rect(0, 0, 0, 0) !important;
@@ -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-input:has(input[type=search]):not([data-hide-icon-before=true])::before, .db-input:has(input[type=search]):not([data-hide-icon-after=true])::after, .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-input:has(input[type=time]):not([data-hide-icon-after=true])::after, .db-input:not([data-hide-icon-after=true]):has(datalist)::after {
+.db-input:has(input[type=search]):not([data-show-icon-leading=false])::before, .db-input:has(input[type=search]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=date]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=week]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=datetime-local]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=month]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=time]):not([data-show-icon-trailing=false])::after, .db-input:not([data-show-icon-trailing=false]):has(datalist)::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-input:has(input[type=search]):not([data-hide-icon-before=true])::before, .db-input:has(input[type=search]):not([data-hide-icon-after=true])::after, .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-input:has(input[type=time]):not([data-hide-icon-after=true])::after, .db-input:not([data-hide-icon-after=true]):has(datalist)::after {
+  .db-input:has(input[type=search]):not([data-show-icon-leading=false])::before, .db-input:has(input[type=search]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=date]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=week]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=datetime-local]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=month]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=time]):not([data-show-icon-trailing=false])::after, .db-input:not([data-show-icon-trailing=false]):has(datalist)::after {
     content: var(--db-icon, attr(data-icon))/"";
   }
 }
 @media aural {
-  .db-input:has(input[type=search]):not([data-hide-icon-before=true])::before, .db-input:has(input[type=search]):not([data-hide-icon-after=true])::after, .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-input:has(input[type=time]):not([data-hide-icon-after=true])::after, .db-input:not([data-hide-icon-after=true]):has(datalist)::after {
+  .db-input:has(input[type=search]):not([data-show-icon-leading=false])::before, .db-input:has(input[type=search]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=date]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=week]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=datetime-local]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=month]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=time]):not([data-show-icon-trailing=false])::after, .db-input:not([data-show-icon-trailing=false]):has(datalist)::after {
     content: none;
   }
 }
 @media speech {
-  .db-input:has(input[type=search]):not([data-hide-icon-before=true])::before, .db-input:has(input[type=search]):not([data-hide-icon-after=true])::after, .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-input:has(input[type=time]):not([data-hide-icon-after=true])::after, .db-input:not([data-hide-icon-after=true]):has(datalist)::after {
+  .db-input:has(input[type=search]):not([data-show-icon-leading=false])::before, .db-input:has(input[type=search]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=date]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=week]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=datetime-local]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=month]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=time]):not([data-show-icon-trailing=false])::after, .db-input:not([data-show-icon-trailing=false]):has(datalist)::after {
     content: none;
   }
 }
@@ -522,14 +536,14 @@ input[type=radio]:checked) > label {
   border-radius: var(--db-border-radius-xs);
 }
 
-.db-input:not([data-hide-icon-after=true]):has(datalist)::after {
-  --db-icon-after: "chevron_down";
+.db-input:not([data-show-icon-trailing=false]):has(datalist)::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-input:not([data-hide-icon-after=true]):has(datalist)::after {
-    content: var(--db-icon-after, attr(data-icon-after))/"";
+  .db-input:not([data-show-icon-trailing=false]):has(datalist)::after {
+    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
 .db-input:has(datalist)::after {
@@ -769,7 +783,7 @@ input[type=radio]:checked) [id$=-placeholder] {
 }
 .db-input input: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-input input:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-input input:hover:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
@@ -830,7 +844,7 @@ input[aria-disabled=true]) {
   block-size: var(--db-sizing-md);
   text-overflow: ellipsis;
 }
-.db-input:is([data-icon], [data-icon-after]):not([data-hide-icon=true]), .db-input:has(input[type=search],
+.db-input:is([data-icon], [data-icon-trailing]):not([data-show-icon=false]), .db-input:has(input[type=search],
 input[type=date],
 input[type=month],
 input[type=week],
@@ -838,27 +852,27 @@ input[type=datetime-local],
 input[type=time]) {
   --db-form-component-min-inline-size: var(--db-sizing-xl);
 }
-.db-input[data-icon][data-icon-after] {
+.db-input[data-icon][data-icon-trailing] {
   --db-form-component-min-inline-size: var(--db-sizing-2xl);
 }
-.db-input[data-icon], .db-input:has(input[type=search]) {
+.db-input[data-icon]:not([data-show-icon=false]), .db-input:has(input[type=search]) {
   --db-form-component-padding-inline-start: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs));
 }
-.db-input[data-icon-after], .db-input:has(input[type=search]), .db-input:has(datalist) {
+.db-input[data-icon-trailing]:not([data-show-icon-trailing=false]), .db-input:has(input[type=search]), .db-input:has(datalist) {
   --db-form-component-padding-inline-end: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs));
 }
-.db-input:has(input[type=search]):not([data-hide-icon-before=true])::before {
+.db-input:has(input[type=search]):not([data-show-icon-leading=false])::before {
   --db-icon: "magnifying_glass";
   margin-inline-end: var(--db-icon-margin-end, var(--db-spacing-fixed-xs));
 }
-.db-input:has(input[type=search]):not([data-hide-icon-after=true])::after {
-  --db-icon-after: "cross";
+.db-input:has(input[type=search]):not([data-show-icon-trailing=false])::after {
+  --db-icon-trailing: "cross";
   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-input:has(input[type=search]):not([data-hide-icon-after=true])::after {
-    content: var(--db-icon-after, attr(data-icon-after))/"";
+  .db-input:has(input[type=search]):not([data-show-icon-trailing=false])::after {
+    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
 .db-input:has(input[type=search])::after {
@@ -874,24 +888,24 @@ input:focus-visible)::after {
   opacity: 1;
 }
 @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 {
-    --db-icon-after: "calendar";
+  .db-input:has(input[type=date]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=week]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=datetime-local]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=month]):not([data-show-icon-trailing=false])::after {
+    --db-icon-trailing: "calendar";
     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-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=date]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=week]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=datetime-local]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=month]):not([data-show-icon-trailing=false])::after {
+      content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
     }
   }
-  .db-input:has(input[type=time]):not([data-hide-icon-after=true])::after {
-    --db-icon-after: "clock";
+  .db-input:has(input[type=time]):not([data-show-icon-trailing=false])::after {
+    --db-icon-trailing: "clock";
     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-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=time]):not([data-show-icon-trailing=false])::after {
+      content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
     }
   }
 }
@@ -945,10 +959,10 @@ input:focus-visible)::after {
   margin-inline-end: var(--db-spacing-fixed-sm);
 }
 .db-input input::file-selector-button:hover, .db-input input::file-selector-button:focus {
-  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
 .db-input input::file-selector-button:active {
-  background-color: var(--db-adaptive-bg-basic-transparent-pressed);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
 .db-input:has(datalist) input::-webkit-calendar-picker-indicator {
   display: none !important;

package/build/components/input/input.scss

@@ -16,7 +16,7 @@ $icon-padding: calc(
 	@include form-components.set-default-form-component(input);
 
 	// increased inline size for elements with icons or specific input types that have icons
-	&:is([data-icon], [data-icon-after]):not([data-hide-icon="true"]),
+	&:is([data-icon], [data-icon-trailing]):not([data-show-icon="false"]),
 	&:has(
 		input[type="search"],
 		input[type="date"],
@@ -29,17 +29,17 @@ $icon-padding: calc(
 	}
 
 	// even larger size when both - leading and trailing icons - are present
-	&[data-icon][data-icon-after] {
+	&[data-icon][data-icon-trailing] {
 		--db-form-component-min-inline-size: #{variables.$db-sizing-2xl};
 	}
 
 	// padding-inline-end according to current amount of icons
-	&[data-icon],
+	&[data-icon]:not([data-show-icon="false"]),
 	&:has(input[type="search"]) {
 		--db-form-component-padding-inline-start: #{$icon-padding};
 	}
 
-	&[data-icon-after],
+	&[data-icon-trailing]:not([data-show-icon-trailing="false"]),
 	&:has(input[type="search"]),
 	&:has(datalist) {
 		--db-form-component-padding-inline-end: #{$icon-padding};
@@ -162,11 +162,11 @@ $icon-padding: calc(
 
 			&:hover,
 			&:focus {
-				background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
+				background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
 			}
 
 			&:active {
-				background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
+				background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
 			}
 		}
 	}

package/build/components/link/link.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 {}
 
@@ -204,7 +206,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-.db-link[data-content=internal]:not([data-hide-icon-after=true])::after, .db-link[data-content=external]:not([data-hide-icon-after=true])::after {
+.db-link[data-content=internal]:not([data-variant=inline]):not([data-show-icon-trailing=false])::after, .db-link[data-content=external]:not([data-variant=inline]):not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;
   /*** icon - placeholder ***/
@@ -221,23 +223,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-link[data-content=internal]:not([data-hide-icon-after=true])::after, .db-link[data-content=external]:not([data-hide-icon-after=true])::after {
+  .db-link[data-content=internal]:not([data-variant=inline]):not([data-show-icon-trailing=false])::after, .db-link[data-content=external]:not([data-variant=inline]):not([data-show-icon-trailing=false])::after {
     content: var(--db-icon, attr(data-icon))/"";
   }
 }
 @media aural {
-  .db-link[data-content=internal]:not([data-hide-icon-after=true])::after, .db-link[data-content=external]:not([data-hide-icon-after=true])::after {
+  .db-link[data-content=internal]:not([data-variant=inline]):not([data-show-icon-trailing=false])::after, .db-link[data-content=external]:not([data-variant=inline]):not([data-show-icon-trailing=false])::after {
     content: none;
   }
 }
 @media speech {
-  .db-link[data-content=internal]:not([data-hide-icon-after=true])::after, .db-link[data-content=external]:not([data-hide-icon-after=true])::after {
+  .db-link[data-content=internal]:not([data-variant=inline]):not([data-show-icon-trailing=false])::after, .db-link[data-content=external]:not([data-variant=inline]):not([data-show-icon-trailing=false])::after {
     content: none;
   }
 }
@@ -248,6 +250,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
  */
 .db-link a, .db-link {
   display: inline-block;
+}
+.db-link a:not([data-wrap=true]), .db-link:not([data-wrap=true]) {
   block-size: var(--db-sizing-sm);
 }
 
@@ -282,7 +286,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-link:not([data-variant=inline]) {
+.db-link:not([data-wrap=true], [data-variant=inline]) {
   white-space: nowrap;
 }
 [data-variant=inline].db-link {
@@ -296,36 +300,30 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   pointer-events: none;
 }
 
-.db-link[data-content=internal]:not([data-hide-icon-after=true])::after {
-  --db-icon-after: "arrow_right";
+.db-link {
+  --db-icon-margin-start: var(--db-spacing-fixed-2xs);
+  --db-icon-vertical-align: top;
+}
+.db-link[data-content=internal]:not([data-variant=inline]):not([data-show-icon-trailing=false])::after {
+  --db-icon-trailing: "arrow_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-link[data-content=internal]:not([data-hide-icon-after=true])::after {
-    content: var(--db-icon-after, attr(data-icon-after))/"";
+  .db-link[data-content=internal]:not([data-variant=inline]):not([data-show-icon-trailing=false])::after {
+    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
-.db-link[data-content=internal]:not([data-hide-icon-after=true])::after {
-  vertical-align: top;
-}
-.db-link[data-content=external]:not([data-hide-icon-after=true])::after {
-  --db-icon-after: "arrow_up_right";
+.db-link[data-content=external]:not([data-variant=inline]):not([data-show-icon-trailing=false])::after {
+  --db-icon-trailing: "arrow_up_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-link[data-content=external]:not([data-hide-icon-after=true])::after {
-    content: var(--db-icon-after, attr(data-icon-after))/"";
+  .db-link[data-content=external]:not([data-variant=inline]):not([data-show-icon-trailing=false])::after {
+    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
-.db-link[data-content=internal], .db-link[data-content=external] {
-  --db-icon-margin-start: var(--db-spacing-fixed-2xs);
-}
-.db-link[data-content=internal]::after, .db-link[data-content=external]::after {
-  /* stylelint-disable-next-line db-ux/use-spacings */
-  margin-inline-start: var(--db-icon-margin-start);
-}
 .db-link[data-variant=brand] {
   color: var(--db-brand-on-bg-basic-emphasis-80-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */

package/build/components/link/link.scss

@@ -9,6 +9,9 @@
 @use "../../styles/internal/link-components";
 
 .db-link {
+	--db-icon-margin-start: #{variables.$db-spacing-fixed-2xs};
+	--db-icon-vertical-align: top;
+
 	@extend %db-default-link;
 	@extend %db-overwrite-font-size-md;
 
@@ -18,24 +21,14 @@
 	}
 
 	&[data-content="internal"] {
-		@include icons.set-icon("arrow_right", "after");
-
-		&:not([data-hide-icon-after="true"])::after {
-			vertical-align: top;
+		&:not([data-variant="inline"]) {
+			@include icons.set-icon("arrow_right", "after");
 		}
 	}
 
 	&[data-content="external"] {
-		@include icons.set-icon("arrow_up_right", "after");
-	}
-
-	&[data-content="internal"],
-	&[data-content="external"] {
-		--db-icon-margin-start: #{variables.$db-spacing-fixed-2xs};
-
-		&::after {
-			/* stylelint-disable-next-line db-ux/use-spacings */
-			margin-inline-start: var(--db-icon-margin-start);
+		&:not([data-variant="inline"]) {
+			@include icons.set-icon("arrow_up_right", "after");
 		}
 	}
 

package/build/components/navigation/navigation.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-visually-hidden,
 [data-visually-hidden=true] {
   clip: rect(0, 0, 0, 0) !important;
@@ -219,7 +221,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button:not([data-force-mobile])::after,
   .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button[data-force-mobile=false]::after {
     --db-icon-margin-start: var(--db-spacing-fixed-sm);
-    --db-icon-after: "chevron_down";
+    --db-icon-trailing: "chevron_down";
   }
 }
 @media screen and (min-width: 64em) and (prefers-reduced-motion: no-preference) {
@@ -255,7 +257,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button):not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button)[data-force-mobile=false]::after,
   .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button:not([data-force-mobile])::after,
   .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button[data-force-mobile=false]::after {
-    --db-icon-after: "chevron_right";
+    --db-icon-trailing: "chevron_right";
     --db-icon-margin-start: auto;
   }
   .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button):not([data-force-mobile]):is(:hover, :focus-visible)::after,

package/build/components/navigation/navigation.scss

@@ -33,7 +33,7 @@
 				@include screen-sizes.screen("md") {
 					&::after {
 						--db-icon-margin-start: #{variables.$db-spacing-fixed-sm};
-						--db-icon-after: "chevron_down";
+						--db-icon-trailing: "chevron_down";
 
 						@media screen and (prefers-reduced-motion: no-preference) {
 							transition: form-components.$dropdown-icon-transition;
@@ -61,7 +61,7 @@
 				.db-navigation-item-expand-button > button {
 					@include screen-sizes.screen("md") {
 						&::after {
-							--db-icon-after: "chevron_right";
+							--db-icon-trailing: "chevron_right";
 							--db-icon-margin-start: auto;
 						}