ropav 0.4.0 → 0.5.0

package/dist/components/sidebar/sidebar-item-label.js

@@ -0,0 +1,28 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import { dataAttr } from "../../utils/assertion.js";
+import { useSidebarContext } from "./sidebar.context.js";
+import { createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, template, unref } from "vue";
+//#region src/components/sidebar/sidebar-item-label.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span data-slot=sidebar-item-label>", 1);
+var sidebar_item_label_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "sidebar-item-label",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { slots, state } = useSidebarContext();
+		const n1 = t0();
+		renderEffect(() => {
+			setClass(n1, unref(composeSlotClassName)(unref(slots).itemLabel, props.class));
+			setAttr(n1, "data-collapsed", unref(dataAttr)(unref(state).isCollapsed.value));
+		});
+		setInsertionState(n1);
+		createSlot("default", {
+			isCollapsed: () => unref(state).isCollapsed.value,
+			isMobile: () => unref(state).isMobile.value,
+			isOpen: () => unref(state).isOpen.value
+		});
+		return n1;
+	}
+});
+//#endregion
+export { sidebar_item_label_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/sidebar/sidebar-item-tooltip.d.ts

@@ -0,0 +1,21 @@
+import type { SidebarItemTooltipProps } from "./sidebar.types.js";
+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<SidebarItemTooltipProps> & (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/sidebar/sidebar-item-tooltip.js

@@ -0,0 +1,38 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import { useSidebarContext } from "./sidebar.context.js";
+import tooltip_content_default from "../tooltip/tooltip-content.js";
+import tooltip_root_default from "../tooltip/tooltip-root.js";
+import tooltip_trigger_default from "../tooltip/tooltip-trigger.js";
+import { computed, createComponent, createSlot, defineVaporComponent, extend, renderEffect, setText, template, toDisplayString, unref } from "vue";
+//#region src/components/sidebar/sidebar-item-tooltip.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template(" ");
+var sidebar_item_tooltip_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "sidebar-item-tooltip",
+	props: {
+		class: {},
+		label: {},
+		delay: {},
+		closeDelay: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { side, slots, state } = useSidebarContext();
+		const isDisabled = computed(() => !state.isCollapsed.value);
+		const placement = computed(() => side.value === "left" ? "end" : "start");
+		return createComponent(tooltip_root_default, {
+			"close-delay": () => props.closeDelay,
+			delay: () => props.delay,
+			"is-disabled": () => isDisabled.value
+		}, () => {
+			return [createComponent(tooltip_trigger_default, { class: () => unref(composeSlotClassName)(unref(slots).itemTooltip, props.class) }, extend(() => {
+				return createSlot("default", null, null, 36);
+			}, { _: 8 })), createComponent(tooltip_content_default, { placement: () => placement.value }, () => {
+				const n2 = t0();
+				renderEffect(() => setText(n2, toDisplayString(props.label)));
+				return n2;
+			})];
+		}, true);
+	}
+});
+//#endregion
+export { sidebar_item_tooltip_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/sidebar/sidebar-item-trailing.d.ts

@@ -0,0 +1,21 @@
+import type { SidebarItemTrailingProps, SidebarPartSlotProps } from "./sidebar.types.js";
+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<SidebarItemTrailingProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: SidebarPartSlotProps) => 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/sidebar/sidebar-item-trailing.js

