@db-ux/core-components 4.14.0-shell-52d18db → 5.0.0

package/build/components/infotext/infotext.css

@@ -58,9 +58,6 @@
   }
 }
 
-.db-infotext {
-  --db-icon-margin-end: 0;
-}
 .db-infotext:not([hidden]) {
   display: flex;
 }
@@ -76,7 +73,6 @@
 }
 .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));
 }
 .db-infotext[data-semantic=adaptive], .db-infotext:not([data-semantic]) {
   color: var(--db-adaptive-on-bg-basic-emphasis-80-default);

package/build/components/infotext/infotext.scss

@@ -6,8 +6,6 @@
 @use "@db-ux/core-foundations/build/styles/icons";
 
 .db-infotext {
-	--db-icon-margin-end: 0;
-
 	@extend %db-overwrite-font-size-sm;
 	@include helpers.display(flex);
 

package/build/components/input/input.css

@@ -404,7 +404,6 @@ input[type=radio]:checked) > label {
 
 .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-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {
@@ -815,11 +814,9 @@ input[type=time]) {
 }
 .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-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-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {
@@ -850,7 +847,6 @@ input:focus-visible)::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-icon-trailing: "calendar";
-    margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
     content: var(--db-icon-trailing, attr(data-icon-trailing));
   }
   @supports (content: ""/"") {
@@ -860,7 +856,6 @@ input:focus-visible)::after {
   }
   .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-trailing, attr(data-icon-trailing));
   }
   @supports (content: ""/"") {

package/build/components/link/link.css

@@ -82,10 +82,7 @@
 }
 
 .db-link a:not([hidden]), .db-link:not([hidden]) {
-  display: inline-flex;
-}
-.db-link a, .db-link {
-  align-items: center;
+  display: inline-block;
 }
 .db-link a:not([data-wrap=true]):not([hidden]), .db-link:not([data-wrap=true]):not([hidden]) {
   display: inline-flex;
@@ -134,12 +131,10 @@
 }
 
 .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-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {
@@ -149,7 +144,6 @@
 }
 .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-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {
@@ -157,6 +151,9 @@
     content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
+.db-link::after {
+  margin-inline-start: var(--db-spacing-fixed-2xs);
+}
 .db-link[data-variant=brand] {
   color: var(--db-brand-on-bg-basic-emphasis-80-default);
 }
@@ -171,6 +168,6 @@
   cursor: var(--db-overwrite-cursor, pointer);
   color: var(--db-brand-on-bg-basic-emphasis-80-pressed);
 }
-.db-link[data-size=small] {
-  --db-icon-margin-start: var(--db-spacing-fixed-3xs);
+.db-link[data-size=small]::after {
+  margin-inline-start: var(--db-spacing-fixed-3xs);
 }

package/build/components/link/link.scss

@@ -8,7 +8,6 @@
 @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;
@@ -31,6 +30,10 @@
 		}
 	}
 
+	&::after {
+		margin-inline-start: variables.$db-spacing-fixed-2xs;
+	}
+
 	// We couldn't extend any existing SCSS placeholders, as this is a special construct
 	&[data-variant="brand"] {
 		color: colors.$db-brand-on-bg-basic-emphasis-80-default;
@@ -47,8 +50,10 @@
 	}
 
 	&[data-size="small"] {
-		--db-icon-margin-start: #{variables.$db-spacing-fixed-3xs};
-
 		@extend %db-overwrite-font-size-sm;
+
+		&::after {
+			margin-inline-start: variables.$db-spacing-fixed-3xs;
+		}
 	}
 }

package/build/components/navigation/navigation.css

@@ -115,7 +115,6 @@
   .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button)[data-force-mobile=false]::after,
   .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-trailing: "chevron_down";
   }
 }
@@ -156,7 +155,7 @@
   .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-trailing: "chevron_right";
