@pathscale/ui 1.2.5 → 1.2.7

package/dist/components/drawer/Drawer.css

@@ -1,463 +1,463 @@
-@layer components {
-  .drawer {
-    position: relative;
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Trigger
-   * -----------------------------------------------------------------------------------------------*/
-  .drawer__trigger {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    border: none;
-    background: none;
-    padding: 0;
-    font: inherit;
-    color: inherit;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  .drawer__trigger:focus-visible {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
-    border-radius: var(--radius-field, 0.375rem);
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Backdrop
-   * -----------------------------------------------------------------------------------------------*/
-  .drawer__backdrop {
-    position: fixed;
-    inset: 0;
-    z-index: 50;
-    width: 100%;
-    height: 100vh;
-    height: 100dvh;
-    opacity: 1;
-    transition: opacity 250ms cubic-bezier(0.32, 0.72, 0, 1);
-  }
-
-  .drawer__backdrop--entering {
-    opacity: 0;
-  }
-
-  .drawer__backdrop--exiting {
-    opacity: 0;
-    transition-duration: 200ms;
-  }
-
-  .drawer__backdrop[data-entering="true"] {
-    opacity: 0;
-  }
-
-  .drawer__backdrop[data-exiting="true"] {
-    opacity: 0;
-    transition-duration: 200ms;
-  }
-
-  .drawer__backdrop--opaque {
-    background-color: oklch(0% 0 0 / 40%);
-  }
-
-  .drawer__backdrop--blur {
-    background-color: oklch(0% 0 0 / 40%);
-    backdrop-filter: blur(12px);
-  }
-
-  .drawer__backdrop--transparent {
-    background-color: transparent;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .drawer__backdrop {
-      transition: none;
-    }
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Content — positioning wrapper
-   * -----------------------------------------------------------------------------------------------*/
-  .drawer__content {
-    pointer-events: none;
-    position: fixed;
-    inset: 0;
-    z-index: 50;
-    display: flex;
-    width: 100%;
-    min-width: 0;
-    height: 100vh;
-    height: 100dvh;
-  }
-
-  .drawer__content--scroll-inside .drawer__dialog {
-    overflow: hidden;
-  }
-
-  .drawer__content--scroll-inside .drawer__body {
-    overflow-y: auto;
-  }
-
-  .drawer__content--scroll-outside {
-    overflow-y: auto;
-  }
-
-  .drawer__content--scroll-outside .drawer__dialog {
-    margin-block: auto;
-  }
-
-  .drawer__content--entering[data-placement="left"] .drawer__dialog,
-  .drawer__content--exiting[data-placement="left"] .drawer__dialog {
-    translate: -100% 0;
-  }
-
-  .drawer__content--entering[data-placement="right"] .drawer__dialog,
-  .drawer__content--exiting[data-placement="right"] .drawer__dialog {
-    translate: 100% 0;
-  }
-
-  .drawer__content--entering[data-placement="top"] .drawer__dialog,
-  .drawer__content--exiting[data-placement="top"] .drawer__dialog {
-    translate: 0 -100%;
-  }
-
-  .drawer__content--entering[data-placement="bottom"] .drawer__dialog,
-  .drawer__content--exiting[data-placement="bottom"] .drawer__dialog {
-    translate: 0 100%;
-  }
-
-  .drawer__content--bottom {
-    align-items: flex-end;
-  }
-
-  .drawer__content--top {
-    align-items: flex-start;
-  }
-
-  .drawer__content--left {
-    justify-content: flex-start;
-  }
-
-  .drawer__content--right {
-    justify-content: flex-end;
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Dialog — the drawer panel
-   * -----------------------------------------------------------------------------------------------*/
-  .drawer__dialog {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    background-color: var(--color-base-100);
-    color: var(--color-base-content);
-    padding: 1.5rem;
-    pointer-events: auto;
-    outline: none;
-    box-shadow:
-      0 10px 15px -3px oklch(0% 0 0 / 0.1),
-      0 4px 6px -4px oklch(0% 0 0 / 0.1);
-
-    --drawer-enter-duration: 250ms;
-    --drawer-exit-duration: 200ms;
-    --drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);
-
-    will-change: translate;
-    transition: translate var(--drawer-enter-duration) var(--drawer-ease);
-  }
-
-  .drawer__dialog--axis-side {
-    height: 100%;
-    border-radius: 0;
-  }
-
-  .drawer__dialog--axis-edge {
-    width: 100%;
-  }
-
-  .drawer__dialog--side-sm {
-    width: 18rem;
-    max-width: 85vw;
-  }
-
-  .drawer__dialog--side-md {
-    width: 20rem;
-    max-width: 85vw;
-  }
-
-  .drawer__dialog--side-lg {
-    width: 24rem;
-    max-width: 90vw;
-  }
-
-  .drawer__dialog--side-full {
-    width: 100vw;
-    max-width: 100vw;
-  }
-
-  .drawer__dialog--edge-sm {
-    max-height: min(40vh, 24rem);
-  }
-
-  .drawer__dialog--edge-md {
-    max-height: min(60vh, 36rem);
-  }
-
-  .drawer__dialog--edge-lg {
-    max-height: 85vh;
-  }
-
-  .drawer__dialog--edge-full {
-    max-height: 100vh;
-    border-radius: 0;
-  }
-
-  .drawer__dialog--entering,
-  .drawer__dialog--exiting {
-    transition-duration: var(--drawer-exit-duration);
-  }
-
-  [data-exiting="true"] .drawer__dialog {
-    transition-duration: var(--drawer-exit-duration);
-  }
-
-  /* Bottom/top: full width, auto height */
-  .drawer__dialog[data-placement="bottom"] {
-    width: 100%;
-    max-height: 85vh;
-    border-radius: 1rem 1rem 0 0;
-  }
-
-  .drawer__dialog[data-placement="top"] {
-    width: 100%;
-    max-height: 85vh;
-    border-radius: 0 0 1rem 1rem;
-  }
-
-  /* Left/right: fixed width, full height */
-  .drawer__dialog[data-placement="left"],
-  .drawer__dialog[data-placement="right"] {
-    height: 100%;
-    width: 20rem;
-    max-width: 85vw;
-    border-radius: 0;
-  }
-
-  @media (min-width: 640px) {
-    .drawer__dialog[data-placement="left"],
-    .drawer__dialog[data-placement="right"] {
-      width: 24rem;
-    }
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Dialog — semantic prop: custom size (width / maxWidth)
-   * -----------------------------------------------------------------------------------------------*/
-  .drawer__dialog--custom-size {
-    width: var(--drawer-dialog-width, 20rem);
-    max-width: var(--drawer-dialog-max-width, 85vw);
-  }
-
-  @media (min-width: 640px) {
-    .drawer__dialog--custom-size {
-      width: var(--drawer-dialog-width, 24rem);
-    }
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Dialog — semantic prop: custom padding
-   * -----------------------------------------------------------------------------------------------*/
-  .drawer__dialog--custom-padding {
-    padding: var(--drawer-dialog-padding);
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Dialog — semantic prop: side (border indicator, parametric width & color)
-   * -----------------------------------------------------------------------------------------------*/
-  .drawer__dialog--side-left {
-    border-right-width: var(--drawer-dialog-border-width, 1px);
-    border-right-style: solid;
-    border-right-color: var(--drawer-dialog-border-color, color-mix(in oklab, var(--color-base-content) 10%, transparent));
-  }
-
-  .drawer__dialog--side-right {
-    border-left-width: var(--drawer-dialog-border-width, 1px);
-    border-left-style: solid;
-    border-left-color: var(--drawer-dialog-border-color, color-mix(in oklab, var(--color-base-content) 10%, transparent));
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Dialog — semantic prop: bg (any CSS color via custom property)
-   * -----------------------------------------------------------------------------------------------*/
-  .drawer__dialog--custom-bg {
-    background-color: var(--drawer-dialog-bg, var(--color-base-100));
-  }
-  /* Slide transitions — open state */
-  .drawer__content--left .drawer__dialog,
-  .drawer__content--right .drawer__dialog,
-  .drawer__content--top .drawer__dialog,
-  .drawer__content--bottom .drawer__dialog {
-    translate: 0 0;
-  }
-
-  /* Entering/exiting slide transforms (legacy data-attrs support) */
-  .drawer__content--left[data-entering="true"] .drawer__dialog,
-  .drawer__content--left[data-exiting="true"] .drawer__dialog {
-    translate: -100% 0;
-  }
-
-  .drawer__content--right[data-entering="true"] .drawer__dialog,
-  .drawer__content--right[data-exiting="true"] .drawer__dialog {
-    translate: 100% 0;
-  }
-
-  .drawer__content--top[data-entering="true"] .drawer__dialog,
-  .drawer__content--top[data-exiting="true"] .drawer__dialog {
-    translate: 0 -100%;
-  }
-
-  .drawer__content--bottom[data-entering="true"] .drawer__dialog,
-  .drawer__content--bottom[data-exiting="true"] .drawer__dialog {
-    translate: 0 100%;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .drawer__dialog {
-      transition: none;
-    }
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Header
-   * -----------------------------------------------------------------------------------------------*/
-  .drawer__header {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    margin-bottom: 0;
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Heading
-   * -----------------------------------------------------------------------------------------------*/
-  .drawer__heading {
-    font-size: 1rem;
-    font-weight: 500;
-    line-height: 1.5;
-    color: var(--color-base-content);
-    margin: 0;
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Body
-   * -----------------------------------------------------------------------------------------------*/
-  .drawer__body {
-    min-height: 0;
-    flex: 1;
-    font-size: 0.875rem;
-    line-height: 1.43;
-    color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Footer
-   * -----------------------------------------------------------------------------------------------*/
-  .drawer__footer {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 0.5rem;
-    margin-top: 0;
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Handle
-   * -----------------------------------------------------------------------------------------------*/
-  .drawer__handle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-bottom: 0.5rem;
-  }
-
-  .drawer__handle-bar,
-  .drawer__handle > [data-slot="drawer-handle-bar"] {
-    height: 0.25rem;
-    width: 2.25rem;
-    border-radius: 9999px;
-    background-color: color-mix(in oklab, var(--color-base-content) 25%, transparent);
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Close Trigger
-   * -----------------------------------------------------------------------------------------------*/
-  .drawer__close-trigger {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    border: none;
-    background: none;
-    border-radius: var(--radius-field, 0.375rem);
-    cursor: pointer;
-    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
-    transition: color 150ms ease, background-color 150ms ease;
-    padding: 0;
-  }
-
-  .drawer__close-trigger:hover {
-    color: var(--color-base-content);
-    background-color: color-mix(in oklab, var(--color-base-content) 8%, transparent);
-  }
-
-  .drawer__close-trigger:focus-visible {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
-  }
-
-  .drawer__close-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1rem;
-    height: 1rem;
-    pointer-events: none;
-  }
-
-  .drawer__close-icon > * {
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Element spacing
-   * -----------------------------------------------------------------------------------------------*/
-  .drawer__header + .drawer__body {
-    margin-top: 0.5rem;
-  }
-
-  .drawer__header + .drawer__footer {
-    margin-top: 1.25rem;
-  }
-
-  .drawer__body + .drawer__footer {
-    margin-top: 1.25rem;
-  }
-
-  .drawer__handle + .drawer__header {
-    margin-top: 0;
-  }
-
-  .drawer__handle + .drawer__body {
-    margin-top: 0;
-  }
-}
+@layer components {
+  .drawer {
+    position: relative;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Trigger
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__trigger {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    border: none;
+    background: none;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .drawer__trigger:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    border-radius: var(--radius-field, 0.375rem);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Backdrop
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    width: 100%;
+    height: 100vh;
+    height: 100dvh;
+    opacity: 1;
+    transition: opacity 250ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  .drawer__backdrop--entering {
+    opacity: 0;
+  }
+
+  .drawer__backdrop--exiting {
+    opacity: 0;
+    transition-duration: 200ms;
+  }
+
+  .drawer__backdrop[data-entering="true"] {
+    opacity: 0;
+  }
+
+  .drawer__backdrop[data-exiting="true"] {
+    opacity: 0;
+    transition-duration: 200ms;
+  }
+
+  .drawer__backdrop--opaque {
+    background-color: oklch(0% 0 0 / 40%);
+  }
+
+  .drawer__backdrop--blur {
+    background-color: oklch(0% 0 0 / 40%);
+    backdrop-filter: blur(12px);
+  }
+
+  .drawer__backdrop--transparent {
+    background-color: transparent;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .drawer__backdrop {
+      transition: none;
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Content — positioning wrapper
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__content {
+    pointer-events: none;
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    height: 100vh;
+    height: 100dvh;
+  }
+
+  .drawer__content--scroll-inside .drawer__dialog {
+    overflow: hidden;
+  }
+
+  .drawer__content--scroll-inside .drawer__body {
+    overflow-y: auto;
+  }
+
+  .drawer__content--scroll-outside {
+    overflow-y: auto;
+  }
+
+  .drawer__content--scroll-outside .drawer__dialog {
+    margin-block: auto;
+  }
+
+  .drawer__content--entering[data-placement="left"] .drawer__dialog,
+  .drawer__content--exiting[data-placement="left"] .drawer__dialog {
+    translate: -100% 0;
+  }
+
+  .drawer__content--entering[data-placement="right"] .drawer__dialog,
+  .drawer__content--exiting[data-placement="right"] .drawer__dialog {
+    translate: 100% 0;
+  }
+
+  .drawer__content--entering[data-placement="top"] .drawer__dialog,
+  .drawer__content--exiting[data-placement="top"] .drawer__dialog {
+    translate: 0 -100%;
+  }
+
+  .drawer__content--entering[data-placement="bottom"] .drawer__dialog,
+  .drawer__content--exiting[data-placement="bottom"] .drawer__dialog {
+    translate: 0 100%;
+  }
+
+  .drawer__content--bottom {
+    align-items: flex-end;
+  }
+
+  .drawer__content--top {
+    align-items: flex-start;
+  }
+
+  .drawer__content--left {
+    justify-content: flex-start;
+  }
+
+  .drawer__content--right {
+    justify-content: flex-end;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Dialog — the drawer panel
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__dialog {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+    padding: 1.5rem;
+    pointer-events: auto;
+    outline: none;
+    box-shadow:
+      0 10px 15px -3px oklch(0% 0 0 / 0.1),
+      0 4px 6px -4px oklch(0% 0 0 / 0.1);
+
+    --drawer-enter-duration: 250ms;
+    --drawer-exit-duration: 200ms;
+    --drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);
+
+    will-change: translate;
+    transition: translate var(--drawer-enter-duration) var(--drawer-ease);
+  }
+
+  .drawer__dialog--axis-side {
+    height: 100%;
+    border-radius: 0;
+  }
+
+  .drawer__dialog--axis-edge {
+    width: 100%;
+  }
+
+  .drawer__dialog--side-sm {
+    width: 18rem;
+    max-width: 85vw;
+  }
+
+  .drawer__dialog--side-md {
+    width: 20rem;
+    max-width: 85vw;
+  }
+
+  .drawer__dialog--side-lg {
+    width: 24rem;
+    max-width: 90vw;
+  }
+
+  .drawer__dialog--side-full {
+    width: 100vw;
+    max-width: 100vw;
+  }
+
+  .drawer__dialog--edge-sm {
+    max-height: min(40vh, 24rem);
+  }
+
+  .drawer__dialog--edge-md {
+    max-height: min(60vh, 36rem);
+  }
+
+  .drawer__dialog--edge-lg {
+    max-height: 85vh;
+  }
+
+  .drawer__dialog--edge-full {
+    max-height: 100vh;
+    border-radius: 0;
+  }
+
+  .drawer__dialog--entering,
+  .drawer__dialog--exiting {
+    transition-duration: var(--drawer-exit-duration);
+  }
+
+  [data-exiting="true"] .drawer__dialog {
+    transition-duration: var(--drawer-exit-duration);
+  }
+
+  /* Bottom/top: full width, auto height */
+  .drawer__dialog[data-placement="bottom"] {
+    width: 100%;
+    max-height: 85vh;
+    border-radius: 1rem 1rem 0 0;
+  }
+
+  .drawer__dialog[data-placement="top"] {
+    width: 100%;
+    max-height: 85vh;
+    border-radius: 0 0 1rem 1rem;
+  }
+
+  /* Left/right: fixed width, full height */
+  .drawer__dialog[data-placement="left"],
+  .drawer__dialog[data-placement="right"] {
+    height: 100%;
+    width: 20rem;
+    max-width: 85vw;
+    border-radius: 0;
+  }
+
+  @media (min-width: 640px) {
+    .drawer__dialog[data-placement="left"],
+    .drawer__dialog[data-placement="right"] {
+      width: 24rem;
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Dialog — semantic prop: custom size (width / maxWidth)
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__dialog--custom-size {
+    width: var(--drawer-dialog-width, 20rem);
+    max-width: var(--drawer-dialog-max-width, 85vw);
+  }
+
+  @media (min-width: 640px) {
+    .drawer__dialog--custom-size {
+      width: var(--drawer-dialog-width, 24rem);
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Dialog — semantic prop: custom padding
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__dialog--custom-padding {
+    padding: var(--drawer-dialog-padding);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Dialog — semantic prop: side (border indicator, parametric width & color)
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__dialog--side-left {
+    border-right-width: var(--drawer-dialog-border-width, 1px);
+    border-right-style: solid;
+    border-right-color: var(--drawer-dialog-border-color, color-mix(in oklab, var(--color-base-content) 10%, transparent));
+  }
+
+  .drawer__dialog--side-right {
+    border-left-width: var(--drawer-dialog-border-width, 1px);
+    border-left-style: solid;
+    border-left-color: var(--drawer-dialog-border-color, color-mix(in oklab, var(--color-base-content) 10%, transparent));
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Dialog — semantic prop: bg (any CSS color via custom property)
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__dialog--custom-bg {
+    background-color: var(--drawer-dialog-bg, var(--color-base-100));
+  }
+  /* Slide transitions — open state */
+  .drawer__content--left .drawer__dialog,
+  .drawer__content--right .drawer__dialog,
+  .drawer__content--top .drawer__dialog,
+  .drawer__content--bottom .drawer__dialog {
+    translate: 0 0;
+  }
+
+  /* Entering/exiting slide transforms (legacy data-attrs support) */
+  .drawer__content--left[data-entering="true"] .drawer__dialog,
+  .drawer__content--left[data-exiting="true"] .drawer__dialog {
+    translate: -100% 0;
+  }
+
+  .drawer__content--right[data-entering="true"] .drawer__dialog,
+  .drawer__content--right[data-exiting="true"] .drawer__dialog {
+    translate: 100% 0;
+  }
+
+  .drawer__content--top[data-entering="true"] .drawer__dialog,
+  .drawer__content--top[data-exiting="true"] .drawer__dialog {
+    translate: 0 -100%;
+  }
+
+  .drawer__content--bottom[data-entering="true"] .drawer__dialog,
+  .drawer__content--bottom[data-exiting="true"] .drawer__dialog {
+    translate: 0 100%;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .drawer__dialog {
+      transition: none;
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Header
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 0;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Heading
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__heading {
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.5;
+    color: var(--color-base-content);
+    margin: 0;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Body
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__body {
+    min-height: 0;
+    flex: 1;
+    font-size: 0.875rem;
+    line-height: 1.43;
+    color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Footer
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 0;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Handle
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 0.5rem;
+  }
+
+  .drawer__handle-bar,
+  .drawer__handle > [data-slot="drawer-handle-bar"] {
+    height: 0.25rem;
+    width: 2.25rem;
+    border-radius: 9999px;
+    background-color: color-mix(in oklab, var(--color-base-content) 25%, transparent);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Close Trigger
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__close-trigger {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border: none;
+    background: none;
+    border-radius: var(--radius-field, 0.375rem);
+    cursor: pointer;
+    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+    transition: color 150ms ease, background-color 150ms ease;
+    padding: 0;
+  }
+
+  .drawer__close-trigger:hover {
+    color: var(--color-base-content);
+    background-color: color-mix(in oklab, var(--color-base-content) 8%, transparent);
+  }
+
+  .drawer__close-trigger:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  .drawer__close-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    pointer-events: none;
+  }
+
+  .drawer__close-icon > * {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Element spacing
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__header + .drawer__body {
+    margin-top: 0.5rem;
+  }
+
+  .drawer__header + .drawer__footer {
+    margin-top: 1.25rem;
+  }
+
+  .drawer__body + .drawer__footer {
+    margin-top: 1.25rem;
+  }
+
+  .drawer__handle + .drawer__header {
+    margin-top: 0;
+  }
+
+  .drawer__handle + .drawer__body {
+    margin-top: 0;
+  }
+}