@hina-ui/vue 1.6.0 → 1.7.0

package/dist/index.js

@@ -2267,7 +2267,7 @@ function useScrollFocus(host, viewport, options) {
 var _hoisted_1$92 = ["data-visible"];
 var _hoisted_2$47 = ["data-visible"];
 var _hoisted_3$24 = ["data-visible"];
-var _hoisted_4$19 = ["data-visible"];
+var _hoisted_4$20 = ["data-visible"];
 //#endregion
 //#region src/components/scroll-area/ScrollArea.vue
 var ScrollArea_default = /* @__PURE__ */ defineComponent({
@@ -2391,7 +2391,7 @@ var ScrollArea_default = /* @__PURE__ */ defineComponent({
 					"data-side": "y-end",
 					"data-visible": unref(showYEnd) ? "" : void 0,
 					"aria-hidden": "true"
-				}, null, 8, _hoisted_4$19)) : createCommentVNode("", true)
+				}, null, 8, _hoisted_4$20)) : createCommentVNode("", true)
 			], 64)) : createCommentVNode("", true)], 2);
 		};
 	}
@@ -5141,8 +5141,8 @@ var _hoisted_1$85 = {
 };
 var _hoisted_2$42 = { class: "hn-collapse-body" };
 var _hoisted_3$22 = ["role"];
-var _hoisted_4$18 = { class: "flex min-w-0 flex-1 flex-col gap-1" };
-var _hoisted_5$12 = {
+var _hoisted_4$19 = { class: "flex min-w-0 flex-1 flex-col gap-1" };
+var _hoisted_5$14 = {
 	key: 0,
 	class: "text-fg font-medium"
 };
@@ -5199,7 +5199,7 @@ var Alert_default = /* @__PURE__ */ defineComponent({
 						class: normalizeClass(unref(calloutIcon)({ tone: props.tone })),
 						"aria-hidden": "true"
 					}, null, 8, ["class"])) : createCommentVNode("", true)]),
-					createElementVNode("div", _hoisted_4$18, [props.title ? (openBlock(), createElementBlock("p", _hoisted_5$12, toDisplayString(props.title), 1)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")]),
+					createElementVNode("div", _hoisted_4$19, [props.title ? (openBlock(), createElementBlock("p", _hoisted_5$14, toDisplayString(props.title), 1)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")]),
 					unref(slots).actions ? (openBlock(), createElementBlock("div", _hoisted_6$9, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true),
 					props.closable ? (openBlock(), createBlock(CloseButton_default, {
 						key: 1,
@@ -6744,8 +6744,8 @@ var _hoisted_3$21 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
-var _hoisted_4$17 = { class: "flex size-4 shrink-0 items-center justify-center" };
-var _hoisted_5$11 = { class: "min-w-0 flex-1" };
+var _hoisted_4$18 = { class: "flex size-4 shrink-0 items-center justify-center" };
+var _hoisted_5$13 = { class: "min-w-0 flex-1" };
 var _hoisted_6$8 = { class: "block truncate" };
 var _hoisted_7$6 = {
 	key: 0,
@@ -6799,7 +6799,7 @@ var SelectList_default = /* @__PURE__ */ defineComponent({
 											default: withCtx(() => [createVNode(unref(SelectItemText), { "as-child": "" }, {
 												default: withCtx(() => [createElementVNode("span", _hoisted_1$82, [renderSlot(_ctx.$slots, "option", { option }, () => [createElementVNode("span", _hoisted_2$40, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_3$21, toDisplayString(option.description), 1)) : createCommentVNode("", true)])])]),
 												_: 2
-											}, 1024), createElementVNode("span", _hoisted_4$17, [createVNode(unref(SelectItemIndicator), null, {
+											}, 1024), createElementVNode("span", _hoisted_4$18, [createVNode(unref(SelectItemIndicator), null, {
 												default: withCtx(() => [createVNode(unref(Check))]),
 												_: 1
 											})])]),
@@ -6820,7 +6820,7 @@ var SelectList_default = /* @__PURE__ */ defineComponent({
 									class: normalizeClass(unref(selectItem)())
 								}, {
 									default: withCtx(() => [createVNode(unref(SelectItemText), { "as-child": "" }, {
-										default: withCtx(() => [createElementVNode("span", _hoisted_5$11, [renderSlot(_ctx.$slots, "option", { option: item }, () => [createElementVNode("span", _hoisted_6$8, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_7$6, toDisplayString(item.description), 1)) : createCommentVNode("", true)])])]),
+										default: withCtx(() => [createElementVNode("span", _hoisted_5$13, [renderSlot(_ctx.$slots, "option", { option: item }, () => [createElementVNode("span", _hoisted_6$8, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_7$6, toDisplayString(item.description), 1)) : createCommentVNode("", true)])])]),
 										_: 2
 									}, 1024), createElementVNode("span", _hoisted_8$3, [createVNode(unref(SelectItemIndicator), null, {
 										default: withCtx(() => [createVNode(unref(Check))]),
@@ -7421,12 +7421,12 @@ var _hoisted_2$38 = {
 	class: "relative min-h-0 flex-auto"
 };
 var _hoisted_3$20 = ["inert"];
-var _hoisted_4$16 = [
+var _hoisted_4$17 = [
 	"aria-label",
 	"inert",
 	"data-disabled"
 ];
-var _hoisted_5$10 = {
+var _hoisted_5$12 = {
 	key: 1,
 	class: "flex max-w-full flex-wrap items-center gap-3"
 };
@@ -7521,8 +7521,8 @@ var Pagination_default = /* @__PURE__ */ defineComponent({
 						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "ellipsis", normalizeProps(guardReactiveProps(slotProps)))]),
 						key: "1"
 					} : void 0]), 1024),
-					props.pageSizeOptions?.length || props.showJump ? (openBlock(), createElementBlock("div", _hoisted_5$10, [props.pageSizeOptions?.length ? (openBlock(), createBlock(PaginationSize_default, { key: 0 })) : createCommentVNode("", true), props.showJump ? (openBlock(), createBlock(PaginationJump_default, { key: 1 })) : createCommentVNode("", true)])) : createCommentVNode("", true)
-				])], 10, _hoisted_4$16)]),
+					props.pageSizeOptions?.length || props.showJump ? (openBlock(), createElementBlock("div", _hoisted_5$12, [props.pageSizeOptions?.length ? (openBlock(), createBlock(PaginationSize_default, { key: 0 })) : createCommentVNode("", true), props.showJump ? (openBlock(), createBlock(PaginationJump_default, { key: 1 })) : createCommentVNode("", true)])) : createCommentVNode("", true)
+				])], 10, _hoisted_4$17)]),
 				_: 3
 			}, 8, [
 				"page",
@@ -8703,7 +8703,7 @@ var _hoisted_3$19 = [
 	"autocomplete",
 	"disabled"
 ];
-var _hoisted_4$15 = ["value", "disabled"];
+var _hoisted_4$16 = ["value", "disabled"];
 //#endregion
 //#region src/components/multi-select/MultiSelect.vue
 var MultiSelect_default = /* @__PURE__ */ defineComponent({
@@ -8874,7 +8874,7 @@ var MultiSelect_default = /* @__PURE__ */ defineComponent({
 								key: option.value,
 								value: option.value,
 								disabled: option.disabled
-							}, toDisplayString(option.label), 9, _hoisted_4$15);
+							}, toDisplayString(option.label), 9, _hoisted_4$16);
 						}), 128))], 8, _hoisted_3$19), [[vModelSelect, model.value]])]),
 						_: 1
 					})) : createCommentVNode("", true),
