ropav 0.2.0 → 0.3.0

package/dist/components/drawer/drawer-content.js

@@ -0,0 +1,63 @@
+import { dataAttr } from "../../utils/assertion.js";
+import overlay_dismiss_button_default from "../overlay/overlay-dismiss-button.js";
+import { provideDrawerContext, useDrawerContext, useDrawerOverlayContext } from "./drawer.context.js";
+import { computed, createComponent, createIf, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setTemplateRefBinding, shallowRef, template, unref } from "vue";
+import { drawerVariants } from "@ropav/styles";
+//#region src/components/drawer/drawer-content.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=drawer-content>", 1);
+var drawer_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "drawer-content",
+	props: {
+		class: {},
+		placement: { default: "bottom" }
+	},
+	setup(__props) {
+		const props = __props;
+		const context = useDrawerContext();
+		const overlay = useDrawerOverlayContext();
+		const element = shallowRef(null);
+		const slots = computed(() => ({
+			...context.slots.value,
+			...drawerVariants({ placement: props.placement })
+		}));
+		provideDrawerContext({
+			...context,
+			placement: computed(() => props.placement),
+			slots
+		});
+		const styles = computed(() => slots.value.content({ class: props.class }));
+		/**
+		* Reported upward rather than measured from above.
+		*
+		* This element is what the backdrop's machinery acts on — the dismiss boundary, the subtree left
+		* visible to assistive technology, the focus scope — and the backdrop cannot reach into its own slot
+		* content to find it. It is also where `data-entering` and `data-exiting` land, which the stylesheet
+		* reads through a descendant selector to slide the panel inside it.
+		*/
+		const setElement = (next) => {
+			element.value = next ?? null;
+			overlay?.registerContentElement(element.value);
+		};
+		const onKeydown = (event) => overlay?.onKeydown(event);
+		const n4 = t0();
+		renderEffect(() => {
+			const _dataAttr = unref(dataAttr);
+			const _overlay = unref(overlay);
+			setClass(n4, styles.value);
+			setAttr(n4, "data-entering", _dataAttr(_overlay?.isContentEntering.value));
+			setAttr(n4, "data-exiting", _dataAttr(_overlay?.isExiting.value));
+			setAttr(n4, "data-placement", props.placement);
+		});
+		setInsertionState(n4);
+		createIf(() => unref(overlay)?.isDismissable.value, () => {
+			return createComponent(unref(overlay_dismiss_button_default), { close: () => unref(overlay).close });
+		});
+		setInsertionState(n4, 1);
+		createSlot();
+		on(n4, "keydown", onKeydown);
+		setTemplateRefBinding(n4, () => setElement);
+		return n4;
+	}
+});
+//#endregion
+export { drawer_content_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/drawer/drawer-content.vue.d.vue.ts

@@ -0,0 +1,21 @@
+import type { DrawerContentProps } from "./drawer.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<DrawerContentProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/drawer/drawer-dialog.js

@@ -0,0 +1,87 @@
+import { provideSurfaceContext } from "../surface/surface.context.js";
+import { provideFieldIdsContext, useFieldIds } from "../../composables/use-field-ids.js";
+import { useDrawerContext, useDrawerOverlayContext } from "./drawer.context.js";
+import { useDrawerDrag } from "../../composables/use-drawer-drag.js";
+import { computed, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setTemplateRefBinding, shallowRef, template, unref, watch } from "vue";
+//#region src/components/drawer/drawer-dialog.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<section data-slot=drawer-dialog role=dialog tabindex=-1>", 1);
+var drawer_dialog_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "drawer-dialog",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { dialogId, labelledBy, placement, slots, state } = useDrawerContext();
+		const overlay = useDrawerOverlayContext();
+		const element = shallowRef(null);
+		provideSurfaceContext({ variant: computed(() => "default") });
+		const { context, headingId } = useFieldIds({ slots: ["heading"] });
+		provideFieldIdsContext(context);
+		/**
+		* The heading names the dialog, and the trigger names it when there is no heading.
+		*
+		* A dialog with no accessible name at all is the one outcome worth avoiding, which is why the
+		* fallback exists rather than the reference simply being dropped.
+		*/
+		const labelledByResolved = computed(() => headingId.value ?? labelledBy.value);
+		const styles = computed(() => slots.value.dialog({ class: props.class }));
+		const isDismissable = computed(() => overlay?.isDismissable.value ?? true);
+		/**
+		* The panel claims the pointer while it can be dismissed.
+		*
+		* A drawer that can be dragged away has to stop the browser from scrolling the page under the same
+		* gesture; `Drawer.Body` opts vertical scrolling back in for its own content.
+		*/
+		const style = computed(() => isDismissable.value ? { touchAction: "none" } : void 0);
+		/**
+		* Dragging the panel towards its own edge dismisses the drawer.
+		*
+		* The handlers are bound one by one below rather than spread, so their identities never change
+		* across a gesture — and every write the drag makes goes straight to the element's style, so a
+		* finger travelling across the screen causes no renders at all.
+		*
+		* Chained with anything a caller attached, rather than replacing it: React spreads these *before*
+		* the caller's props, so a caller's own `onPointerDown` silently takes the drag away. Here both run.
+		*/
+		const drag = useDrawerDrag({
+			elementRef: element,
+			isDismissable: () => isDismissable.value,
+			onDismiss: () => state.close(),
+			placement: () => placement.value
+		});
+		const setElement = (next) => {
+			element.value = next ?? null;
+		};
+		/**
+		* Focus the panel itself once it appears, unless something inside already has focus.
+		*
+		* Without this a keyboard user is left on the trigger with the drawer open in front of them, and a
+		* screen reader never enters it.
+		*/
+		watch(element, (dialog) => {
+			if (!dialog) return;
+			if (dialog.contains(document.activeElement)) return;
+			dialog.focus({ preventScroll: true });
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		const n1 = t0();
+		renderEffect(() => {
+			setProp(n1, "id", unref(dialogId));
+			setAttr(n1, "aria-labelledby", labelledByResolved.value);
+			setClass(n1, styles.value);
+			setAttr(n1, "data-placement", unref(placement));
+			setStyle(n1, style.value);
+		});
+		setInsertionState(n1);
+		createSlot("default", { close: () => unref(state).close });
+		on(n1, "pointercancel", (e) => unref(drag).handlers.onPointercancel(e));
+		on(n1, "pointerdown", (e) => unref(drag).handlers.onPointerdown(e));
+		on(n1, "pointermove", (e) => unref(drag).handlers.onPointermove(e));
+		on(n1, "pointerup", (e) => unref(drag).handlers.onPointerup(e));
+		setTemplateRefBinding(n1, () => setElement);
+		return n1;
+	}
+});
+//#endregion
+export { drawer_dialog_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/drawer/drawer-dialog.vue.d.vue.ts

@@ -0,0 +1,23 @@
+import type { DrawerDialogProps } from "./drawer.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<DrawerDialogProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            close: () => void;
+        }) => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/drawer/drawer-footer.js

