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

package/build/components/drawer/drawer.css

@@ -45,34 +45,62 @@ 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(100lvw - 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=left] {
+.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));
+  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 [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 .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 .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 +108,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 +119,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 .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 {
-  padding-block: var(--db-spacing-fixed-xs);
-}
-.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-close-delay: 0;
 }
-.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 [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-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: 100lvw;
+  block-size: 100lvh;
   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:not([data-width=full]):not([data-direction]), .db-drawer .db-drawer-container:not([data-width=full])[data-direction=right] {
-  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] {
+  --db-drawer-container-backdrop-spacing: var(--db-sizing-md);
 }
-.db-drawer .db-drawer-container:not([data-width=full])[data-direction=left] {
+.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);
 }
-.db-drawer .db-drawer-container:not([data-width=full])[data-direction=up] {
+.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);
+}
+.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,42 +171,6 @@ 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 .db-drawer-container .db-drawer-header[data-emphasis=strong] {
-  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
-}
-.db-drawer .db-drawer-container .db-drawer-header::before {
-  content: "";
-  background-color: var(--db-divider-bg-color);
-  position: absolute;
-  block-size: var(--db-border-width-3xs);
-  inset-block-end: 0;
-  inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-@media (forced-colors: active) {
-  .db-drawer .db-drawer-container .db-drawer-header {
-    /* 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-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] {
   position: absolute;
   z-index: 3;
@@ -257,26 +182,23 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 .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]: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 {
   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] {
+.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-transition-duration-slow) var(--db-transition-timing-emotional);
+    transition: transform var(--db-drawer-close-delay) var(--db-transition-timing-emotional);
   }
 }