@@ -8970,8 +8970,8 @@ var _hoisted_3$18 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
-var _hoisted_4$14 = { class: "flex size-4 shrink-0 items-center justify-center" };
-var _hoisted_5$9 = { class: "min-w-0 flex-1" };
+var _hoisted_4$15 = { class: "flex size-4 shrink-0 items-center justify-center" };
+var _hoisted_5$11 = { class: "min-w-0 flex-1" };
 var _hoisted_6$7 = { class: "block truncate" };
 var _hoisted_7$5 = {
 	key: 0,
@@ -9022,7 +9022,7 @@ var ComboboxList_default = /* @__PURE__ */ defineComponent({
 											disabled: option.disabled,
 											class: normalizeClass(unref(selectItem)())
 										}, {
-											default: withCtx(() => [createElementVNode("span", _hoisted_1$70, [renderSlot(_ctx.$slots, "option", { option }, () => [createElementVNode("span", _hoisted_2$34, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_3$18, toDisplayString(option.description), 1)) : createCommentVNode("", true)])]), createElementVNode("span", _hoisted_4$14, [createVNode(unref(ComboboxItemIndicator), null, {
+											default: withCtx(() => [createElementVNode("span", _hoisted_1$70, [renderSlot(_ctx.$slots, "option", { option }, () => [createElementVNode("span", _hoisted_2$34, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_3$18, toDisplayString(option.description), 1)) : createCommentVNode("", true)])]), createElementVNode("span", _hoisted_4$15, [createVNode(unref(ComboboxItemIndicator), null, {
 												default: withCtx(() => [createVNode(unref(Check))]),
 												_: 1
 											})])]),
@@ -9042,7 +9042,7 @@ var ComboboxList_default = /* @__PURE__ */ defineComponent({
 									disabled: item.disabled,
 									class: normalizeClass(unref(selectItem)())
 								}, {
-									default: withCtx(() => [createElementVNode("span", _hoisted_5$9, [renderSlot(_ctx.$slots, "option", { option: item }, () => [createElementVNode("span", _hoisted_6$7, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_7$5, toDisplayString(item.description), 1)) : createCommentVNode("", true)])]), createElementVNode("span", _hoisted_8$2, [createVNode(unref(ComboboxItemIndicator), null, {
+									default: withCtx(() => [createElementVNode("span", _hoisted_5$11, [renderSlot(_ctx.$slots, "option", { option: item }, () => [createElementVNode("span", _hoisted_6$7, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_7$5, toDisplayString(item.description), 1)) : createCommentVNode("", true)])]), createElementVNode("span", _hoisted_8$2, [createVNode(unref(ComboboxItemIndicator), null, {
 										default: withCtx(() => [createVNode(unref(Check))]),
 										_: 1
 									})])]),
@@ -9258,8 +9258,8 @@ var commandEmpty = tv({ base: "text-muted px-4 py-8 text-center text-sm" });
 var _hoisted_1$68 = { class: "truncate" };
 var _hoisted_2$33 = ["textContent"];
 var _hoisted_3$17 = ["textContent"];
-var _hoisted_4$13 = ["textContent"];
-var _hoisted_5$8 = {
+var _hoisted_4$14 = ["textContent"];
+var _hoisted_5$10 = {
 	key: 0,
 	class: "text-muted truncate text-xs"
 };
@@ -9310,8 +9310,8 @@ var CommandPaletteItem_default = /* @__PURE__ */ defineComponent({
 						parts.value[2] ? (openBlock(), createElementBlock("span", {
 							key: 1,
 							textContent: toDisplayString(parts.value[2])
-						}, null, 8, _hoisted_4$13)) : createCommentVNode("", true)
-					]), props.match.item.description ? (openBlock(), createElementBlock("span", _hoisted_5$8, toDisplayString(props.match.item.description), 1)) : createCommentVNode("", true)], 2),
+						}, null, 8, _hoisted_4$14)) : createCommentVNode("", true)
+					]), props.match.item.description ? (openBlock(), createElementBlock("span", _hoisted_5$10, toDisplayString(props.match.item.description), 1)) : createCommentVNode("", true)], 2),
 					props.match.item.kbd?.length ? (openBlock(), createElementBlock("span", {
 						key: 1,
 						class: normalizeClass(unref(commandItemHint)())
@@ -9658,7 +9658,7 @@ var _hoisted_3$16 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
-var _hoisted_4$12 = {
+var _hoisted_4$13 = {
 	key: 1,
 	class: "flex size-4 shrink-0 items-center justify-center"
 };
@@ -9680,7 +9680,7 @@ var ListboxOptionContent_default = /* @__PURE__ */ defineComponent({
 			}, () => [createElementVNode("span", _hoisted_2$32, toDisplayString(props.option.label), 1), props.option.description ? (openBlock(), createElementBlock("span", _hoisted_3$16, toDisplayString(props.option.description), 1)) : createCommentVNode("", true)])]), slots.trailing ? renderSlot(_ctx.$slots, "trailing", {
 				option: props.option,
 				selected: unref(selected)
-			}, void 0, void 0, 0) : (openBlock(), createElementBlock("span", _hoisted_4$12, [createVNode(unref(ListboxItemIndicator), null, {
+			}, void 0, void 0, 0) : (openBlock(), createElementBlock("span", _hoisted_4$13, [createVNode(unref(ListboxItemIndicator), null, {
 				default: withCtx(() => [createVNode(unref(Check))]),
 				_: 1
 			})]))], 64);
@@ -10090,12 +10090,12 @@ var _hoisted_1$65 = [
 ];
 var _hoisted_2$31 = ["aria-selected", "aria-checked"];
 var _hoisted_3$15 = ["onClick"];
-var _hoisted_4$11 = {
+var _hoisted_4$12 = {
 	key: 1,
 	class: "size-5 shrink-0",
 	"aria-hidden": "true"
 };
-var _hoisted_5$7 = { class: "min-w-0 flex-1" };
+var _hoisted_5$9 = { class: "min-w-0 flex-1" };
 var _hoisted_6$6 = { class: "block truncate" };
 var _hoisted_7$4 = {
 	key: 0,
@@ -10180,13 +10180,13 @@ var Tree_default = /* @__PURE__ */ defineComponent({
 							}, [createVNode(DisclosureIcon_default, {
 								direction: "end",
 								open: isExpanded
-							}, null, 8, ["open"])], 10, _hoisted_3$15)) : (openBlock(), createElementBlock("span", _hoisted_4$11)),
+							}, null, 8, ["open"])], 10, _hoisted_3$15)) : (openBlock(), createElementBlock("span", _hoisted_4$12)),
 							props.multiple ? (openBlock(), createBlock(TreeCheck_default, {
 								key: 2,
 								selected: unref(state)(item.value).selected,
 								indeterminate: unref(state)(item.value).indeterminate
 							}, null, 8, ["selected", "indeterminate"])) : createCommentVNode("", true),
-							createElementVNode("span", _hoisted_5$7, [renderSlot(_ctx.$slots, "node", mergeProps({
+							createElementVNode("span", _hoisted_5$9, [renderSlot(_ctx.$slots, "node", mergeProps({
 								node: item.value,
 								expanded: isExpanded
 							}, { ref_for: true }, unref(state)(item.value)), () => [createElementVNode("span", _hoisted_6$6, toDisplayString(item.value.label), 1), item.value.description ? (openBlock(), createElementBlock("span", _hoisted_7$4, toDisplayString(item.value.description), 1)) : createCommentVNode("", true)])]),
@@ -10450,11 +10450,11 @@ var _hoisted_1$63 = [
 ];
 var _hoisted_2$29 = { class: "min-w-0 flex-1 truncate" };
 var _hoisted_3$14 = ["onClick"];
-var _hoisted_4$10 = {
+var _hoisted_4$11 = {
 	key: 1,
 	class: "size-5 shrink-0"
 };
-var _hoisted_5$6 = { class: "min-w-0 flex-1" };
+var _hoisted_5$8 = { class: "min-w-0 flex-1" };
 var _hoisted_6$5 = { class: "block truncate" };
 var _hoisted_7$3 = {
 	key: 0,
@@ -10598,8 +10598,8 @@ var TreeSelect_default = /* @__PURE__ */ defineComponent({
 												}, [createVNode(DisclosureIcon_default, {
 													direction: "end",
 													open: isExpanded
-												}, null, 8, ["open"])], 10, _hoisted_3$14)) : (openBlock(), createElementBlock("span", _hoisted_4$10)),
-												createElementVNode("span", _hoisted_5$6, [renderSlot(_ctx.$slots, "node", { node: item.value }, () => [createElementVNode("span", _hoisted_6$5, toDisplayString(item.value.label), 1), item.value.description ? (openBlock(), createElementBlock("span", _hoisted_7$3, toDisplayString(item.value.description), 1)) : createCommentVNode("", true)])]),
+												}, null, 8, ["open"])], 10, _hoisted_3$14)) : (openBlock(), createElementBlock("span", _hoisted_4$11)),
+												createElementVNode("span", _hoisted_5$8, [renderSlot(_ctx.$slots, "node", { node: item.value }, () => [createElementVNode("span", _hoisted_6$5, toDisplayString(item.value.label), 1), item.value.description ? (openBlock(), createElementBlock("span", _hoisted_7$3, toDisplayString(item.value.description), 1)) : createCommentVNode("", true)])]),
 												createElementVNode("span", _hoisted_8$1, [isSelected ? (openBlock(), createBlock(unref(Check), { key: 0 })) : createCommentVNode("", true)])
 											]),
 											_: 2
@@ -15794,8 +15794,8 @@ var _hoisted_3$11 = {
 	key: 1,
 	class: "flex items-start justify-between gap-4 px-(--hn-panel-p)"
 };
-var _hoisted_4$9 = { class: "flex min-w-0 flex-col gap-1.5" };
-var _hoisted_5$5 = { class: "flex min-w-0 items-center gap-2" };
+var _hoisted_4$10 = { class: "flex min-w-0 flex-col gap-1.5" };
+var _hoisted_5$7 = { class: "flex min-w-0 items-center gap-2" };
 var _hoisted_6$4 = {
 	key: 0,
 	class: "text-muted flex shrink-0 [&_svg]:size-5",
@@ -15916,7 +15916,7 @@ var Sheet_default = /* @__PURE__ */ defineComponent({
 									"aria-hidden": "true",
 									"data-disabled": props.locked ? "" : void 0,
 									class: normalizeClass(unref(sheetHandle)({ header: props.header && !slots.body }))
-								}, null, 10, _hoisted_2$22)) : createCommentVNode("", true), props.header && !slots.body ? (openBlock(), createElementBlock("div", _hoisted_3$11, [createElementVNode("div", _hoisted_4$9, [createElementVNode("div", _hoisted_5$5, [slots.icon ? (openBlock(), createElementBlock("span", _hoisted_6$4, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), createVNode(unref(DialogTitle), { "as-child": "" }, {
+								}, null, 10, _hoisted_2$22)) : createCommentVNode("", true), props.header && !slots.body ? (openBlock(), createElementBlock("div", _hoisted_3$11, [createElementVNode("div", _hoisted_4$10, [createElementVNode("div", _hoisted_5$7, [slots.icon ? (openBlock(), createElementBlock("span", _hoisted_6$4, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), createVNode(unref(DialogTitle), { "as-child": "" }, {
 									default: withCtx(() => [createVNode(Heading_default, {
 										level: 2,
 										size: "lg",
@@ -16820,7 +16820,7 @@ var _hoisted_1$32 = {
 };
 var _hoisted_2$19 = { class: "hn-collapse-body" };
 var _hoisted_3$10 = ["data-tone"];
-var _hoisted_4$8 = ["aria-live"];
+var _hoisted_4$9 = ["aria-live"];
 //#endregion
 //#region src/components/banner/Banner.vue
 var Banner_default = /* @__PURE__ */ defineComponent({
@@ -16914,7 +16914,7 @@ var Banner_default = /* @__PURE__ */ defineComponent({
 						index: at.value
 					})], 2))]),
 					_: 3
-				}, 8, ["enter-from-class", "leave-to-class"])], 8, _hoisted_4$8)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [renderSlot(_ctx.$slots, "icon", {}, () => [props.icon ? (openBlock(), createBlock(resolveDynamicComponent(icon.value), {
+				}, 8, ["enter-from-class", "leave-to-class"])], 8, _hoisted_4$9)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [renderSlot(_ctx.$slots, "icon", {}, () => [props.icon ? (openBlock(), createBlock(resolveDynamicComponent(icon.value), {
 					key: 0,
 					class: normalizeClass(unref(bannerIcon)()),
 					"aria-hidden": "true"
@@ -17597,8 +17597,8 @@ var _hoisted_1$26 = [
 ];
 var _hoisted_2$16 = ["id", "for"];
 var _hoisted_3$9 = ["id"];
-var _hoisted_4$7 = ["id"];
-var _hoisted_5$4 = {
+var _hoisted_4$8 = ["id"];
+var _hoisted_5$6 = {
 	key: 0,
 	"data-hn-form-field-message": "",
 	class: "hn-collapse [--hn-collapse-out:var(--hn-duration-fast)]"
@@ -17714,14 +17714,14 @@ var FormField_default = /* @__PURE__ */ defineComponent({
 					key: 0,
 					id: unref(descriptionId),
 					class: normalizeClass(unref(formFieldDescription)())
-				}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(props.description), 1)])], 10, _hoisted_4$7)) : createCommentVNode("", true),
+				}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(props.description), 1)])], 10, _hoisted_4$8)) : createCommentVNode("", true),
 				createVNode(Transition, mergeProps({
 					"enter-from-class": "hn-collapse-closed",
 					"enter-to-class": "hn-collapse-open",
 					"leave-from-class": "hn-collapse-open",
 					"leave-to-class": "hn-collapse-closed"
 				}, toHandlers(unref(hooks))), {
-					default: withCtx(() => [message.value ? (openBlock(), createElementBlock("div", _hoisted_5$4, [createElementVNode("div", _hoisted_6$3, [createElementVNode("p", {
+					default: withCtx(() => [message.value ? (openBlock(), createElementBlock("div", _hoisted_5$6, [createElementVNode("div", _hoisted_6$3, [createElementVNode("p", {
 						id: unref(messageId),
 						class: normalizeClass(unref(formFieldMessage)()),
 						"aria-live": "polite"
@@ -18280,7 +18280,7 @@ var codeBlockLabel = tv({ base: "text-faint font-mono text-xs select-none" });
 var _hoisted_1$23 = ["data-lang"];
 var _hoisted_2$14 = ["innerHTML"];
 var _hoisted_3$8 = { key: 1 };
-var _hoisted_4$6 = { key: 2 };
+var _hoisted_4$7 = { key: 2 };
 //#endregion
 //#region src/components/code-block/CodeBlock.vue
 var CodeBlock_default = /* @__PURE__ */ defineComponent({
@@ -18322,7 +18322,7 @@ var CodeBlock_default = /* @__PURE__ */ defineComponent({
 							style: normalizeStyle(tk.htmlStyle)
 						}, toDisplayString(tk.content), 5);
 					}), 128))], 64);
-				}), 128))])) : (openBlock(), createElementBlock("code", _hoisted_4$6, toDisplayString(__props.code), 1))], 2)]),
+				}), 128))])) : (openBlock(), createElementBlock("code", _hoisted_4$7, toDisplayString(__props.code), 1))], 2)]),
 				_: 1
 			}, 8, ["label", "class"]), createElementVNode("div", { class: normalizeClass(unref(codeBlockActions)()) }, [tag.value ? (openBlock(), createElementBlock("span", {
 				key: 0,
@@ -19388,7 +19388,7 @@ var sidebarRegion = tv({
 			true: "w-full",
 			false: "w-[calc(16rem-1px)] px-3"
 		},
-		footer: { true: "border-line border-t" }
+		footer: { true: "border-line w-full border-t" }
 	}
 });
 var sidebarLabel = tv({ base: "hn-sidebar-label min-w-0" });
@@ -19429,9 +19429,10 @@ var SidebarLabel_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/components/sidebar/Sidebar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$17 = ["data-state", "inert"];
-var _hoisted_2$13 = ["data-state", "inert"];
-var _hoisted_3$7 = { class: "hn-collapse-body" };
-var _hoisted_4$5 = ["aria-label"];
+var _hoisted_2$13 = { class: "min-w-0 flex-1" };
+var _hoisted_3$7 = ["data-state", "inert"];
+var _hoisted_4$6 = { class: "hn-collapse-body" };
+var _hoisted_5$5 = ["aria-label"];
 //#endregion
 //#region src/components/sidebar/Sidebar.vue
 var Sidebar_default = /* @__PURE__ */ defineComponent({
@@ -19439,6 +19440,10 @@ var Sidebar_default = /* @__PURE__ */ defineComponent({
 	__name: "Sidebar",
 	props: {
 		label: {},
+		closable: {
+			type: Boolean,
+			default: true
+		},
 		class: {}
 	},
 	setup(__props) {
@@ -19451,42 +19456,61 @@ var Sidebar_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createElementBlock("aside", {
 				"data-state": state.value,
 				inert: state.value === "hidden",
-				class: normalizeClass(unref(cn)(unref(sidebarRoot)({ inDrawer: inDrawer.value }), props.class))
+				class: normalizeClass(unref(cn)(unref(sidebarRoot)({ inDrawer: inDrawer.value }), props.class)),
+				onTransitionrun: _cache[3] || (_cache[3] = (...args) => unref(sidebar)?.onTransitionRun && unref(sidebar)?.onTransitionRun(...args))
 			}, [
 				_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
 					key: 0,
-					class: normalizeClass(unref(sidebarRegion)({ inDrawer: inDrawer.value }))
-				}, [renderSlot(_ctx.$slots, "header", { state: state.value })], 2)) : _ctx.$slots.icon || _ctx.$slots.wordmark ? (openBlock(), createElementBlock("div", {
+					class: normalizeClass(unref(cn)(unref(sidebarRegion)({ inDrawer: inDrawer.value }), "flex items-center gap-2"))
+				}, [createElementVNode("div", _hoisted_2$13, [renderSlot(_ctx.$slots, "header", { state: state.value })]), inDrawer.value && props.closable ? (openBlock(), createBlock(CloseButton_default, {
+					key: 0,
+					class: "shrink-0",
+					onClick: _cache[0] || (_cache[0] = ($event) => unref(sidebar)?.toggle())
+				})) : createCommentVNode("", true)], 2)) : _ctx.$slots.icon || _ctx.$slots.wordmark ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					class: "hn-collapse shrink-0",
 					"data-state": state.value === "rail" && !_ctx.$slots.icon ? "closed" : "open",
 					inert: state.value === "rail" && !_ctx.$slots.icon
-				}, [createElementVNode("div", _hoisted_3$7, [createElementVNode("div", { class: normalizeClass(unref(sidebarRegion)({ inDrawer: inDrawer.value })) }, [createElementVNode("div", { class: normalizeClass(unref(sidebarBrand)()) }, [_ctx.$slots.icon ? (openBlock(), createElementBlock("div", {
-					key: 0,
-					class: normalizeClass(unref(sidebarIcon)())
-				}, [renderSlot(_ctx.$slots, "icon", { state: state.value })], 2)) : createCommentVNode("", true), _ctx.$slots.wordmark ? (openBlock(), createBlock(SidebarLabel_default, {
-					key: 1,
-					as: "div",
-					class: normalizeClass(unref(sidebarWordmark)())
+				}, [createElementVNode("div", _hoisted_4$6, [createElementVNode("div", { class: normalizeClass(unref(sidebarRegion)({ inDrawer: inDrawer.value })) }, [createElementVNode("div", { class: normalizeClass(unref(sidebarBrand)()) }, [
+					_ctx.$slots.icon ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(sidebarIcon)())
+					}, [renderSlot(_ctx.$slots, "icon", { state: state.value })], 2)) : createCommentVNode("", true),
+					_ctx.$slots.wordmark ? (openBlock(), createBlock(SidebarLabel_default, {
+						key: 1,
+						as: "div",
+						class: normalizeClass(unref(sidebarWordmark)())
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "wordmark", { state: state.value })]),
+						_: 3
+					}, 8, ["class"])) : createCommentVNode("", true),
+					inDrawer.value && props.closable ? (openBlock(), createBlock(CloseButton_default, {
+						key: 2,
+						class: "ms-auto shrink-0",
+						onClick: _cache[1] || (_cache[1] = ($event) => unref(sidebar)?.toggle())
+					})) : createCommentVNode("", true)
+				], 2)], 2)])], 8, _hoisted_3$7)) : inDrawer.value && props.closable ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass(unref(cn)(unref(sidebarRegion)({ inDrawer: inDrawer.value }), "flex justify-end"))
+				}, [createVNode(CloseButton_default, { onClick: _cache[2] || (_cache[2] = ($event) => unref(sidebar)?.toggle()) })], 2)) : createCommentVNode("", true),
+				createVNode(ScrollArea_default, {
+					shadow: false,
+					class: "min-h-0 flex-1"
 				}, {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "wordmark", { state: state.value })]),
-					_: 3
-				}, 8, ["class"])) : createCommentVNode("", true)], 2)], 2)])], 8, _hoisted_2$13)) : createCommentVNode("", true),
-				createVNode(ScrollArea_default, { class: "min-h-0 flex-1" }, {
 					default: withCtx(() => [createElementVNode("nav", {
 						"aria-label": props.label ?? unref(t).sidebar.navLabel,
 						class: normalizeClass(unref(cn)("flex flex-col gap-1 py-2", !inDrawer.value && "px-2.5"))
-					}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_4$5)]),
+					}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_5$5)]),
 					_: 3
 				}),
 				_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
