@db-ux/core-components 4.9.0-stencil-bundle-ad37ca4 → 4.9.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @db-ux/core-components
 
+## 4.9.1
+
+### Patch Changes
+
+- fix(switch): use `2lh` unit and add `min-inline-size` to prevent track from shrinking - [see commit 78c9fde](https://github.com/db-ux-design-system/core-web/commit/78c9fde67d9677f61eaa41761a088b9c1a9773a1)
+
+- fix(notification): remove empty grid gap when icon is hidden - [see commit 96f94c6](https://github.com/db-ux-design-system/core-web/commit/96f94c651391f014e2d073402c2700b524ccbf5e)
+
+## 4.9.0
+
+_version bump_
+
 ## 4.8.0
 
 ### Minor Changes

package/build/components/header/header.css

@@ -343,13 +343,13 @@
   */
   visibility: hidden;
 }
-.db-header:not(:has(.db-navigation)) .db-header-navigation-container::before, .db-header:has(.db-brand:empty) .db-header-navigation-container::before {
+.db-header:has(.db-header-navigation:empty) .db-header-navigation-container::before, .db-header:has(.db-brand:empty) .db-header-navigation-container::before {
   display: none;
 }
-.db-header:not(:has(.db-navigation)):has(.db-header-secondary-action:empty) .db-header-action-container::before {
+.db-header:has(.db-header-navigation:empty):has(.db-header-meta-navigation:empty):has(.db-header-secondary-action:empty) .db-header-burger-menu-container:not([hidden]) {
   display: none;
 }
-.db-header:not(:has(.db-navigation)):has(.db-header-secondary-action:empty):has(.db-header-meta-navigation:empty) .db-header-burger-menu-container:not([hidden]) {
+.db-header:has(.db-header-navigation:empty):has(.db-header-secondary-action:empty) .db-header-action-container::before {
   display: none;
 }
 

package/build/components/header/header.scss

@@ -48,28 +48,28 @@
 	}
 
 	// All use-cases where we hide the divider
-	&:not(:has(.db-navigation)),
+	&:has(.db-header-navigation:empty),
 	&:has(.db-brand:empty) {
 		.db-header-navigation-container::before {
 			display: none;
 		}
 	}
 
-	&:not(:has(.db-navigation)) {
-		&:has(.db-header-secondary-action:empty) {
-			// Hide the action-area divider only when both navigation and secondary action are missing.
-			// With no navigation but a secondary action, we keep the divider.
-			.db-header-action-container::before {
-				display: none;
-			}
-
-			// Hide the burger ONLY when the drawer would be empty.
-			// This requires: no main navigation AND no meta navigation AND no secondary action.
-			&:has(.db-header-meta-navigation:empty) {
-				.db-header-burger-menu-container {
-					@include helpers.display(none);
-				}
-			}
+	// Hide the burger ONLY when the drawer would be empty.
+	// This requires: no main navigation AND no meta navigation AND no secondary action.
+	&:has(.db-header-navigation:empty):has(
+			.db-header-meta-navigation:empty
+		):has(.db-header-secondary-action:empty) {
+		.db-header-burger-menu-container {
+			@include helpers.display(none);
+		}
+	}
+
+	// Hide the action-area divider only when both navigation and secondary action are missing.
+	// With no navigation but a secondary action, we keep the divider.
+	&:has(.db-header-navigation:empty):has(.db-header-secondary-action:empty) {
+		.db-header-action-container::before {
+			display: none;
 		}
 	}
 }

package/build/components/notification/notification-grid-default.scss

@@ -50,8 +50,8 @@
 	}
 
 	// 3. icon or img
-	&[data-icon],
-	&[data-semantic]:not([data-semantic="adaptive"]),
+	&[data-icon]:not([data-show-icon="false"]),
+	&[data-semantic]:not([data-semantic="adaptive"], [data-show-icon="false"]),
 	&:has(img) {
 		grid-template-areas: "icon content";
 		grid-template-columns: min-content 1fr;

package/build/components/notification/notification.css

@@ -950,35 +950,35 @@
   grid-template-columns: 1fr min-content min-content;
   grid-template-areas: "head timestamp close" "content content .";
 }
-[data-icon].db-notification, [data-semantic].db-notification:not([data-semantic=adaptive]), .db-notification:has(img) {
+[data-icon].db-notification:not([data-show-icon=false]), [data-semantic].db-notification:not([data-semantic=adaptive], [data-show-icon=false]), .db-notification:has(img) {
   grid-template-areas: "icon content";
   grid-template-columns: min-content 1fr;
 }
-[data-icon][data-link-variant=inline].db-notification, [data-semantic].db-notification:not([data-semantic=adaptive])[data-link-variant=inline], .db-notification:has(img)[data-link-variant=inline] {
+[data-icon].db-notification:not([data-show-icon=false])[data-link-variant=inline], [data-semantic].db-notification:not([data-semantic=adaptive], [data-show-icon=false])[data-link-variant=inline], .db-notification:has(img)[data-link-variant=inline] {
   grid-template-columns: min-content 1fr min-content;
   grid-template-areas: "icon content timestamp";
 }
-[data-icon].db-notification:has(.db-button), [data-semantic].db-notification:not([data-semantic=adaptive]):has(.db-button), .db-notification:has(img):has(.db-button) {
+[data-icon].db-notification:not([data-show-icon=false]):has(.db-button), [data-semantic].db-notification:not([data-semantic=adaptive], [data-show-icon=false]):has(.db-button), .db-notification:has(img):has(.db-button) {
   grid-template-columns: min-content 1fr min-content;
   grid-template-areas: "icon content close";
 }
-[data-icon].db-notification:has(.db-button)[data-link-variant=inline], [data-semantic].db-notification:not([data-semantic=adaptive]):has(.db-button)[data-link-variant=inline], .db-notification:has(img):has(.db-button)[data-link-variant=inline] {
+[data-icon].db-notification:not([data-show-icon=false]):has(.db-button)[data-link-variant=inline], [data-semantic].db-notification:not([data-semantic=adaptive], [data-show-icon=false]):has(.db-button)[data-link-variant=inline], .db-notification:has(img):has(.db-button)[data-link-variant=inline] {
   grid-template-columns: min-content 1fr min-content min-content;
   grid-template-areas: "icon content timestamp close";
 }
-[data-icon].db-notification:has(header), [data-semantic].db-notification:not([data-semantic=adaptive]):has(header), .db-notification:has(img):has(header) {
+[data-icon].db-notification:not([data-show-icon=false]):has(header), [data-semantic].db-notification:not([data-semantic=adaptive], [data-show-icon=false]):has(header), .db-notification:has(img):has(header) {
   grid-template-columns: min-content 1fr;
   grid-template-areas: "icon head" "icon content";
 }
-[data-icon].db-notification:has(header)[data-link-variant=inline], [data-semantic].db-notification:not([data-semantic=adaptive]):has(header)[data-link-variant=inline], .db-notification:has(img):has(header)[data-link-variant=inline] {
+[data-icon].db-notification:not([data-show-icon=false]):has(header)[data-link-variant=inline], [data-semantic].db-notification:not([data-semantic=adaptive], [data-show-icon=false]):has(header)[data-link-variant=inline], .db-notification:has(img):has(header)[data-link-variant=inline] {
   grid-template-columns: min-content 1fr min-content;
   grid-template-areas: "icon head timestamp" "icon content content";
 }
-[data-icon].db-notification:has(header):has(.db-button), [data-semantic].db-notification:not([data-semantic=adaptive]):has(header):has(.db-button), .db-notification:has(img):has(header):has(.db-button) {
+[data-icon].db-notification:not([data-show-icon=false]):has(header):has(.db-button), [data-semantic].db-notification:not([data-semantic=adaptive], [data-show-icon=false]):has(header):has(.db-button), .db-notification:has(img):has(header):has(.db-button) {
   grid-template-columns: min-content 1fr min-content;
   grid-template-areas: "icon head close" "icon content content";
 }
-[data-icon].db-notification:has(header):has(.db-button)[data-link-variant=inline], [data-semantic].db-notification:not([data-semantic=adaptive]):has(header):has(.db-button)[data-link-variant=inline], .db-notification:has(img):has(header):has(.db-button)[data-link-variant=inline] {
+[data-icon].db-notification:not([data-show-icon=false]):has(header):has(.db-button)[data-link-variant=inline], [data-semantic].db-notification:not([data-semantic=adaptive], [data-show-icon=false]):has(header):has(.db-button)[data-link-variant=inline], .db-notification:has(img):has(header):has(.db-button)[data-link-variant=inline] {
   grid-template-columns: min-content 1fr min-content min-content;
   grid-template-areas: "icon head timestamp close" "icon content content .";
 }

package/build/components/switch/switch.css

@@ -390,7 +390,8 @@
   --thumb-offset-x: 0.125rem;
   appearance: none;
   margin-inline-end: 0;
-  inline-size: calc(var(--db-icon-font-size) * 2 + 0.125rem);
+  inline-size: calc(2lh + 0.125rem);
+  min-inline-size: calc(2lh + 0.125rem);
   block-size: var(--db-icon-font-size);
   box-sizing: content-box;
 }

package/build/components/switch/switch.scss

@@ -15,6 +15,7 @@ $switch-active-thumb-size: calc(#{form-components.$font-size-height});
 $checked-active-transition-size: calc(
 	#{form-components.$font-size-height} - #{$switch-fixed-padding} * 2
 );
+$switch-inline-size: calc(2lh + #{$switch-fixed-padding});
 
 %active-transition {
 	&::before {
@@ -64,9 +65,8 @@ $checked-active-transition-size: calc(
 
 		appearance: none;
 		margin-inline-end: 0;
-		inline-size: calc(
-			#{form-components.$font-size-height} * 2 + #{$switch-fixed-padding}
-		);
+		inline-size: $switch-inline-size;
+		min-inline-size: $switch-inline-size;
 		block-size: form-components.$font-size-height;
 		box-sizing: content-box;