@vielzeug/refine 1.5.4 → 1.7.0

package/dist/drawer.js

@@ -1,12 +1,12 @@
 import { coarsePointerMixin as e, reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
-import { elevationMixin as n, forcedColorsMixin as r } from "./styles/mixins/theme.css.js";
-import { createSwipeControl as i } from "./headless/swipe.js";
-import { useDialogControl as a } from "./overlay/shared/use-dialog.js";
-import o from "./overlay/drawer/drawer.css.js";
-import { createStableId as s, define as c, getHost as l, html as u, onCleanup as d, onEvent as f, onMounted as p, prop as m, ref as h, useEmit as g, useSlots as _ } from "@vielzeug/ore";
-import { signal as v } from "@vielzeug/ripple";
+import { forcedColorsMixin as n } from "./styles/mixins/theme.css.js";
+import { createSwipeControl as r } from "./headless/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";
 //#region src/overlay/drawer/drawer.ts
-var y = {
+var v = {
 	bottom: {
 		axis: "y",
 		closingDistance: (e) => Math.max(0, e),
@@ -27,34 +27,34 @@ var y = {
 		closingDistance: (e) => Math.max(0, -e),
 		translate: (e) => `translateY(${e}px)`
 	}
-}, b = "ore-drawer";
-c(b, {
+}, y = "ore-drawer";
+s(y, {
 	props: {
-		backdrop: m.string(),
-		dismissible: m.bool(!0),
-		"drag-handle-placement": m.oneOf(["outside", "inset"], "outside"),
-		"initial-focus": m.string(),
-		label: m.string(),
-		open: m.bool(!1),
-		persistent: m.bool(!1),
-		placement: m.oneOf([
+		backdrop: p.string(),
+		dismissible: p.bool(!0),
+		"drag-handle-placement": p.oneOf(["outside", "inset"], "outside"),
+		"initial-focus": p.string(),
+		label: p.string(),
+		open: p.bool(!1),
+		persistent: p.bool(!1),
+		placement: p.oneOf([
 			"left",
 			"right",
 			"top",
 			"bottom"
 		], "right"),
-		"return-focus": m.bool(!0),
-		size: m.string(),
-		title: m.string()
+		"return-focus": p.bool(!0),
+		size: p.string(),
+		title: p.string()
 	},
 	setup(e) {
-		let t = l(), n = g(), r = _(), o = s("drawer-label"), c = h(), m = h(), b = v(!1), x, S = () => e.label.value ?? e.title.value ?? "", C = () => r.has("header").value || !!S(), w = () => C() || e.dismissible.value, T = () => r.has("footer").value, E = () => e.placement.value || "right", D = () => y[E()], O = (e, t) => {
+		let t = c(), n = h(), a = g(), s = o("drawer-label"), p = m(), y = 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 = () => v[E()], O = (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) => {
 			if (!b.value) return;
 			x &&= (clearTimeout(x), void 0);
-			let t = c.value;
+			let t = p.value;
 			if (!t) {
 				b.value = !1;
 				return;
@@ -76,7 +76,7 @@ c(b, {
 		}, 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 }) => {
-			let n = m.value;
+			let n = y.value;
 			if (n) {
 				if (k(e, t)) {
 					j(n, D(), e);
@@ -84,16 +84,16 @@ c(b, {
 				}
 				M(n);
 			}
-		}, P = i({
+		}, P = r({
 			axis: () => D().axis,
 			disabled: b,
 			onCancel: N,
 			onCommit: ({ distance: e }) => {
-				let t = m.value;
+				let t = y.value;
 				t && j(t, D(), e);
 			},
 			onMove: ({ distance: e, threshold: t }) => {
-				let n = m.value;
+				let n = y.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);
@@ -101,26 +101,26 @@ c(b, {
 			onRelease: N,
 			shouldCommit: ({ distance: e, threshold: t }) => k(e, t),
 			threshold: () => {
-				let e = m.value;
+				let e = y.value;
 				return e ? O(e, D().axis) : 48;
 			}
-		}), { closeWithAnimation: F, handleCancel: I, overlay: L, requestClose: R, watchOpenProp: z } = a({
+		}), { closeWithAnimation: F, handleCancel: I, overlay: L, requestClose: R, watchOpenProp: z } = i({
 			beforeOpen: (e) => {
-				let t = m.value;
+				let t = y.value;
 				t && M(t);
 			},
 			closeRequestDetail: (t) => ({ placement: e.placement.value ?? "right" }),
-			dialogRef: c,
-			getPanelEl: () => m.value,
+			dialogRef: p,
+			getPanelEl: () => y.value,
 			host: t,
 			initialFocus: e["initial-focus"],
 			isPersistent: () => !!e.persistent.value,
-			onCleanup: d,
-			onEvent: f,
+			onCleanup: u,
+			onEvent: d,
 			onNativeClose: (t) => {
-				let r = m.value;
+				let r = y.value;
 				r && t !== "swipe" && M(r);
-				let i = c.value;
+				let i = p.value;
 				i && (i.style.transition = ""), n("close", {
 					placement: e.placement.value ?? "right",
 					reason: t
@@ -136,31 +136,31 @@ c(b, {
 			},
 			returnFocus: e["return-focus"]
 		});
-		return p(() => {
-			let n = c.value;
+		return f(() => {
+			let n = p.value;
 			if (!n) return;
 			let r = t;
 			r.show = () => {
 				L.open("programmatic");
 			}, r.hide = () => {
 				L.close("programmatic", !1);
-			}, z(), f(n, "cancel", I), f(n, "click", (t) => {
+			}, z(), d(n, "cancel", I), d(n, "click", (t) => {
 				e.persistent.value || P.isActive() || b.value || t.target === n && R("outsideClick");
 			});
-			let i = m.value?.querySelector("[part=\"drag-handle\"]");
-			return i && (f(i, "pointerdown", P.handlePointerDown), f(i, "pointermove", P.handlePointerMove), f(i, "pointerup", P.handlePointerUp), f(i, "pointercancel", P.handlePointerCancel)), () => {
+			let i = y.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();
 			};
-		}), u`
+		}), l`
       <dialog
-        ref=${c}
+        ref=${p}
         aria-modal="true"
         :aria-label="${() => e.label.value ?? null}"
-        :aria-labelledby="${() => e.label.value ? null : o}">
-        <div class="panel" part="panel" ref=${m}>
+        :aria-labelledby="${() => e.label.value ? null : s}">
+        <div class="panel" part="panel" ref=${y}>
           <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="${o}" ?hidden=${() => !C()}>
+            <span class="header-title" id="${s}" ?hidden=${() => !C()}>
               <slot name="header">${() => S()}</slot>
             </span>
             <button
@@ -187,13 +187,12 @@ c(b, {
 	},
 	styles: [
 		n,
-		r,
 		e,
 		t,
-		o
+		a
 	]
 });
 //#endregion
-export { b as DRAWER_TAG };
+export { y as DRAWER_TAG };
 
 //# sourceMappingURL=drawer.js.map

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  html,\n  prop,\n  ref,\n  getHost,\n  onCleanup,\n  onEvent,\n  onMounted,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { signal } from '@vielzeug/ripple';\n\nimport type { OverlayCloseDetail, OverlayOpenDetail, SwipeAxis } from '../../headless';\n\nimport { createSwipeControl } from '../../headless';\nimport '../../content/icon/icon';\nimport { coarsePointerMixin, elevationMixin, 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 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 open the drawer. Equivalent to setting `open`. */\n  show(): void;\n  /** Programmatically close the drawer with the exit animation. */\n  hide(): void;\n}\n\n/** Drawer component properties */\n\nexport type OreDrawerEvents = {\n  close: OverlayCloseDetail & { placement: DrawerPlacement };\n  open: OverlayOpenDetail & { placement: DrawerPlacement };\n};\n\nexport type OreDrawerProps = {\n  /** Backdrop style — 'opaque' (default), 'blur', or 'transparent' */\n  backdrop?: DrawerBackdrop;\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/close 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 - When the drawer opens with detail: { placement, reason }\n * @fires close - When the drawer closes with detail: { placement, 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    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: prop.bool(false),\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      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('close', { placement: props.placement.value ?? 'right', reason });\n      },\n      onOpen: (reason) => emit('open', { placement: props.placement.value ?? 'right', 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', false);\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: [elevationMixin, forcedColorsMixin, coarsePointerMixin, reducedMotionMixin, styles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"drawer.js","names":[],"sources":["../src/overlay/drawer/drawer.ts"],"sourcesContent":["import {\n  createStableId,\n  define,\n  html,\n  prop,\n  ref,\n  getHost,\n  onCleanup,\n  onEvent,\n  onMounted,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { signal } from '@vielzeug/ripple';\n\nimport type { OverlayCloseDetail, OverlayOpenDetail, SwipeAxis } from '../../headless';\n\nimport { createSwipeControl } from '../../headless';\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 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 open the drawer. Equivalent to setting `open`. */\n  show(): void;\n  /** Programmatically close the drawer with the exit animation. */\n  hide(): void;\n}\n\n/** Drawer component properties */\n\nexport type OreDrawerEvents = {\n  close: OverlayCloseDetail & { placement: DrawerPlacement };\n  open: OverlayOpenDetail & { placement: DrawerPlacement };\n};\n\nexport type OreDrawerProps = {\n  /** Backdrop style — 'opaque' (default), 'blur', or 'transparent' */\n  backdrop?: DrawerBackdrop;\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/close 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 - When the drawer opens with detail: { placement, reason }\n * @fires close - When the drawer closes with detail: { placement, 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    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: prop.bool(false),\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      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('close', { placement: props.placement.value ?? 'right', reason });\n      },\n      onOpen: (reason) => emit('open', { placement: props.placement.value ?? 'right', 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', false);\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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"}

package/dist/file-input.cjs

@@ -1,37 +1,41 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./styles/index.cjs"),r=require("./shared/size-presets.cjs"),i=require("./headless/keyboard.cjs"),a=require("./inputs/shared/form-context.cjs"),o=require("./inputs/file-input/file-input.css.cjs");let s=require("@vielzeug/ore"),c=require("@vielzeug/ripple"),l=require("@vielzeug/ore/forms"),u=require("@vielzeug/dnd");var d=e=>{if(e===0)return`0 B`;let t=1024,n=[`B`,`KB`,`MB`,`GB`,`TB`],r=Math.floor(Math.log(e)/Math.log(t));return parseFloat((e/t**r).toFixed(1))+` `+n[r]},f=(e,t)=>!t||e.size<=t,p=e=>e.type.startsWith(`image/`),m=`ore-file-input`;(0,s.define)(m,{formAssociated:!0,props:{accept:s.prop.string(),color:s.prop.string(),disabled:s.prop.bool(!1),error:s.prop.string(),gallery:s.prop.bool(!1),helper:s.prop.string(),label:s.prop.string(),"max-files":s.prop.number(0),"max-size":s.prop.number(0),multiple:s.prop.bool(!1),name:s.prop.string(),ref:s.prop.json(void 0),required:s.prop.bool(!1),size:s.prop.string()},setup(e){let t=(0,s.useEmit)(),n=(0,c.signal)([]),r=(0,c.signal)(!1),o=a.useFormContext(e,(0,s.inject)(a.FORM_CTX)),m=o.disabled,h=(0,c.computed)(()=>e[`max-files`].value??0),g=(0,c.computed)(()=>e[`max-size`].value??0);(0,l.useField)({disabled:m,toFormValue:t=>{if(t.length===0)return null;let n=e.name.value||`file`,r=new FormData;for(let e of t)r.append(n,e);return r},value:n});let _=(0,c.computed)(()=>!!e.error.value);(0,s.bind)({attr:{"drag-over":()=>r.value?!0:void 0,invalid:()=>_.value?!0:void 0,size:o.size}});let v=(0,s.createStableId)(`file-input`),y=`label-${v}`,b=`helper-${v}`,x=`error-${v}`,S=(0,s.ref)(),C=(0,s.ref)(),w=(0,c.computed)(()=>{let t=[];e.accept.value&&t.push(e.accept.value.split(`,`).map(e=>e.trim()).join(`, `));let n=g.value;n>0&&t.push(`max ${d(n)}`);let r=h.value;return r>0&&t.push(`up to ${r} file${r===1?``:`s`}`),t.join(` · `)});function T(r,i){if(m.value)return;let a=e.accept.value,o=!!e.multiple.value,s=Array.from(r);o||(s=s.slice(0,1)),s=s.filter(e=>(0,u.matchesAccept)(e,a?a.split(`,`).map(e=>e.trim()):[])&&f(e,g.value));let c=o?[...n.value]:[];for(let e of s)c.includes(e)||c.push(e);h.value>0&&c.length>h.value&&(c=c.slice(0,h.value)),n.value=c,t(`change`,{files:n.value,originalEvent:i,value:n.value})}function E(e,r){n.value=n.value.filter(t=>t!==e),t(`remove`,{file:e,files:n.value,originalEvent:r,value:n.value}),t(`change`,{files:n.value,originalEvent:r,value:n.value})}let D=new Map;function O(e){let t=D.get(e);return t||(t=URL.createObjectURL(e),D.set(e,t)),t}function k(e){let t=new Set(e);for(let[e,n]of D)t.has(e)||(URL.revokeObjectURL(n),D.delete(e))}return(0,c.watch)(n,k),(0,s.onCleanup)(()=>{for(let e of D.values())URL.revokeObjectURL(e);D.clear()}),(0,s.onElement)(C,t=>{e.ref.value?.(t);let n=(0,c.watch)(e.ref,e=>{e?.(t)});return()=>{n.dispose(),e.ref.value?.(null)}}),(0,s.onMounted)(()=>{let e=C.value,t=S.value,n=!1,a=i.createInteraction({disabled:m,onPress:()=>{e.click()}});(0,s.onEvent)(e,`change`,e=>{let t=e.target;t.files?.length&&T(Array.from(t.files),e),t.value=``}),(0,s.onEvent)(t,`click`,t=>{if(t.target!==e){if(n){n=!1;return}m.value||e.click()}}),(0,s.onEvent)(t,`keydown`,e=>{n=a.handleKeydown(e)&&e.key===`Enter`});let o=(0,u.createDropZone)({disabled:m.value,element:t,onDrop:e=>T(e),onHoverChange:e=>{r.value=e}});(0,s.onCleanup)(()=>o.dispose())}),s.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./styles/index.cjs"),r=require("./shared/size-presets.cjs"),i=require("./headless/ref-callback.cjs"),a=require("./headless/keyboard.cjs"),o=require("./inputs/shared/form-context.cjs"),s=require("./inputs/file-input/file-input-upload.cjs"),c=require("./inputs/file-input/file-input.css.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ore/directives"),d=require("@vielzeug/ripple"),f=require("@vielzeug/ore/forms"),p=require("@vielzeug/dnd");var m=e=>e.type.startsWith(`image/`),h=`ore-file-input`;(0,l.define)(h,{formAssociated:!0,props:{accept:l.prop.string(),color:l.prop.string(),disabled:l.prop.bool(!1),error:l.prop.string(),gallery:l.prop.bool(!1),helper:l.prop.string(),label:l.prop.string(),"max-files":l.prop.number(0),"max-size":l.prop.number(0),multiple:l.prop.bool(!1),name:l.prop.string(),ref:l.prop.data(),required:l.prop.bool(!1),size:l.prop.string(),upload:l.prop.data()},setup(e){let t=(0,l.useEmit)(),n=(0,d.signal)(!1),r=(0,d.signal)(null),c=o.useFormContext(e,(0,l.inject)(o.FORM_CTX)),h=c.disabled,g=(0,d.computed)(()=>e[`max-files`].value??0),_=(0,d.computed)(()=>e[`max-size`].value??0),v=s.createFileQueue({accept:e.accept,disabled:h,maxFiles:g,maxSize:_,multiple:(0,d.computed)(()=>!!e.multiple.value),onChange:(e,n)=>t(`change`,{files:e,originalEvent:n,value:e}),onRemove:(e,n,r)=>t(`remove`,{file:e,files:n,originalEvent:r,value:n}),onUploadError:(e,n)=>t(`upload-error`,{error:n,file:e}),onUploadProgress:(e,n,r)=>t(`upload-progress`,{file:e,loaded:n,total:r}),onUploadSuccess:e=>t(`upload-success`,{file:e}),upload:(0,d.computed)(()=>e.upload.value??void 0)});(0,l.onCleanup)(()=>v.dispose()),(0,f.useField)({disabled:h,toFormValue:t=>{if(t.length===0)return null;let n=e.name.value||`file`,r=new FormData;for(let e of t)r.append(n,e);return r},value:v.files});let y=(0,d.computed)(()=>!!e.error.value);(0,l.bind)({attr:{"drag-over":()=>n.value?!0:void 0,invalid:()=>y.value?!0:void 0,size:c.size}});let b=(0,l.createStableId)(`file-input`),x=`label-${b}`,S=`helper-${b}`,C=`error-${b}`,w=(0,l.ref)(),T=(0,l.ref)(),E=(0,d.computed)(()=>{let t=[];e.accept.value&&t.push(e.accept.value.split(`,`).map(e=>e.trim()).join(`, `));let n=_.value;n>0&&t.push(`max ${s.formatBytes(n)}`);let r=g.value;return r>0&&t.push(`up to ${r} file${r===1?``:`s`}`),t.join(` · `)});function D(e){r.value=e,T.value?.click()}let O=new Map;function k(e){let t=O.get(e);return t||(t=URL.createObjectURL(e),O.set(e,t)),t}function A(e){let t=new Set(e);for(let[e,n]of O)t.has(e)||(URL.revokeObjectURL(n),O.delete(e))}return(0,d.watch)(v.files,A),(0,l.onCleanup)(()=>{for(let e of O.values())URL.revokeObjectURL(e);O.clear()}),(0,l.onElement)(T,t=>i.bindRefCallback(e.ref,t)),(0,l.onMounted)(()=>{let e=T.value,t=w.value,i=!1,o=a.createInteraction({disabled:h,onPress:()=>{e.click()}});(0,l.onEvent)(e,`change`,e=>{let t=e.target,n=r.value;r.value=null,n&&t.files?.[0]?v.replaceFile(n,t.files[0],e):t.files?.length&&v.addFiles(Array.from(t.files),e),t.value=``}),(0,l.onEvent)(t,`click`,t=>{if(t.target!==e){if(i){i=!1;return}h.value||e.click()}}),(0,l.onEvent)(t,`keydown`,e=>{i=o.handleKeydown(e)&&e.key===`Enter`}),(0,d.watch)(h,e=>{let r=(0,p.createDropZone)({disabled:e,element:t,onDrop:e=>v.addFiles(e),onHoverChange:e=>{n.value=e}});return()=>r.dispose()},{immediate:!0})}),l.html`
       <div class="file-input-wrapper" part="wrapper">
-        <label class="label-outside" id="${y}" part="label" ?hidden=${()=>!e.label.value}
+        <label class="label-outside" id="${x}" part="label" ?hidden=${()=>!e.label.value}
           >${e.label}</label
         >
         <div
           class="dropzone"
           part="dropzone"
-          ref=${S}
+          ref=${w}
           role="button"
-          :tabindex="${()=>m.value?`-1`:`0`}"
-          :aria-disabled="${()=>String(m.value)}"
+          :tabindex="${()=>h.value?`-1`:`0`}"
+          :aria-disabled="${()=>String(h.value)}"
           :aria-label="${()=>e.label.value?null:`File upload drop zone`}"
-          :aria-labelledby="${()=>e.label.value?y:null}"
-          aria-describedby="${b}">
+          :aria-labelledby="${()=>e.label.value?x:null}"
+          aria-describedby="${S}">
           <input
             type="file"
-            ref=${C}
+            ref=${T}
             part="input"
-            id="${v}"
+            id="${b}"
             :accept="${e.accept}"
             ?multiple="${e.multiple}"
             ?required="${e.required}"
-            ?disabled="${m}"
+            ?disabled="${h}"
             :name="${e.name}"
             hidden
             inert
             tabindex="-1" />
           <div class="dropzone-content">
-            <span class="dropzone-icon" aria-hidden="true">
-              <ore-icon name="upload" size="36" stroke-width="1.5" aria-hidden="true"></ore-icon>
+            <span class="dropzone-icon" aria-hidden="true" :data-status="${()=>y.value?`error`:null}">
+              ${()=>y.value?l.html`<ore-icon name="alert-circle" size="36" stroke-width="1.5" aria-hidden="true"></ore-icon>`:l.html`<ore-icon name="upload" size="36" stroke-width="1.5" aria-hidden="true"></ore-icon>`}
             </span>
-            <span class="dropzone-title">Drop files here or <u>click to browse</u></span>
-            <span class="dropzone-hint" ?hidden=${()=>!w.value}>${w}</span>
+            <!-- Signal 01: the copy itself shifts on drag-entry (not just border/glow) — a
+                 static "Drop files here" during an active drag reads as if the drop target
+                 hasn't noticed the file yet. -->
+            ${(0,u.when)(()=>n.value,()=>l.html`<span class="dropzone-title dropzone-title-active">Release to upload</span>`)}
+            ${(0,u.when)(()=>!n.value,()=>l.html`<span class="dropzone-title">Drop files here or <u>click to browse</u></span>`)}
+            <span class="dropzone-hint" ?hidden=${()=>!E.value}>${E}</span>
           </div>
         </div>
         <ul
@@ -39,54 +43,116 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           part="${()=>e.gallery.value?`gallery`:null}"
           role="list"
           aria-label="Selected files"
-          ?hidden=${()=>n.value.length===0}>
-          ${()=>n.value.map(t=>e.gallery.value?s.html`
-                    <li class="file-card">
-                      ${p(t)?s.html`<img
-                              class="file-thumb"
-                              alt=""
-                              ref="${e=>{e&&(e.src=O(t))}}" />`:s.html`<span class="file-thumb file-thumb-generic" aria-hidden="true">
-                              <ore-icon name="file" size="28" stroke-width="1.5" aria-hidden="true"></ore-icon>
-                            </span>`}
+          ?hidden=${()=>v.files.value.length===0}>
+          ${()=>v.files.value.map(t=>e.gallery.value?l.html`
+                    <li class="file-card" data-status=${()=>v.fileState(t).status}>
+                      <span class="file-thumb-frame">
+                        ${m(t)?l.html`<img
+                                class="file-thumb"
+                                alt=""
+                                ref="${e=>{e&&(e.src=k(t))}}" />`:l.html`<span class="file-thumb file-thumb-generic" aria-hidden="true">
+                                <ore-icon name="file" size="28" stroke-width="1.5" aria-hidden="true"></ore-icon>
+                              </span>`}
+                        ${(0,u.when)(()=>v.fileState(t).status===`success`,()=>l.html`<span class="file-status-badge file-status-badge-success" aria-hidden="true">
+                              <ore-icon name="check" size="11" stroke-width="3" aria-hidden="true"></ore-icon>
+                            </span>`)}
+                        ${(0,u.when)(()=>v.fileState(t).status===`error`,()=>l.html`<span class="file-status-badge file-status-badge-error" aria-hidden="true">
+                              <ore-icon name="alert-circle" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
+                            </span>`)}
+                        <span class="file-card-actions">
+                          ${(0,u.when)(()=>v.fileState(t).status===`error`,()=>l.html`<button
+                                class="file-card-action"
+                                type="button"
+                                aria-label="${`Retry uploading ${t.name}`}"
+                                @click=${()=>v.retryUpload(t)}>
+                                <ore-icon name="refresh-cw" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
+                              </button>`)}
+                          ${(0,u.when)(()=>v.fileState(t).status===`success`&&!!e.multiple.value&&!!e.upload.value,()=>l.html`<button
+                                class="file-card-action"
+                                type="button"
+                                aria-label="${`Replace ${t.name}`}"
+                                @click=${()=>D(t)}>
+                                <ore-icon name="upload" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
+                              </button>`)}
+                          <button
+                            class="file-card-action file-card-remove"
+                            type="button"
+                            aria-label="${`Remove ${t.name}`}"
+                            @click=${e=>v.removeFile(t,e)}>
+                            <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
+                          </button>
+                        </span>
+                      </span>
                       <span class="file-card-name" title="${t.name}">${t.name}</span>
-                      <button
-                        class="file-card-remove"
-                        type="button"
-                        aria-label="${`Remove ${t.name}`}"
-                        @click=${e=>E(t,e)}>
-                        <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
-                      </button>
+                      ${(0,u.when)(()=>v.fileState(t).status===`uploading`,()=>l.html`
+                          <ore-progress
+                            type="linear"
+                            size="sm"
+                            :value=${()=>v.uploadPercent(t)}
+                            label=${()=>`${v.uploadPercent(t)}%`}></ore-progress>
+                          <span class="file-progress-meta">${()=>v.uploadMetaText(t)}</span>
+                        `)}
+                      ${(0,u.when)(()=>v.fileState(t).status===`error`,()=>l.html`<span class="file-error-text">${()=>v.fileState(t).error}</span>`)}
                     </li>
-                  `:s.html`
-                    <li class="file-item">
+                  `:l.html`
+                    <li class="file-item" data-status=${()=>v.fileState(t).status}>
                       <span class="file-icon" aria-hidden="true">
-                        <ore-icon name="file" size="18" stroke-width="1.75" aria-hidden="true"></ore-icon>
+                        <ore-icon
+                          name=${()=>v.statusIconName(t)}
+                          size="18"
+                          stroke-width="1.75"
+                          aria-hidden="true"></ore-icon>
                       </span>
                       <span class="file-meta">
                         <span class="file-name" title="${t.name}">${t.name}</span>
-                        <span class="file-size">${d(t.size)}</span>
+                        ${(0,u.when)(()=>v.fileState(t).status===`uploading`,()=>l.html`
+                            <ore-progress
+                              type="linear"
+                              size="sm"
+                              :value=${()=>v.uploadPercent(t)}
+                              label=${()=>`${v.uploadPercent(t)}%`}></ore-progress>
+                            <span class="file-progress-meta">${()=>v.uploadMetaText(t)}</span>
+                          `)}
+                        ${(0,u.when)(()=>v.fileState(t).status===`error`,()=>l.html`<span class="file-error-text">${()=>v.fileState(t).error}</span>`)}
+                        ${(0,u.when)(()=>v.fileState(t).status===`idle`||v.fileState(t).status===`success`,()=>l.html`<span class="file-size">${s.formatBytes(t.size)}</span>`)}
+                      </span>
+                      <span class="file-actions">
+                        ${(0,u.when)(()=>v.fileState(t).status===`error`,()=>l.html`<button
+                              class="file-action"
+                              type="button"
+                              aria-label="${`Retry uploading ${t.name}`}"
+                              @click=${()=>v.retryUpload(t)}>
+                              <ore-icon name="refresh-cw" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
+                            </button>`)}
+                        ${(0,u.when)(()=>v.fileState(t).status===`success`&&!!e.multiple.value&&!!e.upload.value,()=>l.html`<button
+                              class="file-action"
+                              type="button"
+                              aria-label="${`Replace ${t.name}`}"
+                              @click=${()=>D(t)}>
+                              <ore-icon name="upload" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
+                            </button>`)}
+                        <button
+                          class="file-remove"
+                          type="button"
+                          aria-label="${`Remove ${t.name}`}"
+                          @click=${e=>v.removeFile(t,e)}>
+                          <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
+                        </button>
                       </span>
-                      <button
-                        class="file-remove"
-                        type="button"
-                        aria-label="${`Remove ${t.name}`}"
-                        @click=${e=>E(t,e)}>
-                        <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
-                      </button>
                     </li>
                   `)}
         </ul>
-        <div class="helper-text" id="${b}" part="helper" ?hidden=${()=>_.value||!e.helper.value}>
+        <div class="helper-text" id="${S}" part="helper" ?hidden=${()=>y.value||!e.helper.value}>
           ${e.helper}
         </div>
         <div
           class="helper-text helper-text-error"
-          id="${x}"
+          id="${C}"
           role="alert"
           part="error"
-          ?hidden=${()=>!_.value}>
+          ?hidden=${()=>!y.value}>
           ${()=>e.error.value??``}
         </div>
       </div>
-    `},shadow:{delegatesFocus:!0},styles:[...n.fieldMixins,e.sizeVariantMixin(r.FILE_INPUT_SIZE_PRESET),t.forcedColorsFocusMixin(`.dropzone`),o.default]}),exports.FILE_INPUT_TAG=m;
+    `},shadow:{delegatesFocus:!0},styles:[...n.fieldMixins,e.sizeVariantMixin(r.FILE_INPUT_SIZE_PRESET),t.forcedColorsFocusMixin(`.dropzone`),c.default]}),exports.FILE_INPUT_TAG=h;
 //# sourceMappingURL=file-input.cjs.map