@@ -0,0 +1,20 @@
+import { useDrawerContext } from "./drawer.context.js";
+import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
+//#region src/components/drawer/drawer-footer.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=drawer-footer>", 1);
+var drawer_footer_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "drawer-footer",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { slots } = useDrawerContext();
+		const styles = computed(() => slots.value.footer({ class: props.class }));
+		const n1 = t0();
+		renderEffect(() => setClass(n1, styles.value));
+		setInsertionState(n1);
+		createSlot();
+		return n1;
+	}
+});
+//#endregion
+export { drawer_footer_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/drawer/drawer-footer.vue.d.vue.ts

@@ -0,0 +1,21 @@
+import type { DrawerFooterProps } from "./drawer.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<DrawerFooterProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/drawer/drawer-handle.js

@@ -0,0 +1,29 @@
+import { useDrawerContext } from "./drawer.context.js";
+import { computed, defineVaporComponent, renderEffect, setClass, template } from "vue";
+//#region src/components/drawer/drawer-handle.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div aria-hidden=true data-slot=drawer-handle><div data-slot=drawer-handle-bar>", 1);
+var drawer_handle_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "drawer-handle",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { slots } = useDrawerContext();
+		const styles = computed(() => slots.value.handle({ class: props.class }));
+		/**
+		* No content slot, deliberately.
+		*
+		* The bar is the whole element, and the stylesheet sizes it through a direct-child selector keyed on
+		* its own slot — so anything a caller put here would either be styled as the bar or sit beside it.
+		* React declares a `children` prop and then drops it on the floor; not declaring one says the same
+		* thing out loud.
+		*
+		* Hidden from assistive technology: it is a grab affordance for a pointer, and there is nothing to
+		* announce.
+		*/
+		const n0 = t0();
+		renderEffect(() => setClass(n0, styles.value));
+		return n0;
+	}
+});
+//#endregion
+export { drawer_handle_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/drawer/drawer-handle.vue.d.vue.ts

@@ -0,0 +1,19 @@
+import type { DrawerHandleProps } from "./drawer.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<DrawerHandleProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/drawer/drawer-header.js

@@ -0,0 +1,20 @@
+import { useDrawerContext } from "./drawer.context.js";
+import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
+//#region src/components/drawer/drawer-header.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=drawer-header>", 1);
+var drawer_header_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "drawer-header",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { slots } = useDrawerContext();
+		const styles = computed(() => slots.value.header({ class: props.class }));
+		const n1 = t0();
+		renderEffect(() => setClass(n1, styles.value));
+		setInsertionState(n1);
+		createSlot();
+		return n1;
+	}
+});
+//#endregion
+export { drawer_header_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/drawer/drawer-header.vue.d.vue.ts

@@ -0,0 +1,21 @@
+import type { DrawerHeaderProps } from "./drawer.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<DrawerHeaderProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/drawer/drawer-heading.js

@@ -0,0 +1,33 @@
+import { useFieldIdsContext } from "../../composables/use-field-ids.js";
+import { useDrawerContext } from "./drawer.context.js";
+import { computed, createDynamicComponent, createSlot, defineVaporComponent, extend, unref } from "vue";
+//#region src/components/drawer/drawer-heading.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var drawer_heading_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "drawer-heading",
+	props: {
+		class: {},
+		level: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { slots } = useDrawerContext();
+		const id = useFieldIdsContext()?.claimHeadingId();
+		/**
+		* Two by default.
+		*
+		* A dialog is a document of its own as far as assistive technology is concerned, so its heading
+		* starts one level below the page title rather than continuing the page's outline.
+		*/
+		const tag = computed(() => `h${props.level ?? 2}`);
+		const styles = computed(() => slots.value.heading({ class: props.class }));
+		return createDynamicComponent(() => tag.value, {
+			id: () => unref(id),
+			class: () => styles.value,
+			"data-slot": "drawer-heading"
+		}, extend(() => {
+			return createSlot("default", null, null, 36);
+		}, { _: 8 }), 1);
+	}
+});
+//#endregion
+export { drawer_heading_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/drawer/drawer-heading.vue.d.vue.ts

@@ -0,0 +1,21 @@
+import type { DrawerHeadingProps } from "./drawer.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<DrawerHeadingProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/drawer/drawer-root.js

@@ -0,0 +1,51 @@
+import { providePressResponder } from "../../composables/press-responder.js";
+import { useDialogTrigger } from "../../composables/use-dialog-trigger.js";
+import { useOverlayTriggerState } from "../../composables/use-overlay-trigger-state.js";
+import { provideDrawerContext } from "./drawer.context.js";
+import { computed, createSlot, defineVaporComponent } from "vue";
+import { drawerVariants } from "@ropav/styles";
+//#region src/components/drawer/drawer-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var drawer_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "drawer-root",
+	props: {
+		isOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: { type: Boolean },
+		isDisabled: { type: Boolean },
+		state: {}
+	},
+	emits: ["openChange", "update:isOpen"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		/**
+		* An externally held state wins over `isOpen`.
+		*
+		* It is the same thing said a different way — a caller with one state object driving several
+		* overlays — so it resolves to a controlled drawer rather than a second source of truth.
+		*/
+		const state = useOverlayTriggerState({
+			defaultOpen: props.defaultOpen,
+			isOpen: () => props.state ? props.state.isOpen.value : props.isOpen,
+			onOpenChange: (isOpen) => {
+				props.state?.setOpen(isOpen);
+				emit("openChange", isOpen);
+				emit("update:isOpen", isOpen);
+			}
+		});
+		const trigger = useDialogTrigger({ isDisabled: () => props.isDisabled }, state);
+		providePressResponder(trigger.responder);
+		provideDrawerContext({
+			dialogId: trigger.overlayId,
+			labelledBy: trigger.triggerId,
+			placement: computed(() => void 0),
+			slots: computed(() => drawerVariants()),
+			state
+		});
+		return createSlot();
+	}
+});
+//#endregion
+export { drawer_root_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/drawer/drawer-root.vue.d.vue.ts

@@ -0,0 +1,24 @@
+import type { DrawerRootProps } from "./drawer.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<DrawerRootProps & {
+        onOpenChange?: ((isOpen: boolean) => any) | undefined;
+        "onUpdate:isOpen"?: ((isOpen: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: ((evt: "openChange", isOpen: boolean) => void) & ((evt: "update:isOpen", isOpen: boolean) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/drawer/drawer-trigger.js

@@ -0,0 +1,95 @@
+import { dataAttr } from "../../utils/assertion.js";
+import { useInteractionStates } from "../../composables/use-interaction-states.js";
+import { composeFocusResponder, useFocusResponder } from "../../composables/focus-responder.js";
+import { composePressResponder, usePressResponder } from "../../composables/press-responder.js";
+import { useDrawerContext } from "./drawer.context.js";
+import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref } from "vue";
+//#region src/components/drawer/drawer-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<button>", 1);
+var drawer_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "drawer-trigger",
+	props: {
+		class: {},
+		isDisabled: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const { slots } = useDrawerContext();
+		const responder = usePressResponder();
+		const focusResponder = useFocusResponder();
+		const styles = computed(() => slots.value.trigger({ class: props.class }));
+		const setElement = (element) => {
+			const next = element ?? null;
+			responder?.registerElement(next);
+			focusResponder?.registerElement(next);
+		};
+		const { isFocusVisible, isFocused, isHovered, isPressed, onBlur, onFocus, onPointerdown, onPointerenter, onPointerleave } = useInteractionStates({ isDisabled: () => props.isDisabled });
+		const tabindex = computed(() => props.isDisabled ? void 0 : 0);
+		const focus = composeFocusResponder(focusResponder, {
+			onBlur,
+			onFocus
+		});
+		const attrs = computed(() => ({
+			...focusResponder?.attrs.value,
+			...responder?.attrs.value
+		}));
+		/**
+		* Unlike a modal's or an alert dialog's, this trigger is a real `button`.
+		*
+		* That is what React does here too — the other two wrap a `div` given a button role — and it is
+		* worth keeping: a drawer is usually opened from an ordinary control, and a native button brings
+		* its own keyboard activation and form semantics.
+		*
+		* Listeners are chained rather than spread with `v-bind`, which in vapor re-attaches them on every
+		* render — see `composePressResponder`.
+		*/
+		const press = composePressResponder(responder, {
+			onKeydown: focus.onKeydown,
+			onPointerdown: (event) => {
+				onPointerdown(event);
+				focus.onPointerdown(event);
+			},
+			onPointerenter: (event) => {
+				onPointerenter(event);
+				focus.onPointerenter(event);
+			},
+			onPointerleave: (event) => {
+				onPointerleave();
+				focus.onPointerleave(event);
+			}
+		});
+		const n1 = t0();
+		renderEffect(() => {
+			const _dataAttr = unref(dataAttr);
+			const _props = props;
+			setDynamicProps(n1, [{
+				class: styles.value,
+				"data-disabled": _dataAttr(_props.isDisabled),
+				"data-focus-visible": _dataAttr(unref(isFocusVisible)),
+				"data-focused": _dataAttr(unref(isFocused)),
+				"data-hovered": _dataAttr(unref(isHovered)),
+				"data-pressed": _dataAttr(unref(isPressed) || unref(responder)?.isPressed.value),
+				"data-slot": "drawer-trigger",
+				disabled: _props.isDisabled || void 0,
+				tabindex: tabindex.value,
+				type: "button"
+			}, attrs.value]);
+		});
+		setInsertionState(n1);
+		createSlot();
+		on(n1, "blur", (e) => unref(focus).onBlur(e));
+		on(n1, "click", (e) => unref(press).onClick(e));
+		on(n1, "dragstart", (e) => unref(press).onDragstart(e));
+		on(n1, "focus", (e) => unref(focus).onFocus(e));
+		on(n1, "keydown", (e) => unref(press).onKeydown(e));
+		on(n1, "mousedown", (e) => unref(press).onMousedown(e));
+		on(n1, "pointerdown", (e) => unref(press).onPointerdown(e));
+		on(n1, "pointerenter", (e) => unref(press).onPointerenter(e));
+		on(n1, "pointerleave", (e) => unref(press).onPointerleave(e));
+		on(n1, "pointerup", (e) => unref(press).onPointerup(e));
+		setTemplateRefBinding(n1, () => setElement);
+		return n1;
+	}
+});
+//#endregion
+export { drawer_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/drawer/drawer-trigger.vue.d.vue.ts

@@ -0,0 +1,21 @@
+import type { DrawerTriggerProps } from "./drawer.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<DrawerTriggerProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/drawer/drawer.context.d.ts

@@ -0,0 +1,57 @@
+import type { OverlayTriggerState } from "../../composables/use-overlay-trigger-state";
+import type { DrawerPlacement } from "./drawer.types";
+import type { drawerVariants } from "@ropav/styles";
+import type { ComputedRef } from "vue";
+export interface DrawerContext {
+    /**
+     * The slot set, accumulated down the tree.
+     *
+     * Each level merges its own variants over what it was given, which is how the backdrop can decide
+     * its own variant and the content the edge everything slides from.
+     */
+    slots: ComputedRef<ReturnType<typeof drawerVariants>>;
+    state: OverlayTriggerState;
+    /** The id the dialog carries, which the trigger's `aria-controls` points at. */
+    dialogId: ComputedRef<string>;
+    /** The trigger's id, which names the dialog when nothing inside it does. */
+    labelledBy: ComputedRef<string>;
+    /** Set by the content, read by the dialog — the edge decides which corners are rounded. */
+    placement: ComputedRef<DrawerPlacement | undefined>;
+}
+/**
+ * Strict, and keyed to this component alone.
+ *
+ * A key shared with the modal family would resolve to the nearest ancestor that provided it, so a
+ * drawer opened from inside a modal would read the modal's slots and state.
+ */
+export declare const useDrawerContext: () => DrawerContext, provideDrawerContext: (value: DrawerContext) => DrawerContext;
+/**
+ * What the backdrop offers the content inside it.
+ *
+ * Split from `DrawerContext` because it flows the other way as well: the backdrop owns the
+ * machinery but the *content* is the element that machinery acts on — the dismiss boundary, the
+ * subtree left visible to assistive technology, the focus scope — so the content reports itself up
+ * through here rather than the backdrop reaching down for it.
+ */
+export interface DrawerOverlayContext {
+    /** The content reports itself; the backdrop measures and guards it. */
+    registerContentElement: (element: HTMLElement | null) => void;
+    isContentEntering: ComputedRef<boolean>;
+    /**
+     * The union of both elements' exits, reported to both.
+     *
+     * Load-bearing here in a way it is not for a modal: the panel's own `translate` transition lives
+     * on the dialog, a *descendant* of the content, and `getAnimations()` does not look into a
+     * subtree. Left to itself the content would report no animation and vanish instantly; what keeps
+     * it on screen for the slide out is the backdrop's opacity transition, the other half of the
+     * union.
+     */
+    isExiting: ComputedRef<boolean>;
+    /** Whether the drawer can be dismissed — by pressing outside it, and by dragging it away. */
+    isDismissable: ComputedRef<boolean>;
+    /** Escape, bound on the content so a key pressed inside the dialog reaches it. */
+    onKeydown: (event: KeyboardEvent) => void;
+    close: () => void;
+}
+/** Loose: content outside a backdrop renders, it simply has no machinery behind it. */
+export declare const useDrawerOverlayContext: () => DrawerOverlayContext | null, provideDrawerOverlayContext: (value: DrawerOverlayContext | null) => DrawerOverlayContext | null;