@@ -0,0 +1,28 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import { dataAttr } from "../../utils/assertion.js";
+import { useSidebarContext } from "./sidebar.context.js";
+import { createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, template, unref } from "vue";
+//#region src/components/sidebar/sidebar-item-trailing.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span data-slot=sidebar-item-trailing>", 1);
+var sidebar_item_trailing_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "sidebar-item-trailing",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { slots, state } = useSidebarContext();
+		const n1 = t0();
+		renderEffect(() => {
+			setClass(n1, unref(composeSlotClassName)(unref(slots).itemTrailing, props.class));
+			setAttr(n1, "data-collapsed", unref(dataAttr)(unref(state).isCollapsed.value));
+		});
+		setInsertionState(n1);
+		createSlot("default", {
+			isCollapsed: () => unref(state).isCollapsed.value,
+			isMobile: () => unref(state).isMobile.value,
+			isOpen: () => unref(state).isOpen.value
+		});
+		return n1;
+	}
+});
+//#endregion
+export { sidebar_item_trailing_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/sidebar/sidebar-item.d.ts

@@ -0,0 +1,23 @@
+import type { SidebarItemProps, SidebarItemSlotProps } from "./sidebar.types.js";
+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<SidebarItemProps & {
+        onPress?: ((event: import("../../index.js").PressEvent) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: SidebarItemSlotProps) => unknown;
+    };
+    emit: (evt: "press", event: import("../../index.js").PressEvent) => 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/sidebar/sidebar-item.js

@@ -0,0 +1,160 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import { dataAttr } from "../../utils/assertion.js";
+import { useInteractionStates } from "../../composables/use-interaction-states.js";
+import { usePress } from "../../composables/use-press.js";
+import { openLink } from "../../utils/open-link.js";
+import { useRouterContext } from "../router-provider/router-provider.context.js";
+import { useSidebarContext, useSidebarSubMenuContext } from "./sidebar.context.js";
+import { computed, createIf, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref } from "vue";
+//#region src/components/sidebar/sidebar-item.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<a data-slot=sidebar-item>", 1);
+var t1 = template("<button data-slot=sidebar-item type=button>", 1);
+var sidebar_item_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "sidebar-item",
+	props: {
+		class: {},
+		href: {},
+		target: {},
+		rel: {},
+		ariaCurrent: {
+			type: [Boolean, String],
+			default: void 0
+		},
+		routerOptions: {},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		ariaLabelledby: {},
+		ariaDescribedby: {}
+	},
+	emits: ["press"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { slots, state } = useSidebarContext();
+		const router = useRouterContext();
+		const isSub = useSidebarSubMenuContext();
+		const className = computed(() => composeSlotClassName(slots.value.item, props.class, { isSub }));
+		const isDisabled = computed(() => Boolean(props.isDisabled));
+		const press = usePress({
+			isDisabled,
+			onPress: (event) => emit("press", event)
+		});
+		const interaction = useInteractionStates({ isDisabled });
+		const isAnchor = computed(() => Boolean(props.href) && !isDisabled.value);
+		const ariaCurrent = computed(() => {
+			if (props.ariaCurrent !== "auto") return props.ariaCurrent;
+			return props.href && router?.isCurrent(props.href) ? "page" : void 0;
+		});
+		const isCurrent = computed(() => Boolean(ariaCurrent.value));
+		const resolvedHref = computed(() => props.href === void 0 ? void 0 : router?.resolveHref(props.href) ?? props.href);
+		const tabindex = computed(() => isDisabled.value ? void 0 : 0);
+		const onPointerenter = (event) => {
+			interaction.onPointerenter(event);
+			press.handlers.onPointerenter(event);
+		};
+		const onPointerleave = (event) => {
+			interaction.onPointerleave();
+			press.handlers.onPointerleave(event);
+		};
+		const onClick = (event) => {
+			press.handlers.onClick(event);
+			openLink(event, {
+				href: props.href,
+				router,
+				routerOptions: props.routerOptions
+			});
+		};
+		return createIf(() => isAnchor.value, () => {
+			const n3 = t0();
+			renderEffect(() => {
+				const _props = props;
+				const _dataAttr = unref(dataAttr);
+				const _interaction = unref(interaction);
+				setAttr(n3, "aria-current", ariaCurrent.value);
+				setAttr(n3, "aria-describedby", _props.ariaDescribedby);
+				setAttr(n3, "aria-label", _props.ariaLabel);
+				setAttr(n3, "aria-labelledby", _props.ariaLabelledby);
+				setClass(n3, className.value);
+				setAttr(n3, "data-collapsed", _dataAttr(unref(state).isCollapsed.value));
+				setAttr(n3, "data-current", _dataAttr(isCurrent.value));
+				setAttr(n3, "data-focus-visible", _dataAttr(_interaction.isFocusVisible.value));
+				setAttr(n3, "data-focused", _dataAttr(_interaction.isFocused.value));
+				setAttr(n3, "data-hovered", _dataAttr(_interaction.isHovered.value));
+				setAttr(n3, "data-pressed", _dataAttr(unref(press).isPressed.value));
+				setProp(n3, "href", resolvedHref.value);
+				setProp(n3, "rel", _props.rel);
+				setProp(n3, "tabindex", tabindex.value);
+				setProp(n3, "target", _props.target);
+			});
+			setInsertionState(n3);
+			createSlot("default", {
+				isCollapsed: () => unref(state).isCollapsed.value,
+				isCurrent: () => isCurrent.value,
+				isDisabled: () => isDisabled.value,
+				isFocusVisible: () => unref(interaction).isFocusVisible.value,
+				isFocused: () => unref(interaction).isFocused.value,
+				isHovered: () => unref(interaction).isHovered.value,
+				isPressed: () => unref(press).isPressed.value
+			});
+			on(n3, "blur", (e) => unref(interaction).onBlur(e));
+			on(n3, "click", onClick);
+			on(n3, "dragstart", (e) => unref(press).handlers.onDragstart(e));
+			on(n3, "focus", (e) => unref(interaction).onFocus(e));
+			on(n3, "keydown", (e) => unref(press).handlers.onKeydown(e));
+			on(n3, "mousedown", (e) => unref(press).handlers.onMousedown(e));
+			on(n3, "pointerdown", (e) => unref(press).handlers.onPointerdown(e));
+			on(n3, "pointerenter", onPointerenter);
+			on(n3, "pointerleave", onPointerleave);
+			on(n3, "pointerup", (e) => unref(press).handlers.onPointerup(e));
+			return n3;
+		}, () => {
+			const n6 = t1();
+			renderEffect(() => {
+				const _props = props;
+				const _dataAttr = unref(dataAttr);
+				const _isDisabled = isDisabled.value;
+				const _interaction = unref(interaction);
+				setAttr(n6, "aria-current", ariaCurrent.value);
+				setAttr(n6, "aria-describedby", _props.ariaDescribedby);
+				setAttr(n6, "aria-label", _props.ariaLabel);
+				setAttr(n6, "aria-labelledby", _props.ariaLabelledby);
+				setClass(n6, className.value);
+				setAttr(n6, "data-collapsed", _dataAttr(unref(state).isCollapsed.value));
+				setAttr(n6, "data-current", _dataAttr(isCurrent.value));
+				setAttr(n6, "data-disabled", _dataAttr(_isDisabled));
+				setAttr(n6, "data-focus-visible", _dataAttr(_interaction.isFocusVisible.value));
+				setAttr(n6, "data-focused", _dataAttr(_interaction.isFocused.value));
+				setAttr(n6, "data-hovered", _dataAttr(_interaction.isHovered.value));
+				setAttr(n6, "data-pressed", _dataAttr(unref(press).isPressed.value));
+				setProp(n6, "disabled", _isDisabled || void 0);
+				setProp(n6, "tabindex", tabindex.value);
+			});
+			setInsertionState(n6);
+			createSlot("default", {
+				isCollapsed: () => unref(state).isCollapsed.value,
+				isCurrent: () => isCurrent.value,
+				isDisabled: () => isDisabled.value,
+				isFocusVisible: () => unref(interaction).isFocusVisible.value,
+				isFocused: () => unref(interaction).isFocused.value,
+				isHovered: () => unref(interaction).isHovered.value,
+				isPressed: () => unref(press).isPressed.value
+			});
+			on(n6, "blur", (e) => unref(interaction).onBlur(e));
+			on(n6, "click", (e) => unref(press).handlers.onClick(e));
+			on(n6, "dragstart", (e) => unref(press).handlers.onDragstart(e));
+			on(n6, "focus", (e) => unref(interaction).onFocus(e));
+			on(n6, "keydown", (e) => unref(press).handlers.onKeydown(e));
+			on(n6, "mousedown", (e) => unref(press).handlers.onMousedown(e));
+			on(n6, "pointerdown", (e) => unref(press).handlers.onPointerdown(e));
+			on(n6, "pointerenter", onPointerenter);
+			on(n6, "pointerleave", onPointerleave);
+			on(n6, "pointerup", (e) => unref(press).handlers.onPointerup(e));
+			return n6;
+		}, 261);
+	}
+});
+//#endregion
+export { sidebar_item_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/sidebar/sidebar-panel.d.ts

@@ -0,0 +1,21 @@
+import type { SidebarPanelProps, SidebarPartSlotProps } from "./sidebar.types.js";
+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<SidebarPanelProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: SidebarPartSlotProps) => 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/sidebar/sidebar-panel.js

