ropav 0.4.0 → 0.6.0

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

@@ -0,0 +1,31 @@
+import type { SidebarRootProps, SidebarSlotProps } 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<SidebarRootProps & {
+        onExpandedChange?: ((isExpanded: boolean) => any) | undefined;
+        onMobileOpenChange?: ((isOpen: boolean) => any) | undefined;
+        "onUpdate:isExpanded"?: ((isExpanded: boolean) => any) | undefined;
+        "onUpdate:isMobileOpen"?: ((isOpen: boolean) => any) | undefined;
+        "onUpdate:width"?: ((width: string) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import('vue').ShallowUnwrapRef<{
+        close: () => void;
+        open: () => void;
+        toggle: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        default?: (props: SidebarSlotProps) => unknown;
+    };
+    emit: ((evt: "expandedChange", isExpanded: boolean) => void) & ((evt: "mobileOpenChange", isOpen: boolean) => void) & ((evt: "update:isExpanded", isExpanded: boolean) => void) & ((evt: "update:isMobileOpen", isOpen: boolean) => void) & ((evt: "update:width", width: string) => 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-root.js

@@ -0,0 +1,140 @@
+import { dataAttr } from "../../utils/assertion.js";
+import { useId as useId$1 } from "../../composables/use-id.js";
+import { provideSidebarContext } from "./sidebar.context.js";
+import { useMediaQuery } from "../../composables/use-media-query.js";
+import { useSidebarState } from "./sidebar.state.js";
+import { readSidebarLayout, writeSidebarLayout } from "./sidebar.storage.js";
+import { computed, createSlot, defineVaporComponent, onMounted, renderEffect, setAttr, setClass, setInsertionState, setStyle, shallowRef, template, unref } from "vue";
+import { sidebarVariants } from "@ropav/styles";
+//#region src/components/sidebar/sidebar-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=sidebar>", 1);
+var DEFAULT_BREAKPOINT = "(max-width: 47.99rem)";
+var sidebar_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "sidebar-root",
+	props: {
+		class: {},
+		side: {},
+		variant: {},
+		collapsible: {},
+		isExpanded: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultExpanded: {
+			type: Boolean,
+			default: void 0
+		},
+		isMobileOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultMobileOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		width: {},
+		defaultWidth: {},
+		autoSaveId: {},
+		breakpoint: {}
+	},
+	emits: [
+		"expandedChange",
+		"update:isExpanded",
+		"mobileOpenChange",
+		"update:isMobileOpen",
+		"update:width"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const matchesNarrow = useMediaQuery(() => props.breakpoint ?? DEFAULT_BREAKPOINT);
+		const isMounted = shallowRef(false);
+		onMounted(() => {
+			isMounted.value = true;
+		});
+		const isMobile = computed(() => isMounted.value && matchesNarrow.value);
+		const state = useSidebarState({
+			collapsible: () => props.collapsible,
+			defaultExpanded: props.defaultExpanded,
+			defaultMobileOpen: props.defaultMobileOpen,
+			defaultWidth: props.defaultWidth,
+			isExpanded: () => props.isExpanded,
+			isMobile,
+			isMobileOpen: () => props.isMobileOpen,
+			onExpandedChange: (isExpanded) => {
+				emit("update:isExpanded", isExpanded);
+				emit("expandedChange", isExpanded);
+				persist();
+			},
+			onMobileOpenChange: (isOpen) => {
+				emit("update:isMobileOpen", isOpen);
+				emit("mobileOpenChange", isOpen);
+			},
+			onWidthChange: (width) => {
+				emit("update:width", width);
+				persist();
+			},
+			width: () => props.width
+		});
+		function persist() {
+			if (!props.autoSaveId || isRestoring) return;
+			writeSidebarLayout(props.autoSaveId, state.isExpanded.value, state.width.value);
+		}
+		let isRestoring = false;
+		onMounted(() => {
+			if (!props.autoSaveId) return;
+			const restored = readSidebarLayout(props.autoSaveId);
+			if (!restored) return;
+			isRestoring = true;
+			state.setOpen(restored.isExpanded);
+			if (restored.width !== void 0) state.setWidth(restored.width);
+			isRestoring = false;
+		});
+		const side = computed(() => props.side ?? "left");
+		const slots = computed(() => sidebarVariants({
+			collapsible: state.collapsible.value,
+			side: side.value,
+			variant: props.variant
+		}));
+		const panelId = useId$1();
+		const panelElement = shallowRef(null);
+		const style = computed(() => state.width.value === void 0 ? void 0 : { "--sidebar-width": state.width.value });
+		provideSidebarContext({
+			panelEl: computed(() => panelElement.value),
+			panelId,
+			setPanelEl: (element) => {
+				panelElement.value = element;
+			},
+			side,
+			slots,
+			state
+		});
+		__expose({
+			close: state.close,
+			open: state.open,
+			toggle: state.toggle
+		});
+		const n1 = t0();
+		renderEffect(() => {
+			const _dataAttr = unref(dataAttr);
+			const _state = unref(state);
+			setClass(n1, slots.value.base({ class: props.class }));
+			setAttr(n1, "data-collapsed", _dataAttr(_state.isCollapsed.value));
+			setAttr(n1, "data-mobile", _dataAttr(_state.isMobile.value));
+			setAttr(n1, "data-side", side.value);
+			setStyle(n1, style.value);
+		});
+		setInsertionState(n1);
+		createSlot("default", {
+			collapsible: () => unref(state).collapsible.value,
+			isCollapsed: () => unref(state).isCollapsed.value,
+			isExpanded: () => unref(state).isExpanded.value,
+			isMobile: () => unref(state).isMobile.value,
+			isOpen: () => unref(state).isOpen.value,
+			side: () => side.value
+		});
+		return n1;
+	}
+});
+//#endregion
+export { sidebar_root_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

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

@@ -0,0 +1,19 @@
+import type { SidebarSeparatorProps } 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<SidebarSeparatorProps> & (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/sidebar/sidebar-separator.js

@@ -0,0 +1,16 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import separator_root_default from "../separator/separator-root.js";
+import { useSidebarContext } from "./sidebar.context.js";
+import { createComponent, defineVaporComponent, unref } from "vue";
+//#region src/components/sidebar/sidebar-separator.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var sidebar_separator_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "sidebar-separator",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { slots } = useSidebarContext();
+		return createComponent(separator_root_default, { class: () => unref(composeSlotClassName)(unref(slots).separator, props.class) }, null, true);
+	}
+});
+//#endregion
+export { sidebar_separator_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/sidebar/sidebar-sub-menu.d.ts

@@ -0,0 +1,23 @@
+import type { SidebarSubMenuProps } 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<SidebarSubMenuProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            isExpanded: boolean;
+        }) => 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-sub-menu.js

