@greese/ui 0.0.0-stage → 1.1.0

package/dist/css/Dialog.css

@@ -0,0 +1,640 @@
+@import './core.css';
+@layer greese.components {
+  :root:has(.greese-Dialog:modal) {
+    padding-inline-end: var(--greese-scrollbar-gap, 0);
+    overflow: hidden;
+  }
+  .greese-Dialog {
+    box-sizing: border-box;
+    color: var(--greese-color-fg);
+    background-color: var(--greese-color-surface-overlay);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-panel);
+    box-shadow: var(--greese-shadow-lg);
+    --greese-overlay-enter: var(--greese-motion-dialog, var(--greese-motion-overlay, greese-overlay-in));
+    --greese-overlay-exit-opacity: var(
+      --greese-motion-dialog-exit-opacity,
+      var(--greese-motion-overlay-exit-opacity, 0)
+    );
+    --greese-overlay-exit-translate: var(
+      --greese-motion-dialog-exit-translate,
+      var(--greese-motion-overlay-exit-translate, var(--greese-overlay-origin))
+    );
+    --greese-overlay-exit-scale: var(
+      --greese-motion-dialog-exit-scale,
+      var(--greese-motion-overlay-exit-scale, 1)
+    );
+    --greese-overlay-exit-mask-image: var(
+      --greese-motion-dialog-exit-mask-image,
+      var(--greese-motion-overlay-exit-mask-image, none)
+    );
+    --greese-overlay-exit-mask-repeat: var(
+      --greese-motion-dialog-exit-mask-repeat,
+      var(--greese-motion-overlay-exit-mask-repeat, no-repeat)
+    );
+    --greese-overlay-exit-mask-position: var(
+      --greese-motion-dialog-exit-mask-position,
+      var(--greese-motion-overlay-exit-mask-position, 50% 50%)
+    );
+    --greese-overlay-exit-mask-size: var(
+      --greese-motion-dialog-exit-mask-size,
+      var(--greese-motion-overlay-exit-mask-size, 100% 100%)
+    );
+    --greese-overlay-exit-mask-from: var(
+      --greese-motion-dialog-exit-mask-from,
+      var(--greese-motion-overlay-exit-mask-from, 100% 100%)
+    );
+    --greese-overlay-exit-transform: var(
+      --greese-motion-dialog-exit-transform,
+      var(--greese-motion-overlay-exit-transform, none)
+    );
+    --greese-overlay-exit-transform-origin: var(
+      --greese-motion-dialog-exit-transform-origin,
+      var(--greese-motion-overlay-exit-transform-origin, 50% 50%)
+    );
+    --greese-overlay-origin: 0 0.5rem;
+    transition-property: opacity, translate, scale, transform, mask-size, mask-position, display, overlay;
+    transition-duration: var(--greese-motion-exit-duration, var(--greese-duration-fast));
+    transition-timing-function: var(--greese-motion-exit-ease, var(--greese-easing-exit));
+    transition-behavior: allow-discrete;
+    mask-image: var(--greese-motion-exit-mask-image, var(--greese-overlay-exit-mask-image));
+    mask-repeat: var(--greese-motion-exit-mask-repeat, var(--greese-overlay-exit-mask-repeat));
+    mask-position: var(--greese-motion-exit-mask-position, var(--greese-overlay-exit-mask-position));
+    mask-size: var(--greese-motion-exit-mask-from, var(--greese-overlay-exit-mask-from));
+    transform-origin: var(--greese-motion-exit-transform-origin, var(--greese-overlay-exit-transform-origin));
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Dialog[open] {
+      animation-name: var(--greese-overlay-enter);
+      animation-duration: var(--greese-motion-overlay-duration, var(--greese-duration-fast));
+      animation-timing-function: var(--greese-motion-enter-ease, var(--greese-easing-enter));
+      animation-fill-mode: backwards;
+    }
+  }
+  .greese-Dialog:not([open]) {
+    opacity: var(--greese-motion-exit-opacity, var(--greese-overlay-exit-opacity));
+    translate: var(--greese-motion-exit-translate, var(--greese-overlay-exit-translate));
+    scale: var(--greese-motion-exit-scale, var(--greese-overlay-exit-scale));
+    transform: var(--greese-motion-exit-transform, var(--greese-overlay-exit-transform));
+    mask-size: var(--greese-motion-exit-mask-size, var(--greese-overlay-exit-mask-size));
+  }
+  @keyframes greese-overlay-in {
+    from {
+      opacity: 0;
+      translate: var(--greese-overlay-origin);
+    }
+  }
+  .greese-Dialog {
+    flex-direction: column;
+    gap: var(--greese-space-3);
+    inline-size: min(var(--greese-dialog-width, 32rem), 100vw - 2 * var(--greese-space-4));
+    max-inline-size: none;
+    max-block-size: calc(100dvh - 2 * var(--greese-space-4));
+    padding: var(--greese-space-5);
+    overflow: hidden;
+    border-radius: var(--greese-corner-surface);
+  }
+  .greese-Dialog[open] {
+    display: flex;
+  }
+  .greese-Dialog::backdrop {
+    background-color: var(--greese-color-scrim);
+    opacity: 0;
+    transition-property: opacity, display, overlay;
+    transition-duration: var(--greese-motion-exit-duration, var(--greese-duration-normal));
+    transition-timing-function: var(--greese-motion-exit-ease, var(--greese-easing-exit));
+    transition-behavior: allow-discrete;
+  }
+  .greese-Dialog[open]::backdrop {
+    opacity: 1;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Dialog[open]::backdrop {
+      animation-name: var(--greese-motion-backdrop, greese-backdrop-in);
+      animation-duration: var(--greese-motion-backdrop-duration, var(--greese-duration-normal));
+      animation-timing-function: var(--greese-motion-enter-ease, var(--greese-easing-standard));
+      animation-fill-mode: backwards;
+    }
+  }
+  .greese-Dialog--size-sm {
+    --greese-dialog-width: 24rem;
+  }
+  .greese-Dialog--size-md {
+    --greese-dialog-width: 32rem;
+  }
+  .greese-Dialog--size-lg {
+    --greese-dialog-width: 48rem;
+  }
+  .greese-Dialog--size-xl {
+    --greese-dialog-width: 74rem;
+  }
+  .greese-Dialog--size-full {
+    inline-size: 100vw;
+    max-block-size: 100dvh;
+    block-size: 100dvh;
+    padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) max(var(--greese-space-5), env(safe-area-inset-bottom));
+    border: 0;
+    border-radius: 0;
+  }
+  .greese-Dialog-header {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--greese-space-3);
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+  .greese-Dialog-title {
+    margin: 0;
+    font-size: var(--greese-type-s2-font-size);
+    font-weight: var(--greese-font-weight-semibold);
+    line-height: var(--greese-line-height-snug);
+  }
+  .greese-Dialog-close {
+    margin-block-start: calc(-1 * var(--greese-space-1));
+    margin-inline-end: calc(-1 * var(--greese-space-2));
+  }
+  .greese-Dialog-description {
+    flex-shrink: 0;
+    margin: 0;
+    font-size: var(--greese-type-p3-font-size);
+    color: var(--greese-color-fg-muted);
+  }
+  .greese-Dialog-body {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+  .greese-Dialog-footer {
+    display: flex;
+    flex-direction: column-reverse;
+    flex-shrink: 0;
+    gap: var(--greese-space-2);
+  }
+  @media (width >= 600px) {
+    .greese-Dialog-footer {
+      flex-flow: row wrap;
+      justify-content: flex-end;
+    }
+  }
+  .greese-Drawer {
+    --greese-overlay-enter: var(--greese-motion-drawer, greese-overlay-in);
+    --greese-overlay-exit-opacity: var(
+      --greese-motion-drawer-exit-opacity,
+      0
+    );
+    --greese-overlay-exit-translate: var(
+      --greese-motion-drawer-exit-translate,
+      var(--greese-overlay-origin)
+    );
+    --greese-overlay-exit-scale: var(
+      --greese-motion-drawer-exit-scale,
+      1
+    );
+    --greese-overlay-exit-mask-image: var(
+      --greese-motion-drawer-exit-mask-image,
+      none
+    );
+    --greese-overlay-exit-mask-repeat: var(
+      --greese-motion-drawer-exit-mask-repeat,
+      no-repeat
+    );
+    --greese-overlay-exit-mask-position: var(
+      --greese-motion-drawer-exit-mask-position,
+      50% 50%
+    );
+    --greese-overlay-exit-mask-size: var(
+      --greese-motion-drawer-exit-mask-size,
+      100% 100%
+    );
+    --greese-overlay-exit-mask-from: var(
+      --greese-motion-drawer-exit-mask-from,
+      100% 100%
+    );
+    --greese-overlay-exit-transform: var(
+      --greese-motion-drawer-exit-transform,
+      none
+    );
+    --greese-overlay-exit-transform-origin: var(
+      --greese-motion-drawer-exit-transform-origin,
+      50% 50%
+    );
+    --greese-drawer-dir: 1;
+    max-block-size: none;
+    margin: 0;
+    border-radius: 0;
+  }
+  .greese-Drawer:dir(rtl) {
+    --greese-drawer-dir: -1;
+  }
+  .greese-Drawer--xs-placement-end {
+    --greese-drawer-edge: end;
+    inset-block: 0;
+    inset-inline: auto 0;
+    inline-size: min(24rem, 100vw - 3rem);
+    block-size: 100dvh;
+    max-block-size: none;
+    padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) max(var(--greese-space-5), env(safe-area-inset-bottom));
+    border-start-start-radius: var(--greese-corner-surface);
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    border-end-start-radius: var(--greese-corner-surface);
+    --greese-overlay-origin: calc(100% * var(--greese-drawer-dir)) 0;
+  }
+  .greese-Drawer--xs-placement-start {
+    --greese-drawer-edge: start;
+    inset-block: 0;
+    inset-inline: 0 auto;
+    inline-size: min(24rem, 100vw - 3rem);
+    block-size: 100dvh;
+    max-block-size: none;
+    padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) max(var(--greese-space-5), env(safe-area-inset-bottom));
+    border-start-start-radius: 0;
+    border-start-end-radius: var(--greese-corner-surface);
+    border-end-end-radius: var(--greese-corner-surface);
+    border-end-start-radius: 0;
+    --greese-overlay-origin: calc(-100% * var(--greese-drawer-dir)) 0;
+  }
+  .greese-Drawer--xs-placement-bottom {
+    --greese-drawer-edge: bottom;
+    inset-block: auto 0;
+    inset-inline: 0;
+    inline-size: 100vw;
+    block-size: auto;
+    max-block-size: 85dvh;
+    padding-block: var(--greese-space-5) max(var(--greese-space-5), env(safe-area-inset-bottom));
+    border-start-start-radius: var(--greese-corner-surface);
+    border-start-end-radius: var(--greese-corner-surface);
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+    --greese-overlay-origin: 0 100%;
+  }
+  .greese-Drawer--xs-placement-top {
+    --greese-drawer-edge: top;
+    inset-block: 0 auto;
+    inset-inline: 0;
+    inline-size: 100vw;
+    block-size: auto;
+    max-block-size: 85dvh;
+    padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) var(--greese-space-5);
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: var(--greese-corner-surface);
+    border-end-start-radius: var(--greese-corner-surface);
+    --greese-overlay-origin: 0 -100%;
+  }
+  @media (width >= 600px) {
+    .greese-Drawer--sm-placement-end {
+      --greese-drawer-edge: end;
+      inset-block: 0;
+      inset-inline: auto 0;
+      inline-size: min(24rem, 100vw - 3rem);
+      block-size: 100dvh;
+      max-block-size: none;
+      padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) max(var(--greese-space-5), env(safe-area-inset-bottom));
+      border-start-start-radius: var(--greese-corner-surface);
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+      border-end-start-radius: var(--greese-corner-surface);
+      --greese-overlay-origin: calc(100% * var(--greese-drawer-dir)) 0;
+    }
+    .greese-Drawer--sm-placement-start {
+      --greese-drawer-edge: start;
+      inset-block: 0;
+      inset-inline: 0 auto;
+      inline-size: min(24rem, 100vw - 3rem);
+      block-size: 100dvh;
+      max-block-size: none;
+      padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) max(var(--greese-space-5), env(safe-area-inset-bottom));
+      border-start-start-radius: 0;
+      border-start-end-radius: var(--greese-corner-surface);
+      border-end-end-radius: var(--greese-corner-surface);
+      border-end-start-radius: 0;
+      --greese-overlay-origin: calc(-100% * var(--greese-drawer-dir)) 0;
+    }
+    .greese-Drawer--sm-placement-bottom {
+      --greese-drawer-edge: bottom;
+      inset-block: auto 0;
+      inset-inline: 0;
+      inline-size: 100vw;
+      block-size: auto;
+      max-block-size: 85dvh;
+      padding-block: var(--greese-space-5) max(var(--greese-space-5), env(safe-area-inset-bottom));
+      border-start-start-radius: var(--greese-corner-surface);
+      border-start-end-radius: var(--greese-corner-surface);
+      border-end-end-radius: 0;
+      border-end-start-radius: 0;
+      --greese-overlay-origin: 0 100%;
+    }
+    .greese-Drawer--sm-placement-top {
+      --greese-drawer-edge: top;
+      inset-block: 0 auto;
+      inset-inline: 0;
+      inline-size: 100vw;
+      block-size: auto;
+      max-block-size: 85dvh;
+      padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) var(--greese-space-5);
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+      border-end-end-radius: var(--greese-corner-surface);
+      border-end-start-radius: var(--greese-corner-surface);
+      --greese-overlay-origin: 0 -100%;
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Drawer--md-placement-end {
+      --greese-drawer-edge: end;
+      inset-block: 0;
+      inset-inline: auto 0;
+      inline-size: min(24rem, 100vw - 3rem);
+      block-size: 100dvh;
+      max-block-size: none;
+      padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) max(var(--greese-space-5), env(safe-area-inset-bottom));
+      border-start-start-radius: var(--greese-corner-surface);
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+      border-end-start-radius: var(--greese-corner-surface);
+      --greese-overlay-origin: calc(100% * var(--greese-drawer-dir)) 0;
+    }
+    .greese-Drawer--md-placement-start {
+      --greese-drawer-edge: start;
+      inset-block: 0;
+      inset-inline: 0 auto;
+      inline-size: min(24rem, 100vw - 3rem);
+      block-size: 100dvh;
+      max-block-size: none;
+      padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) max(var(--greese-space-5), env(safe-area-inset-bottom));
+      border-start-start-radius: 0;
+      border-start-end-radius: var(--greese-corner-surface);
+      border-end-end-radius: var(--greese-corner-surface);
+      border-end-start-radius: 0;
+      --greese-overlay-origin: calc(-100% * var(--greese-drawer-dir)) 0;
+    }
+    .greese-Drawer--md-placement-bottom {
+      --greese-drawer-edge: bottom;
+      inset-block: auto 0;
+      inset-inline: 0;
+      inline-size: 100vw;
+      block-size: auto;
+      max-block-size: 85dvh;
+      padding-block: var(--greese-space-5) max(var(--greese-space-5), env(safe-area-inset-bottom));
+      border-start-start-radius: var(--greese-corner-surface);
+      border-start-end-radius: var(--greese-corner-surface);
+      border-end-end-radius: 0;
+      border-end-start-radius: 0;
+      --greese-overlay-origin: 0 100%;
+    }
+    .greese-Drawer--md-placement-top {
+      --greese-drawer-edge: top;
+      inset-block: 0 auto;
+      inset-inline: 0;
+      inline-size: 100vw;
+      block-size: auto;
+      max-block-size: 85dvh;
+      padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) var(--greese-space-5);
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+      border-end-end-radius: var(--greese-corner-surface);
+      border-end-start-radius: var(--greese-corner-surface);
+      --greese-overlay-origin: 0 -100%;
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Drawer--lg-placement-end {
+      --greese-drawer-edge: end;
+      inset-block: 0;
+      inset-inline: auto 0;
+      inline-size: min(24rem, 100vw - 3rem);
+      block-size: 100dvh;
+      max-block-size: none;
+      padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) max(var(--greese-space-5), env(safe-area-inset-bottom));
+      border-start-start-radius: var(--greese-corner-surface);
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+      border-end-start-radius: var(--greese-corner-surface);
+      --greese-overlay-origin: calc(100% * var(--greese-drawer-dir)) 0;
+    }
+    .greese-Drawer--lg-placement-start {
+      --greese-drawer-edge: start;
+      inset-block: 0;
+      inset-inline: 0 auto;
+      inline-size: min(24rem, 100vw - 3rem);
+      block-size: 100dvh;
+      max-block-size: none;
+      padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) max(var(--greese-space-5), env(safe-area-inset-bottom));
+      border-start-start-radius: 0;
+      border-start-end-radius: var(--greese-corner-surface);
+      border-end-end-radius: var(--greese-corner-surface);
+      border-end-start-radius: 0;
+      --greese-overlay-origin: calc(-100% * var(--greese-drawer-dir)) 0;
+    }
+    .greese-Drawer--lg-placement-bottom {
+      --greese-drawer-edge: bottom;
+      inset-block: auto 0;
+      inset-inline: 0;
+      inline-size: 100vw;
+      block-size: auto;
+      max-block-size: 85dvh;
+      padding-block: var(--greese-space-5) max(var(--greese-space-5), env(safe-area-inset-bottom));
+      border-start-start-radius: var(--greese-corner-surface);
+      border-start-end-radius: var(--greese-corner-surface);
+      border-end-end-radius: 0;
+      border-end-start-radius: 0;
+      --greese-overlay-origin: 0 100%;
+    }
+    .greese-Drawer--lg-placement-top {
+      --greese-drawer-edge: top;
+      inset-block: 0 auto;
+      inset-inline: 0;
+      inline-size: 100vw;
+      block-size: auto;
+      max-block-size: 85dvh;
+      padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) var(--greese-space-5);
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+      border-end-end-radius: var(--greese-corner-surface);
+      border-end-start-radius: var(--greese-corner-surface);
+      --greese-overlay-origin: 0 -100%;
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Drawer--xl-placement-end {
+      --greese-drawer-edge: end;
+      inset-block: 0;
+      inset-inline: auto 0;
+      inline-size: min(24rem, 100vw - 3rem);
+      block-size: 100dvh;
+      max-block-size: none;
+      padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) max(var(--greese-space-5), env(safe-area-inset-bottom));
+      border-start-start-radius: var(--greese-corner-surface);
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+      border-end-start-radius: var(--greese-corner-surface);
+      --greese-overlay-origin: calc(100% * var(--greese-drawer-dir)) 0;
+    }
+    .greese-Drawer--xl-placement-start {
+      --greese-drawer-edge: start;
+      inset-block: 0;
+      inset-inline: 0 auto;
+      inline-size: min(24rem, 100vw - 3rem);
+      block-size: 100dvh;
+      max-block-size: none;
+      padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) max(var(--greese-space-5), env(safe-area-inset-bottom));
+      border-start-start-radius: 0;
+      border-start-end-radius: var(--greese-corner-surface);
+      border-end-end-radius: var(--greese-corner-surface);
+      border-end-start-radius: 0;
+      --greese-overlay-origin: calc(-100% * var(--greese-drawer-dir)) 0;
+    }
+    .greese-Drawer--xl-placement-bottom {
+      --greese-drawer-edge: bottom;
+      inset-block: auto 0;
+      inset-inline: 0;
+      inline-size: 100vw;
+      block-size: auto;
+      max-block-size: 85dvh;
+      padding-block: var(--greese-space-5) max(var(--greese-space-5), env(safe-area-inset-bottom));
+      border-start-start-radius: var(--greese-corner-surface);
+      border-start-end-radius: var(--greese-corner-surface);
+      border-end-end-radius: 0;
+      border-end-start-radius: 0;
+      --greese-overlay-origin: 0 100%;
+    }
+    .greese-Drawer--xl-placement-top {
+      --greese-drawer-edge: top;
+      inset-block: 0 auto;
+      inset-inline: 0;
+      inline-size: 100vw;
+      block-size: auto;
+      max-block-size: 85dvh;
+      padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) var(--greese-space-5);
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+      border-end-end-radius: var(--greese-corner-surface);
+      border-end-start-radius: var(--greese-corner-surface);
+      --greese-overlay-origin: 0 -100%;
+    }
+  }
+  .greese-Drawer .greese-Dialog-header {
+    position: relative;
+    touch-action: none;
+  }
+  .greese-Drawer--xs-placement-bottom .greese-Dialog-header::before {
+    position: absolute;
+    inset-block-start: calc(-1 * var(--greese-space-3));
+    inset-inline: 0;
+    display: block;
+    inline-size: 2.5rem;
+    block-size: 4px;
+    margin-inline: auto;
+    content: "";
+    background-color: var(--greese-color-border-strong);
+    border-radius: var(--greese-corner-pill);
+  }
+  .greese-Drawer--xs-placement-start .greese-Dialog-header::before {
+    display: none;
+  }
+  .greese-Drawer--xs-placement-end .greese-Dialog-header::before {
+    display: none;
+  }
+  .greese-Drawer--xs-placement-top .greese-Dialog-header::before {
+    display: none;
+  }
+  @media (width >= 600px) {
+    .greese-Drawer--sm-placement-bottom .greese-Dialog-header::before {
+      position: absolute;
+      inset-block-start: calc(-1 * var(--greese-space-3));
+      inset-inline: 0;
+      display: block;
+      inline-size: 2.5rem;
+      block-size: 4px;
+      margin-inline: auto;
+      content: "";
+      background-color: var(--greese-color-border-strong);
+      border-radius: var(--greese-corner-pill);
+    }
+    .greese-Drawer--sm-placement-start .greese-Dialog-header::before {
+      display: none;
+    }
+    .greese-Drawer--sm-placement-end .greese-Dialog-header::before {
+      display: none;
+    }
+    .greese-Drawer--sm-placement-top .greese-Dialog-header::before {
+      display: none;
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Drawer--md-placement-bottom .greese-Dialog-header::before {
+      position: absolute;
+      inset-block-start: calc(-1 * var(--greese-space-3));
+      inset-inline: 0;
+      display: block;
+      inline-size: 2.5rem;
+      block-size: 4px;
+      margin-inline: auto;
+      content: "";
+      background-color: var(--greese-color-border-strong);
+      border-radius: var(--greese-corner-pill);
+    }
+    .greese-Drawer--md-placement-start .greese-Dialog-header::before {
+      display: none;
+    }
+    .greese-Drawer--md-placement-end .greese-Dialog-header::before {
+      display: none;
+    }
+    .greese-Drawer--md-placement-top .greese-Dialog-header::before {
+      display: none;
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Drawer--lg-placement-bottom .greese-Dialog-header::before {
+      position: absolute;
+      inset-block-start: calc(-1 * var(--greese-space-3));
+      inset-inline: 0;
+      display: block;
+      inline-size: 2.5rem;
+      block-size: 4px;
+      margin-inline: auto;
+      content: "";
+      background-color: var(--greese-color-border-strong);
+      border-radius: var(--greese-corner-pill);
+    }
+    .greese-Drawer--lg-placement-start .greese-Dialog-header::before {
+      display: none;
+    }
+    .greese-Drawer--lg-placement-end .greese-Dialog-header::before {
+      display: none;
+    }
+    .greese-Drawer--lg-placement-top .greese-Dialog-header::before {
+      display: none;
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Drawer--xl-placement-bottom .greese-Dialog-header::before {
+      position: absolute;
+      inset-block-start: calc(-1 * var(--greese-space-3));
+      inset-inline: 0;
+      display: block;
+      inline-size: 2.5rem;
+      block-size: 4px;
+      margin-inline: auto;
+      content: "";
+      background-color: var(--greese-color-border-strong);
+      border-radius: var(--greese-corner-pill);
+    }
+    .greese-Drawer--xl-placement-start .greese-Dialog-header::before {
+      display: none;
+    }
+    .greese-Drawer--xl-placement-end .greese-Dialog-header::before {
+      display: none;
+    }
+    .greese-Drawer--xl-placement-top .greese-Dialog-header::before {
+      display: none;
+    }
+  }
+  @keyframes greese-backdrop-in {
+    from {
+      opacity: 0;
+    }
+  }
+}