npm - @db-ux/core-components - Versions diffs - 4.7.2 → 4.8.0 - Mend

@db-ux/core-components 4.7.2 → 4.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (129) hide show

package/build/components/notification/notification.scss CHANGED Viewed

@@ -13,8 +13,8 @@
 %timestamp-line-height-adjustments {
 	// Adjusts line-height for elements when timestamp is present
-	&:has(span) {
-		header,
+	&:has([data-area="timestamp"]) {
+		[data-area="head"],
 		p,
 		&::before,
 		.db-button {
@@ -59,7 +59,7 @@
 	}
 	// headline
-	header {
+	[data-area="head"] {
 		grid-area: head;
 		&,
@@ -101,7 +101,7 @@
 	}
 	// timestamp
-	span {
+	[data-area="timestamp"] {
 		@extend %db-overwrite-font-size-sm;
 		grid-area: timestamp;
@@ -114,7 +114,7 @@
 	}
 	// Inline links stay within content flow
-	&[data-link-variant="inline"] a {
+	&[data-link-variant="inline"] > :is(a, db-link) {
 		// 1. Assign the link to the "timestamp" area.
 		//    All layouts (overlay and default) must recognize this area.
 		grid-area: timestamp;
@@ -131,15 +131,15 @@
 	// If an inline link is present, it takes precedence over the timestamp
 	// Note: :has() pseudo-class has limited browser support (Firefox < 121)
 	// Progressive enhancement - timestamps gracefully shown in older browsers
-	&[data-link-variant="inline"]:has(a) {
-		> span {
+	&[data-link-variant="inline"]:has(> a, > db-link) {
+		> [data-area="timestamp"] {
 			display: none;
 		}
 	}
 	// Block links get placed in grid area (default behavior)
 	// This applies when linkVariant is "block" or not specified
-	&:not([data-link-variant="inline"]) a {
+	&:not([data-link-variant="inline"]) > :is(a, db-link) {
 		grid-area: link;
 		white-space: nowrap;
 	}
@@ -179,7 +179,7 @@
 	// This applies when linkVariant is "block" (explicit or default when links are present)
 	&:not([data-variant="overlay"]) {
 		&[data-link-variant="block"],
-		&:not([data-link-variant]):has(a) {
+		&:not([data-link-variant]):has(> a, > db-link) {
 			@extend %grid-layout-variant-not-overlay;
 		}
 	}

package/build/components/page/page.css CHANGED Viewed

@@ -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, ... */
 @media screen {
   .db-page-document {

package/build/components/popover/popover.css CHANGED Viewed

@@ -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/radio/radio.css CHANGED Viewed

@@ -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/section/section.css CHANGED Viewed

@@ -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-section:not([data-width]), .db-section[data-width=full] {
   padding-inline: var(--db-spacing-fixed-md);

package/build/components/select/select.css CHANGED Viewed

@@ -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-select[data-hide-label=true] > label, .db-visually-hidden,
 [data-visually-hidden=true] {

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

@@ -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-stack:not([hidden]) {
   display: flex;

package/build/components/stack/stack.css CHANGED Viewed

@@ -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-stack:not([hidden]) {
   display: flex;

package/build/components/switch/switch.css CHANGED Viewed

@@ -1,4 +1,6 @@
 @charset "UTF-8";
+/* 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/tab-item/tab-item.css CHANGED Viewed

@@ -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/tab-list/tab-list.css CHANGED Viewed

@@ -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/tab-panel/tab-panel.css CHANGED Viewed

@@ -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-tab-panel:not([hidden]) {
   display: none;

package/build/components/tabs/tabs.css CHANGED Viewed

@@ -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/tag/tag.css CHANGED Viewed

@@ -19,6 +19,8 @@
     transform: rotate(1turn);
   }
 }
+/* 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-tag:has(label, button:not(.db-tab-remove-button), a)[data-semantic=neutral] {
   --db-adaptive-bg-basic-level-1-default: var(

package/build/components/textarea/textarea.css CHANGED Viewed

@@ -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-textarea[data-variant=floating] > label, .db-textarea textarea {
   font: var(--db-type-body-md);

package/build/components/tooltip/tooltip.css CHANGED Viewed

@@ -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-tooltip {
   font: var(--db-type-body-sm);