@@ -0,0 +1,40 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import { dataAttr } from "../../utils/assertion.js";
+import { useDisclosurePanel } from "../../composables/use-disclosure-panel.js";
+import { provideSidebarSubMenuContext, useSidebarCollapsibleContext, useSidebarContext } from "./sidebar.context.js";
+import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setTemplateRefBinding, template, unref } from "vue";
+//#region src/components/sidebar/sidebar-sub-menu.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=sidebar-sub-menu role=group>", 1);
+var sidebar_sub_menu_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "sidebar-sub-menu",
+	props: {
+		class: {},
+		ariaLabel: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { slots, state } = useSidebarContext();
+		const collapsible = useSidebarCollapsibleContext();
+		provideSidebarSubMenuContext(true);
+		const { setPanelElement } = useDisclosurePanel({ isExpanded: collapsible.isExpanded });
+		const className = computed(() => composeSlotClassName(slots.value.subMenu, props.class, { isCollapsible: true }));
+		return createIf(() => !unref(state).isCollapsed.value, () => {
+			const n3 = t0();
+			renderEffect(() => {
+				const _collapsible = unref(collapsible);
+				const _props_ariaLabel = props.ariaLabel;
+				setProp(n3, "id", _collapsible.subMenuId.value);
+				setAttr(n3, "aria-label", _props_ariaLabel);
+				setAttr(n3, "aria-labelledby", _props_ariaLabel ? void 0 : _collapsible.triggerId.value);
+				setClass(n3, className.value);
+				setAttr(n3, "data-expanded", unref(dataAttr)(_collapsible.isExpanded.value));
+			});
+			setInsertionState(n3);
+			createSlot("default", { isExpanded: () => unref(collapsible).isExpanded.value });
+			setTemplateRefBinding(n3, () => setPanelElement, void 0, "setPanelElement");
+			return n3;
+		});
+	}
+});
+//#endregion
+export { sidebar_sub_menu_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

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

@@ -0,0 +1,21 @@
+import type { SidebarTriggerProps, SidebarTriggerSlotProps } 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<SidebarTriggerProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: SidebarTriggerSlotProps) => 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-trigger.js

