@db-ux/core-components 4.7.2 → 4.8.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @db-ux/core-components
 
+## 4.8.0
+
+### Minor Changes
+
+- Notification content now supports additional inline elements like `span` without styling collisions. And added the possibility to set the duration as a machine-readable value via the new `timestampDatetime` property - [see commit dae5149](https://github.com/db-ux-design-system/core-web/commit/dae514902f92a74cb95a3a3adab205d560174692)
+
+## 4.7.3
+
+_version bump_
+
 ## 4.7.2
 
 ### Patch Changes
@@ -45,7 +55,7 @@
 - docs(vite): mentioning version 8 configuration in `README.md` file - [see commit 4c5fc92](https://github.com/db-ux-design-system/core-web/commit/4c5fc9266402d9585087f4738a1a800cff1515f1)
 
 - fix(number input): prevent from clearing on intermediate decimal entry - [see commit aa85967](https://github.com/db-ux-design-system/core-web/commit/aa85967ffeaa685f6b647069d0e1d415d812dc87):
-  - fix(input,textarea): allow using `undefined` as `value`
+    - fix(input,textarea): allow using `undefined` as `value`
 
 ## 4.5.4
 
@@ -186,14 +196,14 @@ _version bump_
 - refactor(notification): update and simplify grid layout for block link variant - [see commit cb83f96](https://github.com/db-ux-design-system/core-web/commit/cb83f966eaf29c85b4cf0079750bdd563f216d6e)
 
 - fix(DBCustomSelect): properly announce selected options - [see commit 773edeb](https://github.com/db-ux-design-system/core-web/commit/773edeb943a085eb79e1c8d59059137b2830fbf0):
-  - feat(DBCustomSelect): introduce new property `selectedPrefix`
+    - feat(DBCustomSelect): introduce new property `selectedPrefix`
 
 ### Patch Changes
 
 - fix(DBCustomSelect): automatically handle form reset events - [see commit 6af5246](https://github.com/db-ux-design-system/core-web/commit/6af5246b3b2e6febdc6ff6342ba1a8eb10184d14):
-  - An event listener is now added for every form component (input, custom-select, etc.) when a `form` property is passed.
-  - This listener detects form resets and updates the component's internal value/checked state accordingly.
-  - > **Note**: This does not work for `ngModel` in Angular.
+    - An event listener is now added for every form component (input, custom-select, etc.) when a `form` property is passed.
+    - This listener detects form resets and updates the component's internal value/checked state accordingly.
+    - > **Note**: This does not work for `ngModel` in Angular.
 
 - fix(button): Replace fixed height with min-height for buttons to allow dynamic height adjustment when text wraps - [see commit d1fd2c4](https://github.com/db-ux-design-system/core-web/commit/d1fd2c4e58a5ed6f75fab44700cd2d93c7232474)
 
@@ -216,7 +226,7 @@ _version bump_
 ### Patch Changes
 
 - chore: update instructions files for better copilot outputs - [see commit e4bc905](https://github.com/db-ux-design-system/core-web/commit/e4bc90508479387371d816d5776f9f568aa5fb82):
-  - fix: add some missing variables
+    - fix: add some missing variables
 
 - fix(card): Remove the obsolete but harmful declaration regarding wrapping button and link styles. - [see commit 34c78df](https://github.com/db-ux-design-system/core-web/commit/34c78dffd4f43b0ac740574358b426a562e05cd0)
 
@@ -231,9 +241,9 @@ _version bump_
 ### Major Changes
 
 - feat: Switch stable rework - [see commit cb2deb0](https://github.com/db-ux-design-system/core-web/commit/cb2deb0f1c54900d1967483aea05d81279c02f59):
-  - **BREAKING CHANGE**: remove `emphasis` property
-  - introduce validation (invalid and valid)
-  - configurable label position
+    - **BREAKING CHANGE**: remove `emphasis` property
+    - introduce validation (invalid and valid)
+    - configurable label position
 
 - **BREAKING CHANGE**: refactor(Custom Select): renamed `ariaListLabel` property to `listLabel` - [see commit 966d5ad](https://github.com/db-ux-design-system/core-web/commit/966d5ad01f00d0ca1707cc316a63e2d431fff1e9)
 
@@ -252,12 +262,12 @@ _version bump_
 ### Patch Changes
 
 - fix(DBTabs): ensure navigation arrows appear correctly on window resize - [see commit 4e65e00](https://github.com/db-ux-design-system/core-web/commit/4e65e00d280cae18baee03b5a7a9b13eec063835):
-  - This update resolves an issue where navigation arrows in DBTabs would not appear or update correctly when the window was resized. The component now properly responds to resize events, ensuring arrows are always shown or hidden as needed.
+    - This update resolves an issue where navigation arrows in DBTabs would not appear or update correctly when the window was resized. The component now properly responds to resize events, ensuring arrows are always shown or hidden as needed.
 
 - fix(select): jumping placeholder for label above - [see commit 7ed8d22](https://github.com/db-ux-design-system/core-web/commit/7ed8d2225102e0e9044437e95917e11eef4bc73f)
 
 - enabled [`@db-ux/agent-cli`](https://www.npmjs.com/package/@db-ux/agent-cli) for every package - [see commit 0233048](https://github.com/db-ux-design-system/core-web/commit/023304869e61f5a506dca66a22d69e5f3d70f4d0):
-  - auto-generate/auto-update `.github/copilot-instructions.md`, to ensure GitHub Copilot uses DB UX Components for code generation
+    - auto-generate/auto-update `.github/copilot-instructions.md`, to ensure GitHub Copilot uses DB UX Components for code generation
 
 ## 3.1.17
 
@@ -265,17 +275,17 @@ _version bump_
 
 - fix: color mode for textarea resizer control set by color-mode-switch documentation UI component - [see commit 354e270](https://github.com/db-ux-design-system/core-web/commit/354e27029a4378288a97ed5e31b75c11758f0c01)
 - refactor: enabling `hidden` HTML attribute in every context in which we need to set overwriting styling declarations (`display`) - [see commit 4826455](https://github.com/db-ux-design-system/core-web/commit/4826455637590b6ae780afb93abb9effe9380342)
-  - @db-ux/core-foundations@3.1.17
+    - @db-ux/core-foundations@3.1.17
 
 ## 3.1.16
 
 ### Patch Changes
 
 - a28eb71: fix(custom-select): keyboard navigation for option groups in single-select mode - [see commit 6d60bab](https://github.com/db-ux-design-system/core-web/commit/6d60bab2eb87f16a9ffa942085bffd658564769c):
-  - Fixes a keyboard accessibility issue where users could not navigate to options in subsequent option groups using arrow keys in single-select mode.
-  - Now, all options are accessible via keyboard regardless of group boundaries.
+    - Fixes a keyboard accessibility issue where users could not navigate to options in subsequent option groups using arrow keys in single-select mode.
+    - Now, all options are accessible via keyboard regardless of group boundaries.
 - fix: JS framework core-components packages are missing `@db-ux` dependencies - [see commit 49df866](https://github.com/db-ux-design-system/core-web/commit/49df866e753a9459f5acdca4ad1e19141b477471)
-  - @db-ux/core-foundations@3.1.16
+    - @db-ux/core-foundations@3.1.16
 
 ## 3.1.15
 
@@ -284,4 +294,4 @@ _version bump_
 - 262964b: fix(Switch): double event firing with Angular signals
 - 262964b: fix(CustomSelect): tags remaining visible when form values are reset
 - 262964b: fix(CustomSelect): custom removeTagsTexts are not applied correctly
-  - @db-ux/core-foundations@3.1.15
+    - @db-ux/core-foundations@3.1.15

package/build/components/accordion/accordion.css

@@ -1,3 +1,5 @@
+/* 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, ... */
 .db-accordion[data-variant=card] .db-accordion-item::after {
   border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);

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

@@ -17,6 +17,8 @@
   pointer-events: none !important;
 }
 
+/* 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, ... */
 @keyframes popover-animation {
   0% {

package/build/components/badge/badge.css

@@ -1,3 +1,5 @@
+/* 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, ... */
 .db-badge[data-size=medium], .db-badge[data-size=medium] > *,
 .db-badge[data-size=medium] .db-icon {

package/build/components/brand/brand.css

@@ -1,3 +1,5 @@
+/* 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, ... */
 .db-brand {
   font: var(--db-type-body-md);

package/build/components/button/button.css

@@ -1,3 +1,5 @@
+/* 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, ... */
 .db-button {
   font: var(--db-type-body-md);

package/build/components/card/card.css

@@ -1,3 +1,5 @@
+/* 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, ... */
 .db-card {
   border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);

package/build/components/checkbox/checkbox.css

@@ -17,6 +17,8 @@
   pointer-events: none !important;
 }
 
+/* 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, ... */
 .db-checkbox input:checked:not([data-show-icon-leading=false])::before, .db-checkbox input:indeterminate:not([data-show-icon-leading=false])::before {
   color: var(--db-icon-color, inherit);

package/build/components/custom-button/custom-button.css

@@ -1,3 +1,5 @@
+/* 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, ... */
 .db-custom-button input {
   clip: rect(0, 0, 0, 0) !important;

package/build/components/custom-select/custom-select.css

@@ -1,3 +1,5 @@
+/* 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, ... */
 .db-custom-select[data-hide-label=true] > label, .db-visually-hidden,
 [data-visually-hidden=true] {

package/build/components/custom-select-dropdown/custom-select-dropdown.css

@@ -1,3 +1,5 @@
+/* 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, ... */
 .db-visually-hidden,
 [data-visually-hidden=true] {

package/build/components/custom-select-form-field/custom-select-form-field.css

@@ -17,6 +17,8 @@
   pointer-events: none !important;
 }
 
+/* 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, ... */
 .db-custom-select-form-field:is(summary) {
   list-style: none;

package/build/components/custom-select-list/custom-select-list.css

@@ -17,6 +17,8 @@
   pointer-events: none !important;
 }
 
+/* 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, ... */
 .db-custom-select-list {
   all: unset;

package/build/components/custom-select-list-item/custom-select-list-item.css

@@ -1,3 +1,5 @@
+/* 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, ... */
 .db-visually-hidden,
 [data-visually-hidden=true] {

package/build/components/divider/divider.css

@@ -1,3 +1,5 @@
+/* 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, ... */
 .db-divider:is(:not([data-margin]), [data-margin=small]) {
   margin: var(--db-spacing-fixed-sm) 0;

package/build/components/drawer/drawer.css

@@ -1,3 +1,5 @@
+/* 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, ... */
 @keyframes popover-animation {
   0% {

package/build/components/header/header.css

@@ -1,3 +1,5 @@
+/* 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, ... */
 .db-header-meta-navigation {
   font: var(--db-type-body-md);

package/build/components/icon/icon.css

@@ -1,3 +1,5 @@
+/* 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, ... */
 .db-icon {
   font-size: 0 !important;

package/build/components/infotext/infotext.css

@@ -1,3 +1,5 @@
+/* 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, ... */
 .db-infotext {
   font: var(--db-type-body-sm);

package/build/components/input/input.css

@@ -17,6 +17,8 @@
   pointer-events: none !important;
 }
 
+/* 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, ... */
 .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid), .db-input:has(input[data-custom-validity=invalid]), .db-input[data-custom-validity=invalid] {
   --db-adaptive-bg-basic-level-1-default: var(

package/build/components/link/link.css

@@ -1,3 +1,5 @@
+/* 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, ... */
 .db-link {
   font: var(--db-type-body-md);

package/build/components/navigation/navigation.css

@@ -17,6 +17,8 @@
   pointer-events: none !important;
 }
 
+/* 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, ... */
 .db-navigation > menu .db-navigation-item::after {
   content: "";

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

@@ -1,3 +1,5 @@
+/* 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, ... */
 .db-navigation-item, .db-navigation-item a, .db-navigation-item .db-navigation-item-expand-button:is(button),
 .db-navigation-item .db-navigation-item-expand-button > button {

package/build/components/notification/notification-grid-non-overlay.scss

@@ -66,7 +66,7 @@
 
 %grid-layout-variant-not-overlay {
 	// Hide timestamp for non-overlay variants only
-	span {
+	[data-area="timestamp"] {
 		display: none;
 	}
 

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

@@ -145,12 +145,12 @@
 	@include overlay-timestamp-area-layouts;
 
 	// 2. Override: When explicitly "block" link variant with timestamp
-	&:has(span)[data-link-variant="block"] {
+	&:has([data-area="timestamp"])[data-link-variant="block"] {
 		@include overlay-block-layouts;
 	}
 
 	// 3. Override: When "block" link variant WITHOUT timestamp
-	&:not(:has(span))[data-link-variant="block"] {
+	&:not(:has([data-area="timestamp"]))[data-link-variant="block"] {
 		@include overlay-block-layouts-without-timestamp;
 	}
 }

package/build/components/notification/notification.css

@@ -1,3 +1,5 @@
+/* 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, ... */
 .db-notification[data-semantic=neutral] {
   --db-adaptive-bg-basic-level-1-default: var(
@@ -749,14 +751,14 @@
   );
 }
 
-.db-notification a[data-size=small], .db-notification > [data-area=content], .db-notification[data-link-variant=inline] a {
+.db-notification a[data-size=small], .db-notification > [data-area=content], .db-notification[data-link-variant=inline] > :is(a, db-link) {
   font: var(--db-type-body-md);
   /* Those variables are only for components to calculate heights and change icons */
   --db-icon-font-weight: var(--db-base-body-icon-weight-md);
   --db-icon-font-size: var(--db-base-body-icon-font-size-md);
 }
 
-.db-notification span {
+.db-notification [data-area=timestamp] {
   font: var(--db-type-body-sm);
   /* Those variables are only for components to calculate heights and change icons */
   --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
@@ -1016,122 +1018,122 @@
   grid-template-areas: "icon head timestamp close" "icon content content content";
   grid-template-columns: min-content 1fr min-content min-content;
 }
-.db-notification[data-variant=overlay]:has(span)[data-link-variant=block] {
+.db-notification[data-variant=overlay]:has([data-area=timestamp])[data-link-variant=block] {
   grid-template-areas: "content timestamp" "link link";
   grid-template-columns: 1fr min-content;
 }
-.db-notification[data-variant=overlay]:has(span)[data-link-variant=block]:has(.db-button) {
+.db-notification[data-variant=overlay]:has([data-area=timestamp])[data-link-variant=block]:has(.db-button) {
   grid-template-areas: "content timestamp close" "link link link";
   grid-template-columns: 1fr min-content min-content;
 }
-.db-notification[data-variant=overlay]:has(span)[data-link-variant=block]:has(header) {
+.db-notification[data-variant=overlay]:has([data-area=timestamp])[data-link-variant=block]:has(header) {
   grid-template-areas: "head timestamp" "content content" "link link";
   grid-template-columns: 1fr min-content;
 }
-.db-notification[data-variant=overlay]:has(span)[data-link-variant=block]:has(header):has(.db-button) {
+.db-notification[data-variant=overlay]:has([data-area=timestamp])[data-link-variant=block]:has(header):has(.db-button) {
   grid-template-areas: "head timestamp close" "content content content" "link link link";
   grid-template-columns: 1fr min-content min-content;
 }
-.db-notification[data-variant=overlay]:has(span)[data-link-variant=block][data-icon]:not([data-show-icon=false]), .db-notification[data-variant=overlay]:has(span)[data-link-variant=block][data-semantic]:not([data-semantic=adaptive], [data-show-icon=false]), .db-notification[data-variant=overlay]:has(span)[data-link-variant=block]:has(img) {
+.db-notification[data-variant=overlay]:has([data-area=timestamp])[data-link-variant=block][data-icon]:not([data-show-icon=false]), .db-notification[data-variant=overlay]:has([data-area=timestamp])[data-link-variant=block][data-semantic]:not([data-semantic=adaptive], [data-show-icon=false]), .db-notification[data-variant=overlay]:has([data-area=timestamp])[data-link-variant=block]:has(img) {
   grid-template-areas: "icon content timestamp" "icon link link";
   grid-template-columns: min-content 1fr min-content;
 }
-.db-notification[data-variant=overlay]:has(span)[data-link-variant=block][data-icon]:not([data-show-icon=false]):has(.db-button), .db-notification[data-variant=overlay]:has(span)[data-link-variant=block][data-semantic]:not([data-semantic=adaptive],
-[data-show-icon=false]):has(.db-button), .db-notification[data-variant=overlay]:has(span)[data-link-variant=block]:has(img):has(.db-button) {
+.db-notification[data-variant=overlay]:has([data-area=timestamp])[data-link-variant=block][data-icon]:not([data-show-icon=false]):has(.db-button), .db-notification[data-variant=overlay]:has([data-area=timestamp])[data-link-variant=block][data-semantic]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(.db-button), .db-notification[data-variant=overlay]:has([data-area=timestamp])[data-link-variant=block]:has(img):has(.db-button) {
   grid-template-areas: "icon content timestamp close" "icon link link link";
   grid-template-columns: min-content 1fr min-content min-content;
 }
-.db-notification[data-variant=overlay]:has(span)[data-link-variant=block][data-icon]:not([data-show-icon=false]):has(header), .db-notification[data-variant=overlay]:has(span)[data-link-variant=block][data-semantic]:not([data-semantic=adaptive],
-[data-show-icon=false]):has(header), .db-notification[data-variant=overlay]:has(span)[data-link-variant=block]:has(img):has(header) {
+.db-notification[data-variant=overlay]:has([data-area=timestamp])[data-link-variant=block][data-icon]:not([data-show-icon=false]):has(header), .db-notification[data-variant=overlay]:has([data-area=timestamp])[data-link-variant=block][data-semantic]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(header), .db-notification[data-variant=overlay]:has([data-area=timestamp])[data-link-variant=block]:has(img):has(header) {
   grid-template-areas: "icon head timestamp" "icon content content" "icon link link";
   grid-template-columns: min-content 1fr min-content;
 }
-.db-notification[data-variant=overlay]:has(span)[data-link-variant=block][data-icon]:not([data-show-icon=false]):has(header):has(.db-button), .db-notification[data-variant=overlay]:has(span)[data-link-variant=block][data-semantic]:not([data-semantic=adaptive],
-[data-show-icon=false]):has(header):has(.db-button), .db-notification[data-variant=overlay]:has(span)[data-link-variant=block]:has(img):has(header):has(.db-button) {
+.db-notification[data-variant=overlay]:has([data-area=timestamp])[data-link-variant=block][data-icon]:not([data-show-icon=false]):has(header):has(.db-button), .db-notification[data-variant=overlay]:has([data-area=timestamp])[data-link-variant=block][data-semantic]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(header):has(.db-button), .db-notification[data-variant=overlay]:has([data-area=timestamp])[data-link-variant=block]:has(img):has(header):has(.db-button) {
   grid-template-areas: "icon head timestamp close" "icon content content content" "icon link link link";
   grid-template-columns: min-content 1fr min-content min-content;
 }
-.db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block] {
+.db-notification[data-variant=overlay]:not(:has([data-area=timestamp]))[data-link-variant=block] {
   grid-template-areas: "content" "link";
   grid-template-columns: 1fr;
 }
-.db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block]:has(.db-button) {
+.db-notification[data-variant=overlay]:not(:has([data-area=timestamp]))[data-link-variant=block]:has(.db-button) {
   grid-template-areas: "content close" "link link";
   grid-template-columns: 1fr min-content;
 }
-.db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block]:has(header) {
+.db-notification[data-variant=overlay]:not(:has([data-area=timestamp]))[data-link-variant=block]:has(header) {
   grid-template-areas: "head" "content" "link";
   grid-template-columns: 1fr;
 }
-.db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block]:has(header):has(.db-button) {
+.db-notification[data-variant=overlay]:not(:has([data-area=timestamp]))[data-link-variant=block]:has(header):has(.db-button) {
   grid-template-areas: "head close" "content content" "link link";
   grid-template-columns: 1fr min-content;
 }
-.db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block][data-icon]:not([data-show-icon=false]), .db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block][data-semantic]:not([data-semantic=adaptive], [data-show-icon=false]), .db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block]:has(img) {
+.db-notification[data-variant=overlay]:not(:has([data-area=timestamp]))[data-link-variant=block][data-icon]:not([data-show-icon=false]), .db-notification[data-variant=overlay]:not(:has([data-area=timestamp]))[data-link-variant=block][data-semantic]:not([data-semantic=adaptive], [data-show-icon=false]), .db-notification[data-variant=overlay]:not(:has([data-area=timestamp]))[data-link-variant=block]:has(img) {
   grid-template-areas: "icon content" "icon link";
   grid-template-columns: min-content 1fr;
 }
-.db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block][data-icon]:not([data-show-icon=false]):has(.db-button), .db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block][data-semantic]:not([data-semantic=adaptive],
-[data-show-icon=false]):has(.db-button), .db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block]:has(img):has(.db-button) {
+.db-notification[data-variant=overlay]:not(:has([data-area=timestamp]))[data-link-variant=block][data-icon]:not([data-show-icon=false]):has(.db-button), .db-notification[data-variant=overlay]:not(:has([data-area=timestamp]))[data-link-variant=block][data-semantic]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(.db-button), .db-notification[data-variant=overlay]:not(:has([data-area=timestamp]))[data-link-variant=block]:has(img):has(.db-button) {
   grid-template-areas: "icon content close" "icon link link";
   grid-template-columns: min-content 1fr min-content;
 }
-.db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block][data-icon]:not([data-show-icon=false]):has(header), .db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block][data-semantic]:not([data-semantic=adaptive],
-[data-show-icon=false]):has(header), .db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block]:has(img):has(header) {
+.db-notification[data-variant=overlay]:not(:has([data-area=timestamp]))[data-link-variant=block][data-icon]:not([data-show-icon=false]):has(header), .db-notification[data-variant=overlay]:not(:has([data-area=timestamp]))[data-link-variant=block][data-semantic]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(header), .db-notification[data-variant=overlay]:not(:has([data-area=timestamp]))[data-link-variant=block]:has(img):has(header) {
   grid-template-areas: "icon head" "icon content" "icon link";
   grid-template-columns: min-content 1fr;
 }
-.db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block][data-icon]:not([data-show-icon=false]):has(header):has(.db-button), .db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block][data-semantic]:not([data-semantic=adaptive],
-[data-show-icon=false]):has(header):has(.db-button), .db-notification[data-variant=overlay]:not(:has(span))[data-link-variant=block]:has(img):has(header):has(.db-button) {
+.db-notification[data-variant=overlay]:not(:has([data-area=timestamp]))[data-link-variant=block][data-icon]:not([data-show-icon=false]):has(header):has(.db-button), .db-notification[data-variant=overlay]:not(:has([data-area=timestamp]))[data-link-variant=block][data-semantic]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(header):has(.db-button), .db-notification[data-variant=overlay]:not(:has([data-area=timestamp]))[data-link-variant=block]:has(img):has(header):has(.db-button) {
   grid-template-areas: "icon head close" "icon content content" "icon link link";
   grid-template-columns: min-content 1fr min-content;
 }
 
-.db-notification:not([data-variant=overlay])[data-link-variant=block] span, .db-notification:not([data-variant=overlay]):not([data-link-variant]):has(a) span {
+.db-notification:not([data-variant=overlay])[data-link-variant=block] [data-area=timestamp], .db-notification:not([data-variant=overlay]):not([data-link-variant]):has(> a, > db-link) [data-area=timestamp] {
   display: none;
 }
-[data-link-variant=block].db-notification:not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):not([data-variant=overlay]) {
+[data-link-variant=block].db-notification:not([data-variant=overlay]), [data-link-variant=block].db-notification:not([data-variant=overlay]):not([data-link-variant]):has(> a, > db-link), .db-notification:not([data-link-variant]):has(a):not([data-variant=overlay]):has(> a, > db-link) {
   grid-template-areas: "content" "link";
   grid-template-columns: 1fr;
 }
-[data-link-variant=block].db-notification:has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):has(.db-button):not([data-variant=overlay]) {
+[data-link-variant=block].db-notification:has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):has(.db-button):not([data-variant=overlay]):has(> a, > db-link) {
   grid-template-areas: "content close" "link link";
   grid-template-columns: 1fr min-content;
 }
-[data-link-variant=block].db-notification:has(header):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):has(header):not([data-variant=overlay]) {
+[data-link-variant=block].db-notification:has(header):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):has(header):not([data-variant=overlay]):has(> a, > db-link) {
   grid-template-areas: "head" "content" "link";
   grid-template-columns: 1fr;
 }
-[data-link-variant=block].db-notification:has(header):has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):has(header):has(.db-button):not([data-variant=overlay]) {
+[data-link-variant=block].db-notification:has(header):has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):has(header):has(.db-button):not([data-variant=overlay]):has(> a, > db-link) {
   grid-template-areas: "head close" "content content" "link link";
   grid-template-columns: 1fr min-content;
 }
-[data-link-variant=block][data-icon].db-notification:not([data-show-icon=false]):not([data-variant=overlay]), [data-link-variant=block][data-semantic].db-notification:not([data-semantic=adaptive], [data-show-icon=false]):not([data-variant=overlay]), [data-link-variant=block].db-notification:has(img):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-icon]:not([data-show-icon=false]):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-semantic]:not([data-semantic=adaptive], [data-show-icon=false]):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):has(img):not([data-variant=overlay]) {
+[data-link-variant=block][data-icon].db-notification:not([data-show-icon=false]):not([data-variant=overlay]), [data-link-variant=block][data-semantic].db-notification:not([data-semantic=adaptive], [data-show-icon=false]):not([data-variant=overlay]), [data-link-variant=block].db-notification:has(img):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-icon]:not([data-show-icon=false]):not([data-variant=overlay]):has(> a, > db-link), .db-notification:not([data-link-variant]):has(a)[data-semantic]:not([data-semantic=adaptive], [data-show-icon=false]):not([data-variant=overlay]):has(> a, > db-link), .db-notification:not([data-link-variant]):has(a):has(img):not([data-variant=overlay]):has(> a, > db-link) {
   grid-template-areas: "icon content" "icon link";
   grid-template-columns: min-content 1fr;
 }
 [data-link-variant=block][data-icon].db-notification:not([data-show-icon=false]):has(.db-button):not([data-variant=overlay]), [data-link-variant=block][data-semantic].db-notification:not([data-semantic=adaptive],
-[data-show-icon=false]):has(.db-button):not([data-variant=overlay]), [data-link-variant=block].db-notification:has(img):has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-icon]:not([data-show-icon=false]):has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-semantic]:not([data-semantic=adaptive],
-[data-show-icon=false]):has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):has(img):has(.db-button):not([data-variant=overlay]) {
+[data-show-icon=false]):has(.db-button):not([data-variant=overlay]), [data-link-variant=block].db-notification:has(img):has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-icon]:not([data-show-icon=false]):has(.db-button):not([data-variant=overlay]):has(> a, > db-link), .db-notification:not([data-link-variant]):has(a)[data-semantic]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(.db-button):not([data-variant=overlay]):has(> a, > db-link), .db-notification:not([data-link-variant]):has(a):has(img):has(.db-button):not([data-variant=overlay]):has(> a, > db-link) {
   grid-template-areas: "icon content close" "icon link link";
   grid-template-columns: min-content 1fr min-content;
 }
 [data-link-variant=block][data-icon].db-notification:not([data-show-icon=false]):has(header):not([data-variant=overlay]), [data-link-variant=block][data-semantic].db-notification:not([data-semantic=adaptive],
-[data-show-icon=false]):has(header):not([data-variant=overlay]), [data-link-variant=block].db-notification:has(img):has(header):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-icon]:not([data-show-icon=false]):has(header):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-semantic]:not([data-semantic=adaptive],
-[data-show-icon=false]):has(header):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):has(img):has(header):not([data-variant=overlay]) {
+[data-show-icon=false]):has(header):not([data-variant=overlay]), [data-link-variant=block].db-notification:has(img):has(header):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-icon]:not([data-show-icon=false]):has(header):not([data-variant=overlay]):has(> a, > db-link), .db-notification:not([data-link-variant]):has(a)[data-semantic]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(header):not([data-variant=overlay]):has(> a, > db-link), .db-notification:not([data-link-variant]):has(a):has(img):has(header):not([data-variant=overlay]):has(> a, > db-link) {
   grid-template-areas: "icon head" "icon content" "icon link";
   grid-template-columns: min-content 1fr;
 }
 [data-link-variant=block][data-icon].db-notification:not([data-show-icon=false]):has(header):has(.db-button):not([data-variant=overlay]), [data-link-variant=block][data-semantic].db-notification:not([data-semantic=adaptive],
-[data-show-icon=false]):has(header):has(.db-button):not([data-variant=overlay]), [data-link-variant=block].db-notification:has(img):has(header):has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-icon]:not([data-show-icon=false]):has(header):has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-semantic]:not([data-semantic=adaptive],
-[data-show-icon=false]):has(header):has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a):has(img):has(header):has(.db-button):not([data-variant=overlay]) {
+[data-show-icon=false]):has(header):has(.db-button):not([data-variant=overlay]), [data-link-variant=block].db-notification:has(img):has(header):has(.db-button):not([data-variant=overlay]), .db-notification:not([data-link-variant]):has(a)[data-icon]:not([data-show-icon=false]):has(header):has(.db-button):not([data-variant=overlay]):has(> a, > db-link), .db-notification:not([data-link-variant]):has(a)[data-semantic]:not([data-semantic=adaptive],
+[data-show-icon=false]):has(header):has(.db-button):not([data-variant=overlay]):has(> a, > db-link), .db-notification:not([data-link-variant]):has(a):has(img):has(header):has(.db-button):not([data-variant=overlay]):has(> a, > db-link) {
   grid-template-areas: "icon head close" "icon content content" "icon link link";
   grid-template-columns: min-content 1fr min-content;
 }
 
-.db-notification:has(span) header,
-.db-notification:has(span) p, .db-notification:has(span)::before,
-.db-notification:has(span) .db-button {
+.db-notification:has([data-area=timestamp]) [data-area=head],
+.db-notification:has([data-area=timestamp]) p, .db-notification:has([data-area=timestamp])::before,
+.db-notification:has([data-area=timestamp]) .db-button {
   /* stylelint-disable-next-line db-ux/use-spacings */
   margin-block-start: -2px;
 }
@@ -1152,33 +1154,33 @@
   content: none !important;
   margin: 0 !important;
 }
-.db-notification header {
+.db-notification [data-area=head] {
   grid-area: head;
 }
-.db-notification header,
-.db-notification header h1,
-.db-notification header h2,
-.db-notification header h3,
-.db-notification header h4,
-.db-notification header h5,
-.db-notification header h6 {
+.db-notification [data-area=head],
+.db-notification [data-area=head] h1,
+.db-notification [data-area=head] h2,
+.db-notification [data-area=head] h3,
+.db-notification [data-area=head] h4,
+.db-notification [data-area=head] h5,
+.db-notification [data-area=head] h6 {
   margin: 0;
   font: var(--db-type-body-md);
   font-weight: 700;
 }
-.db-notification header::before, .db-notification header::after,
-.db-notification header h1::before,
-.db-notification header h1::after,
-.db-notification header h2::before,
-.db-notification header h2::after,
-.db-notification header h3::before,
-.db-notification header h3::after,
-.db-notification header h4::before,
-.db-notification header h4::after,
-.db-notification header h5::before,
-.db-notification header h5::after,
-.db-notification header h6::before,
-.db-notification header h6::after {
+.db-notification [data-area=head]::before, .db-notification [data-area=head]::after,
+.db-notification [data-area=head] h1::before,
+.db-notification [data-area=head] h1::after,
+.db-notification [data-area=head] h2::before,
+.db-notification [data-area=head] h2::after,
+.db-notification [data-area=head] h3::before,
+.db-notification [data-area=head] h3::after,
+.db-notification [data-area=head] h4::before,
+.db-notification [data-area=head] h4::after,
+.db-notification [data-area=head] h5::before,
+.db-notification [data-area=head] h5::after,
+.db-notification [data-area=head] h6::before,
+.db-notification [data-area=head] h6::after {
   --db-icon-font-size: var(--db-base-body-icon-font-size-md);
   --db-icon-font-weight: var(--db-base-body-icon-weight-md);
 }
@@ -1195,7 +1197,7 @@
   object-fit: cover;
   grid-area: icon;
 }
-.db-notification span {
+.db-notification [data-area=timestamp] {
   grid-area: timestamp;
   white-space: nowrap;
   justify-self: end;
@@ -1203,15 +1205,15 @@
 .db-notification .db-button {
   grid-area: close;
 }
-.db-notification[data-link-variant=inline] a {
+.db-notification[data-link-variant=inline] > :is(a, db-link) {
   grid-area: timestamp;
   white-space: nowrap;
   justify-self: end;
 }
-.db-notification[data-link-variant=inline]:has(a) > span {
+.db-notification[data-link-variant=inline]:has(> a, > db-link) > [data-area=timestamp] {
   display: none;
 }
-.db-notification:not([data-link-variant=inline]) a {
+.db-notification:not([data-link-variant=inline]) > :is(a, db-link) {
   grid-area: link;
   white-space: nowrap;
 }