@db-ux/core-components 4.14.0-shell-52d18db → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @db-ux/core-components
 
+## 5.0.0
+
+We're providing a [migration guide for all 4.x to 5.0.0](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v4.x.x-to-v5.0.0.md) changes.
+
+### Major Changes
+
+- refactor: DBDrawer with breaking changes - [see commit 9189f6c](https://github.com/db-ux-design-system/core-web/commit/9189f6c24cd3a64f072c2f60f8c8127d1ed68c55):
+
+        - The `DBDrawer` component now requires a `DBDrawerHeader` component to be passed in the `header` slot.
+        - The `spacing` property has been removed from `DBDrawer`.
+        - The default `direction` has changed from `right` to `to-left`.
+        - The `width` property has been renamed to `containerSize`.
+        - The `direction` values have been renamed from `right`/`left` to `to-left`/`to-right`.
+
+- refactor: remove default `margin-inline` from `[data-icon]` pseudo-elements in favor of `gap` - [see commit 635f4b7](https://github.com/db-ux-design-system/core-web/commit/635f4b7ff6ce2aa9341932cb0b8a9c8657ed1ade)
+
+- refactor: rework DBTabs and DBTabItem - [see commit c50e522](https://github.com/db-ux-design-system/core-web/commit/c50e5221a4c6f3357ff52451291bdc5772267178):
+
+        - **Breaking:** DBTabItem now renders a native `button` (`role="tab"`) instead of a radio `input`.
+        - **Breaking:** Removed `checked`, `noText` and `name` from DBTabItem.
+        - **Breaking:** Renamed DBTabs props `onTabSelect` → `onIndexChange`, `alignment` → `tabItemAlignment`, `width` → `tabItemWidth`.
+        - **Breaking:** Deep linking derives the tab id from the `id` prop instead of `label`.
+        - Added truncation tooltip for overflowing tab labels and fixed vertical layout, trailing icon and tooltip placement.
+
+### Patch Changes
+
+- fix: remove dead `z-index` and `position: relative` from table-row interactive children - [see commit 7edb77b](https://github.com/db-ux-design-system/core-web/commit/7edb77bb9f90d4a79f238ebab362074d12f02f0f)
+
 ## 4.14.0
 
 ### Minor Changes

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

@@ -69,7 +69,7 @@
 
 - always provide `burgerMenuLabel` attribute for accessibility
 
-## `DBControlPanelNavigationItem` or `db-control-panel-navigation-item`
+## `DBNavigationItem` or `db-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`, `DBControlPanelNavigationItem`, `DBTabItem`, `input`, `select`, `textarea`, etc.) for accessibility
+- must be a child of an interactive element (`button`, `a`, `DBButton`, `DBLink`, `DBNavigationItem`, `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`, `DBControlPanelNavigationItem`, `DBNotification`, `DBAccordionItem`)
+## Content components (`DBButton`, `DBLink`, `DBBadge`, `DBIcon`, `DBInfotext`, `DBNavigationItem`, `DBNotification`, `DBAccordionItem`)
 
 - must have either a `text` property or children content — never leave them empty

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

@@ -84,7 +84,6 @@
 
 .db-accordion-item > details > summary:not([data-show-icon-trailing=false])::after {
   --db-icon-trailing: "chevron_down";
-  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
   content: var(--db-icon-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {

package/build/components/brand/brand.css

@@ -18,7 +18,6 @@
 }
 .db-brand::before {
   --db-icon-font-size: var(--db-sizing-md);
-  --db-icon-margin-end: 0;
   --db-icon-color: var(--db-brand-origin-default);
 }
 .db-brand img {

package/build/components/brand/brand.scss

@@ -13,7 +13,6 @@
 
 	&::before {
 		--db-icon-font-size: #{variables.$db-sizing-md};
-		--db-icon-margin-end: 0;
 		--db-icon-color: #{colors.$db-brand-origin-default};
 	}
 

package/build/components/button/button.css

@@ -89,15 +89,12 @@
   block-size: var(--db-sizing-md);
   font-size: 0 !important;
 }
-.db-button[data-no-text=true]::before {
-  --db-icon-margin-end: 0;
-}
-.db-button[data-no-text=true] {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
 .db-button[data-no-text=true]::before {
   margin: auto;
 }
+.db-button:not([data-no-text=true]) {
+  gap: var(--db-spacing-fixed-xs);
+}
 .db-button[data-wrap=false] {
   white-space: nowrap;
 }
@@ -107,9 +104,7 @@
 }
 .db-button[data-size=small]:not([data-no-text=true]) {
   padding: 1px var(--db-spacing-fixed-sm);
-}
-.db-button[data-size=small]:not([data-no-text=true])::before {
-  margin-inline-end: var(--db-spacing-fixed-2xs);
+  gap: var(--db-spacing-fixed-2xs);
 }
 .db-button[data-size=small][data-no-text=true] {
   inline-size: var(--db-sizing-sm);

package/build/components/checkbox/checkbox.css

@@ -82,7 +82,6 @@
 }
 
 .db-checkbox input:not([data-show-icon-leading=false]):indeterminate::before, .db-checkbox input:not([data-show-icon-leading=false]):checked::before {
-  --db-icon-margin-end: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -394,14 +393,12 @@
 }
 .db-checkbox input:checked:not([data-show-icon-leading=false])::before {
   --db-icon: "check";
-  margin-inline-end: var(--db-icon-margin-end, var(--db-spacing-fixed-xs));
 }
 .db-checkbox input:checked {
   border-width: 0;
 }
 .db-checkbox input:indeterminate:not([data-show-icon-leading=false])::before {
   --db-icon: "minus";
-  margin-inline-end: var(--db-icon-margin-end, var(--db-spacing-fixed-xs));
 }
 @media (forced-colors: active) {
   .db-checkbox input:indeterminate, .db-checkbox input:checked {

package/build/components/checkbox/checkbox.scss

@@ -9,8 +9,6 @@
 %center-icon {
 	&:not([data-show-icon-leading="false"]) {
 		&::before {
-			--db-icon-margin-end: 0;
-
 			display: inline-flex;
 			align-items: center;
 			justify-content: center;

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

@@ -116,15 +116,12 @@
   block-size: var(--db-sizing-md);
   font-size: 0 !important;
 }
-.db-custom-button[data-no-text=true] label::before, .db-custom-button[data-no-text=true] button::before, .db-custom-button[data-no-text=true] a::before {
-  --db-icon-margin-end: 0;
-}
-.db-custom-button[data-no-text=true] label, .db-custom-button[data-no-text=true] button, .db-custom-button[data-no-text=true] a {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
 .db-custom-button[data-no-text=true] label::before, .db-custom-button[data-no-text=true] button::before, .db-custom-button[data-no-text=true] a::before {
   margin: auto;
 }
+.db-custom-button:not([data-no-text=true]) label, .db-custom-button:not([data-no-text=true]) button, .db-custom-button:not([data-no-text=true]) a {
+  gap: var(--db-spacing-fixed-xs);
+}
 .db-custom-button[data-wrap=false] label, .db-custom-button[data-wrap=false] button, .db-custom-button[data-wrap=false] a {
   white-space: nowrap;
 }
@@ -134,9 +131,7 @@
 }
 .db-custom-button[data-size=small] label:not([data-no-text=true]), .db-custom-button[data-size=small] button:not([data-no-text=true]), .db-custom-button[data-size=small] a:not([data-no-text=true]) {
   padding: 1px var(--db-spacing-fixed-sm);
-}
-.db-custom-button[data-size=small] label:not([data-no-text=true])::before, .db-custom-button[data-size=small] button:not([data-no-text=true])::before, .db-custom-button[data-size=small] a:not([data-no-text=true])::before {
-  margin-inline-end: var(--db-spacing-fixed-2xs);
+  gap: var(--db-spacing-fixed-2xs);
 }
 .db-custom-button[data-size=small] label[data-no-text=true], .db-custom-button[data-size=small] button[data-no-text=true], .db-custom-button[data-size=small] a[data-no-text=true] {
   inline-size: var(--db-sizing-sm);
@@ -170,26 +165,26 @@
 .db-custom-button[data-icon-leading]:not([data-show-icon-leading=false]) > * > :is(label, button, a), .db-custom-button[data-icon]:not([data-show-icon=false]) > :is(label, button, a),
 .db-custom-button[data-icon]:not([data-show-icon=false]) > * > :is(label, button, a) {
   /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline-start: var(--db-icon-passing-padding-inline-start, calc(var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) + var(--db-icon-font-size)));
+  padding-inline-start: var(--db-icon-passing-padding-inline-start, calc(var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs) + var(--db-icon-font-size, 1lh)));
 }
 .db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false])::after {
   position: absolute;
-  inset-block-start: calc(50% - 0.5em);
+  inset-block-start: var(--db-icon-passing-inset-block-start, calc(50% - 0.5em));
   inset-inline-end: var(--db-spacing-fixed-sm);
   pointer-events: none;
   z-index: 1;
 }
 .db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false]) > :is(label, button, a),
 .db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false]) > * > :is(label, button, a) {
-  padding-inline-end: calc(var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) + var(--db-icon-font-size));
+  padding-inline-end: calc(var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs) + var(--db-icon-font-size, 1lh));
 }
 .db-custom-button:has(:is(input, button):disabled,
 :is(input, button, a)[aria-disabled=true]) {
   opacity: var(--db-opacity-md);
 }
 .db-custom-button[data-no-text=true] {
-  --db-icon-margin-end: 0;
   --db-icon-passing-inset-inline-start: calc(50% - 0.5em);
+  --db-icon-passing-padding-inline-start: 0;
 }
 .db-custom-button label:has(input:checked) {
   color: var(--db-adaptive-on-bg-inverted-default);

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

@@ -1,6 +1,5 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "@db-ux/core-foundations/build/styles/colors";
-@use "@db-ux/core-foundations/build/styles/icons";
 @use "@db-ux/core-foundations/build/styles/helpers";
 @use "../../styles/internal/button-components";
 @use "../../styles/internal/icon-passing";
@@ -14,7 +13,7 @@
 }
 
 $icon-padding-custom-button: calc(
-	#{variables.$db-spacing-fixed-sm} + #{icons.$default-icon-margin-end} +
+	#{variables.$db-spacing-fixed-sm} + #{variables.$db-spacing-fixed-xs} +
 		var(--db-icon-font-size)
 );
 
@@ -48,8 +47,8 @@ $icon-padding-custom-button: calc(
 	}
 
 	&[data-no-text="true"] {
-		--db-icon-margin-end: 0;
 		--db-icon-passing-inset-inline-start: calc(50% - 0.5em);
+		--db-icon-passing-padding-inline-start: 0;
 	}
 
 	label:has(input:checked) {

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

@@ -554,7 +554,6 @@ input[type=radio]:checked) > label {
 
 .db-custom-select:not([data-show-icon-trailing=false])::after {
   --db-icon-trailing: "chevron_down";
-  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
   content: var(--db-icon-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {

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

@@ -112,10 +112,15 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
   /* jscpd:ignore-end */
 }
 .db-custom-select-list-item > label {
-  --db-icon-margin-start: auto;
   --db-check-element-label-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
   inline-size: 100%;
 }
+.db-custom-select-list-item > label::before {
+  margin-inline-end: var(--db-spacing-fixed-xs);
+}
+.db-custom-select-list-item > label::after {
+  margin-inline-start: auto;
+}
 .db-custom-select-list-item > label .db-custom-select-list-item-label {
   min-inline-size: 0;
   overflow-wrap: anywhere;
@@ -126,7 +131,6 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
 }
 .db-custom-select-list-item > label:has(input[type=radio]) {
   --db-icon-trailing: "none";
-  gap: 0;
 }
 .db-custom-select-list-item > label:has(input[type=radio]:checked) {
   --db-overwrite-cursor: default;

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

@@ -47,11 +47,18 @@ db-custom-select-list-item:not(:last-of-type) {
 	}
 
 	> label {
-		--db-icon-margin-start: auto;
 		--db-check-element-label-color: #{colors.$db-adaptive-on-bg-basic-emphasis-100-default};
 
 		inline-size: 100%;
 
+		&::before {
+			margin-inline-end: variables.$db-spacing-fixed-xs;
+		}
+
+		&::after {
+			margin-inline-start: auto;
+		}
+
 		.db-custom-select-list-item-label {
 			// Long labels wrap onto new lines by default (fixed/full dropdowns).
 			// The auto-width dropdown overrides this to stay single-line
@@ -69,8 +76,6 @@ db-custom-select-list-item:not(:last-of-type) {
 
 		&:has(input[type="radio"]) {
 			--db-icon-trailing: "none";
-
-			gap: 0;
 		}
 
 		&:has(input[type="radio"]:checked) {

package/build/components/drawer/drawer.css

@@ -46,7 +46,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 }
 
 .db-drawer .db-drawer-container:not([data-direction]), .db-drawer .db-drawer-container[data-direction=to-left], .db-drawer .db-drawer-container[data-direction=to-right] {
-  inline-size: calc(100lvw - var(--db-drawer-container-backdrop-spacing, 0px));
+  inline-size: calc(var(--db-drawer-inline-size) - var(--db-drawer-container-backdrop-spacing, 0px));
   min-inline-size: var(--db-drawer-min-width, auto);
   max-inline-size: var(--db-drawer-max-width, var(--db-drawer-max-width-horizontal));
 }
@@ -61,18 +61,20 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 }
 
 .db-drawer .db-drawer-container[data-direction=down], .db-drawer .db-drawer-container[data-direction=up] {
-  block-size: calc(100lvh - var(--db-drawer-container-backdrop-spacing, 0px));
+  block-size: calc(var(--db-drawer-block-size) - var(--db-drawer-container-backdrop-spacing, 0px));
   min-block-size: var(--db-drawer-min-height, auto);
   max-block-size: var(--db-drawer-max-height, var(--db-drawer-max-height-vertical));
 }
 .db-drawer [data-container-size=small].db-drawer-container[data-direction=down], .db-drawer [data-container-size=small].db-drawer-container[data-direction=up] {
-  --db-drawer-max-height-vertical: 33lvh;
+  --db-drawer-max-height-vertical: calc(var(--db-drawer-block-size) / 3);
 }
 .db-drawer [data-container-size=medium].db-drawer-container[data-direction=down], .db-drawer [data-container-size=medium].db-drawer-container[data-direction=up] {
-  --db-drawer-max-height-vertical: 50lvh;
+  --db-drawer-max-height-vertical: calc(var(--db-drawer-block-size) / 2);
 }
 .db-drawer .db-drawer-container[data-direction=down]:not([data-container-size]), .db-drawer .db-drawer-container[data-direction=up]:not([data-container-size]), .db-drawer [data-container-size=large].db-drawer-container[data-direction=down], .db-drawer [data-container-size=large].db-drawer-container[data-direction=up] {
-  --db-drawer-max-height-vertical: 67lvh;
+  --db-drawer-max-height-vertical: calc(
+  	(var(--db-drawer-block-size) / 3) * 2
+  );
 }
 
 .db-drawer .db-drawer-container[data-direction=to-right]:not([data-transition=open]) {
@@ -131,15 +133,15 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 }
 @media (prefers-reduced-motion: no-preference) {
   .db-drawer .db-drawer-container {
-    --db-drawer-close-delay: var(--db-transition-duration-slow);
+    --db-drawer-close-delay: var(--db-transition-duration-extra-slow);
   }
 }
 .db-drawer .db-drawer-container {
   display: grid;
   grid-template-rows: [header] auto [main] 1fr [footer] auto;
   background-color: var(--db-adaptive-bg-basic-level-1-default);
-  inline-size: 100lvw;
-  block-size: 100lvh;
+  inline-size: var(--db-drawer-inline-size);
+  block-size: var(--db-drawer-block-size);
   position: fixed;
   box-shadow: var(--db-elevation-md);
 }
@@ -152,10 +154,10 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   --db-drawer-container-backdrop-spacing: var(--db-sizing-md);
 }
 .db-drawer .db-drawer-container[data-show-spacing=true]:not([data-direction]), .db-drawer .db-drawer-container[data-show-spacing=true][data-direction=to-left] {
-  border-inline-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  border-inline-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
 }
 .db-drawer .db-drawer-container[data-show-spacing=true][data-direction=to-right] {
-  border-inline-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  border-inline-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
 }
 .db-drawer .db-drawer-container[data-show-spacing=true][data-direction=up] {
   border-block-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
@@ -171,17 +173,34 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
     transition: transform var(--db-transition-duration-extra-slow) var(--db-transition-timing-emotional);
   }
 }
+.db-drawer:not([data-position=absolute]) {
+  --db-drawer-inline-size: 100lvw;
+  --db-drawer-block-size: 100lvh;
+}
+.db-drawer:not([data-position=absolute])[open] .db-drawer-container[data-transition=open] {
+  transform: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .db-drawer:not([data-position=absolute])[open] .db-drawer-container[data-transition=close] {
+    transition: transform var(--db-drawer-close-delay) var(--db-transition-timing-emotional);
+  }
+}
 .db-drawer[data-position=absolute] {
+  --db-drawer-inline-size: 100%;
+  --db-drawer-block-size: 100%;
   position: absolute;
   z-index: 3;
   inset: 0;
-  block-size: 100%;
-  inline-size: 100%;
   background-color: transparent;
+  inline-size: var(--db-drawer-inline-size);
+  block-size: var(--db-drawer-block-size);
 }
 .db-drawer[data-position=absolute][open] {
   display: flex;
 }
+.db-drawer[data-position=absolute][open] .db-drawer-container[data-transition=close] {
+  position: relative;
+}
 .db-drawer[data-position=absolute]:not([data-direction]), .db-drawer[data-position=absolute][data-direction=to-right], .db-drawer[data-position=absolute][data-direction=to-left] {
   flex-direction: column;
 }
@@ -191,14 +210,6 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 .db-drawer[data-position=absolute]:not([data-direction]), .db-drawer[data-position=absolute][data-direction=to-left], .db-drawer[data-position=absolute][data-direction=up] {
   align-items: flex-end;
 }
-.db-drawer[data-position=absolute] .db-drawer-container {
+.db-drawer[data-position=absolute] .db-drawer-container[data-transition=open] {
   position: relative;
 }
-.db-drawer[open] .db-drawer-container[data-transition=open] {
-  transform: none;
-}
-@media (prefers-reduced-motion: no-preference) {
-  .db-drawer[open] .db-drawer-container[data-transition=close] {
-    transition: transform var(--db-drawer-close-delay) var(--db-transition-timing-emotional);
-  }
-}

package/build/components/drawer/drawer.scss

@@ -8,7 +8,10 @@
 
 %container-size-horizontal {
 	inline-size: calc(
-		100lvw - var(--db-drawer-container-backdrop-spacing, 0px)
+		var(--db-drawer-inline-size) - var(
+				--db-drawer-container-backdrop-spacing,
+				0px
+			)
 	);
 	min-inline-size: var(--db-drawer-min-width, auto);
 	max-inline-size: var(
@@ -31,7 +34,12 @@
 }
 
 %container-size-vertical {
-	block-size: calc(100lvh - var(--db-drawer-container-backdrop-spacing, 0px));
+	block-size: calc(
+		var(--db-drawer-block-size) - var(
+				--db-drawer-container-backdrop-spacing,
+				0px
+			)
+	);
 	min-block-size: var(--db-drawer-min-height, auto);
 	max-block-size: var(
 		--db-drawer-max-height,
@@ -39,16 +47,18 @@
 	);
 
 	&[data-container-size="small"] {
-		--db-drawer-max-height-vertical: 33lvh;
+		--db-drawer-max-height-vertical: calc(var(--db-drawer-block-size) / 3);
 	}
 
 	&[data-container-size="medium"] {
-		--db-drawer-max-height-vertical: 50lvh;
+		--db-drawer-max-height-vertical: calc(var(--db-drawer-block-size) / 2);
 	}
 
 	&:not([data-container-size]),
 	&[data-container-size="large"] {
-		--db-drawer-max-height-vertical: 67lvh;
+		--db-drawer-max-height-vertical: calc(
+			(var(--db-drawer-block-size) / 3) * 2
+		);
 	}
 }
 
@@ -137,7 +147,7 @@
 		--db-drawer-close-delay: 0;
 
 		@media (prefers-reduced-motion: no-preference) {
-			--db-drawer-close-delay: #{variables.$db-transition-duration-slow};
+			--db-drawer-close-delay: #{variables.$db-transition-duration-extra-slow};
 		}
 
 		display: grid;
@@ -146,8 +156,8 @@
 			[main] 1fr
 			[footer] auto;
 		background-color: colors.$db-adaptive-bg-basic-level-1-default;
-		inline-size: 100lvw;
-		block-size: 100lvh;
+		inline-size: var(--db-drawer-inline-size);
+		block-size: var(--db-drawer-block-size);
 		position: fixed;
 		box-shadow: variables.$db-elevation-md;
 
@@ -167,11 +177,11 @@
 
 			&:not([data-direction]),
 			&[data-direction="to-left"] {
-				border-inline-end: component.$component-border;
+				border-inline-start: component.$component-border;
 			}
 
 			&[data-direction="to-right"] {
-				border-inline-start: component.$component-border;
+				border-inline-end: component.$component-border;
 			}
 
 			&[data-direction="up"] {
@@ -211,16 +221,43 @@
 		}
 	}
 
+	&:not([data-position="absolute"]) {
+		--db-drawer-inline-size: 100lvw;
+		--db-drawer-block-size: 100lvh;
+
+		&[open] {
+			.db-drawer-container {
+				&[data-transition="open"] {
+					transform: none;
+				}
+
+				&[data-transition="close"] {
+					@media (prefers-reduced-motion: no-preference) {
+						transition: transform var(--db-drawer-close-delay)
+							#{variables.$db-transition-timing-emotional};
+					}
+				}
+			}
+		}
+	}
+
 	&[data-position="absolute"] {
+		--db-drawer-inline-size: 100%;
+		--db-drawer-block-size: 100%;
+
 		position: absolute;
 		z-index: 3;
 		inset: 0;
-		block-size: 100%;
-		inline-size: 100%;
 		background-color: transparent;
+		inline-size: var(--db-drawer-inline-size);
+		block-size: var(--db-drawer-block-size);
 
 		&[open] {
 			display: flex;
+
+			.db-drawer-container[data-transition="close"] {
+				position: relative;
+			}
 		}
 
 		&:not([data-direction]),
@@ -240,22 +277,9 @@
 			align-items: flex-end;
 		}
 
-		.db-drawer-container {
-			position: relative;
-		}
-	}
-
-	&[open] {
 		.db-drawer-container {
 			&[data-transition="open"] {
-				transform: none;
-			}
-
-			&[data-transition="close"] {
-				@media (prefers-reduced-motion: no-preference) {
-					transition: transform var(--db-drawer-close-delay)
-						#{variables.$db-transition-timing-emotional};
-				}
+				position: relative;
 			}
 		}
 	}

package/build/components/header/header.css

@@ -320,7 +320,6 @@
 }
 .db-header {
   /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* jscpd:ignore-start */
 }
 .db-header[data-width=small] {
   margin-inline: auto;
@@ -334,9 +333,6 @@
   margin-inline: auto;
   max-inline-size: 90em;
 }
-.db-header {
-  /* jscpd:ignore-end */
-}
 .db-header .db-link:not([hidden]) {
   display: inline-block;
 }
@@ -646,9 +642,6 @@
   overflow-x: hidden;
   padding: var(--db-spacing-fixed-xs) max(var(--db-spacing-fixed-sm), max(env(safe-area-inset-left), env(safe-area-inset-right)));
 }
-.db-header-drawer .db-drawer-content {
-  /* jscpd:ignore-start */
-}
 .db-header-drawer .db-drawer-content .db-header-meta-navigation {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding: var(--db-spacing-fixed-xs) max(var(--db-spacing-fixed-sm), max(env(safe-area-inset-left), env(safe-area-inset-right)));
@@ -680,12 +673,12 @@
   /* stylelint-disable-next-line at-rule-empty-line-before */
   /* jscpd:ignore-end */
 }
-.db-header-drawer .db-drawer-content {
-  /* jscpd:ignore-end */
-}
 .db-header-drawer .db-drawer-footer:has(.db-header-secondary-action:empty) {
   display: none;
 }
+.db-header-drawer:has(.db-drawer-footer:has(.db-header-secondary-action:empty)) .db-drawer-content {
+  margin-block-end: env(safe-area-inset-bottom);
+}
 
 /* Only for Desktop */
 .db-header-meta-navigation:not([hidden]),

package/build/components/header/header.scss

@@ -20,7 +20,6 @@
 		--db-drawer-max-width: #{screen-sizes.$db-breakpoint-sm};
 	}
 
-	/* jscpd:ignore-start */
 	&[data-width="small"] {
 		margin-inline: auto;
 		max-inline-size: screen-sizes.$db-breakpoint-sm;
@@ -36,8 +35,6 @@
 		max-inline-size: screen-sizes.$db-breakpoint-lg;
 	}
 
-	/* jscpd:ignore-end */
-
 	.db-link {
 		@include helpers.display(inline-block);
 	}
@@ -244,7 +241,6 @@
 				component.$drawer-content-padding-inline;
 		}
 
-		/* jscpd:ignore-start */
 		.db-header-meta-navigation {
 			/* stylelint-disable-next-line db-ux/use-spacings */
 			padding: variables.$db-spacing-fixed-xs
@@ -254,13 +250,18 @@
 
 			@include helpers.divider("top");
 		}
-
-		/* jscpd:ignore-end */
 	}
 
 	.db-drawer-footer:has(.db-header-secondary-action:empty) {
 		display: none;
 	}
+
+	// When footer is hidden (empty secondaryAction), content needs safe-area spacing
+	&:has(.db-drawer-footer:has(.db-header-secondary-action:empty)) {
+		.db-drawer-content {
+			margin-block-end: env(safe-area-inset-bottom);
+		}
+	}
 }
 
 /* Only for Desktop */

package/build/components/icon/icon.css

@@ -3,12 +3,6 @@
 /* Variants for adaptive components like input, select, notification, ... */
 .db-icon {
   font-size: 0 !important;
-}
-.db-icon::before {
-  --db-icon-margin-end: 0;
-}
-.db-icon {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
   /* Safari hack */
 }
 @supports (-webkit-hyphens: none) {