@db-ux/core-components 4.13.1-angular-signal-forms13-577b861 → 4.14.0-shell-52d18db

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @db-ux/core-components
 
+## 4.14.0
+
+### Minor Changes
+
+- refactor: consolidate floating component listeners into shared abstractions - [see commit de676fe](https://github.com/db-ux-design-system/core-web/commit/de676fe17e8a8157acd2e574fcea28ab6022389c)
+
+### Patch Changes
+
+- fix: correct accordion variant backgrounds to match design (divider is transparent, card is level-1 including the open content area) - [see commit b611b84](https://github.com/db-ux-design-system/core-web/commit/b611b845e6aded8f50dd07f3727ebf5fdf902b69)
+
+- fix: use inline-flex with align-items center for link components to vertically center text with fixed height across densities - [see commit 5ebdef8](https://github.com/db-ux-design-system/core-web/commit/5ebdef89b14d56d901630aa61e098213704ba603)
+
 ## 4.13.0
 
 _version bump_

package/agent/Best-Practise_Common-AI-Mistakes.md

@@ -69,7 +69,7 @@
 
 - always provide `burgerMenuLabel` attribute for accessibility
 
-## `DBNavigationItem` or `db-navigation-item`
+## `DBControlPanelNavigationItem` or `db-control-panel-navigation-item`
 
 - always provide `backButtonText` attribute for accessibility
 - must have children content (text or child elements)
@@ -81,7 +81,7 @@
 ## `DBTooltip` or `db-tooltip`
 
 - must not contain interactive elements (buttons, links, inputs, etc.) — use `DBPopover` for interactive content
-- must be a child of an interactive element (`button`, `a`, `DBButton`, `DBLink`, `DBNavigationItem`, `DBTabItem`, `input`, `select`, `textarea`, etc.) for accessibility
+- must be a child of an interactive element (`button`, `a`, `DBButton`, `DBLink`, `DBControlPanelNavigationItem`, `DBTabItem`, `input`, `select`, `textarea`, etc.) for accessibility
 
 ## `DBIcon` or `db-icon`
 
@@ -92,6 +92,6 @@
 - always provide a `label` attribute for accessibility (for `DBCheckbox`, `DBRadio`, `DBSwitch` children text content also counts as label)
 - when using validation attributes (`required`, `minLength`, `maxLength`, `min`, `max`, `pattern`), always provide an `invalidMessage` attribute for better UX (exception: `DBRadio` with `required` does not need `invalidMessage`)
 
-## Content components (`DBButton`, `DBLink`, `DBBadge`, `DBIcon`, `DBInfotext`, `DBNavigationItem`, `DBNotification`, `DBAccordionItem`)
+## Content components (`DBButton`, `DBLink`, `DBBadge`, `DBIcon`, `DBInfotext`, `DBControlPanelNavigationItem`, `DBNotification`, `DBAccordionItem`)
 
 - must have either a `text` property or children content — never leave them empty

package/build/components/accordion/accordion.css

@@ -32,21 +32,28 @@ The spacings are not part of the styling of the accordion items themselves.
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-start: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-accordion[data-variant=divider] db-accordion-item + db-accordion-item .db-accordion-item,
-  .db-accordion[data-variant=divider] .db-accordion-item + .db-accordion-item, .db-accordion:not([data-variant]) db-accordion-item + db-accordion-item .db-accordion-item,
-  .db-accordion:not([data-variant]) .db-accordion-item + .db-accordion-item {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-accordion[data-variant=divider] db-accordion-item + db-accordion-item .db-accordion-item::before,
+  .db-accordion[data-variant=divider] .db-accordion-item + .db-accordion-item::before, .db-accordion:not([data-variant]) db-accordion-item + db-accordion-item .db-accordion-item::before,
+  .db-accordion:not([data-variant]) .db-accordion-item + .db-accordion-item::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 .db-accordion[data-variant=divider] db-accordion-item + db-accordion-item .db-accordion-item::before,
 .db-accordion[data-variant=divider] .db-accordion-item + .db-accordion-item::before, .db-accordion:not([data-variant]) db-accordion-item + db-accordion-item .db-accordion-item::before,
+.db-accordion:not([data-variant]) .db-accordion-item + .db-accordion-item::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
+.db-accordion[data-variant=divider] db-accordion-item + db-accordion-item .db-accordion-item::before,
+.db-accordion[data-variant=divider] .db-accordion-item + .db-accordion-item::before, .db-accordion:not([data-variant]) db-accordion-item + db-accordion-item .db-accordion-item::before,
 .db-accordion:not([data-variant]) .db-accordion-item + .db-accordion-item::before {
   inset-block-start: calc(-1 * var(--db-spacing-fixed-sm));
 }
@@ -54,6 +61,26 @@ The spacings are not part of the styling of the accordion items themselves.
 .db-accordion[data-variant=card] .db-accordion-item + .db-accordion-item {
   margin-block-start: var(--db-spacing-fixed-sm);
 }
+.db-accordion[data-variant=card] .db-accordion-item {
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+}
+.db-accordion[data-variant=card] .db-accordion-item > details > summary:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-accordion[data-variant=card] .db-accordion-item > details > summary:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-level-1-hovered);
+}
+.db-accordion[data-variant=card] .db-accordion-item > details > summary:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-level-1-pressed);
+}
+.db-accordion[data-variant=card] .db-accordion-item:has(> details[aria-disabled=true]) {
+  opacity: var(--db-opacity-md);
+}
+.db-accordion[data-variant=card] .db-accordion-item:has(> details[aria-disabled=true]) > details[aria-disabled=true] {
+  opacity: 1;
+}
 .db-accordion[data-variant=card] .db-accordion-item {
   /*
   Adding the component-border to the item itself leads to a render error (tested in Chrome and Safari):

package/build/components/accordion/accordion.scss

@@ -1,5 +1,6 @@
 @use "@db-ux/core-foundations/build/styles/helpers";
 @use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
 @use "../../styles/internal/component";
 
 @mixin accordion-subsequent-item-selector() {
@@ -40,6 +41,30 @@ The spacings are not part of the styling of the accordion items themselves.
 		}
 
 		.db-accordion-item {
+			// The whole card (summary + expanded content) is filled with a
+			// level-1 background, so an open item stays level-1 throughout.
+			background-color: colors.$db-adaptive-bg-basic-level-1-default;
+
+			> details > summary {
+				@include helpers.interactive-bg(
+					colors.$db-adaptive-bg-basic-level-1-hovered,
+					colors.$db-adaptive-bg-basic-level-1-pressed
+				);
+			}
+
+			// A disabled card must dim as a whole. The base disabled opacity
+			// sits on the inner `<details>` (see accordion-item.scss), which
+			// would leave the level-1 fill and border on the item fully
+			// opaque. Mirror the disabled state on the item and reset the
+			// inner one so the opacity does not stack.
+			&:has(> details[aria-disabled="true"]) {
+				opacity: variables.$db-opacity-md;
+
+				> details[aria-disabled="true"] {
+					opacity: 1;
+				}
+			}
+
 			/*
 			Adding the component-border to the item itself leads to a render error (tested in Chrome and Safari):
 			On mouseover, a small white gap appears between the rounded border and the rounded gray area.

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

@@ -1,18 +1,13 @@
 .db-visually-hidden,
 [data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }
@@ -136,7 +131,7 @@
   padding-block-end: var(--db-spacing-fixed-lg);
 }
 .db-accordion-item > details > summary {
-  background-color: var(--db-adaptive-bg-basic-level-1-default);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
   list-style: none;
 }
 .db-accordion-item > details > summary:not([hidden]) {
@@ -153,11 +148,11 @@
 }
 .db-accordion-item > details > summary:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
   cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-level-1-hovered);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
 .db-accordion-item > details > summary:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
   cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-level-1-pressed);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
 .db-accordion-item > details > summary::-webkit-details-marker {
   display: none;

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

@@ -47,7 +47,9 @@
 			@extend %dropdown-icon;
 			@extend %db-overwrite-font-size-md;
 
-			background-color: colors.$db-adaptive-bg-basic-level-1-default;
+			// Default (divider) variant: the summary blends into the page.
+			// The "card" variant overrides this with a level-1 fill in accordion.scss.
+			background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
 			list-style: none;
 
 			@include helpers.display(flex);
@@ -58,8 +60,8 @@
 			border-radius: variables.$db-border-radius-sm;
 
 			@include helpers.interactive-bg(
-				colors.$db-adaptive-bg-basic-level-1-hovered,
-				colors.$db-adaptive-bg-basic-level-1-pressed
+				colors.$db-adaptive-bg-basic-transparent-full-hovered,
+				colors.$db-adaptive-bg-basic-transparent-full-pressed
 			);
 
 			&::-webkit-details-marker {

package/build/components/badge/badge.css

@@ -245,5 +245,5 @@
 }
 
 [data-has-badge=true] {
-  position: relative;
+  position: var(--db-has-badge-position, relative);
 }

package/build/components/badge/badge.scss

@@ -116,5 +116,5 @@
 // Global styles
 
 [data-has-badge="true"] {
-	position: relative;
+	position: var(--db-has-badge-position, relative);
 }

package/build/components/button/button.css

@@ -135,11 +135,3 @@
 .db-button:is(:disabled, [aria-disabled=true]) {
   opacity: var(--db-opacity-md);
 }
-.db-button:has(> .db-button) {
-  margin: 0;
-  padding: 0;
-  block-size: var(--db-sizing-md);
-}
-.db-button:has(> .db-button)::before {
-  content: none;
-}

package/build/components/button/button.scss

@@ -8,15 +8,4 @@
 	&:is(:disabled, [aria-disabled="true"]) {
 		opacity: variables.$db-opacity-md;
 	}
-
-	// Workaround for current stencil implementation for header
-	&:has(> .db-button) {
-		margin: 0;
-		padding: 0;
-		block-size: variables.$db-sizing-md;
-
-		&::before {
-			content: none;
-		}
-	}
 }

package/build/components/checkbox/checkbox.css

@@ -1,18 +1,13 @@
 .db-visually-hidden,
 [data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }

package/build/components/control-panel-brand/control-panel-brand.css

@@ -0,0 +1,53 @@
+/* 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-control-panel-brand a {
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+}
+
+.db-control-panel-brand {
+  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-control-panel-desktop-brand-container {
+  display: flex;
+  grid-area: brand;
+}
+
+.db-control-panel-brand:not([hidden]) {
+  display: flex;
+}
+.db-control-panel-brand {
+  align-items: center;
+  block-size: var(--db-sizing-md);
+  min-block-size: var(--db-sizing-md);
+  inline-size: fit-content;
+  gap: var(--db-spacing-fixed-sm);
+  position: relative;
+  grid-area: brand;
+}
+.db-control-panel-brand::before {
+  content: "";
+}
+@supports (content: ""/"") {
+  .db-control-panel-brand::before {
+    content: ""/"";
+  }
+}
+.db-control-panel-brand::before {
+  block-size: 1lh;
+  aspect-ratio: var(--db-logo-aspect-ratio, 1);
+  background-image: var(--db-logo-url);
+  background-repeat: no-repeat;
+  background-size: auto var(--db-sizing-sm);
+}
+.db-control-panel-brand a {
+  text-decoration: none;
+  position: absolute;
+  inset: 0;
+}

package/build/components/control-panel-brand/control-panel-brand.scss

@@ -0,0 +1,48 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/fonts";
+@use "@db-ux/core-foundations/build/styles/helpers";
+
+.db-control-panel-desktop-brand-container {
+	display: flex;
+	grid-area: brand;
+}
+
+.db-control-panel-brand {
+	@extend %db-overwrite-font-size-md;
+	@include helpers.display(flex);
+
+	align-items: center;
+	block-size: variables.$db-sizing-md;
+	min-block-size: variables.$db-sizing-md;
+	inline-size: fit-content;
+	gap: variables.$db-spacing-fixed-sm;
+	position: relative;
+	grid-area: brand;
+
+	// The brand logo depends on the theme package (e.g. @db-ux/db-theme)
+	// providing --db-logo-url and --db-logo-aspect-ratio CSS custom properties.
+	// Without a theme, the logo will not be visible.
+	&::before {
+		content: "";
+
+		@supports (content: ""/"") {
+			content: "" / "";
+		}
+
+		block-size: 1lh;
+		aspect-ratio: var(--db-logo-aspect-ratio, 1);
+		background-image: var(--db-logo-url);
+		background-repeat: no-repeat;
+		background-size: auto #{variables.$db-sizing-sm};
+	}
+
+	// Deactivate underline on site name being made clickable by added to the link as well
+	a {
+		text-decoration: none;
+		position: absolute;
+		inset: 0;
+
+		@extend %a11y-visually-hidden-text;
+	}
+}