-    --db-icon-margin-start: auto;
+    margin-inline-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,
   .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button):not([data-force-mobile]) :has(~ .db-sub-navigation:is(:hover,

package/build/components/navigation/navigation.scss

@@ -33,7 +33,6 @@
 				// overwrite for navigation items
 				@include screen-sizes.screen("md") {
 					&::after {
-						--db-icon-margin-start: #{variables.$db-spacing-fixed-sm};
 						--db-icon-trailing: "chevron_down";
 
 						@media (prefers-reduced-motion: no-preference) {
@@ -63,7 +62,8 @@
 					@include screen-sizes.screen("md") {
 						&::after {
 							--db-icon-trailing: "chevron_right";
-							--db-icon-margin-start: auto;
+
+							margin-inline-start: auto;
 						}
 
 						&:is(:hover, :focus-visible),

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

@@ -119,6 +119,7 @@
   text-align: center;
   align-items: center;
   justify-content: space-between;
+  gap: var(--db-spacing-fixed-sm);
 }
 .db-navigation-item .db-navigation-item-expand-button:not([hidden]):is(button),
 .db-navigation-item .db-navigation-item-expand-button > button:not([hidden]), .db-navigation-item a:not([hidden]) {
@@ -157,7 +158,7 @@
 .db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) > * > :is(label, button, a), .db-navigation-item[data-icon]:not([data-show-icon=false]) > :is(label, button, a),
 .db-navigation-item[data-icon]:not([data-show-icon=false]) > * > :is(label, button, a) {
   /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline-start: var(--db-icon-passing-padding-inline-start, calc(var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) + var(--db-icon-font-size)));
+  padding-inline-start: var(--db-icon-passing-padding-inline-start, calc(var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs) + var(--db-icon-font-size, 1lh)));
 }
 .db-navigation-item:not([hidden]) {
   display: inline-flex;
@@ -174,7 +175,7 @@
   inline-size: 100%;
 }
 .db-navigation-item[data-force-mobile=true]:not([data-width=full]) .db-navigation-item-expand-button::after {
-  --db-icon-margin-start: auto;
+  margin-inline-start: auto;
 }
 .db-navigation-item {
   /* stylelint-disable-next-line media-query-no-invalid */
@@ -184,7 +185,7 @@
     inline-size: 100%;
   }
   .db-navigation-item:not([data-width=full]) .db-navigation-item-expand-button::after {
-    --db-icon-margin-start: auto;
+    margin-inline-start: auto;
   }
 }
 .db-navigation-item a {
@@ -251,7 +252,6 @@
 .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-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {
@@ -260,31 +260,20 @@
     content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
-.db-navigation-item {
-  /* jscpd:ignore-start */
-}
 .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) {
   font-weight: 700;
 }
-.db-navigation-item:not([data-width=full]) .db-navigation-item-expand-button::after {
-  --db-icon-margin-start: var(--db-spacing-fixed-sm);
-}
-.db-navigation-item {
-  /* jscpd:ignore-end */
-}
 .db-navigation-item[data-width=full] {
   inline-size: 100%;
 }
 .db-navigation-item[data-width=full] .db-navigation-item-expand-button::after {
-  --db-icon-margin-start: auto;
+  margin-inline-start: auto;
 }
 .db-navigation-item[aria-disabled=true] {
   opacity: var(--db-opacity-md);
   pointer-events: none;
 }
 
-/* jscpd:ignore-start */
-/* jscpd:ignore-end */
 .db-sub-navigation {
   margin: 0;
 }
@@ -352,9 +341,6 @@
   .db-sub-navigation:not([data-force-mobile])[data-force-close=true], .db-sub-navigation[data-force-mobile=false][data-force-close=true] {
     pointer-events: none;
   }
-  .db-sub-navigation:not([data-force-mobile]), .db-sub-navigation[data-force-mobile=false] {
-    /* jscpd:ignore-start */
-  }
   .db-sub-navigation:not([data-force-mobile])::before, .db-sub-navigation[data-force-mobile=false]::before {
     content: "";
     position: absolute;
@@ -363,9 +349,6 @@
     block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-md));
     inset-block-start: calc(-1 * var(--db-spacing-fixed-md) - var(--db-spacing-fixed-3xs));
   }
-  .db-sub-navigation:not([data-force-mobile]), .db-sub-navigation[data-force-mobile=false] {
-    /* jscpd:ignore-end */
-  }
   .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation, .db-sub-navigation[data-force-mobile=false] .db-sub-navigation {
     inset-block-start: calc(-50% + var(--db-spacing-fixed-xs) + 1px);
     inset-inline-start: calc(100% + var(--db-spacing-fixed-xs));
@@ -385,9 +368,6 @@
     inset-block: auto 0;
     transform: translateX(100%) scaleX(-1);
   }
-  .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation, .db-sub-navigation[data-force-mobile=false] .db-sub-navigation {
-    /* jscpd:ignore-start */
-  }
   .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation::before, .db-sub-navigation[data-force-mobile=false] .db-sub-navigation::before {
     content: "";
     position: absolute;
@@ -409,9 +389,6 @@
     block-size: 100%;
     inline-size: var(--db-spacing-fixed-xs);
   }
-  .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation, .db-sub-navigation[data-force-mobile=false] .db-sub-navigation {
-    /* jscpd:ignore-end */
-  }
 }
 .db-sub-navigation {
   /* stylelint-disable-next-line at-rule-empty-line-before */

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

@@ -71,6 +71,7 @@
 	text-align: center;
 	align-items: center; // Centering the content vertically and horizontally
 	justify-content: space-between;
+	gap: variables.$db-spacing-fixed-sm;
 
 	@include helpers.display(inline-flex);
 	@include helpers.interactive-bg(
@@ -106,7 +107,7 @@
 
 			.db-navigation-item-expand-button {
 				&::after {
-					--db-icon-margin-start: auto;
+					margin-inline-start: auto;
 				}
 			}
 		}
@@ -140,7 +141,6 @@
 		}
 	}
 
-	/* jscpd:ignore-start */
 	&:has([aria-current="page"]),
 	&:has([data-active="true"]),
 	&[aria-current="page"],
@@ -150,22 +150,12 @@
 		}
 	}
 
