Drawer

A panel that slides in from the edge of the screen and can be swiped away.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/badge"	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/drawer"	"github.com/axadrn/shadcn-templ/v2/components/field"	"github.com/axadrn/shadcn-templ/v2/components/radiogroup") type drawerDemoTime struct {	Value       string	ID          string	Label       string	Description string	Badge       string} var drawerDemoTimes = []drawerDemoTime{	{Value: "asap", ID: "delivery-asap", Label: "Standard delivery", Description: "25–35 min · Driver assigned now", Badge: "Fastest"},	{Value: "5-00", ID: "delivery-5-00", Label: "5:00 PM – 5:15 PM", Description: "Prep starts at 4:45 PM"},	{Value: "5-30", ID: "delivery-5-30", Label: "5:30 PM – 5:45 PM", Description: "Good if you're heading home"},	{Value: "6-00", ID: "delivery-6-00", Label: "6:00 PM – 6:15 PM", Description: "Most popular · High demand"},	{Value: "6-30", ID: "delivery-6-30", Label: "6:30 PM – 6:45 PM", Description: "Last slot before kitchen closes"},} templ DrawerDemo() {	@drawer.Drawer(drawer.Props{ID: "drawer-demo", SwipeDirection: drawer.SwipeDirectionRight, ShowSwipeHandle: true}) {		@button.Button(button.Props{Variant: button.VariantSecondary, Attributes: drawer.Trigger(ctx)}) {			Open Drawer		}		@drawer.Content() {			@drawer.Header() {				@drawer.Title() {					Pick a delivery time				}				@drawer.Description() {					We'll prepare your order as soon as possible.				}			}			<div class="flex-1 scroll-fade overflow-y-auto p-4">				@radiogroup.RadioGroup(radiogroup.Props{Value: "asap", Class: "gap-2"}) {					for _, time := range drawerDemoTimes {						@field.Label(field.LabelProps{For: time.ID}) {							@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {								@field.Content() {									@field.Title(field.TitleProps{Class: "flex items-center gap-2"}) {										{ time.Label }										if time.Badge != "" {											@badge.Badge(badge.Props{Variant: badge.VariantSecondary}) {												{ time.Badge }											}										}									}									@field.Description() {										{ time.Description }									}								}								@radiogroup.Item(radiogroup.ItemProps{ID: time.ID, Value: time.Value})							}						}					}				}			</div>			@drawer.Footer() {				@button.Button(button.Props{ID: "drawer-demo-confirm", Class: "h-[34px]"}) {					Confirm Delivery Time				}				@button.Button(button.Props{Variant: button.VariantOutline, Attributes: drawer.Close(ctx)}) {					Cancel				}			}		}	}	<script nonce={ templ.GetNonce(ctx) }>		(() => {			// The dialog waits inside its portal <template> until drawer.js			// lifts it to <body>. The template copy wins over a stale portaled			// copy from a previous htmx swap; attributes and listeners set on			// it survive the lift (same node).			const drawerDemo = () => {				for (const tpl of document.querySelectorAll("template[data-tui-drawer-portal]")) {					const content = tpl.content.getElementById("drawer-demo");					if (content) return content;				}				return document.getElementById("drawer-demo");			}; 			// useIsMobile pendant (hooks/use-mobile.ts): swipeSwipeDirection is			// down and the swipe handle shows below the md breakpoint, right			// and no handle from md up. Demo-only behavior, so it lives here			// instead of the component API. The direction attributes live on			// the popup (Base UI Drawer.Popup).			const mq = window.matchMedia("(max-width: 767px)");			const apply = () => {				const dialog = drawerDemo();				const popup = dialog?.querySelector('[data-tui-drawer-popup]');				if (!popup) return;				popup.setAttribute("data-swipe-direction", mq.matches ? "down" : "right");				popup.setAttribute("data-swipe-axis", mq.matches ? "y" : "x");				const handle = popup.querySelector('[data-slot="drawer-swipe-handle"]');				// Inline display, because the handle's flex class would win				// over the [hidden] UA rule.				if (handle) handle.style.display = mq.matches ? "" : "none";			};			apply();			mq.addEventListener("change", apply); 			// handleConfirm pendant: close the drawer, then confirm the			// selected slot via toast.			const labels = {				"asap": "Standard delivery",				"5-00": "5:00 PM – 5:15 PM",				"5-30": "5:30 PM – 5:45 PM",				"6-00": "6:00 PM – 6:15 PM",				"6-30": "6:30 PM – 6:45 PM",			};			const confirm = drawerDemo()?.querySelector("#drawer-demo-confirm");			confirm?.addEventListener("click", () => {				const dialog = drawerDemo();				const selected = dialog?.querySelector("input[data-tui-radio-input]:checked");				if (!selected || !(selected.value in labels)) return;				window.tui.drawer.close(dialog);				window.tui.toast.add({					title: "Delivery time confirmed",					description: labels[selected.value],				});			});		})();	</script>}

Installation

shadcn-templ add drawer

Copy and paste the following code into your project.

components/drawer/drawer.templ

package drawer import (	"context"	"encoding/json" 	"github.com/axadrn/shadcn-templ/v2/utils") type ctxKey string const stateKey ctxKey = "drawerState" // SwipeDirection is the swipe direction used to dismiss the drawer. It also sets// the edge of the screen the drawer rests on: down = bottom, up = top,// left = left edge, right = right edge (1:1 Base UI swipeSwipeDirection).type SwipeDirection string const (	SwipeDirectionDown  SwipeDirection = "down"	SwipeDirectionUp    SwipeDirection = "up"	SwipeDirectionLeft  SwipeDirection = "left"	SwipeDirectionRight SwipeDirection = "right") type ctxState struct {	id               string	parentID         string	open             bool	disableClickAway bool	disableModal     bool	direction        SwipeDirection	showSwipeHandle  bool	snapJSON         string	snapSequential   bool} func state(ctx context.Context) ctxState {	if s, ok := ctx.Value(stateKey).(ctxState); ok {		return s	}	return ctxState{}} type Props struct {	ID string	// Open renders the drawer already open on page load.	Open bool	// DisableDismissible keeps the drawer open when clicking the backdrop	// (Base UI's disablePointerDismissal).	DisableDismissible bool	// DisableModal opens the drawer without backdrop, focus trap and body	// scroll lock (Base UI's modal={false}).	DisableModal bool	// SwipeDirection the drawer is swiped in to dismiss. Defaults to down.	SwipeDirection SwipeDirection	// ShowSwipeHandle renders the drag handle bar inside the panel.	ShowSwipeHandle bool	// SnapPoints snaps a vertical drawer to preset heights (Base UI's	// snapPoints). Numbers between 0 and 1 are fractions of the viewport,	// numbers greater than 1 are pixels, strings support px and rem units	// (e.g. []any{"31rem", 1}). The first entry is the initial snap point.	SnapPoints []any	// SnapToSequentialPoints disables velocity-based snap skipping so drag	// distance determines the next snap point (Base UI's	// snapToSequentialPoints).	SnapToSequentialPoints bool} type ContentProps struct {	Class      string	Attributes templ.Attributes} type SwipeHandleProps struct {	Class      string	Attributes templ.Attributes} type HeaderProps struct {	ID         string	Class      string	Attributes templ.Attributes} type FooterProps struct {	ID         string	Class      string	Attributes templ.Attributes} type TitleProps struct {	ID         string	Class      string	Attributes templ.Attributes} type DescriptionProps struct {	ID         string	Class      string	Attributes templ.Attributes} // Drawer renders no element: it only carries the id and options that link// Trigger, Content and Close (via ctx). 1:1 base/ui/drawer.tsx Drawer, which// wraps the Base UI Drawer.Root without its own DOM. A Drawer rendered inside// another Drawer's subtree is nested (Base UI's context nesting): its dialog// links to the parent so drawer.js can drive the stacking behavior, and it// renders no overlay (DrawerBackdrop enabled: !nested).templ Drawer(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.ID == "" {		{{ p.ID = utils.RandomID() }}	}	if p.SwipeDirection == "" {		{{ p.SwipeDirection = SwipeDirectionDown }}	}	{{ parentID := state(ctx).id }}	{{ snapJSON := "" }}	if len(p.SnapPoints) > 0 {		{{	if b, err := json.Marshal(p.SnapPoints); err == nil {		snapJSON = string(b)	}		}}	}	{{ ctx = context.WithValue(ctx, stateKey, ctxState{id: p.ID, parentID: parentID, open: p.Open, disableClickAway: p.DisableDismissible, disableModal: p.DisableModal, direction: p.SwipeDirection, showSwipeHandle: p.ShowSwipeHandle, snapJSON: snapJSON, snapSequential: p.SnapToSequentialPoints}) }}	{ children... }} // Trigger returns the attributes that turn any element (usually a button)// into the drawer trigger — the render prop equivalent: no wrapper element.func Trigger(ctx context.Context) templ.Attributes {	return TriggerFor(state(ctx).id)} // TriggerFor targets a drawer outside the current Drawer root by id.func TriggerFor(id string) templ.Attributes {	return templ.Attributes{		"data-tui-drawer-trigger": true,		"aria-controls":           id,		"aria-haspopup":           "dialog",		"aria-expanded":           "false",	}} // Close returns the attributes that make any element close the drawer.func Close(ctx context.Context) templ.Attributes {	return CloseFor(state(ctx).id)} // CloseFor targets a drawer outside the current Drawer root by id.func CloseFor(id string) templ.Attributes {	return templ.Attributes{		"data-tui-drawer-close":  true,		"data-tui-drawer-target": id,	}} // Content is the 1:1 pendant of base/ui/drawer.tsx DrawerContent, which// composes DrawerPortal > DrawerOverlay + Drawer.Viewport > Drawer.Popup >// Drawer.Content:////   - The native <dialog> plays the Drawer.Viewport role: a fullscreen,//     visually empty positioning container that hosts the swipe listeners//     (DrawerViewport does exactly that). showModal() gives it the top//     layer, focus trap and inertness Base UI builds by hand.//   - The overlay <div> is DrawerOverlay (cn-drawer-overlay), rendered for//     modal drawers only and, like Base UI's DrawerBackdrop (enabled://     !nested), never for nested drawers.//   - The popup <div> is Drawer.Popup and carries the verbatim class blocks//     from the reference; drawer.js drives the Base UI lifecycle attributes//     (data-starting-style, data-ending-style, data-swiping, data-expanded,//     data-nested-drawer-open, data-nested-drawer-swiping) on popup and//     overlay, so the blocks apply 1:1.//// The <template> keeps the SSRd content inert until drawer.js portals it// (DrawerPortal pendant). data-tui-dialog-show-modal is shared with// dialog.js: both scripts key the body scroll lock release on// dialog[open][data-tui-dialog-show-modal="true"], so a closing dialog never// unlocks scroll under an open drawer.//// The inline styles seed the vars the reference registers with initial// values via CSS.registerProperty (DrawerPopup removeCSSVariableInheritance)// or sets inline on popup and backdrop, so every calc() in the class strings// resolves before drawer.js touches them.templ Content(props ...ContentProps) {	{{ var p ContentProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	{{ s := state(ctx) }}	{{ axis := "y" }}	if s.direction == SwipeDirectionLeft || s.direction == SwipeDirectionRight {		{{ axis = "x" }}	}	{{ hasSnapPoints := s.snapJSON != "" }}	<template data-tui-drawer-portal>		<dialog			id={ s.id }			data-tui-drawer-content			data-modal={ utils.IfElse(!s.disableModal, "true", "false") }			data-tui-dialog-show-modal={ utils.IfElse(!s.disableModal, "true", "false") }			data-tui-drawer-initial-open={ utils.IfElse(s.open, "true", "false") }			if s.parentID != "" {				data-tui-drawer-parent={ s.parentID }			}			if s.disableClickAway {				data-tui-drawer-disable-dismissible="true"			}			if hasSnapPoints {				data-tui-drawer-snap-points={ s.snapJSON }			}			if s.snapSequential {				data-tui-drawer-snap-sequential="true"			}			class={				utils.CN(					// 1:1 DrawerContent's Drawer.Viewport class. data-[modal=true]					// makes the fullscreen viewport swallow outside presses; non					// modal drawers stay pointer-events-none so the page keeps					// working underneath.					"pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto",					// Native <dialog> resets: the UA gives dialogs padding, border,					// background, fit-content sizing and auto margins that the					// reference's viewport <div> does not have. size-auto with					// inset-0 stretches it over the viewport. The UA ::backdrop is					// hidden because the overlay element below is the real					// DrawerOverlay. dialog:not([open]) keeps the UA display:none,					// the SSR pendant of Base UI unmounting while closed; while					// closing, [open] stays set until drawer.js calls close() after					// the exit transition, so the animation still plays.					"m-0 size-auto max-w-none max-h-none border-0 bg-transparent p-0 outline-none [&::backdrop]:hidden",				),			}			{ p.Attributes... }		>			if !s.disableModal && s.parentID == "" {				<div					data-slot="drawer-overlay"					data-tui-drawer-overlay					role="presentation"					if hasSnapPoints {						data-snap-points=""					}					style="--drawer-swipe-progress:0;--drawer-swipe-strength:1"					class="cn-drawer-overlay fixed inset-0 z-50 min-h-dvh opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute"				></div>			}			<div				data-slot="drawer-popup"				data-tui-drawer-popup				data-swipe-direction={ string(s.direction) }				data-swipe-axis={ axis }				if hasSnapPoints {					data-snap-points=""				}				tabindex="-1"				style="--drawer-swipe-progress:0;--nested-drawers:0;--drawer-swipe-strength:1;--drawer-swipe-movement-x:0px;--drawer-swipe-movement-y:0px;--drawer-snap-point-offset:0px"				class={					utils.CN(						// 1:1 base/ui/drawer.tsx DrawerContent popup (Base UI						// Drawer.Popup), the look comes from cn-drawer-popup.						// Base.						"cn-drawer-popup group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords]",						// Nested.						"data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",						// Bleed.						"after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",						// Sizing.						"[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",						// Stack.						"[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",						// Transitions.						"data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",						// Axis: y.						"data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",						// Axis: x.						"data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",						// SwipeDirection: down.						"data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",						// SwipeDirection: up.						"data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",						// SwipeDirection: left.						"data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",						// SwipeDirection: right.						"data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]",						p.Class,					),				}			>				if s.showSwipeHandle {					@SwipeHandle()				}				<div					data-slot="drawer-content"					class="cn-drawer-content-base flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"				>					{ children... }				</div>			</div>		</dialog>	</template>} // SwipeHandle is the drag handle bar. Content renders it automatically when// ShowSwipeHandle is set on the Drawer root; it is exported for custom// compositions like the reference's DrawerSwipeHandle.templ SwipeHandle(props ...SwipeHandleProps) {	{{ var p SwipeHandleProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		data-slot="drawer-swipe-handle"		aria-hidden="true"		class={ utils.CN("cn-drawer-swipe-handle relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:order-last active:cursor-grabbing", p.Class) }		{ p.Attributes... }	></div>} templ Header(props ...HeaderProps) {	{{ var p HeaderProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="drawer-header"		class={ utils.CN("cn-drawer-header-base flex shrink-0 flex-col group-data-[swipe-axis=y]/drawer-popup:text-center", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ Footer(props ...FooterProps) {	{{ var p FooterProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="drawer-footer"		class={ utils.CN("cn-drawer-footer-base mt-auto flex shrink-0 flex-col", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ Title(props ...TitleProps) {	{{ var p TitleProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="drawer-title"		class={ utils.CN("cn-drawer-title cn-font-heading", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ Description(props ...DescriptionProps) {	{{ var p DescriptionProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="drawer-description"		class={ utils.CN("cn-drawer-description text-balance", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>}

components/drawer/drawer.js

(function () {  "use strict";   // Gesture constants, 1:1 from Base UI (packages/react/src/utils/useSwipeDismiss.ts  // and packages/react/src/drawer/viewport/DrawerViewport.tsx).  const MIN_SWIPE_THRESHOLD = 10; // px floor for the dismiss threshold  const FAST_SWIPE_VELOCITY = 0.5; // px/ms, a flick dismisses regardless of distance  const SNAP_VELOCITY_THRESHOLD = 0.5;  const SNAP_VELOCITY_MULTIPLIER = 300;  const MAX_SNAP_VELOCITY = 4;  const MIN_VELOCITY_DURATION_MS = 50;  const MIN_RELEASE_VELOCITY_DURATION_MS = 16;  const MAX_RELEASE_VELOCITY_AGE_MS = 80;  const MIN_SWIPE_RELEASE_VELOCITY = 0.2;  const MAX_SWIPE_RELEASE_VELOCITY = 4;  const MIN_SWIPE_RELEASE_DURATION_MS = 80;  const MAX_SWIPE_RELEASE_DURATION_MS = 360;  const MIN_SWIPE_RELEASE_SCALAR = 0.1;  const MAX_SWIPE_RELEASE_SCALAR = 1;  const AXIS_LOCK_SLOP = 6;  const AXIS_LOCK_BIAS = 2;  // Base UI's DEFAULT_IGNORE_SELECTOR: mouse swipes never start on these.  // Touch swipes may (ignoreSelectorWhenTouch: false in DrawerViewport).  const IGNORE_SELECTOR = 'button,a,input,select,textarea,label,[role="button"]';  // The ending transition is duration-450, or strength*400ms after a swipe;  // the fallback timer only fires when no transform transition runs at all.  const CLOSE_FALLBACK_MS = 500;   function clamp(value, min, max) {    return Math.min(Math.max(value, min), max);  }   // Displacement of (dx, dy) along the dismiss direction (useSwipeDismiss  // getDisplacement).  function displacement(direction, dx, dy) {    switch (direction) {      case "up":        return -dy;      case "down":        return dy;      case "left":        return -dx;      case "right":        return dx;      default:        return 0;    }  }   // ----- the drawer parts ----------------------------------------------------  //  // The <dialog> is the Drawer.Viewport (fullscreen, hosts the listeners),  // the popup div is Drawer.Popup, the overlay div is DrawerOverlay (only  // rendered for modal, non-nested drawers). Lifecycle attributes and swipe  // vars land on popup and overlay, exactly where Base UI puts them.   function popupOf(dialog) {    return dialog.querySelector(":scope > [data-tui-drawer-popup]");  }   function overlayOf(dialog) {    return dialog.querySelector(":scope > [data-tui-drawer-overlay]");  }   function setPartsAttr(dialog, name, on) {    const popup = popupOf(dialog);    const overlay = overlayOf(dialog);    if (popup) popup.toggleAttribute(name, on);    if (overlay) overlay.toggleAttribute(name, on);  }   function directionOf(dialog) {    return popupOf(dialog)?.getAttribute("data-swipe-direction") || "down";  }   function axisIsY(dialog) {    const d = directionOf(dialog);    return d === "down" || d === "up";  }   // Current translate/scale from the computed transform matrix  // (useSwipeDismiss getElementTransform), so a grab during the spring-back  // continues from the on-screen position instead of jumping.  function getTransform(element) {    const transform = window.getComputedStyle(element).transform;    let x = 0;    let y = 0;    let scale = 1;    if (transform && transform !== "none") {      const matrix = transform.match(/matrix(?:3d)?\(([^)]+)\)/);      if (matrix) {        const values = matrix[1].split(", ").map(parseFloat);        if (values.length === 6) {          x = values[4];          y = values[5];          scale = Math.sqrt(values[0] * values[0] + values[1] * values[1]);        } else if (values.length === 16) {          x = values[12];          y = values[13];          scale = values[0];        }      }    }    return { x, y, scale };  }   // Resolves a <dialog data-tui-drawer-content> from an id, the element  // itself, or anything inside it.  function getDrawer(target) {    if (!target) return null;    if (typeof target === "string") {      const el = document.getElementById(target);      return el && el.matches("dialog[data-tui-drawer-content]") ? ensureDrawer(el) : null;    }    if (target.matches?.("dialog[data-tui-drawer-content]")) return ensureDrawer(target);    return ensureDrawer(target.closest?.("dialog[data-tui-drawer-content]") || null);  }   function drawerFor(element) {    const id =      element.getAttribute("aria-controls") || element.getAttribute("data-tui-drawer-target");    if (id) return getDrawer(id);    return getDrawer(element);  }   function triggersFor(dialog) {    if (!dialog.id) return [];    return document.querySelectorAll(      '[data-tui-drawer-trigger][aria-controls="' + dialog.id + '"]',    );  }   function updateState(dialog, isOpen) {    triggersFor(dialog).forEach((trigger) => {      trigger.setAttribute("aria-expanded", isOpen ? "true" : "false");    });  }   // ----- nested drawers ------------------------------------------------------  //  // A Drawer rendered inside another Drawer's subtree carries  // data-tui-drawer-parent (the SSR pendant of Base UI's context nesting).  // Everything below is recomputed from the DOM on every state change, so  // swapped-in or swapped-out drawers never leave stale stacking state.   function parentOf(dialog) {    const id = dialog.getAttribute("data-tui-drawer-parent");    if (!id) return null;    const el = document.getElementById(id);    return el && el.matches("dialog[data-tui-drawer-content]") ? el : null;  }   function ancestorsOf(dialog) {    const chain = [];    let current = parentOf(dialog);    while (current && !chain.includes(current)) {      chain.push(current);      current = parentOf(current);    }    return chain;  }   function hasOpenNested(dialog) {    return popupOf(dialog)?.hasAttribute("data-nested-drawer-open") || false;  }   // Mirrors the child's swipe progress into every ancestor popup  // (DrawerRoot's onNestedSwipeProgressChange chain: the var feeds  // --stack-progress, easing the parent back to the front while the child is  // dragged away).  function notifyAncestors(dialog, progress) {    ancestorsOf(dialog).forEach((ancestor) => {      const popup = popupOf(ancestor);      if (popup) popup.style.setProperty("--drawer-swipe-progress", String(progress));    });  }   function setAncestorsSwiping(dialog, on) {    ancestorsOf(dialog).forEach((ancestor) => {      const popup = popupOf(ancestor);      if (popup) popup.toggleAttribute("data-nested-drawer-swiping", on);    });  }   // Recomputes the whole nested-drawer stack: --nested-drawers counts,  // data-nested-drawer-open, --drawer-frontmost-height and the --drawer-height  // pin (DrawerPopup keeps the measured height while a nested drawer is  // present or the popup is animating out; otherwise the height stays auto).  function syncStack() {    const dialogs = Array.from(document.querySelectorAll("dialog[data-tui-drawer-content]"));    if (!dialogs.length) return;     const info = new Map();    dialogs.forEach((d) => {      info.set(d, { openDesc: 0, present: false, frontmost: 0, frontmostDepth: -1 });    });     for (const d of dialogs) {      const popup = popupOf(d);      if (!popup) continue;      const closing = popup.hasAttribute("data-ending-style");      if (!d.open && !closing) continue;      const chain = ancestorsOf(d);      // A closing drawer no longer counts as open (Base UI flips `open`      // before the exit transition) but still pins the parents' heights      // (`present`: open || transitionStatus === 'ending').      for (const ancestor of chain) {        const ai = info.get(ancestor);        if (!ai) continue;        ai.present = true;        if (d.open && !closing) {          ai.openDesc += 1;          // The frontmost drawer of the stack is the deepest open one.          const depth = chain.length; // distance of d below the root, relative depth works per ancestor          if (depth > ai.frontmostDepth) {            ai.frontmostDepth = depth;            ai.frontmost = d._tuiHeight || popup.offsetHeight;          }        }      }    }     for (const d of dialogs) {      const popup = popupOf(d);      if (!popup || !d.open) continue;      const i = info.get(d);      const closing = popup.hasAttribute("data-ending-style");      if (i.openDesc === 0 && !closing) {        // Measure while unobstructed; the cached value is what gets pinned        // once a nested drawer opens (DrawerPopup keepHeightWhileNested).        d._tuiHeight = popup.offsetHeight;      }      popup.style.setProperty("--nested-drawers", String(i.openDesc));      popup.toggleAttribute("data-nested-drawer-open", i.openDesc > 0);      if (i.openDesc > 0 && i.frontmost > 0) {        popup.style.setProperty("--drawer-frontmost-height", i.frontmost + "px");      } else {        popup.style.removeProperty("--drawer-frontmost-height");      }      if (i.present && d._tuiHeight > 0) {        popup.style.setProperty("--drawer-height", d._tuiHeight + "px");      } else if (!closing) {        popup.style.removeProperty("--drawer-height");      }      if (i.openDesc === 0) {        popup.removeAttribute("data-nested-drawer-swiping");        popup.style.setProperty("--drawer-swipe-progress", "0");      }    }  }   // ----- snap points ---------------------------------------------------------  //  // Port of packages/react/src/drawer/root/useDrawerSnapPoints.ts plus the  // snap branches of DrawerViewport. Snap points apply to vertical drawers;  // the config is read once from data-tui-drawer-snap-points (JSON, the SSR  // pendant of the snapPoints prop) and kept on the element itself so  // swapped-out drawers take their state with them.   function snapStateOf(dialog) {    if (dialog._tuiSnap !== undefined) return dialog._tuiSnap;    const raw = dialog.getAttribute("data-tui-drawer-snap-points");    let points = null;    if (raw) {      try {        points = JSON.parse(raw);      } catch {        points = null;      }    }    if (!Array.isArray(points) || points.length === 0) {      dialog._tuiSnap = null;      return null;    }    dialog._tuiSnap = {      points,      resolved: [],      active: points[0],      popupHeight: 0,      sequential: dialog.hasAttribute("data-tui-drawer-snap-sequential"),    };    return dialog._tuiSnap;  }   // Resolves the vertical swipe movement for a snap point, damping the drag  // once it overshoots the fully-open edge (useDrawerSnapPoints  // getSnapPointSwipeMovement).  function getSnapPointSwipeMovement(baseOffset, movementValue) {    const nextOffset = baseOffset + movementValue;    if (nextOffset >= 0) return movementValue;    return -Math.sqrt(-nextOffset) - baseOffset;  }   // Numbers <= 1 are viewport fractions, > 1 pixels; strings take px/rem  // (useDrawerSnapPoints resolveSnapPointValue).  function resolveSnapValue(value, viewportHeight, rootFontSize) {    if (!isFinite(viewportHeight) || viewportHeight <= 0) return null;    if (typeof value === "number") {      if (!isFinite(value)) return null;      if (value <= 1) return clamp(value, 0, 1) * viewportHeight;      return value;    }    if (typeof value !== "string") return null;    const trimmed = value.trim();    if (trimmed.endsWith("px")) {      const parsed = Number.parseFloat(trimmed);      return isFinite(parsed) ? parsed : null;    }    if (trimmed.endsWith("rem")) {      const parsed = Number.parseFloat(trimmed);      return isFinite(parsed) ? parsed * rootFontSize : null;    }    return null;  }   function closestSnapPointIndex(values, target) {    let closestIndex = -1;    let closestDistance = Infinity;    for (let index = 0; index < values.length; index += 1) {      const distance = Math.abs(values[index] - target);      if (distance < closestDistance) {        closestDistance = distance;        closestIndex = index;      }    }    return closestIndex;  }   // Resolves the configured snap points against the current viewport and  // popup size (useDrawerSnapPoints resolvedSnapPoints, including the  // last-wins dedupe of near-equal heights).  function resolveSnapPoints(dialog) {    const snap = snapStateOf(dialog);    if (!snap) return;    const popup = popupOf(dialog);    const viewportHeight = dialog.clientHeight || document.documentElement.clientHeight;    const rootFontSize =      parseFloat(window.getComputedStyle(document.documentElement).fontSize) || 16;    const popupHeight = popup ? popup.offsetHeight : 0;    snap.popupHeight = popupHeight;    if (viewportHeight <= 0 || popupHeight <= 0) {      snap.resolved = [];      return;    }    const maxHeight = Math.min(popupHeight, viewportHeight);    const resolved = [];    for (const value of snap.points) {      const height = resolveSnapValue(value, viewportHeight, rootFontSize);      if (height === null) continue;      const clamped = clamp(height, 0, maxHeight);      resolved.push({ value, height: clamped, offset: Math.max(0, popupHeight - clamped) });    }    const deduped = [];    const seenHeights = [];    for (let index = resolved.length - 1; index >= 0; index -= 1) {      const point = resolved[index];      if (seenHeights.some((height) => Math.abs(height - point.height) <= 1)) continue;      seenHeights.push(point.height);      deduped.push(point);    }    deduped.reverse();    snap.resolved = deduped;  }   // The offset of the active snap point; falls back to the closest resolved  // point when the active value has no exact match (useDrawerSnapPoints  // resolvedActiveSnapPoint).  function activeSnapOffset(dialog, snap) {    if (snap.active === null || snap.active === undefined) return null;    const exact = snap.resolved.find((point) => Object.is(point.value, snap.active));    if (exact) return exact.offset;    if (!snap.resolved.length) return null;    const viewportHeight = dialog.clientHeight || document.documentElement.clientHeight;    const rootFontSize =      parseFloat(window.getComputedStyle(document.documentElement).fontSize) || 16;    const resolvedHeight = resolveSnapValue(snap.active, viewportHeight, rootFontSize);    if (resolvedHeight === null) return null;    const clamped = clamp(resolvedHeight, 0, Math.min(snap.popupHeight, viewportHeight));    const index = closestSnapPointIndex(      snap.resolved.map((point) => point.height),      clamped,    );    return index === -1 ? null : snap.resolved[index].offset;  }   // The offset range between the two lowest snap points, used for the  // overlay progress with snap points (DrawerViewport snapPointRange).  function snapRangeOf(dialog, snap) {    if (!snap || snap.points.length < 2 || snap.resolved.length < 2 || !axisIsY(dialog)) {      return null;    }    const offsets = snap.resolved.map((point) => point.offset).sort((a, b) => a - b);    return { minOffset: offsets[0], range: offsets[1] - offsets[0] };  }   // Applies the active snap point: --drawer-snap-point-offset on the popup  // (negative for `up`, DrawerPopup snapPointOffsetValue), data-expanded at  // the full snap point (activeSnapPoint === 1) and the steady-state overlay  // progress between snap points.  function applySnapState(dialog) {    const snap = snapStateOf(dialog);    const popup = popupOf(dialog);    if (!snap || !popup || !axisIsY(dialog)) return;    const offset = activeSnapOffset(dialog, snap);    const direction = directionOf(dialog);    popup.style.setProperty(      "--drawer-snap-point-offset",      offset === null ? "0px" : (direction === "up" ? -offset : offset) + "px",    );    popup.toggleAttribute("data-expanded", snap.active === 1);    const overlay = overlayOf(dialog);    const range = snapRangeOf(dialog, snap);    if (overlay && range && range.range > 0 && offset !== null) {      overlay.style.setProperty(        "--drawer-swipe-progress",        String(clamp((offset - range.minOffset) / range.range, 0, 1)),      );    }  }   // Re-resolve snap offsets when the viewport resizes (the reference  // observes the viewport and popup with a ResizeObserver).  function watchSnapResize(dialog) {    if (dialog._tuiSnapRO || typeof ResizeObserver !== "function") return;    if (!snapStateOf(dialog)) return;    dialog._tuiSnapRO = new ResizeObserver(() => {      if (!dialog.open || popupOf(dialog)?.hasAttribute("data-swiping")) return;      resolveSnapPoints(dialog);      applySnapState(dialog);    });    dialog._tuiSnapRO.observe(dialog);  }   function unwatchSnapResize(dialog) {    if (dialog._tuiSnapRO) {      dialog._tuiSnapRO.disconnect();      delete dialog._tuiSnapRO;    }  }   // ----- scroll lock ---------------------------------------------------------  //  // Base UI locks the background scroll while a modal drawer is open and pads  // the body by the scrollbar width so the page does not shift (same as  // dialog.js). Like Base UI's ScrollLocker.acquire (packages/utils/src/  // useScrollLock.ts), the lock lands in a 0ms timeout: the click's frame  // paints the enter transition without paying the full-page scrollbar  // relayout first.  let lockTimer;   function applyScrollLock() {    lockTimer = undefined;    if (!document.querySelector('dialog[open][data-tui-dialog-show-modal="true"]')) return;    if (document.body.hasAttribute("data-tui-scroll-locked")) return;    const scrollbar = window.innerWidth - document.documentElement.clientWidth;    document.body.setAttribute("data-tui-scroll-locked", "");    document.body.style.overflow = "hidden";    if (scrollbar > 0) document.body.style.paddingRight = scrollbar + "px";  }   function lockScroll() {    if (lockTimer !== undefined || document.body.hasAttribute("data-tui-scroll-locked")) return;    lockTimer = window.setTimeout(applyScrollLock, 0);  }   function unlockScroll() {    // Drawer dialogs carry data-tui-dialog-show-modal too, so this guard (the    // same one dialog.js uses) covers open dialogs and open drawers alike.    if (document.querySelector('dialog[open][data-tui-dialog-show-modal="true"]')) return;    window.clearTimeout(lockTimer);    lockTimer = undefined;    document.body.removeAttribute("data-tui-scroll-locked");    document.body.style.overflow = "";    document.body.style.paddingRight = "";  }   function resetSwipeVars(dialog) {    const popup = popupOf(dialog);    const overlay = overlayOf(dialog);    if (popup) {      popup.style.setProperty("--drawer-swipe-movement-x", "0px");      popup.style.setProperty("--drawer-swipe-movement-y", "0px");      popup.style.setProperty("--drawer-swipe-progress", "0");      popup.style.setProperty("--drawer-swipe-strength", "1");    }    if (overlay) {      overlay.style.setProperty("--drawer-swipe-progress", "0");      overlay.style.setProperty("--drawer-swipe-strength", "1");    }  }   function cleanupClosed(dialog) {    setPartsAttr(dialog, "data-ending-style", false);    setPartsAttr(dialog, "data-starting-style", false);    setPartsAttr(dialog, "data-swiping", false);    const popup = popupOf(dialog);    if (popup) {      popup.style.removeProperty("transform");      popup.style.removeProperty("transition");      popup.style.removeProperty("--drawer-height");      popup.style.removeProperty("--drawer-frontmost-height");      popup.style.setProperty("--nested-drawers", "0");      popup.style.setProperty("--drawer-snap-point-offset", "0px");      popup.removeAttribute("data-nested-drawer-open");      popup.removeAttribute("data-nested-drawer-swiping");      popup.removeAttribute("data-expanded");    }    resetSwipeVars(dialog);    // Closing resets the snap point to the default (DrawerRoot    // handleOpenChange), ready for the next open.    const snap = snapStateOf(dialog);    if (snap) snap.active = snap.points[0];    unwatchSnapResize(dialog);    updateState(dialog, false);    unlockScroll();    syncStack();  }   function openDrawer(target) {    const dialog = getDrawer(target);    if (!dialog) return;    const popup = popupOf(dialog);    if (!popup) return;     window.clearTimeout(dialog._tuiCloseTimer);    delete dialog._tuiCloseTimer;    setPartsAttr(dialog, "data-ending-style", false);     if (!dialog.open) {      resetSwipeVars(dialog);      // Base UI mounts the popup with its starting style (the off-screen      // --closed-transform); painting that state first makes the removal      // below transition the panel in (450ms cubic-bezier(0.22,1,0.36,1)).      setPartsAttr(dialog, "data-starting-style", true);      try {        if (dialog.getAttribute("data-tui-dialog-show-modal") === "true") {          dialog.showModal();          lockScroll();        } else {          dialog.show();        }      } catch {        setPartsAttr(dialog, "data-starting-style", false);        return;      }      // With layout available, resolve the snap points and seed the default      // snap offset so the enter transition lands on the first snap point.      if (snapStateOf(dialog) && axisIsY(dialog)) {        resolveSnapPoints(dialog);        applySnapState(dialog);        watchSnapResize(dialog);      }    }     void popup.offsetWidth;    setPartsAttr(dialog, "data-starting-style", false);    updateState(dialog, true);    syncStack();  }   // strength is Base UI's --drawer-swipe-strength scalar: the ending  // transition runs for strength*400ms. 1 for non-swipe closes.  function closeDrawer(target, strength) {    const dialog = getDrawer(target);    if (!dialog) return;    const popup = popupOf(dialog);     if (!dialog.open || !popup) {      updateState(dialog, false);      return;    }    if (popup.hasAttribute("data-ending-style")) return;     // Pin the measured height for the exit (DrawerPopup sets --drawer-height    // while transitionStatus is 'ending'), so the panel cannot collapse    // mid-transition.    const height = popup.offsetHeight;    if (height > 0) popup.style.setProperty("--drawer-height", height + "px");     const value =      typeof strength === "number" && isFinite(strength) && strength > 0 ? strength : 1;    popup.style.setProperty("--drawer-swipe-strength", String(value));    const overlay = overlayOf(dialog);    if (overlay) overlay.style.setProperty("--drawer-swipe-strength", String(value));    setPartsAttr(dialog, "data-ending-style", true);    updateState(dialog, false);    // The stack treats a closing drawer as closed (Base UI flips `open`    // before the exit transition), so the parent starts scaling forward now.    syncStack();     const finish = () => {      popup.removeEventListener("transitionend", onTransitionEnd);      window.clearTimeout(dialog._tuiCloseTimer);      delete dialog._tuiCloseTimer;      if (dialog.open) dialog.close(); // the close handler runs cleanupClosed      else cleanupClosed(dialog);    };    const onTransitionEnd = (event) => {      if (event.target === popup && event.propertyName === "transform") finish();    };    popup.addEventListener("transitionend", onTransitionEnd);    dialog._tuiCloseTimer = window.setTimeout(finish, CLOSE_FALLBACK_MS);  }   function isDrawerOpen(target) {    return getDrawer(target)?.open || false;  }   function toggleDrawer(target) {    isDrawerOpen(target) ? closeDrawer(target) : openDrawer(target);  }   // Sets the active snap point (the pendant of the controlled snapPoint  // prop) and animates the popup to it.  function setSnapPoint(target, value) {    const dialog = getDrawer(target);    if (!dialog) return;    const snap = snapStateOf(dialog);    if (!snap) return;    snap.active = value;    if (dialog.open) {      resolveSnapPoints(dialog);      applySnapState(dialog);    }  }   function getSnapPoint(target) {    const dialog = getDrawer(target);    const snap = dialog ? snapStateOf(dialog) : null;    return snap ? snap.active : null;  }   // ----- swipe to dismiss ----------------------------------------------------  //  // Port of the Base UI drawer gesture (useSwipeDismiss + DrawerViewport):  // - the <dialog> viewport hosts the listeners, exactly like DrawerViewport  // - mouse swipes start on the panel chrome (popup minus [data-slot=  //   drawer-content] minus interactive elements), touch swipes anywhere in  //   the popup: the reference's isDrawerContentTarget /  //   ignoreSelectorWhenTouch behavior  // - with snap points, both vertical directions are legal (directions  //   ['down','up']) and the release snaps instead of dismissing  // - swiping is disabled while a nested drawer is open on top (enabled:  //   mounted && !nestedDrawerOpen)  // - scroll arbitration keeps the reference's rules (claim the gesture at the  //   scroller's dismiss edge, yield to cross-axis scrolling past a 6px slop)  //   but drops iOS pinch/text-selection special cases   function findScrollable(start, boundary, vertical) {    let el = start instanceof Element ? start : null;    while (el && el !== boundary) {      if (el instanceof HTMLElement) {        const overflow = window.getComputedStyle(el)[vertical ? "overflowY" : "overflowX"];        const scrollable = overflow === "auto" || overflow === "scroll";        const overflows = vertical          ? el.scrollHeight > el.clientHeight          : el.scrollWidth > el.clientWidth;        if (scrollable && overflows) return el;      }      el = el.parentElement;    }    return null;  }   // Dismissing toward down/right swipes from the scroller's start edge,  // up/left from its end edge (DrawerViewport isAtSwipeStartEdge).  function atDismissEdge(scroller, direction) {    if (direction === "down") return scroller.scrollTop <= 0;    if (direction === "up")      return scroller.scrollTop >= Math.max(0, scroller.scrollHeight - scroller.clientHeight);    if (direction === "right") return scroller.scrollLeft <= 0;    return scroller.scrollLeft >= Math.max(0, scroller.scrollWidth - scroller.clientWidth);  }   function movingTowardDismiss(direction, delta) {    return direction === "down" || direction === "right" ? delta > 0 : delta < 0;  }   // Maps release velocity to Base UI's --drawer-swipe-strength scalar  // (DrawerViewport resolveSwipeRelease): the faster the flick and the  // shorter the remaining distance, the shorter the exit transition. With  // snap points, the active snap offset already shifted the popup along the  // dismiss direction and counts toward the travelled distance.  function resolveSwipeStrength(dialog, size, disp, releaseVelocity, overallVelocity) {    let base = 0;    const snap = snapStateOf(dialog);    if (snap && axisIsY(dialog) && snap.resolved.length > 0) {      const offset = activeSnapOffset(dialog, snap);      if (offset !== null) base = offset;    }    const remaining = Math.max(0, size - (base + disp));    if (size <= 0 || remaining <= 0) return 1;    const velocity = Math.abs(releaseVelocity) > 0 ? releaseVelocity : overallVelocity;    if (velocity <= MIN_SWIPE_RELEASE_VELOCITY) return 1;    const clamped = clamp(velocity, MIN_SWIPE_RELEASE_VELOCITY, MAX_SWIPE_RELEASE_VELOCITY);    const durationMs = clamp(      remaining / clamped,      MIN_SWIPE_RELEASE_DURATION_MS,      MAX_SWIPE_RELEASE_DURATION_MS,    );    const normalized =      (durationMs - MIN_SWIPE_RELEASE_DURATION_MS) /      (MAX_SWIPE_RELEASE_DURATION_MS - MIN_SWIPE_RELEASE_DURATION_MS);    return MIN_SWIPE_RELEASE_SCALAR + normalized * (MAX_SWIPE_RELEASE_SCALAR - MIN_SWIPE_RELEASE_SCALAR);  }   function attachSwipe(dialog) {    const state = {      swiping: false,      pointerId: null,      startX: 0,      startY: 0,      startTime: 0,      initial: { x: 0, y: 0, scale: 1 },      offsetX: 0,      offsetY: 0,      size: 0,      lastSample: null,      lastVelX: 0,      lastVelY: 0,      nestedActive: false,      touch: null,    };     function startSwipe(x, y, time) {      const popup = popupOf(dialog);      if (!popup) return;      state.swiping = true;      state.startX = x;      state.startY = y;      state.startTime = time;      state.initial = getTransform(popup);      state.offsetX = state.initial.x;      state.offsetY = state.initial.y;      state.size = axisIsY(dialog) ? popup.offsetHeight : popup.offsetWidth;      state.lastSample = { x: state.initial.x, y: state.initial.y, time };      state.lastVelX = 0;      state.lastVelY = 0;      state.nestedActive = false;      setPartsAttr(dialog, "data-swiping", true);      // Freeze the element under the pointer (useSwipeDismiss syncDragStyles).      popup.style.transition = "none";      // A mouse drag with an expanded selection inside the popup would drag      // the selection instead (useDrawerSwipe onSwipeStart clears it).      const selection = document.getSelection?.();      if (selection && !selection.isCollapsed) selection.removeAllRanges();    }     function moveSwipe(x, y, time) {      if (!state.swiping) return;      const popup = popupOf(dialog);      if (!popup) return;      const direction = directionOf(dialog);      const vertical = axisIsY(dialog);      const rawDX = x - state.startX;      const rawDY = y - state.startY;      const snap = snapStateOf(dialog);      const snapActive = Boolean(snap && vertical && snap.resolved.length > 0);       // Directional damping (useSwipeDismiss applyDirectionalDamping):      // movement toward dismiss passes 1:1, movement past the resting point      // is damped to sign(d)*|d|^0.5. Only the drawer axis translates. With      // snap points both vertical directions are allowed, so no damping      // applies on the axis (directions ['down','up']).      const damp = (v) => Math.sign(v) * Math.sqrt(Math.abs(v));      let dx = 0;      let dy = 0;      if (vertical) {        dy = snapActive || movingTowardDismiss(direction, rawDY) ? rawDY : damp(rawDY);      } else {        dx = movingTowardDismiss(direction, rawDX) ? rawDX : damp(rawDX);      }       state.offsetX = state.initial.x + dx;      state.offsetY = state.initial.y + dy;      const deltaX = state.offsetX - state.initial.x;      const deltaY = state.offsetY - state.initial.y;      const baseOffset = snapActive ? (activeSnapOffset(dialog, snap) ?? 0) : 0;       if (snapActive && direction === "down") {        // Snap-point drag (DrawerViewport onProgress with snap points): the        // movement var drives the CSS translate, overshoot past fully open        // is square-root damped (getSnapPointSwipeMovement); no frozen        // inline transform.        popup.style.removeProperty("transform");        popup.style.setProperty("--drawer-swipe-movement-x", "0px");        popup.style.setProperty(          "--drawer-swipe-movement-y",          getSnapPointSwipeMovement(baseOffset, deltaY) + "px",        );      } else {        popup.style.transform =          "translate3d(" +          state.offsetX +          "px," +          state.offsetY +          "px,0) scale(" +          state.initial.scale +          ")";        popup.style.setProperty("--drawer-swipe-movement-x", deltaX + "px");        popup.style.setProperty("--drawer-swipe-movement-y", deltaY + "px");      }       // Progress drives the overlay fade. With a snap point range, progress      // maps the current offset between the two lowest snap points      // (DrawerViewport offsetToProgress); otherwise it is displacement over      // the panel size.      let progress = 0;      const range = snapActive ? snapRangeOf(dialog, snap) : null;      if (range && range.range > 0 && snap.popupHeight > 0) {        progress = clamp(          (clamp(baseOffset + deltaY, 0, snap.popupHeight) - range.minOffset) / range.range,          0,          1,        );      } else {        const disp = displacement(direction, deltaX, deltaY);        const scale = state.initial.scale || 1;        progress = state.size > 0 && disp > 0 ? clamp(disp / (state.size * scale), 0, 1) : 0;      }      const overlay = overlayOf(dialog);      if (overlay) overlay.style.setProperty("--drawer-swipe-progress", String(progress));       // Nested drawer: mirror the progress into the ancestor popups and flag      // them as nested-swiping once the gesture passes the 10px threshold      // (DrawerViewport updateNestedSwipeActive).      if (dialog.getAttribute("data-tui-drawer-parent")) {        notifyAncestors(dialog, progress);        if (          !state.nestedActive &&          Math.abs(displacement(direction, deltaX, deltaY)) >= MIN_SWIPE_THRESHOLD        ) {          state.nestedActive = true;          setAncestorsSwiping(dialog, true);        }      }       if (state.lastSample && time > state.lastSample.time) {        const durationMs = Math.max(          time - state.lastSample.time,          MIN_RELEASE_VELOCITY_DURATION_MS,        );        state.lastVelX = (state.offsetX - state.lastSample.x) / durationMs;        state.lastVelY = (state.offsetY - state.lastSample.y) / durationMs;      }      state.lastSample = { x: state.offsetX, y: state.offsetY, time };    }     function finishNestedSwipe(progress) {      if (dialog.getAttribute("data-tui-drawer-parent")) {        notifyAncestors(dialog, progress);      }      state.nestedActive = false;      setAncestorsSwiping(dialog, false);    }     function endSwipe(time) {      if (!state.swiping) return;      state.swiping = false;      state.pointerId = null;      setPartsAttr(dialog, "data-swiping", false);      const popup = popupOf(dialog);      if (!popup) return;       const direction = directionOf(dialog);      const vertical = axisIsY(dialog);      const deltaX = state.offsetX - state.initial.x;      const deltaY = state.offsetY - state.initial.y;      const disp = displacement(direction, deltaX, deltaY);       // Overall gesture velocity, floored at 50ms (useSwipeDismiss handleEnd).      const durationMs =        time > state.startTime ? Math.max(time - state.startTime, MIN_VELOCITY_DURATION_MS) : 0;      const overallVelocity = durationMs > 0 ? disp / durationMs : 0;      const overallVelY = durationMs > 0 ? deltaY / durationMs : 0;       // Release velocity from the last drag sample, discarded when stale      // (pointer rested >80ms before release).      let relVelX = state.lastVelX;      let relVelY = state.lastVelY;      if (state.lastSample && time - state.lastSample.time > MAX_RELEASE_VELOCITY_AGE_MS) {        relVelX = 0;        relVelY = 0;      }      const releaseVelocity = displacement(direction, relVelX, relVelY);       popup.style.removeProperty("transition");      popup.style.removeProperty("transform");       const snap = snapStateOf(dialog);      const snapActive = Boolean(snap && vertical && snap.resolved.length > 0);       if (snapActive && snap.popupHeight > 0) {        // DrawerViewport onRelease with snap points: the release picks the        // next snap point (or close) from drag distance plus a velocity        // offset.        const popupHeight = snap.popupHeight;        const dragDelta = direction === "down" ? deltaY : -deltaY;        const dragDirection = Math.sign(dragDelta);        const releaseDirectional = direction === "down" ? relVelY : -relVelY;        const fallbackDirectional = direction === "down" ? overallVelY : -overallVelY;        let resolvedVelocity = releaseDirectional;        if (dragDirection !== 0 && Math.abs(dragDelta) >= MIN_SWIPE_THRESHOLD) {          const velocityDirection = Math.sign(resolvedVelocity);          if (velocityDirection !== 0 && velocityDirection !== dragDirection) {            // Ignore touch reversals that would otherwise flip the snap            // decision.            resolvedVelocity = fallbackDirectional;          }        }         const currentOffset = activeSnapOffset(dialog, snap) ?? 0;        const dragTargetOffset = clamp(currentOffset + dragDelta, 0, popupHeight);        const velocityOffset =          Math.abs(resolvedVelocity) >= SNAP_VELOCITY_THRESHOLD            ? clamp(resolvedVelocity, -MAX_SNAP_VELOCITY, MAX_SNAP_VELOCITY) *              SNAP_VELOCITY_MULTIPLIER            : 0;        const targetOffset = snap.sequential          ? dragTargetOffset          : clamp(dragTargetOffset + velocityOffset, 0, popupHeight);         const closeFromSnapPoints = () => {          // Compute the strength while the active snap offset still counts          // toward the travelled distance (resolveSwipeRelease reads it          // before setActiveSnapPoint(null) flushes).          const strength = resolveSwipeStrength(            dialog,            popupHeight,            disp,            releaseVelocity,            overallVelocity,          );          snap.active = null;          finishNestedSwipe(0);          closeDrawer(dialog, strength);        };        const settle = (point) => {          snap.active = point.value;          applySnapState(dialog);          void popup.offsetWidth;          popup.style.setProperty("--drawer-swipe-movement-x", "0px");          popup.style.setProperty("--drawer-swipe-movement-y", "0px");          finishNestedSwipe(0);        };         if (snap.sequential) {          // snapToSequentialPoints: drag distance decides, velocity only          // advances to the adjacent point.          const ordered = [...snap.resolved].sort((a, b) => a.offset - b.offset);          const offsets = ordered.map((point) => point.offset);          const currentIndex = closestSnapPointIndex(offsets, currentOffset);          let targetSnapPoint = ordered[closestSnapPointIndex(offsets, targetOffset)];          const velocityDirection = Math.sign(resolvedVelocity);          const shouldAdvance =            dragDirection !== 0 &&            velocityDirection !== 0 &&            velocityDirection === dragDirection &&            Math.abs(resolvedVelocity) >= SNAP_VELOCITY_THRESHOLD;          let effectiveTargetOffset = targetOffset;          if (shouldAdvance) {            const adjacentIndex = clamp(currentIndex + dragDirection, 0, ordered.length - 1);            if (adjacentIndex !== currentIndex) {              const adjacentPoint = ordered[adjacentIndex];              const shouldForceAdjacent =                dragDirection > 0                  ? targetOffset < adjacentPoint.offset                  : targetOffset > adjacentPoint.offset;              if (shouldForceAdjacent) {                targetSnapPoint = adjacentPoint;                effectiveTargetOffset = adjacentPoint.offset;              }            } else if (dragDirection > 0) {              closeFromSnapPoints();              return;            }          }          const closeDistance = Math.abs(effectiveTargetOffset - popupHeight);          const snapDistance = Math.abs(effectiveTargetOffset - targetSnapPoint.offset);          if (closeDistance < snapDistance) {            closeFromSnapPoints();            return;          }          settle(targetSnapPoint);          return;        }         if (resolvedVelocity >= FAST_SWIPE_VELOCITY && dragDelta > 0) {          closeFromSnapPoints();          return;        }        const closestSnapPoint =          snap.resolved[            closestSnapPointIndex(              snap.resolved.map((point) => point.offset),              targetOffset,            )          ];        const closeDistance = Math.abs(targetOffset - popupHeight);        if (closeDistance < Math.abs(targetOffset - closestSnapPoint.offset)) {          closeFromSnapPoints();          return;        }        settle(closestSnapPoint);        return;      }       // Dismiss on a flick (>=0.5px/ms) or past half the panel's size      // (DrawerViewport onRelease + getBaseSwipeThreshold).      const threshold = Math.max(state.size * 0.5, MIN_SWIPE_THRESHOLD);      const shouldClose = disp > 0 && (overallVelocity >= FAST_SWIPE_VELOCITY || disp > threshold);       if (shouldClose) {        finishNestedSwipe(0);        closeDrawer(          dialog,          resolveSwipeStrength(dialog, state.size, disp, releaseVelocity, overallVelocity),        );        return;      }       // Spring back: hand the transform to the movement vars at the released      // position, then zero them so the 450ms transform transition returns      // the panel (the reference does the same through getDragStyles).      void popup.offsetWidth;      popup.style.setProperty("--drawer-swipe-movement-x", "0px");      popup.style.setProperty("--drawer-swipe-movement-y", "0px");      const overlay = overlayOf(dialog);      if (overlay) overlay.style.setProperty("--drawer-swipe-progress", "0");      finishNestedSwipe(0);    }     // Mouse and pen: swipes start on the panel chrome (swipe handle, bleed,    // padding) but not inside the content wrapper or on interactive elements    // (DrawerViewport onPointerDown: isSwipeIgnoredTarget/isDrawerContentTarget).    // A press outside the popup is a backdrop dismiss, handled below.    dialog.addEventListener("pointerdown", (event) => {      if (event.pointerType === "touch") return;      if (event.button !== 0) return;      const popup = popupOf(dialog);      if (!popup || popup.hasAttribute("data-ending-style") || hasOpenNested(dialog)) return;      const target = event.target instanceof Element ? event.target : null;      if (!target || !popup.contains(target)) return;      if (target.closest(IGNORE_SELECTOR) || target.closest('[data-slot="drawer-content"]')) {        return;      }      startSwipe(event.clientX, event.clientY, event.timeStamp);      state.pointerId = event.pointerId;      try {        dialog.setPointerCapture(event.pointerId);      } catch {        /* no capture, moves still bubble */      }    });     dialog.addEventListener("pointermove", (event) => {      if (event.pointerType === "touch") return;      if (!state.swiping || state.pointerId !== event.pointerId) return;      event.preventDefault(); // prevent text selection while dragging      moveSwipe(event.clientX, event.clientY, event.timeStamp);    });     const onPointerEnd = (event) => {      if (event.pointerType === "touch") return;      if (state.pointerId !== event.pointerId) return;      try {        dialog.releasePointerCapture(event.pointerId);      } catch {        /* already released */      }      endSwipe(event.timeStamp);    };    dialog.addEventListener("pointerup", onPointerEnd);    dialog.addEventListener("pointercancel", onPointerEnd);     // Touch: swipes can start anywhere in the panel, arbitrated against    // scrollable content (DrawerViewport onTouchStart/processTouchMove).    dialog.addEventListener(      "touchstart",      (event) => {        const popup = popupOf(dialog);        if (!popup || popup.hasAttribute("data-ending-style") || hasOpenNested(dialog)) return;        if (event.touches.length !== 1) {          state.touch = null;          return;        }        const touch = event.touches[0];        const target = event.target instanceof Element ? event.target : popup;        if (!popup.contains(target) || target.closest('input[type="range"]')) {          state.touch = null;          return;        }        const vertical = axisIsY(dialog);        const scrollTarget = findScrollable(target, popup, vertical);        const crossScrollable = !!findScrollable(target, popup, !vertical);        state.touch = {          startX: touch.clientX,          startY: touch.clientY,          lastX: touch.clientX,          lastY: touch.clientY,          scrollTarget,          crossScrollable,          // null: undecided, claim on a move toward dismiss from the edge.          allowSwipe: scrollTarget            ? atDismissEdge(scrollTarget, directionOf(dialog))              ? null              : false            : null,          yieldToScroll: false,          attributed: false,        };      },      { passive: true },    );     dialog.addEventListener(      "touchmove",      (event) => {        const touchState = state.touch;        if (!touchState || event.touches.length !== 1) return;        const touch = event.touches[0];        const vertical = axisIsY(dialog);        const direction = directionOf(dialog);        const snap = snapStateOf(dialog);        const snapActive = Boolean(snap && vertical && snap.resolved.length > 0);        const axisDelta = vertical          ? touch.clientY - touchState.lastY          : touch.clientX - touchState.lastX;        touchState.lastX = touch.clientX;        touchState.lastY = touch.clientY;         if (touchState.yieldToScroll) return;         // A non-cancelable move means the browser committed to a native        // scroll (shouldYieldTouchMove).        if (!event.cancelable && !state.swiping) {          touchState.yieldToScroll = true;          return;        }         // Axis arbitration against cross-axis scrollable content: yield once        // the cross axis wins the slop race, claim once the drawer axis does.        if (!touchState.attributed && touchState.allowSwipe !== true && touchState.crossScrollable) {          const dAxis = vertical            ? touch.clientY - touchState.startY            : touch.clientX - touchState.startX;          const dCross = vertical            ? touch.clientX - touchState.startX            : touch.clientY - touchState.startY;          if (            Math.abs(dCross) >= AXIS_LOCK_SLOP &&            Math.abs(dCross) > Math.abs(dAxis) + AXIS_LOCK_BIAS          ) {            touchState.yieldToScroll = true;            return;          }          if (Math.abs(dAxis) >= AXIS_LOCK_SLOP) touchState.attributed = true;          else return; // unattributed: leave the event to the browser        }         if (touchState.scrollTarget) {          // Scrolling content owns the gesture until the scroller sits at the          // dismiss edge and the finger moves toward dismiss; then the drawer          // claims it (canSwipeFromScrollEdgeOnMove). With snap points, any          // vertical move from the edge may snap, so both directions claim.          if (touchState.allowSwipe !== true && axisDelta !== 0) {            touchState.allowSwipe =              event.cancelable &&              (snapActive || movingTowardDismiss(direction, axisDelta)) &&              atDismissEdge(touchState.scrollTarget, direction);          }          if (touchState.allowSwipe !== true) return;        }         if (event.cancelable) event.preventDefault();        event.stopPropagation();         if (!state.swiping) {          // Absorb the press-to-first-move gap so the panel doesn't jump          // (useSwipeDismiss isFirstPointerMoveRef note).          startSwipe(touch.clientX, touch.clientY, event.timeStamp);        }        moveSwipe(touch.clientX, touch.clientY, event.timeStamp);      },      { passive: false },    );     const onTouchEnd = (event) => {      state.touch = null;      endSwipe(event.timeStamp);    };    dialog.addEventListener("touchend", onTouchEnd);    dialog.addEventListener("touchcancel", onTouchEnd);  }   // ----- lifecycle -----------------------------------------------------------   function ensureDrawer(dialog) {    if (!dialog || dialog.dataset.tuiDrawerInitialized === "true") return dialog;    dialog.dataset.tuiDrawerInitialized = "true";     dialog.addEventListener("cancel", (event) => {      event.preventDefault();      closeDrawer(dialog);    });     dialog.addEventListener("close", () => {      window.clearTimeout(dialog._tuiCloseTimer);      delete dialog._tuiCloseTimer;      cleanupClosed(dialog);    });     // A press anywhere outside the popup (on the viewport or the overlay) is    // an outside press and dismisses the drawer (Base UI outside press). For    // non-modal drawers the viewport is pointer-events-none, so outside    // presses reach the page instead — same as before.    dialog.addEventListener("pointerdown", (event) => {      if (!dialog.open) return;      if (dialog.hasAttribute("data-tui-drawer-disable-dismissible")) return;      const popup = popupOf(dialog);      const target = event.target instanceof Element ? event.target : null;      if (popup && target && !popup.contains(target)) closeDrawer(dialog);    });     attachSwipe(dialog);     return dialog;  }   // Moves the drawer to <body>, the pendant of the reference's DrawerPortal.  function portal(dialog) {    if (dialog.parentElement !== document.body) {      document.body.appendChild(dialog);    }  }   // Lift SSR'd contents out of their inert <template> wrappers into <body>,  // replacing a stale portaled copy on re-swaps (e.g. htmx). The loop runs  // until no templates remain: lifting a parent drawer reveals the templates  // of its nested drawers.  function liftTemplates() {    let tpl;    while ((tpl = document.querySelector("template[data-tui-drawer-portal]"))) {      const content = tpl.content.querySelector("[data-tui-drawer-content]");      if (content) {        const stale = content.id && document.getElementById(content.id);        if (stale) stale.remove();        document.body.appendChild(content);      }      tpl.remove();    }  }   function initDrawers(root = document) {    liftTemplates();    // Remove portaled leftovers whose trigger got swapped out of the page.    // A drawer that never had triggers is driven programmatically    // (window.tui.drawer.open) and stays alive.    document.querySelectorAll("body > dialog[data-tui-drawer-content]").forEach((dialog) => {      if (triggersFor(dialog).length) {        dialog.dataset.tuiDrawerHadTriggers = "true";      } else if (!dialog.open && dialog.dataset.tuiDrawerHadTriggers === "true") {        unwatchSnapResize(dialog);        dialog.remove();      }    });    root.querySelectorAll("dialog[data-tui-drawer-content]").forEach((dialog) => {      portal(dialog);      if (dialog.dataset.tuiDrawerInitialized === "true") return;      ensureDrawer(dialog);       if (dialog.getAttribute("data-tui-drawer-initial-open") === "true") {        // One-shot: consume the attribute so a later re-init never re-opens        // a closed drawer.        dialog.removeAttribute("data-tui-drawer-initial-open");        openDrawer(dialog);      } else {        updateState(dialog, dialog.open);      }    });    syncStack();  }   document.addEventListener("click", (event) => {    if (!(event.target instanceof Element)) return;    const trigger = event.target.closest("[data-tui-drawer-trigger]");    if (trigger) {      toggleDrawer(drawerFor(trigger));      return;    }    const closeButton = event.target.closest("[data-tui-drawer-close]");    if (closeButton) {      closeDrawer(drawerFor(closeButton));    }  });   if (document.readyState === "loading") {    document.addEventListener("DOMContentLoaded", () => initDrawers());  } else {    initDrawers();  }   // Initialize drawers added later (e.g. swapped in via htmx), so a  // server-rendered drawer with Open true still gets showModal(). Also  // release the scroll lock if an open drawer got swapped out of the DOM.  new MutationObserver(() => {    initDrawers();    unlockScroll();  }).observe(document.body, {    childList: true,    subtree: true,  });   window.tui = window.tui || {};  window.tui.drawer = {    open: openDrawer,    close: closeDrawer,    toggle: toggleDrawer,    isOpen: isDrawerOpen,    setSnapPoint: setSnapPoint,    getSnapPoint: getSnapPoint,  };})();

Component scripts are loaded through the shared script bundle, see JavaScript.

Update the import paths to match your project setup.

Usage

import "github.com/axadrn/shadcn-templ/v2/components/drawer"

@drawer.Drawer() {	@button.Button(button.Props{Variant: button.VariantOutline, Attributes: drawer.Trigger(ctx)}) {		Open	}	@drawer.Content() {		@drawer.Header() {			@drawer.Title() {				Are you absolutely sure?			}			@drawer.Description() {				This action cannot be undone.			}		}		<div class="p-4">			<!-- Content here -->		</div>		@drawer.Footer() {			@button.Button() {				Submit			}			@button.Button(button.Props{Variant: button.VariantOutline, Attributes: drawer.Close(ctx)}) {				Cancel			}		}	}}

Composition

Use the following composition to build a Drawer:

drawer.Drawer├── drawer.Trigger└── drawer.Content    ├── drawer.Header    │   ├── drawer.Title    │   └── drawer.Description    └── drawer.Footer

drawer.Content composes the portal, overlay, viewport, and popup: the script portals the panel to body, the native dialog plays the viewport role, and a dedicated overlay element renders behind the panel. For lower-level control, drawer.SwipeHandle is also exported.

Custom Sizes

A vertical drawer sizes itself to its content and is capped at calc(100dvh - 6rem) by default. A side drawer spans 75% of the viewport width, or 24rem on larger screens.

To customize the height of a vertical drawer, use the h-* and max-h-* utilities via Class on drawer.Content.

@drawer.Content(drawer.ContentProps{Class: "h-[50vh]"})

To customize the width of a side drawer, use the w-* and max-w-* utilities via Class on drawer.Content.

@drawer.Content(drawer.ContentProps{Class: "w-96"})

When the same component renders in multiple directions, scope an override to one axis using the data-[swipe-axis=*] variants.

@drawer.Content(drawer.ContentProps{Class: "data-[swipe-axis=y]:max-h-[50vh] data-[swipe-axis=x]:w-96"})

To make a region of the drawer scrollable, make the scroll container a flex item. Avoid h-full, which does not resolve inside a content-sized drawer.

@drawer.Content() {	@drawer.Header() {		...	}	<div class="flex-1 overflow-y-auto p-4">		<!-- Scrollable content -->	</div>	@drawer.Footer() {		...	}}

Styling

The drawer exposes CSS variables for style-level customization. Set the sizing variables via Class on drawer.Content. Set the overlay variable on [data-slot=drawer-overlay] in your CSS.

Variable	Default	Description
`--drawer-inset`	`0px`	Floats the drawer from the viewport edges.
`--drawer-bleed-background`	`var(--color-popover)`	Fills the gap behind the drawer on swipe overshoot.
`--drawer-overlay-min-opacity`	`0`	Minimum overlay opacity. Defaults to `0.5` when snap points are active.

The drawer also sets data attributes you can target with variants such as data-[swipe-direction=down]: on drawer.Content, or group-data-[swipe-axis=y]/drawer-popup: on its descendants.

Attribute	Values	Set when
`data-swipe-direction`	`up`, `right`, `down`, `left`	Always.
`data-swipe-axis`	`x`, `y`	Always.
`data-snap-points`	Present	The drawer has snap points.
`data-expanded`	Present	The drawer is at the full snap point.
`data-swiping`	Present	A swipe is in progress.
`data-nested-drawer-open`	Present	A nested drawer is open on top.

Position

Use the SwipeDirection prop on drawer.Drawer to set the side of the drawer.

Available options are SwipeDirectionUp, SwipeDirectionRight, SwipeDirectionDown, and SwipeDirectionLeft. The default is SwipeDirectionDown.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/drawer") templ DrawerSides() {	@drawer.Drawer(drawer.Props{SwipeDirection: drawer.SwipeDirectionLeft}) {		@button.Button(button.Props{Variant: button.VariantSecondary, Attributes: drawer.Trigger(ctx)}) {			Open Left Drawer		}		@drawer.Content() {			@drawer.Header() {				@drawer.Title() {					Move Goal				}				@drawer.Description() {					Set your daily activity goal.				}			}			<div class="flex-1 p-4">				<div class="size-full rounded-2xl bg-muted"></div>			</div>			@drawer.Footer() {				@button.Button(button.Props{Attributes: drawer.Close(ctx)}) {					Close				}			}		}	}}

Swipe Handle

Use ShowSwipeHandle on drawer.Drawer to render a swipe handle.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/drawer") templ DrawerSwipeHandle() {	@drawer.Drawer(drawer.Props{ShowSwipeHandle: true}) {		@button.Button(button.Props{Variant: button.VariantSecondary, Attributes: drawer.Trigger(ctx)}) {			Open Drawer		}		@drawer.Content() {			@drawer.Header() {				@drawer.Title() {					Drawer				}				@drawer.Description() {					Drawer with a swipe handle.				}			}			<div class="flex-1 p-4">				<div class="rounded-2xl bg-muted group-data-[swipe-axis=x]/drawer-popup:size-full group-data-[swipe-axis=y]/drawer-popup:h-80 group-data-[swipe-axis=y]/drawer-popup:w-full"></div>			</div>			@drawer.Footer() {				@button.Button(button.Props{Attributes: drawer.Close(ctx)}) {					Close				}			}		}	}}

Nested

Open drawers from inside another drawer. Parent drawers stay mounted and stack behind the frontmost drawer.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/drawer") templ DrawerNested() {	@drawer.Drawer(drawer.Props{ID: "drawer-nested-1", SwipeDirection: drawer.SwipeDirectionRight, ShowSwipeHandle: true}) {		@button.Button(button.Props{Variant: button.VariantSecondary, Attributes: drawer.Trigger(ctx)}) {			Open Drawer		}		@drawer.Content() {			@drawer.Header() {				@drawer.Title() {					Drawer				}				@drawer.Description() {					Open another drawer from the same direction.				}			}			<div class="flex-1 p-4">				<div class="bg-muted group-data-[swipe-axis=x]/drawer-popup:size-full group-data-[swipe-axis=y]/drawer-popup:aspect-video group-data-[swipe-axis=y]/drawer-popup:w-full"></div>			</div>			@drawer.Footer() {				@drawer.Drawer(drawer.Props{ID: "drawer-nested-2", SwipeDirection: drawer.SwipeDirectionRight, ShowSwipeHandle: true}) {					@button.Button(button.Props{Variant: button.VariantOutline, Attributes: drawer.Trigger(ctx)}) {						Open Nested Drawer					}					@drawer.Content() {						@drawer.Header() {							@drawer.Title() {								Nested Drawer							}							@drawer.Description() {								The parent drawer stays mounted behind this one.							}						}						<div class="flex-1 p-4">							<div class="bg-muted group-data-[swipe-axis=x]/drawer-popup:size-full group-data-[swipe-axis=y]/drawer-popup:aspect-video group-data-[swipe-axis=y]/drawer-popup:w-full"></div>						</div>						@drawer.Footer() {							@drawer.Drawer(drawer.Props{ID: "drawer-nested-3", SwipeDirection: drawer.SwipeDirectionRight, ShowSwipeHandle: true}) {								@button.Button(button.Props{Variant: button.VariantOutline, Attributes: drawer.Trigger(ctx)}) {									Open Third Drawer								}								@drawer.Content() {									@drawer.Header() {										@drawer.Title() {											Third Drawer										}										@drawer.Description() {											Two drawers are stacked behind this one.										}									}									<div class="flex-1 p-4">										<div class="bg-muted group-data-[swipe-axis=x]/drawer-popup:size-full group-data-[swipe-axis=y]/drawer-popup:aspect-video group-data-[swipe-axis=y]/drawer-popup:w-full"></div>									</div>									@drawer.Footer() {										@drawer.Drawer(drawer.Props{ID: "drawer-nested-4", SwipeDirection: drawer.SwipeDirectionRight, ShowSwipeHandle: true}) {											@button.Button(button.Props{Variant: button.VariantOutline, Attributes: drawer.Trigger(ctx)}) {												Open Fourth Drawer											}											@drawer.Content() {												@drawer.Header() {													@drawer.Title() {														Fourth Drawer													}													@drawer.Description() {														This is the frontmost drawer in the stack.													}												}												<div class="flex-1 p-4">													<div class="bg-muted group-data-[swipe-axis=x]/drawer-popup:size-full group-data-[swipe-axis=y]/drawer-popup:aspect-video group-data-[swipe-axis=y]/drawer-popup:w-full"></div>												</div>												@drawer.Footer() {													@button.Button(button.Props{Variant: button.VariantOutline, Attributes: drawer.Close(ctx)}) {														Close													}												}											}										}										@button.Button(button.Props{Variant: button.VariantOutline, Attributes: drawer.Close(ctx)}) {											Close										}									}								}							}							@button.Button(button.Props{Variant: button.VariantOutline, Attributes: drawer.Close(ctx)}) {								Close							}						}					}				}				@button.Button(button.Props{Variant: button.VariantOutline, Attributes: drawer.Close(ctx)}) {					Close				}			}		}	}	<script nonce={ templ.GetNonce(ctx) }>		(() => {			// useIsMobile pendant (hooks/use-mobile.ts), like the drawer-demo:			// swipeSwipeDirection is down and the swipe handle shows below the md			// breakpoint, right and no handle from md up. The dialogs wait in			// nested portal <template>s until drawer.js lifts them, so the			// lookup searches template contents recursively; attributes set			// on the nodes survive the lift (same nodes).			const findDialog = (root, id) => {				const direct = root.getElementById?.(id) || root.querySelector?.("#" + CSS.escape(id));				if (direct) return direct;				for (const tpl of root.querySelectorAll("template[data-tui-drawer-portal]")) {					const found = findDialog(tpl.content, id);					if (found) return found;				}				return null;			}; 			const ids = ["drawer-nested-1", "drawer-nested-2", "drawer-nested-3", "drawer-nested-4"];			const mq = window.matchMedia("(max-width: 767px)");			const apply = () => {				for (const id of ids) {					const dialog = findDialog(document, id);					const popup = dialog?.querySelector('[data-tui-drawer-popup]');					if (!popup) continue;					popup.setAttribute("data-swipe-direction", mq.matches ? "down" : "right");					popup.setAttribute("data-swipe-axis", mq.matches ? "y" : "x");					const handle = popup.querySelector('[data-slot="drawer-swipe-handle"]');					// Inline display, because the handle's flex class would					// win over the [hidden] UA rule.					if (handle) handle.style.display = mq.matches ? "" : "none";				}			};			apply();			mq.addEventListener("change", apply);		})();	</script>}

Set DisableModal to allow interaction with the rest of the page while the drawer is open. Combine with DisableDismissible to prevent the drawer from closing on outside presses.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/drawer") templ DrawerNonModal() {	@drawer.Drawer(drawer.Props{DisableModal: true, DisableDismissible: true, SwipeDirection: drawer.SwipeDirectionRight}) {		@button.Button(button.Props{Variant: button.VariantOutline, Attributes: drawer.Trigger(ctx)}) {			Non Modal		}		@drawer.Content() {			@drawer.Header() {				@drawer.Title() {					Non Modal Drawer				}			}			<div class="flex-1 p-4">				<div class="rounded-2xl bg-muted group-data-[swipe-axis=x]/drawer-popup:size-full group-data-[swipe-axis=y]/drawer-popup:h-80 group-data-[swipe-axis=y]/drawer-popup:w-full"></div>			</div>			@drawer.Footer() {				@button.Button(button.Props{Attributes: drawer.Close(ctx)}) {					Close				}			}		}	}}

Snap Points

Use SnapPoints to snap a drawer to preset heights. Numbers between 0 and 1 represent fractions of the viewport. Numbers greater than 1 are treated as pixel values. String values support px and rem units. Snap points apply to vertical drawers.

Track and control the active snap point with window.tui.drawer.getSnapPoint(id) and window.tui.drawer.setSnapPoint(id, value). At the full snap point, the drawer gets a data-expanded attribute you can style with the data-expanded: variant.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/drawer") templ DrawerSnapPoints() {	@drawer.Drawer(drawer.Props{SnapPoints: []any{"31rem", 1}, ShowSwipeHandle: true}) {		@button.Button(button.Props{Variant: button.VariantOutline, Attributes: drawer.Trigger(ctx)}) {			Open Snap Drawer		}		@drawer.Content() {			@drawer.Header() {				@drawer.Title() {					Snap points				}				@drawer.Description() {					Drag the drawer to snap between a compact peek and a near full-height view.				}			}			<div class="flex-1 p-4">				<div class="rounded-2xl bg-muted group-data-[swipe-axis=x]/drawer-popup:size-full group-data-[swipe-axis=y]/drawer-popup:h-80 group-data-[swipe-axis=y]/drawer-popup:w-full"></div>			</div>			@drawer.Footer() {				@button.Button(button.Props{Attributes: drawer.Close(ctx)}) {					Close				}			}		}	}}

Responsive

You can combine the Dialog and Drawer components to create a responsive dialog. This renders a Dialog component on desktop and a Drawer on mobile.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/dialog"	"github.com/axadrn/shadcn-templ/v2/components/drawer"	"github.com/axadrn/shadcn-templ/v2/components/input"	"github.com/axadrn/shadcn-templ/v2/components/label"	"github.com/axadrn/shadcn-templ/v2/utils") // DrawerDialog is the responsive dialog: a Dialog on desktop and a Drawer on// mobile (the reference's useMediaQuery("(min-width: 768px)")). Both are// SSR'd; the demo-local script below shows one and hides the other.templ DrawerDialog() {	<div data-tui-drawer-dialog-desktop hidden>		@dialog.Dialog(dialog.Props{ID: "drawer-dialog-desktop"}) {			@button.Button(button.Props{Variant: button.VariantOutline, Attributes: dialog.Trigger(ctx)}) {				Edit Profile			}			@dialog.Content(dialog.ContentProps{Class: "sm:max-w-[425px]"}) {				@dialog.Header() {					@dialog.Title() {						Edit profile					}					@dialog.Description() {						Make changes to your profile here. Click save when you're done.					}				}				@drawerDialogProfileForm("")			}		}	</div>	<div data-tui-drawer-dialog-mobile hidden>		@drawer.Drawer(drawer.Props{ID: "drawer-dialog-mobile"}) {			@button.Button(button.Props{Variant: button.VariantOutline, Attributes: drawer.Trigger(ctx)}) {				Edit Profile			}			@drawer.Content() {				@drawer.Header(drawer.HeaderProps{Class: "text-left"}) {					@drawer.Title() {						Edit profile					}					@drawer.Description() {						Make changes to your profile here. Click save when you're done.					}				}				@drawerDialogProfileForm("p-4")			}		}	</div>	<script nonce={ templ.GetNonce(ctx) }>		(() => {			// useMediaQuery pendant: show the Dialog markup on desktop and			// the Drawer on mobile. Both are server-rendered; only one set of			// triggers is visible at a time. Demo-local behavior, not a			// component API.			const mq = window.matchMedia("(min-width: 768px)");			const apply = () => {				document.querySelectorAll("[data-tui-drawer-dialog-desktop]").forEach((el) => {					el.hidden = !mq.matches;				});				document.querySelectorAll("[data-tui-drawer-dialog-mobile]").forEach((el) => {					el.hidden = mq.matches;				});			};			apply();			mq.addEventListener("change", apply);		})();	</script>} templ drawerDialogProfileForm(class string) {	<form class={ utils.CN("grid items-start gap-6", class) }>		<div class="grid gap-3">			@label.Label(label.Props{For: "drawer-dialog-email"}) {				Email			}			@input.Input(input.Props{ID: "drawer-dialog-email", Type: "email", Value: "[email protected]"})		</div>		<div class="grid gap-3">			@label.Label(label.Props{For: "drawer-dialog-username"}) {				Username			}			@input.Input(input.Props{ID: "drawer-dialog-username", Value: "@axadrn"})		</div>		@button.Button(button.Props{Type: button.TypeSubmit}) {			Save changes		}	</form>}

API Reference

Drawer

The drawer.Drawer component is the root, it carries the id and options that link trigger and content.

Prop	Type	Default
`Open`	`bool`	`false`
`DisableDismissible`	`bool`	`false`
`DisableModal`	`bool`	`false`
`SwipeDirection`	`SwipeDirectionDown \| SwipeDirectionUp \| SwipeDirectionLeft \| SwipeDirectionRight`	`SwipeDirectionDown`
`ShowSwipeHandle`	`bool`	`false`
`SnapPoints`	`[]any`	-
`SnapToSequentialPoints`	`bool`	`false`

DrawerTrigger

drawer.Trigger(ctx) returns the attributes that turn any element into the drawer trigger, drawer.TriggerFor(id) targets a drawer outside the current root. drawer.Close(ctx) and drawer.CloseFor(id) close it.

DrawerContent

The drawer.Content component is the sliding panel.

Prop	Type	Default
`Class`	`string`	-

DrawerSwipeHandle

The drawer.SwipeHandle component is the drag handle bar. drawer.Content renders it automatically when ShowSwipeHandle is set on the root.

Prop	Type	Default
`Class`	`string`	-

DrawerHeader

The drawer.Header component wraps the title and description.

Prop	Type	Default
`Class`	`string`	-

DrawerFooter

The drawer.Footer component holds actions at the bottom.

Prop	Type	Default
`Class`	`string`	-

DrawerTitle

The drawer.Title component renders the accessible drawer title.

Prop	Type	Default
`Class`	`string`	-

DrawerDescription

The drawer.Description component renders the accessible drawer description.

Prop	Type	Default
`Class`	`string`	-

Dialog Dropdown Menu

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.