-					key: 2,
+					key: 3,
 					class: normalizeClass(unref(sidebarRegion)({
 						inDrawer: inDrawer.value,
 						footer: true
 					}))
 				}, [renderSlot(_ctx.$slots, "footer", { state: state.value })], 2)) : createCommentVNode("", true)
-			], 10, _hoisted_1$17);
+			], 42, _hoisted_1$17);
 		};
 	}
 });
@@ -19499,7 +19523,7 @@ var _hoisted_2$12 = [
 	"inert"
 ];
 var _hoisted_3$6 = ["data-collapsed"];
-var _hoisted_4$4 = { class: "flex flex-col gap-0.5 pt-1" };
+var _hoisted_4$5 = { class: "flex flex-col gap-0.5 pt-1" };
 //#endregion
 //#region src/components/sidebar/SidebarGroup.vue
 var SidebarGroup_default = /* @__PURE__ */ defineComponent({
@@ -19548,7 +19572,7 @@ var SidebarGroup_default = /* @__PURE__ */ defineComponent({
 					class: "hn-sidebar-label border-line pointer-events-none absolute inset-x-2 top-1/2 border-t",
 					"data-collapsed": rail.value ? void 0 : ""
 				}, null, 8, _hoisted_3$6)]), createVNode(CollapsibleContent_default, null, {
-					default: withCtx(() => [createElementVNode("div", _hoisted_4$4, [renderSlot(_ctx.$slots, "default")])]),
+					default: withCtx(() => [createElementVNode("div", _hoisted_4$5, [renderSlot(_ctx.$slots, "default")])]),
 					_: 3
 				})]),
 				_: 3
