@db-ux/core-components 2.4.4 → 3.0.1

package/build/components/switch/switch.css

@@ -7,6 +7,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] {
@@ -69,11 +71,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
@@ -218,11 +226,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
@@ -445,7 +459,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-.db-switch > input:not([data-hide-icon-after=true])::after, .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after {
+.db-switch > input:not([data-show-icon-trailing=false])::after, .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;
   /*** icon - placeholder ***/
@@ -462,23 +476,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-switch > input:not([data-hide-icon-after=true])::after, .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after {
+  .db-switch > input:not([data-show-icon-trailing=false])::after, .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
     content: var(--db-icon, attr(data-icon))/"";
   }
 }
 @media aural {
-  .db-switch > input:not([data-hide-icon-after=true])::after, .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after {
+  .db-switch > input:not([data-show-icon-trailing=false])::after, .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
     content: none;
   }
 }
 @media speech {
-  .db-switch > input:not([data-hide-icon-after=true])::after, .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after {
+  .db-switch > input:not([data-show-icon-trailing=false])::after, .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
     content: none;
   }
 }
@@ -555,7 +569,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-switch:not(:has(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-switch:not(:has(input:disabled)):has(input:active, > label:active, :is(label):active) {
   --db-check-element-label-color: var(
@@ -568,7 +582,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-switch:not(:has(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-switch > input {
   --db-icon-margin-start: 0;
@@ -584,14 +598,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-radius: var(--db-border-radius-full);
   /* positioned at the end of the track: track length - 100% (thumb width) */
 }
-.db-switch > input:not([data-hide-icon-after=true])::after {
-  --db-icon-after: "cross";
+.db-switch > input: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-switch > input:not([data-hide-icon-after=true])::after {
-    content: var(--db-icon-after, attr(data-icon-after))/"";
+  .db-switch > input:not([data-show-icon-trailing=false])::after {
+    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
 .db-switch > input::after {
@@ -681,10 +695,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-radius: var(--db-border-radius-full);
 }
 .db-switch > input[data-aid-icon]:not(:checked)::after {
-  --db-icon-after: attr(data-aid-icon);
+  --db-icon-trailing: attr(data-aid-icon);
 }
-.db-switch > input[data-aid-icon-after]:checked::after {
-  --db-icon-after: attr(data-aid-icon-after);
+.db-switch > input[data-aid-icon-trailing]:checked::after {
+  --db-icon-trailing: attr(data-aid-icon-trailing);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   .db-switch > input {
@@ -752,14 +766,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   visibility: visible;
   block-size: calc(var(--db-icon-font-size));
 }
-.db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after {
-  --db-icon-after: "check";
+.db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
+  --db-icon-trailing: "check";
   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-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after {
-    content: var(--db-icon-after, attr(data-icon-after))/"";
+  .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
+    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
 .db-switch[data-emphasis=strong] > input:checked::after, .db-switch[data-visual-aid=true] > input:checked::after {

package/build/components/switch/switch.scss

@@ -143,11 +143,11 @@ $checked-active-transition-size: calc(
 		}
 
 		&[data-aid-icon]:not(:checked)::after {
-			--db-icon-after: attr(data-aid-icon);
+			--db-icon-trailing: attr(data-aid-icon);
 		}
 
-		&[data-aid-icon-after]:checked::after {
-			--db-icon-after: attr(data-aid-icon-after);
+		&[data-aid-icon-trailing]:checked::after {
+			--db-icon-trailing: attr(data-aid-icon-trailing);
 		}
 
 		@media screen and (prefers-reduced-motion: no-preference) {

package/build/components/tab-item/tab-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, ... */
 .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -164,7 +166,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: var(--db-overwrite-cursor, pointer);
 }
 .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(:not(input:disabled)) {
-  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
 .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(input:disabled) {
   cursor: initial;
@@ -179,7 +181,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: var(--db-overwrite-cursor, pointer);
 }
 .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(:not(input:disabled)) {
-  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
 .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(input:disabled) {
   cursor: initial;
@@ -202,10 +204,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inset-block-start: 50%;
   inset-inline-start: calc(0% + var(--db-spacing-fixed-xs));
 }
-.db-tab-item label[data-icon-after] {
+.db-tab-item label[data-icon-trailing] {
   padding-inline-end: calc(var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-sm) + var(--db-icon-font-size));
 }
-.db-tab-item label[data-icon-after]::after {
+.db-tab-item label[data-icon-trailing]::after {
   position: absolute;
   transform: translateY(-50%);
   inset-block-start: 50%;

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

@@ -34,7 +34,7 @@ $with-icon-padding-calc: calc(
 
 		@include helpers.hover {
 			&:has(:not(input:disabled)) {
-				background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
+				background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
 			}
 
 			&:has(input:disabled) {
@@ -44,7 +44,7 @@ $with-icon-padding-calc: calc(
 
 		@include helpers.hover {
 			&:has(:not(input:disabled)) {
-				background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
+				background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
 			}
 
 			&:has(input:disabled) {
@@ -69,7 +69,7 @@ $with-icon-padding-calc: calc(
 			}
 		}
 
-		&[data-icon-after] {
+		&[data-icon-trailing] {
 			padding-inline-end: $with-icon-padding-calc;
 
 			&::after {

package/build/components/tab-list/tab-list.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] {
@@ -238,7 +240,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-start-end-radius: var(--db-border-radius-xs);
 }
 .db-tab-list > ul:is(:hover, :focus)::-webkit-scrollbar-track, .db-tab-list > ul:is(:hover, :focus)::-webkit-scrollbar-button:single-button {
-  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
 .db-tab-list > ul:read-only::-webkit-scrollbar-track, .db-tab-list > ul:read-only::-webkit-scrollbar-button:single-button {
   background-color: var(--db-adaptive-bg-basic-level-1-default);
@@ -247,7 +249,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-tab-list > ul::-webkit-scrollbar-thumb {
-  background-color: var(--db-adaptive-bg-basic-transparent-pressed);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
 .db-tab-list > ul::-webkit-scrollbar-button:single-button {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
@@ -257,10 +259,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
 }
 .db-tab-list > ul::-webkit-scrollbar-button:single-button:is(:hover, :focus) {
-  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
 .db-tab-list > ul::-webkit-scrollbar-button:single-button:active {
-  background-color: var(--db-adaptive-bg-basic-transparent-pressed);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
 .db-tab-list > ul::-webkit-scrollbar-button:single-button:vertical:decrement {
   border-start-end-radius: var(--db-border-radius-xs);

package/build/components/tab-panel/tab-panel.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-tab-panel {
   display: none;
 }

package/build/components/tabs/tabs.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] {

package/build/components/tag/tag.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-tag label, .db-tag a {
   transition: outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
 }
@@ -128,11 +130,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
@@ -279,11 +287,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
@@ -428,11 +442,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-pressed: var(
-    	--db-successful-bg-basic-transparent-pressed
+    --db-adaptive-bg-basic-transparent-semi-hovered: var(
+    	--db-successful-bg-basic-transparent-semi-hovered
+    );
+    --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
@@ -577,11 +597,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-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-pressed: var(
-    	--db-warning-bg-basic-transparent-pressed
+    --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
@@ -726,11 +752,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-semi-hovered: var(
+    	--db-informational-bg-basic-transparent-semi-hovered
     );
-    --db-adaptive-bg-basic-transparent-pressed: var(
-    	--db-informational-bg-basic-transparent-pressed
+    --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
@@ -933,7 +965,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-.db-tag[data-show-check-state=true] label:not([data-hide-icon-after=true])::after, .db-tag[data-show-check-state=true] label:has(input:checked):not([data-hide-icon-after=true])::after {
+.db-tag[data-show-check-state=true] label:not([data-show-icon-trailing=false])::after, .db-tag[data-show-check-state=true] label:has(input:checked):not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;
   /*** icon - placeholder ***/
@@ -950,23 +982,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-tag[data-show-check-state=true] label:not([data-hide-icon-after=true])::after, .db-tag[data-show-check-state=true] label:has(input:checked):not([data-hide-icon-after=true])::after {
+  .db-tag[data-show-check-state=true] label:not([data-show-icon-trailing=false])::after, .db-tag[data-show-check-state=true] label:has(input:checked):not([data-show-icon-trailing=false])::after {
     content: var(--db-icon, attr(data-icon))/"";
   }
 }
 @media aural {
-  .db-tag[data-show-check-state=true] label:not([data-hide-icon-after=true])::after, .db-tag[data-show-check-state=true] label:has(input:checked):not([data-hide-icon-after=true])::after {
+  .db-tag[data-show-check-state=true] label:not([data-show-icon-trailing=false])::after, .db-tag[data-show-check-state=true] label:has(input:checked):not([data-show-icon-trailing=false])::after {
     content: none;
   }
 }
 @media speech {
-  .db-tag[data-show-check-state=true] label:not([data-hide-icon-after=true])::after, .db-tag[data-show-check-state=true] label:has(input:checked):not([data-hide-icon-after=true])::after {
+  .db-tag[data-show-check-state=true] label:not([data-show-icon-trailing=false])::after, .db-tag[data-show-check-state=true] label:has(input:checked):not([data-show-icon-trailing=false])::after {
     content: none;
   }
 }
@@ -1341,16 +1373,16 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-tag:has(label, button:not(.db-tab-remove-button), a) {
   --db-icon-margin-end: var(--db-spacing-fixed-2xs);
 }
-.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-hide-icon=true])::before {
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-show-icon=false])::before {
   position: absolute;
   inset-block-start: calc(50% - 0.5em);
   inset-inline-start: var(--db-spacing-fixed-2xs);
   pointer-events: none;
   z-index: 1;
 }
-.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-hide-icon=true]) a,
-.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-hide-icon=true]) button,
-.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-hide-icon=true]) label {
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-show-icon=false]) a,
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-show-icon=false]) button,
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-show-icon=false]) label {
   --db-padding-inline-start: calc(
   	var(--db-spacing-fixed-2xs) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) +
   		var(--db-icon-font-size)
@@ -1415,24 +1447,24 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-margin-start: var(--db-spacing-fixed-2xs);
   /* TODO: maybe we could get rid of an expensive :has selector by defining this icon on the input itself */
 }
-.db-tag[data-show-check-state=true] label:not([data-hide-icon-after=true])::after {
-  --db-icon-after: "circle";
+.db-tag[data-show-check-state=true] label:not([data-show-icon-trailing=false])::after {
+  --db-icon-trailing: "circle";
   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-tag[data-show-check-state=true] label:not([data-hide-icon-after=true])::after {
-    content: var(--db-icon-after, attr(data-icon-after))/"";
+  .db-tag[data-show-check-state=true] label:not([data-show-icon-trailing=false])::after {
+    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
-.db-tag[data-show-check-state=true] label:has(input:checked):not([data-hide-icon-after=true])::after {
-  --db-icon-after: "check_circle";
+.db-tag[data-show-check-state=true] label:has(input:checked):not([data-show-icon-trailing=false])::after {
+  --db-icon-trailing: "check_circle";
   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-tag[data-show-check-state=true] label:has(input:checked):not([data-hide-icon-after=true])::after {
-    content: var(--db-icon-after, attr(data-icon-after))/"";
+  .db-tag[data-show-check-state=true] label:has(input:checked):not([data-show-icon-trailing=false])::after {
+    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
 .db-tag label {
@@ -1474,7 +1506,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inset: 0;
   aspect-ratio: unset;
 }
-.db-tag label input:checked:not([data-hide-icon-before=true])::before {
+.db-tag label input:checked:not([data-show-icon-leading=false])::before {
   content: none;
 }
 .db-tag a {

package/build/components/tag/tag.scss

@@ -147,7 +147,7 @@
 			aspect-ratio: unset;
 
 			&:checked {
-				&:not([data-hide-icon-before="true"]) {
+				&:not([data-show-icon-leading="false"]) {
 					&::before {
 						content: none;
 					}