@vielzeug/refine 2.2.3 → 2.2.5

package/dist/drawer.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./core/swipe.cjs"),r=require("./overlay/shared/use-dialog.cjs"),i=require("./overlay/drawer/drawer.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s=e=>e==null?void 0:e===``||e===`true`,c={bottom:{axis:`y`,closingDistance:e=>Math.max(0,e),translate:e=>`translateY(${e}px)`},left:{axis:`x`,closingDistance:e=>Math.max(0,-e),translate:e=>`translateX(${e}px)`},right:{axis:`x`,closingDistance:e=>Math.max(0,e),translate:e=>`translateX(${e}px)`},top:{axis:`y`,closingDistance:e=>Math.max(0,-e),translate:e=>`translateY(${e}px)`}},l=`ore-drawer`;(0,a.define)(l,{props:{backdrop:a.prop.string(),"default-open":a.prop.bool(!1),dismissible:a.prop.bool(!0),"drag-handle-placement":a.prop.oneOf([`outside`,`inset`],`outside`),"initial-focus":a.prop.string(),label:a.prop.string(),open:{default:void 0,parse:s},persistent:a.prop.bool(!1),placement:a.prop.oneOf([`left`,`right`,`top`,`bottom`],`right`),"return-focus":a.prop.bool(!0),size:a.prop.string(),title:a.prop.string()},setup(e){let t=(0,a.getHost)(),i=(0,a.useEmit)(),s=(0,a.useSlots)(),l=(0,a.createStableId)(`drawer-label`),u=(0,a.ref)(),d=(0,a.ref)(),f=(0,o.signal)(!1),p,m=()=>e.label.value??e.title.value??``,h=()=>s.has(`header`).value||!!m(),g=()=>h()||e.dismissible.value,_=()=>s.has(`footer`).value,v=()=>e.placement.value||`right`,y=()=>c[v()],b=(e,t)=>{let n=t===`x`?e.offsetWidth:e.offsetHeight;return Math.min(96,Math.max(36,n*.18))},x=(e,t)=>y().closingDistance(e)>=t,S=e=>{if(!f.value)return;p&&=(clearTimeout(p),void 0);let t=u.value;if(!t){f.value=!1;return}t.style.transition=`none`,e.style.opacity=`0`,e.style.visibility=`hidden`,t.offsetWidth,A(`swipe`)},C=(e,t,n)=>{if(f.value)return;f.value=!0;let r=t.axis===`x`?e.offsetWidth:e.offsetHeight,i=n>=0?Math.max(n,r):Math.min(n,-r),a=t.translate(i);e.style.transition=`transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out`,e.offsetWidth;let o=t=>{t.target===e&&t.propertyName===`transform`&&(e.removeEventListener(`transitionend`,o),S(e))};e.addEventListener(`transitionend`,o);let s=parseFloat(getComputedStyle(e).transitionDuration)*1e3;p=setTimeout(()=>{e.removeEventListener(`transitionend`,o),S(e)},s+50),e.style.transform=a,e.style.opacity=`0.2`},w=e=>{p&&=(clearTimeout(p),void 0),e.style.transition=``,e.style.transform=``,e.style.opacity=``,e.style.visibility=``,f.value=!1},T=({distance:e,threshold:t})=>{let n=d.value;if(n){if(x(e,t)){C(n,y(),e);return}w(n)}},E=n.createSwipeControl({axis:()=>y().axis,disabled:f,onCancel:T,onCommit:({distance:e})=>{let t=d.value;t&&C(t,y(),e)},onMove:({distance:e,threshold:t})=>{let n=d.value;if(!n)return;let r=y(),i=r.closingDistance(e),a=Math.min(i/t,1);n.style.transition=`none`,n.style.transform=r.translate(e),n.style.opacity=String(1-a*.4)},onRelease:T,shouldCommit:({distance:e,threshold:t})=>x(e,t),threshold:()=>{let e=d.value;return e?b(e,y().axis):48}}),{closeWithAnimation:D,handleCancel:O,overlay:k,requestClose:A,watchOpenProp:j}=r.useDialogControl({beforeOpen:e=>{let t=d.value;t&&w(t)},closeRequestDetail:t=>({placement:e.placement.value??`right`}),defaultOpen:e[`default-open`],dialogRef:u,getPanelEl:()=>d.value,host:t,initialFocus:e[`initial-focus`],isPersistent:()=>!!e.persistent.value,onCleanup:a.onCleanup,onEvent:a.onEvent,onNativeClose:e=>{let t=d.value;t&&e!==`swipe`&&w(t);let n=u.value;n&&(n.style.transition=``),i(`open-change`,{open:!1,reason:e})},onOpen:e=>i(`open-change`,{open:!0,reason:e}),openProp:e.open,performClose:(e,t)=>{t===`swipe`?e.close():D()},returnFocus:e[`return-focus`]});return(0,a.onMounted)(()=>{let n=u.value;if(!n)return;let r=t;r.show=()=>{k.open(`programmatic`)},r.hide=()=>{k.close(`programmatic`)},j(),(0,a.onEvent)(n,`cancel`,O),(0,a.onEvent)(n,`click`,t=>{e.persistent.value||E.isActive()||f.value||t.target===n&&A(`outsideClick`)});let i=d.value?.querySelector(`[part="drag-handle"]`);return i&&((0,a.onEvent)(i,`pointerdown`,E.handlePointerDown),(0,a.onEvent)(i,`pointermove`,E.handlePointerMove),(0,a.onEvent)(i,`pointerup`,E.handlePointerUp),(0,a.onEvent)(i,`pointercancel`,E.handlePointerCancel)),()=>{k.dispose()}}),a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./overlay/shared/use-dialog.cjs"),r=require("./overlay/drawer/drawer.css.cjs");let i=require("@vielzeug/ore"),a=require("@vielzeug/ripple"),o=require("@vielzeug/gesture");var s=e=>e==null?void 0:e===``||e===`true`,c={bottom:{axis:`y`,closingDistance:e=>Math.max(0,e),translate:e=>`translateY(${e}px)`},left:{axis:`x`,closingDistance:e=>Math.max(0,-e),translate:e=>`translateX(${e}px)`},right:{axis:`x`,closingDistance:e=>Math.max(0,e),translate:e=>`translateX(${e}px)`},top:{axis:`y`,closingDistance:e=>Math.max(0,-e),translate:e=>`translateY(${e}px)`}},l=`ore-drawer`;(0,i.define)(l,{props:{backdrop:i.prop.string(),"default-open":i.prop.bool(!1),dismissible:i.prop.bool(!0),"drag-handle-placement":i.prop.oneOf([`outside`,`inset`],`outside`),"initial-focus":i.prop.string(),label:i.prop.string(),open:{default:void 0,parse:s},persistent:i.prop.bool(!1),placement:i.prop.oneOf([`left`,`right`,`top`,`bottom`],`right`),"return-focus":i.prop.bool(!0),size:i.prop.string(),title:i.prop.string()},setup(e){let t=(0,i.getHost)(),r=(0,i.useEmit)(),s=(0,i.useSlots)(),l=(0,i.createStableId)(`drawer-label`),u=(0,i.ref)(),d=(0,i.ref)(),f=(0,a.signal)(!1),p,m,h=()=>e.label.value??e.title.value??``,g=()=>s.has(`header`).value||!!h(),_=()=>g()||e.dismissible.value,v=()=>s.has(`footer`).value,y=()=>e.placement.value||`right`,b=()=>c[y()],x=(e,t)=>{let n=t===`x`?e.offsetWidth:e.offsetHeight;return Math.min(96,Math.max(36,n*.18))},S=(e,t)=>b().closingDistance(e)>=t,C=e=>{if(!f.value)return;m&&=(clearTimeout(m),void 0);let t=u.value;if(!t){f.value=!1;return}t.style.transition=`none`,e.style.opacity=`0`,e.style.visibility=`hidden`,t.offsetWidth,A(`swipe`)},w=(e,t,n)=>{if(f.value)return;f.value=!0;let r=t.axis===`x`?e.offsetWidth:e.offsetHeight,i=n>=0?Math.max(n,r):Math.min(n,-r),a=t.translate(i);e.style.transition=`transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out`,e.offsetWidth;let o=t=>{t.target===e&&t.propertyName===`transform`&&(e.removeEventListener(`transitionend`,o),C(e))};e.addEventListener(`transitionend`,o);let s=parseFloat(getComputedStyle(e).transitionDuration)*1e3;m=setTimeout(()=>{e.removeEventListener(`transitionend`,o),C(e)},s+50),e.style.transform=a,e.style.opacity=`0.2`},T=e=>{m&&=(clearTimeout(m),void 0),e.style.transition=``,e.style.transform=``,e.style.opacity=``,e.style.visibility=``,f.value=!1},E=({distance:e,reason:t})=>{let n=d.value;if(!n)return;let r=x(n,b().axis);if(t===`release`&&S(e,r)){w(n,b(),e);return}T(n)},{closeWithAnimation:D,handleCancel:O,overlay:k,requestClose:A,watchOpenProp:j}=n.useDialogControl({beforeOpen:e=>{let t=d.value;t&&T(t)},closeRequestDetail:t=>({placement:e.placement.value??`right`}),defaultOpen:e[`default-open`],dialogRef:u,getPanelEl:()=>d.value,host:t,initialFocus:e[`initial-focus`],isPersistent:()=>!!e.persistent.value,onCleanup:i.onCleanup,onEvent:i.onEvent,onNativeClose:e=>{let t=d.value;t&&e!==`swipe`&&T(t);let n=u.value;n&&(n.style.transition=``),r(`open-change`,{open:!1,reason:e})},onOpen:e=>r(`open-change`,{open:!0,reason:e}),openProp:e.open,performClose:(e,t)=>{t===`swipe`?e.close():D()},returnFocus:e[`return-focus`]});return(0,i.onMounted)(()=>{let n=u.value;if(!n)return;let r=t;r.show=()=>{k.open(`programmatic`)},r.hide=()=>{k.close(`programmatic`)},j(),(0,i.onEvent)(n,`cancel`,O),(0,i.onEvent)(n,`click`,t=>{e.persistent.value||p?.active||f.value||t.target===n&&A(`outsideClick`)});let a=d.value?.querySelector(`[part="drag-handle"]`);return a&&(p=(0,o.createPanGesture)(a,{axis:()=>b().axis,disabled:()=>f.value,onEnd:E,onMove:({distance:e})=>{let t=d.value;if(!t)return;let n=b(),r=x(t,n.axis),i=n.closingDistance(e),a=Math.min(i/r,1);t.style.transition=`none`,t.style.transform=n.translate(e),t.style.opacity=String(1-a*.4)}})),()=>{p?.dispose(),p=void 0,k.dispose()}}),i.html`
       <dialog
         ref=${u}
         aria-modal="true"
@@ -6,9 +6,9 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         aria-labelledby="${()=>e.label.value?null:l}">
         <div class="panel" part="panel" ref=${d}>
           <div class="drag-handle" part="drag-handle" aria-label="Drag to close" role="button"></div>
-          <div class="header" part="header" ?hidden=${()=>!g()}>
-            <span class="header-title" id="${l}" ?hidden=${()=>!h()}>
-              <slot name="header">${()=>m()}</slot>
+          <div class="header" part="header" ?hidden=${()=>!_()}>
+            <span class="header-title" id="${l}" ?hidden=${()=>!g()}>
+              <slot name="header">${()=>h()}</slot>
             </span>
             <button
               class="close-btn"
@@ -23,10 +23,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           <div class="body" part="body">
             <slot></slot>
           </div>
-          <div class="footer" part="footer" ?hidden=${()=>!_()}>
+          <div class="footer" part="footer" ?hidden=${()=>!v()}>
             <slot name="footer"></slot>
           </div>
         </div>
       </dialog>
-    `},styles:[t.forcedColorsMixin,e.coarsePointerMixin,e.reducedMotionMixin,i.default]}),exports.DRAWER_TAG=l;
+    `},styles:[t.forcedColorsMixin,e.coarsePointerMixin,e.reducedMotionMixin,r.default]}),exports.DRAWER_TAG=l;
 //# sourceMappingURL=drawer.cjs.map