@@ -0,0 +1,88 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import { dataAttr } from "../../utils/assertion.js";
+import drawer_backdrop_default from "../drawer/drawer-backdrop.js";
+import drawer_content_default from "../drawer/drawer-content.js";
+import drawer_dialog_default from "../drawer/drawer-dialog.js";
+import drawer_heading_default from "../drawer/drawer-heading.js";
+import drawer_root_default from "../drawer/drawer-root.js";
+import { useSidebarContext } from "./sidebar.context.js";
+import { computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setTemplateRefBinding, setText, template, toDisplayString, unref } from "vue";
+//#region src/components/sidebar/sidebar-panel.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template(" ");
+var t1 = template("<nav data-slot=sidebar-panel>");
+var t2 = template("<nav data-slot=sidebar-panel>", 1);
+var sidebar_panel_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "sidebar-panel",
+	props: {
+		class: {},
+		ariaLabel: {},
+		ariaLabelledby: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { panelId, setPanelEl, side, slots, state } = useSidebarContext();
+		const setElement = (next) => setPanelEl(next ?? null);
+		const isHidden = computed(() => state.collapsible.value === "offcanvas" && state.isCollapsed.value);
+		const label = computed(() => props.ariaLabel ?? "Sidebar");
+		const ariaLabel = computed(() => props.ariaLabelledby ? void 0 : label.value);
+		const panelClass = computed(() => composeSlotClassName(slots.value.panel, props.class, { inDrawer: state.isMobile.value }));
+		return createIf(() => unref(state).isMobile.value, () => {
+			return createComponent(drawer_root_default, {
+				"is-open": () => unref(state).isMobileOpen.value,
+				onOpenChange: () => unref(state).setOpen
+			}, () => {
+				return createComponent(drawer_backdrop_default, null, () => {
+					return createComponent(drawer_content_default, { placement: () => unref(side) }, () => {
+						return createComponent(drawer_dialog_default, { class: "p-0" }, () => {
+							const n3 = createComponent(drawer_heading_default, { class: "sr-only" }, () => {
+								const n2 = t0();
+								renderEffect(() => setText(n2, toDisplayString(label.value)));
+								return n2;
+							});
+							const n5 = t1();
+							renderEffect(() => {
+								setProp(n5, "id", unref(panelId));
+								setAttr(n5, "aria-label", ariaLabel.value);
+								setAttr(n5, "aria-labelledby", props.ariaLabelledby);
+								setClass(n5, panelClass.value);
+								setAttr(n5, "data-side", unref(side));
+							});
+							setInsertionState(n5);
+							createSlot("default", {
+								isCollapsed: false,
+								isMobile: true,
+								isOpen: () => unref(state).isOpen.value
+							});
+							setTemplateRefBinding(n5, () => setElement);
+							return [n3, n5];
+						});
+					});
+				});
+			}, true);
+		}, () => {
+			const n12 = t2();
+			renderEffect(() => {
+				const _dataAttr = unref(dataAttr);
+				const _state = unref(state);
+				setProp(n12, "id", unref(panelId));
+				setAttr(n12, "aria-label", ariaLabel.value);
+				setAttr(n12, "aria-labelledby", props.ariaLabelledby);
+				setClass(n12, panelClass.value);
+				setAttr(n12, "data-collapsed", _dataAttr(_state.isCollapsed.value));
+				setAttr(n12, "data-resizing", _dataAttr(_state.isResizing.value));
+				setAttr(n12, "data-side", unref(side));
+				setProp(n12, "inert", isHidden.value || void 0);
+			});
+			setInsertionState(n12);
+			createSlot("default", {
+				isCollapsed: () => unref(state).isCollapsed.value,
+				isMobile: false,
+				isOpen: () => unref(state).isOpen.value
+			});
+			setTemplateRefBinding(n12, () => setElement);
+			return n12;
+		}, 261);
+	}
+});
+//#endregion
+export { sidebar_panel_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/sidebar/sidebar-rail.d.ts

@@ -0,0 +1,21 @@
+import type { SidebarRailProps, SidebarRailSlotProps } from "./sidebar.types.js";
+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<SidebarRailProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: SidebarRailSlotProps) => 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/sidebar/sidebar-rail.js