@@ -0,0 +1,69 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import { dataAttr } from "../../utils/assertion.js";
+import icon_chevron_left_default from "../icons/icon-chevron-left.js";
+import icon_chevron_right_default from "../icons/icon-chevron-right.js";
+import { useInteractionStates } from "../../composables/use-interaction-states.js";
+import { useSidebarContext } from "./sidebar.context.js";
+import { computed, createDynamicComponent, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref } from "vue";
+//#region src/components/sidebar/sidebar-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<button data-slot=sidebar-trigger type=button>", 1);
+var sidebar_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "sidebar-trigger",
+	props: {
+		class: {},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { panelId, side, slots, state } = useSidebarContext();
+		const isDisabled = computed(() => Boolean(props.isDisabled) || state.collapsible.value === "none");
+		const interaction = useInteractionStates({ isDisabled });
+		const tabindex = computed(() => isDisabled.value ? void 0 : 0);
+		const Icon = computed(() => {
+			return (side.value === "left" ? state.isOpen.value : !state.isOpen.value) ? icon_chevron_left_default : icon_chevron_right_default;
+		});
+		const n3 = t0();
+		renderEffect(() => {
+			const _props = props;
+			const _dataAttr = unref(dataAttr);
+			const _isDisabled = isDisabled.value;
+			const _interaction = unref(interaction);
+			setAttr(n3, "aria-controls", unref(panelId));
+			setAttr(n3, "aria-expanded", unref(state).isOpen.value);
+			setAttr(n3, "aria-label", _props.ariaLabel ?? "Toggle sidebar");
+			setClass(n3, unref(composeSlotClassName)(unref(slots).trigger, _props.class));
+			setAttr(n3, "data-disabled", _dataAttr(_isDisabled));
+			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(_interaction.isPressed.value));
+			setProp(n3, "disabled", _isDisabled || void 0);
+			setProp(n3, "tabindex", tabindex.value);
+		});
+		setInsertionState(n3);
+		createSlot("default", {
+			isCollapsed: () => unref(state).isCollapsed.value,
+			isDisabled: () => isDisabled.value,
+			isFocusVisible: () => unref(interaction).isFocusVisible.value,
+			isFocused: () => unref(interaction).isFocused.value,
+			isHovered: () => unref(interaction).isHovered.value,
+			isOpen: () => unref(state).isOpen.value,
+			isPressed: () => unref(interaction).isPressed.value
+		}, () => {
+			return createDynamicComponent(() => Icon.value);
+		});
+		on(n3, "blur", (e) => unref(interaction).onBlur(e));
+		on(n3, "click", (e) => unref(state).toggle(e));
+		on(n3, "focus", (e) => unref(interaction).onFocus(e));
+		on(n3, "pointerdown", (e) => unref(interaction).onPointerdown(e));
+		on(n3, "pointerenter", (e) => unref(interaction).onPointerenter(e));
+		on(n3, "pointerleave", (e) => unref(interaction).onPointerleave(e));
+		return n3;
+	}
+});
+//#endregion
+export { sidebar_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

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

@@ -0,0 +1,75 @@
+import type { SidebarState } from "./sidebar.state.js";
+import type { SidebarSide } from "./sidebar.types.js";
+import type { sidebarVariants } from "@ropav/styles";
+import type { ComputedRef } from "vue";
+export interface SidebarContext {
+    /** The slot set the root resolved, so every part styles itself from one `tv()` call. */
+    slots: ComputedRef<ReturnType<typeof sidebarVariants>>;
+    state: SidebarState;
+    side: ComputedRef<SidebarSide>;
+    /** The panel's id, which the trigger's `aria-controls` and the rail both point at. */
+    panelId: ComputedRef<string>;
+    /**
+     * The panel element, reported upward rather than reached for.
+     *
+     * The rail resizes by measuring what the panel is now and adding the drag to it, and it cannot
+     * find that element from where it sits: the two are siblings, and a caller is free to put
+     * anything between them.
+     */
+    panelEl: ComputedRef<HTMLElement | null>;
+    setPanelEl: (element: HTMLElement | null) => void;
+}
+/**
+ * Strict, and keyed to this component alone.
+ *
+ * A key shared with a layout family would resolve to the nearest ancestor that provided it, so a
+ * settings nav rendered inside a sidebar's inset would read the outer sidebar's state and collapse
+ * with it.
+ */
+export declare const useSidebarContext: () => SidebarContext, provideSidebarContext: (value: SidebarContext) => SidebarContext;
+/**
+ * What a group offers the label inside it.
+ *
+ * The label registers rather than the group reaching for it, because the group cannot see whether
+ * its slot rendered one — and `aria-labelledby` pointing at an id that never appears leaves the
+ * group with no name at all, which is worse than the plain unnamed group it would otherwise be.
+ */
+export interface SidebarGroupContext {
+    labelId: ComputedRef<string>;
+    /** Called by the label on mount; the returned function undoes it. */
+    registerLabel: () => () => void;
+}
+/** Loose: a group label outside a group is a heading with no group to name, not an error. */
+export declare const useSidebarGroupContext: () => SidebarGroupContext | null, provideSidebarGroupContext: (value: SidebarGroupContext | null) => SidebarGroupContext | null;
+/**
+ * What a collapsible nav item offers the trigger and the submenu inside it.
+ *
+ * Strict: a trigger or an indicator outside a collapsible has nothing to open and nothing to point
+ * at, so the absence of one is a mistake rather than a state to render around.
+ */
+export interface SidebarCollapsibleContext {
+    /** Whether the children are showing. Always false while the sidebar is a rail — see the note on
+     * `toggle` for why the rail is the one place this does not follow the item's own state. */
+    isExpanded: ComputedRef<boolean>;
+    isDisabled: ComputedRef<boolean>;
+    /**
+     * Opens and shuts the children.
+     *
+     * On the rail it opens the sidebar first. The children are not rendered at that width, so a
+     * trigger that only flipped its own flag would be a control that visibly does nothing; opening
+     * the panel is what the press was asking for either way.
+     */
+    toggle: () => void;
+    /** The trigger's id, which names the submenu. */
+    triggerId: ComputedRef<string>;
+    /** The submenu's id, which the trigger's `aria-controls` points at. */
+    subMenuId: ComputedRef<string>;
+}
+export declare const useSidebarCollapsibleContext: () => SidebarCollapsibleContext, provideSidebarCollapsibleContext: (value: SidebarCollapsibleContext) => SidebarCollapsibleContext;
+/**
+ * Whether a row is inside a submenu, which is all an item needs to know to style itself as a child.
+ *
+ * Loose and a bare boolean: an item outside a submenu is the ordinary case, not an error, and
+ * carrying the answer down beats a prop every child row would have to remember.
+ */
+export declare const useSidebarSubMenuContext: () => boolean, provideSidebarSubMenuContext: (value: boolean) => boolean;

package/dist/components/sidebar/sidebar.context.js

@@ -0,0 +1,30 @@
+import { createContext } from "../../utils/create-context.js";
+//#region src/components/sidebar/sidebar.context.ts
+/**
+* Strict, and keyed to this component alone.
+*
+* A key shared with a layout family would resolve to the nearest ancestor that provided it, so a
+* settings nav rendered inside a sidebar's inset would read the outer sidebar's state and collapse
+* with it.
+*/
+var [useSidebarContext, provideSidebarContext] = createContext({ name: "SidebarContext" });
+/** Loose: a group label outside a group is a heading with no group to name, not an error. */
+var [useSidebarGroupContext, provideSidebarGroupContext] = createContext({
+	defaultValue: null,
+	name: "SidebarGroupContext",
+	strict: false
+});
+var [useSidebarCollapsibleContext, provideSidebarCollapsibleContext] = createContext({ name: "SidebarCollapsibleContext" });
+/**
+* Whether a row is inside a submenu, which is all an item needs to know to style itself as a child.
+*
+* Loose and a bare boolean: an item outside a submenu is the ordinary case, not an error, and
+* carrying the answer down beats a prop every child row would have to remember.
+*/
+var [useSidebarSubMenuContext, provideSidebarSubMenuContext] = createContext({
+	defaultValue: false,
+	name: "SidebarSubMenuContext",
+	strict: false
+});
+//#endregion
+export { provideSidebarCollapsibleContext, provideSidebarContext, provideSidebarGroupContext, provideSidebarSubMenuContext, useSidebarCollapsibleContext, useSidebarContext, useSidebarGroupContext, useSidebarSubMenuContext };

package/dist/components/sidebar/sidebar.state.d.ts

@@ -0,0 +1,73 @@
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+/**
+ * How the panel gets out of the way. `none` pins it open, and the trigger has nothing to do.
+ *
+ * Named for the mode rather than for the prop it fills, because `SidebarCollapsible` is the
+ * collapsible nav item — a component, and the more obvious owner of the bare name.
+ */
+export type SidebarCollapsibleMode = "icon" | "offcanvas" | "none";
+export interface UseSidebarStateOptions {
+    collapsible: MaybeRefOrGetter<SidebarCollapsibleMode | undefined>;
+    /** Whether the viewport is narrow enough that the panel has become a drawer. */
+    isMobile: MaybeRefOrGetter<boolean | undefined>;
+    /** Whether the panel is expanded on a wide viewport. Set, the sidebar never writes its own. */
+    isExpanded: MaybeRefOrGetter<boolean | undefined>;
+    defaultExpanded?: boolean;
+    /** Whether the drawer is showing on a narrow one. */
+    isMobileOpen: MaybeRefOrGetter<boolean | undefined>;
+    defaultMobileOpen?: boolean;
+    /** The width the expanded panel renders at, as a CSS length. */
+    width: MaybeRefOrGetter<string | undefined>;
+    defaultWidth?: string;
+    onExpandedChange?: (isExpanded: boolean) => void;
+    onMobileOpenChange?: (isOpen: boolean) => void;
+    onWidthChange?: (width: string) => void;
+}
+export interface SidebarState {
+    collapsible: ComputedRef<SidebarCollapsibleMode>;
+    isMobile: ComputedRef<boolean>;
+    /** Whether the panel is expanded on a wide viewport. */
+    isExpanded: ComputedRef<boolean>;
+    /** Whether the drawer is showing on a narrow one. */
+    isMobileOpen: ComputedRef<boolean>;
+    /** Whether the panel is showing, whichever of the two is in charge at this width. */
+    isOpen: ComputedRef<boolean>;
+    /**
+     * Whether the panel is narrowed rather than hidden — what the parts read to decide whether to
+     * drop their labels. False at every width where the panel is a drawer, because a drawer is open
+     * or it is gone; there is no half-open drawer to shorten a label for.
+     */
+    isCollapsed: ComputedRef<boolean>;
+    setOpen: (isOpen: boolean) => void;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    /** Undefined until someone sets one, so an untouched sidebar is sized by the stylesheet. */
+    width: ComputedRef<string | undefined>;
+    setWidth: (width: string) => void;
+    /** Put the width back to the declared default, which is what a double-click on the rail does. */
+    resetWidth: () => void;
+    /** Whether a drag on the rail is in flight, which is what suppresses the width transition. */
+    isResizing: ComputedRef<boolean>;
+    setResizing: (isResizing: boolean) => void;
+}
+/**
+ * Open state for a sidebar.
+ *
+ * The two open states are held apart on purpose. A sidebar collapsed to its rail on a wide screen
+ * that is then narrowed would, on one shared flag, open its drawer already collapsed — and
+ * widening the window again would leave the sidebar expanded because the drawer had been opened.
+ * Keeping them separate means each width remembers what the user did at that width, and `isOpen`
+ * reads whichever one is in charge.
+ *
+ * @example
+ * ```ts
+ * const state = useSidebarState({
+ *   collapsible: () => props.collapsible,
+ *   isMobile,
+ *   isExpanded: () => props.isExpanded,
+ *   onExpandedChange: (value) => emit("update:isExpanded", value),
+ * });
+ * ```
+ */
+export declare const useSidebarState: (options: UseSidebarStateOptions) => SidebarState;

package/dist/components/sidebar/sidebar.state.js

@@ -0,0 +1,76 @@
+import { useControllableState } from "../../composables/use-controllable-state.js";
+import { computed, shallowRef, toValue } from "vue";
+//#region src/components/sidebar/sidebar.state.ts
+/**
+* Open state for a sidebar.
+*
+* The two open states are held apart on purpose. A sidebar collapsed to its rail on a wide screen
+* that is then narrowed would, on one shared flag, open its drawer already collapsed — and
+* widening the window again would leave the sidebar expanded because the drawer had been opened.
+* Keeping them separate means each width remembers what the user did at that width, and `isOpen`
+* reads whichever one is in charge.
+*
+* @example
+* ```ts
+* const state = useSidebarState({
+*   collapsible: () => props.collapsible,
+*   isMobile,
+*   isExpanded: () => props.isExpanded,
+*   onExpandedChange: (value) => emit("update:isExpanded", value),
+* });
+* ```
+*/
+var useSidebarState = (options) => {
+	const collapsible = computed(() => toValue(options.collapsible) ?? "icon");
+	const isMobile = computed(() => Boolean(toValue(options.isMobile)));
+	const isResizing = shallowRef(false);
+	const expanded = useControllableState({
+		defaultValue: options.defaultExpanded ?? true,
+		onValueChange: options.onExpandedChange,
+		value: options.isExpanded
+	});
+	const mobileOpen = useControllableState({
+		defaultValue: options.defaultMobileOpen ?? false,
+		onValueChange: options.onMobileOpenChange,
+		value: options.isMobileOpen
+	});
+	const width = useControllableState({
+		defaultValue: options.defaultWidth,
+		onValueChange: (next) => {
+			if (next !== void 0) options.onWidthChange?.(next);
+		},
+		value: options.width
+	});
+	const isExpanded = computed(() => collapsible.value === "none" || expanded.state.value);
+	const isOpen = computed(() => isMobile.value ? mobileOpen.state.value : isExpanded.value);
+	const isCollapsed = computed(() => !isMobile.value && collapsible.value !== "none" && !isExpanded.value);
+	const setOpen = (next) => {
+		if (isMobile.value) {
+			mobileOpen.setState(next);
+			return;
+		}
+		if (collapsible.value === "none") return;
+		expanded.setState(next);
+	};
+	return {
+		close: () => setOpen(false),
+		collapsible,
+		isCollapsed,
+		isExpanded,
+		isMobile,
+		isMobileOpen: computed(() => mobileOpen.state.value),
+		isOpen,
+		isResizing: computed(() => isResizing.value),
+		open: () => setOpen(true),
+		resetWidth: () => width.setState(options.defaultWidth),
+		setOpen,
+		setResizing: (next) => {
+			isResizing.value = next;
+		},
+		setWidth: (next) => width.setState(next),
+		toggle: () => setOpen(!isOpen.value),
+		width: computed(() => width.state.value)
+	};
+};
+//#endregion
+export { useSidebarState };

package/dist/components/sidebar/sidebar.storage.d.ts

@@ -0,0 +1,8 @@
+export interface SidebarLayout {
+    isExpanded: boolean;
+    width: string | undefined;
+}
+/** What was stored under `id`, or `null` when there is nothing usable there. */
+export declare const readSidebarLayout: (id: string) => SidebarLayout | null;
+export declare const writeSidebarLayout: (id: string, isExpanded: boolean, width?: string) => void;
+export declare const clearSidebarLayout: (id: string) => void;