package/dist/drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.cjs","names":[],"sources":["../src/overlay/drawer/drawer.ts"],"sourcesContent":["import {\n  createStableId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onEvent,\n  onMounted,\n  prop,\n  ref,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { signal } from '@vielzeug/ripple';\n\nimport type { OverlayOpenChangeDetail, SwipeAxis } from '../../core';\n\nimport { createSwipeControl } from '../../core';\nimport '../../content/icon/icon';\nimport { coarsePointerMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport { useDialogControl } from '../shared/use-dialog';\nimport styles from './drawer.css?inline';\n\ntype DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\ntype DrawerSize = 'sm' | 'lg' | 'full';\ntype DrawerBackdrop = 'opaque' | 'blur' | 'transparent';\ntype DrawerDragHandlePlacement = 'outside' | 'inset';\ntype DrawerSwipeConfig = {\n  axis: SwipeAxis;\n  closingDistance: (distance: number) => number;\n  translate: (distance: number) => string;\n};\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\nconst drawerSwipeConfig: Record<DrawerPlacement, DrawerSwipeConfig> = {\n  bottom: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n  left: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  right: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  top: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n};\n\n/** Element interface exposing the imperative API for `ore-drawer`. */\nexport interface DrawerElement extends HTMLElement, Omit<OreDrawerProps, 'title'> {\n  /** Programmatically close the drawer with the exit animation. */\n  hide(): void;\n  /** Programmatically open the drawer. Equivalent to setting `open`. */\n  show(): void;\n}\n\n/** Drawer component properties */\n\nexport type OreDrawerEvents = {\n  'open-change': OverlayOpenChangeDetail;\n};\n\nexport type OreDrawerProps = {\n  /** Backdrop style — 'opaque' (default), 'blur', or 'transparent' */\n  backdrop?: DrawerBackdrop;\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\n  /** Show the close (×) button in the header (default: true) */\n  dismissible?: boolean;\n  /** Drag handle position used for swipe-to-close gestures */\n  'drag-handle-placement'?: DrawerDragHandlePlacement;\n  /**\n   * CSS selector for the element inside the drawer that should receive focus on open.\n   * Defaults to native dialog focus management (first focusable element).\n   * @example '#submit-btn' | 'input[name=\"email\"]'\n   */\n  'initial-focus'?: string;\n  /**\n   * Invisible accessible label for the dialog (`aria-label`).\n   * Use when the drawer has no visible title (e.g. image-only content).\n   * When omitted, `aria-labelledby` points to the visible header title instead.\n   */\n  label?: string;\n  /** Controlled open state */\n  open?: boolean;\n  /** When true, backdrop clicks do not close the drawer (default: false) */\n  persistent?: boolean;\n  /** Side from which the drawer slides in */\n  placement?: DrawerPlacement;\n  /**\n   * When true (default), focus returns to the triggering element after the drawer closes.\n   * Set to false to manage focus manually.\n   */\n  'return-focus'?: boolean;\n  /** Drawer width/height preset */\n  size?: DrawerSize;\n  /**\n   * Visible title text rendered inside the header.\n   * Used as the dialog's accessible label via `aria-labelledby` when `label` is not set.\n   */\n  title?: string;\n};\n\n/**\n * A panel that slides in from any edge of the screen, built on the native `<dialog>` element.\n *\n * @element ore-drawer\n *\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} placement - 'left' | 'right' (default) | 'top' | 'bottom'\n * @attr {string} size - 'sm' | 'lg' | 'full'\n * @attr {string} title - Visible header title text\n * @attr {string} label - Invisible aria-label (for drawers without a visible title)\n * @attr {boolean} dismissible - Show the close (×) button (default: true)\n * @attr {string} drag-handle-placement - 'outside' (default) | 'inset'\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {boolean} persistent - Prevent backdrop-click from closing (default: false)\n *\n * @fires open-change - When the drawer state changes. detail: { open, reason }\n *\n * @slot header - Drawer header content\n * @slot - Main body content\n * @slot footer - Drawer footer content\n *\n * @cssprop --drawer-backdrop-bg - Backdrop background color\n * @cssprop --drawer-bg - Panel background color\n * @cssprop --drawer-size - Panel width (horizontal) or height (vertical)\n * @cssprop --drawer-shadow - Panel box-shadow\n * @cssprop --drawer-panel-blur - Panel backdrop blur amount\n *\n * @part drag-handle - Drawer drag handle.\n * @part panel - Panel container.\n * @part header - Header container.\n * @part close-btn - Close button.\n * @part body - Body content container.\n * @part footer - Footer container.\n * @example\n * ```html\n * <!-- With visible title -->\n * <ore-drawer open title=\"Settings\" placement=\"right\">\n *   <p>Settings content here.</p>\n * </ore-drawer>\n *\n * <!-- With custom header slot -->\n * <ore-drawer open placement=\"right\">\n *   <span slot=\"header\">Settings</span>\n *   <p>Settings content here.</p>\n * </ore-drawer>\n * ```\n */\n\nexport const DRAWER_TAG = 'ore-drawer' as const;\ndefine<OreDrawerProps>(DRAWER_TAG, {\n  props: {\n    backdrop: prop.string<DrawerBackdrop>(),\n    'default-open': prop.bool(false),\n    dismissible: prop.bool(true),\n    'drag-handle-placement': prop.oneOf(['outside', 'inset'] as const, 'outside'),\n    'initial-focus': prop.string(),\n    label: prop.string(),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    persistent: prop.bool(false),\n    placement: prop.oneOf(['left', 'right', 'top', 'bottom'] as const, 'right'),\n    'return-focus': prop.bool(true),\n    size: prop.string<DrawerSize>(),\n    title: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreDrawerEvents>();\n    const slots = useSlots();\n\n    const drawerLabelId = createStableId('drawer-label');\n    const dialogRef = ref<HTMLDialogElement>();\n    const panelRef = ref<HTMLDivElement>();\n\n    // Drag-to-close state\n    const isSwipeClosing = signal(false);\n    let swipeCloseTimer: ReturnType<typeof setTimeout> | undefined;\n\n    const getHeaderText = () => props.label.value ?? props.title.value ?? '';\n    const hasHeaderTitle = () => slots.has('header').value || !!getHeaderText();\n\n    // Header is visible when there is slot content, a text label, or a close button.\n    const hasHeader = () => hasHeaderTitle() || props.dismissible.value;\n    const hasFooter = () => slots.has('footer').value;\n\n    const getPlacement = (): DrawerPlacement => props.placement.value || 'right';\n\n    const getSwipeConfig = (): DrawerSwipeConfig => drawerSwipeConfig[getPlacement()];\n\n    const getSnapThreshold = (panel: HTMLElement, axis: SwipeAxis) => {\n      const panelSize = axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n\n      return Math.min(96, Math.max(36, panelSize * 0.18));\n    };\n\n    const shouldCommitSwipeClose = (distance: number, threshold: number) => {\n      return getSwipeConfig().closingDistance(distance) >= threshold;\n    };\n\n    const finalizeSwipeClose = (panel: HTMLElement) => {\n      if (!isSwipeClosing.value) return;\n\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      const dialog = dialogRef.value;\n\n      if (!dialog) {\n        isSwipeClosing.value = false;\n\n        return;\n      }\n\n      dialog.style.transition = 'none';\n      panel.style.opacity = '0';\n      panel.style.visibility = 'hidden';\n      void dialog.offsetWidth;\n\n      requestClose('swipe');\n    };\n\n    const startSwipeClose = (panel: HTMLElement, swipe: DrawerSwipeConfig, committedDistance: number) => {\n      if (isSwipeClosing.value) return;\n\n      isSwipeClosing.value = true;\n\n      const panelSize = swipe.axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n      // Preserve overshoot so closing continues from the dragged position instead of snapping back.\n      const exitDistance =\n        committedDistance >= 0 ? Math.max(committedDistance, panelSize) : Math.min(committedDistance, -panelSize);\n      const exitTransform = swipe.translate(exitDistance);\n\n      // Commit the current drag position first so the magnetic snap continues\n      // from the finger instead of jumping back to rest.\n      panel.style.transition = 'transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out';\n      void panel.offsetWidth;\n\n      const onExitTransitionEnd = (ev: TransitionEvent) => {\n        if (ev.target !== panel || ev.propertyName !== 'transform') return;\n\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      };\n\n      panel.addEventListener('transitionend', onExitTransitionEnd);\n\n      const durationMs = parseFloat(getComputedStyle(panel).transitionDuration) * 1000;\n\n      swipeCloseTimer = setTimeout(() => {\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      }, durationMs + 50);\n\n      panel.style.transform = exitTransform;\n      panel.style.opacity = '0.2';\n    };\n\n    const resetPanelDragStyles = (panel: HTMLElement) => {\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      // Re-enable transitions so the snap-back or exit animates.\n      panel.style.transition = '';\n      panel.style.transform = '';\n      panel.style.opacity = '';\n      panel.style.visibility = '';\n      isSwipeClosing.value = false;\n    };\n\n    // Same \"snap back or commit close\" decision whether the swipe was\n    // interrupted by the platform (onCancel) or simply released without an\n    // intervening move event crossing the threshold (onRelease).\n    const handleSwipeRelease = ({ distance, threshold }: { distance: number; threshold: number }): void => {\n      const panel = panelRef.value;\n\n      if (!panel) return;\n\n      // If the release event crosses the threshold (without an intervening\n      // move event), commit close instead of snapping back to rest first.\n      if (shouldCommitSwipeClose(distance, threshold)) {\n        startSwipeClose(panel, getSwipeConfig(), distance);\n\n        return;\n      }\n\n      resetPanelDragStyles(panel);\n    };\n\n    const swipe = createSwipeControl({\n      axis: () => getSwipeConfig().axis,\n      disabled: isSwipeClosing,\n      onCancel: handleSwipeRelease,\n      onCommit: ({ distance }) => {\n        const panel = panelRef.value;\n\n        if (!panel) return;\n\n        startSwipeClose(panel, getSwipeConfig(), distance);\n      },\n      onMove: ({ distance, threshold }) => {\n        const panel = panelRef.value;\n\n        if (!panel) return;\n\n        const swipeConfig = getSwipeConfig();\n        const closingDistance = swipeConfig.closingDistance(distance);\n        const progress = Math.min(closingDistance / threshold, 1);\n\n        // Kill CSS transitions so the panel tracks the finger instantly.\n        panel.style.transition = 'none';\n        panel.style.transform = swipeConfig.translate(distance);\n        panel.style.opacity = String(1 - progress * 0.4);\n      },\n      onRelease: handleSwipeRelease,\n      shouldCommit: ({ distance, threshold }) => shouldCommitSwipeClose(distance, threshold),\n      threshold: () => {\n        const panel = panelRef.value;\n\n        if (!panel) return 48;\n\n        return getSnapThreshold(panel, getSwipeConfig().axis);\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Overlay State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const { closeWithAnimation, handleCancel, overlay, requestClose, watchOpenProp } = useDialogControl({\n      beforeOpen: (dialog) => {\n        // Clear any inline drag styles from a previous swipe-close so the CSS\n        // entry animation starts from the correct base state.\n        const panel = panelRef.value;\n\n        if (panel) resetPanelDragStyles(panel);\n\n        void dialog;\n      },\n      closeRequestDetail: (_reason) => ({ placement: props.placement.value ?? 'right' }),\n      defaultOpen: props['default-open'],\n      dialogRef,\n      getPanelEl: () => panelRef.value,\n      host: el,\n      initialFocus: props['initial-focus'],\n      isPersistent: () => Boolean(props.persistent.value),\n      onCleanup,\n      onEvent,\n      onNativeClose: (reason) => {\n        const panelEl = panelRef.value;\n\n        // For swipe-close, keep the panel hidden and off-screen until the next\n        // open cycle — resetting inline styles during native close can produce\n        // a visible frame at the rest position on some browsers.\n        if (panelEl && reason !== 'swipe') resetPanelDragStyles(panelEl);\n\n        const dialog = dialogRef.value;\n\n        if (dialog) dialog.style.transition = '';\n\n        emit('open-change', { open: false, reason });\n      },\n      onOpen: (reason) => emit('open-change', { open: true, reason }),\n      openProp: props.open,\n      performClose: (dialog, reason) => {\n        if (reason === 'swipe') {\n          dialog.close();\n        } else {\n          closeWithAnimation();\n        }\n      },\n      returnFocus: props['return-focus'],\n    });\n\n    const handleCloseButtonClick = () => {\n      requestClose('trigger');\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle: Setup Drawer Integration\n    // ────────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      // Expose imperative API\n      const drawerEl = el as DrawerElement;\n\n      drawerEl.show = () => {\n        overlay.open('programmatic');\n      };\n\n      drawerEl.hide = () => {\n        overlay.close('programmatic');\n      };\n\n      // ────────────────────────────────────────────────────────────\n      // Event Handlers: Cancel, Backdrop Click\n      // ────────────────────────────────────────────────────────────\n      // `handleCancel` (Escape via the native `cancel` event) is provided by\n      // `useDialogControl` above — drawer only needs its own backdrop-click\n      // handler since it has swipe-to-dismiss logic the shared dialog helper\n      // doesn't know about.\n\n      const handleBackdropClick = (e: MouseEvent) => {\n        if (props.persistent.value) return;\n\n        if (swipe.isActive() || isSwipeClosing.value) return;\n\n        if (e.target !== dialog) return; // Click inside panel\n\n        requestClose('outsideClick');\n      };\n\n      watchOpenProp();\n\n      onEvent(dialog, 'cancel', handleCancel);\n      onEvent(dialog, 'click', handleBackdropClick);\n\n      // Drag-to-close handlers — scoped to the handle element only so interactions\n      // with panel content don't accidentally start a drag.\n      const panel = panelRef.value;\n      const dragHandleEl = panel?.querySelector<HTMLElement>('[part=\"drag-handle\"]');\n\n      if (dragHandleEl) {\n        onEvent(dragHandleEl, 'pointerdown', swipe.handlePointerDown);\n        onEvent(dragHandleEl, 'pointermove', swipe.handlePointerMove);\n        onEvent(dragHandleEl, 'pointerup', swipe.handlePointerUp);\n        onEvent(dragHandleEl, 'pointercancel', swipe.handlePointerCancel);\n      }\n\n      return () => {\n        overlay.dispose();\n      };\n    });\n\n    return html`\n      <dialog\n        ref=${dialogRef}\n        aria-modal=\"true\"\n        aria-label=\"${() => props.label.value ?? null}\"\n        aria-labelledby=\"${() => (!props.label.value ? drawerLabelId : null)}\">\n        <div class=\"panel\" part=\"panel\" ref=${panelRef}>\n          <div class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Drag to close\" role=\"button\"></div>\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader()}>\n            <span class=\"header-title\" id=\"${drawerLabelId}\" ?hidden=${() => !hasHeaderTitle()}>\n              <slot name=\"header\">${() => getHeaderText()}</slot>\n            </span>\n            <button\n              class=\"close-btn\"\n              part=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close\"\n              ?hidden=${() => !props.dismissible.value}\n              @click=${handleCloseButtonClick}>\n              <ore-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n            </button>\n          </div>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"footer\" part=\"footer\" ?hidden=${() => !hasFooter()}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [forcedColorsMixin, coarsePointerMixin, reducedMotionMixin, styles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"drawer.cjs","names":[],"sources":["../src/overlay/drawer/drawer.ts"],"sourcesContent":["import { createPanGesture, type PanAxis, type PanGesture, type PanGestureEndDetail } from '@vielzeug/gesture';\nimport {\n  createStableId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onEvent,\n  onMounted,\n  prop,\n  ref,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { signal } from '@vielzeug/ripple';\n\nimport type { OverlayOpenChangeDetail } from '../../core';\nimport '../../content/icon/icon';\nimport { coarsePointerMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport { useDialogControl } from '../shared/use-dialog';\nimport styles from './drawer.css?inline';\n\ntype DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\ntype DrawerSize = 'sm' | 'lg' | 'full';\ntype DrawerBackdrop = 'opaque' | 'blur' | 'transparent';\ntype DrawerDragHandlePlacement = 'outside' | 'inset';\ntype DrawerSwipeConfig = {\n  axis: PanAxis;\n  closingDistance: (distance: number) => number;\n  translate: (distance: number) => string;\n};\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\nconst drawerSwipeConfig: Record<DrawerPlacement, DrawerSwipeConfig> = {\n  bottom: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n  left: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  right: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  top: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n};\n\n/** Element interface exposing the imperative API for `ore-drawer`. */\nexport interface DrawerElement extends HTMLElement, Omit<OreDrawerProps, 'title'> {\n  /** Programmatically close the drawer with the exit animation. */\n  hide(): void;\n  /** Programmatically open the drawer. Equivalent to setting `open`. */\n  show(): void;\n}\n\n/** Drawer component properties */\n\nexport type OreDrawerEvents = {\n  'open-change': OverlayOpenChangeDetail;\n};\n\nexport type OreDrawerProps = {\n  /** Backdrop style — 'opaque' (default), 'blur', or 'transparent' */\n  backdrop?: DrawerBackdrop;\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\n  /** Show the close (×) button in the header (default: true) */\n  dismissible?: boolean;\n  /** Drag handle position used for swipe-to-close gestures */\n  'drag-handle-placement'?: DrawerDragHandlePlacement;\n  /**\n   * CSS selector for the element inside the drawer that should receive focus on open.\n   * Defaults to native dialog focus management (first focusable element).\n   * @example '#submit-btn' | 'input[name=\"email\"]'\n   */\n  'initial-focus'?: string;\n  /**\n   * Invisible accessible label for the dialog (`aria-label`).\n   * Use when the drawer has no visible title (e.g. image-only content).\n   * When omitted, `aria-labelledby` points to the visible header title instead.\n   */\n  label?: string;\n  /** Controlled open state */\n  open?: boolean;\n  /** When true, backdrop clicks do not close the drawer (default: false) */\n  persistent?: boolean;\n  /** Side from which the drawer slides in */\n  placement?: DrawerPlacement;\n  /**\n   * When true (default), focus returns to the triggering element after the drawer closes.\n   * Set to false to manage focus manually.\n   */\n  'return-focus'?: boolean;\n  /** Drawer width/height preset */\n  size?: DrawerSize;\n  /**\n   * Visible title text rendered inside the header.\n   * Used as the dialog's accessible label via `aria-labelledby` when `label` is not set.\n   */\n  title?: string;\n};\n\n/**\n * A panel that slides in from any edge of the screen, built on the native `<dialog>` element.\n *\n * @element ore-drawer\n *\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} placement - 'left' | 'right' (default) | 'top' | 'bottom'\n * @attr {string} size - 'sm' | 'lg' | 'full'\n * @attr {string} title - Visible header title text\n * @attr {string} label - Invisible aria-label (for drawers without a visible title)\n * @attr {boolean} dismissible - Show the close (×) button (default: true)\n * @attr {string} drag-handle-placement - 'outside' (default) | 'inset'\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {boolean} persistent - Prevent backdrop-click from closing (default: false)\n *\n * @fires open-change - When the drawer state changes. detail: { open, reason }\n *\n * @slot header - Drawer header content\n * @slot - Main body content\n * @slot footer - Drawer footer content\n *\n * @cssprop --drawer-backdrop-bg - Backdrop background color\n * @cssprop --drawer-bg - Panel background color\n * @cssprop --drawer-size - Panel width (horizontal) or height (vertical)\n * @cssprop --drawer-shadow - Panel box-shadow\n * @cssprop --drawer-panel-blur - Panel backdrop blur amount\n *\n * @part drag-handle - Drawer drag handle.\n * @part panel - Panel container.\n * @part header - Header container.\n * @part close-btn - Close button.\n * @part body - Body content container.\n * @part footer - Footer container.\n * @example\n * ```html\n * <!-- With visible title -->\n * <ore-drawer open title=\"Settings\" placement=\"right\">\n *   <p>Settings content here.</p>\n * </ore-drawer>\n *\n * <!-- With custom header slot -->\n * <ore-drawer open placement=\"right\">\n *   <span slot=\"header\">Settings</span>\n *   <p>Settings content here.</p>\n * </ore-drawer>\n * ```\n */\n\nexport const DRAWER_TAG = 'ore-drawer' as const;\ndefine<OreDrawerProps>(DRAWER_TAG, {\n  props: {\n    backdrop: prop.string<DrawerBackdrop>(),\n    'default-open': prop.bool(false),\n    dismissible: prop.bool(true),\n    'drag-handle-placement': prop.oneOf(['outside', 'inset'] as const, 'outside'),\n    'initial-focus': prop.string(),\n    label: prop.string(),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    persistent: prop.bool(false),\n    placement: prop.oneOf(['left', 'right', 'top', 'bottom'] as const, 'right'),\n    'return-focus': prop.bool(true),\n    size: prop.string<DrawerSize>(),\n    title: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreDrawerEvents>();\n    const slots = useSlots();\n\n    const drawerLabelId = createStableId('drawer-label');\n    const dialogRef = ref<HTMLDialogElement>();\n    const panelRef = ref<HTMLDivElement>();\n\n    // Drag-to-close state\n    const isSwipeClosing = signal(false);\n    let swipe: PanGesture | undefined;\n    let swipeCloseTimer: ReturnType<typeof setTimeout> | undefined;\n\n    const getHeaderText = () => props.label.value ?? props.title.value ?? '';\n    const hasHeaderTitle = () => slots.has('header').value || !!getHeaderText();\n\n    // Header is visible when there is slot content, a text label, or a close button.\n    const hasHeader = () => hasHeaderTitle() || props.dismissible.value;\n    const hasFooter = () => slots.has('footer').value;\n\n    const getPlacement = (): DrawerPlacement => props.placement.value || 'right';\n\n    const getSwipeConfig = (): DrawerSwipeConfig => drawerSwipeConfig[getPlacement()];\n\n    const getSnapThreshold = (panel: HTMLElement, axis: PanAxis) => {\n      const panelSize = axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n\n      return Math.min(96, Math.max(36, panelSize * 0.18));\n    };\n\n    const shouldCommitSwipeClose = (distance: number, threshold: number) => {\n      return getSwipeConfig().closingDistance(distance) >= threshold;\n    };\n\n    const finalizeSwipeClose = (panel: HTMLElement) => {\n      if (!isSwipeClosing.value) return;\n\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      const dialog = dialogRef.value;\n\n      if (!dialog) {\n        isSwipeClosing.value = false;\n\n        return;\n      }\n\n      dialog.style.transition = 'none';\n      panel.style.opacity = '0';\n      panel.style.visibility = 'hidden';\n      void dialog.offsetWidth;\n\n      requestClose('swipe');\n    };\n\n    const startSwipeClose = (panel: HTMLElement, swipe: DrawerSwipeConfig, committedDistance: number) => {\n      if (isSwipeClosing.value) return;\n\n      isSwipeClosing.value = true;\n\n      const panelSize = swipe.axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n      // Preserve overshoot so closing continues from the dragged position instead of snapping back.\n      const exitDistance =\n        committedDistance >= 0 ? Math.max(committedDistance, panelSize) : Math.min(committedDistance, -panelSize);\n      const exitTransform = swipe.translate(exitDistance);\n\n      // Commit the current drag position first so the magnetic snap continues\n      // from the finger instead of jumping back to rest.\n      panel.style.transition = 'transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out';\n      void panel.offsetWidth;\n\n      const onExitTransitionEnd = (ev: TransitionEvent) => {\n        if (ev.target !== panel || ev.propertyName !== 'transform') return;\n\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      };\n\n      panel.addEventListener('transitionend', onExitTransitionEnd);\n\n      const durationMs = parseFloat(getComputedStyle(panel).transitionDuration) * 1000;\n\n      swipeCloseTimer = setTimeout(() => {\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      }, durationMs + 50);\n\n      panel.style.transform = exitTransform;\n      panel.style.opacity = '0.2';\n    };\n\n    const resetPanelDragStyles = (panel: HTMLElement) => {\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      // Re-enable transitions so the snap-back or exit animates.\n      panel.style.transition = '';\n      panel.style.transform = '';\n      panel.style.opacity = '';\n      panel.style.visibility = '';\n      isSwipeClosing.value = false;\n    };\n\n    const handleSwipeEnd = ({ distance, reason }: PanGestureEndDetail): void => {\n      const panel = panelRef.value;\n\n      if (!panel) return;\n\n      const threshold = getSnapThreshold(panel, getSwipeConfig().axis);\n\n      if (reason === 'release' && shouldCommitSwipeClose(distance, threshold)) {\n        startSwipeClose(panel, getSwipeConfig(), distance);\n\n        return;\n      }\n\n      resetPanelDragStyles(panel);\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Overlay State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const { closeWithAnimation, handleCancel, overlay, requestClose, watchOpenProp } = useDialogControl({\n      beforeOpen: (dialog) => {\n        // Clear any inline drag styles from a previous swipe-close so the CSS\n        // entry animation starts from the correct base state.\n        const panel = panelRef.value;\n\n        if (panel) resetPanelDragStyles(panel);\n\n        void dialog;\n      },\n      closeRequestDetail: (_reason) => ({ placement: props.placement.value ?? 'right' }),\n      defaultOpen: props['default-open'],\n      dialogRef,\n      getPanelEl: () => panelRef.value,\n      host: el,\n      initialFocus: props['initial-focus'],\n      isPersistent: () => Boolean(props.persistent.value),\n      onCleanup,\n      onEvent,\n      onNativeClose: (reason) => {\n        const panelEl = panelRef.value;\n\n        // For swipe-close, keep the panel hidden and off-screen until the next\n        // open cycle — resetting inline styles during native close can produce\n        // a visible frame at the rest position on some browsers.\n        if (panelEl && reason !== 'swipe') resetPanelDragStyles(panelEl);\n\n        const dialog = dialogRef.value;\n\n        if (dialog) dialog.style.transition = '';\n\n        emit('open-change', { open: false, reason });\n      },\n      onOpen: (reason) => emit('open-change', { open: true, reason }),\n      openProp: props.open,\n      performClose: (dialog, reason) => {\n        if (reason === 'swipe') {\n          dialog.close();\n        } else {\n          closeWithAnimation();\n        }\n      },\n      returnFocus: props['return-focus'],\n    });\n\n    const handleCloseButtonClick = () => {\n      requestClose('trigger');\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle: Setup Drawer Integration\n    // ────────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      // Expose imperative API\n      const drawerEl = el as DrawerElement;\n\n      drawerEl.show = () => {\n        overlay.open('programmatic');\n      };\n\n      drawerEl.hide = () => {\n        overlay.close('programmatic');\n      };\n\n      // ────────────────────────────────────────────────────────────\n      // Event Handlers: Cancel, Backdrop Click\n      // ────────────────────────────────────────────────────────────\n      // `handleCancel` (Escape via the native `cancel` event) is provided by\n      // `useDialogControl` above — drawer only needs its own backdrop-click\n      // handler since it has swipe-to-dismiss logic the shared dialog helper\n      // doesn't know about.\n\n      const handleBackdropClick = (e: MouseEvent) => {\n        if (props.persistent.value) return;\n\n        if (swipe?.active || isSwipeClosing.value) return;\n\n        if (e.target !== dialog) return; // Click inside panel\n\n        requestClose('outsideClick');\n      };\n\n      watchOpenProp();\n\n      onEvent(dialog, 'cancel', handleCancel);\n      onEvent(dialog, 'click', handleBackdropClick);\n\n      // Drag-to-close handlers — scoped to the handle element only so interactions\n      // with panel content don't accidentally start a drag.\n      const panel = panelRef.value;\n      const dragHandleEl = panel?.querySelector<HTMLElement>('[part=\"drag-handle\"]');\n\n      if (dragHandleEl) {\n        swipe = createPanGesture(dragHandleEl, {\n          axis: () => getSwipeConfig().axis,\n          disabled: () => isSwipeClosing.value,\n          onEnd: handleSwipeEnd,\n          onMove: ({ distance }) => {\n            const currentPanel = panelRef.value;\n\n            if (!currentPanel) return;\n\n            const swipeConfig = getSwipeConfig();\n            const threshold = getSnapThreshold(currentPanel, swipeConfig.axis);\n            const closingDistance = swipeConfig.closingDistance(distance);\n            const progress = Math.min(closingDistance / threshold, 1);\n\n            currentPanel.style.transition = 'none';\n            currentPanel.style.transform = swipeConfig.translate(distance);\n            currentPanel.style.opacity = String(1 - progress * 0.4);\n          },\n        });\n      }\n\n      return () => {\n        swipe?.dispose();\n        swipe = undefined;\n        overlay.dispose();\n      };\n    });\n\n    return html`\n      <dialog\n        ref=${dialogRef}\n        aria-modal=\"true\"\n        aria-label=\"${() => props.label.value ?? null}\"\n        aria-labelledby=\"${() => (!props.label.value ? drawerLabelId : null)}\">\n        <div class=\"panel\" part=\"panel\" ref=${panelRef}>\n          <div class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Drag to close\" role=\"button\"></div>\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader()}>\n            <span class=\"header-title\" id=\"${drawerLabelId}\" ?hidden=${() => !hasHeaderTitle()}>\n              <slot name=\"header\">${() => getHeaderText()}</slot>\n            </span>\n            <button\n              class=\"close-btn\"\n              part=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close\"\n              ?hidden=${() => !props.dismissible.value}\n              @click=${handleCloseButtonClick}>\n              <ore-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n            </button>\n          </div>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"footer\" part=\"footer\" ?hidden=${() => !hasFooter()}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [forcedColorsMixin, coarsePointerMixin, reducedMotionMixin, styles],\n});\n"],"mappings":"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"}

package/dist/drawer.js

@@ -1,10 +1,10 @@
 import { coarsePointerMixin as e, reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
 import { forcedColorsMixin as n } from "./styles/mixins/theme.css.js";
-import { createSwipeControl as r } from "./core/swipe.js";
-import { useDialogControl as i } from "./overlay/shared/use-dialog.js";
-import a from "./overlay/drawer/drawer.css.js";
-import { createStableId as o, define as s, getHost as c, html as l, onCleanup as u, onEvent as d, onMounted as f, prop as p, ref as m, useEmit as h, useSlots as g } from "@vielzeug/ore";
-import { signal as _ } from "@vielzeug/ripple";
+import { useDialogControl as r } from "./overlay/shared/use-dialog.js";
+import i from "./overlay/drawer/drawer.css.js";
+import { createStableId as a, define as o, getHost as s, html as c, onCleanup as l, onEvent as u, onMounted as d, prop as f, ref as p, useEmit as m, useSlots as h } from "@vielzeug/ore";
+import { signal as g } from "@vielzeug/ripple";
+import { createPanGesture as _ } from "@vielzeug/gesture";
 //#region src/overlay/drawer/drawer.ts
 var v = (e) => e == null ? void 0 : e === "" || e === "true", y = {
 	bottom: {
@@ -28,104 +28,84 @@ var v = (e) => e == null ? void 0 : e === "" || e === "true", y = {
 		translate: (e) => `translateY(${e}px)`
 	}
 }, b = "ore-drawer";
-s(b, {
+o(b, {
 	props: {
-		backdrop: p.string(),
-		"default-open": p.bool(!1),
-		dismissible: p.bool(!0),
-		"drag-handle-placement": p.oneOf(["outside", "inset"], "outside"),
-		"initial-focus": p.string(),
-		label: p.string(),
+		backdrop: f.string(),
+		"default-open": f.bool(!1),
+		dismissible: f.bool(!0),
+		"drag-handle-placement": f.oneOf(["outside", "inset"], "outside"),
+		"initial-focus": f.string(),
+		label: f.string(),
 		open: {
 			default: void 0,
 			parse: v
 		},
-		persistent: p.bool(!1),
-		placement: p.oneOf([
+		persistent: f.bool(!1),
+		placement: f.oneOf([
 			"left",
 			"right",
 			"top",
 			"bottom"
 		], "right"),
-		"return-focus": p.bool(!0),
-		size: p.string(),
-		title: p.string()
+		"return-focus": f.bool(!0),
+		size: f.string(),
+		title: f.string()
 	},
 	setup(e) {
-		let t = c(), n = h(), a = g(), s = o("drawer-label"), p = m(), v = m(), b = _(!1), x, S = () => e.label.value ?? e.title.value ?? "", C = () => a.has("header").value || !!S(), w = () => C() || e.dismissible.value, T = () => a.has("footer").value, E = () => e.placement.value || "right", D = () => y[E()], O = (e, t) => {
+		let t = s(), n = m(), i = h(), o = a("drawer-label"), f = p(), v = p(), b = g(!1), x, S, C = () => e.label.value ?? e.title.value ?? "", w = () => i.has("header").value || !!C(), T = () => w() || e.dismissible.value, E = () => i.has("footer").value, D = () => e.placement.value || "right", O = () => y[D()], k = (e, t) => {
 			let n = t === "x" ? e.offsetWidth : e.offsetHeight;
 			return Math.min(96, Math.max(36, n * .18));
-		}, k = (e, t) => D().closingDistance(e) >= t, A = (e) => {
+		}, A = (e, t) => O().closingDistance(e) >= t, j = (e) => {
 			if (!b.value) return;
-			x &&= (clearTimeout(x), void 0);
-			let t = p.value;
+			S &&= (clearTimeout(S), void 0);
+			let t = f.value;
 			if (!t) {
 				b.value = !1;
 				return;
 			}
 			t.style.transition = "none", e.style.opacity = "0", e.style.visibility = "hidden", t.offsetWidth, R("swipe");
-		}, j = (e, t, n) => {
+		}, M = (e, t, n) => {
 			if (b.value) return;
 			b.value = !0;
 			let r = t.axis === "x" ? e.offsetWidth : e.offsetHeight, i = n >= 0 ? Math.max(n, r) : Math.min(n, -r), a = t.translate(i);
 			e.style.transition = "transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out", e.offsetWidth;
 			let o = (t) => {
-				t.target === e && t.propertyName === "transform" && (e.removeEventListener("transitionend", o), A(e));
+				t.target === e && t.propertyName === "transform" && (e.removeEventListener("transitionend", o), j(e));
 			};
 			e.addEventListener("transitionend", o);
 			let s = parseFloat(getComputedStyle(e).transitionDuration) * 1e3;
-			x = setTimeout(() => {
-				e.removeEventListener("transitionend", o), A(e);
+			S = setTimeout(() => {
+				e.removeEventListener("transitionend", o), j(e);
 			}, s + 50), e.style.transform = a, e.style.opacity = "0.2";
-		}, M = (e) => {
-			x &&= (clearTimeout(x), void 0), e.style.transition = "", e.style.transform = "", e.style.opacity = "", e.style.visibility = "", b.value = !1;
-		}, N = ({ distance: e, threshold: t }) => {
+		}, N = (e) => {
+			S &&= (clearTimeout(S), void 0), e.style.transition = "", e.style.transform = "", e.style.opacity = "", e.style.visibility = "", b.value = !1;
+		}, P = ({ distance: e, reason: t }) => {
 			let n = v.value;
-			if (n) {
-				if (k(e, t)) {
-					j(n, D(), e);
-					return;
-				}
-				M(n);
-			}
-		}, P = r({
-			axis: () => D().axis,
-			disabled: b,
-			onCancel: N,
-			onCommit: ({ distance: e }) => {
-				let t = v.value;
-				t && j(t, D(), e);
-			},
-			onMove: ({ distance: e, threshold: t }) => {
-				let n = v.value;
-				if (!n) return;
-				let r = D(), i = r.closingDistance(e), a = Math.min(i / t, 1);
-				n.style.transition = "none", n.style.transform = r.translate(e), n.style.opacity = String(1 - a * .4);
-			},
-			onRelease: N,
-			shouldCommit: ({ distance: e, threshold: t }) => k(e, t),
-			threshold: () => {
-				let e = v.value;
-				return e ? O(e, D().axis) : 48;
+			if (!n) return;
+			let r = k(n, O().axis);
+			if (t === "release" && A(e, r)) {
+				M(n, O(), e);
+				return;
 			}
-		}), { closeWithAnimation: F, handleCancel: I, overlay: L, requestClose: R, watchOpenProp: z } = i({
+			N(n);
+		}, { closeWithAnimation: F, handleCancel: I, overlay: L, requestClose: R, watchOpenProp: z } = r({
 			beforeOpen: (e) => {
 				let t = v.value;
-				t && M(t);
+				t && N(t);
 			},
 			closeRequestDetail: (t) => ({ placement: e.placement.value ?? "right" }),
 			defaultOpen: e["default-open"],
-			dialogRef: p,
+			dialogRef: f,
 			getPanelEl: () => v.value,
 			host: t,
 			initialFocus: e["initial-focus"],
 			isPersistent: () => !!e.persistent.value,
-			onCleanup: u,
-			onEvent: d,
+			onCleanup: l,
+			onEvent: u,
 			onNativeClose: (e) => {
 				let t = v.value;
-				t && e !== "swipe" && M(t);
-				let r = p.value;
+				t && e !== "swipe" && N(t);
+				let r = f.value;
 				r && (r.style.transition = ""), n("open-change", {
 					open: !1,
 					reason: e
@@ -141,32 +121,42 @@ s(b, {
 			},
 			returnFocus: e["return-focus"]
 		});
-		return f(() => {
-			let n = p.value;
+		return d(() => {
+			let n = f.value;
 			if (!n) return;
 			let r = t;
 			r.show = () => {
 				L.open("programmatic");
 			}, r.hide = () => {
 				L.close("programmatic");
-			}, z(), d(n, "cancel", I), d(n, "click", (t) => {
-				e.persistent.value || P.isActive() || b.value || t.target === n && R("outsideClick");
+			}, z(), u(n, "cancel", I), u(n, "click", (t) => {
+				e.persistent.value || x?.active || b.value || t.target === n && R("outsideClick");
 			});
 			let i = v.value?.querySelector("[part=\"drag-handle\"]");
-			return i && (d(i, "pointerdown", P.handlePointerDown), d(i, "pointermove", P.handlePointerMove), d(i, "pointerup", P.handlePointerUp), d(i, "pointercancel", P.handlePointerCancel)), () => {
-				L.dispose();
+			return i && (x = _(i, {
+				axis: () => O().axis,
+				disabled: () => b.value,
+				onEnd: P,
+				onMove: ({ distance: e }) => {
+					let t = v.value;
+					if (!t) return;
+					let n = O(), r = k(t, n.axis), i = n.closingDistance(e), a = Math.min(i / r, 1);
+					t.style.transition = "none", t.style.transform = n.translate(e), t.style.opacity = String(1 - a * .4);
+				}
+			})), () => {
+				x?.dispose(), x = void 0, L.dispose();
 			};
-		}), l`
+		}), c`
       <dialog
-        ref=${p}
+        ref=${f}
         aria-modal="true"
         aria-label="${() => e.label.value ?? null}"
-        aria-labelledby="${() => e.label.value ? null : s}">
+        aria-labelledby="${() => e.label.value ? null : o}">
         <div class="panel" part="panel" ref=${v}>
           <div class="drag-handle" part="drag-handle" aria-label="Drag to close" role="button"></div>
-          <div class="header" part="header" ?hidden=${() => !w()}>
-            <span class="header-title" id="${s}" ?hidden=${() => !C()}>
-              <slot name="header">${() => S()}</slot>
+          <div class="header" part="header" ?hidden=${() => !T()}>
+            <span class="header-title" id="${o}" ?hidden=${() => !w()}>
+              <slot name="header">${() => C()}</slot>
             </span>
             <button
               class="close-btn"
@@ -183,7 +173,7 @@ s(b, {
           <div class="body" part="body">
             <slot></slot>
           </div>
-          <div class="footer" part="footer" ?hidden=${() => !T()}>
+          <div class="footer" part="footer" ?hidden=${() => !E()}>
             <slot name="footer"></slot>
           </div>
         </div>
@@ -194,7 +184,7 @@ s(b, {
 		n,
 		e,
 		t,
-		a
+		i
 	]
 });
 //#endregion

package/dist/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","names":[],"sources":["../src/overlay/drawer/drawer.ts"],"sourcesContent":["import {\n  createStableId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onEvent,\n  onMounted,\n  prop,\n  ref,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { signal } from '@vielzeug/ripple';\n\nimport type { OverlayOpenChangeDetail, SwipeAxis } from '../../core';\n\nimport { createSwipeControl } from '../../core';\nimport '../../content/icon/icon';\nimport { coarsePointerMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport { useDialogControl } from '../shared/use-dialog';\nimport styles from './drawer.css?inline';\n\ntype DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\ntype DrawerSize = 'sm' | 'lg' | 'full';\ntype DrawerBackdrop = 'opaque' | 'blur' | 'transparent';\ntype DrawerDragHandlePlacement = 'outside' | 'inset';\ntype DrawerSwipeConfig = {\n  axis: SwipeAxis;\n  closingDistance: (distance: number) => number;\n  translate: (distance: number) => string;\n};\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\nconst drawerSwipeConfig: Record<DrawerPlacement, DrawerSwipeConfig> = {\n  bottom: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n  left: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  right: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  top: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n};\n\n/** Element interface exposing the imperative API for `ore-drawer`. */\nexport interface DrawerElement extends HTMLElement, Omit<OreDrawerProps, 'title'> {\n  /** Programmatically close the drawer with the exit animation. */\n  hide(): void;\n  /** Programmatically open the drawer. Equivalent to setting `open`. */\n  show(): void;\n}\n\n/** Drawer component properties */\n\nexport type OreDrawerEvents = {\n  'open-change': OverlayOpenChangeDetail;\n};\n\nexport type OreDrawerProps = {\n  /** Backdrop style — 'opaque' (default), 'blur', or 'transparent' */\n  backdrop?: DrawerBackdrop;\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\n  /** Show the close (×) button in the header (default: true) */\n  dismissible?: boolean;\n  /** Drag handle position used for swipe-to-close gestures */\n  'drag-handle-placement'?: DrawerDragHandlePlacement;\n  /**\n   * CSS selector for the element inside the drawer that should receive focus on open.\n   * Defaults to native dialog focus management (first focusable element).\n   * @example '#submit-btn' | 'input[name=\"email\"]'\n   */\n  'initial-focus'?: string;\n  /**\n   * Invisible accessible label for the dialog (`aria-label`).\n   * Use when the drawer has no visible title (e.g. image-only content).\n   * When omitted, `aria-labelledby` points to the visible header title instead.\n   */\n  label?: string;\n  /** Controlled open state */\n  open?: boolean;\n  /** When true, backdrop clicks do not close the drawer (default: false) */\n  persistent?: boolean;\n  /** Side from which the drawer slides in */\n  placement?: DrawerPlacement;\n  /**\n   * When true (default), focus returns to the triggering element after the drawer closes.\n   * Set to false to manage focus manually.\n   */\n  'return-focus'?: boolean;\n  /** Drawer width/height preset */\n  size?: DrawerSize;\n  /**\n   * Visible title text rendered inside the header.\n   * Used as the dialog's accessible label via `aria-labelledby` when `label` is not set.\n   */\n  title?: string;\n};\n\n/**\n * A panel that slides in from any edge of the screen, built on the native `<dialog>` element.\n *\n * @element ore-drawer\n *\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} placement - 'left' | 'right' (default) | 'top' | 'bottom'\n * @attr {string} size - 'sm' | 'lg' | 'full'\n * @attr {string} title - Visible header title text\n * @attr {string} label - Invisible aria-label (for drawers without a visible title)\n * @attr {boolean} dismissible - Show the close (×) button (default: true)\n * @attr {string} drag-handle-placement - 'outside' (default) | 'inset'\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {boolean} persistent - Prevent backdrop-click from closing (default: false)\n *\n * @fires open-change - When the drawer state changes. detail: { open, reason }\n *\n * @slot header - Drawer header content\n * @slot - Main body content\n * @slot footer - Drawer footer content\n *\n * @cssprop --drawer-backdrop-bg - Backdrop background color\n * @cssprop --drawer-bg - Panel background color\n * @cssprop --drawer-size - Panel width (horizontal) or height (vertical)\n * @cssprop --drawer-shadow - Panel box-shadow\n * @cssprop --drawer-panel-blur - Panel backdrop blur amount\n *\n * @part drag-handle - Drawer drag handle.\n * @part panel - Panel container.\n * @part header - Header container.\n * @part close-btn - Close button.\n * @part body - Body content container.\n * @part footer - Footer container.\n * @example\n * ```html\n * <!-- With visible title -->\n * <ore-drawer open title=\"Settings\" placement=\"right\">\n *   <p>Settings content here.</p>\n * </ore-drawer>\n *\n * <!-- With custom header slot -->\n * <ore-drawer open placement=\"right\">\n *   <span slot=\"header\">Settings</span>\n *   <p>Settings content here.</p>\n * </ore-drawer>\n * ```\n */\n\nexport const DRAWER_TAG = 'ore-drawer' as const;\ndefine<OreDrawerProps>(DRAWER_TAG, {\n  props: {\n    backdrop: prop.string<DrawerBackdrop>(),\n    'default-open': prop.bool(false),\n    dismissible: prop.bool(true),\n    'drag-handle-placement': prop.oneOf(['outside', 'inset'] as const, 'outside'),\n    'initial-focus': prop.string(),\n    label: prop.string(),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    persistent: prop.bool(false),\n    placement: prop.oneOf(['left', 'right', 'top', 'bottom'] as const, 'right'),\n    'return-focus': prop.bool(true),\n    size: prop.string<DrawerSize>(),\n    title: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreDrawerEvents>();\n    const slots = useSlots();\n\n    const drawerLabelId = createStableId('drawer-label');\n    const dialogRef = ref<HTMLDialogElement>();\n    const panelRef = ref<HTMLDivElement>();\n\n    // Drag-to-close state\n    const isSwipeClosing = signal(false);\n    let swipeCloseTimer: ReturnType<typeof setTimeout> | undefined;\n\n    const getHeaderText = () => props.label.value ?? props.title.value ?? '';\n    const hasHeaderTitle = () => slots.has('header').value || !!getHeaderText();\n\n    // Header is visible when there is slot content, a text label, or a close button.\n    const hasHeader = () => hasHeaderTitle() || props.dismissible.value;\n    const hasFooter = () => slots.has('footer').value;\n\n    const getPlacement = (): DrawerPlacement => props.placement.value || 'right';\n\n    const getSwipeConfig = (): DrawerSwipeConfig => drawerSwipeConfig[getPlacement()];\n\n    const getSnapThreshold = (panel: HTMLElement, axis: SwipeAxis) => {\n      const panelSize = axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n\n      return Math.min(96, Math.max(36, panelSize * 0.18));\n    };\n\n    const shouldCommitSwipeClose = (distance: number, threshold: number) => {\n      return getSwipeConfig().closingDistance(distance) >= threshold;\n    };\n\n    const finalizeSwipeClose = (panel: HTMLElement) => {\n      if (!isSwipeClosing.value) return;\n\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      const dialog = dialogRef.value;\n\n      if (!dialog) {\n        isSwipeClosing.value = false;\n\n        return;\n      }\n\n      dialog.style.transition = 'none';\n      panel.style.opacity = '0';\n      panel.style.visibility = 'hidden';\n      void dialog.offsetWidth;\n\n      requestClose('swipe');\n    };\n\n    const startSwipeClose = (panel: HTMLElement, swipe: DrawerSwipeConfig, committedDistance: number) => {\n      if (isSwipeClosing.value) return;\n\n      isSwipeClosing.value = true;\n\n      const panelSize = swipe.axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n      // Preserve overshoot so closing continues from the dragged position instead of snapping back.\n      const exitDistance =\n        committedDistance >= 0 ? Math.max(committedDistance, panelSize) : Math.min(committedDistance, -panelSize);\n      const exitTransform = swipe.translate(exitDistance);\n\n      // Commit the current drag position first so the magnetic snap continues\n      // from the finger instead of jumping back to rest.\n      panel.style.transition = 'transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out';\n      void panel.offsetWidth;\n\n      const onExitTransitionEnd = (ev: TransitionEvent) => {\n        if (ev.target !== panel || ev.propertyName !== 'transform') return;\n\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      };\n\n      panel.addEventListener('transitionend', onExitTransitionEnd);\n\n      const durationMs = parseFloat(getComputedStyle(panel).transitionDuration) * 1000;\n\n      swipeCloseTimer = setTimeout(() => {\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      }, durationMs + 50);\n\n      panel.style.transform = exitTransform;\n      panel.style.opacity = '0.2';\n    };\n\n    const resetPanelDragStyles = (panel: HTMLElement) => {\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      // Re-enable transitions so the snap-back or exit animates.\n      panel.style.transition = '';\n      panel.style.transform = '';\n      panel.style.opacity = '';\n      panel.style.visibility = '';\n      isSwipeClosing.value = false;\n    };\n\n    // Same \"snap back or commit close\" decision whether the swipe was\n    // interrupted by the platform (onCancel) or simply released without an\n    // intervening move event crossing the threshold (onRelease).\n    const handleSwipeRelease = ({ distance, threshold }: { distance: number; threshold: number }): void => {\n      const panel = panelRef.value;\n\n      if (!panel) return;\n\n      // If the release event crosses the threshold (without an intervening\n      // move event), commit close instead of snapping back to rest first.\n      if (shouldCommitSwipeClose(distance, threshold)) {\n        startSwipeClose(panel, getSwipeConfig(), distance);\n\n        return;\n      }\n\n      resetPanelDragStyles(panel);\n    };\n\n    const swipe = createSwipeControl({\n      axis: () => getSwipeConfig().axis,\n      disabled: isSwipeClosing,\n      onCancel: handleSwipeRelease,\n      onCommit: ({ distance }) => {\n        const panel = panelRef.value;\n\n        if (!panel) return;\n\n        startSwipeClose(panel, getSwipeConfig(), distance);\n      },\n      onMove: ({ distance, threshold }) => {\n        const panel = panelRef.value;\n\n        if (!panel) return;\n\n        const swipeConfig = getSwipeConfig();\n        const closingDistance = swipeConfig.closingDistance(distance);\n        const progress = Math.min(closingDistance / threshold, 1);\n\n        // Kill CSS transitions so the panel tracks the finger instantly.\n        panel.style.transition = 'none';\n        panel.style.transform = swipeConfig.translate(distance);\n        panel.style.opacity = String(1 - progress * 0.4);\n      },\n      onRelease: handleSwipeRelease,\n      shouldCommit: ({ distance, threshold }) => shouldCommitSwipeClose(distance, threshold),\n      threshold: () => {\n        const panel = panelRef.value;\n\n        if (!panel) return 48;\n\n        return getSnapThreshold(panel, getSwipeConfig().axis);\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Overlay State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const { closeWithAnimation, handleCancel, overlay, requestClose, watchOpenProp } = useDialogControl({\n      beforeOpen: (dialog) => {\n        // Clear any inline drag styles from a previous swipe-close so the CSS\n        // entry animation starts from the correct base state.\n        const panel = panelRef.value;\n\n        if (panel) resetPanelDragStyles(panel);\n\n        void dialog;\n      },\n      closeRequestDetail: (_reason) => ({ placement: props.placement.value ?? 'right' }),\n      defaultOpen: props['default-open'],\n      dialogRef,\n      getPanelEl: () => panelRef.value,\n      host: el,\n      initialFocus: props['initial-focus'],\n      isPersistent: () => Boolean(props.persistent.value),\n      onCleanup,\n      onEvent,\n      onNativeClose: (reason) => {\n        const panelEl = panelRef.value;\n\n        // For swipe-close, keep the panel hidden and off-screen until the next\n        // open cycle — resetting inline styles during native close can produce\n        // a visible frame at the rest position on some browsers.\n        if (panelEl && reason !== 'swipe') resetPanelDragStyles(panelEl);\n\n        const dialog = dialogRef.value;\n\n        if (dialog) dialog.style.transition = '';\n\n        emit('open-change', { open: false, reason });\n      },\n      onOpen: (reason) => emit('open-change', { open: true, reason }),\n      openProp: props.open,\n      performClose: (dialog, reason) => {\n        if (reason === 'swipe') {\n          dialog.close();\n        } else {\n          closeWithAnimation();\n        }\n      },\n      returnFocus: props['return-focus'],\n    });\n\n    const handleCloseButtonClick = () => {\n      requestClose('trigger');\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle: Setup Drawer Integration\n    // ────────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      // Expose imperative API\n      const drawerEl = el as DrawerElement;\n\n      drawerEl.show = () => {\n        overlay.open('programmatic');\n      };\n\n      drawerEl.hide = () => {\n        overlay.close('programmatic');\n      };\n\n      // ────────────────────────────────────────────────────────────\n      // Event Handlers: Cancel, Backdrop Click\n      // ────────────────────────────────────────────────────────────\n      // `handleCancel` (Escape via the native `cancel` event) is provided by\n      // `useDialogControl` above — drawer only needs its own backdrop-click\n      // handler since it has swipe-to-dismiss logic the shared dialog helper\n      // doesn't know about.\n\n      const handleBackdropClick = (e: MouseEvent) => {\n        if (props.persistent.value) return;\n\n        if (swipe.isActive() || isSwipeClosing.value) return;\n\n        if (e.target !== dialog) return; // Click inside panel\n\n        requestClose('outsideClick');\n      };\n\n      watchOpenProp();\n\n      onEvent(dialog, 'cancel', handleCancel);\n      onEvent(dialog, 'click', handleBackdropClick);\n\n      // Drag-to-close handlers — scoped to the handle element only so interactions\n      // with panel content don't accidentally start a drag.\n      const panel = panelRef.value;\n      const dragHandleEl = panel?.querySelector<HTMLElement>('[part=\"drag-handle\"]');\n\n      if (dragHandleEl) {\n        onEvent(dragHandleEl, 'pointerdown', swipe.handlePointerDown);\n        onEvent(dragHandleEl, 'pointermove', swipe.handlePointerMove);\n        onEvent(dragHandleEl, 'pointerup', swipe.handlePointerUp);\n        onEvent(dragHandleEl, 'pointercancel', swipe.handlePointerCancel);\n      }\n\n      return () => {\n        overlay.dispose();\n      };\n    });\n\n    return html`\n      <dialog\n        ref=${dialogRef}\n        aria-modal=\"true\"\n        aria-label=\"${() => props.label.value ?? null}\"\n        aria-labelledby=\"${() => (!props.label.value ? drawerLabelId : null)}\">\n        <div class=\"panel\" part=\"panel\" ref=${panelRef}>\n          <div class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Drag to close\" role=\"button\"></div>\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader()}>\n            <span class=\"header-title\" id=\"${drawerLabelId}\" ?hidden=${() => !hasHeaderTitle()}>\n              <slot name=\"header\">${() => getHeaderText()}</slot>\n            </span>\n            <button\n              class=\"close-btn\"\n              part=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close\"\n              ?hidden=${() => !props.dismissible.value}\n              @click=${handleCloseButtonClick}>\n              <ore-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n            </button>\n          </div>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"footer\" part=\"footer\" ?hidden=${() => !hasFooter()}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [forcedColorsMixin, coarsePointerMixin, reducedMotionMixin, styles],\n});\n"],"mappings":";;;;;;;;AAiCA,IAAM,KAAqB,MACzB,KAAS,OAAO,KAAA,IAAY,MAAU,MAAM,MAAU,QAElD,IAAgE;CACpE,QAAQ;EACN,MAAM;EACN,kBAAkB,MAAa,KAAK,IAAI,GAAG,CAAQ;EACnD,YAAY,MAAa,cAAc,EAAS;CAClD;CACA,MAAM;EACJ,MAAM;EACN,kBAAkB,MAAa,KAAK,IAAI,GAAG,CAAC,CAAQ;EACpD,YAAY,MAAa,cAAc,EAAS;CAClD;CACA,OAAO;EACL,MAAM;EACN,kBAAkB,MAAa,KAAK,IAAI,GAAG,CAAQ;EACnD,YAAY,MAAa,cAAc,EAAS;CAClD;CACA,KAAK;EACH,MAAM;EACN,kBAAkB,MAAa,KAAK,IAAI,GAAG,CAAC,CAAQ;EACpD,YAAY,MAAa,cAAc,EAAS;CAClD;AACF,GA0Ga,IAAa;AAC1B,EAAuB,GAAY;CACjC,OAAO;EACL,UAAU,EAAK,OAAuB;EACtC,gBAAgB,EAAK,KAAK,EAAK;EAC/B,aAAa,EAAK,KAAK,EAAI;EAC3B,yBAAyB,EAAK,MAAM,CAAC,WAAW,OAAO,GAAY,SAAS;EAC5E,iBAAiB,EAAK,OAAO;EAC7B,OAAO,EAAK,OAAO;EACnB,MAAM;GAAE,SAAS,KAAA;GAAkC,OAAO;EAAkB;EAC5E,YAAY,EAAK,KAAK,EAAK;EAC3B,WAAW,EAAK,MAAM;GAAC;GAAQ;GAAS;GAAO;EAAQ,GAAY,OAAO;EAC1E,gBAAgB,EAAK,KAAK,EAAI;EAC9B,MAAM,EAAK,OAAmB;EAC9B,OAAO,EAAK,OAAO;CACrB;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAAyB,GAChC,IAAQ,EAAS,GAEjB,IAAgB,EAAe,cAAc,GAC7C,IAAY,EAAuB,GACnC,IAAW,EAAoB,GAG/B,IAAiB,EAAO,EAAK,GAC/B,GAEE,UAAsB,EAAM,MAAM,SAAS,EAAM,MAAM,SAAS,IAChE,UAAuB,EAAM,IAAI,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,EAAc,GAGpE,UAAkB,EAAe,KAAK,EAAM,YAAY,OACxD,UAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,OAEtC,UAAsC,EAAM,UAAU,SAAS,SAE/D,UAA0C,EAAkB,EAAa,IAEzE,KAAoB,GAAoB,MAAoB;GAChE,IAAM,IAAY,MAAS,MAAM,EAAM,cAAc,EAAM;GAE3D,OAAO,KAAK,IAAI,IAAI,KAAK,IAAI,IAAI,IAAY,GAAI,CAAC;EACpD,GAEM,KAA0B,GAAkB,MACzC,EAAe,CAAC,CAAC,gBAAgB,CAAQ,KAAK,GAGjD,KAAsB,MAAuB;GACjD,IAAI,CAAC,EAAe,OAAO;GAE3B,AAEE,OADA,aAAa,CAAe,GACV,KAAA;GAGpB,IAAM,IAAS,EAAU;GAEzB,IAAI,CAAC,GAAQ;IACX,EAAe,QAAQ;IAEvB;GACF;GAOA,AALA,EAAO,MAAM,aAAa,QAC1B,EAAM,MAAM,UAAU,KACtB,EAAM,MAAM,aAAa,UACzB,EAAY,aAEZ,EAAa,OAAO;EACtB,GAEM,KAAmB,GAAoB,GAA0B,MAA8B;GACnG,IAAI,EAAe,OAAO;GAE1B,EAAe,QAAQ;GAEvB,IAAM,IAAY,EAAM,SAAS,MAAM,EAAM,cAAc,EAAM,cAE3D,IACJ,KAAqB,IAAI,KAAK,IAAI,GAAmB,CAAS,IAAI,KAAK,IAAI,GAAmB,CAAC,CAAS,GACpG,IAAgB,EAAM,UAAU,CAAY;GAKlD,AADA,EAAM,MAAM,aAAa,0EACzB,EAAW;GAEX,IAAM,KAAuB,MAAwB;IAC/C,EAAG,WAAW,KAAS,EAAG,iBAAiB,gBAE/C,EAAM,oBAAoB,iBAAiB,CAAmB,GAC9D,EAAmB,CAAK;GAC1B;GAEA,EAAM,iBAAiB,iBAAiB,CAAmB;GAE3D,IAAM,IAAa,WAAW,iBAAiB,CAAK,CAAC,CAAC,kBAAkB,IAAI;GAQ5E,AANA,IAAkB,iBAAiB;IAEjC,AADA,EAAM,oBAAoB,iBAAiB,CAAmB,GAC9D,EAAmB,CAAK;GAC1B,GAAG,IAAa,EAAE,GAElB,EAAM,MAAM,YAAY,GACxB,EAAM,MAAM,UAAU;EACxB,GAEM,KAAwB,MAAuB;GAWnD,AAVA,AAEE,OADA,aAAa,CAAe,GACV,KAAA,IAIpB,EAAM,MAAM,aAAa,IACzB,EAAM,MAAM,YAAY,IACxB,EAAM,MAAM,UAAU,IACtB,EAAM,MAAM,aAAa,IACzB,EAAe,QAAQ;EACzB,GAKM,KAAsB,EAAE,aAAU,mBAA+D;GACrG,IAAM,IAAQ,EAAS;GAElB,OAIL;QAAI,EAAuB,GAAU,CAAS,GAAG;KAC/C,EAAgB,GAAO,EAAe,GAAG,CAAQ;KAEjD;IACF;IAEA,EAAqB,CAAK;GAF1B;EAGF,GAEM,IAAQ,EAAmB;GAC/B,YAAY,EAAe,CAAC,CAAC;GAC7B,UAAU;GACV,UAAU;GACV,WAAW,EAAE,kBAAe;IAC1B,IAAM,IAAQ,EAAS;IAElB,KAEL,EAAgB,GAAO,EAAe,GAAG,CAAQ;GACnD;GACA,SAAS,EAAE,aAAU,mBAAgB;IACnC,IAAM,IAAQ,EAAS;IAEvB,IAAI,CAAC,GAAO;IAEZ,IAAM,IAAc,EAAe,GAC7B,IAAkB,EAAY,gBAAgB,CAAQ,GACtD,IAAW,KAAK,IAAI,IAAkB,GAAW,CAAC;IAKxD,AAFA,EAAM,MAAM,aAAa,QACzB,EAAM,MAAM,YAAY,EAAY,UAAU,CAAQ,GACtD,EAAM,MAAM,UAAU,OAAO,IAAI,IAAW,EAAG;GACjD;GACA,WAAW;GACX,eAAe,EAAE,aAAU,mBAAgB,EAAuB,GAAU,CAAS;GACrF,iBAAiB;IACf,IAAM,IAAQ,EAAS;IAIvB,OAFK,IAEE,EAAiB,GAAO,EAAe,CAAC,CAAC,IAAI,IAFjC;GAGrB;EACF,CAAC,GAMK,EAAE,uBAAoB,iBAAc,YAAS,iBAAc,qBAAkB,EAAiB;GAClG,aAAa,MAAW;IAGtB,IAAM,IAAQ,EAAS;IAEvB,AAAI,KAAO,EAAqB,CAAK;GAGvC;GACA,qBAAqB,OAAa,EAAE,WAAW,EAAM,UAAU,SAAS,QAAQ;GAChF,aAAa,EAAM;GACnB;GACA,kBAAkB,EAAS;GAC3B,MAAM;GACN,cAAc,EAAM;GACpB,oBAAoB,EAAQ,EAAM,WAAW;GAC7C;GACA;GACA,gBAAgB,MAAW;IACzB,IAAM,IAAU,EAAS;IAKzB,AAAI,KAAW,MAAW,WAAS,EAAqB,CAAO;IAE/D,IAAM,IAAS,EAAU;IAIzB,AAFI,MAAQ,EAAO,MAAM,aAAa,KAEtC,EAAK,eAAe;KAAE,MAAM;KAAO;IAAO,CAAC;GAC7C;GACA,SAAS,MAAW,EAAK,eAAe;IAAE,MAAM;IAAM;GAAO,CAAC;GAC9D,UAAU,EAAM;GAChB,eAAe,GAAQ,MAAW;IAChC,AAAI,MAAW,UACb,EAAO,MAAM,IAEb,EAAmB;GAEvB;GACA,aAAa,EAAM;EACrB,CAAC;EAkED,OAxDA,QAAgB;GACd,IAAM,IAAS,EAAU;GAEzB,IAAI,CAAC,GAAQ;GAGb,IAAM,IAAW;GA+BjB,AA7BA,EAAS,aAAa;IACpB,EAAQ,KAAK,cAAc;GAC7B,GAEA,EAAS,aAAa;IACpB,EAAQ,MAAM,cAAc;GAC9B,GAoBA,EAAc,GAEd,EAAQ,GAAQ,UAAU,CAAY,GACtC,EAAQ,GAAQ,UAba,MAAkB;IACzC,EAAM,WAAW,SAEjB,EAAM,SAAS,KAAK,EAAe,SAEnC,EAAE,WAAW,KAEjB,EAAa,cAAc;GAC7B,CAK4C;GAK5C,IAAM,IADQ,EAAS,OACK,cAA2B,wBAAsB;GAS7E,OAPI,MACF,EAAQ,GAAc,eAAe,EAAM,iBAAiB,GAC5D,EAAQ,GAAc,eAAe,EAAM,iBAAiB,GAC5D,EAAQ,GAAc,aAAa,EAAM,eAAe,GACxD,EAAQ,GAAc,iBAAiB,EAAM,mBAAmB,UAGrD;IACX,EAAQ,QAAQ;GAClB;EACF,CAAC,GAEM,CAAI;;cAED,EAAU;;4BAEI,EAAM,MAAM,SAAS,KAAK;iCACnB,EAAM,MAAM,QAAwB,OAAhB,EAAsB;8CAC/B,EAAS;;4DAEK,CAAC,EAAU,EAAE;6CAC5B,EAAc,kBAAkB,CAAC,EAAe,EAAE;0CACrD,EAAc,EAAE;;;;;;;8BAO5B,CAAC,EAAM,YAAY,MAAM;6BAjFd;GACnC,EAAa,SAAS;EACxB,EAgF0C;;;;;;;4DAOc,CAAC,EAAU,EAAE;;;;;;CAMvE;CACA,QAAQ;EAAC;EAAmB;EAAoB;EAAoB;CAAM;AAC5E,CAAC"}
+{"version":3,"file":"drawer.js","names":[],"sources":["../src/overlay/drawer/drawer.ts"],"sourcesContent":["import { createPanGesture, type PanAxis, type PanGesture, type PanGestureEndDetail } from '@vielzeug/gesture';\nimport {\n  createStableId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onEvent,\n  onMounted,\n  prop,\n  ref,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { signal } from '@vielzeug/ripple';\n\nimport type { OverlayOpenChangeDetail } from '../../core';\nimport '../../content/icon/icon';\nimport { coarsePointerMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport { useDialogControl } from '../shared/use-dialog';\nimport styles from './drawer.css?inline';\n\ntype DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\ntype DrawerSize = 'sm' | 'lg' | 'full';\ntype DrawerBackdrop = 'opaque' | 'blur' | 'transparent';\ntype DrawerDragHandlePlacement = 'outside' | 'inset';\ntype DrawerSwipeConfig = {\n  axis: PanAxis;\n  closingDistance: (distance: number) => number;\n  translate: (distance: number) => string;\n};\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\nconst drawerSwipeConfig: Record<DrawerPlacement, DrawerSwipeConfig> = {\n  bottom: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n  left: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  right: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  top: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n};\n\n/** Element interface exposing the imperative API for `ore-drawer`. */\nexport interface DrawerElement extends HTMLElement, Omit<OreDrawerProps, 'title'> {\n  /** Programmatically close the drawer with the exit animation. */\n  hide(): void;\n  /** Programmatically open the drawer. Equivalent to setting `open`. */\n  show(): void;\n}\n\n/** Drawer component properties */\n\nexport type OreDrawerEvents = {\n  'open-change': OverlayOpenChangeDetail;\n};\n\nexport type OreDrawerProps = {\n  /** Backdrop style — 'opaque' (default), 'blur', or 'transparent' */\n  backdrop?: DrawerBackdrop;\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\n  /** Show the close (×) button in the header (default: true) */\n  dismissible?: boolean;\n  /** Drag handle position used for swipe-to-close gestures */\n  'drag-handle-placement'?: DrawerDragHandlePlacement;\n  /**\n   * CSS selector for the element inside the drawer that should receive focus on open.\n   * Defaults to native dialog focus management (first focusable element).\n   * @example '#submit-btn' | 'input[name=\"email\"]'\n   */\n  'initial-focus'?: string;\n  /**\n   * Invisible accessible label for the dialog (`aria-label`).\n   * Use when the drawer has no visible title (e.g. image-only content).\n   * When omitted, `aria-labelledby` points to the visible header title instead.\n   */\n  label?: string;\n  /** Controlled open state */\n  open?: boolean;\n  /** When true, backdrop clicks do not close the drawer (default: false) */\n  persistent?: boolean;\n  /** Side from which the drawer slides in */\n  placement?: DrawerPlacement;\n  /**\n   * When true (default), focus returns to the triggering element after the drawer closes.\n   * Set to false to manage focus manually.\n   */\n  'return-focus'?: boolean;\n  /** Drawer width/height preset */\n  size?: DrawerSize;\n  /**\n   * Visible title text rendered inside the header.\n   * Used as the dialog's accessible label via `aria-labelledby` when `label` is not set.\n   */\n  title?: string;\n};\n\n/**\n * A panel that slides in from any edge of the screen, built on the native `<dialog>` element.\n *\n * @element ore-drawer\n *\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} placement - 'left' | 'right' (default) | 'top' | 'bottom'\n * @attr {string} size - 'sm' | 'lg' | 'full'\n * @attr {string} title - Visible header title text\n * @attr {string} label - Invisible aria-label (for drawers without a visible title)\n * @attr {boolean} dismissible - Show the close (×) button (default: true)\n * @attr {string} drag-handle-placement - 'outside' (default) | 'inset'\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {boolean} persistent - Prevent backdrop-click from closing (default: false)\n *\n * @fires open-change - When the drawer state changes. detail: { open, reason }\n *\n * @slot header - Drawer header content\n * @slot - Main body content\n * @slot footer - Drawer footer content\n *\n * @cssprop --drawer-backdrop-bg - Backdrop background color\n * @cssprop --drawer-bg - Panel background color\n * @cssprop --drawer-size - Panel width (horizontal) or height (vertical)\n * @cssprop --drawer-shadow - Panel box-shadow\n * @cssprop --drawer-panel-blur - Panel backdrop blur amount\n *\n * @part drag-handle - Drawer drag handle.\n * @part panel - Panel container.\n * @part header - Header container.\n * @part close-btn - Close button.\n * @part body - Body content container.\n * @part footer - Footer container.\n * @example\n * ```html\n * <!-- With visible title -->\n * <ore-drawer open title=\"Settings\" placement=\"right\">\n *   <p>Settings content here.</p>\n * </ore-drawer>\n *\n * <!-- With custom header slot -->\n * <ore-drawer open placement=\"right\">\n *   <span slot=\"header\">Settings</span>\n *   <p>Settings content here.</p>\n * </ore-drawer>\n * ```\n */\n\nexport const DRAWER_TAG = 'ore-drawer' as const;\ndefine<OreDrawerProps>(DRAWER_TAG, {\n  props: {\n    backdrop: prop.string<DrawerBackdrop>(),\n    'default-open': prop.bool(false),\n    dismissible: prop.bool(true),\n    'drag-handle-placement': prop.oneOf(['outside', 'inset'] as const, 'outside'),\n    'initial-focus': prop.string(),\n    label: prop.string(),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    persistent: prop.bool(false),\n    placement: prop.oneOf(['left', 'right', 'top', 'bottom'] as const, 'right'),\n    'return-focus': prop.bool(true),\n    size: prop.string<DrawerSize>(),\n    title: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreDrawerEvents>();\n    const slots = useSlots();\n\n    const drawerLabelId = createStableId('drawer-label');\n    const dialogRef = ref<HTMLDialogElement>();\n    const panelRef = ref<HTMLDivElement>();\n\n    // Drag-to-close state\n    const isSwipeClosing = signal(false);\n    let swipe: PanGesture | undefined;\n    let swipeCloseTimer: ReturnType<typeof setTimeout> | undefined;\n\n    const getHeaderText = () => props.label.value ?? props.title.value ?? '';\n    const hasHeaderTitle = () => slots.has('header').value || !!getHeaderText();\n\n    // Header is visible when there is slot content, a text label, or a close button.\n    const hasHeader = () => hasHeaderTitle() || props.dismissible.value;\n    const hasFooter = () => slots.has('footer').value;\n\n    const getPlacement = (): DrawerPlacement => props.placement.value || 'right';\n\n    const getSwipeConfig = (): DrawerSwipeConfig => drawerSwipeConfig[getPlacement()];\n\n    const getSnapThreshold = (panel: HTMLElement, axis: PanAxis) => {\n      const panelSize = axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n\n      return Math.min(96, Math.max(36, panelSize * 0.18));\n    };\n\n    const shouldCommitSwipeClose = (distance: number, threshold: number) => {\n      return getSwipeConfig().closingDistance(distance) >= threshold;\n    };\n\n    const finalizeSwipeClose = (panel: HTMLElement) => {\n      if (!isSwipeClosing.value) return;\n\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      const dialog = dialogRef.value;\n\n      if (!dialog) {\n        isSwipeClosing.value = false;\n\n        return;\n      }\n\n      dialog.style.transition = 'none';\n      panel.style.opacity = '0';\n      panel.style.visibility = 'hidden';\n      void dialog.offsetWidth;\n\n      requestClose('swipe');\n    };\n\n    const startSwipeClose = (panel: HTMLElement, swipe: DrawerSwipeConfig, committedDistance: number) => {\n      if (isSwipeClosing.value) return;\n\n      isSwipeClosing.value = true;\n\n      const panelSize = swipe.axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n      // Preserve overshoot so closing continues from the dragged position instead of snapping back.\n      const exitDistance =\n        committedDistance >= 0 ? Math.max(committedDistance, panelSize) : Math.min(committedDistance, -panelSize);\n      const exitTransform = swipe.translate(exitDistance);\n\n      // Commit the current drag position first so the magnetic snap continues\n      // from the finger instead of jumping back to rest.\n      panel.style.transition = 'transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out';\n      void panel.offsetWidth;\n\n      const onExitTransitionEnd = (ev: TransitionEvent) => {\n        if (ev.target !== panel || ev.propertyName !== 'transform') return;\n\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      };\n\n      panel.addEventListener('transitionend', onExitTransitionEnd);\n\n      const durationMs = parseFloat(getComputedStyle(panel).transitionDuration) * 1000;\n\n      swipeCloseTimer = setTimeout(() => {\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      }, durationMs + 50);\n\n      panel.style.transform = exitTransform;\n      panel.style.opacity = '0.2';\n    };\n\n    const resetPanelDragStyles = (panel: HTMLElement) => {\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      // Re-enable transitions so the snap-back or exit animates.\n      panel.style.transition = '';\n      panel.style.transform = '';\n      panel.style.opacity = '';\n      panel.style.visibility = '';\n      isSwipeClosing.value = false;\n    };\n\n    const handleSwipeEnd = ({ distance, reason }: PanGestureEndDetail): void => {\n      const panel = panelRef.value;\n\n      if (!panel) return;\n\n      const threshold = getSnapThreshold(panel, getSwipeConfig().axis);\n\n      if (reason === 'release' && shouldCommitSwipeClose(distance, threshold)) {\n        startSwipeClose(panel, getSwipeConfig(), distance);\n\n        return;\n      }\n\n      resetPanelDragStyles(panel);\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Overlay State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const { closeWithAnimation, handleCancel, overlay, requestClose, watchOpenProp } = useDialogControl({\n      beforeOpen: (dialog) => {\n        // Clear any inline drag styles from a previous swipe-close so the CSS\n        // entry animation starts from the correct base state.\n        const panel = panelRef.value;\n\n        if (panel) resetPanelDragStyles(panel);\n\n        void dialog;\n      },\n      closeRequestDetail: (_reason) => ({ placement: props.placement.value ?? 'right' }),\n      defaultOpen: props['default-open'],\n      dialogRef,\n      getPanelEl: () => panelRef.value,\n      host: el,\n      initialFocus: props['initial-focus'],\n      isPersistent: () => Boolean(props.persistent.value),\n      onCleanup,\n      onEvent,\n      onNativeClose: (reason) => {\n        const panelEl = panelRef.value;\n\n        // For swipe-close, keep the panel hidden and off-screen until the next\n        // open cycle — resetting inline styles during native close can produce\n        // a visible frame at the rest position on some browsers.\n        if (panelEl && reason !== 'swipe') resetPanelDragStyles(panelEl);\n\n        const dialog = dialogRef.value;\n\n        if (dialog) dialog.style.transition = '';\n\n        emit('open-change', { open: false, reason });\n      },\n      onOpen: (reason) => emit('open-change', { open: true, reason }),\n      openProp: props.open,\n      performClose: (dialog, reason) => {\n        if (reason === 'swipe') {\n          dialog.close();\n        } else {\n          closeWithAnimation();\n        }\n      },\n      returnFocus: props['return-focus'],\n    });\n\n    const handleCloseButtonClick = () => {\n      requestClose('trigger');\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle: Setup Drawer Integration\n    // ────────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      // Expose imperative API\n      const drawerEl = el as DrawerElement;\n\n      drawerEl.show = () => {\n        overlay.open('programmatic');\n      };\n\n      drawerEl.hide = () => {\n        overlay.close('programmatic');\n      };\n\n      // ────────────────────────────────────────────────────────────\n      // Event Handlers: Cancel, Backdrop Click\n      // ────────────────────────────────────────────────────────────\n      // `handleCancel` (Escape via the native `cancel` event) is provided by\n      // `useDialogControl` above — drawer only needs its own backdrop-click\n      // handler since it has swipe-to-dismiss logic the shared dialog helper\n      // doesn't know about.\n\n      const handleBackdropClick = (e: MouseEvent) => {\n        if (props.persistent.value) return;\n\n        if (swipe?.active || isSwipeClosing.value) return;\n\n        if (e.target !== dialog) return; // Click inside panel\n\n        requestClose('outsideClick');\n      };\n\n      watchOpenProp();\n\n      onEvent(dialog, 'cancel', handleCancel);\n      onEvent(dialog, 'click', handleBackdropClick);\n\n      // Drag-to-close handlers — scoped to the handle element only so interactions\n      // with panel content don't accidentally start a drag.\n      const panel = panelRef.value;\n      const dragHandleEl = panel?.querySelector<HTMLElement>('[part=\"drag-handle\"]');\n\n      if (dragHandleEl) {\n        swipe = createPanGesture(dragHandleEl, {\n          axis: () => getSwipeConfig().axis,\n          disabled: () => isSwipeClosing.value,\n          onEnd: handleSwipeEnd,\n          onMove: ({ distance }) => {\n            const currentPanel = panelRef.value;\n\n            if (!currentPanel) return;\n\n            const swipeConfig = getSwipeConfig();\n            const threshold = getSnapThreshold(currentPanel, swipeConfig.axis);\n            const closingDistance = swipeConfig.closingDistance(distance);\n            const progress = Math.min(closingDistance / threshold, 1);\n\n            currentPanel.style.transition = 'none';\n            currentPanel.style.transform = swipeConfig.translate(distance);\n            currentPanel.style.opacity = String(1 - progress * 0.4);\n          },\n        });\n      }\n\n      return () => {\n        swipe?.dispose();\n        swipe = undefined;\n        overlay.dispose();\n      };\n    });\n\n    return html`\n      <dialog\n        ref=${dialogRef}\n        aria-modal=\"true\"\n        aria-label=\"${() => props.label.value ?? null}\"\n        aria-labelledby=\"${() => (!props.label.value ? drawerLabelId : null)}\">\n        <div class=\"panel\" part=\"panel\" ref=${panelRef}>\n          <div class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Drag to close\" role=\"button\"></div>\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader()}>\n            <span class=\"header-title\" id=\"${drawerLabelId}\" ?hidden=${() => !hasHeaderTitle()}>\n              <slot name=\"header\">${() => getHeaderText()}</slot>\n            </span>\n            <button\n              class=\"close-btn\"\n              part=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close\"\n              ?hidden=${() => !props.dismissible.value}\n              @click=${handleCloseButtonClick}>\n              <ore-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n            </button>\n          </div>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"footer\" part=\"footer\" ?hidden=${() => !hasFooter()}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [forcedColorsMixin, coarsePointerMixin, reducedMotionMixin, styles],\n});\n"],"mappings":"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"}

package/dist/errors.cjs

@@ -1,2 +1,2 @@
-var e=class e extends Error{constructor(e,t){super(e,t),this.name=new.target.name,Object.setPrototypeOf(this,new.target.prototype)}static is(t){return t instanceof e}},t=class extends e{};exports.RefineConfigError=t,exports.RefineError=e;
+var e=class extends Error{constructor(e,t){super(e,t),this.name=new.target.name,Object.setPrototypeOf(this,new.target.prototype)}},t=class extends e{};exports.RefineConfigError=t,exports.RefineError=e;
 //# sourceMappingURL=errors.cjs.map

package/dist/errors.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"errors.cjs","names":[],"sources":["../src/errors.ts"],"sourcesContent":["/** Base class for all refine errors. Use `instanceof RefineError` to catch any refine-originated error. */\nexport class RefineError extends Error {\n  constructor(message: string, opts?: ErrorOptions) {\n    super(message, opts);\n    this.name = new.target.name;\n    Object.setPrototypeOf(this, new.target.prototype);\n  }\n\n  static is(err: unknown): err is RefineError {\n    return err instanceof RefineError;\n  }\n}\n\n/** Thrown when a refine component receives an invalid or unsupported configuration. */\nexport class RefineConfigError extends RefineError {}\n"],"mappings":"AACA,IAAa,EAAb,MAAa,UAAoB,KAAM,CACrC,YAAY,EAAiB,EAAqB,CAChD,MAAM,EAAS,CAAI,EACnB,KAAK,KAAO,WAAW,KACvB,OAAO,eAAe,KAAM,WAAW,SAAS,CAClD,CAEA,OAAO,GAAG,EAAkC,CAC1C,OAAO,aAAe,CACxB,CACF,EAGa,EAAb,cAAuC,CAAY,CAAC"}
+{"version":3,"file":"errors.cjs","names":[],"sources":["../src/errors.ts"],"sourcesContent":["/** Base class for all refine errors. Use `instanceof RefineError` to catch any refine-originated error. */\nexport class RefineError extends Error {\n  constructor(message: string, opts?: ErrorOptions) {\n    super(message, opts);\n    this.name = new.target.name;\n    Object.setPrototypeOf(this, new.target.prototype);\n  }\n}\n\n/** Thrown when a refine component receives an invalid or unsupported configuration. */\nexport class RefineConfigError extends RefineError {}\n"],"mappings":"AACA,IAAa,EAAb,cAAiC,KAAM,CACrC,YAAY,EAAiB,EAAqB,CAChD,MAAM,EAAS,CAAI,EACnB,KAAK,KAAO,WAAW,KACvB,OAAO,eAAe,KAAM,WAAW,SAAS,CAClD,CACF,EAGa,EAAb,cAAuC,CAAY,CAAC"}

package/dist/errors.d.ts

@@ -1,7 +1,6 @@
 /** Base class for all refine errors. Use `instanceof RefineError` to catch any refine-originated error. */
 export declare class RefineError extends Error {
     constructor(message: string, opts?: ErrorOptions);
-    static is(err: unknown): err is RefineError;
 }
 /** Thrown when a refine component receives an invalid or unsupported configuration. */
 export declare class RefineConfigError extends RefineError {

package/dist/errors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../src/errors.ts"],"names":[],"mappings":"AAAA,2GAA2G;AAC3G,qBAAa,WAAY,SAAQ,KAAK;gBACxB,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,YAAY;IAMhD,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,WAAW;CAG5C;AAED,uFAAuF;AACvF,qBAAa,iBAAkB,SAAQ,WAAW;CAAG"}
+{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../src/errors.ts"],"names":[],"mappings":"AAAA,2GAA2G;AAC3G,qBAAa,WAAY,SAAQ,KAAK;gBACxB,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,YAAY;CAKjD;AAED,uFAAuF;AACvF,qBAAa,iBAAkB,SAAQ,WAAW;CAAG"}

package/dist/errors.js

@@ -1,11 +1,8 @@
 //#region src/errors.ts
-var e = class e extends Error {
+var e = class extends Error {
 	constructor(e, t) {
 		super(e, t), this.name = new.target.name, Object.setPrototypeOf(this, new.target.prototype);
 	}
-	static is(t) {
-		return t instanceof e;
-	}
 }, t = class extends e {};
 //#endregion
 export { t as RefineConfigError, e as RefineError };

package/dist/errors.js.map

@@ -1 +1 @@
-{"version":3,"file":"errors.js","names":[],"sources":["../src/errors.ts"],"sourcesContent":["/** Base class for all refine errors. Use `instanceof RefineError` to catch any refine-originated error. */\nexport class RefineError extends Error {\n  constructor(message: string, opts?: ErrorOptions) {\n    super(message, opts);\n    this.name = new.target.name;\n    Object.setPrototypeOf(this, new.target.prototype);\n  }\n\n  static is(err: unknown): err is RefineError {\n    return err instanceof RefineError;\n  }\n}\n\n/** Thrown when a refine component receives an invalid or unsupported configuration. */\nexport class RefineConfigError extends RefineError {}\n"],"mappings":";AACA,IAAa,IAAb,MAAa,UAAoB,MAAM;CACrC,YAAY,GAAiB,GAAqB;EAGhD,AAFA,MAAM,GAAS,CAAI,GACnB,KAAK,OAAO,WAAW,MACvB,OAAO,eAAe,MAAM,WAAW,SAAS;CAClD;CAEA,OAAO,GAAG,GAAkC;EAC1C,OAAO,aAAe;CACxB;AACF,GAGa,IAAb,cAAuC,EAAY,CAAC"}
+{"version":3,"file":"errors.js","names":[],"sources":["../src/errors.ts"],"sourcesContent":["/** Base class for all refine errors. Use `instanceof RefineError` to catch any refine-originated error. */\nexport class RefineError extends Error {\n  constructor(message: string, opts?: ErrorOptions) {\n    super(message, opts);\n    this.name = new.target.name;\n    Object.setPrototypeOf(this, new.target.prototype);\n  }\n}\n\n/** Thrown when a refine component receives an invalid or unsupported configuration. */\nexport class RefineConfigError extends RefineError {}\n"],"mappings":";AACA,IAAa,IAAb,cAAiC,MAAM;CACrC,YAAY,GAAiB,GAAqB;EAGhD,AAFA,MAAM,GAAS,CAAI,GACnB,KAAK,OAAO,WAAW,MACvB,OAAO,eAAe,MAAM,WAAW,SAAS;CAClD;AACF,GAGa,IAAb,cAAuC,EAAY,CAAC"}

package/dist/feedback/skeleton/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/feedback/skeleton/skeleton.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,2CAA2C;AAC3C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/feedback/skeleton/skeleton.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,2CAA2C;AAC3C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}

package/dist/feedback/toast/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/feedback/toast/toast.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AAQxB,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM1E,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACpB,OAAO,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,WAAW,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC;CACvG,CAAC;AAEF,qCAAqC;AACrC,MAAM,MAAM,SAAS,GAAG;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;QACrB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;KACzC,CAAC,CAAC;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mCAAmC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;CACzC,CAAC;AA4PF,eAAO,MAAM,SAAS,EAAG,WAAoB,CAAC;AAwT9C,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAE/C,MAAM,WAAW,YAAY;IAC3B,GAAG,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,KAAK,IAAI,IAAI,CAAC;IACd,SAAS,CAAC,MAAM,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,cAAc,EAAE,WAAW,CAAC;IACrC,OAAO,IAAI,IAAI,CAAC;IAChB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IAC1D,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IACzD,OAAO,CAAC,CAAC,EACP,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EACnB,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC;QAC3C,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;KACzC,GACA,OAAO,CAAC,CAAC,CAAC,CAAC;IACd,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IAC5D,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;IACtD,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IAC5D,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC;CAC1B;AAID;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,GAAE,UAA0B,GAAG,YAAY,CAgJjF;AAED,4EAA4E;AAC5E,eAAO,MAAM,KAAK,EAAE,YAAmC,CAAC"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/feedback/toast/toast.ts"],"names":[],"mappings":"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"}