@@ -0,0 +1,210 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import { dataAttr } from "../../utils/assertion.js";
+import { useInteractionStates } from "../../composables/use-interaction-states.js";
+import { useMove } from "../../composables/use-move.js";
+import { useSidebarContext } from "./sidebar.context.js";
+import { child, computed, createIf, createSlot, defineVaporComponent, on, onMounted, renderEffect, setAttr, setClass, setInsertionState, setProp, shallowRef, template, unref, watch } from "vue";
+//#region src/components/sidebar/sidebar-rail.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=sidebar-rail><span aria-hidden=true data-slot=sidebar-rail-target></span>", 1);
+var sidebar_rail_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "sidebar-rail",
+	props: {
+		class: {},
+		isResizable: {
+			type: Boolean,
+			default: void 0
+		},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		minWidth: {},
+		maxWidth: {},
+		keyboardStep: {},
+		keyboardLargeStep: {},
+		ariaLabel: {},
+		ariaLabelledby: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { panelEl, panelId, side, slots, state } = useSidebarContext();
+		const isResizable = computed(() => Boolean(props.isResizable));
+		const isDisabled = computed(() => Boolean(props.isDisabled));
+		const minWidth = computed(() => props.minWidth ?? 180);
+		const maxWidth = computed(() => props.maxWidth ?? 480);
+		const states = useInteractionStates({ isDisabled });
+		const isDragging = shallowRef(false);
+		/**
+		* The declared width, when it is the plain pixel length the rail itself writes.
+		*
+		* Preferred over measuring, and not as an optimisation: the panel eases towards a new width, so
+		* `offsetWidth` read any time after a change reports a frame of the animation rather than the
+		* width that was asked for. This is the number the user moved the edge to.
+		*/
+		const declaredWidth = computed(() => {
+			const value = state.width.value;
+			const pixels = value?.endsWith("px") ? Number.parseFloat(value) : NaN;
+			return Number.isFinite(pixels) ? Math.round(pixels) : null;
+		});
+		/**
+		* The starting point, for a sidebar sized by the stylesheet with no declared width to read.
+		*
+		* Read on mount and never during setup, which is not a detail: a watcher's immediate run happens
+		* synchronously while the tree is still being built, and an element that is not in the document
+		* yet measures zero. Nothing would correct it either — the panel is registered by then, so the
+		* element never changes and the watcher never fires again. A rail left holding that zero starts
+		* every first drag from nothing and snaps the panel straight to its minimum, where it stays until
+		* the pointer has travelled the whole width back.
+		*
+		* The watcher stays for the panel actually changing — the drawer handing it back on the way out of
+		* a narrow viewport — where post-flush is the right moment and there is a new element to measure.
+		*/
+		const measuredWidth = shallowRef(0);
+		const measure = () => {
+			measuredWidth.value = panelEl.value?.offsetWidth ?? 0;
+		};
+		onMounted(measure);
+		watch(panelEl, measure, { flush: "post" });
+		const width = computed(() => declaredWidth.value ?? measuredWidth.value);
+		/** The width the gesture opened at; every delta is measured against it. */
+		let startWidth = 0;
+		/** The width to go back to if the gesture is abandoned. */
+		let startDeclared;
+		let total = 0;
+		/** Resolved once per gesture — reading it per `pointermove` would force a style recalc a frame. */
+		let isReversed = false;
+		/** Whether the pointer actually travelled, which is what separates a drag from a click. */
+		let hasMoved = false;
+		const readDirection = () => {
+			const panel = panelEl.value;
+			isReversed = !!panel && getComputedStyle(panel).direction === "rtl";
+		};
+		const apply = (width) => {
+			state.setWidth(`${Math.round(Math.min(Math.max(width, minWidth.value), maxWidth.value))}px`);
+		};
+		const openGesture = () => {
+			startWidth = width.value;
+			startDeclared = state.width.value;
+			total = 0;
+			isDragging.value = true;
+			state.setResizing(true);
+			readDirection();
+		};
+		const { handlers: moveHandlers } = useMove({
+			onMove: ({ deltaX, pointerType, shiftKey }) => {
+				let delta = deltaX;
+				if (pointerType === "keyboard") delta *= shiftKey ? props.keyboardLargeStep ?? 50 : props.keyboardStep ?? 10;
+				if (isReversed) delta = -delta;
+				if (side.value === "right") delta = -delta;
+				if (delta === 0) return;
+				hasMoved = true;
+				total += delta;
+				apply(startWidth + total);
+			},
+			onMoveEnd: () => {
+				isDragging.value = false;
+				state.setResizing(false);
+				total = 0;
+			},
+			onMoveStart: () => {
+				openGesture();
+			}
+		});
+		const jump = (target) => {
+			startWidth = width.value;
+			apply(target);
+		};
+		const onKeydown = (event) => {
+			if (isDisabled.value) return;
+			if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
+				event.preventDefault();
+				state.toggle();
+				return;
+			}
+			if (!isResizable.value) return;
+			if (event.key === "Home" || event.key === "End") {
+				event.preventDefault();
+				jump(event.key === "Home" ? minWidth.value : maxWidth.value);
+				return;
+			}
+			if (event.key === "Escape" && isDragging.value) {
+				event.preventDefault();
+				isDragging.value = false;
+				state.setResizing(false);
+				if (startDeclared === void 0) state.resetWidth();
+				else state.setWidth(startDeclared);
+				return;
+			}
+			if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+			readDirection();
+			moveHandlers.onKeydown(event);
+		};
+		const onPointerdown = (event) => {
+			if (isDisabled.value) return;
+			hasMoved = false;
+			states.onPointerdown(event);
+			if (isResizable.value) moveHandlers.onPointerdown(event);
+		};
+		const onClick = () => {
+			if (isDisabled.value || hasMoved) return;
+			state.toggle();
+		};
+		const onDblclick = () => {
+			if (isDisabled.value || !isResizable.value) return;
+			state.resetWidth();
+		};
+		const railClass = computed(() => composeSlotClassName(slots.value.rail, props.class, { isResizable: isResizable.value }));
+		return createIf(() => !unref(state).isMobile.value, () => {
+			const n4 = t0();
+			const n2 = child(n4);
+			renderEffect(() => {
+				const _isDisabled = isDisabled.value;
+				const _isResizable = isResizable.value;
+				const _state = unref(state);
+				const _props = props;
+				const _dataAttr = unref(dataAttr);
+				const _states = unref(states);
+				setAttr(n4, "aria-controls", unref(panelId));
+				setAttr(n4, "aria-disabled", _isDisabled || void 0);
+				setAttr(n4, "aria-expanded", _isResizable ? void 0 : _state.isOpen.value);
+				setAttr(n4, "aria-label", _props.ariaLabel ?? (_isResizable ? "Resize sidebar" : "Toggle sidebar"));
+				setAttr(n4, "aria-labelledby", _props.ariaLabelledby);
+				setAttr(n4, "aria-orientation", _isResizable ? "vertical" : void 0);
+				setAttr(n4, "aria-valuemax", _isResizable ? maxWidth.value : void 0);
+				setAttr(n4, "aria-valuemin", _isResizable ? minWidth.value : void 0);
+				setAttr(n4, "aria-valuenow", _isResizable ? width.value : void 0);
+				setClass(n4, railClass.value);
+				setAttr(n4, "data-collapsed", _dataAttr(_state.isCollapsed.value));
+				setAttr(n4, "data-disabled", _dataAttr(_isDisabled));
+				setAttr(n4, "data-dragging", _dataAttr(isDragging.value));
+				setAttr(n4, "data-focus-visible", _dataAttr(_states.isFocusVisible.value));
+				setAttr(n4, "data-focused", _dataAttr(_states.isFocused.value));
+				setAttr(n4, "data-hovered", _dataAttr(_states.isHovered.value));
+				setProp(n4, "role", _isResizable ? "separator" : "button");
+				setProp(n4, "tabindex", _isDisabled ? -1 : 0);
+				setClass(n2, unref(composeSlotClassName)(unref(slots).railTarget));
+			});
+			setInsertionState(n4, 1);
+			createSlot("default", {
+				isCollapsed: () => unref(state).isCollapsed.value,
+				isDisabled: () => isDisabled.value,
+				isDragging: () => isDragging.value,
+				isFocusVisible: () => unref(states).isFocusVisible.value,
+				isFocused: () => unref(states).isFocused.value,
+				isHovered: () => unref(states).isHovered.value,
+				isResizable: () => isResizable.value
+			});
+			on(n4, "blur", (e) => unref(states).onBlur(e));
+			on(n4, "click", onClick);
+			on(n4, "dblclick", onDblclick);
+			on(n4, "focus", (e) => unref(states).onFocus(e));
+			on(n4, "keydown", onKeydown);
+			on(n4, "pointerdown", onPointerdown);
+			on(n4, "pointerenter", (e) => unref(states).onPointerenter(e));
+			on(n4, "pointerleave", (e) => unref(states).onPointerleave(e));
+			return n4;
+		});
+	}
+});
+//#endregion
+export { sidebar_rail_vue_vue_type_script_setup_true_vapor_true_lang_default as default };