@@ -19608,12 +19632,12 @@ var _hoisted_1$15 = {
 };
 var _hoisted_2$11 = { class: "flex min-w-0 flex-col gap-1.5" };
 var _hoisted_3$5 = { class: "flex min-w-0 items-center gap-2" };
-var _hoisted_4$3 = {
+var _hoisted_4$4 = {
 	key: 0,
 	class: "text-muted flex shrink-0 [&_svg]:size-5",
 	"aria-hidden": "true"
 };
-var _hoisted_5$3 = { class: "px-(--hn-panel-p) py-1" };
+var _hoisted_5$4 = { class: "px-(--hn-panel-p) py-1" };
 var _hoisted_6$2 = {
 	key: 2,
 	class: "flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
@@ -19704,7 +19728,7 @@ var Drawer_default = /* @__PURE__ */ defineComponent({
 								default: withCtx(() => [createTextVNode(toDisplayString(props.description), 1)]),
 								_: 1
 							})) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), slots.body ? renderSlot(_ctx.$slots, "body", { close }, void 0, void 0, 1) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-								props.header ? (openBlock(), createElementBlock("div", _hoisted_1$15, [createElementVNode("div", _hoisted_2$11, [createElementVNode("div", _hoisted_3$5, [slots.icon ? (openBlock(), createElementBlock("span", _hoisted_4$3, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), createVNode(unref(DialogTitle), { "as-child": "" }, {
+								props.header ? (openBlock(), createElementBlock("div", _hoisted_1$15, [createElementVNode("div", _hoisted_2$11, [createElementVNode("div", _hoisted_3$5, [slots.icon ? (openBlock(), createElementBlock("span", _hoisted_4$4, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), createVNode(unref(DialogTitle), { "as-child": "" }, {
 									default: withCtx(() => [createVNode(Heading_default, {
 										level: 2,
 										size: "lg",
@@ -19739,7 +19763,7 @@ var Drawer_default = /* @__PURE__ */ defineComponent({
 									ref: scrollArea,
 									class: "min-h-0 grow"
 								}, {
-									default: withCtx(() => [createElementVNode("div", _hoisted_5$3, [renderSlot(_ctx.$slots, "content", { close })])]),
+									default: withCtx(() => [createElementVNode("div", _hoisted_5$4, [renderSlot(_ctx.$slots, "content", { close })])]),
 									_: 3
 								}, 512)) : createCommentVNode("", true),
 								_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6$2, [renderSlot(_ctx.$slots, "footer", { close })])) : createCommentVNode("", true)
@@ -19759,14 +19783,18 @@ var Drawer_default = /* @__PURE__ */ defineComponent({
 //#region src/components/sidebar/DrawerScope.ts
 var DrawerScope_default = defineComponent({
 	name: "HnSidebarDrawerScope",
-	setup(_, { slots }) {
+	props: { close: {
+		type: Function,
+		required: true
+	} },
+	setup(props, { slots }) {
 		provideSidebar({
 			state: ref("expanded"),
-			toggle: () => {},
+			toggle: () => props.close(),
 			openMobile: () => {},
 			inDrawer: true
 		});
-		return () => h("div", { class: "contents" }, slots.default?.());
+		return () => h("div", { class: "flex min-h-0 flex-1 flex-col overflow-hidden px-(--hn-panel-p)" }, slots.default?.());
 	}
 });
 //#endregion
@@ -19786,6 +19814,41 @@ function useDesktopQuery(query = "(min-width: 64rem)") {
 	return isDesktop;
 }
 //#endregion
+//#region src/components/app-shell/composables/useSidebarScrollUpdates.ts
+function useSidebarScrollUpdates(area) {
+	const transitioning = shallowRef(false);
+	let paused;
+	let revision = 0;
+	function resume() {
+		const instance = paused;
+		paused = void 0;
+		if (instance && !instance.state().destroyed) instance.sleep(false);
+	}
+	const stop = watch([() => area.value?.instance, transitioning], ([instance, active]) => {
+		if (active && instance === paused) return;
+		resume();
+		if (active && instance && !instance.state().sleeping && !instance.state().destroyed) {
+			paused = instance;
+			instance.sleep(true);
+		}
+	}, { flush: "sync" });
+	onBeforeUnmount(() => {
+		revision++;
+		stop();
+		resume();
+	});
+	return (event) => {
+		if (event.target !== event.currentTarget || event.propertyName !== "width") return;
+		const animations = event.currentTarget.getAnimations().filter((animation) => animation instanceof CSSTransition && animation.transitionProperty === "width");
+		if (!animations.length) return;
+		const current = ++revision;
+		transitioning.value = true;
+		Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {
+			if (current === revision) transitioning.value = false;
+		});
+	};
+}
+//#endregion
 //#region src/components/app-shell/AppShell.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$14 = {
 	key: 0,
@@ -19796,8 +19859,8 @@ var _hoisted_3$4 = {
 	key: 0,
 	class: "hidden h-full shrink-0 lg:block"
 };
-var _hoisted_4$2 = { class: "flex min-h-0 min-w-0 flex-1 flex-col" };
-var _hoisted_5$2 = {
+var _hoisted_4$3 = { class: "flex min-h-0 min-w-0 flex-1 flex-col" };
+var _hoisted_5$3 = {
 	key: 0,
 	class: "border-line bg-canvas shrink-0 border-b"
 };
@@ -19838,6 +19901,7 @@ var AppShell_default = /* @__PURE__ */ defineComponent({
 			mainArea: main
 		});
 		const isDesktop = useDesktopQuery();
+		const onTransitionRun = useSidebarScrollUpdates(main);
 		function toggle() {
 			if (!isDesktop.value) {
 				mobileOpen.value = !mobileOpen.value;
@@ -19848,7 +19912,8 @@ var AppShell_default = /* @__PURE__ */ defineComponent({
 		provideSidebar({
 			state: computed(() => sidebar.value),
 			toggle,
-			openMobile: () => mobileOpen.value = true
+			openMobile: () => mobileOpen.value = true,
+			onTransitionRun
 		});
 		const router = getCurrentInstance()?.appContext.config.globalProperties.$router;
 		watch(() => router?.currentRoute?.value?.fullPath, () => {
@@ -19858,7 +19923,7 @@ var AppShell_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createBlock(TooltipProvider_default, null, {
 				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(cn)("bg-canvas text-fg flex h-screen flex-col overflow-hidden", props.class)) }, [
 					_ctx.$slots.banner ? (openBlock(), createElementBlock("div", _hoisted_1$14, [renderSlot(_ctx.$slots, "banner")])) : createCommentVNode("", true),
-					createElementVNode("div", _hoisted_2$10, [_ctx.$slots.sidebar ? (openBlock(), createElementBlock("div", _hoisted_3$4, [renderSlot(_ctx.$slots, "sidebar")])) : createCommentVNode("", true), createElementVNode("div", _hoisted_4$2, [_ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_5$2, [createElementVNode("div", _hoisted_6$1, [renderSlot(_ctx.$slots, "header")])])) : createCommentVNode("", true), createElementVNode("main", _hoisted_7, [createVNode(ScrollArea_default, {
+					createElementVNode("div", _hoisted_2$10, [_ctx.$slots.sidebar ? (openBlock(), createElementBlock("div", _hoisted_3$4, [renderSlot(_ctx.$slots, "sidebar")])) : createCommentVNode("", true), createElementVNode("div", _hoisted_4$3, [_ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_5$3, [createElementVNode("div", _hoisted_6$1, [renderSlot(_ctx.$slots, "header")])])) : createCommentVNode("", true), createElementVNode("main", _hoisted_7, [createVNode(ScrollArea_default, {
 						ref_key: "main",
 						ref: main,
 						"data-scroll-restore": props.restoreKey,
@@ -19876,10 +19941,10 @@ var AppShell_default = /* @__PURE__ */ defineComponent({
 						size: "sm",
 						class: "lg:hidden"
 					}, {
-						content: withCtx(() => [createVNode(unref(DrawerScope_default), null, {
+						body: withCtx(({ close }) => [createVNode(unref(DrawerScope_default), { close }, {
 							default: withCtx(() => [renderSlot(_ctx.$slots, "sidebar")]),
 							_: 3
-						})]),
+						}, 8, ["close"])]),
 						_: 3
 					}, 8, ["open", "title"])) : createCommentVNode("", true)
 				], 2)]),
@@ -20072,7 +20137,8 @@ function useScrollSpy(entries) {
 		const hash = decodeURIComponent(location.hash.slice(1));
 		if (hash && entries().some((entry) => entry.id === hash)) visible.value = /* @__PURE__ */ new Set([hash]);
 		locate();
-		watch(entries, () => {
+		watch(entries, (next, previous) => {
+			if (next.length === previous.length && next.every((entry, index) => entry.id === previous[index]?.id)) return;
 			visible.value = /* @__PURE__ */ new Set();
 			locate();
 		});
@@ -20097,6 +20163,25 @@ function useScrollSpy(entries) {
 	};
 }
 //#endregion
+//#region src/components/anchor/composables/useAnchor.ts
+function useAnchor(items) {
+	const entries = computed(() => items().flatMap((item) => [{
+		id: item.id,
+		label: item.label,
+		depth: 0,
+		item
+	}, ...(item.children ?? []).map((child) => ({
+		id: child.id,
+		label: child.label,
+		depth: 1,
+		item: child
+	}))]));
+	return {
+		entries,
+		...useScrollSpy(() => entries.value)
+	};
+}
+//#endregion
 //#region src/components/anchor/Anchor.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$9 = ["aria-label"];
 var _hoisted_2$6 = { class: "border-line relative grid grid-cols-1 border-s" };
@@ -20105,6 +20190,11 @@ var _hoisted_3$2 = [
 	"aria-current",
 	"onClick"
 ];
+var _hoisted_4$2 = { class: "min-w-0 flex-1 wrap-break-word" };
+var _hoisted_5$2 = {
+	key: 0,
+	class: "flex shrink-0 items-center empty:hidden"
+};
 //#endregion
 //#region src/components/anchor/Anchor.vue
 var Anchor_default = /* @__PURE__ */ defineComponent({
@@ -20118,16 +20208,7 @@ var Anchor_default = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		const props = __props;
 		const t = useUiLocale();
-		const entries = computed(() => props.items.flatMap((item) => [{
-			id: item.id,
-			label: item.label,
-			depth: 0
-		}, ...(item.children ?? []).map((child) => ({
-			id: child.id,
-			label: child.label,
-			depth: 1
-		}))]));
-		const { visible, current, span, jump } = useScrollSpy(() => entries.value);
+		const { entries, visible, current, span, jump } = useAnchor(() => props.items);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("nav", {
 				"aria-label": props.label ?? unref(t).anchor.navLabel,
@@ -20147,7 +20228,7 @@ var Anchor_default = /* @__PURE__ */ defineComponent({
 					class: "bg-accent col-start-1 -ms-px w-0.5 self-stretch justify-self-start rounded-full"
 				}, null, 8, ["style"])) : createCommentVNode("", true)]),
 				_: 1
-			}), (openBlock(true), createElementBlock(Fragment, null, renderList(entries.value, (entry, index) => {
+			}), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(entries), (entry, index) => {
 				return openBlock(), createElementBlock("li", {
 					key: entry.id,
 					class: "col-start-1",
@@ -20155,9 +20236,12 @@ var Anchor_default = /* @__PURE__ */ defineComponent({
 				}, [createElementVNode("a", {
 					href: `#${entry.id}`,
 					"aria-current": unref(current) === entry.id ? "location" : void 0,
-					class: normalizeClass(unref(cn)("hn-link block py-1 text-sm", entry.depth === 0 ? "ps-3" : "ps-6", unref(visible).has(entry.id) ? "font-medium [--hn-link-color:var(--hn-fg-default)]" : "[--hn-link-color:var(--hn-fg-muted)]")),
+					class: normalizeClass(unref(cn)("hn-link flex items-center gap-(--hn-control-gap) py-1 text-sm", entry.depth === 0 ? "ps-3" : "ps-6", unref(visible).has(entry.id) ? "font-medium [--hn-link-color:var(--hn-fg-default)]" : "[--hn-link-color:var(--hn-fg-muted)]")),
 					onClick: ($event) => unref(jump)($event, entry.id)
-				}, toDisplayString(entry.label), 11, _hoisted_3$2)], 4);
+				}, [createElementVNode("span", _hoisted_4$2, toDisplayString(entry.label), 1), _ctx.$slots.trailing ? (openBlock(), createElementBlock("span", _hoisted_5$2, [renderSlot(_ctx.$slots, "trailing", {
+					item: entry.item,
+					active: unref(current) === entry.id
+				})])) : createCommentVNode("", true)], 10, _hoisted_3$2)], 4);
 			}), 128))])], 10, _hoisted_1$9);
 		};
 	}