@db-ux/core-components 4.14.0 → 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/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

@@ -45,34 +45,64 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-sm));
 }
 
-.db-drawer .db-drawer-container:not([data-direction]), .db-drawer .db-drawer-container[data-direction=right] {
-  transform: translateX(110%);
-  inset-inline: auto 0;
+.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(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));
 }
-.db-drawer [data-rounded=true].db-drawer-container:not([data-direction]), .db-drawer [data-rounded=true].db-drawer-container[data-direction=right] {
-  border-start-start-radius: var(--db-border-radius-sm);
-  border-end-start-radius: var(--db-border-radius-sm);
+.db-drawer .db-drawer-container:not([data-container-size]):not([data-direction]), .db-drawer .db-drawer-container[data-direction=to-left]:not([data-container-size]), .db-drawer .db-drawer-container[data-direction=to-right]:not([data-container-size]), .db-drawer [data-container-size=small].db-drawer-container:not([data-direction]), .db-drawer [data-container-size=small].db-drawer-container[data-direction=to-left], .db-drawer [data-container-size=small].db-drawer-container[data-direction=to-right] {
+  --db-drawer-max-width-horizontal: var(--db-container-xs);
+}
+.db-drawer [data-container-size=medium].db-drawer-container:not([data-direction]), .db-drawer [data-container-size=medium].db-drawer-container[data-direction=to-left], .db-drawer [data-container-size=medium].db-drawer-container[data-direction=to-right] {
+  --db-drawer-max-width-horizontal: var(--db-container-lg);
+}
+.db-drawer [data-container-size=large].db-drawer-container:not([data-direction]), .db-drawer [data-container-size=large].db-drawer-container[data-direction=to-left], .db-drawer [data-container-size=large].db-drawer-container[data-direction=to-right] {
+  --db-drawer-max-width-horizontal: var(--db-container-3xl);
+}
+
+.db-drawer .db-drawer-container[data-direction=down], .db-drawer .db-drawer-container[data-direction=up] {
+  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: 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: 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: calc(
+  	(var(--db-drawer-block-size) / 3) * 2
+  );
 }
 
-.db-drawer .db-drawer-container[data-direction=left] {
+.db-drawer .db-drawer-container[data-direction=to-right]:not([data-transition=open]) {
   transform: translateX(-110%);
+}
+.db-drawer .db-drawer-container[data-direction=to-right] {
   inset-inline: 0 auto;
 }
-.db-drawer [data-rounded=true].db-drawer-container[data-direction=left] {
+.db-drawer [data-rounded=true].db-drawer-container[data-direction=to-right] {
   border-start-end-radius: var(--db-border-radius-sm);
   border-end-end-radius: var(--db-border-radius-sm);
 }
 
-.db-drawer .db-drawer-container[data-direction=down]:not([data-width=full]), .db-drawer .db-drawer-container[data-direction=up]:not([data-width=full]) {
-  /* stylelint-disable-next-line db-ux/use-sizing */
-  max-block-size: var(--db-drawer-max-height, calc(100% - var(--db-spacing-fixed-xl)));
-  /* stylelint-disable-next-line db-ux/use-sizing */
-  min-block-size: var(--db-drawer-min-height, auto);
-  max-inline-size: none;
+.db-drawer .db-drawer-container:not([data-transition=open]):not([data-direction]), .db-drawer .db-drawer-container[data-direction=to-left]:not([data-transition=open]) {
+  transform: translateX(110%);
+}
+.db-drawer .db-drawer-container:not([data-direction]), .db-drawer .db-drawer-container[data-direction=to-left] {
+  inset-inline: auto 0;
+}
+.db-drawer [data-rounded=true].db-drawer-container:not([data-direction]), .db-drawer [data-rounded=true].db-drawer-container[data-direction=to-left] {
+  border-start-start-radius: var(--db-border-radius-sm);
+  border-end-start-radius: var(--db-border-radius-sm);
 }
 
-.db-drawer .db-drawer-container[data-direction=up] {
+.db-drawer .db-drawer-container[data-direction=up]:not([data-transition=open]) {
   transform: translateY(110%);
+}
+.db-drawer .db-drawer-container[data-direction=up] {
   inset: auto 0 0;
 }
 .db-drawer [data-rounded=true].db-drawer-container[data-direction=up] {
@@ -80,8 +110,10 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   border-start-start-radius: var(--db-border-radius-sm);
 }
 
-.db-drawer .db-drawer-container[data-direction=down] {
+.db-drawer .db-drawer-container[data-direction=down]:not([data-transition=open]) {
   transform: translateY(-110%);
+}
+.db-drawer .db-drawer-container[data-direction=down] {
   inset: 0 0 auto;
 }
 .db-drawer [data-rounded=true].db-drawer-container[data-direction=down] {
@@ -89,117 +121,48 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   border-end-start-radius: var(--db-border-radius-sm);
 }
 
-.db-drawer [data-spacing=small].db-drawer-container {
-  /* stylelint-disable-next-line block-no-redundant-nested-style-rules */
-}
-.db-drawer [data-spacing=small].db-drawer-container {
-  padding-block: var(--db-spacing-fixed-xs);
+.db-drawer .db-drawer-container:not(:has(.db-drawer-footer)) > .db-drawer-content {
+  margin-block-end: env(safe-area-inset-bottom);
 }
-.db-drawer [data-spacing=small].db-drawer-container .db-drawer-header {
-  /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-block-end: var(--db-drawer-header-padding-block-end, var(--db-spacing-fixed-xs));
-  padding-inline: var(--db-spacing-fixed-md);
-}
-.db-drawer [data-spacing=small].db-drawer-container .db-drawer-content {
-  /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-md));
-  overflow-y: auto;
-  overflow-block: auto;
-}
-.db-drawer .db-drawer-container {
-  /* stylelint-disable-next-line block-no-redundant-nested-style-rules */
+.db-drawer .db-drawer-container:has(.db-drawer-footer) .db-drawer-footer {
+  padding-block-end: calc(var(--db-spacing-fixed-xs) + env(safe-area-inset-bottom));
 }
+
 .db-drawer .db-drawer-container {
-  padding-block: var(--db-spacing-fixed-sm);
-}
-.db-drawer .db-drawer-container .db-drawer-header {
-  /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-block-end: var(--db-drawer-header-padding-block-end, var(--db-spacing-fixed-sm));
-  padding-inline: var(--db-spacing-fixed-lg);
-}
-.db-drawer .db-drawer-container .db-drawer-content {
-  /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-lg));
-  overflow-y: auto;
-  overflow-block: auto;
-}
-.db-drawer [data-spacing=medium].db-drawer-container {
-  /* stylelint-disable-next-line block-no-redundant-nested-style-rules */
-}
-.db-drawer [data-spacing=medium].db-drawer-container {
-  padding-block: var(--db-spacing-fixed-sm);
-}
-.db-drawer [data-spacing=medium].db-drawer-container .db-drawer-header {
-  /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-block-end: var(--db-drawer-header-padding-block-end, var(--db-spacing-fixed-sm));
-  padding-inline: var(--db-spacing-fixed-lg);
+  --db-drawer-close-delay: 0;
 }
-.db-drawer [data-spacing=medium].db-drawer-container .db-drawer-content {
-  /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-lg));
-  overflow-y: auto;
-  overflow-block: auto;
-}
-.db-drawer [data-spacing=large].db-drawer-container {
-  /* stylelint-disable-next-line block-no-redundant-nested-style-rules */
-}
-.db-drawer [data-spacing=large].db-drawer-container {
-  padding-block: var(--db-spacing-fixed-md);
-}
-.db-drawer [data-spacing=large].db-drawer-container .db-drawer-header {
-  /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-block-end: var(--db-drawer-header-padding-block-end, var(--db-spacing-fixed-md));
-  padding-inline: var(--db-spacing-fixed-xl);
-}
-.db-drawer [data-spacing=large].db-drawer-container .db-drawer-content {
-  /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-xl));
-  overflow-y: auto;
-  overflow-block: auto;
-}
-.db-drawer [data-spacing=none].db-drawer-container {
-  /* stylelint-disable-next-line block-no-redundant-nested-style-rules */
-}
-.db-drawer [data-spacing=none].db-drawer-container {
-  padding-block: 0;
-}
-.db-drawer [data-spacing=none].db-drawer-container .db-drawer-header {
-  /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-block-end: var(--db-drawer-header-padding-block-end, 0);
-  padding-inline: 0;
-}
-.db-drawer [data-spacing=none].db-drawer-container .db-drawer-content {
-  /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline: var(--db-drawer-content-padding-inline, 0);
-  overflow-y: auto;
-  overflow-block: auto;
+@media (prefers-reduced-motion: no-preference) {
+  .db-drawer .db-drawer-container {
+    --db-drawer-close-delay: var(--db-transition-duration-extra-slow);
+  }
 }
-
 .db-drawer .db-drawer-container {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: [header] auto [main] 1fr [footer] auto;
   background-color: var(--db-adaptive-bg-basic-level-1-default);
-  block-size: 100%;
-  inline-size: 100%;
+  inline-size: var(--db-drawer-inline-size);
+  block-size: var(--db-drawer-block-size);
   position: fixed;
   box-shadow: var(--db-elevation-md);
 }
-.db-drawer .db-drawer-container:not([data-width=full]) {
-  /* stylelint-disable-next-line db-ux/use-sizing */
-  max-inline-size: var(--db-drawer-max-width, calc(100% - var(--db-spacing-fixed-xl)));
-  /* stylelint-disable-next-line db-ux/use-sizing */
-  min-inline-size: var(--db-drawer-min-width, auto);
+.db-drawer .db-drawer-container > .db-drawer-content {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--db-drawer-content-padding, var(--db-spacing-fixed-xs) max(var(--db-spacing-fixed-sm), max(env(safe-area-inset-left), env(safe-area-inset-right))));
+}
+.db-drawer .db-drawer-container[data-show-spacing=true] {
+  --db-drawer-container-backdrop-spacing: var(--db-sizing-md);
 }
-.db-drawer .db-drawer-container:not([data-width=full]):not([data-direction]), .db-drawer .db-drawer-container:not([data-width=full])[data-direction=right] {
+.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-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
 }
-.db-drawer .db-drawer-container:not([data-width=full])[data-direction=left] {
+.db-drawer .db-drawer-container[data-show-spacing=true][data-direction=to-right] {
   border-inline-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
 }
-.db-drawer .db-drawer-container:not([data-width=full])[data-direction=up] {
+.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);
 }
-.db-drawer .db-drawer-container:not([data-width=full])[data-direction=down] {
+.db-drawer .db-drawer-container[data-show-spacing=true][data-direction=down] {
   border-block-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
 }
 .db-drawer .db-drawer-container[data-rounded=true] {
@@ -210,78 +173,43 @@ 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 .db-drawer-container .db-drawer-header {
-  display: none;
-  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
-  position: var(--db-tooltip-parent-position, relative);
+.db-drawer:not([data-position=absolute]) {
+  --db-drawer-inline-size: 100lvw;
+  --db-drawer-block-size: 100lvh;
 }
-.db-drawer .db-drawer-container .db-drawer-header[data-emphasis=strong] {
-  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+.db-drawer:not([data-position=absolute])[open] .db-drawer-container[data-transition=open] {
+  transform: none;
 }
-.db-drawer .db-drawer-container .db-drawer-header::before {
-  content: "";
-  background-color: var(--db-divider-bg-color);
-  position: absolute;
-  /* jscpd:ignore-start */
-  block-size: var(--db-border-width-3xs);
-  inset-block-end: 0;
-  inset-inline: 0;
-  /* stylelint-disable-next-line db-ux/use-border-color */
-}
-@media (forced-colors: active) {
-  .db-drawer .db-drawer-container .db-drawer-header::before {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+@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 .db-drawer-container .db-drawer-header::before {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* jscpd:ignore-end */
-}
-.db-drawer .db-drawer-container .db-drawer-header .db-drawer-header-text {
-  margin-block: auto;
-  font-weight: 700;
-}
-.db-drawer .db-drawer-container .db-drawer-header .button-close-drawer {
-  margin-inline-start: auto;
-}
-.db-drawer .db-drawer-container .db-drawer-header .button-close-drawer button {
-  margin-inline-start: auto;
-}
-.db-drawer .db-drawer-container .db-drawer-header:has(.button-close-drawer), .db-drawer .db-drawer-container .db-drawer-header:has(:not(.db-drawer-header-text:empty)) {
-  display: flex;
-}
 .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]:not([data-direction]), .db-drawer[data-position=absolute][data-direction=right], .db-drawer[data-position=absolute][data-direction=left] {
+.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;
 }
-.db-drawer[data-position=absolute][data-direction=left], .db-drawer[data-position=absolute][data-direction=down] {
-  align-items: start;
+.db-drawer[data-position=absolute][data-direction=to-right], .db-drawer[data-position=absolute][data-direction=down] {
+  align-items: flex-start;
 }
-.db-drawer[data-position=absolute]:not([data-direction]), .db-drawer[data-position=absolute][data-direction=right], .db-drawer[data-position=absolute][data-direction=up] {
-  align-items: end;
+.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]:not([data-direction]), .db-drawer[open] .db-drawer-container[data-transition=open][data-direction=right], .db-drawer[open] .db-drawer-container[data-transition=open][data-direction=left] {
-  transform: none;
-}
-.db-drawer[open] .db-drawer-container[data-transition=open][data-direction=up], .db-drawer[open] .db-drawer-container[data-transition=open][data-direction=down] {
-  transform: none;
-}
-@media (prefers-reduced-motion: no-preference) {
-  .db-drawer[open] .db-drawer-container[data-transition=close] {
-    transition: transform var(--db-transition-duration-slow) var(--db-transition-timing-emotional);
-  }
-}