@db-ux/core-components 4.12.1 → 4.13.0-shell-f221975

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @db-ux/core-components
 
+## 4.13.0
+
+_version bump_
+
 ## 4.12.1
 
 ### Patch Changes

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));
 }

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;
 }

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;
+	}
+}