-	&:not([data-width="full"]) {
-		.db-navigation-item-expand-button {
-			&::after {
-				--db-icon-margin-start: #{variables.$db-spacing-fixed-sm};
-			}
-		}
-	}
-
-	/* jscpd:ignore-end */
-
 	&[data-width="full"] {
 		inline-size: 100%;
 
 		.db-navigation-item-expand-button {
 			&::after {
-				--db-icon-margin-start: auto;
+				margin-inline-start: auto;
 			}
 		}
 	}
@@ -176,8 +166,7 @@
 	}
 }
 
-/* jscpd:ignore-start */
-@mixin sub-navigation-item-mobile() {
+@mixin sub-navigation-mobile() {
 	padding: variables.$db-spacing-fixed-xs
 		component.$drawer-content-padding-inline;
 	inline-size: 100%;
@@ -196,8 +185,6 @@
 		);
 }
 
-/* jscpd:ignore-end */
-
 .db-sub-navigation {
 	@extend %component-border;
 
@@ -211,7 +198,7 @@
 	visibility: hidden;
 
 	@include screen-sizes.screen("md", "max") {
-		@include sub-navigation-item-mobile;
+		@include sub-navigation-mobile;
 	}
 
 	@include screen-sizes.screen("md") {
@@ -242,7 +229,6 @@
 			pointer-events: none;
 		}
 
-		/* jscpd:ignore-start */
 		&::before {
 			content: "";
 			position: absolute;
@@ -260,8 +246,6 @@
 			);
 		}
 
-		/* jscpd:ignore-end */
-
 		.db-sub-navigation {
 			// 1px for box shadow
 			inset-block-start: calc(
@@ -294,7 +278,6 @@
 				}
 			}
 
-			/* jscpd:ignore-start */
 			&::before {
 				content: "";
 				position: absolute;
@@ -322,8 +305,6 @@
 				block-size: 100%;
 				inline-size: variables.$db-spacing-fixed-xs;
 			}
-
-			/* jscpd:ignore-end */
 		}
 	}
 

package/build/components/notification/notification.css

@@ -841,10 +841,7 @@
   }
 }
 .db-notification a:not([hidden]) {
-  display: inline-flex;
-}
-.db-notification a {
-  align-items: center;
+  display: inline-block;
 }
 .db-notification a:not([data-wrap=true]):not([hidden]) {
   display: inline-flex;
@@ -1192,7 +1189,6 @@
   white-space: nowrap;
 }
 .db-notification[data-icon]::before, .db-notification::before {
-  --db-icon-margin-end: 0;
   --db-icon-font-family: var(
   	--db-icon-filled-font-family,
   	"db-ux-filled",

package/build/components/notification/notification.scss

@@ -147,8 +147,6 @@
 	// Icon grid positioning
 	&[data-icon]::before,
 	&::before {
-		--db-icon-margin-end: 0;
-
 		@include icons.to-filled-icon;
 
 		grid-area: icon;

package/build/components/page/page.css

@@ -8,14 +8,6 @@
   }
 }
 
-/* stylelint-disable selector-max-id */
-body:has(.db-page),
-#root:has(.db-page),
-#app:has(.db-page) {
-  block-size: inherit;
-}
-
-/* stylelint-enable selector-max-id */
 @media screen {
   .db-page {
     opacity: 0;

package/build/components/page/page.scss

@@ -18,14 +18,6 @@
 	}
 }
 
-/* stylelint-disable selector-max-id */
-body:has(.db-page),
-#root:has(.db-page),
-#app:has(.db-page) {
-	block-size: inherit;
-}
-/* stylelint-enable selector-max-id */
-
 .db-page {
 	@media screen {
 		opacity: 0;

package/build/components/select/select.css

@@ -404,7 +404,6 @@ input[type=radio]:checked) > label {
 
 .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-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {

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

@@ -1,7 +1,6 @@
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 /* Variants for adaptive components like input, select, notification, ... */
-/* Sub components for shell */
 .db-stack:not([hidden]) {
   display: flex;
 }

package/build/components/stack/stack.css

@@ -1,7 +1,6 @@
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 /* Variants for adaptive components like input, select, notification, ... */
-/* Sub components for shell */
 .db-stack:not([hidden]) {
   display: flex;
 }

package/build/components/switch/switch.css

@@ -383,7 +383,6 @@
   );
 }
 .db-switch input {
-  --db-icon-margin-start: 0;
   --thumb-offset-x: 0.125rem;
   appearance: none;
   margin-inline-end: 0;
@@ -403,7 +402,6 @@
 }
 .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-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {
@@ -495,7 +493,6 @@
 }
 .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-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {

package/build/components/switch/switch.scss

@@ -61,7 +61,6 @@ $switch-inline-size: calc(2lh + #{$switch-fixed-padding});
 	// jscpd:ignore-end
 
 	input {
-		--db-icon-margin-start: 0;
 		--thumb-offset-x: #{$switch-fixed-padding};
 
 		@extend %db-overwrite-font-size-sm;